@srcroot/ui 0.0.1

package/registry/carousel.tsx

@@ -0,0 +1,169 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface CarouselContextValue {
+    currentIndex: number
+    setCurrentIndex: (index: number) => void
+    itemsCount: number
+    setItemsCount: (count: number) => void
+}
+
+const CarouselContext = React.createContext<CarouselContextValue | null>(null)
+
+interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Auto-play interval in ms (0 to disable) */
+    autoPlay?: number
+    /** Loop back to start */
+    loop?: boolean
+}
+
+/**
+ * Carousel/Slider component
+ * 
+ * @example
+ * <Carousel>
+ *   <CarouselContent>
+ *     <CarouselItem>Slide 1</CarouselItem>
+ *     <CarouselItem>Slide 2</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious />
+ *   <CarouselNext />
+ * </Carousel>
+ */
+const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+    ({ className, children, autoPlay = 0, loop = true, ...props }, ref) => {
+        const [currentIndex, setCurrentIndex] = React.useState(0)
+        const [itemsCount, setItemsCount] = React.useState(0)
+
+        React.useEffect(() => {
+            if (autoPlay > 0 && itemsCount > 0) {
+                const interval = setInterval(() => {
+                    setCurrentIndex((prev) => {
+                        if (prev >= itemsCount - 1) {
+                            return loop ? 0 : prev
+                        }
+                        return prev + 1
+                    })
+                }, autoPlay)
+                return () => clearInterval(interval)
+            }
+        }, [autoPlay, itemsCount, loop])
+
+        return (
+            <CarouselContext.Provider value={{ currentIndex, setCurrentIndex, itemsCount, setItemsCount }}>
+                <div
+                    ref={ref}
+                    className={cn("relative", className)}
+                    role="region"
+                    aria-roledescription="carousel"
+                    {...props}
+                >
+                    {children}
+                </div>
+            </CarouselContext.Provider>
+        )
+    }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, children, ...props }, ref) => {
+        const context = React.useContext(CarouselContext)
+        if (!context) throw new Error("CarouselContent must be used within Carousel")
+
+        const childrenArray = React.Children.toArray(children)
+
+        React.useEffect(() => {
+            context.setItemsCount(childrenArray.length)
+        }, [childrenArray.length, context])
+
+        return (
+            <div ref={ref} className={cn("overflow-hidden", className)} {...props}>
+                <div
+                    className="flex transition-transform duration-300 ease-in-out"
+                    style={{ transform: `translateX(-${context.currentIndex * 100}%)` }}
+                >
+                    {children}
+                </div>
+            </div>
+        )
+    }
+)
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            role="group"
+            aria-roledescription="slide"
+            className={cn("min-w-0 shrink-0 grow-0 basis-full", className)}
+            {...props}
+        />
+    )
+)
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => {
+    const context = React.useContext(CarouselContext)
+    if (!context) throw new Error("CarouselPrevious must be used within Carousel")
+
+    const canGoPrev = context.currentIndex > 0
+
+    return (
+        <button
+            ref={ref}
+            type="button"
+            className={cn(
+                "absolute left-4 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full border bg-background shadow-md flex items-center justify-center",
+                "hover:bg-accent disabled:opacity-50",
+                className
+            )}
+            disabled={!canGoPrev}
+            onClick={() => context.setCurrentIndex(context.currentIndex - 1)}
+            aria-label="Previous slide"
+            {...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>
+        </button>
+    )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => {
+    const context = React.useContext(CarouselContext)
+    if (!context) throw new Error("CarouselNext must be used within Carousel")
+
+    const canGoNext = context.currentIndex < context.itemsCount - 1
+
+    return (
+        <button
+            ref={ref}
+            type="button"
+            className={cn(
+                "absolute right-4 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full border bg-background shadow-md flex items-center justify-center",
+                "hover:bg-accent disabled:opacity-50",
+                className
+            )}
+            disabled={!canGoNext}
+            onClick={() => context.setCurrentIndex(context.currentIndex + 1)}
+            aria-label="Next slide"
+            {...props}
+        >
+            <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>
+    )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }

package/registry/checkbox.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean
+    /**
+     * Callback when the checked state changes
+     */
+    onCheckedChange?: (checked: boolean) => void
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean
+}
+
+/**
+ * Checkbox component with keyboard accessibility
+ * 
+ * @example
+ * const [checked, setChecked] = useState(false)
+ * <Checkbox checked={checked} onCheckedChange={setChecked} />
+ */
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+    ({ 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="checkbox"
+                aria-checked={checked}
+                aria-disabled={disabled}
+                disabled={disabled}
+                ref={ref}
+                className={cn(
+                    "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    checked && "bg-primary text-primary-foreground",
+                    className
+                )}
+                onClick={handleClick}
+                onKeyDown={handleKeyDown}
+                {...props}
+            >
+                {checked && (
+                    <svg
+                        className="h-full w-full"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={3}
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M5 13l4 4L19 7"
+                        />
+                    </svg>
+                )}
+            </button>
+        )
+    }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

package/registry/collapsible.tsx

@@ -0,0 +1,110 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface CollapsibleContextValue {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)
+
+interface CollapsibleProps {
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean
+    className?: string
+}
+
+/**
+ * Collapsible component for expandable content
+ * 
+ * @example
+ * <Collapsible>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     Hidden content here
+ *   </CollapsibleContent>
+ * </Collapsible>
+ */
+const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
+    ({ children, open: controlledOpen, onOpenChange, defaultOpen = false, className }, ref) => {
+        const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+
+        const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
+        const setOpen = onOpenChange || setUncontrolledOpen
+
+        return (
+            <CollapsibleContext.Provider value={{ open, onOpenChange: setOpen }}>
+                <div ref={ref} className={className} data-state={open ? "open" : "closed"}>
+                    {children}
+                </div>
+            </CollapsibleContext.Provider>
+        )
+    }
+)
+Collapsible.displayName = "Collapsible"
+
+interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean
+}
+
+const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
+    ({ className, children, asChild, onClick, ...props }, ref) => {
+        const context = React.useContext(CollapsibleContext)
+        if (!context) throw new Error("CollapsibleTrigger must be used within Collapsible")
+
+        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,
+                ref,
+            })
+        }
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                aria-expanded={context.open}
+                className={className}
+                onClick={handleClick}
+                {...props}
+            >
+                {children}
+            </button>
+        )
+    }
+)
+CollapsibleTrigger.displayName = "CollapsibleTrigger"
+
+const CollapsibleContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(CollapsibleContext)
+    if (!context) throw new Error("CollapsibleContent must be used within Collapsible")
+
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                "overflow-hidden transition-all",
+                context.open ? "animate-collapsible-down" : "animate-collapsible-up hidden",
+                className
+            )}
+            data-state={context.open ? "open" : "closed"}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+})
+CollapsibleContent.displayName = "CollapsibleContent"
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/registry/container.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const containerVariants = cva("mx-auto w-full px-4", {
+    variants: {
+        size: {
+            sm: "max-w-screen-sm",
+            md: "max-w-screen-md",
+            lg: "max-w-screen-lg",
+            xl: "max-w-screen-xl",
+            "2xl": "max-w-screen-2xl",
+            full: "max-w-full",
+        },
+    },
+    defaultVariants: {
+        size: "xl",
+    },
+})
+
+type ContainerVariants = VariantProps<typeof containerVariants>
+
+interface ContainerBaseProps extends ContainerVariants {
+    className?: string
+    children?: React.ReactNode
+}
+
+/**
+ * Polymorphic Container for max-width layouts
+ * 
+ * @example
+ * <Container size="lg">Content</Container>
+ * 
+ * @example
+ * <Container as="section" size="md">Section content</Container>
+ */
+const Container = React.forwardRef(
+    <T extends React.ElementType = "div">(
+        {
+            as,
+            className,
+            size,
+            ...props
+        }: ContainerBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof ContainerBaseProps | "as">,
+        ref: React.ForwardedRef<React.ElementRef<T>>
+    ) => {
+        const Comp = as || "div"
+
+        return (
+            <Comp
+                ref={ref as any}
+                className={cn(containerVariants({ size, className }))}
+                {...props}
+            />
+        )
+    }
+)
+Container.displayName = "Container"
+
+export { Container, containerVariants }

