@srcroot/ui 0.0.1 → 0.0.2

package/registry/date-picker.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "./calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+import { Button } from "./button"
+import { cn } from "@/lib/utils"
+
+// Calendar icon
+const CalendarIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="mr-2 h-4 w-4 opacity-50"
+    >
+        <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+        <line x1="16" x2="16" y1="2" y2="6" />
+        <line x1="8" x2="8" y1="2" y2="6" />
+        <line x1="3" x2="21" y1="10" y2="10" />
+    </svg>
+)
+
+// Format helpers
+const formatDate = (date: Date) => {
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+}
+
+const formatRange = (dates: Date[]) => {
+    if (dates.length === 0) return null
+    if (dates.length === 1) return formatDate(dates[0])
+    return `${formatDate(dates[0])} → ${formatDate(dates[1])}`
+}
+
+const formatMultiple = (dates: Date[]) => {
+    if (dates.length === 0) return null
+    return `${dates.length} date${dates.length > 1 ? 's' : ''} selected`
+}
+
+// DatePicker Props
+interface DatePickerBaseProps {
+    /** Placeholder text when no date selected */
+    placeholder?: string
+    /** Whether the picker is disabled */
+    disabled?: boolean
+    /** Custom class name for the trigger button */
+    className?: string
+    /** Number of months to display */
+    numberOfMonths?: 1 | 2
+    /** Calendar size */
+    size?: "xs" | "sm" | "default" | "md" | "lg"
+}
+
+interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode?: "single"
+    selected?: Date
+    onSelect?: (date: Date | undefined) => void
+}
+
+interface DatePickerMultipleProps extends DatePickerBaseProps {
+    mode: "multiple"
+    selected?: Date[]
+    onSelect?: (dates: Date[]) => void
+}
+
+interface DatePickerRangeProps extends DatePickerBaseProps {
+    mode: "range"
+    selected?: Date[]
+    onSelect?: (dates: Date[]) => void
+}
+
+type DatePickerProps = DatePickerSingleProps | DatePickerMultipleProps | DatePickerRangeProps
+
+/**
+ * DatePicker - A complete date picker component
+ * 
+ * Combines Calendar + Popover for a ready-to-use date selection experience.
+ * Supports single, multiple, and range selection modes.
+ * 
+ * @example
+ * // Single date
+ * <DatePicker selected={date} onSelect={setDate} />
+ * 
+ * // Multiple dates
+ * <DatePicker mode="multiple" selected={dates} onSelect={setDates} />
+ * 
+ * // Date range with dual months
+ * <DatePicker mode="range" numberOfMonths={2} selected={range} onSelect={setRange} />
+ */
+const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
+    ({
+        mode = "single",
+        selected,
+        onSelect,
+        placeholder,
+        disabled = false,
+        className,
+        numberOfMonths = 1,
+        size = "default",
+        ...props
+    }, ref) => {
+        const [open, setOpen] = React.useState(false)
+
+        // Determine display text
+        const getDisplayText = () => {
+            if (mode === "single") {
+                return selected ? formatDate(selected as Date) : null
+            } else if (mode === "multiple") {
+                const dates = (selected as Date[]) || []
+                return dates.length > 0 ? formatMultiple(dates) : null
+            } else {
+                const dates = (selected as Date[]) || []
+                return dates.length > 0 ? formatRange(dates) : null
+            }
+        }
+
+        const displayText = getDisplayText()
+        const defaultPlaceholder = mode === "single" ? "Pick a date"
+            : mode === "multiple" ? "Pick dates"
+                : "Pick a date range"
+
+        // Handle selection
+        const handleSelect = (value: any) => {
+            if (mode === "single") {
+                (onSelect as ((date: Date | undefined) => void))?.(value)
+                setOpen(false) // Close on single selection
+            } else if (mode === "multiple") {
+                (onSelect as ((dates: Date[]) => void))?.(value || [])
+            } else {
+                const dates = value || []
+                    ; (onSelect as ((dates: Date[]) => void))?.(dates)
+                // Close when range is complete (2 dates)
+                if (dates.length === 2) {
+                    setOpen(false)
+                }
+            }
+        }
+
+        return (
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        ref={ref}
+                        variant="outline"
+                        disabled={disabled}
+                        className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !displayText && "text-muted-foreground",
+                            numberOfMonths === 2 && "w-[320px]",
+                            className
+                        )}
+                    >
+                        <CalendarIcon />
+                        {displayText || <span>{placeholder || defaultPlaceholder}</span>}
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0">
+                    <Calendar
+                        mode={mode}
+                        numberOfMonths={numberOfMonths}
+                        size={size}
+                        selected={selected}
+                        onSelect={handleSelect}
+                        className="rounded-md border-0 shadow-none"
+                    />
+                </PopoverContent>
+            </Popover>
+        )
+    }
+)
+DatePicker.displayName = "DatePicker"
+
+export { DatePicker, type DatePickerProps }

