@srcroot/ui 0.0.1

package/registry/slider.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: number[]
+    onValueChange?: (value: number[]) => void
+    defaultValue?: number[]
+    min?: number
+    max?: number
+    step?: number
+    disabled?: boolean
+}
+
+/**
+ * Slider component with keyboard support
+ * 
+ * @example
+ * const [value, setValue] = useState([50])
+ * <Slider value={value} onValueChange={setValue} max={100} step={1} />
+ */
+const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+    ({
+        className,
+        value: controlledValue,
+        onValueChange,
+        defaultValue = [0],
+        min = 0,
+        max = 100,
+        step = 1,
+        disabled,
+        ...props
+    }, ref) => {
+        const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+
+        const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
+        const setValue = onValueChange || setUncontrolledValue
+        const currentValue = value[0] || 0
+
+        const percentage = ((currentValue - min) / (max - min)) * 100
+
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            if (disabled) return
+
+            let newValue = currentValue
+
+            switch (e.key) {
+                case "ArrowRight":
+                case "ArrowUp":
+                    newValue = Math.min(currentValue + step, max)
+                    break
+                case "ArrowLeft":
+                case "ArrowDown":
+                    newValue = Math.max(currentValue - step, min)
+                    break
+                case "Home":
+                    newValue = min
+                    break
+                case "End":
+                    newValue = max
+                    break
+                default:
+                    return
+            }
+
+            e.preventDefault()
+            setValue([newValue])
+        }
+
+        const handleTrackClick = (e: React.MouseEvent<HTMLDivElement>) => {
+            if (disabled) return
+
+            const rect = e.currentTarget.getBoundingClientRect()
+            const clickPosition = (e.clientX - rect.left) / rect.width
+            const newValue = min + clickPosition * (max - min)
+            const steppedValue = Math.round(newValue / step) * step
+            setValue([Math.min(Math.max(steppedValue, min), max)])
+        }
+
+        return (
+            <div
+                ref={ref}
+                role="slider"
+                aria-valuenow={currentValue}
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-disabled={disabled}
+                tabIndex={disabled ? -1 : 0}
+                className={cn(
+                    "relative flex w-full touch-none select-none items-center",
+                    disabled && "opacity-50 cursor-not-allowed",
+                    className
+                )}
+                onKeyDown={handleKeyDown}
+                {...props}
+            >
+                <div
+                    className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20 cursor-pointer"
+                    onClick={handleTrackClick}
+                >
+                    <div
+                        className="absolute h-full bg-primary"
+                        style={{ width: `${percentage}%` }}
+                    />
+                </div>
+                <div
+                    className="absolute block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+                    style={{ left: `calc(${percentage}% - 8px)` }}
+                />
+            </div>
+        )
+    }
+)
+Slider.displayName = "Slider"
+
+export { Slider }

package/registry/star-rating.tsx

@@ -0,0 +1,131 @@
+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
+}
+
+const sizeClasses = {
+    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)
+
+        const displayValue = hoverValue !== null ? hoverValue : value
+
+        const handleClick = (starValue: number) => {
+            if (!readonly) {
+                onValueChange?.(starValue)
+            }
+        }
+
+        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))
+            }
+        }
+
+        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>
+
+                            {/* 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 }

package/registry/switch.tsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /**
+     * Whether the switch is on
+     */
+    checked?: boolean
+    /**
+     * Callback when the switch state changes
+     */
+    onCheckedChange?: (checked: boolean) => void
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean
+}
+
+/**
+ * Switch/Toggle component with keyboard accessibility
+ * 
+ * @example
+ * const [enabled, setEnabled] = useState(false)
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ */
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+    ({ className, checked = false, onCheckedChange, disabled, ...props }, ref) => {
+        const handleClick = () => {
+            if (!disabled) {
+                onCheckedChange?.(!checked)
+            }
+        }
+
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault()
+                handleClick()
+            }
+        }
+
+        return (
+            <button
+                type="button"
+                role="switch"
+                aria-checked={checked}
+                aria-disabled={disabled}
+                disabled={disabled}
+                ref={ref}
+                className={cn(
+                    "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+                    checked ? "bg-primary" : "bg-input",
+                    className
+                )}
+                onClick={handleClick}
+                onKeyDown={handleKeyDown}
+                {...props}
+            >
+                <span
+                    className={cn(
+                        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+                        checked ? "translate-x-4" : "translate-x-0"
+                    )}
+                />
+            </button>
+        )
+    }
+)
+Switch.displayName = "Switch"
+
+export { Switch }

package/registry/table.tsx

