@srcroot/ui 0.0.24 → 0.0.26

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");
@@ -1031,10 +1031,19 @@ async function add(components, options) {
       const comp = REGISTRY[name];
       const targetPath = path2.join(componentsDir, comp.file);
       if (fs2.existsSync(targetPath) && !options.overwrite) {
-        if (componentsToAdd.length <= 10) {
-          spinner.info(`${chalk2.cyan(comp.file)} already exists, skipping`);
+        spinner.stop();
+        const { overwrite } = await prompts2({
+          type: "confirm",
+          name: "overwrite",
+          message: `${chalk2.cyan(comp.file)} already exists. Overwrite?`,
+          initial: false
+        });
+        if (!overwrite) {
+          spinner.info(`Skipped ${chalk2.cyan(comp.file)}`);
+          spinner.start("Adding components...");
+          continue;
         }
-        continue;
+        spinner.start("Adding components...");
       }
       const registryPath = path2.resolve(__dirname3, "..", "registry", comp.file);
       if (!fs2.existsSync(registryPath)) {

package/package.json

@@ -1,58 +1,64 @@
-{
-  "name": "@srcroot/ui",
-  "version": "0.0.24",
-  "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.26",
+  "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/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,12 +1,12 @@
 "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"
 
 interface FileUploadProps {
-    onChange?: (files: File[]) => void
+    onChange?: (files: LuFile[]) => void
     accept?: string
     multiple?: boolean
     maxSize?: number // in bytes
@@ -16,16 +16,16 @@ interface FileUploadProps {
 }
 
 interface UploadedFile {
-    file: File
+    file: LuFile
     preview?: string
 }
 
 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 => {
@@ -71,7 +71,7 @@ export function FileUpload({
             // Validate file sizes
             const oversizedFiles = fileArray.filter(f => f.size > maxSize)
             if (oversizedFiles.length > 0) {
-                setError(`File(s) exceed maximum size of ${formatFileSize(maxSize)}`)
+                setError(`LuFile(s) exceed maximum size of ${formatFileSize(maxSize)}`)
                 return
             }
 
@@ -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/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>
     )