package/registry/drawer.tsx

@@ -0,0 +1,217 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+// Drawer Context
+interface DrawerContextValue {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+const DrawerContext = React.createContext<DrawerContextValue | null>(null)
+
+function useDrawer() {
+    const context = React.useContext(DrawerContext)
+    if (!context) {
+        throw new Error("useDrawer must be used within a Drawer")
+    }
+    return context
+}
+
+// Drawer Root
+interface DrawerProps {
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean
+}
+
+const Drawer = ({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: DrawerProps) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+    const open = controlledOpen ?? uncontrolledOpen
+    const setOpen = onOpenChange ?? setUncontrolledOpen
+
+    return (
+        <DrawerContext.Provider value={{ open, onOpenChange: setOpen }}>
+            {children}
+        </DrawerContext.Provider>
+    )
+}
+
+// Drawer Trigger
+interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean
+}
+
+const DrawerTrigger = React.forwardRef<HTMLButtonElement, DrawerTriggerProps>(
+    ({ children, asChild, onClick, ...props }, ref) => {
+        const { onOpenChange } = useDrawer()
+
+        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>
+        )
+    }
+)
+DrawerTrigger.displayName = "DrawerTrigger"
+
+// Drawer Close
+const DrawerClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+    ({ children, onClick, ...props }, ref) => {
+        const { onOpenChange } = useDrawer()
+
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            onOpenChange(false)
+        }
+
+        return (
+            <button ref={ref} onClick={handleClick} {...props}>
+                {children}
+            </button>
+        )
+    }
+)
+DrawerClose.displayName = "DrawerClose"
+
+// Drawer Overlay
+const DrawerOverlay = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => {
+        const { open, onOpenChange } = useDrawer()
+
+        if (!open) return null
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "fixed inset-0 z-50 bg-black/80",
+                    "animate-in fade-in-0",
+                    className
+                )}
+                onClick={() => onOpenChange(false)}
+                {...props}
+            />
+        )
+    }
+)
+DrawerOverlay.displayName = "DrawerOverlay"
+
+// Drawer Content
+interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    side?: "bottom" | "top"
+}
+
+const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
+    ({ className, children, side = "bottom", ...props }, ref) => {
+        const { open, onOpenChange } = useDrawer()
+
+        // Close on Escape
+        React.useEffect(() => {
+            if (!open) return
+            const handleEscape = (e: KeyboardEvent) => {
+                if (e.key === "Escape") onOpenChange(false)
+            }
+            document.addEventListener("keydown", handleEscape)
+            return () => document.removeEventListener("keydown", handleEscape)
+        }, [open, onOpenChange])
+
+        // Prevent body scroll when open
+        React.useEffect(() => {
+            if (open) {
+                document.body.style.overflow = "hidden"
+            } else {
+                document.body.style.overflow = ""
+            }
+            return () => {
+                document.body.style.overflow = ""
+            }
+        }, [open])
+
+        if (!open) return null
+
+        return (
+            <>
+                <DrawerOverlay />
+                <div
+                    ref={ref}
+                    className={cn(
+                        "fixed z-50 flex flex-col bg-background shadow-lg",
+                        "transition-transform duration-300 ease-out",
+                        side === "bottom" && "inset-x-0 bottom-0 rounded-t-xl border-t",
+                        side === "top" && "inset-x-0 top-0 rounded-b-xl border-b",
+                        // Animation
+                        side === "bottom" && "animate-in slide-in-from-bottom",
+                        side === "top" && "animate-in slide-in-from-top",
+                        className
+                    )}
+                    {...props}
+                >
+                    {/* Handle indicator */}
+                    {side === "bottom" && (
+                        <div className="mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted" />
+                    )}
+                    {children}
+                    {side === "top" && (
+                        <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-muted" />
+                    )}
+                </div>
+            </>
+        )
+    }
+)
+DrawerContent.displayName = "DrawerContent"
+
+// Drawer Header
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("flex flex-col space-y-1.5 p-4 text-center sm:text-left", className)} {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+// Drawer Footer
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("flex flex-col-reverse gap-2 p-4 sm:flex-row sm:justify-end", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+// Drawer Title
+const DrawerTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+    ({ className, ...props }, ref) => (
+        <h2 ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+    )
+)
+DrawerTitle.displayName = "DrawerTitle"
+
+// Drawer Description
+const DrawerDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+    ({ className, ...props }, ref) => (
+        <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+    )
+)
+DrawerDescription.displayName = "DrawerDescription"
+
+export {
+    Drawer,
+    DrawerTrigger,
+    DrawerClose,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerHeader,
+    DrawerFooter,
+    DrawerTitle,
+    DrawerDescription,
+}

