@srcroot/ui 0.0.1

package/registry/accordion.tsx

@@ -0,0 +1,158 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface AccordionContextValue {
+    value: string[]
+    onValueChange: (value: string[]) => void
+    type: "single" | "multiple"
+}
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(null)
+
+interface AccordionItemContextValue {
+    value: string
+    isOpen: boolean
+    toggle: () => void
+}
+
+const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null)
+
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: "single" | "multiple"
+    value?: string[]
+    onValueChange?: (value: string[]) => void
+    defaultValue?: string[]
+    collapsible?: boolean
+}
+
+/**
+ * Accordion component with single/multiple expand modes
+ * 
+ * @example
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+    ({ className, type = "single", value: controlledValue, onValueChange, defaultValue = [], children, ...props }, ref) => {
+        const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+
+        const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
+        const setValue = onValueChange || setUncontrolledValue
+
+        return (
+            <AccordionContext.Provider value={{ value, onValueChange: setValue, type }}>
+                <div ref={ref} className={cn("", className)} {...props}>
+                    {children}
+                </div>
+            </AccordionContext.Provider>
+        )
+    }
+)
+Accordion.displayName = "Accordion"
+
+interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string
+}
+
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+    ({ className, value, children, ...props }, ref) => {
+        const context = React.useContext(AccordionContext)
+        if (!context) throw new Error("AccordionItem must be used within Accordion")
+
+        const isOpen = context.value.includes(value)
+
+        const toggle = () => {
+            if (context.type === "single") {
+                context.onValueChange(isOpen ? [] : [value])
+            } else {
+                context.onValueChange(
+                    isOpen
+                        ? context.value.filter((v) => v !== value)
+                        : [...context.value, value]
+                )
+            }
+        }
+
+        return (
+            <AccordionItemContext.Provider value={{ value, isOpen, toggle }}>
+                <div
+                    ref={ref}
+                    className={cn("border-b", className)}
+                    data-state={isOpen ? "open" : "closed"}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </AccordionItemContext.Provider>
+        )
+    }
+)
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(AccordionItemContext)
+    if (!context) throw new Error("AccordionTrigger must be used within AccordionItem")
+
+    return (
+        <h3 className="flex">
+            <button
+                ref={ref}
+                type="button"
+                aria-expanded={context.isOpen}
+                className={cn(
+                    "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+                    className
+                )}
+                data-state={context.isOpen ? "open" : "closed"}
+                onClick={context.toggle}
+                {...props}
+            >
+                {children}
+                <svg
+                    className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+                    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>
+        </h3>
+    )
+})
+AccordionTrigger.displayName = "AccordionTrigger"
+
+const AccordionContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(AccordionItemContext)
+    if (!context) throw new Error("AccordionContent must be used within AccordionItem")
+
+    return (
+        <div
+            ref={ref}
+            role="region"
+            className={cn(
+                "overflow-hidden text-sm",
+                context.isOpen ? "animate-accordion-down" : "animate-accordion-up hidden",
+                className
+            )}
+            data-state={context.isOpen ? "open" : "closed"}
+            {...props}
+        >
+            <div className="pb-4 pt-0">{children}</div>
+        </div>
+    )
+})
+AccordionContent.displayName = "AccordionContent"
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/registry/alert-dialog.tsx

@@ -0,0 +1,206 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface AlertDialogContextValue {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+const AlertDialogContext = React.createContext<AlertDialogContextValue | null>(null)
+
+interface AlertDialogProps {
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean
+}
+
+/**
+ * AlertDialog for confirmation actions
+ * Unlike Dialog, it requires explicit action to close (no click-outside dismiss)
+ * 
+ * @example
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="destructive">Delete</Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction>Continue</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ */
+function AlertDialog({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: AlertDialogProps) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+
+    const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
+    const setOpen = onOpenChange || setUncontrolledOpen
+
+    return (
+        <AlertDialogContext.Provider value={{ open, onOpenChange: setOpen }}>
+            {children}
+        </AlertDialogContext.Provider>
+    )
+}
+
+interface AlertDialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean
+}
+
+const AlertDialogTrigger = React.forwardRef<HTMLButtonElement, AlertDialogTriggerProps>(
+    ({ onClick, asChild, children, ...props }, ref) => {
+        const context = React.useContext(AlertDialogContext)
+        if (!context) throw new Error("AlertDialogTrigger must be used within AlertDialog")
+
+        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>
+        )
+    }
+)
+AlertDialogTrigger.displayName = "AlertDialogTrigger"
+
+const AlertDialogContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext)
+    if (!context) throw new Error("AlertDialogContent must be used within AlertDialog")
+
+    React.useEffect(() => {
+        if (context.open) {
+            document.body.style.overflow = "hidden"
+        }
+        return () => {
+            document.body.style.overflow = ""
+        }
+    }, [context.open])
+
+    if (!context.open) return null
+
+    return (
+        <>
+            <div className="fixed inset-0 z-50 bg-black/80" />
+            <div
+                ref={ref}
+                role="alertdialog"
+                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}
+            </div>
+        </>
+    )
+})
+AlertDialogContent.displayName = "AlertDialogContent"
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+    HTMLHeadingElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h2 ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = "AlertDialogTitle"
+
+const AlertDialogDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+AlertDialogDescription.displayName = "AlertDialogDescription"
+
+const AlertDialogAction = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, onClick, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext)
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(e)
+        context?.onOpenChange(false)
+    }
+
+    return (
+        <button
+            ref={ref}
+            className={cn(
+                "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                className
+            )}
+            onClick={handleClick}
+            {...props}
+        />
+    )
+})
+AlertDialogAction.displayName = "AlertDialogAction"
+
+const AlertDialogCancel = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, onClick, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext)
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(e)
+        context?.onOpenChange(false)
+    }
+
+    return (
+        <button
+            ref={ref}
+            className={cn(
+                "mt-2 inline-flex h-10 items-center justify-center rounded-md border border-input bg-transparent px-4 py-2 text-sm font-semibold transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 sm:mt-0",
+                className
+            )}
+            onClick={handleClick}
+            {...props}
+        />
+    )
+})
+AlertDialogCancel.displayName = "AlertDialogCancel"
+
+export {
+    AlertDialog,
+    AlertDialogTrigger,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogFooter,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogAction,
+    AlertDialogCancel,
+}

