@srcroot/ui 0.0.1

package/registry/breadcrumb.tsx

@@ -0,0 +1,151 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * Breadcrumb navigation component
+ * 
+ * @example
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+
+const Breadcrumb = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+>(({ ...props }, ref) => (
+    <nav ref={ref} aria-label="breadcrumb" {...props} />
+))
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+    HTMLOListElement,
+    React.OListHTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn(
+            "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+            className
+        )}
+        {...props}
+    />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+    HTMLLIElement,
+    React.LiHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+    <li
+        ref={ref}
+        className={cn("inline-flex items-center gap-1.5", className)}
+        {...props}
+    />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    asChild?: boolean
+}
+
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+    ({ asChild, className, children, ...props }, ref) => {
+        if (asChild && React.isValidElement(children)) {
+            return React.cloneElement(children as React.ReactElement<any>, {
+                ref,
+                className: cn("transition-colors hover:text-foreground", className),
+            })
+        }
+
+        return (
+            <a
+                ref={ref}
+                className={cn("transition-colors hover:text-foreground", className)}
+                {...props}
+            >
+                {children}
+            </a>
+        )
+    }
+)
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+    HTMLSpanElement,
+    React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+    <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn("font-normal text-foreground", className)}
+        {...props}
+    />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+    children,
+    className,
+    ...props
+}: React.LiHTMLAttributes<HTMLLIElement>) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
+        {...props}
+    >
+        {children || (
+            <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>
+        )}
+    </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+    <span
+        role="presentation"
+        aria-hidden="true"
+        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</span>
+    </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+}

package/registry/button-group.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonGroupVariants = cva("inline-flex", {
+    variants: {
+        orientation: {
+            horizontal: "flex-row",
+            vertical: "flex-col",
+        },
+        attached: {
+            true: "",
+            false: "gap-2",
+        },
+    },
+    compoundVariants: [
+        {
+            orientation: "horizontal",
+            attached: true,
+            className:
+                "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child)]:-ml-px",
+        },
+        {
+            orientation: "vertical",
+            attached: true,
+            className:
+                "[&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child)]:-mt-px",
+        },
+    ],
+    defaultVariants: {
+        orientation: "horizontal",
+        attached: true,
+    },
+})
+
+type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>
+
+interface ButtonGroupBaseProps extends ButtonGroupVariants {
+    className?: string
+    children?: React.ReactNode
+}
+
+/**
+ * Polymorphic ButtonGroup to group buttons together
+ * 
+ * @example
+ * <ButtonGroup>
+ *   <Button>Left</Button>
+ *   <Button>Center</Button>
+ *   <Button>Right</Button>
+ * </ButtonGroup>
+ * 
+ * @example
+ * <ButtonGroup attached={false}>
+ *   <Button>Spaced</Button>
+ *   <Button>Buttons</Button>
+ * </ButtonGroup>
+ */
+const ButtonGroup = React.forwardRef(
+    <T extends React.ElementType = "div">(
+        {
+            as,
+            className,
+            orientation,
+            attached,
+            ...props
+        }: ButtonGroupBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonGroupBaseProps | "as">,
+        ref: React.ForwardedRef<React.ElementRef<T>>
+    ) => {
+        const Comp = as || "div"
+
+        return (
+            <Comp
+                ref={ref as any}
+                role="group"
+                className={cn(buttonGroupVariants({ orientation, attached, className }))}
+                {...props}
+            />
+        )
+    }
+)
+ButtonGroup.displayName = "ButtonGroup"
+
+export { ButtonGroup, buttonGroupVariants }

package/registry/button.tsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+                destructive:
+                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                outline:
+                    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                secondary:
+                    "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+
+type ButtonVariants = VariantProps<typeof buttonVariants>
+
+interface ButtonBaseProps extends ButtonVariants {
+    className?: string
+    children?: React.ReactNode
+}
+
+/**
+ * Polymorphic Button component
+ * 
+ * @example
+ * // As a button (default)
+ * <Button variant="outline">Click me</Button>
+ * 
+ * // As a link
+ * <Button as="a" href="/home" variant="link">Go Home</Button>
+ * 
+ * // With loading state
+ * <Button disabled>
+ *   <LoadingSpinner /> Processing...
+ * </Button>
+ */
+const Button = React.forwardRef(
+    <T extends React.ElementType = "button">(
+        {
+            as,
+            className,
+            variant,
+            size,
+            ...props
+        }: ButtonBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonBaseProps | "as">,
+        ref: React.ForwardedRef<React.ElementRef<T>>
+    ) => {
+        const Comp = as || "button"
+
+        // Ensure proper keyboard handling for non-button elements
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            if (Comp !== "button" && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault()
+                    ; (e.currentTarget as HTMLElement).click()
+            }
+            // Call original onKeyDown if provided
+            const originalOnKeyDown = (props as any).onKeyDown
+            if (originalOnKeyDown) {
+                originalOnKeyDown(e)
+            }
+        }
+
+        // Add role="button" for non-button elements
+        const accessibilityProps = Comp !== "button" ? {
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+        } : {}
+
+        return (
+            <Comp
+                ref={ref as any}
+                className={cn(buttonVariants({ variant, size, className }))}
+                {...accessibilityProps}
+                {...props}
+            />
+        )
+    }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/registry/calendar.tsx