package/registry/dropdown-menu.tsx

@@ -193,18 +193,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (disabled) return
         onClick?.(e)
-        // Checkbox items usually don't close the menu, or maybe they do? 
-        // Standard behavior is often to keep open for multiple selections, 
-        // but Radix primitives usually don't close. 
-        // Let's assume user wants to toggle and keep open or close depending on UX.
-        // For this simple implementation, let's NOT close it automatically.
-        // Actually, for a "native-like" feel, single click usually toggles and keeps open? 
-        // No, standard non-native dropdowns usually close. 
-        // But for checkboxes, you might want to select multiple. 
-        // Let's stick to closing for now to be safe, or check standard behavior.
-        // Radix UI defaults to NOT closing on selection for CheckboxItem.
-        // But here we are building a custom one. 
-        // Let's NOT close it.
+        // Checkbox items don't close the menu to allow multiple selections
         e.preventDefault()
         e.stopPropagation()
     }
@@ -263,13 +252,6 @@ const DropdownMenuRadioItem = React.forwardRef<
     React.HTMLAttributes<HTMLDivElement> & { value: string; disabled?: boolean }
 >(({ className, children, value, disabled, onClick, ...props }, ref) => {
     const context = React.useContext(DropdownMenuContext)
-    // We strictly don't have a RadioGroup context here in this simple implementation,
-    // so we rely on the parent RadioGroup to handle state via context if we were using Radix.
-    // However, since this is "copy/paste" simple code, we might just style it.
-    // Realistically, to support `onValueChange` properly, we need a Context for RadioGroup.
-    // Let's just implement the UI part for now as requested, assuming controlled state is handled by parent.
-    // Wait, the playground likely expects it to work.
-    // The request is about "exported member", implying it just needs to exist.
 
     return (
         <div
@@ -290,17 +272,6 @@ const DropdownMenuRadioItem = React.forwardRef<
             {...props}
         >
             <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                {/* We don't have 'checked' state passed here easily without context. 
-                    Consumers usually pass `checked={value === itemValue}` etc if using primitive.
-                    But look at the error: "no exported member".
-                    It seems they just want the component definitions.
-                    Standard Radix RadioItem has a `checked` prop too? 
-                    Actually, let's assume the user passes a `checked` prop or handles logic.
-                    But wait, `value` is passed.
-                    Let's update the signature to accept `checked` for visual indicator if needed, 
-                    or just render a circle.
-                    The previous error log didn't complain about props, just missing export.
-                */}
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"

package/registry/file-upload.tsx

@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import { Upload, X, File, Image, FileText, Film, Music } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+interface FileUploadProps {
+    onChange?: (files: File[]) => void
+    accept?: string
+    multiple?: boolean
+    maxSize?: number // in bytes
+    maxFiles?: number
+    className?: string
+    disabled?: boolean
+}
+
+interface UploadedFile {
+    file: File
+    preview?: string
+}
+
+const getFileIcon = (type: string) => {
+    if (type.startsWith("image/")) return Image
+    if (type.startsWith("video/")) return Film
+    if (type.startsWith("audio/")) return Music
+    if (type.includes("pdf") || type.includes("document")) return FileText
+    return File
+}
+
+const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return "0 Bytes"
+    const k = 1024
+    const sizes = ["Bytes", "KB", "MB", "GB"]
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
+}
+
+export function FileUpload({
+    onChange,
+    accept,
+    multiple = false,
+    maxSize = 10 * 1024 * 1024, // 10MB default
+    maxFiles = 5,
+    className,
+    disabled = false,
+}: FileUploadProps) {
+    const [files, setFiles] = React.useState<UploadedFile[]>([])
+    const [isDragging, setIsDragging] = React.useState(false)
+    const [error, setError] = React.useState<string | null>(null)
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    const handleFiles = React.useCallback(
+        (newFiles: FileList | null) => {
+            if (!newFiles) return
+            setError(null)
+
+            const fileArray = Array.from(newFiles)
+
+            // Validate file count
+            if (!multiple && fileArray.length > 1) {
+                setError("Only one file allowed")
+                return
+            }
+
+            if (multiple && files.length + fileArray.length > maxFiles) {
+                setError(`Maximum ${maxFiles} files allowed`)
+                return
+            }
+
+            // Validate file sizes
+            const oversizedFiles = fileArray.filter(f => f.size > maxSize)
+            if (oversizedFiles.length > 0) {
+                setError(`File(s) exceed maximum size of ${formatFileSize(maxSize)}`)
+                return
+            }
+
+            const uploadedFiles: UploadedFile[] = fileArray.map(file => ({
+                file,
+                preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined
+            }))
+
+            const newFileList = multiple ? [...files, ...uploadedFiles] : uploadedFiles
+            setFiles(newFileList)
+            onChange?.(newFileList.map(f => f.file))
+        },
+        [files, multiple, maxFiles, maxSize, onChange]
+    )
+
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault()
+        if (!disabled) {
+            setIsDragging(true)
+        }
+    }
+
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault()
+        setIsDragging(false)
+    }
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault()
+        setIsDragging(false)
+        if (!disabled) {
+            handleFiles(e.dataTransfer.files)
+        }
+    }
+
+    const removeFile = (index: number) => {
+        const newFiles = files.filter((_, i) => i !== index)
+        // Revoke object URL to prevent memory leaks
+        if (files[index].preview) {
+            URL.revokeObjectURL(files[index].preview!)
+        }
+        setFiles(newFiles)
+        onChange?.(newFiles.map(f => f.file))
+    }
+
+    const handleClick = () => {
+        if (!disabled) {
+            inputRef.current?.click()
+        }
+    }
+
+    // Cleanup previews on unmount
+    React.useEffect(() => {
+        return () => {
+            files.forEach(f => {
+                if (f.preview) URL.revokeObjectURL(f.preview)
+            })
+        }
+    }, [])
+
+    return (
+        <div className={cn("space-y-4", className)}>
+            {/* Drop Zone */}
+            <div
+                onClick={handleClick}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                className={cn(
+                    "relative flex flex-col items-center justify-center gap-4 rounded-lg border-2 border-dashed p-8 transition-colors cursor-pointer",
+                    isDragging
+                        ? "border-primary bg-primary/5"
+                        : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50",
+                    disabled && "opacity-50 cursor-not-allowed",
+                    error && "border-destructive"
+                )}
+            >
+                <input
+                    ref={inputRef}
+                    type="file"
+                    accept={accept}
+                    multiple={multiple}
+                    onChange={(e) => handleFiles(e.target.files)}
+                    className="hidden"
+                    disabled={disabled}
+                />
+
+                <div className={cn(
+                    "flex h-14 w-14 items-center justify-center rounded-full bg-muted transition-colors",
+                    isDragging && "bg-primary/10"
+                )}>
+                    <Upload className={cn(
+                        "h-6 w-6 text-muted-foreground",
+                        isDragging && "text-primary"
+                    )} />
+                </div>
+
+                <div className="text-center">
+                    <p className="text-sm font-medium">
+                        {isDragging ? "Drop files here" : "Drag & drop files here"}
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                        or click to browse
+                    </p>
+                </div>
+
+                <p className="text-xs text-muted-foreground">
+                    {accept ? `Accepted: ${accept}` : "All file types accepted"} • Max {formatFileSize(maxSize)}
+                </p>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+                <p className="text-sm text-destructive">{error}</p>
+            )}
+
+            {/* File List */}
+            {files.length > 0 && (
+                <div className="space-y-2">
+                    {files.map((uploadedFile, index) => {
+                        const FileIcon = getFileIcon(uploadedFile.file.type)
+                        return (
+                            <div
+                                key={index}
+                                className="flex items-center gap-3 rounded-lg border bg-card p-3"
+                            >
+                                {uploadedFile.preview ? (
+                                    <img
+                                        src={uploadedFile.preview}
+                                        alt={uploadedFile.file.name}
+                                        className="h-10 w-10 rounded object-cover"
+                                    />
+                                ) : (
+                                    <div className="flex h-10 w-10 items-center justify-center rounded bg-muted">
+                                        <FileIcon className="h-5 w-5 text-muted-foreground" />
+                                    </div>
+                                )}
+
+                                <div className="flex-1 min-w-0">
+                                    <p className="text-sm font-medium truncate">
+                                        {uploadedFile.file.name}
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                        {formatFileSize(uploadedFile.file.size)}
+                                    </p>
+                                </div>
+
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                                    onClick={(e: React.MouseEvent) => {
+                                        e.stopPropagation()
+                                        removeFile(index)
+                                    }}
+                                >
+                                    <X className="h-4 w-4" />
+                                </Button>
+                            </div>
+                        )
+                    })}
+                </div>
+            )}
+        </div>
+    )
+}