@srcroot/ui 0.0.1 → 0.0.3

package/registry/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils"
 interface DropdownMenuContextValue {
     open: boolean
     onOpenChange: (open: boolean) => void
+    triggerRef: React.RefObject<HTMLButtonElement | null>
 }
 
 const DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(null)
@@ -16,7 +17,7 @@ interface DropdownMenuProps {
 }
 
 /**
- * DropdownMenu component with keyboard navigation
+ * DropdownMenu component with keyboard navigation and proper positioning
  * 
  * @example
  * <DropdownMenu>
@@ -33,12 +34,13 @@ interface DropdownMenuProps {
  */
 function DropdownMenu({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: DropdownMenuProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+    const triggerRef = React.useRef<HTMLButtonElement>(null)
 
     const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
     const setOpen = onOpenChange || setUncontrolledOpen
 
     return (
-        <DropdownMenuContext.Provider value={{ open, onOpenChange: setOpen }}>
+        <DropdownMenuContext.Provider value={{ open, onOpenChange: setOpen, triggerRef }}>
             <div className="relative inline-block text-left">
                 {children}
             </div>
@@ -60,18 +62,25 @@ const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTrig
             context.onOpenChange(!context.open)
         }
 
+        // Combine refs
+        const combinedRef = (node: HTMLButtonElement | null) => {
+            (context.triggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node
+            if (typeof ref === 'function') ref(node)
+            else if (ref) ref.current = node
+        }
+
         if (asChild && React.isValidElement(children)) {
             return React.cloneElement(children as React.ReactElement<any>, {
                 onClick: handleClick,
                 "aria-expanded": context.open,
                 "aria-haspopup": "menu",
-                ref,
+                ref: combinedRef,
             })
         }
 
         return (
             <button
-                ref={ref}
+                ref={combinedRef}
                 aria-expanded={context.open}
                 aria-haspopup="menu"
                 onClick={handleClick}
@@ -84,53 +93,94 @@ const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTrig
 )
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger"
 
-const DropdownMenuContent = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-    const context = React.useContext(DropdownMenuContext)
-    if (!context) throw new Error("DropdownMenuContent must be used within DropdownMenu")
+interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Alignment relative to trigger: 'start' | 'center' | 'end' */
+    align?: 'start' | 'center' | 'end'
+    /** Side of trigger to open: 'bottom' | 'top' */
+    side?: 'bottom' | 'top'
+    /** Offset from trigger in pixels */
+    sideOffset?: number
+}
 
-    React.useEffect(() => {
-        const handleClickOutside = () => {
-            if (context.open) {
-                context.onOpenChange(false)
+const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+    ({ className, align = 'start', side = 'bottom', sideOffset = 4, ...props }, ref) => {
+        const context = React.useContext(DropdownMenuContext)
+        if (!context) throw new Error("DropdownMenuContent must be used within DropdownMenu")
+        const contentRef = React.useRef<HTMLDivElement>(null)
+
+        React.useEffect(() => {
+            const handleClickOutside = (e: MouseEvent) => {
+                if (context.open) {
+                    const target = e.target as Node
+                    const content = contentRef.current
+                    const trigger = context.triggerRef.current
+
+                    // Don't close if clicking inside content or trigger
+                    if (content?.contains(target) || trigger?.contains(target)) {
+                        return
+                    }
+                    context.onOpenChange(false)
+                }
             }
-        }
 
-        const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === "Escape" && context.open) {
-                context.onOpenChange(false)
+            const handleEscape = (e: KeyboardEvent) => {
+                if (e.key === "Escape" && context.open) {
+                    context.onOpenChange(false)
+                }
             }
-        }
 
-        const timer = setTimeout(() => {
-            document.addEventListener("click", handleClickOutside)
-        }, 0)
-        document.addEventListener("keydown", handleEscape)
+            const timer = setTimeout(() => {
+                document.addEventListener("click", handleClickOutside)
+            }, 0)
+            document.addEventListener("keydown", handleEscape)
+
+            return () => {
+                clearTimeout(timer)
+                document.removeEventListener("click", handleClickOutside)
+                document.removeEventListener("keydown", handleEscape)
+            }
+        }, [context.open, context])
+
+        if (!context.open) return null
 
-        return () => {
-            clearTimeout(timer)
-            document.removeEventListener("click", handleClickOutside)
-            document.removeEventListener("keydown", handleEscape)
+        // Calculate alignment classes
+        const alignmentClasses = {
+            start: 'left-0',
+            center: 'left-1/2 -translate-x-1/2',
+            end: 'right-0',
         }
-    }, [context.open, context])
 
-    if (!context.open) return null
+        // Calculate side classes
+        const sideClasses = {
+            bottom: `top-full mt-${sideOffset}`,
+            top: `bottom-full mb-${sideOffset}`,
+        }
 
-    return (
-        <div
-            ref={ref}
-            role="menu"
-            className={cn(
-                "absolute right-0 z-50 mt-2 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-                className
-            )}
-            onClick={(e) => e.stopPropagation()}
-            {...props}
-        />
-    )
-})
+        return (
+            <div
+                ref={(node) => {
+                    (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+                    if (typeof ref === 'function') ref(node)
+                    else if (ref) ref.current = node
+                }}
+                role="menu"
+                aria-orientation="vertical"
+                className={cn(
+                    "absolute 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",
+                    alignmentClasses[align],
+                    side === 'bottom' ? 'top-full' : 'bottom-full',
+                    className
+                )}
+                style={{
+                    marginTop: side === 'bottom' ? sideOffset : undefined,
+                    marginBottom: side === 'top' ? sideOffset : undefined,
+                }}
+                {...props}
+            />
+        )
+    }
+)
 DropdownMenuContent.displayName = "DropdownMenuContent"
 
 const DropdownMenuItem = React.forwardRef<
@@ -188,23 +238,10 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement> & { checked?: boolean; disabled?: boolean }
 >(({ className, children, checked, disabled, onClick, ...props }, ref) => {
-    const context = React.useContext(DropdownMenuContext)
-
     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 +300,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 +320,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>
+    )
+}

package/registry/hover-card.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+// HoverCard Context
+interface HoverCardContextValue {
+    open: boolean
+    triggerRef: React.RefObject<HTMLDivElement | null>
+}
+
+const HoverCardContext = React.createContext<HoverCardContextValue | null>(null)
+
+function useHoverCard() {
+    const context = React.useContext(HoverCardContext)
+    if (!context) {
+        throw new Error("useHoverCard must be used within a HoverCard")
+    }
+    return context
+}
+
+// HoverCard Root
+interface HoverCardProps {
+    children: React.ReactNode
+    openDelay?: number
+    closeDelay?: number
+}
+
+const HoverCard = ({ children, openDelay = 200, closeDelay = 300 }: HoverCardProps) => {
+    const [open, setOpen] = React.useState(false)
+    const triggerRef = React.useRef<HTMLDivElement>(null)
+    const openTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+    const closeTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+    const handleMouseEnter = React.useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current)
+            closeTimeoutRef.current = null
+        }
+        openTimeoutRef.current = setTimeout(() => {
+            setOpen(true)
+        }, openDelay)
+    }, [openDelay])
+
+    const handleMouseLeave = React.useCallback(() => {
+        if (openTimeoutRef.current) {
+            clearTimeout(openTimeoutRef.current)
+            openTimeoutRef.current = null
+        }
+        closeTimeoutRef.current = setTimeout(() => {
+            setOpen(false)
+        }, closeDelay)
+    }, [closeDelay])
+
+    React.useEffect(() => {
+        return () => {
+            if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)
+            if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
+        }
+    }, [])
+
+    return (
+        <HoverCardContext.Provider value={{ open, triggerRef }}>
+            <div
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                className="inline-block"
+            >
+                {children}
+            </div>
+        </HoverCardContext.Provider>
+    )
+}
+
+// HoverCard Trigger
+interface HoverCardTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean
+}
+
+const HoverCardTrigger = React.forwardRef<HTMLDivElement, HoverCardTriggerProps>(
+    ({ children, asChild, className, ...props }, ref) => {
+        const { triggerRef } = useHoverCard()
+
+        return (
+            <div
+                ref={triggerRef}
+                className={cn("inline-block cursor-pointer", className)}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+HoverCardTrigger.displayName = "HoverCardTrigger"
+
+// HoverCard Content
+interface HoverCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "center" | "end"
+    side?: "top" | "bottom"
+    sideOffset?: number
+}
+
+const HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(
+    ({ children, className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => {
+        const { open, triggerRef } = useHoverCard()
+        const [position, setPosition] = React.useState({ top: 0, left: 0 })
+        const contentRef = React.useRef<HTMLDivElement>(null)
+
+        React.useEffect(() => {
+            if (!open || !triggerRef.current || !contentRef.current) return
+
+            const triggerRect = triggerRef.current.getBoundingClientRect()
+            const contentRect = contentRef.current.getBoundingClientRect()
+
+            let top = 0
+            let left = 0
+
+            // Calculate vertical position
+            if (side === "bottom") {
+                top = triggerRect.bottom + sideOffset
+            } else {
+                top = triggerRect.top - contentRect.height - sideOffset
+            }
+
+            // Calculate horizontal position
+            if (align === "start") {
+                left = triggerRect.left
+            } else if (align === "end") {
+                left = triggerRect.right - contentRect.width
+            } else {
+                left = triggerRect.left + (triggerRect.width - contentRect.width) / 2
+            }
+
+            // Clamp to viewport
+            left = Math.max(8, Math.min(left, window.innerWidth - contentRect.width - 8))
+            top = Math.max(8, Math.min(top, window.innerHeight - contentRect.height - 8))
+
+            setPosition({ top, left })
+        }, [open, triggerRef, align, side, sideOffset])
+
+        if (!open) return null
+
+        return (
+            <div
+                ref={contentRef}
+                className={cn(
+                    "fixed z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+                    "animate-in fade-in-0 zoom-in-95",
+                    className
+                )}
+                style={{
+                    top: position.top,
+                    left: position.left,
+                }}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+HoverCardContent.displayName = "HoverCardContent"
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/registry/image.tsx

@@ -69,8 +69,8 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
         }, [src])
 
         const containerStyle: React.CSSProperties = aspectRatio
-            ? { paddingBottom: `${100 / aspectRatio}%`, ...style }
-            : style
+            ? { paddingBottom: `${100 / aspectRatio}%`, ...(style || {}) }
+            : (style || {})
 
         // Render fallback
         if (status === "error" && fallback) {