@srcroot/ui 0.0.48 → 0.0.52

package/dist/index.js

@@ -27,7 +27,8 @@ var THEME_METADATA = {
   rose: { name: "Rose", description: "Soft and elegant pinkish-red" },
   blue: { name: "Blue", description: "Trustworthy corporate blue" },
   green: { name: "Green", description: "Nature and success green" },
-  orange: { name: "Orange", description: "Energetic and creative orange" }
+  orange: { name: "Orange", description: "Energetic and creative orange" },
+  glass: { name: "Glass", description: "Modern glassmorphic aesthetic" }
 };
 var ThemeService = class {
   registryThemesPath;
@@ -336,7 +337,7 @@ export function cn(...inputs: ClassValue[]) {
   }
   async installDependencies() {
     const cfg = this.config;
-    const spinner = ora("Installing dependencies...").start();
+    const spinner = ora("Checking dependencies...").start();
     const deps = [
       "clsx",
       "tailwind-merge",
@@ -347,15 +348,25 @@ export function cn(...inputs: ClassValue[]) {
       deps.push("tailwindcss-animate");
     }
     try {
-      await execa(cfg.packageManager, [cfg.installCmd, ...deps], {
+      const packageJsonPath = path3.join(cfg.cwd, "package.json");
+      const pkg = await fs3.readJson(packageJsonPath);
+      const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+      const missingDeps = deps.filter((dep) => !allDeps[dep]);
+      if (missingDeps.length === 0) {
+        spinner.succeed("Dependencies already installed");
+        return;
+      }
+      spinner.text = "Installing dependencies...";
+      await execa(cfg.packageManager, [cfg.installCmd, ...missingDeps], {
         cwd: cfg.cwd,
         stdio: "pipe"
       });
-      spinner.succeed(`Installed ${deps.length} dependencies`);
+      spinner.succeed(`Installed ${missingDeps.length} dependencies`);
     } catch (error) {
       spinner.fail("Failed to install dependencies");
+      const missingDeps = deps;
       logger.warn(`
-Manually run: ${cfg.packageManager} ${cfg.installCmd} ${deps.join(" ")}`);
+Manually run: ${cfg.packageManager} ${cfg.installCmd} ${missingDeps.join(" ")}`);
     }
   }
   printSuccess() {
@@ -387,7 +398,7 @@ var REGISTRY = {
     file: "ui/button.tsx",
     description: "Polymorphic button with variants",
     category: "Core",
-    dependencies: []
+    dependencies: ["slot"]
   },
   badge: {
     file: "ui/badge.tsx",
@@ -426,7 +437,7 @@ var REGISTRY = {
     description: "Text input field",
     category: "Forms",
     dependencies: [],
-    registryDependencies: ["react-icons"]
+    registryDependencies: ["react-icons^5.5.0"]
   },
   textarea: {
     file: "ui/textarea.tsx",
@@ -519,37 +530,37 @@ var REGISTRY = {
     file: "ui/dialog.tsx",
     description: "Modal dialog",
     category: "Overlay / Feedback",
-    dependencies: []
+    dependencies: ["slot"]
   },
   "alert-dialog": {
     file: "ui/alert-dialog.tsx",
     description: "Confirmation dialog",
     category: "Overlay / Feedback",
-    dependencies: ["dialog"]
+    dependencies: ["dialog", "slot"]
   },
   sheet: {
     file: "ui/sheet.tsx",
     description: "Slide-in panel",
     category: "Overlay / Feedback",
-    dependencies: []
+    dependencies: ["slot"]
   },
   popover: {
     file: "ui/popover.tsx",
     description: "Floating content",
     category: "Overlay / Feedback",
-    dependencies: []
+    dependencies: ["slot"]
   },
   tooltip: {
     file: "ui/tooltip.tsx",
     description: "Hover tooltip",
     category: "Overlay / Feedback",
-    dependencies: []
+    dependencies: ["slot"]
   },
   "dropdown-menu": {
     file: "ui/dropdown-menu.tsx",
     description: "Action dropdown",
     category: "Overlay / Feedback",
-    dependencies: []
+    dependencies: ["slot"]
   },
   toast: {
     file: "ui/toast.tsx",
@@ -568,7 +579,7 @@ var REGISTRY = {
     file: "ui/breadcrumb.tsx",
     description: "Breadcrumb navigation",
     category: "Navigation",
-    dependencies: []
+    dependencies: ["slot"]
   },
   pagination: {
     file: "ui/pagination.tsx",
@@ -617,7 +628,7 @@ var REGISTRY = {
     file: "ui/collapsible.tsx",
     description: "Expandable section",
     category: "Data Display",
-    dependencies: []
+    dependencies: ["slot"]
   },
   carousel: {
     file: "ui/carousel.tsx",
@@ -635,7 +646,7 @@ var REGISTRY = {
     file: "ui/sidebar.tsx",
     description: "Responsive sidebar with mobile drawer",
     category: "Layout",
-    dependencies: ["sheet", "button"]
+    dependencies: ["sheet", "button", "slot"]
   },
   // Added Components
   combobox: {
@@ -672,13 +683,14 @@ var REGISTRY = {
     file: "ui/date-picker.tsx",
     description: "Date picker with calendar",
     category: "Forms",
-    dependencies: ["calendar", "popover", "button"]
+    dependencies: ["calendar", "popover", "button"],
+    registryDependencies: ["date-fns^4.1.0"]
   },
   drawer: {
     file: "ui/drawer.tsx",
     description: "Bottom/top sheet drawer",
     category: "Overlay / Feedback",
-    dependencies: []
+    dependencies: ["slot"]
   },
   "file-upload": {
     file: "ui/file-upload.tsx",
@@ -690,7 +702,7 @@ var REGISTRY = {
     file: "ui/hover-card.tsx",
     description: "Hover-triggered popover",
     category: "Overlay / Feedback",
-    dependencies: []
+    dependencies: ["slot"]
   },
   kbd: {
     file: "ui/kbd.tsx",
@@ -775,7 +787,13 @@ var REGISTRY = {
     description: "Charts using Recharts",
     category: "Data Display",
     dependencies: [],
-    registryDependencies: ["recharts"]
+    registryDependencies: ["recharts^2.15.4"]
+  },
+  slot: {
+    file: "ui/slot.tsx",
+    description: "Slot utility for polymorphic components",
+    category: "Core",
+    dependencies: []
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.48",
+  "version": "0.0.52",
   "description": "A UI library with polymorphic, accessible React components",
   "author": "Shifaul Islam",
   "license": "MIT",
@@ -36,6 +36,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.1",
     "@types/prompts": "^2.4.9",
+    "@types/react": "^19.2.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",

package/src/registry/themes/v3/glass.css

@@ -0,0 +1,154 @@
+/**
+ * @srcroot/ui - Glass Theme (Tailwind 3)
+ * Glassmorphic transparent aesthetic
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+
+        --card: 0 0% 100% / 0.7;
+        --card-foreground: 240 10% 3.9%;
+
+        --popover: 0 0% 100% / 0.7;
+        --popover-foreground: 240 10% 3.9%;
+
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+
+        --secondary: 240 4.8% 95.9% / 0.7;
+        --secondary-foreground: 240 5.9% 10%;
+
+        --muted: 240 4.8% 95.9% / 0.7;
+        --muted-foreground: 240 3.8% 46.1%;
+
+        --accent: 240 4.8% 95.9% / 0.7;
+        --accent-foreground: 240 5.9% 10%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 0 0% 100%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 240 10% 3.9%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 0 0% 100%;
+
+        --border: 240 5.9% 90% / 0.5;
+        --input: 240 5.9% 90% / 0.5;
+        --ring: 240 10% 3.9%;
+
+        --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98% / 0.7;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91% / 0.5;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+
+        --card: 240 10% 3.9% / 0.7;
+        --card-foreground: 0 0% 98%;
+
+        --popover: 240 10% 3.9% / 0.7;
+        --popover-foreground: 0 0% 98%;
+
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+
+        --secondary: 240 3.7% 15.9% / 0.7;
+        --secondary-foreground: 0 0% 98%;
+
+        --muted: 240 3.7% 15.9% / 0.7;
+        --muted-foreground: 240 5% 64.9%;
+
+        --accent: 240 3.7% 15.9% / 0.7;
+        --accent-foreground: 0 0% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 0 0% 100%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 0 0% 98%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 0 0% 98%;
+
+        --border: 240 3.7% 15.9% / 0.5;
+        --input: 240 3.7% 15.9% / 0.5;
+        --ring: 240 4.9% 83.9%;
+
+        --sidebar-background: 240 10% 3.9% / 0.7;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9% / 0.5;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .animate-accordion-up {
+        animation: accordion-up 0.2s ease-out;
+    }
+}

package/src/registry/themes/v4/glass.css

@@ -0,0 +1,181 @@
+/**
+ * @srcroot/ui - Glass Theme (Tailwind 4)
+ * Glassmorphic transparent aesthetic
+ */
+
+@import "tailwindcss";
+
+:root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(240 10% 3.9%);
+
+    --card: hsl(0 0% 100% / 0.7);
+    --card-foreground: hsl(240 10% 3.9%);
+
+    --popover: hsl(0 0% 100% / 0.7);
+    --popover-foreground: hsl(240 10% 3.9%);
+
+    --primary: hsl(240 5.9% 10%);
+    --primary-foreground: hsl(0 0% 98%);
+
+    --secondary: hsl(240 4.8% 95.9% / 0.7);
+    --secondary-foreground: hsl(240 5.9% 10%);
+
+    --muted: hsl(240 4.8% 95.9% / 0.7);
+    --muted-foreground: hsl(240 3.8% 46.1%);
+
+    --accent: hsl(240 4.8% 95.9% / 0.7);
+    --accent-foreground: hsl(240 5.9% 10%);
+
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 98%);
+
+    --success: hsl(142.1 76.2% 36.3%);
+    --success-foreground: hsl(0 0% 100%);
+
+    --warning: hsl(45.4 93.4% 47.5%);
+    --warning-foreground: hsl(240 10% 3.9%);
+
+    --info: hsl(201.3 96.3% 32.2%);
+    --info-foreground: hsl(0 0% 100%);
+
+    --border: hsl(240 5.9% 90% / 0.5);
+    --input: hsl(240 5.9% 90% / 0.5);
+    --ring: hsl(240 10% 3.9%);
+
+    --radius: 0.5rem;
+
+    --sidebar-width: 16rem;
+    --sidebar-width-mobile: 18rem;
+    --sidebar-width-collapsed: 3rem;
+    --sidebar-width-icon: 3rem;
+    --header-height: 3.5rem;
+
+    --sidebar-background: hsl(0 0% 98% / 0.7);
+    --sidebar-foreground: hsl(240 5.3% 26.1%);
+    --sidebar-primary: hsl(240 5.9% 10%);
+    --sidebar-primary-foreground: hsl(0 0% 98%);
+    --sidebar-accent: hsl(240 4.8% 95.9%);
+    --sidebar-accent-foreground: hsl(240 5.9% 10%);
+    --sidebar-border: hsl(220 13% 91% / 0.5);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    --color-sidebar: var(--sidebar-background);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+}
+
+.dark {
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
+
+    --card: hsl(240 10% 3.9% / 0.7);
+    --card-foreground: hsl(0 0% 98%);
+
+    --popover: hsl(240 10% 3.9% / 0.7);
+    --popover-foreground: hsl(0 0% 98%);
+
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(240 5.9% 10%);
+
+    --secondary: hsl(240 3.7% 15.9% / 0.7);
+    --secondary-foreground: hsl(0 0% 98%);
+
+    --muted: hsl(240 3.7% 15.9% / 0.7);
+    --muted-foreground: hsl(240 5% 64.9%);
+
+    --accent: hsl(240 3.7% 15.9% / 0.7);
+    --accent-foreground: hsl(0 0% 98%);
+
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(0 0% 100%);
+
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(0 0% 98%);
+
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(0 0% 98%);
+
+    --border: hsl(240 3.7% 15.9% / 0.5);
+    --input: hsl(240 3.7% 15.9% / 0.5);
+    --ring: hsl(240 4.9% 83.9%);
+
+    --sidebar-background: hsl(240 10% 3.9% / 0.7);
+    --sidebar-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-primary: hsl(224.3 76.3% 48%);
+    --sidebar-primary-foreground: hsl(0 0% 100%);
+    --sidebar-accent: hsl(240 3.7% 15.9%);
+    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-border: hsl(240 3.7% 15.9% / 0.5);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: Arial, Helvetica, sans-serif;
+}

package/src/registry/ui/alert-dialog.tsx

@@ -1,5 +1,7 @@
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
 
 interface AlertDialogContextValue {
     open: boolean
@@ -63,17 +65,12 @@ const AlertDialogTrigger = React.forwardRef<HTMLButtonElement, AlertDialogTrigge
             context.onOpenChange(true)
         }
 
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                onClick: handleClick,
-                ref,
-            })
-        }
+        const Comp = asChild ? Slot : "button"
 
         return (
-            <button ref={ref} onClick={handleClick} {...props}>
+            <Comp ref={ref} onClick={handleClick} {...props}>
                 {children}
-            </button>
+            </Comp>
         )
     }
 )
@@ -95,9 +92,16 @@ const AlertDialogContent = React.forwardRef<
         }
     }, [context.open])
 
+    const [mounted, setMounted] = React.useState(false)
+
+    React.useEffect(() => {
+        setMounted(true)
+    }, [])
+
     if (!context.open) return null
+    if (!mounted) return null
 
-    return (
+    return createPortal(
         <>
             <div className="fixed inset-0 z-50 bg-black/80" />
             <div
@@ -112,7 +116,8 @@ const AlertDialogContent = React.forwardRef<
             >
                 {children}
             </div>
-        </>
+        </>,
+        document.body
     )
 })
 AlertDialogContent.displayName = "AlertDialogContent"

package/src/registry/ui/breadcrumb.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
 
 /**
  * Breadcrumb navigation component
@@ -59,21 +60,16 @@ interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
 
 const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
     ({ asChild, className, children, ...props }, ref) => {
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                ref,
-                className: cn("transition-colors hover:text-foreground", className),
-            })
-        }
+        const Comp = asChild ? Slot : "a"
 
         return (
-            <a
+            <Comp
                 ref={ref}
                 className={cn("transition-colors hover:text-foreground", className)}
                 {...props}
             >
                 {children}
-            </a>
+            </Comp>
         )
     }
 )

package/src/registry/ui/button.tsx

@@ -50,24 +50,17 @@ interface ButtonProps
  *   <LoadingSpinner /> Processing...
  * </Button>
  */
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, children, ...props }, ref) => {
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                ref,
-                className: cn(buttonVariants({ variant, size }), className),
-                ...props,
-            })
-        }
+import { Slot } from "@/components/ui/slot"
 
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button"
         return (
-            <button
-                ref={ref}
+            <Comp
                 className={cn(buttonVariants({ variant, size }), className)}
+                ref={ref}
                 {...props}
-            >
-                {children}
-            </button>
+            />
         )
     }
 )

package/src/registry/ui/collapsible.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
 
 interface CollapsibleContextValue {
     open: boolean
@@ -59,16 +60,10 @@ const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTrigge
             context.onOpenChange(!context.open)
         }
 
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                onClick: handleClick,
-                "aria-expanded": context.open,
-                ref,
-            })
-        }
+        const Comp = asChild ? Slot : "button"
 
         return (
-            <button
+            <Comp
                 ref={ref}
                 type="button"
                 aria-expanded={context.open}
@@ -77,7 +72,7 @@ const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTrigge
                 {...props}
             >
                 {children}
-            </button>
+            </Comp>
         )
     }
 )