@srcroot/ui 0.0.1 → 0.0.3

package/dist/index.js

@@ -500,6 +500,97 @@ var REGISTRY = {
     description: "Date picker",
     category: "Forms",
     dependencies: []
+  },
+  sidebar: {
+    file: "sidebar.tsx",
+    description: "Responsive sidebar with mobile drawer",
+    category: "Layout",
+    dependencies: ["sheet", "button"]
+  },
+  // Added Components
+  combobox: {
+    file: "combobox.tsx",
+    description: "Searchable select with autocomplete",
+    category: "Forms",
+    dependencies: ["popover"]
+  },
+  command: {
+    file: "command.tsx",
+    description: "Command palette / search menu",
+    category: "Navigation",
+    dependencies: []
+  },
+  "context-menu": {
+    file: "context-menu.tsx",
+    description: "Right-click context menu",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  "date-picker": {
+    file: "date-picker.tsx",
+    description: "Date picker with calendar",
+    category: "Forms",
+    dependencies: ["calendar", "popover", "button"]
+  },
+  drawer: {
+    file: "drawer.tsx",
+    description: "Bottom/top sheet drawer",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  "file-upload": {
+    file: "file-upload.tsx",
+    description: "Drag-and-drop file upload",
+    category: "Forms",
+    dependencies: []
+  },
+  "hover-card": {
+    file: "hover-card.tsx",
+    description: "Hover-triggered popover",
+    category: "Overlay / Feedback",
+    dependencies: []
+  },
+  kbd: {
+    file: "kbd.tsx",
+    description: "Keyboard shortcut display",
+    category: "Typography",
+    dependencies: []
+  },
+  menubar: {
+    file: "menubar.tsx",
+    description: "Horizontal menu with dropdowns",
+    category: "Navigation",
+    dependencies: []
+  },
+  "native-select": {
+    file: "native-select.tsx",
+    description: "Styled browser-native select",
+    category: "Forms",
+    dependencies: []
+  },
+  resizable: {
+    file: "resizable.tsx",
+    description: "Resizable panel layout",
+    category: "Layout",
+    dependencies: []
+  },
+  "scroll-area": {
+    file: "scroll-area.tsx",
+    description: "Custom scrollbar container",
+    category: "Layout",
+    dependencies: []
+  },
+  toggle: {
+    file: "toggle.tsx",
+    description: "Toggle button",
+    category: "Forms",
+    dependencies: []
+  },
+  "toggle-group": {
+    file: "toggle-group.tsx",
+    description: "Grouped toggle buttons",
+    category: "Forms",
+    dependencies: ["toggle"]
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A shadcn-style CLI UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {
@@ -38,6 +38,12 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": "^0.300.0",
+    "cmdk": "^1.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss": "^3.0.0"
   }
-}
+}

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