@srcroot/ui 0.0.1

package/registry/loading-spinner.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const spinnerVariants = cva(
+    "animate-spin",
+    {
+        variants: {
+            size: {
+                xs: "h-3 w-3",
+                sm: "h-4 w-4",
+                default: "h-6 w-6",
+                lg: "h-8 w-8",
+                xl: "h-12 w-12",
+            },
+            variant: {
+                default: "text-primary",
+                muted: "text-muted-foreground",
+                white: "text-white",
+            },
+        },
+        defaultVariants: {
+            size: "default",
+            variant: "default",
+        },
+    }
+)
+
+type SpinnerVariants = VariantProps<typeof spinnerVariants>
+
+interface LoadingSpinnerProps extends SpinnerVariants {
+    className?: string
+    /** Accessible label for screen readers */
+    label?: string
+}
+
+/**
+ * Loading spinner with size and color variants
+ * 
+ * @example
+ * <LoadingSpinner />
+ * <LoadingSpinner size="lg" variant="muted" />
+ * <LoadingSpinner size="sm" label="Submitting..." />
+ */
+const LoadingSpinner = React.forwardRef<SVGSVGElement, LoadingSpinnerProps>(
+    ({ className, size, variant, label = "Loading" }, ref) => (
+        <svg
+            ref={ref}
+            className={cn(spinnerVariants({ size, variant, className }))}
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            role="status"
+            aria-label={label}
+        >
+            <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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+        </svg>
+    )
+)
+LoadingSpinner.displayName = "LoadingSpinner"
+
+interface LoadingOverlayProps extends SpinnerVariants {
+    className?: string
+    children?: React.ReactNode
+    /** Whether to show the loading state */
+    loading?: boolean
+    /** Text to display below spinner */
+    text?: string
+}
+
+/**
+ * Full overlay loading state
+ * 
+ * @example
+ * <LoadingOverlay loading={isLoading}>
+ *   <YourContent />
+ * </LoadingOverlay>
+ */
+const LoadingOverlay = React.forwardRef<HTMLDivElement, LoadingOverlayProps>(
+    ({ className, children, loading = true, text, size = "lg", variant }, ref) => {
+        if (!loading) return <>{children}</>
+
+        return (
+            <div ref={ref} className={cn("relative", className)}>
+                {children && <div className="opacity-50 pointer-events-none">{children}</div>}
+                <div className="absolute inset-0 flex flex-col items-center justify-center bg-background/80">
+                    <LoadingSpinner size={size} variant={variant} />
+                    {text && <p className="mt-2 text-sm text-muted-foreground">{text}</p>}
+                </div>
+            </div>
+        )
+    }
+)
+LoadingOverlay.displayName = "LoadingOverlay"
+
+export { LoadingSpinner, LoadingOverlay, spinnerVariants }

package/registry/otp-input.tsx

@@ -0,0 +1,152 @@
+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
+}
+
+/**
+ * OTP Input component with auto-advance
+ * 
+ * @example
+ * const [otp, setOtp] = useState("")
+ * <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
+    ) => {
+        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)
+            }
+        }
+
+        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/registry/pagination.tsx

@@ -0,0 +1,146 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "./button"
+
+interface PaginationProps extends React.HTMLAttributes<HTMLElement> { }
+
+/**
+ * Pagination component
+ * 
+ * @example
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem>
+ *       <PaginationPrevious href="#" />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="#">1</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="#" isActive>2</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationNext href="#" />
+ *     </PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ */
+const Pagination = ({ className, ...props }: PaginationProps) => (
+    <nav
+        role="navigation"
+        aria-label="pagination"
+        className={cn("mx-auto flex w-full justify-center", className)}
+        {...props}
+    />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+    HTMLUListElement,
+    React.HTMLAttributes<HTMLUListElement>
+>(({ className, ...props }, ref) => (
+    <ul
+        ref={ref}
+        className={cn("flex flex-row items-center gap-1", className)}
+        {...props}
+    />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+    HTMLLIElement,
+    React.LiHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    isActive?: boolean
+    size?: "default" | "sm" | "lg" | "icon"
+}
+
+const PaginationLink = ({
+    className,
+    isActive,
+    size = "icon",
+    ...props
+}: PaginationLinkProps) => (
+    <a
+        aria-current={isActive ? "page" : undefined}
+        className={cn(
+            buttonVariants({
+                variant: isActive ? "outline" : "ghost",
+                size,
+            }),
+            className
+        )}
+        {...props}
+    />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to previous page"
+        size="default"
+        className={cn("gap-1 pl-2.5", className)}
+        {...props}
+    >
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Previous</span>
+    </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to next page"
+        size="default"
+        className={cn("gap-1 pr-2.5", className)}
+        {...props}
+    >
+        <span>Next</span>
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+    </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+    <span
+        aria-hidden
+        className={cn("flex h-9 w-9 items-center justify-center", className)}
+        {...props}
+    >
+        <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="1" />
+            <circle cx="19" cy="12" r="1" />
+            <circle cx="5" cy="12" r="1" />
+        </svg>
+        <span className="sr-only">More pages</span>
+    </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+    Pagination,
+    PaginationContent,
+    PaginationLink,
+    PaginationItem,
+    PaginationPrevious,
+    PaginationNext,
+    PaginationEllipsis,
+}

package/registry/popover.tsx

@@ -0,0 +1,135 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface PopoverContextValue {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+const PopoverContext = React.createContext<PopoverContextValue | null>(null)
+
+interface PopoverProps {
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean
+}
+
+/**
+ * Popover component for floating content
+ * 
+ * @example
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button>Open Popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     Popover content here
+ *   </PopoverContent>
+ * </Popover>
+ */
+function Popover({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: PopoverProps) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+
+    const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
+    const setOpen = onOpenChange || setUncontrolledOpen
+
+    return (
+        <PopoverContext.Provider value={{ open, onOpenChange: setOpen }}>
+            <div className="relative inline-block">
+                {children}
+            </div>
+        </PopoverContext.Provider>
+    )
+}
+
+interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean
+}
+
+const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(
+    ({ onClick, asChild, children, ...props }, ref) => {
+        const context = React.useContext(PopoverContext)
+        if (!context) throw new Error("PopoverTrigger must be used within Popover")
+
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            context.onOpenChange(!context.open)
+        }
+
+        if (asChild && React.isValidElement(children)) {
+            return React.cloneElement(children as React.ReactElement<any>, {
+                onClick: handleClick,
+                "aria-expanded": context.open,
+                "aria-haspopup": true,
+                ref,
+            })
+        }
+
+        return (
+            <button
+                ref={ref}
+                aria-expanded={context.open}
+                aria-haspopup={true}
+                onClick={handleClick}
+                {...props}
+            >
+                {children}
+            </button>
+        )
+    }
+)
+PopoverTrigger.displayName = "PopoverTrigger"
+
+const PopoverContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(PopoverContext)
+    if (!context) throw new Error("PopoverContent must be used within Popover")
+
+    React.useEffect(() => {
+        const handleClickOutside = () => {
+            if (context.open) {
+                context.onOpenChange(false)
+            }
+        }
+
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === "Escape" && context.open) {
+                context.onOpenChange(false)
+            }
+        }
+
+        // Delay adding the listener to prevent immediate close
+        const timer = setTimeout(() => {
+            document.addEventListener("click", handleClickOutside)
+        }, 0)
+        document.addEventListener("keydown", handleEscape)
+
+        return () => {
+            clearTimeout(timer)
+            document.removeEventListener("click", handleClickOutside)
+            document.removeEventListener("keydown", handleEscape)
+        }
+    }, [context.open, context])
+
+    if (!context.open) return null
+
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                "absolute z-50 mt-2 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+                className
+            )}
+            onClick={(e) => e.stopPropagation()}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+})
+PopoverContent.displayName = "PopoverContent"
+
+export { Popover, PopoverTrigger, PopoverContent }

