@srcroot/ui 0.0.42 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "A UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {
@@ -63,4 +63,4 @@
       "optional": true
     }
   }
-}
+}

package/src/registry/ui/checkbox.tsx

@@ -14,6 +14,10 @@ interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
      * Whether the checkbox is disabled
      */
     disabled?: boolean
+    /**
+     * The default checked state (for uncontrolled mode)
+     */
+    defaultChecked?: boolean
 }
 
 /**
@@ -24,10 +28,18 @@ interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
  * <Checkbox checked={checked} onCheckedChange={setChecked} />
  */
 const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
-    ({ className, checked = false, onCheckedChange, disabled, ...props }, ref) => {
+    ({ className, checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled, ...props }, ref) => {
+        const [isChecked, setIsChecked] = React.useState(defaultChecked)
+
+        const checked = controlledChecked !== undefined ? controlledChecked : isChecked
+
         const handleClick = () => {
             if (!disabled) {
-                onCheckedChange?.(!checked)
+                const newChecked = !checked
+                if (controlledChecked === undefined) {
+                    setIsChecked(newChecked)
+                }
+                onCheckedChange?.(newChecked)
             }
         }
 

package/src/registry/ui/form-field.tsx

@@ -0,0 +1,91 @@
+import * as React from "react"
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The label for the field
+     */
+    label?: React.ReactNode
+    /**
+     * Helper text description
+     */
+    description?: React.ReactNode
+    /**
+     * Error message
+     */
+    error?: React.ReactNode
+    /**
+     * Whether the field is required (shows asterisk)
+     */
+    required?: boolean
+    /**
+     * The ID of the input element, used for label association
+     */
+    htmlFor?: string
+}
+
+/**
+ * FormField wrapper for consistent label and error placement
+ * 
+ * @example
+ * <FormField
+ *   label="Email"
+ *   description="We'll never share your email."
+ *   error={errors.email}
+ *   required
+ * >
+ *   <Input placeholder="user@example.com" />
+ * </FormField>
+ */
+const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
+    ({ className, label, description, error, required, htmlFor, children, ...props }, ref) => {
+        const id = htmlFor || React.useId()
+
+        // Clone child to inject id and error state if it's a valid React element
+        const childWithProps = React.isValidElement(children)
+            ? React.cloneElement(children as React.ReactElement<any>, {
+                id: id,
+                error: !!error,
+                "aria-describedby": error ? `${id}-error` : description ? `${id}-desc` : undefined,
+            })
+            : children
+
+        return (
+            <div
+                ref={ref}
+                className={cn("space-y-2", className)}
+                {...props}
+            >
+                {label && (
+                    <Label htmlFor={id} required={required}>
+                        {label}
+                    </Label>
+                )}
+
+                {childWithProps}
+
+                {description && !error && (
+                    <p
+                        id={`${id}-desc`}
+                        className="text-[0.8rem] text-muted-foreground"
+                    >
+                        {description}
+                    </p>
+                )}
+
+                {error && (
+                    <p
+                        id={`${id}-error`}
+                        className="text-[0.8rem] font-medium text-destructive"
+                    >
+                        {error}
+                    </p>
+                )}
+            </div>
+        )
+    }
+)
+FormField.displayName = "FormField"
+
+export { FormField }

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

@@ -0,0 +1,82 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const InputGroup = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
+>(({ className, children, error, ...props }, ref) => {
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                "flex w-full items-center rounded-md",
+                "focus-within:ring-1 focus-within:ring-ring",
+                error && "focus-within:ring-destructive focus-within:border-destructive",
+                // First child: rounded-l only, remove right border if not last
+                "[&>*:first-child]:rounded-r-none",
+                // Last child: rounded-r only, remove left border if not first
+                "[&>*:last-child]:rounded-l-none",
+                // Middle children: no rounding
+                "[&>*:not(:first-child):not(:last-child)]:rounded-none",
+                // Negative margin to merge borders
+                "[&>*:not(:first-child)]:-ml-px",
+                // Bring hovered element to front
+                "[&>*:hover]:z-10",
+                className
+            )}
+            {...props}
+        >
+            {React.Children.map(children, (child) => {
+                if (!React.isValidElement(child)) return child
+                const element = child as React.ReactElement<{ className?: string, error?: boolean }>
+
+                // Only pass error to custom components, not DOM elements
+                const additionalProps: { className: string; error?: boolean } = {
+                    className: cn(
+                        element.props.className,
+                        "focus-visible:ring-0 focus-visible:ring-offset-0",
+                        error && "border-destructive focus-visible:ring-destructive"
+                    )
+                }
+
+                if (typeof element.type !== "string") {
+                    additionalProps.error = error
+                }
+
+                return React.cloneElement(element, additionalProps)
+            })}
+        </div>
+    )
+})
+InputGroup.displayName = "InputGroup"
+
+const InputAddon = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
+>(({ className, children, error, ...props }, ref) => {
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                "flex h-9 items-center justify-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground shadow-sm",
+                error && "border-destructive",
+                className
+            )}
+            {...props}
+        >
+            {React.Children.map(children, (child: React.ReactNode) => {
+                if (!React.isValidElement(child)) return child
+                const element = child as React.ReactElement<{ className?: string }>
+                return React.cloneElement(element, {
+                    className: cn(
+                        element.props.className,
+                        "focus-visible:ring-0 focus-visible:ring-offset-0"
+                    ),
+                })
+            })}
+        </div>
+    )
+})
+InputAddon.displayName = "InputAddon"
+
+export { InputGroup, InputAddon }

package/src/registry/ui/input.tsx

@@ -1,4 +1,8 @@
+"use client"
+
 import * as React from "react"
+import { FiEye, FiEyeOff, FiSearch, FiX } from "react-icons/fi"
+
 import { cn } from "@/lib/utils"
 
 export interface InputProps
@@ -12,30 +16,107 @@ export interface InputProps
 /**
  * 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" />
  * 
- * // With error state
- * <Input error placeholder="Invalid email" />
- * 
- * // With type
+ * // 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 (
-            <input
-                type={type}
-                className={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",
-                    className
+            <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>
                 )}
-                ref={ref}
-                aria-invalid={error ? "true" : undefined}
-                {...props}
-            />
+            </div>
         )
     }
 )