@srcroot/ui 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A shadcn-style CLI UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {

package/registry/badge.tsx

@@ -22,15 +22,12 @@ const badgeVariants = cva(
     }
 )
 
-type BadgeVariants = VariantProps<typeof badgeVariants>
-
-interface BadgeBaseProps extends BadgeVariants {
-    className?: string
-    children?: React.ReactNode
-}
+interface BadgeProps
+    extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> { }
 
 /**
- * Polymorphic Badge component for status indicators
+ * Badge component for status indicators
  * 
  * @example
  * // Default badge
@@ -38,26 +35,13 @@ interface BadgeBaseProps extends BadgeVariants {
  * 
  * // Destructive variant
  * <Badge variant="destructive">Error</Badge>
- * 
- * // As a link
- * <Badge as="a" href="/status">View Status</Badge>
  */
-const Badge = React.forwardRef(
-    <T extends React.ElementType = "span">(
-        {
-            as,
-            className,
-            variant,
-            ...props
-        }: BadgeBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof BadgeBaseProps | "as">,
-        ref: React.ForwardedRef<React.ElementRef<T>>
-    ) => {
-        const Comp = as || "span"
-
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+    ({ className, variant, ...props }, ref) => {
         return (
-            <Comp
-                ref={ref as any}
-                className={cn(badgeVariants({ variant, className }))}
+            <span
+                ref={ref}
+                className={cn(badgeVariants({ variant }), className)}
                 {...props}
             />
         )

package/registry/breadcrumb.tsx

@@ -28,7 +28,7 @@ Breadcrumb.displayName = "Breadcrumb"
 
 const BreadcrumbList = React.forwardRef<
     HTMLOListElement,
-    React.OListHTMLAttributes<HTMLOListElement>
+    React.OlHTMLAttributes<HTMLOListElement>
 >(({ className, ...props }, ref) => (
     <ol
         ref={ref}

package/registry/button-group.tsx

@@ -33,15 +33,12 @@ const buttonGroupVariants = cva("inline-flex", {
     },
 })
 
-type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>
-
-interface ButtonGroupBaseProps extends ButtonGroupVariants {
-    className?: string
-    children?: React.ReactNode
-}
+interface ButtonGroupProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof buttonGroupVariants> { }
 
 /**
- * Polymorphic ButtonGroup to group buttons together
+ * ButtonGroup to group buttons together
  * 
  * @example
  * <ButtonGroup>
@@ -49,31 +46,14 @@ interface ButtonGroupBaseProps extends ButtonGroupVariants {
  *   <Button>Center</Button>
  *   <Button>Right</Button>
  * </ButtonGroup>
- * 
- * @example
- * <ButtonGroup attached={false}>
- *   <Button>Spaced</Button>
- *   <Button>Buttons</Button>
- * </ButtonGroup>
  */
-const ButtonGroup = React.forwardRef(
-    <T extends React.ElementType = "div">(
-        {
-            as,
-            className,
-            orientation,
-            attached,
-            ...props
-        }: ButtonGroupBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonGroupBaseProps | "as">,
-        ref: React.ForwardedRef<React.ElementRef<T>>
-    ) => {
-        const Comp = as || "div"
-
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+    ({ className, orientation, attached, ...props }, ref) => {
         return (
-            <Comp
-                ref={ref as any}
+            <div
+                ref={ref}
                 role="group"
-                className={cn(buttonGroupVariants({ orientation, attached, className }))}
+                className={cn(buttonGroupVariants({ orientation, attached }), className)}
                 {...props}
             />
         )

package/registry/button.tsx

@@ -32,68 +32,42 @@ const buttonVariants = cva(
     }
 )
 
-type ButtonVariants = VariantProps<typeof buttonVariants>
-
-interface ButtonBaseProps extends ButtonVariants {
-    className?: string
-    children?: React.ReactNode
+interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+    asChild?: boolean
 }
 
 /**
- * Polymorphic Button component
+ * Button component
  * 
  * @example
- * // As a button (default)
+ * // Default button
  * <Button variant="outline">Click me</Button>
  * 
- * // As a link
- * <Button as="a" href="/home" variant="link">Go Home</Button>
- * 
  * // With loading state
  * <Button disabled>
  *   <LoadingSpinner /> Processing...
  * </Button>
  */
-const Button = React.forwardRef(
-    <T extends React.ElementType = "button">(
-        {
-            as,
-            className,
-            variant,
-            size,
-            ...props
-        }: ButtonBaseProps & { as?: T } & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonBaseProps | "as">,
-        ref: React.ForwardedRef<React.ElementRef<T>>
-    ) => {
-        const Comp = as || "button"
-
-        // Ensure proper keyboard handling for non-button elements
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            if (Comp !== "button" && (e.key === "Enter" || e.key === " ")) {
-                e.preventDefault()
-                    ; (e.currentTarget as HTMLElement).click()
-            }
-            // Call original onKeyDown if provided
-            const originalOnKeyDown = (props as any).onKeyDown
-            if (originalOnKeyDown) {
-                originalOnKeyDown(e)
-            }
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+        if (asChild && React.isValidElement(children)) {
+            return React.cloneElement(children as React.ReactElement<any>, {
+                ref,
+                className: cn(buttonVariants({ variant, size }), className),
+                ...props,
+            })
         }
 
-        // Add role="button" for non-button elements
-        const accessibilityProps = Comp !== "button" ? {
-            role: "button",
-            tabIndex: 0,
-            onKeyDown: handleKeyDown,
-        } : {}
-
         return (
-            <Comp
-                ref={ref as any}
-                className={cn(buttonVariants({ variant, size, className }))}
-                {...accessibilityProps}
+            <button
+                ref={ref}
+                className={cn(buttonVariants({ variant, size }), className)}
                 {...props}
-            />
+            >
+                {children}
+            </button>
         )
     }
 )

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

@@ -120,9 +120,6 @@ export function Combobox({
                                 )
                             ) : (
                                 <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

package/registry/command.tsx

@@ -156,11 +156,13 @@ 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
+        // 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
 
-        if (hasVisibleItems && search) {
-            // This will be handled by filtering in CommandItem
+        // Only show empty message when user has typed something but no results match
+        if (!search || visibleCount > 0) {
             return null
         }
 

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}
             />
         )

package/registry/drawer.tsx

@@ -88,19 +88,21 @@ const DrawerClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttribut
 )
 DrawerClose.displayName = "DrawerClose"
 
-// Drawer Overlay
-const DrawerOverlay = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => {
-        const { open, onOpenChange } = useDrawer()
+// Drawer Overlay (internal)
+interface DrawerOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    isAnimating: boolean
+}
 
-        if (!open) return null
+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",
-                    "animate-in fade-in-0",
+                    "fixed inset-0 z-50 bg-black/80 transition-opacity duration-300",
+                    isAnimating ? "opacity-100" : "opacity-0",
                     className
                 )}
                 onClick={() => onOpenChange(false)}
@@ -119,6 +121,28 @@ interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
 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(() => {
@@ -142,11 +166,11 @@ const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
             }
         }, [open])
 
-        if (!open) return null
+        if (!isVisible) return null
 
         return (
             <>
-                <DrawerOverlay />
+                <DrawerOverlay isAnimating={isAnimating} />
                 <div
                     ref={ref}
                     className={cn(
@@ -154,9 +178,9 @@ const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
                         "transition-transform duration-300 ease-out",
                         side === "bottom" && "inset-x-0 bottom-0 rounded-t-xl border-t",
                         side === "top" && "inset-x-0 top-0 rounded-b-xl border-b",
-                        // Animation
-                        side === "bottom" && "animate-in slide-in-from-bottom",
-                        side === "top" && "animate-in slide-in-from-top",
+                        // Animation states
+                        side === "bottom" && (isAnimating ? "translate-y-0" : "translate-y-full"),
+                        side === "top" && (isAnimating ? "translate-y-0" : "-translate-y-full"),
                         className
                     )}
                     {...props}

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,8 +238,6 @@ 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)