@@ -0,0 +1,136 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * Table components for data display
+ * 
+ * @example
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead>Email</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>John Doe</TableCell>
+ *       <TableCell>john@example.com</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ */
+
+const Table = React.forwardRef<
+    HTMLTableElement,
+    React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+        <table
+            ref={ref}
+            className={cn("w-full caption-bottom text-sm", className)}
+            {...props}
+        />
+    </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tbody
+        ref={ref}
+        className={cn("[&_tr:last-child]:border-0", className)}
+        {...props}
+    />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tfoot
+        ref={ref}
+        className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+        {...props}
+    />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+    HTMLTableRowElement,
+    React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+    <tr
+        ref={ref}
+        className={cn(
+            "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+            className
+        )}
+        {...props}
+    />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <th
+        ref={ref}
+        className={cn(
+            "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+            className
+        )}
+        {...props}
+    />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn(
+            "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+            className
+        )}
+        {...props}
+    />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+    <caption
+        ref={ref}
+        className={cn("mt-4 text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+    Table,
+    TableHeader,
+    TableBody,
+    TableFooter,
+    TableHead,
+    TableRow,
+    TableCell,
+    TableCaption,
+}

package/registry/tabs.tsx

@@ -0,0 +1,122 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface TabsContextValue {
+    value: string
+    onValueChange: (value: string) => void
+}
+
+const TabsContext = React.createContext<TabsContextValue | null>(null)
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string
+    onValueChange?: (value: string) => void
+    defaultValue?: string
+}
+
+/**
+ * Tabs component with keyboard navigation
+ * 
+ * @example
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ */
+const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+    ({ className, value: controlledValue, onValueChange, defaultValue = "", children, ...props }, ref) => {
+        const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+
+        const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
+        const setValue = onValueChange || setUncontrolledValue
+
+        return (
+            <TabsContext.Provider value={{ value, onValueChange: setValue }}>
+                <div ref={ref} className={cn("", className)} {...props}>
+                    {children}
+                </div>
+            </TabsContext.Provider>
+        )
+    }
+)
+Tabs.displayName = "Tabs"
+
+const TabsList = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="tablist"
+        className={cn(
+            "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+            className
+        )}
+        {...props}
+    />
+))
+TabsList.displayName = "TabsList"
+
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string
+}
+
+const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
+    ({ className, value, ...props }, ref) => {
+        const context = React.useContext(TabsContext)
+        if (!context) throw new Error("TabsTrigger must be used within Tabs")
+
+        const isSelected = context.value === value
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                role="tab"
+                aria-selected={isSelected}
+                tabIndex={isSelected ? 0 : -1}
+                className={cn(
+                    "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                    isSelected && "bg-background text-foreground shadow",
+                    className
+                )}
+                onClick={() => context.onValueChange(value)}
+                {...props}
+            />
+        )
+    }
+)
+TabsTrigger.displayName = "TabsTrigger"
+
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string
+}
+
+const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
+    ({ className, value, ...props }, ref) => {
+        const context = React.useContext(TabsContext)
+        if (!context) throw new Error("TabsContent must be used within Tabs")
+
+        if (context.value !== value) return null
+
+        return (
+            <div
+                ref={ref}
+                role="tabpanel"
+                tabIndex={0}
+                className={cn(
+                    "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    className
+                )}
+                {...props}
+            />
+        )
+    }
+)
+TabsContent.displayName = "TabsContent"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/registry/text.tsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const textVariants = cva("", {
+    variants: {
+        variant: {
+            h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+            h2: "scroll-m-20 text-3xl font-semibold tracking-tight",
+            h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+            h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+            h5: "scroll-m-20 text-lg font-semibold tracking-tight",
+            h6: "scroll-m-20 text-base font-semibold tracking-tight",
+            p: "leading-7 [&:not(:first-child)]:mt-6",
+            lead: "text-xl text-muted-foreground",
+            large: "text-lg font-semibold",
+            small: "text-sm font-medium leading-none",
+            muted: "text-sm text-muted-foreground",
+            code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+        },
+    },
+    defaultVariants: {
+        variant: "p",
+    },
+})
+
+type TextVariants = VariantProps<typeof textVariants>
+
+interface TextBaseProps extends TextVariants {
+    className?: string
+    children?: React.ReactNode
+}
+
+/**
+ * Polymorphic Text component for typography
+ * 
+ * @example
+ * // As a heading
+ * <Text as="h1" variant="h1">Page Title</Text>
+ * 
+ * // Using heading styles on a different element
+ * <Text as="span" variant="h2">Styled as H2</Text>
+ * 
+ * // Muted text
+ * <Text variant="muted">Secondary information</Text>
+ */
+const Text = React.forwardRef(
+    <T extends React.ElementType = "p">(
+        {
+            as,
+            className,
+            variant,
+            ...props
+        }: TextBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof TextBaseProps | "as">,
+        ref: React.ForwardedRef<React.ElementRef<T>>
+    ) => {
+        const Comp = as || "p"
+
+        return (
+            <Comp
+                ref={ref as any}
+                className={cn(textVariants({ variant, className }))}
+                {...props}
+            />
+        )
+    }
+)
+Text.displayName = "Text"
+
+export { Text, textVariants }

package/registry/textarea.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+    extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Whether the textarea is in an error state
+     */
+    error?: boolean
+}
+
+/**
+ * Textarea component for multi-line text input
+ * 
+ * @example
+ * <Textarea placeholder="Enter your message" />
+ * 
+ * @example
+ * <Textarea error placeholder="Required field" />
+ */
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, error, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm 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
+                )}
+                ref={ref}
+                aria-invalid={error ? "true" : undefined}
+                {...props}
+            />
+        )
+    }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }