@srcroot/ui 0.0.1 → 0.0.2

package/registry/combobox.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/components/ui/command"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { Badge } from "@/components/ui/badge"
+
+export type ComboboxOption = {
+    value: string
+    label: string
+    icon?: React.ComponentType<{ className?: string }>
+}
+
+interface ComboboxProps {
+    options: ComboboxOption[]
+    value?: string | string[]
+    onValueChange?: (value: string | string[]) => void
+    placeholder?: string
+    searchPlaceholder?: string
+    emptyMessage?: string
+    multiple?: boolean
+    className?: string
+    disabled?: boolean
+}
+
+export function Combobox({
+    options,
+    value,
+    onValueChange,
+    placeholder = "Select option...",
+    searchPlaceholder = "Search...",
+    emptyMessage = "No option found.",
+    multiple = false,
+    className,
+    disabled = false,
+}: ComboboxProps) {
+    const [open, setOpen] = React.useState(false)
+
+    // Helper to handle selection
+    const handleSelect = React.useCallback(
+        (currentValue: string) => {
+            if (multiple) {
+                const currentValues = Array.isArray(value) ? value : []
+                const newValues = currentValues.includes(currentValue)
+                    ? currentValues.filter((v) => v !== currentValue)
+                    : [...currentValues, currentValue]
+                onValueChange?.(newValues)
+            } else {
+                onValueChange?.(currentValue === value ? "" : currentValue)
+                setOpen(false)
+            }
+        },
+        [multiple, value, onValueChange]
+    )
+
+    // Derived state for display
+    const selectedOptions = React.useMemo(() => {
+        if (multiple) {
+            const currentValues = Array.isArray(value) ? value : []
+            return currentValues
+                .map((v) => options.find((opt) => opt.value === v))
+                .filter(Boolean) as ComboboxOption[]
+        } else {
+            const option = options.find((opt) => opt.value === value)
+            return option ? [option] : []
+        }
+    }, [multiple, value, options])
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    className={cn("w-full justify-between h-auto min-h-10", className)}
+                    disabled={disabled}
+                >
+                    <div className="flex gap-1 flex-wrap items-center text-left">
+                        {selectedOptions.length > 0 ? (
+                            multiple ? (
+                                selectedOptions.length > 3 ? (
+                                    <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                                        {selectedOptions.length} selected
+                                    </Badge>
+                                ) : (
+                                    selectedOptions.map((opt) => {
+                                        const Icon = opt.icon
+                                        return (
+                                            <Badge
+                                                variant="secondary"
+                                                key={opt.value}
+                                                className="rounded-sm px-1 font-normal items-center gap-1"
+                                                onClick={(e: React.MouseEvent) => {
+                                                    e.stopPropagation()
+                                                    handleSelect(opt.value)
+                                                }}
+                                            >
+                                                {Icon && <Icon className="h-3 w-3" />}
+                                                {opt.label}
+                                                <X className="h-3 w-3 text-muted-foreground hover:text-foreground ml-0.5" />
+                                            </Badge>
+                                        )
+                                    })
+                                )
+                            ) : (
+                                <div className="flex items-center gap-2">
+                                    {selectedOptions[0].icon && (
+                                        <selectedOptions[0].icon className="h-4 w-4 text-muted-foreground" />
+                                     ) /* this effectively forces me to use a variable too */}
+                                    {(() => {
+                                        const Icon = selectedOptions[0].icon
+                                        return Icon ? <Icon className="h-4 w-4 text-muted-foreground" /> : null
+                                    })()}
+                                    <span>{selectedOptions[0].label}</span>
+                                </div>
+                            )
+                        ) : (
+                            <span className="text-muted-foreground">{placeholder}</span>
+                        )}
+                    </div>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full min-w-[200px] p-0">
+                <Command>
+                    <CommandInput placeholder={searchPlaceholder} />
+                    <CommandList>
+                        <CommandEmpty>{emptyMessage}</CommandEmpty>
+                        <CommandGroup>
+                            {options.map((option) => (
+                                <CommandItem
+                                    key={option.value}
+                                    value={option.label}
+                                    onSelect={() => handleSelect(option.value)}
+                                >
+                                    <Check
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            multiple
+                                                ? (Array.isArray(value) && value.includes(option.value)
+                                                    ? "opacity-100"
+                                                    : "opacity-0")
+                                                : value === option.value
+                                                    ? "opacity-100"
+                                                    : "opacity-0"
+                                        )}
+                                    />
+                                    {option.icon && <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
+                                    {option.label}
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    )
+}

package/registry/command.tsx

@@ -0,0 +1,298 @@
+"use client"
+
+import * as React from "react"
+import { Search } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+interface CommandContextValue {
+    search: string
+    setSearch: (search: string) => void
+    selectedIndex: number
+    setSelectedIndex: (index: number) => void
+    items: string[]
+    registerItem: (value: string) => void
+    unregisterItem: (value: string) => void
+}
+
+const CommandContext = React.createContext<CommandContextValue | null>(null)
+
+function useCommandContext() {
+    const context = React.useContext(CommandContext)
+    if (!context) {
+        throw new Error("Command components must be used within Command")
+    }
+    return context
+}
+
+interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode
+}
+
+const Command = React.forwardRef<HTMLDivElement, CommandProps>(
+    ({ className, children, ...props }, ref) => {
+        const [search, setSearch] = React.useState("")
+        const [selectedIndex, setSelectedIndex] = React.useState(0)
+        const [items, setItems] = React.useState<string[]>([])
+
+        const registerItem = React.useCallback((value: string) => {
+            setItems((prev) => [...prev, value])
+        }, [])
+
+        const unregisterItem = React.useCallback((value: string) => {
+            setItems((prev) => prev.filter((item) => item !== value))
+        }, [])
+
+        // Handle keyboard navigation
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            switch (e.key) {
+                case "ArrowDown":
+                    e.preventDefault()
+                    setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1))
+                    break
+                case "ArrowUp":
+                    e.preventDefault()
+                    setSelectedIndex((prev) => Math.max(prev - 1, 0))
+                    break
+                case "Enter":
+                    e.preventDefault()
+                    const selectedItem = document.querySelector('[data-selected="true"]') as HTMLElement
+                    selectedItem?.click()
+                    break
+            }
+        }
+
+        return (
+            <CommandContext.Provider
+                value={{
+                    search,
+                    setSearch,
+                    selectedIndex,
+                    setSelectedIndex,
+                    items,
+                    registerItem,
+                    unregisterItem,
+                }}
+            >
+                <div
+                    ref={ref}
+                    className={cn(
+                        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+                        className
+                    )}
+                    onKeyDown={handleKeyDown}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </CommandContext.Provider>
+        )
+    }
+)
+Command.displayName = "Command"
+
+interface CommandDialogProps {
+    children: React.ReactNode
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+    return (
+        <Dialog {...props}>
+            <DialogContent className="overflow-hidden p-0 shadow-lg">
+                <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground">
+                    {children}
+                </Command>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
+    ({ className, ...props }, ref) => {
+        const { search, setSearch, setSelectedIndex } = useCommandContext()
+
+        return (
+            <div className="flex items-center border-b px-3">
+                <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                <input
+                    ref={ref}
+                    value={search}
+                    onChange={(e) => {
+                        setSearch(e.target.value)
+                        setSelectedIndex(0)
+                    }}
+                    className={cn(
+                        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                        className
+                    )}
+                    {...props}
+                />
+            </div>
+        )
+    }
+)
+CommandInput.displayName = "CommandInput"
+
+interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> { }
+
+const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+            {...props}
+        />
+    )
+)
+CommandList.displayName = "CommandList"
+
+interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> { }
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>(
+    ({ className, children, ...props }, ref) => {
+        const { search, items } = useCommandContext()
+
+        // Check if any items are visible
+        const hasVisibleItems = items.length > 0
+
+        if (hasVisibleItems && search) {
+            // This will be handled by filtering in CommandItem
+            return null
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn("py-6 text-center text-sm", className)}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+CommandEmpty.displayName = "CommandEmpty"
+
+interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading?: string
+}
+
+const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
+    ({ className, heading, children, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "overflow-hidden p-1 text-foreground",
+                className
+            )}
+            {...props}
+        >
+            {heading && (
+                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                    {heading}
+                </div>
+            )}
+            {children}
+        </div>
+    )
+)
+CommandGroup.displayName = "CommandGroup"
+
+interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> { }
+
+const CommandSeparator = React.forwardRef<HTMLDivElement, CommandSeparatorProps>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn("-mx-1 h-px bg-border", className)}
+            {...props}
+        />
+    )
+)
+CommandSeparator.displayName = "CommandSeparator"
+
+interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string
+    onSelect?: () => void
+    disabled?: boolean
+}
+
+const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
+    ({ className, value, onSelect, disabled, children, ...props }, ref) => {
+        const { search, selectedIndex, setSelectedIndex, registerItem, unregisterItem, items } = useCommandContext()
+        const itemValue = value || (typeof children === "string" ? children : "")
+
+        // Register/unregister on mount
+        React.useEffect(() => {
+            registerItem(itemValue)
+            return () => unregisterItem(itemValue)
+        }, [itemValue, registerItem, unregisterItem])
+
+        // Filter based on search
+        const isVisible = !search || itemValue.toLowerCase().includes(search.toLowerCase())
+
+        if (!isVisible) return null
+
+        const itemIndex = items.indexOf(itemValue)
+        const isSelected = itemIndex === selectedIndex
+
+        return (
+            <div
+                ref={ref}
+                role="option"
+                aria-selected={isSelected}
+                data-selected={isSelected}
+                data-disabled={disabled}
+                className={cn(
+                    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+                    isSelected && "bg-accent text-accent-foreground",
+                    disabled && "pointer-events-none opacity-50",
+                    !disabled && "cursor-pointer",
+                    className
+                )}
+                onClick={() => {
+                    if (!disabled) {
+                        onSelect?.()
+                    }
+                }}
+                onMouseEnter={() => setSelectedIndex(itemIndex)}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+CommandItem.displayName = "CommandItem"
+
+const CommandShortcut = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn(
+                "ml-auto text-xs tracking-widest text-muted-foreground",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+    Command,
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+}

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,
+}