package/registry/dialog.tsx

@@ -0,0 +1,264 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface DialogContextValue {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+const DialogContext = React.createContext<DialogContextValue | null>(null)
+
+function useDialogContext() {
+    const context = React.useContext(DialogContext)
+    if (!context) {
+        throw new Error("Dialog components must be used within a Dialog")
+    }
+    return context
+}
+
+interface DialogProps {
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean
+}
+
+/**
+ * Dialog component with focus trap and keyboard handling
+ * 
+ * @example
+ * const [open, setOpen] = useState(false)
+ * 
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogTrigger asChild>
+ *     <Button>Open Dialog</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Title</DialogTitle>
+ *       <DialogDescription>Description</DialogDescription>
+ *     </DialogHeader>
+ *     <div>Content</div>
+ *     <DialogFooter>
+ *       <Button>Save</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ */
+function Dialog({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: DialogProps) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+
+    const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
+    const setOpen = onOpenChange || setUncontrolledOpen
+
+    return (
+        <DialogContext.Provider value={{ open, onOpenChange: setOpen }}>
+            {children}
+        </DialogContext.Provider>
+    )
+}
+
+interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean
+}
+
+const DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
+    ({ onClick, asChild, children, ...props }, ref) => {
+        const { onOpenChange } = useDialogContext()
+
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            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>
+        )
+    }
+)
+DialogTrigger.displayName = "DialogTrigger"
+
+const DialogPortal = ({ children }: { children: React.ReactNode }) => {
+    const { open } = useDialogContext()
+
+    if (!open) return null
+
+    return <>{children}</>
+}
+
+const DialogOverlay = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+    />
+))
+DialogOverlay.displayName = "DialogOverlay"
+
+const DialogContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+    const { open, onOpenChange } = useDialogContext()
+    const contentRef = React.useRef<HTMLDivElement>(null)
+
+    // Handle escape key
+    React.useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                onOpenChange(false)
+            }
+        }
+
+        if (open) {
+            document.addEventListener("keydown", handleEscape)
+            document.body.style.overflow = "hidden"
+        }
+
+        return () => {
+            document.removeEventListener("keydown", handleEscape)
+            document.body.style.overflow = ""
+        }
+    }, [open, onOpenChange])
+
+    // Focus trap
+    React.useEffect(() => {
+        if (open && contentRef.current) {
+            const focusableElements = contentRef.current.querySelectorAll(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            )
+            const firstElement = focusableElements[0] as HTMLElement
+            const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement
+
+            const handleTab = (e: KeyboardEvent) => {
+                if (e.key === "Tab") {
+                    if (e.shiftKey && document.activeElement === firstElement) {
+                        e.preventDefault()
+                        lastElement?.focus()
+                    } else if (!e.shiftKey && document.activeElement === lastElement) {
+                        e.preventDefault()
+                        firstElement?.focus()
+                    }
+                }
+            }
+
+            document.addEventListener("keydown", handleTab)
+            firstElement?.focus()
+
+            return () => document.removeEventListener("keydown", handleTab)
+        }
+    }, [open])
+
+    if (!open) return null
+
+    return (
+        <DialogPortal>
+            <DialogOverlay onClick={() => onOpenChange(false)} />
+            <div
+                ref={(node) => {
+                    (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+                    if (typeof ref === "function") ref(node)
+                    else if (ref) ref.current = node
+                }}
+                role="dialog"
+                aria-modal="true"
+                className={cn(
+                    "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg",
+                    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 disabled:pointer-events-none"
+                    onClick={() => 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>
+        </DialogPortal>
+    )
+})
+DialogContent.displayName = "DialogContent"
+
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+        {...props}
+    />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+        {...props}
+    />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+    HTMLHeadingElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h2
+        ref={ref}
+        className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+        {...props}
+    />
+))
+DialogTitle.displayName = "DialogTitle"
+
+const DialogDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+DialogDescription.displayName = "DialogDescription"
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+}