@@ -0,0 +1,238 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface CalendarContextValue {
+    currentMonth: Date
+    setCurrentMonth: (date: Date) => void
+    selectedDates: Date[]
+    onSelect: (date: Date) => void
+    mode: "single" | "multiple" | "range"
+    rangeStart: Date | null
+}
+
+const CalendarContext = React.createContext<CalendarContextValue | null>(null)
+
+interface CalendarProps {
+    /** Selection mode */
+    mode?: "single" | "multiple" | "range"
+    /** Selected date(s) */
+    selected?: Date | Date[]
+    /** Callback when date is selected */
+    onSelect?: (date: Date | Date[] | undefined) => void
+    /** Default month to display */
+    defaultMonth?: Date
+    /** Minimum selectable date */
+    minDate?: Date
+    /** Maximum selectable date */
+    maxDate?: Date
+    /** Whether calendar is disabled */
+    disabled?: boolean
+    className?: string
+}
+
+const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+const MONTHS = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+]
+
+function getDaysInMonth(year: number, month: number): Date[] {
+    const days: Date[] = []
+    const firstDay = new Date(year, month, 1)
+    const lastDay = new Date(year, month + 1, 0)
+
+    // Add days from previous month to fill first week
+    const startPadding = firstDay.getDay()
+    for (let i = startPadding - 1; i >= 0; i--) {
+        days.push(new Date(year, month, -i))
+    }
+
+    // Add days of current month
+    for (let d = 1; d <= lastDay.getDate(); d++) {
+        days.push(new Date(year, month, d))
+    }
+
+    // Add days from next month to fill last week
+    const endPadding = 42 - days.length // 6 rows * 7 days
+    for (let i = 1; i <= endPadding; i++) {
+        days.push(new Date(year, month + 1, i))
+    }
+
+    return days
+}
+
+function isSameDay(d1: Date, d2: Date): boolean {
+    return d1.getDate() === d2.getDate() &&
+        d1.getMonth() === d2.getMonth() &&
+        d1.getFullYear() === d2.getFullYear()
+}
+
+function isInRange(date: Date, start: Date | null, end: Date | null): boolean {
+    if (!start || !end) return false
+    const d = date.getTime()
+    return d >= start.getTime() && d <= end.getTime()
+}
+
+/**
+ * Calendar date picker component
+ * 
+ * @example
+ * // Single date
+ * const [date, setDate] = useState<Date>()
+ * <Calendar mode="single" selected={date} onSelect={setDate} />
+ * 
+ * @example
+ * // Date range
+ * const [range, setRange] = useState<Date[]>([])
+ * <Calendar mode="range" selected={range} onSelect={setRange} />
+ */
+const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
+    (
+        {
+            mode = "single",
+            selected,
+            onSelect,
+            defaultMonth = new Date(),
+            minDate,
+            maxDate,
+            disabled,
+            className,
+        },
+        ref
+    ) => {
+        const [currentMonth, setCurrentMonth] = React.useState(defaultMonth)
+        const [rangeStart, setRangeStart] = React.useState<Date | null>(null)
+
+        const selectedDates = React.useMemo(() => {
+            if (!selected) return []
+            return Array.isArray(selected) ? selected : [selected]
+        }, [selected])
+
+        const handleSelect = (date: Date) => {
+            if (disabled) return
+            if (minDate && date < minDate) return
+            if (maxDate && date > maxDate) return
+
+            if (mode === "single") {
+                onSelect?.(date)
+            } else if (mode === "multiple") {
+                const exists = selectedDates.some(d => isSameDay(d, date))
+                if (exists) {
+                    onSelect?.(selectedDates.filter(d => !isSameDay(d, date)))
+                } else {
+                    onSelect?.([...selectedDates, date])
+                }
+            } else if (mode === "range") {
+                if (!rangeStart) {
+                    setRangeStart(date)
+                    onSelect?.([date])
+                } else {
+                    const start = rangeStart < date ? rangeStart : date
+                    const end = rangeStart < date ? date : rangeStart
+                    onSelect?.([start, end])
+                    setRangeStart(null)
+                }
+            }
+        }
+
+        const navigatePrev = () => {
+            setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1))
+        }
+
+        const navigateNext = () => {
+            setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))
+        }
+
+        const days = getDaysInMonth(currentMonth.getFullYear(), currentMonth.getMonth())
+        const rangeEnd = mode === "range" && selectedDates.length === 2 ? selectedDates[1] : null
+
+        return (
+            <div
+                ref={ref}
+                className={cn("p-3 bg-background border rounded-lg shadow-md w-fit", className)}
+                role="application"
+                aria-label="Calendar"
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between mb-4">
+                    <button
+                        type="button"
+                        onClick={navigatePrev}
+                        className="p-1 rounded hover:bg-accent"
+                        aria-label="Previous month"
+                    >
+                        <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>
+                    </button>
+                    <span className="font-semibold">
+                        {MONTHS[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+                    </span>
+                    <button
+                        type="button"
+                        onClick={navigateNext}
+                        className="p-1 rounded hover:bg-accent"
+                        aria-label="Next month"
+                    >
+                        <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>
+                    </button>
+                </div>
+
+                {/* Day names */}
+                <div className="grid grid-cols-7 gap-1 mb-1">
+                    {DAYS.map(day => (
+                        <div key={day} className="text-center text-xs text-muted-foreground font-medium py-1">
+                            {day}
+                        </div>
+                    ))}
+                </div>
+
+                {/* Days grid */}
+                <div className="grid grid-cols-7 gap-1" role="grid">
+                    {days.map((date, index) => {
+                        const isCurrentMonth = date.getMonth() === currentMonth.getMonth()
+                        const isSelected = selectedDates.some(d => isSameDay(d, date))
+                        const isRangeStart = rangeStart && isSameDay(date, rangeStart)
+                        const isRangeEnd = rangeEnd && isSameDay(date, rangeEnd)
+                        const inRange = isInRange(date, rangeStart || selectedDates[0], rangeEnd)
+                        const isToday = isSameDay(date, new Date())
+                        const isDisabled = disabled ||
+                            (minDate && date < minDate) ||
+                            (maxDate && date > maxDate)
+
+                        return (
+                            <button
+                                key={index}
+                                type="button"
+                                role="gridcell"
+                                aria-selected={isSelected}
+                                aria-disabled={isDisabled}
+                                disabled={isDisabled}
+                                onClick={() => handleSelect(date)}
+                                className={cn(
+                                    "h-8 w-8 rounded text-sm font-medium transition-colors",
+                                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1",
+                                    !isCurrentMonth && "text-muted-foreground/50",
+                                    isCurrentMonth && "text-foreground",
+                                    isToday && "border border-primary",
+                                    isSelected && "bg-primary text-primary-foreground",
+                                    (isRangeStart || isRangeEnd) && "bg-primary text-primary-foreground",
+                                    inRange && !isSelected && "bg-accent",
+                                    !isSelected && !inRange && "hover:bg-accent",
+                                    isDisabled && "opacity-50 cursor-not-allowed"
+                                )}
+                            >
+                                {date.getDate()}
+                            </button>
+                        )
+                    })}
+                </div>
+            </div>
+        )
+    }
+)
+Calendar.displayName = "Calendar"
+
+export { Calendar }

package/registry/card.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * Card component - Container with header, content, and footer
+ * 
+ * @example
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Title</CardTitle>
+ *     <CardDescription>Description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>Content goes here</CardContent>
+ *   <CardFooter>Footer actions</CardFooter>
+ * </Card>
+ */
+
+interface CardBaseProps {
+    className?: string
+    children?: React.ReactNode
+}
+
+const Card = React.forwardRef(
+    <T extends React.ElementType = "div">(
+        {
+            as,
+            className,
+            ...props
+        }: CardBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof CardBaseProps | "as">,
+        ref: React.ForwardedRef<React.ElementRef<T>>
+    ) => {
+        const Comp = as || "div"
+
+        return (
+            <Comp
+                ref={ref as any}
+                className={cn(
+                    "rounded-xl border bg-card text-card-foreground shadow",
+                    className
+                )}
+                {...props}
+            />
+        )
+    }
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex flex-col space-y-1.5 p-6", className)}
+        {...props}
+    />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(
+    <T extends React.ElementType = "h3">(
+        {
+            as,
+            className,
+            ...props
+        }: CardBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof CardBaseProps | "as">,
+        ref: React.ForwardedRef<React.ElementRef<T>>
+    ) => {
+        const Comp = as || "h3"
+
+        return (
+            <Comp
+                ref={ref as any}
+                className={cn("font-semibold leading-none tracking-tight", className)}
+                {...props}
+            />
+        )
+    }
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex items-center p-6 pt-0", className)}
+        {...props}
+    />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }