@srcroot/ui 0.0.54 → 0.0.56

package/src/registry/ui/input.tsx

@@ -1,125 +1,125 @@
-"use client"
-
-import * as React from "react"
-import { FiEye, FiEyeOff, FiSearch, FiX } from "react-icons/fi"
-
-import { cn } from "@/lib/utils"
-
-export interface InputProps
-    extends React.InputHTMLAttributes<HTMLInputElement> {
-    /**
-     * Whether the input is in an error state
-     */
-    error?: boolean
-}
-
-/**
- * Input component with focus states and error styling
- * 
- * Supports special handling for:
- * - type="password": Adds show/hide toggle
- * - type="search": Adds search icon and clear button
- * 
- * @example
- * // Basic usage
- * <Input placeholder="Enter your email" />
- * 
- * // Password with toggle
- * <Input type="password" placeholder="Password" />
- * 
- * // Search with icon and clear
- * <Input type="search" placeholder="Search..." />
- */
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, error, ...props }, ref) => {
-        const [isVisible, setIsVisible] = React.useState(false)
-        const [value, setValue] = React.useState(props.value || props.defaultValue || "")
-        const isPassword = type === "password"
-        const isSearch = type === "search"
-
-        // Handle value changes for search clear functionality
-        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            setValue(e.target.value)
-            props.onChange?.(e)
-        }
-
-        const handleClear = () => {
-            setValue("")
-            // Create a synthetic event to notify parent
-            const event = {
-                target: { value: "" },
-                currentTarget: { value: "" },
-            } as React.ChangeEvent<HTMLInputElement>
-            props.onChange?.(event)
-        }
-
-        // Base input styles
-        const baseStyles = cn(
-            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-            error && "border-destructive focus-visible:ring-destructive",
-            isSearch && "pl-9", // Add padding for search icon
-            (isPassword || (isSearch && value)) && "pr-9", // Add padding for toggle/clear button
-            "[&::-webkit-search-cancel-button]:appearance-none", // Hide native search cancel button
-            className
-        )
-
-        // For regular inputs, render normally
-        if (!isPassword && !isSearch) {
-            return (
-                <input
-                    type={type}
-                    className={baseStyles}
-                    ref={ref}
-                    aria-invalid={error ? "true" : undefined}
-                    {...props}
-                />
-            )
-        }
-
-        return (
-            <div className="relative">
-                {isSearch && (
-                    <FiSearch className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
-                )}
-                <input
-                    type={isPassword ? (isVisible ? "text" : "password") : type}
-                    className={baseStyles}
-                    ref={ref}
-                    aria-invalid={error ? "true" : undefined}
-                    {...props}
-                    onChange={handleChange}
-                    value={props.value !== undefined ? props.value : value}
-                />
-                {isPassword && (
-                    <button
-                        type="button"
-                        onClick={() => setIsVisible(!isVisible)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground focus:outline-none"
-                    >
-                        {isVisible ? (
-                            <FiEyeOff className="h-4 w-4" aria-hidden="true" />
-                        ) : (
-                            <FiEye className="h-4 w-4" aria-hidden="true" />
-                        )}
-                        <span className="sr-only">
-                            {isVisible ? "Hide password" : "Show password"}
-                        </span>
-                    </button>
-                )}
-                {isSearch && value && (
-                    <button
-                        type="button"
-                        onClick={handleClear}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground focus:outline-none"
-                    >
-                        <FiX className="h-4 w-4" aria-hidden="true" />
-                        <span className="sr-only">Clear search</span>
-                    </button>
-                )}
-            </div>
-        )
-    }
-)
-Input.displayName = "Input"
-
-export { Input }
+"use client"
+
+import * as React from "react"
+import { FiEye, FiEyeOff, FiSearch, FiX } from "react-icons/fi"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Whether the input is in an error state
+     */
+    error?: boolean
+}
+
+/**
+ * Input component with focus states and error styling
+ * 
+ * Supports special handling for:
+ * - type="password": Adds show/hide toggle
+ * - type="search": Adds search icon and clear button
+ * 
+ * @example
+ * // Basic usage
+ * <Input placeholder="Enter your email" />
+ * 
+ * // Password with toggle
+ * <Input type="password" placeholder="Password" />
+ * 
+ * // Search with icon and clear
+ * <Input type="search" placeholder="Search..." />
+ */
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, error, ...props }, ref) => {
+        const [isVisible, setIsVisible] = React.useState(false)
+        const [value, setValue] = React.useState(props.value || props.defaultValue || "")
+        const isPassword = type === "password"
+        const isSearch = type === "search"
+
+        // Handle value changes for search clear functionality
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            setValue(e.target.value)
+            props.onChange?.(e)
+        }
+
+        const handleClear = () => {
+            setValue("")
+            // Create a synthetic event to notify parent
+            const event = {
+                target: { value: "" },
+                currentTarget: { value: "" },
+            } as React.ChangeEvent<HTMLInputElement>
+            props.onChange?.(event)
+        }
+
+        // Base input styles
+        const baseStyles = cn(
+            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            error && "border-destructive focus-visible:ring-destructive",
+            isSearch && "pl-9", // Add padding for search icon
+            (isPassword || (isSearch && value)) && "pr-9", // Add padding for toggle/clear button
+            "[&::-webkit-search-cancel-button]:appearance-none", // Hide native search cancel button
+            className
+        )
+
+        // For regular inputs, render normally
+        if (!isPassword && !isSearch) {
+            return (
+                <input
+                    type={type}
+                    className={baseStyles}
+                    ref={ref}
+                    aria-invalid={error ? "true" : undefined}
+                    {...props}
+                />
+            )
+        }
+
+        return (
+            <div className="relative">
+                {isSearch && (
+                    <FiSearch className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+                )}
+                <input
+                    type={isPassword ? (isVisible ? "text" : "password") : type}
+                    className={baseStyles}
+                    ref={ref}
+                    aria-invalid={error ? "true" : undefined}
+                    {...props}
+                    onChange={handleChange}
+                    value={props.value !== undefined ? props.value : value}
+                />
+                {isPassword && (
+                    <button
+                        type="button"
+                        onClick={() => setIsVisible(!isVisible)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground focus:outline-none"
+                    >
+                        {isVisible ? (
+                            <FiEyeOff className="h-4 w-4" aria-hidden="true" />
+                        ) : (
+                            <FiEye className="h-4 w-4" aria-hidden="true" />
+                        )}
+                        <span className="sr-only">
+                            {isVisible ? "Hide password" : "Show password"}
+                        </span>
+                    </button>
+                )}
+                {isSearch && value && (
+                    <button
+                        type="button"
+                        onClick={handleClear}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground focus:outline-none"
+                    >
+                        <FiX className="h-4 w-4" aria-hidden="true" />
+                        <span className="sr-only">Clear search</span>
+                    </button>
+                )}
+            </div>
+        )
+    }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/registry/ui/kbd.tsx

