@srcroot/ui 0.0.56 → 0.0.59

package/dist/index.js

@@ -5,11 +5,11 @@ import { Command } from "commander";
 import chalk3 from "chalk";
 
 // src/cli/services/project-initializer.ts
-import fs3 from "fs-extra";
-import path3 from "path";
+import fs4 from "fs-extra";
+import path4 from "path";
 import ora from "ora";
 import prompts from "prompts";
-import { fileURLToPath as fileURLToPath2 } from "url";
+import { fileURLToPath as fileURLToPath3 } from "url";
 import { execa } from "execa";
 
 // src/cli/services/theme-service.ts
@@ -167,6 +167,25 @@ function getPackageManager(cwd) {
   return "npm";
 }
 
+// src/cli/utils/get-package-info.ts
+import path3 from "path";
+import fs3 from "fs-extra";
+import { fileURLToPath as fileURLToPath2 } from "url";
+function getPackageInfo() {
+  const __filename2 = fileURLToPath2(import.meta.url);
+  const __dirname5 = path3.dirname(__filename2);
+  const pathsToCheck = [
+    path3.resolve(__dirname5, "..", "package.json"),
+    path3.resolve(__dirname5, "..", "..", "..", "package.json")
+  ];
+  for (const pkgPath of pathsToCheck) {
+    if (fs3.existsSync(pkgPath)) {
+      return fs3.readJSONSync(pkgPath);
+    }
+  }
+  return { version: "0.0.0" };
+}
+
 // src/cli/utils/logger.ts
 import chalk from "chalk";
 var logger = {
@@ -185,7 +204,7 @@ var logger = {
 };
 
 // src/cli/services/project-initializer.ts
-var __dirname3 = path3.dirname(fileURLToPath2(import.meta.url));
+var __dirname3 = path4.dirname(fileURLToPath3(import.meta.url));
 var ProjectInitializer = class {
   options;
   config = {};
@@ -204,13 +223,13 @@ var ProjectInitializer = class {
     this.printSuccess();
   }
   async validateEnvironment() {
-    const cwd = path3.resolve(this.options.cwd);
-    const packageJsonPath = path3.join(cwd, "package.json");
-    if (!fs3.existsSync(packageJsonPath)) {
+    const cwd = path4.resolve(this.options.cwd);
+    const packageJsonPath = path4.join(cwd, "package.json");
+    if (!fs4.existsSync(packageJsonPath)) {
       logger.error("Error: No package.json found. Please run this in a project directory.");
       process.exit(1);
     }
-    const pkg = await fs3.readJson(packageJsonPath);
+    const pkg = await fs4.readJson(packageJsonPath);
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     if (!allDeps["react"]) {
       logger.error("Error: React not found in dependencies. Please initialize this in a React project.");
@@ -218,33 +237,33 @@ var ProjectInitializer = class {
     }
   }
   async detectConfiguration() {
-    const cwd = path3.resolve(this.options.cwd);
+    const cwd = path4.resolve(this.options.cwd);
     const packageManager = getPackageManager(cwd);
     const installCmd = packageManager === "npm" ? "install" : "add";
-    const pkg = await fs3.readJson(path3.join(cwd, "package.json"));
+    const pkg = await fs4.readJson(path4.join(cwd, "package.json"));
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     const tailwindVersion = allDeps["tailwindcss"] || "";
     const isTailwind4 = tailwindVersion.includes("^4") || tailwindVersion.startsWith("4") || allDeps["@tailwindcss/postcss"];
-    const hasSrc = fs3.existsSync(path3.join(cwd, "src"));
-    const srcPath = hasSrc ? path3.join(cwd, "src") : cwd;
-    const appPath = path3.join(srcPath, "app");
-    const pagesPath = path3.join(srcPath, "pages");
-    const hasAppDir = fs3.existsSync(appPath);
-    const hasPagesDir = fs3.existsSync(pagesPath);
-    const libDir = path3.join(srcPath, "lib");
-    const componentsDir = path3.join(srcPath, "components", "ui");
+    const hasSrc = fs4.existsSync(path4.join(cwd, "src"));
+    const srcPath = hasSrc ? path4.join(cwd, "src") : cwd;
+    const appPath = path4.join(srcPath, "app");
+    const pagesPath = path4.join(srcPath, "pages");
+    const hasAppDir = fs4.existsSync(appPath);
+    const hasPagesDir = fs4.existsSync(pagesPath);
+    const libDir = path4.join(srcPath, "lib");
+    const componentsDir = path4.join(srcPath, "components", "ui");
     let globalsPath = "";
     if (hasAppDir) {
-      if (fs3.existsSync(path3.join(appPath, "globals.css"))) globalsPath = path3.join(appPath, "globals.css");
-      else if (fs3.existsSync(path3.join(appPath, "global.css"))) globalsPath = path3.join(appPath, "global.css");
-      else globalsPath = path3.join(appPath, "globals.css");
+      if (fs4.existsSync(path4.join(appPath, "globals.css"))) globalsPath = path4.join(appPath, "globals.css");
+      else if (fs4.existsSync(path4.join(appPath, "global.css"))) globalsPath = path4.join(appPath, "global.css");
+      else globalsPath = path4.join(appPath, "globals.css");
     } else if (hasPagesDir) {
-      const stylesPath = path3.join(srcPath, "styles");
-      if (fs3.existsSync(path3.join(stylesPath, "globals.css"))) globalsPath = path3.join(stylesPath, "globals.css");
-      else if (fs3.existsSync(path3.join(stylesPath, "global.css"))) globalsPath = path3.join(stylesPath, "global.css");
-      else globalsPath = path3.join(stylesPath, "globals.css");
+      const stylesPath = path4.join(srcPath, "styles");
+      if (fs4.existsSync(path4.join(stylesPath, "globals.css"))) globalsPath = path4.join(stylesPath, "globals.css");
+      else if (fs4.existsSync(path4.join(stylesPath, "global.css"))) globalsPath = path4.join(stylesPath, "global.css");
+      else globalsPath = path4.join(stylesPath, "globals.css");
     } else {
-      globalsPath = path3.join(srcPath, "globals.css");
+      globalsPath = path4.join(srcPath, "globals.css");
     }
     this.config = {
       cwd,
@@ -292,13 +311,13 @@ var ProjectInitializer = class {
     const spinner = ora("Creating project structure...").start();
     const cfg = this.config;
     try {
-      await fs3.ensureDir(cfg.libDir);
-      await fs3.ensureDir(cfg.componentsDir);
-      const utilsPath = path3.join(cfg.libDir, "utils.ts");
-      const registryUtilsPath = path3.resolve(__dirname3, "..", "src", "registry", "lib", "utils.ts");
+      await fs4.ensureDir(cfg.libDir);
+      await fs4.ensureDir(cfg.componentsDir);
+      const utilsPath = path4.join(cfg.libDir, "utils.ts");
+      const registryUtilsPath = path4.resolve(__dirname3, "..", "src", "registry", "lib", "utils.ts");
       let utilsContent = "";
-      if (fs3.existsSync(registryUtilsPath)) {
-        utilsContent = await fs3.readFile(registryUtilsPath, "utf-8");
+      if (fs4.existsSync(registryUtilsPath)) {
+        utilsContent = await fs4.readFile(registryUtilsPath, "utf-8");
       } else {
         utilsContent = `import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
@@ -309,15 +328,15 @@ export function cn(...inputs: ClassValue[]) {
 `;
         spinner.warn(`Could not find registry/utils.ts, using fallback content.`);
       }
-      await fs3.writeFile(utilsPath, utilsContent);
-      spinner.succeed(`Created ${path3.relative(cfg.cwd, utilsPath)}`);
+      await fs4.writeFile(utilsPath, utilsContent);
+      spinner.succeed(`Created ${path4.relative(cfg.cwd, utilsPath)}`);
       spinner.start(`Setting up ${cfg.selectedTheme} theme...`);
-      const stylesDir = path3.dirname(cfg.globalsPath);
-      await fs3.ensureDir(stylesDir);
+      const stylesDir = path4.dirname(cfg.globalsPath);
+      await fs4.ensureDir(stylesDir);
       try {
         const cssContent = await this.themeService.getThemeCss(cfg.selectedTheme, cfg.isTailwind4);
-        await fs3.writeFile(cfg.globalsPath, cssContent);
-        spinner.succeed(`Updated ${path3.relative(cfg.cwd, cfg.globalsPath)} with ${cfg.selectedTheme} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
+        await fs4.writeFile(cfg.globalsPath, cssContent);
+        spinner.succeed(`Updated ${path4.relative(cfg.cwd, cfg.globalsPath)} with ${cfg.selectedTheme} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
       } catch (error) {
         spinner.fail(`Failed to load theme: ${cfg.selectedTheme}`);
         console.error(error);
@@ -325,10 +344,21 @@ export function cn(...inputs: ClassValue[]) {
       }
       if (!cfg.isTailwind4) {
         spinner.start("Setting up Tailwind config...");
-        const tailwindConfigPath = path3.join(cfg.cwd, "tailwind.config.ts");
-        await fs3.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+        const tailwindConfigPath = path4.join(cfg.cwd, "tailwind.config.ts");
+        await fs4.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
         spinner.succeed(`Created tailwind.config.ts`);
       }
+      const packageInfo = getPackageInfo();
+      const configObj = {
+        version: packageInfo.version || "0.0.0",
+        theme: cfg.selectedTheme,
+        paths: {
+          components: path4.relative(cfg.cwd, cfg.componentsDir),
+          utils: path4.relative(cfg.cwd, utilsPath)
+        }
+      };
+      await fs4.writeJSON(path4.join(cfg.cwd, "srcroot.config.json"), configObj, { spaces: 2 });
+      spinner.succeed("Created srcroot.config.json");
     } catch (error) {
       spinner.fail("Failed to initialize project");
       console.error(error);
@@ -348,8 +378,8 @@ export function cn(...inputs: ClassValue[]) {
       deps.push("tailwindcss-animate");
     }
     try {
-      const packageJsonPath = path3.join(cfg.cwd, "package.json");
-      const pkg = await fs3.readJson(packageJsonPath);
+      const packageJsonPath = path4.join(cfg.cwd, "package.json");
+      const pkg = await fs4.readJson(packageJsonPath);
       const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
       const missingDeps = deps.filter((dep) => !allDeps[dep]);
       if (missingDeps.length === 0) {
@@ -384,12 +414,12 @@ async function init(options) {
 }
 
 // src/cli/services/component-adder.ts
-import fs4 from "fs-extra";
-import path4 from "path";
+import fs5 from "fs-extra";
+import path5 from "path";
 import ora2 from "ora";
 import prompts2 from "prompts";
 import { execa as execa2 } from "execa";
-import { fileURLToPath as fileURLToPath3 } from "url";
+import { fileURLToPath as fileURLToPath4 } from "url";
 
 // src/cli/registry.ts
 var REGISTRY = {
@@ -858,7 +888,7 @@ var REGISTRY = {
 };
 
 // src/cli/services/component-adder.ts
-var __dirname4 = path4.dirname(fileURLToPath3(import.meta.url));
+var __dirname4 = path5.dirname(fileURLToPath4(import.meta.url));
 var ComponentAdder = class {
   cwd;
   options;
@@ -980,16 +1010,16 @@ Please manually install: ${packages.join(" ")}`);
   }
   async copyComponents(components) {
     const spinner = ora2("Adding components...").start();
-    const hasSrc = fs4.existsSync(path4.join(this.cwd, "src"));
-    const srcPath = hasSrc ? path4.join(this.cwd, "src") : this.cwd;
-    const componentsDir = path4.join(srcPath, "components", "ui");
+    const hasSrc = fs5.existsSync(path5.join(this.cwd, "src"));
+    const srcPath = hasSrc ? path5.join(this.cwd, "src") : this.cwd;
+    const componentsDir = path5.join(srcPath, "components", "ui");
     try {
-      await fs4.ensureDir(componentsDir);
+      await fs5.ensureDir(componentsDir);
       for (const name of components) {
         const comp = REGISTRY[name];
-        const fileName = path4.basename(comp.file);
-        const targetPath = path4.join(componentsDir, fileName);
-        if (fs4.existsSync(targetPath) && !this.options.overwrite) {
+        const fileName = path5.basename(comp.file);
+        const targetPath = path5.join(componentsDir, fileName);
+        if (fs5.existsSync(targetPath) && !this.options.overwrite) {
           spinner.stop();
           const { overwrite } = await prompts2({
             type: "confirm",
@@ -1004,13 +1034,13 @@ Please manually install: ${packages.join(" ")}`);
           }
           spinner.start("Adding components...");
         }
-        const registryPath = path4.resolve(__dirname4, "..", "src", "registry", comp.file);
-        if (!fs4.existsSync(registryPath)) {
+        const registryPath = path5.resolve(__dirname4, "..", "src", "registry", comp.file);
+        if (!fs5.existsSync(registryPath)) {
           spinner.warn(`Registry file not found for ${name}: ${registryPath}`);
           continue;
         }
-        const content = await fs4.readFile(registryPath, "utf-8");
-        await fs4.writeFile(targetPath, content);
+        const content = await fs5.readFile(registryPath, "utf-8");
+        await fs5.writeFile(targetPath, content);
         if (components.length > 10) {
           spinner.text = `Adding ${fileName}...`;
         } else {
@@ -1066,25 +1096,6 @@ async function list() {
   console.log(chalk2.dim("Usage: npx @srcroot/ui add <component>\n"));
 }
 
-// src/cli/utils/get-package-info.ts
-import path5 from "path";
-import fs5 from "fs-extra";
-import { fileURLToPath as fileURLToPath4 } from "url";
-function getPackageInfo() {
-  const __filename2 = fileURLToPath4(import.meta.url);
-  const __dirname5 = path5.dirname(__filename2);
-  const pathsToCheck = [
-    path5.resolve(__dirname5, "..", "package.json"),
-    path5.resolve(__dirname5, "..", "..", "..", "package.json")
-  ];
-  for (const pkgPath of pathsToCheck) {
-    if (fs5.existsSync(pkgPath)) {
-      return fs5.readJSONSync(pkgPath);
-    }
-  }
-  return { version: "0.0.0" };
-}
-
 // src/cli/index.ts
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.56",
+  "version": "0.0.59",
   "description": "A UI library with polymorphic, accessible React components",
   "author": "Shifaul Islam",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-icons": "^5.5.0",
-    "react-leaflet": "^4.2.1",
+    "react-leaflet": "^5.0.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^3.0.0 || ^4.0.0",
     "tailwindcss-animate": "^1.0.7"

package/src/registry/ui/otp-input.tsx

@@ -1,152 +1,163 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 interface OtpInputProps {
-    /** Number of OTP digits */
-    length?: number
-    /** Callback when OTP is complete */
-    onComplete?: (otp: string) => void
-    /** Callback when value changes */
-    onChange?: (value: string) => void
-    /** Current value */
-    value?: string
-    /** Whether input is disabled */
-    disabled?: boolean
-    /** Auto focus first input */
-    autoFocus?: boolean
-    /** Input type (number or password for hidden) */
-    type?: "number" | "password"
-    className?: string
+  /** Number of OTP digits */
+  length?: number;
+  /** Callback when OTP is complete */
+  onComplete?: (otp: string) => void;
+  /** Callback when value changes */
+  onChange?: (value: string) => void;
+  /** Current value */
+  value?: string;
+  /** Whether input is disabled */
+  disabled?: boolean;
+  /** Auto focus first input */
+  autoFocus?: boolean;
+  /** Input type (number or password for hidden) */
+  type?: "number" | "password";
+  className?: string;
 }
 
 /**
  * OTP Input component with auto-advance
- * 
+ *
  * @example
  * const [otp, setOtp] = useState("")
- * <OtpInput 
- *   length={6} 
- *   value={otp} 
- *   onChange={setOtp} 
- *   onComplete={(code) => verifyOtp(code)} 
+ * <OtpInput
+ *   length={6}
+ *   value={otp}
+ *   onChange={setOtp}
+ *   onComplete={(code) => verifyOtp(code)}
  * />
  */
 const OtpInput = React.forwardRef<HTMLDivElement, OtpInputProps>(
-    (
-        {
-            length = 6,
-            onComplete,
-            onChange,
-            value = "",
-            disabled,
-            autoFocus,
-            type = "number",
-            className,
-        },
-        ref
+  (
+    {
+      length = 6,
+      onComplete,
+      onChange,
+      value = "",
+      disabled,
+      autoFocus,
+      type = "number",
+      className,
+    },
+    ref,
+  ) => {
+    const inputRefs = React.useRef<(HTMLInputElement | null)[]>([]);
+    const [values, setValues] = React.useState<string[]>(
+      value.split("").concat(Array(length - value.length).fill("")),
+    );
+
+    React.useEffect(() => {
+      const newValues = value
+        .split("")
+        .concat(Array(length - value.length).fill(""));
+      setValues(newValues.slice(0, length));
+    }, [value, length]);
+
+    const focusInput = (index: number) => {
+      if (index >= 0 && index < length) {
+        inputRefs.current[index]?.focus();
+      }
+    };
+
+    const handleChange = (index: number, inputValue: string) => {
+      if (disabled) return;
+
+      // Only allow single digit
+      const digit = inputValue.slice(-1);
+      if (type === "number" && digit && !/^\d$/.test(digit)) return;
+
+      const newValues = [...values];
+      newValues[index] = digit;
+      setValues(newValues);
+
+      const newOtp = newValues.join("");
+      onChange?.(newOtp);
+
+      // Auto-advance to next input
+      if (digit && index < length - 1) {
+        focusInput(index + 1);
+      }
+
+      // Check if complete
+      if (newOtp.length === length && !newOtp.includes("")) {
+        onComplete?.(newOtp);
+      }
+    };
+
+    const handleKeyDown = (
+      index: number,
+      e: React.KeyboardEvent<HTMLInputElement>,
     ) => {
-        const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])
-        const [values, setValues] = React.useState<string[]>(
-            value.split("").concat(Array(length - value.length).fill(""))
-        )
-
-        React.useEffect(() => {
-            const newValues = value.split("").concat(Array(length - value.length).fill(""))
-            setValues(newValues.slice(0, length))
-        }, [value, length])
-
-        const focusInput = (index: number) => {
-            if (index >= 0 && index < length) {
-                inputRefs.current[index]?.focus()
-            }
-        }
-
-        const handleChange = (index: number, inputValue: string) => {
-            if (disabled) return
-
-            // Only allow single digit
-            const digit = inputValue.slice(-1)
-            if (type === "number" && digit && !/^\d$/.test(digit)) return
-
-            const newValues = [...values]
-            newValues[index] = digit
-            setValues(newValues)
-
-            const newOtp = newValues.join("")
-            onChange?.(newOtp)
-
-            // Auto-advance to next input
-            if (digit && index < length - 1) {
-                focusInput(index + 1)
-            }
-
-            // Check if complete
-            if (newOtp.length === length && !newOtp.includes("")) {
-                onComplete?.(newOtp)
-            }
-        }
-
-        const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
-            if (e.key === "Backspace") {
-                if (!values[index] && index > 0) {
-                    focusInput(index - 1)
-                }
-            } else if (e.key === "ArrowLeft") {
-                e.preventDefault()
-                focusInput(index - 1)
-            } else if (e.key === "ArrowRight") {
-                e.preventDefault()
-                focusInput(index + 1)
-            }
+      if (e.key === "Backspace") {
+        if (!values[index] && index > 0) {
+          focusInput(index - 1);
         }
-
-        const handlePaste = (e: React.ClipboardEvent) => {
-            e.preventDefault()
-            const pastedData = e.clipboardData.getData("text").slice(0, length)
-
-            if (type === "number" && !/^\d+$/.test(pastedData)) return
-
-            const newValues = pastedData.split("").concat(Array(length - pastedData.length).fill(""))
-            setValues(newValues.slice(0, length))
-
-            const newOtp = newValues.slice(0, length).join("")
-            onChange?.(newOtp)
-
-            if (newOtp.length === length) {
-                onComplete?.(newOtp)
-            }
-
-            focusInput(Math.min(pastedData.length, length - 1))
-        }
-
-        return (
-            <div ref={ref} className={cn("flex gap-2", className)}>
-                {Array.from({ length }).map((_, index) => (
-                    <input
-                        key={index}
-                        ref={(el) => { inputRefs.current[index] = el }}
-                        type={type === "password" ? "password" : "text"}
-                        inputMode="numeric"
-                        maxLength={1}
-                        value={values[index] || ""}
-                        onChange={(e) => handleChange(index, e.target.value)}
-                        onKeyDown={(e) => handleKeyDown(index, e)}
-                        onPaste={handlePaste}
-                        onFocus={(e) => e.target.select()}
-                        disabled={disabled}
-                        autoFocus={autoFocus && index === 0}
-                        className={cn(
-                            "h-12 w-12 rounded-md border border-input bg-transparent text-center text-lg font-semibold shadow-sm transition-colors",
-                            "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent",
-                            "disabled:cursor-not-allowed disabled:opacity-50"
-                        )}
-                        aria-label={`Digit ${index + 1} of ${length}`}
-                    />
-                ))}
-            </div>
-        )
-    }
-)
-OtpInput.displayName = "OtpInput"
-
-export { OtpInput }
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        focusInput(index - 1);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        focusInput(index + 1);
+      }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent) => {
+      e.preventDefault();
+      const pastedData = e.clipboardData.getData("text").slice(0, length);
+
+      if (type === "number" && !/^\d+$/.test(pastedData)) return;
+
+      const newValues = pastedData
+        .split("")
+        .concat(Array(length - pastedData.length).fill(""));
+      setValues(newValues.slice(0, length));
+
+      const newOtp = newValues.slice(0, length).join("");
+      onChange?.(newOtp);
+
+      if (newOtp.length === length) {
+        onComplete?.(newOtp);
+      }
+
+      focusInput(Math.min(pastedData.length, length - 1));
+    };
+
+    return (
+      <div ref={ref} className={cn("flex gap-2", className)}>
+        {Array.from({ length }).map((_, index) => (
+          <input
+            key={index}
+            ref={(el) => {
+              inputRefs.current[index] = el;
+            }}
+            type={type === "password" ? "password" : "text"}
+            inputMode="numeric"
+            maxLength={1}
+            value={values[index] || ""}
+            onChange={(e) => handleChange(index, e.target.value)}
+            onKeyDown={(e) => handleKeyDown(index, e)}
+            onPaste={handlePaste}
+            onFocus={(e) => e.target.select()}
+            disabled={disabled}
+            autoFocus={autoFocus && index === 0}
+            className={cn(
+              "h-12 w-12 rounded-md border border-input bg-transparent text-center text-lg font-semibold shadow-sm transition-colors",
+              "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+            )}
+            aria-label={`Digit ${index + 1} of ${length}`}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+OtpInput.displayName = "OtpInput";
+
+export { OtpInput };

package/src/registry/ui/search.tsx

@@ -1,147 +1,162 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
 
-interface SearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    /** Callback when search value changes */
-    onSearch?: (value: string) => void
-    /** Debounce delay in ms */
-    debounceMs?: number
-    /** Show clear button */
-    showClear?: boolean
-    /** Loading state */
-    loading?: boolean
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface SearchProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "onChange"
+> {
+  /** Callback when search value changes */
+  onSearch?: (value: string) => void;
+  /** Debounce delay in ms */
+  debounceMs?: number;
+  /** Show clear button */
+  showClear?: boolean;
+  /** Loading state */
+  loading?: boolean;
 }
 
 /**
  * Search input with optional debounce and clear button
- * 
+ *
  * @example
- * <Search 
- *   placeholder="Search..." 
+ * <Search
+ *   placeholder="Search..."
  *   onSearch={(value) => fetchResults(value)}
  *   debounceMs={300}
  * />
  */
 const Search = React.forwardRef<HTMLInputElement, SearchProps>(
-    (
-        {
-            className,
-            onSearch,
-            debounceMs = 0,
-            showClear = true,
-            loading,
-            defaultValue = "",
-            ...props
-        },
-        ref
-    ) => {
-        const [value, setValue] = React.useState(String(defaultValue))
-        const debounceRef = React.useRef<NodeJS.Timeout | null>(null)
+  (
+    {
+      className,
+      onSearch,
+      debounceMs = 0,
+      showClear = true,
+      loading,
+      defaultValue = "",
+      ...props
+    },
+    ref,
+  ) => {
+    const [value, setValue] = React.useState(String(defaultValue));
+    const debounceRef = React.useRef<NodeJS.Timeout | null>(null);
 
-        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const newValue = e.target.value
-            setValue(newValue)
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setValue(newValue);
 
-            if (debounceMs > 0) {
-                if (debounceRef.current) clearTimeout(debounceRef.current)
-                debounceRef.current = setTimeout(() => {
-                    onSearch?.(newValue)
-                }, debounceMs)
-            } else {
-                onSearch?.(newValue)
-            }
-        }
+      if (debounceMs > 0) {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+          onSearch?.(newValue);
+        }, debounceMs);
+      } else {
+        onSearch?.(newValue);
+      }
+    };
 
-        const handleClear = () => {
-            setValue("")
-            onSearch?.("")
-        }
+    const handleClear = () => {
+      setValue("");
+      onSearch?.("");
+    };
 
-        const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-            if (e.key === "Escape") {
-                handleClear()
-            }
-        }
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Escape") {
+        handleClear();
+      }
+    };
 
-        React.useEffect(() => {
-            return () => {
-                if (debounceRef.current) clearTimeout(debounceRef.current)
-            }
-        }, [])
+    React.useEffect(() => {
+      return () => {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+      };
+    }, []);
 
-        return (
-            <div className={cn("relative", className)}>
-                {/* Search Icon */}
-                <svg
-                    className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    strokeWidth={2}
-                >
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    />
-                </svg>
+    return (
+      <div className={cn("relative", className)}>
+        {/* Search Icon */}
+        <svg
+          className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
 
-                <input
-                    ref={ref}
-                    type="search"
-                    role="searchbox"
-                    value={value}
-                    onChange={handleChange}
-                    onKeyDown={handleKeyDown}
-                    className={cn(
-                        "flex h-10 w-full rounded-md border border-input bg-transparent pl-10 pr-10 py-2 text-sm shadow-sm transition-colors",
-                        "placeholder:text-muted-foreground",
-                        "focus:outline-none focus:ring-1 focus:ring-ring",
-                        "disabled:cursor-not-allowed disabled:opacity-50",
-                        "[&::-webkit-search-cancel-button]:appearance-none"
-                    )}
-                    {...props}
-                />
+        <input
+          ref={ref}
+          type="search"
+          role="searchbox"
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          className={cn(
+            "flex h-10 w-full rounded-md border border-input bg-transparent pl-10 pr-10 py-2 text-sm shadow-sm transition-colors",
+            "placeholder:text-muted-foreground",
+            "focus:outline-none focus:ring-1 focus:ring-ring",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "[&::-webkit-search-cancel-button]:appearance-none",
+          )}
+          {...props}
+        />
 
-                {/* Loading or Clear */}
-                <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                    {loading ? (
-                        <svg
-                            className="h-4 w-4 animate-spin text-muted-foreground"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                        >
-                            <circle
-                                className="opacity-25"
-                                cx="12"
-                                cy="12"
-                                r="10"
-                                stroke="currentColor"
-                                strokeWidth="4"
-                            />
-                            <path
-                                className="opacity-75"
-                                fill="currentColor"
-                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                            />
-                        </svg>
-                    ) : showClear && value ? (
-                        <button
-                            type="button"
-                            onClick={handleClear}
-                            className="text-muted-foreground hover:text-foreground"
-                            aria-label="Clear search"
-                        >
-                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    ) : null}
-                </div>
-            </div>
-        )
-    }
-)
-Search.displayName = "Search"
+        {/* Loading or Clear */}
+        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+          {loading ? (
+            <svg
+              className="h-4 w-4 animate-spin text-muted-foreground"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+              />
+            </svg>
+          ) : showClear && value ? (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="text-muted-foreground hover:text-foreground"
+              aria-label="Clear search"
+            >
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+Search.displayName = "Search";
 
-export { Search }
+export { Search };

package/src/registry/ui/star-rating.tsx

@@ -1,131 +1,146 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 interface StarRatingProps {
-    /** Current rating value */
-    value?: number
-    /** Max number of stars */
-    max?: number
-    /** Callback when rating changes */
-    onValueChange?: (value: number) => void
-    /** Whether rating is readonly */
-    readonly?: boolean
-    /** Size of stars */
-    size?: "sm" | "default" | "lg"
-    className?: string
+  /** Current rating value */
+  value?: number;
+  /** Max number of stars */
+  max?: number;
+  /** Callback when rating changes */
+  onValueChange?: (value: number) => void;
+  /** Whether rating is readonly */
+  readonly?: boolean;
+  /** Size of stars */
+  size?: "sm" | "default" | "lg";
+  className?: string;
 }
 
 const sizeClasses = {
-    sm: "h-4 w-4",
-    default: "h-5 w-5",
-    lg: "h-6 w-6",
-}
+  sm: "h-4 w-4",
+  default: "h-5 w-5",
+  lg: "h-6 w-6",
+};
 
 /**
  * Star rating component
- * 
+ *
  * @example
  * const [rating, setRating] = useState(0)
  * <StarRating value={rating} onValueChange={setRating} />
- * 
+ *
  * @example
  * <StarRating value={4.5} readonly />
  */
 const StarRating = React.forwardRef<HTMLDivElement, StarRatingProps>(
-    (
-        {
-            value = 0,
-            max = 5,
-            onValueChange,
-            readonly = false,
-            size = "default",
-            className,
-        },
-        ref
-    ) => {
-        const [hoverValue, setHoverValue] = React.useState<number | null>(null)
+  (
+    {
+      value = 0,
+      max = 5,
+      onValueChange,
+      readonly = false,
+      size = "default",
+      className,
+    },
+    ref,
+  ) => {
+    const [hoverValue, setHoverValue] = React.useState<number | null>(null);
 
-        const displayValue = hoverValue !== null ? hoverValue : value
+    const displayValue = hoverValue !== null ? hoverValue : value;
 
-        const handleClick = (starValue: number) => {
-            if (!readonly) {
-                onValueChange?.(starValue)
-            }
-        }
+    const handleClick = (starValue: number) => {
+      if (!readonly) {
+        onValueChange?.(starValue);
+      }
+    };
 
-        const handleKeyDown = (e: React.KeyboardEvent, starValue: number) => {
-            if (readonly) return
+    const handleKeyDown = (e: React.KeyboardEvent, starValue: number) => {
+      if (readonly) return;
 
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault()
-                onValueChange?.(starValue)
-            } else if (e.key === "ArrowRight") {
-                e.preventDefault()
-                onValueChange?.(Math.min(value + 1, max))
-            } else if (e.key === "ArrowLeft") {
-                e.preventDefault()
-                onValueChange?.(Math.max(value - 1, 0))
-            }
-        }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onValueChange?.(starValue);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        onValueChange?.(Math.min(value + 1, max));
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        onValueChange?.(Math.max(value - 1, 0));
+      }
+    };
 
-        return (
-            <div
-                ref={ref}
-                role="radiogroup"
-                aria-label={`Rating: ${value} out of ${max} stars`}
-                className={cn("inline-flex gap-0.5", className)}
-                onMouseLeave={() => setHoverValue(null)}
-            >
-                {Array.from({ length: max }).map((_, index) => {
-                    const starValue = index + 1
-                    const isFilled = displayValue >= starValue
-                    const isHalfFilled = !isFilled && displayValue > index && displayValue < starValue
+    return (
+      <div
+        ref={ref}
+        role="radiogroup"
+        aria-label={`Rating: ${value} out of ${max} stars`}
+        className={cn("inline-flex gap-0.5", className)}
+        onMouseLeave={() => setHoverValue(null)}
+      >
+        {Array.from({ length: max }).map((_, index) => {
+          const starValue = index + 1;
+          const isFilled = displayValue >= starValue;
+          const isHalfFilled =
+            !isFilled && displayValue > index && displayValue < starValue;
 
-                    return (
-                        <button
-                            key={index}
-                            type="button"
-                            role="radio"
-                            aria-checked={value >= starValue}
-                            aria-label={`${starValue} star${starValue > 1 ? "s" : ""}`}
-                            disabled={readonly}
-                            tabIndex={readonly ? -1 : starValue === Math.ceil(value) || (value === 0 && starValue === 1) ? 0 : -1}
-                            className={cn(
-                                "relative focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
-                                !readonly && "cursor-pointer hover:scale-110 transition-transform"
-                            )}
-                            onClick={() => handleClick(starValue)}
-                            onMouseEnter={() => !readonly && setHoverValue(starValue)}
-                            onKeyDown={(e) => handleKeyDown(e, starValue)}
-                        >
-                            {/* Empty star */}
-                            <svg
-                                className={cn(sizeClasses[size], "text-muted-foreground/30")}
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-                            </svg>
+          return (
+            <button
+              key={index}
+              type="button"
+              role="radio"
+              aria-checked={value >= starValue}
+              aria-label={`${starValue} star${starValue > 1 ? "s" : ""}`}
+              disabled={readonly}
+              tabIndex={
+                readonly
+                  ? -1
+                  : starValue === Math.ceil(value) ||
+                      (value === 0 && starValue === 1)
+                    ? 0
+                    : -1
+              }
+              className={cn(
+                "relative focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+                !readonly &&
+                  "cursor-pointer hover:scale-110 transition-transform",
+              )}
+              onClick={() => handleClick(starValue)}
+              onMouseEnter={() => !readonly && setHoverValue(starValue)}
+              onKeyDown={(e) => handleKeyDown(e, starValue)}
+            >
+              {/* Empty star */}
+              <svg
+                className={cn(sizeClasses[size], "text-muted-foreground/30")}
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+              </svg>
 
-                            {/* Filled star overlay */}
-                            <svg
-                                className={cn(
-                                    sizeClasses[size],
-                                    "absolute inset-0 text-yellow-400 transition-opacity",
-                                    isFilled ? "opacity-100" : isHalfFilled ? "opacity-50" : "opacity-0"
-                                )}
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-                            </svg>
-                        </button>
-                    )
-                })}
-            </div>
-        )
-    }
-)
-StarRating.displayName = "StarRating"
+              {/* Filled star overlay */}
+              <svg
+                className={cn(
+                  sizeClasses[size],
+                  "absolute inset-0 text-yellow-400 transition-opacity",
+                  isFilled
+                    ? "opacity-100"
+                    : isHalfFilled
+                      ? "opacity-50"
+                      : "opacity-0",
+                )}
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+              </svg>
+            </button>
+          );
+        })}
+      </div>
+    );
+  },
+);
+StarRating.displayName = "StarRating";
 
-export { StarRating }
+export { StarRating };