@srcroot/ui 0.0.25 → 0.0.27

package/README.md

@@ -46,7 +46,7 @@ Install every available component at once.
 npx @srcroot/ui add --all
 ```
 
-This will copy the component files to your `components/ui` directory and install any necessary peer dependencies (like `lucide-react` or `clsx`).
+This will copy the component files to your `components/ui` directory and install any necessary peer dependencies (like `react-icons` or `clsx`).
 
 ### 3. Usage
 

package/dist/index.js

@@ -586,7 +586,7 @@ async function init(options) {
       "clsx",
       "tailwind-merge",
       "class-variance-authority",
-      "lucide-react"
+      "react-icons"
     ];
     if (!isTailwind4) {
       requiredDeps.push("tailwindcss-animate");

package/package.json

@@ -1,58 +1,64 @@
-{
-  "name": "@srcroot/ui",
-  "version": "0.0.25",
-  "description": "A shadcn-style CLI UI library with polymorphic, accessible React components",
-  "type": "module",
-  "bin": {
-    "srcroot-ui": "./dist/index.js"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
-  },
-  "files": [
-    "dist",
-    "registry"
-  ],
-  "keywords": [
-    "react",
-    "ui",
-    "components",
-    "tailwind",
-    "polymorphic",
-    "accessible"
-  ],
-  "dependencies": {
-    "chalk": "^5.3.0",
-    "commander": "^12.1.0",
-    "fs-extra": "^11.2.0",
-    "ora": "^8.1.1",
-    "prompts": "^2.4.2",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.10.1",
-    "@types/prompts": "^2.4.9",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2"
-  },
-  "peerDependencies": {
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "lucide-react": "0.561.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^3.0.0 || ^4.0.0"
-  },
-  "peerDependenciesMeta": {
-    "lucide-react": {
-      "optional": true
-    },
-    "cmdk": {
-      "optional": true
-    }
-  }
+{
+  "name": "@srcroot/ui",
+  "version": "0.0.27",
+  "description": "A shadcn-style CLI UI library with polymorphic, accessible React components",
+  "type": "module",
+  "bin": {
+    "srcroot-ui": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "files": [
+    "dist",
+    "registry"
+  ],
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwind",
+    "polymorphic",
+    "accessible"
+  ],
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.1",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "tailwindcss-animate": "^1.0.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^3.0.0 || ^4.0.0",
+    "react-icons": "^5.5.0"
+  },
+  "peerDependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "react-icons": "^5.5.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss": "^3.0.0 || ^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "cmdk": {
+      "optional": true
+    }
+  }
 }

package/registry/button.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
     {
         variants: {
             variant: {

package/registry/combobox.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Check, ChevronsUpDown, X } from "lucide-react"
+import { LuCheck, LuChevronsUpDown, LuX } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -113,7 +113,7 @@ export function Combobox({
                                             >
                                                 {Icon && <Icon className="h-3 w-3" />}
                                                 {opt.label}
-                                                <X className="h-3 w-3 text-muted-foreground hover:text-foreground ml-0.5" />
+                                                <LuX className="h-3 w-3 text-muted-foreground hover:text-foreground ml-0.5" />
                                             </Badge>
                                         )
                                     })
@@ -131,7 +131,7 @@ export function Combobox({
                             <span className="text-muted-foreground">{placeholder}</span>
                         )}
                     </div>
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    <LuChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
             </PopoverTrigger>
             <PopoverContent className="w-full min-w-[200px] p-0">
@@ -146,7 +146,7 @@ export function Combobox({
                                     value={option.label}
                                     onSelect={() => handleSelect(option.value)}
                                 >
-                                    <Check
+                                    <LuCheck
                                         className={cn(
                                             "mr-2 h-4 w-4",
                                             multiple

package/registry/command.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Search } from "lucide-react"
+import { LuSearch } from "react-icons/lu"
 import { cn } from "@/lib/utils"
 import { Dialog, DialogContent } from "@/components/ui/dialog"
 
@@ -117,7 +117,7 @@ const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
 
         return (
             <div className="flex items-center border-b px-3">
-                <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                <LuSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                 <input
                     ref={ref}
                     value={search}

package/registry/file-upload.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Upload, X, File, Image, FileText, Film, Music } from "lucide-react"
+import { LuUpload, LuX, LuFile, LuImage, LuFileText, LuFilm, LuMusic } from "react-icons/lu"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
@@ -21,11 +21,11 @@ interface UploadedFile {
 }
 
 const getFileIcon = (type: string) => {
-    if (type.startsWith("image/")) return Image
-    if (type.startsWith("video/")) return Film
-    if (type.startsWith("audio/")) return Music
-    if (type.includes("pdf") || type.includes("document")) return FileText
-    return File
+    if (type.startsWith("image/")) return LuImage
+    if (type.startsWith("video/")) return LuFilm
+    if (type.startsWith("audio/")) return LuMusic
+    if (type.includes("pdf") || type.includes("document")) return LuFileText
+    return LuFile
 }
 
 const formatFileSize = (bytes: number): string => {
@@ -163,7 +163,7 @@ export function FileUpload({
                     "flex h-14 w-14 items-center justify-center rounded-full bg-muted transition-colors",
                     isDragging && "bg-primary/10"
                 )}>
-                    <Upload className={cn(
+                    <LuUpload className={cn(
                         "h-6 w-6 text-muted-foreground",
                         isDragging && "text-primary"
                     )} />
@@ -188,7 +188,7 @@ export function FileUpload({
                 <p className="text-sm text-destructive">{error}</p>
             )}
 
-            {/* File List */}
+            {/* LuFile List */}
             {files.length > 0 && (
                 <div className="space-y-2">
                     {files.map((uploadedFile, index) => {
@@ -228,7 +228,7 @@ export function FileUpload({
                                         removeFile(index)
                                     }}
                                 >
-                                    <X className="h-4 w-4" />
+                                    <LuX className="h-4 w-4" />
                                 </Button>
                             </div>
                         )

package/registry/search.tsx

@@ -36,14 +36,14 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
         ref
     ) => {
         const [value, setValue] = React.useState(String(defaultValue))
-        const debounceRef = React.useRef<NodeJS.Timeout>()
+        const debounceRef = React.useRef<NodeJS.Timeout | null>(null)
 
         const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
             const newValue = e.target.value
             setValue(newValue)
 
             if (debounceMs > 0) {
-                clearTimeout(debounceRef.current)
+                if (debounceRef.current) clearTimeout(debounceRef.current)
                 debounceRef.current = setTimeout(() => {
                     onSearch?.(newValue)
                 }, debounceMs)
@@ -65,7 +65,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
 
         React.useEffect(() => {
             return () => {
-                clearTimeout(debounceRef.current)
+                if (debounceRef.current) clearTimeout(debounceRef.current)
             }
         }, [])
 

package/registry/sidebar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { PanelLeft } from "lucide-react"
+import { LuPanelLeft } from "react-icons/lu"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
@@ -233,7 +233,7 @@ const SidebarTrigger = React.forwardRef<
             }}
             {...props}
         >
-            <PanelLeft />
+            <LuPanelLeft />
             <span className="sr-only">Toggle Sidebar</span>
         </Button>
     )