@srcroot/ui 0.0.1 → 0.0.3

package/registry/card.tsx

@@ -15,33 +15,17 @@ import { cn } from "@/lib/utils"
  * </Card>
  */
 
-interface CardBaseProps {
-    className?: string
-    children?: React.ReactNode
-}
-
-const Card = React.forwardRef(
-    <T extends React.ElementType = "div">(
-        {
-            as,
-            className,
-            ...props
-        }: CardBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof CardBaseProps | "as">,
-        ref: React.ForwardedRef<React.ElementRef<T>>
-    ) => {
-        const Comp = as || "div"
-
-        return (
-            <Comp
-                ref={ref as any}
-                className={cn(
-                    "rounded-xl border bg-card text-card-foreground shadow",
-                    className
-                )}
-                {...props}
-            />
-        )
-    }
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "rounded-xl border bg-card text-card-foreground shadow",
+                className
+            )}
+            {...props}
+        />
+    )
 )
 Card.displayName = "Card"
 
@@ -57,26 +41,16 @@ const CardHeader = React.forwardRef<
 ))
 CardHeader.displayName = "CardHeader"
 
-const CardTitle = React.forwardRef(
-    <T extends React.ElementType = "h3">(
-        {
-            as,
-            className,
-            ...props
-        }: CardBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof CardBaseProps | "as">,
-        ref: React.ForwardedRef<React.ElementRef<T>>
-    ) => {
-        const Comp = as || "h3"
-
-        return (
-            <Comp
-                ref={ref as any}
-                className={cn("font-semibold leading-none tracking-tight", className)}
-                {...props}
-            />
-        )
-    }
-)
+const CardTitle = React.forwardRef<
+    HTMLHeadingElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn("font-semibold leading-none tracking-tight", className)}
+        {...props}
+    />
+))
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<

package/registry/combobox.tsx

@@ -0,0 +1,171 @@
+"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">
+                                    {(() => {
+                                        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,300 @@
+"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()
+
+        // Count how many items would be visible with the current search
+        const visibleCount = search
+            ? items.filter(item => item.toLowerCase().includes(search.toLowerCase())).length
+            : items.length
+
+        // Only show empty message when user has typed something but no results match
+        if (!search || visibleCount > 0) {
+            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/container.tsx

@@ -18,38 +18,22 @@ const containerVariants = cva("mx-auto w-full px-4", {
     },
 })
 
-type ContainerVariants = VariantProps<typeof containerVariants>
-
-interface ContainerBaseProps extends ContainerVariants {
-    className?: string
-    children?: React.ReactNode
-}
+interface ContainerProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof containerVariants> { }
 
 /**
- * Polymorphic Container for max-width layouts
+ * Container for max-width layouts
  * 
  * @example
  * <Container size="lg">Content</Container>
- * 
- * @example
- * <Container as="section" size="md">Section content</Container>
  */
-const Container = React.forwardRef(
-    <T extends React.ElementType = "div">(
-        {
-            as,
-            className,
-            size,
-            ...props
-        }: ContainerBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof ContainerBaseProps | "as">,
-        ref: React.ForwardedRef<React.ElementRef<T>>
-    ) => {
-        const Comp = as || "div"
-
+const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+    ({ className, size, ...props }, ref) => {
         return (
-            <Comp
-                ref={ref as any}
-                className={cn(containerVariants({ size, className }))}
+            <div
+                ref={ref}
+                className={cn(containerVariants({ size }), className)}
                 {...props}
             />
         )