@srcroot/ui 0.0.1 → 0.0.3

package/registry/context-menu.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+// Context Menu Context
+interface ContextMenuContextValue {
+    open: boolean
+    position: { x: number; y: number }
+    onOpenChange: (open: boolean) => void
+}
+
+const ContextMenuContext = React.createContext<ContextMenuContextValue | null>(null)
+
+function useContextMenu() {
+    const context = React.useContext(ContextMenuContext)
+    if (!context) {
+        throw new Error("useContextMenu must be used within a ContextMenu")
+    }
+    return context
+}
+
+// ContextMenu Root
+interface ContextMenuProps {
+    children: React.ReactNode
+}
+
+const ContextMenu = ({ children }: ContextMenuProps) => {
+    const [open, setOpen] = React.useState(false)
+    const [position, setPosition] = React.useState({ x: 0, y: 0 })
+
+    const handleContextMenu = React.useCallback((e: React.MouseEvent) => {
+        e.preventDefault()
+        setPosition({ x: e.clientX, y: e.clientY })
+        setOpen(true)
+    }, [])
+
+    // Close on outside click
+    React.useEffect(() => {
+        if (!open) return
+
+        const handleClick = () => setOpen(false)
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === "Escape") setOpen(false)
+        }
+
+        document.addEventListener("click", handleClick)
+        document.addEventListener("keydown", handleEscape)
+        return () => {
+            document.removeEventListener("click", handleClick)
+            document.removeEventListener("keydown", handleEscape)
+        }
+    }, [open])
+
+    return (
+        <ContextMenuContext.Provider value={{ open, position, onOpenChange: setOpen }}>
+            <div onContextMenu={handleContextMenu}>
+                {children}
+            </div>
+        </ContextMenuContext.Provider>
+    )
+}
+
+// ContextMenu Trigger (the area that can be right-clicked)
+interface ContextMenuTriggerProps {
+    children: React.ReactNode
+    className?: string
+}
+
+const ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(
+    ({ children, className, ...props }, ref) => {
+        return (
+            <div ref={ref} className={className} {...props}>
+                {children}
+            </div>
+        )
+    }
+)
+ContextMenuTrigger.displayName = "ContextMenuTrigger"
+
+// ContextMenu Content
+interface ContextMenuContentProps {
+    children: React.ReactNode
+    className?: string
+}
+
+const ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(
+    ({ children, className, ...props }, ref) => {
+        const { open, position } = useContextMenu()
+        const contentRef = React.useRef<HTMLDivElement>(null)
+        const [adjustedPosition, setAdjustedPosition] = React.useState(position)
+
+        // Adjust position to keep menu in viewport
+        React.useEffect(() => {
+            if (!open || !contentRef.current) return
+
+            const rect = contentRef.current.getBoundingClientRect()
+            const viewportWidth = window.innerWidth
+            const viewportHeight = window.innerHeight
+
+            let x = position.x
+            let y = position.y
+
+            // Adjust if overflowing right
+            if (x + rect.width > viewportWidth) {
+                x = viewportWidth - rect.width - 8
+            }
+            // Adjust if overflowing bottom
+            if (y + rect.height > viewportHeight) {
+                y = viewportHeight - rect.height - 8
+            }
+
+            setAdjustedPosition({ x: Math.max(8, x), y: Math.max(8, y) })
+        }, [open, position])
+
+        if (!open) return null
+
+        return (
+            <div
+                ref={contentRef}
+                className={cn(
+                    "fixed z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                    "animate-in fade-in-0 zoom-in-95",
+                    className
+                )}
+                style={{
+                    left: adjustedPosition.x,
+                    top: adjustedPosition.y,
+                }}
+                onClick={(e) => e.stopPropagation()}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+ContextMenuContent.displayName = "ContextMenuContent"
+
+// ContextMenu Item
+interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    inset?: boolean
+}
+
+const ContextMenuItem = React.forwardRef<HTMLButtonElement, ContextMenuItemProps>(
+    ({ className, inset, children, ...props }, ref) => {
+        const { onOpenChange } = useContextMenu()
+
+        return (
+            <button
+                ref={ref}
+                className={cn(
+                    "relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+                    "focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+                    "disabled:pointer-events-none disabled:opacity-50",
+                    inset && "pl-8",
+                    className
+                )}
+                onClick={() => onOpenChange(false)}
+                {...props}
+            >
+                {children}
+            </button>
+        )
+    }
+)
+ContextMenuItem.displayName = "ContextMenuItem"
+
+// ContextMenu Separator
+const ContextMenuSeparator = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        {...props}
+    />
+))
+ContextMenuSeparator.displayName = "ContextMenuSeparator"
+
+// ContextMenu Label
+const ContextMenuLabel = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "px-2 py-1.5 text-sm font-semibold text-foreground",
+            inset && "pl-8",
+            className
+        )}
+        {...props}
+    />
+))
+ContextMenuLabel.displayName = "ContextMenuLabel"
+
+// ContextMenu Shortcut
+const ContextMenuShortcut = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+            {...props}
+        />
+    )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+    ContextMenu,
+    ContextMenuTrigger,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuLabel,
+    ContextMenuShortcut,
+}

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,241 @@
+"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 (internal)
+interface DrawerOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    isAnimating: boolean
+}
+
+const DrawerOverlay = React.forwardRef<HTMLDivElement, DrawerOverlayProps>(
+    ({ className, isAnimating, ...props }, ref) => {
+        const { onOpenChange } = useDrawer()
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "fixed inset-0 z-50 bg-black/80 transition-opacity duration-300",
+                    isAnimating ? "opacity-100" : "opacity-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()
+        const [isVisible, setIsVisible] = React.useState(false)
+        const [isAnimating, setIsAnimating] = React.useState(false)
+
+        React.useEffect(() => {
+            if (open) {
+                // First make visible (off-screen)
+                setIsVisible(true)
+                // Use a small timeout to ensure the browser has painted the initial state
+                const timer = setTimeout(() => {
+                    setIsAnimating(true)
+                }, 10)
+                return () => clearTimeout(timer)
+            } else {
+                // Start close animation
+                setIsAnimating(false)
+                // Wait for animation to complete before hiding
+                const timer = setTimeout(() => {
+                    setIsVisible(false)
+                }, 300)
+                return () => clearTimeout(timer)
+            }
+        }, [open])
+
+        // 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 (!isVisible) return null
+
+        return (
+            <>
+                <DrawerOverlay isAnimating={isAnimating} />
+                <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 states
+                        side === "bottom" && (isAnimating ? "translate-y-0" : "translate-y-full"),
+                        side === "top" && (isAnimating ? "translate-y-0" : "-translate-y-full"),
+                        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,
+}