@srcroot/ui 0.0.1

package/registry/search.tsx

@@ -0,0 +1,146 @@
+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..." 
+ *   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>()
+
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            const newValue = e.target.value
+            setValue(newValue)
+
+            if (debounceMs > 0) {
+                clearTimeout(debounceRef.current)
+                debounceRef.current = setTimeout(() => {
+                    onSearch?.(newValue)
+                }, debounceMs)
+            } else {
+                onSearch?.(newValue)
+            }
+        }
+
+        const handleClear = () => {
+            setValue("")
+            onSearch?.("")
+        }
+
+        const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Escape") {
+                handleClear()
+            }
+        }
+
+        React.useEffect(() => {
+            return () => {
+                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>
+
+                <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"
+                    )}
+                    {...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"
+
+export { Search }

package/registry/select.tsx

@@ -0,0 +1,190 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface SelectContextValue {
+    value: string
+    onValueChange: (value: string) => void
+    open: boolean
+    setOpen: (open: boolean) => void
+}
+
+const SelectContext = React.createContext<SelectContextValue | null>(null)
+
+interface SelectProps {
+    children: React.ReactNode
+    value?: string
+    onValueChange?: (value: string) => void
+    defaultValue?: string
+}
+
+/**
+ * Custom Select dropdown with keyboard navigation
+ * 
+ * @example
+ * <Select value={value} onValueChange={setValue}>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select option" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">Option 1</SelectItem>
+ *     <SelectItem value="option2">Option 2</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ */
+function Select({ children, value: controlledValue, onValueChange, defaultValue = "" }: SelectProps) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+    const [open, setOpen] = React.useState(false)
+
+    const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
+    const setValue = onValueChange || setUncontrolledValue
+
+    return (
+        <SelectContext.Provider value={{ value, onValueChange: setValue, open, setOpen }}>
+            <div className="relative">
+                {children}
+            </div>
+        </SelectContext.Provider>
+    )
+}
+
+const SelectTrigger = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(SelectContext)
+    if (!context) throw new Error("SelectTrigger must be used within Select")
+
+    return (
+        <button
+            ref={ref}
+            type="button"
+            role="combobox"
+            aria-expanded={context.open}
+            aria-haspopup="listbox"
+            className={cn(
+                "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+                className
+            )}
+            onClick={() => context.setOpen(!context.open)}
+            {...props}
+        >
+            {children}
+            <svg
+                className={cn("h-4 w-4 opacity-50 transition-transform", context.open && "rotate-180")}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+            >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+            </svg>
+        </button>
+    )
+})
+SelectTrigger.displayName = "SelectTrigger"
+
+interface SelectValueProps {
+    placeholder?: string
+}
+
+function SelectValue({ placeholder }: SelectValueProps) {
+    const context = React.useContext(SelectContext)
+    if (!context) throw new Error("SelectValue must be used within Select")
+
+    return (
+        <span className={cn(!context.value && "text-muted-foreground")}>
+            {context.value || placeholder}
+        </span>
+    )
+}
+
+const SelectContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(SelectContext)
+    if (!context) throw new Error("SelectContent must be used within Select")
+
+    React.useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (context.open) {
+                context.setOpen(false)
+            }
+        }
+
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === "Escape" && context.open) {
+                context.setOpen(false)
+            }
+        }
+
+        document.addEventListener("mousedown", handleClickOutside)
+        document.addEventListener("keydown", handleEscape)
+
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside)
+            document.removeEventListener("keydown", handleEscape)
+        }
+    }, [context.open, context])
+
+    if (!context.open) return null
+
+    return (
+        <div
+            ref={ref}
+            role="listbox"
+            className={cn(
+                "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                className
+            )}
+            onClick={(e) => e.stopPropagation()}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+})
+SelectContent.displayName = "SelectContent"
+
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string
+}
+
+const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
+    ({ className, children, value, ...props }, ref) => {
+        const context = React.useContext(SelectContext)
+        if (!context) throw new Error("SelectItem must be used within Select")
+
+        const isSelected = context.value === value
+
+        return (
+            <div
+                ref={ref}
+                role="option"
+                aria-selected={isSelected}
+                className={cn(
+                    "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                    isSelected && "bg-accent text-accent-foreground",
+                    className
+                )}
+                onClick={() => {
+                    context.onValueChange(value)
+                    context.setOpen(false)
+                }}
+                {...props}
+            >
+                {children}
+                {isSelected && (
+                    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                        </svg>
+                    </span>
+                )}
+            </div>
+        )
+    }
+)
+SelectItem.displayName = "SelectItem"
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }

