@srcroot/ui 0.0.2 → 0.0.4

package/package.json

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

package/registry/accordion.tsx

@@ -5,6 +5,7 @@ interface AccordionContextValue {
     value: string[]
     onValueChange: (value: string[]) => void
     type: "single" | "multiple"
+    collapsible: boolean
 }
 
 const AccordionContext = React.createContext<AccordionContextValue | null>(null)
@@ -37,14 +38,14 @@ interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  * </Accordion>
  */
 const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-    ({ className, type = "single", value: controlledValue, onValueChange, defaultValue = [], children, ...props }, ref) => {
+    ({ className, type = "single", value: controlledValue, onValueChange, defaultValue = [], collapsible = false, children, ...props }, ref) => {
         const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
 
         const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
         const setValue = onValueChange || setUncontrolledValue
 
         return (
-            <AccordionContext.Provider value={{ value, onValueChange: setValue, type }}>
+            <AccordionContext.Provider value={{ value, onValueChange: setValue, type, collapsible }}>
                 <div ref={ref} className={cn("", className)} {...props}>
                     {children}
                 </div>
@@ -54,6 +55,7 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
 )
 Accordion.displayName = "Accordion"
 
+
 interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string
 }
@@ -67,6 +69,8 @@ const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
 
         const toggle = () => {
             if (context.type === "single") {
+                // In single mode with collapsible=false, don't allow closing
+                if (isOpen && !context.collapsible) return
                 context.onValueChange(isOpen ? [] : [value])
             } else {
                 context.onValueChange(

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}