package/registry/progress.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Progress value from 0 to 100
+     */
+    value?: number
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number
+}
+
+/**
+ * Progress bar component
+ * 
+ * @example
+ * <Progress value={60} />
+ */
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+    ({ className, value = 0, max = 100, ...props }, ref) => {
+        const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
+
+        return (
+            <div
+                ref={ref}
+                role="progressbar"
+                aria-valuenow={value}
+                aria-valuemin={0}
+                aria-valuemax={max}
+                className={cn(
+                    "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    className="h-full w-full flex-1 bg-primary transition-all"
+                    style={{ transform: `translateX(-${100 - percentage}%)` }}
+                />
+            </div>
+        )
+    }
+)
+Progress.displayName = "Progress"
+
+export { Progress }

package/registry/radio.tsx

@@ -0,0 +1,99 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface RadioGroupContextValue {
+    value: string
+    onValueChange: (value: string) => void
+    name: string
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null)
+
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: string
+    onValueChange?: (value: string) => void
+    defaultValue?: string
+    name?: string
+}
+
+/**
+ * RadioGroup component
+ * 
+ * @example
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <div className="flex items-center space-x-2">
+ *     <RadioGroupItem value="option1" id="option1" />
+ *     <Label htmlFor="option1">Option 1</Label>
+ *   </div>
+ *   <div className="flex items-center space-x-2">
+ *     <RadioGroupItem value="option2" id="option2" />
+ *     <Label htmlFor="option2">Option 2</Label>
+ *   </div>
+ * </RadioGroup>
+ */
+const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+    ({ className, value: controlledValue, onValueChange, defaultValue = "", name = "radio-group", children, ...props }, ref) => {
+        const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+
+        const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
+        const setValue = onValueChange || setUncontrolledValue
+
+        return (
+            <RadioGroupContext.Provider value={{ value, onValueChange: setValue, name }}>
+                <div ref={ref} role="radiogroup" className={cn("grid gap-2", className)} {...props}>
+                    {children}
+                </div>
+            </RadioGroupContext.Provider>
+        )
+    }
+)
+RadioGroup.displayName = "RadioGroup"
+
+interface RadioGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    value: string
+}
+
+const RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+    ({ className, value, ...props }, ref) => {
+        const context = React.useContext(RadioGroupContext)
+        if (!context) throw new Error("RadioGroupItem must be used within RadioGroup")
+
+        const isSelected = context.value === value
+
+        const handleClick = () => {
+            context.onValueChange(value)
+        }
+
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault()
+                handleClick()
+            }
+        }
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                role="radio"
+                aria-checked={isSelected}
+                className={cn(
+                    "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    className
+                )}
+                onClick={handleClick}
+                onKeyDown={handleKeyDown}
+                {...props}
+            >
+                {isSelected && (
+                    <span className="flex items-center justify-center">
+                        <span className="h-2 w-2 rounded-full bg-primary" />
+                    </span>
+                )}
+            </button>
+        )
+    }
+)
+RadioGroupItem.displayName = "RadioGroupItem"
+
+export { RadioGroup, RadioGroupItem }