package/registry/separator.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Orientation of the separator
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical"
+    /**
+     * Whether the separator is decorative (no semantic meaning)
+     * @default true
+     */
+    decorative?: boolean
+}
+
+/**
+ * Separator component for visual division
+ * 
+ * @example
+ * // Horizontal separator
+ * <Separator />
+ * 
+ * // Vertical separator
+ * <Separator orientation="vertical" className="h-4" />
+ */
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+    ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+        <div
+            ref={ref}
+            role={decorative ? "none" : "separator"}
+            aria-orientation={decorative ? undefined : orientation}
+            className={cn(
+                "shrink-0 bg-border",
+                orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Separator.displayName = "Separator"
+
+export { Separator }

package/registry/sheet.tsx

@@ -0,0 +1,180 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+interface SheetContextValue {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+const SheetContext = React.createContext<SheetContextValue | null>(null)
+
+interface SheetProps {
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean
+}
+
+/**
+ * Sheet (slide-in panel) component
+ * 
+ * @example
+ * <Sheet>
+ *   <SheetTrigger asChild>
+ *     <Button>Open Sheet</Button>
+ *   </SheetTrigger>
+ *   <SheetContent side="right">
+ *     <SheetHeader>
+ *       <SheetTitle>Title</SheetTitle>
+ *       <SheetDescription>Description</SheetDescription>
+ *     </SheetHeader>
+ *   </SheetContent>
+ * </Sheet>
+ */
+function Sheet({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: SheetProps) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+
+    const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
+    const setOpen = onOpenChange || setUncontrolledOpen
+
+    return (
+        <SheetContext.Provider value={{ open, onOpenChange: setOpen }}>
+            {children}
+        </SheetContext.Provider>
+    )
+}
+
+interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean
+}
+
+const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(
+    ({ onClick, asChild, children, ...props }, ref) => {
+        const context = React.useContext(SheetContext)
+        if (!context) throw new Error("SheetTrigger must be used within Sheet")
+
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            context.onOpenChange(true)
+        }
+
+        if (asChild && React.isValidElement(children)) {
+            return React.cloneElement(children as React.ReactElement<any>, {
+                onClick: handleClick,
+                ref,
+            })
+        }
+
+        return (
+            <button ref={ref} onClick={handleClick} {...props}>
+                {children}
+            </button>
+        )
+    }
+)
+SheetTrigger.displayName = "SheetTrigger"
+
+const sheetVariants = cva(
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b",
+                bottom: "inset-x-0 bottom-0 border-t",
+                left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+                right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    }
+)
+
+interface SheetContentProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof sheetVariants> { }
+
+const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
+    ({ side = "right", className, children, ...props }, ref) => {
+        const context = React.useContext(SheetContext)
+        if (!context) throw new Error("SheetContent must be used within Sheet")
+
+        React.useEffect(() => {
+            const handleEscape = (e: KeyboardEvent) => {
+                if (e.key === "Escape") {
+                    context.onOpenChange(false)
+                }
+            }
+
+            if (context.open) {
+                document.addEventListener("keydown", handleEscape)
+                document.body.style.overflow = "hidden"
+            }
+
+            return () => {
+                document.removeEventListener("keydown", handleEscape)
+                document.body.style.overflow = ""
+            }
+        }, [context.open, context])
+
+        if (!context.open) return null
+
+        return (
+            <>
+                <div
+                    className="fixed inset-0 z-50 bg-black/80"
+                    onClick={() => context.onOpenChange(false)}
+                />
+                <div
+                    ref={ref}
+                    role="dialog"
+                    aria-modal="true"
+                    className={cn(sheetVariants({ side }), className)}
+                    {...props}
+                >
+                    {children}
+                    <button
+                        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        onClick={() => context.onOpenChange(false)}
+                    >
+                        <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>
+                        <span className="sr-only">Close</span>
+                    </button>
+                </div>
+            </>
+        )
+    }
+)
+SheetContent.displayName = "SheetContent"
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+    HTMLHeadingElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h2 ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
+))
+SheetTitle.displayName = "SheetTitle"
+
+const SheetDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+SheetDescription.displayName = "SheetDescription"
+
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }

package/registry/skeleton.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * Skeleton loading placeholder
+ * 
+ * @example
+ * <Skeleton className="h-4 w-[200px]" />
+ * 
+ * @example
+ * // Circle skeleton for avatars
+ * <Skeleton className="h-12 w-12 rounded-full" />
+ */
+const Skeleton = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("animate-pulse rounded-md bg-primary/10", className)}
+        {...props}
+    />
+))
+Skeleton.displayName = "Skeleton"
+
+export { Skeleton }