@@ -1,63 +1,60 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface KbdProps extends React.HTMLAttributes<HTMLElement> {
-    /** Array of keys to display (e.g., ["Ctrl", "K"]) */
-    keys?: string[]
-}
-
-/**
- * Kbd - Keyboard key display component
- * 
- * Usage:
- * <Kbd>⌘</Kbd>
- * <Kbd keys={["Ctrl", "Shift", "P"]} />
- */
-const Kbd = React.forwardRef<HTMLElement, KbdProps>(
-    ({ className, children, keys, ...props }, ref) => {
-        // If keys array is provided, render each key
-        if (keys && keys.length > 0) {
-            return (
-                <span className="inline-flex items-center gap-1">
-                    {keys.map((key, index) => (
-                        <React.Fragment key={index}>
-                            <kbd
-                                ref={index === 0 ? ref : undefined}
-                                className={cn(
-                                    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
-                                    className
-                                )}
-                                {...props}
-                            >
-                                {key}
-                            </kbd>
-                            {index < keys.length - 1 && (
-                                <span className="text-muted-foreground text-xs">+</span>
-                            )}
-                        </React.Fragment>
-                    ))}
-                </span>
-            )
-        }
-
-        // Single key rendering
-        return (
-            <kbd
-                ref={ref}
-                className={cn(
-                    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </kbd>
-        )
-    }
-)
-Kbd.displayName = "Kbd"
-
-export { Kbd }
-
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /** Array of keys to display (e.g., ["Ctrl", "K"]) */
+    keys?: string[]
+}
+
+/**
+ * Kbd - Keyboard key display component
+ * 
+ * Usage:
+ * <Kbd>⌘</Kbd>
+ * <Kbd keys={["Ctrl", "Shift", "P"]} />
+ */
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+    ({ className, children, keys, ...props }, ref) => {
+        // If keys array is provided, render each key
+        if (keys && keys.length > 0) {
+            return (
+                <span className="inline-flex items-center gap-1">
+                    {keys.map((key, index) => (
+                        <React.Fragment key={index}>
+                            <kbd
+                                ref={index === 0 ? ref : undefined}
+                                className={cn(
+                                    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+                                    className
+                                )}
+                                {...props}
+                            >
+                                {key}
+                            </kbd>
+                            {index < keys.length - 1 && (
+                                <span className="text-muted-foreground text-xs">+</span>
+                            )}
+                        </React.Fragment>
+                    ))}
+                </span>
+            )
+        }
+
+        // Single key rendering
+        return (
+            <kbd
+                ref={ref}
+                className={cn(
+                    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </kbd>
+        )
+    }
+)
+Kbd.displayName = "Kbd"
+
+export { Kbd }

package/src/registry/ui/label.tsx

@@ -1,37 +1,36 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-/**
- * Label component for form inputs
- * 
- * @example
- * <Label htmlFor="email">Email</Label>
- * <Input id="email" type="email" />
- */
-const Label = React.forwardRef<
-    HTMLLabelElement,
-    React.LabelHTMLAttributes<HTMLLabelElement> & {
-        /**
-         * Whether the associated input is required
-         */
-        required?: boolean
-    }
->(({ className, required, children, ...props }, ref) => (
-    <label
-        ref={ref}
-        className={cn(
-            "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-            className
-        )}
-        {...props}
-    >
-        {children}
-        {required && <span className="text-destructive ml-1">*</span>}
-    </label>
-))
-Label.displayName = "Label"
-
-export { Label }
-
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * Label component for form inputs
+ * 
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" />
+ */
+const Label = React.forwardRef<
+    HTMLLabelElement,
+    React.LabelHTMLAttributes<HTMLLabelElement> & {
+        /**
+         * Whether the associated input is required
+         */
+        required?: boolean
+    }
+>(({ className, required, children, ...props }, ref) => (
+    <label
+        ref={ref}
+        className={cn(
+            "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            className
+        )}
+        {...props}
+    >
+        {children}
+        {required && <span className="text-destructive ml-1">*</span>}
+    </label>
+))
+Label.displayName = "Label"
+
+export { Label }