package/registry/alert.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+    "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+    {
+        variants: {
+            variant: {
+                default: "bg-background text-foreground",
+                destructive:
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+/**
+ * Alert component for inline feedback
+ * 
+ * @example
+ * <Alert>
+ *   <AlertTitle>Note</AlertTitle>
+ *   <AlertDescription>This is an informational message.</AlertDescription>
+ * </Alert>
+ * 
+ * @example
+ * <Alert variant="destructive">
+ *   <AlertTitle>Error</AlertTitle>
+ *   <AlertDescription>Something went wrong.</AlertDescription>
+ * </Alert>
+ */
+const Alert = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+    />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h5
+        ref={ref}
+        className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+        {...props}
+    />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("text-sm [&_p]:leading-relaxed", className)}
+        {...props}
+    />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/registry/aspect-ratio.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The aspect ratio (width / height)
+     * @default 1
+     */
+    ratio?: number
+}
+
+/**
+ * AspectRatio component to maintain consistent dimensions
+ * 
+ * @example
+ * // 16:9 video aspect ratio
+ * <AspectRatio ratio={16 / 9}>
+ *   <img src="..." className="object-cover w-full h-full" />
+ * </AspectRatio>
+ * 
+ * @example
+ * // Square
+ * <AspectRatio ratio={1}>
+ *   <div className="bg-muted" />
+ * </AspectRatio>
+ */
+const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
+    ({ className, ratio = 1, style, children, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn("relative w-full", className)}
+            style={{
+                paddingBottom: `${100 / ratio}%`,
+                ...style,
+            }}
+            {...props}
+        >
+            <div className="absolute inset-0">{children}</div>
+        </div>
+    )
+)
+AspectRatio.displayName = "AspectRatio"
+
+export { AspectRatio }

package/registry/avatar.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const avatarVariants = cva(
+    "relative flex shrink-0 overflow-hidden rounded-full",
+    {
+        variants: {
+            size: {
+                sm: "h-8 w-8 text-xs",
+                default: "h-10 w-10 text-sm",
+                lg: "h-12 w-12 text-base",
+                xl: "h-16 w-16 text-lg",
+            },
+        },
+        defaultVariants: {
+            size: "default",
+        },
+    }
+)
+
+type AvatarVariants = VariantProps<typeof avatarVariants>
+
+interface AvatarProps extends AvatarVariants {
+    className?: string
+    children?: React.ReactNode
+}
+
+/**
+ * Avatar component with image and fallback
+ * 
+ * @example
+ * <Avatar>
+ *   <AvatarImage src="/avatar.jpg" alt="User" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ */
+const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+    ({ className, size, ...props }, ref) => (
+        <span
+            ref={ref}
+            className={cn(avatarVariants({ size, className }))}
+            {...props}
+        />
+    )
+)
+Avatar.displayName = "Avatar"
+
+interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    onLoadingStatusChange?: (status: "loading" | "loaded" | "error") => void
+}
+
+const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
+    ({ className, onLoadingStatusChange, ...props }, ref) => {
+        const [status, setStatus] = React.useState<"loading" | "loaded" | "error">("loading")
+
+        React.useEffect(() => {
+            onLoadingStatusChange?.(status)
+        }, [status, onLoadingStatusChange])
+
+        return (
+            <img
+                ref={ref}
+                className={cn(
+                    "aspect-square h-full w-full object-cover",
+                    status === "loading" && "opacity-0",
+                    status === "error" && "hidden",
+                    className
+                )}
+                onLoad={() => setStatus("loaded")}
+                onError={() => setStatus("error")}
+                {...props}
+            />
+        )
+    }
+)
+AvatarImage.displayName = "AvatarImage"
+
+const AvatarFallback = React.forwardRef<
+    HTMLSpanElement,
+    React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+    <span
+        ref={ref}
+        className={cn(
+            "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",
+            className
+        )}
+        {...props}
+    />
+))
+AvatarFallback.displayName = "AvatarFallback"
+
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants }

package/registry/badge.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive:
+                    "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+                outline: "text-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+type BadgeVariants = VariantProps<typeof badgeVariants>
+
+interface BadgeBaseProps extends BadgeVariants {
+    className?: string
+    children?: React.ReactNode
+}
+
+/**
+ * Polymorphic Badge component for status indicators
+ * 
+ * @example
+ * // Default badge
+ * <Badge>New</Badge>
+ * 
+ * // Destructive variant
+ * <Badge variant="destructive">Error</Badge>
+ * 
+ * // As a link
+ * <Badge as="a" href="/status">View Status</Badge>
+ */
+const Badge = React.forwardRef(
+    <T extends React.ElementType = "span">(
+        {
+            as,
+            className,
+            variant,
+            ...props
+        }: BadgeBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof BadgeBaseProps | "as">,
+        ref: React.ForwardedRef<React.ElementRef<T>>
+    ) => {
+        const Comp = as || "span"
+
+        return (
+            <Comp
+                ref={ref as any}
+                className={cn(badgeVariants({ variant, className }))}
+                {...props}
+            />
+        )
+    }
+)
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }