fix: resolve ui package imports and build configuration

Author: talhadevelopes

apps/web/app/(pages)/playground/[projectId]/_components/ChatSection.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button } from "@workspace/ui/components/button";
+import { Button } from "@workspace/ui";
 import { ArrowUpRight, Loader2 } from "lucide-react";
 import { useTheme } from "next-themes";
 import { FrameMessage } from "@workspace/types";

apps/web/app/(pages)/playground/[projectId]/_components/PlaygroundHeader.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@workspace/ui/components/button"
+import { Button } from "@workspace/ui"
 import { BookAIcon, Loader2, Save } from "lucide-react"
 import { useDesignStore } from '@/store/useDesignStore';
 import { PlaygroundHeaderProps } from "@workspace/types";

apps/web/app/(pages)/playground/[projectId]/_components/ViewCodeBlock.tsx

@@ -1,7 +1,4 @@
-import { Button } from "@workspace/ui/components/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@workspace/ui/components/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@workspace/ui/components/tabs";
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@workspace/ui";
 import { Copy, Check, Download } from "lucide-react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { prism } from "react-syntax-highlighter/dist/cjs/styles/prism";

apps/web/next.config.mjs

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ["@workspace/ui"],
+  // Remove transpilePackages - it's forcing Next.js to use src files
+  experimental: {
+    externalDir: true,
+  },
 }
 
-export default nextConfig
+export default nextConfig

apps/web/tsconfig.json

@@ -4,8 +4,6 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"],
-      "@workspace/ui": ["../../packages/ui/src"],
-      "@workspace/ui/*": ["../../packages/ui/src/*"],
       "@workspace/types": ["../../packages/types/src"],
       "@workspace/types/*": ["../../packages/types/src/*"]
     },

packages/ui/package.json

@@ -43,10 +43,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
-    "./components/*": "./dist/components/*.js",
-    "./lib/*": "./dist/lib/*.js",
     "./globals.css": "./src/styles/globals.css",
     "./postcss.config": "./postcss.config.mjs"
   }

packages/ui/src/components/badge.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@workspace/ui/lib/utils";
+import { cn } from "../lib/utils.js"
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

packages/ui/src/components/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "../lib/utils.js"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",

packages/ui/src/components/card.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "@workspace/ui/lib/utils";
+import { cn } from "../lib/utils.js";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (

packages/ui/src/components/dialog.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"
 
-import { cn } from "@workspace/ui/lib/utils"
+import { cn } from "../lib/utils.js"
 
 function Dialog({
   ...props