@dinachi/cli 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [
@@ -15,30 +15,37 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dinachi/ui"
+    "url": "git+https://github.com/dinachi/ui.git"
   },
   "homepage": "https://dinachi.dev",
   "bin": {
-    "dinachi": "./dist/index.js",
-    "dinachi-ui": "./dist/index.js"
+    "dinachi": "dist/index.js",
+    "dinachi-ui": "dist/index.js"
   },
   "files": [
     "dist",
     "templates"
   ],
   "dependencies": {
-    "commander": "^14.0.2",
     "chalk": "^5.3.0",
-    "ora": "^9.0.0",
-    "prompts": "^2.4.2",
+    "commander": "^14.0.2",
+    "execa": "^9.6.1",
     "fs-extra": "^11.2.0",
     "node-fetch": "^3.3.2",
-    "execa": "^9.6.1",
+    "ora": "^9.0.0",
+    "prompts": "^2.4.2",
     "ts-morph": "^27.0.2"
   },
   "devDependencies": {
+    "@base-ui/react": "1.2.0",
     "@types/fs-extra": "^11.0.4",
     "@types/prompts": "^2.4.9",
+    "@types/react": "^19.2.14",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "0.552.0",
+    "react": "19.2.4",
+    "tailwind-merge": "^3.5.0",
     "tsup": "^8.0.1",
     "typescript": "^5.5.3"
   },
@@ -51,6 +58,7 @@
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean",
     "dev": "tsup src/index.ts --format esm --dts --watch",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "pnpm run build && node --test test/**/*.test.mjs"
   }
 }

package/templates/accordion/accordion.tsx

@@ -1,10 +1,15 @@
-// @ts-nocheck
 import * as React from "react";
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 import { ChevronDown } from "lucide-react";
 
-const Accordion = BaseAccordion.Root;
+const Accordion = React.forwardRef<
+  React.ComponentRef<typeof BaseAccordion.Root>,
+  React.ComponentProps<typeof BaseAccordion.Root>
+>(({ className, ...props }, ref) => (
+  <BaseAccordion.Root ref={ref} className={cn(className)} {...props} />
+));
+Accordion.displayName = "Accordion";
 
 const AccordionItem = React.forwardRef<
   HTMLDivElement,

package/templates/alert-dialog/alert-dialog.tsx

@@ -1,9 +1,8 @@
-// @ts-nocheck
-import * as React from "react"
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react";
+import { cn } from "@/lib/utils";
 
-const AlertDialog = BaseAlertDialog.Root
+const AlertDialog = BaseAlertDialog.Root;
 
 const AlertDialogTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -21,10 +20,10 @@ const AlertDialogTrigger = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogTrigger.displayName = "AlertDialogTrigger"
+));
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
 
-const AlertDialogPortal = BaseAlertDialog.Portal
+const AlertDialogPortal = BaseAlertDialog.Portal;
 
 const AlertDialogBackdrop = React.forwardRef<
   HTMLDivElement,
@@ -40,8 +39,8 @@ const AlertDialogBackdrop = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogBackdrop.displayName = "AlertDialogBackdrop"
+));
+AlertDialogBackdrop.displayName = "AlertDialogBackdrop";
 
 const AlertDialogPopup = React.forwardRef<
   HTMLDivElement,
@@ -58,8 +57,8 @@ const AlertDialogPopup = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogPopup.displayName = "AlertDialogPopup"
+));
+AlertDialogPopup.displayName = "AlertDialogPopup";
 
 const AlertDialogTitle = React.forwardRef<
   HTMLHeadingElement,
@@ -70,8 +69,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = "AlertDialogTitle"
+));
+AlertDialogTitle.displayName = "AlertDialogTitle";
 
 const AlertDialogDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -82,8 +81,8 @@ const AlertDialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-AlertDialogDescription.displayName = "AlertDialogDescription"
+));
+AlertDialogDescription.displayName = "AlertDialogDescription";
 
 const AlertDialogAction = React.forwardRef<
   HTMLButtonElement,
@@ -99,8 +98,8 @@ const AlertDialogAction = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogAction.displayName = "AlertDialogAction"
+));
+AlertDialogAction.displayName = "AlertDialogAction";
 
 const AlertDialogCancel = React.forwardRef<
   HTMLButtonElement,
@@ -116,8 +115,8 @@ const AlertDialogCancel = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName = "AlertDialogCancel"
+));
+AlertDialogCancel.displayName = "AlertDialogCancel";
 
 const AlertDialogHeader = ({
   className,
@@ -130,8 +129,8 @@ const AlertDialogHeader = ({
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
   className,
@@ -144,8 +143,8 @@ const AlertDialogFooter = ({
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 export {
   AlertDialog,
@@ -159,4 +158,4 @@ export {
   AlertDialogCancel,
   AlertDialogHeader,
   AlertDialogFooter,
-} 
+}; 

package/templates/alert-dialog/index.ts

@@ -10,4 +10,4 @@ export {
   AlertDialogCancel,
   AlertDialogHeader,
   AlertDialogFooter,
-} from "./alert-dialog" 
+} from "./alert-dialog"; 

package/templates/autocomplete/autocomplete.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/avatar/avatar.tsx

@@ -1,9 +1,7 @@
-// @ts-nocheck
 import * as React from "react";
 import { Avatar as BaseAvatar } from "@base-ui/react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils"
-
+import { cn } from "@/lib/utils";
 
 const avatarVariants = cva(
   "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",

package/templates/badge/badge.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { useRender } from '@base-ui/react/use-render'
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success: 
+          "border-transparent bg-green-500 text-white hover:bg-green-600",
+        warning:
+          "border-transparent bg-yellow-500 text-yellow-900 hover:bg-yellow-600",
+        info:
+          "border-transparent bg-blue-500 text-white hover:bg-blue-600",
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        default: "px-2.5 py-0.5 text-xs",
+        lg: "px-3 py-1 text-sm",
+      },
+      rounded: {
+        default: "rounded-full",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        none: "rounded-none",
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      rounded: "default",
+    },
+  }
+)
+
+type BadgeElement = React.ComponentRef<"div">
+
+export interface BadgeProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
+    VariantProps<typeof badgeVariants> {
+  /**
+   * The content of the badge
+   */
+  children?: React.ReactNode
+  /**
+   * Custom render prop for composition
+   */
+  render?: React.ReactElement
+  /**
+   * Whether the badge should be interactive (clickable)
+   */
+  interactive?: boolean
+  /**
+   * Icon to display before the content
+   */
+  icon?: React.ReactNode
+  /**
+   * Whether to show a close button
+   */
+  dismissible?: boolean
+  /**
+   * Callback when close button is clicked
+   */
+  onDismiss?: () => void
+}
+
+const Badge = React.forwardRef<BadgeElement, BadgeProps>(
+  ({ 
+    className, 
+    variant, 
+    size, 
+    rounded,
+    children,
+    render = <div />,
+    interactive = false,
+    icon,
+    dismissible = false,
+    onDismiss,
+    onClick,
+    ...props 
+  }, ref) => {
+    // Handle keyboard interaction for dismissible badges
+    const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
+      if (dismissible && onDismiss && (event.key === 'Delete' || event.key === 'Backspace')) {
+        event.preventDefault()
+        onDismiss()
+      }
+    }, [dismissible, onDismiss])
+
+    // Handle click for interactive badges
+    const handleClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+      if (interactive && onClick) {
+        onClick(event)
+      }
+    }, [interactive, onClick])
+
+    // Compute classes once
+    const badgeClasses = React.useMemo(() => 
+      cn(
+        badgeVariants({ variant, size, rounded }),
+        {
+          'cursor-pointer hover:opacity-80': interactive,
+          'focus:ring-2 focus:ring-offset-2': interactive || dismissible,
+        },
+        className
+      ), 
+      [variant, size, rounded, interactive, dismissible, className]
+    )
+
+    const content = (
+      <>
+        {icon && <span className="mr-1 shrink-0">{icon}</span>}
+        {children}
+        {dismissible && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            className="ml-1 shrink-0 rounded-full p-0.5 hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-black/20"
+            aria-label="Remove badge"
+          >
+            <svg
+              className="h-3 w-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </>
+    )
+
+    return useRender({
+      render: React.cloneElement(render, {
+        ref,
+        className: badgeClasses,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: interactive || dismissible ? 0 : undefined,
+        role: interactive ? 'button' : dismissible ? 'button' : undefined,
+        'aria-label': interactive ? 'Interactive badge' : dismissible ? 'Dismissible badge' : undefined,
+        ...props,
+      }),
+      props: {
+        children: content,
+      },
+    })
+  }
+)
+
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }

package/templates/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge, badgeVariants } from './badge'
+export type { BadgeProps } from './badge'

package/templates/button/button.tsx

@@ -1,5 +1,5 @@
-// @ts-nocheck
 import * as React from "react"
+import { Button as BaseButton } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
@@ -33,15 +33,15 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends Omit<React.ComponentPropsWithoutRef<typeof BaseButton>, 'className'>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  className?: string
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+const Button = React.forwardRef<HTMLElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
     return (
-      <button
+      <BaseButton
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}

package/templates/button/index.ts

@@ -1,2 +1,2 @@
-export { Button, buttonVariants } from "./button"
-export type { ButtonProps } from "./button"
+export { Button, buttonVariants } from './button'
+export type { ButtonProps } from './button'

package/templates/card/card.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/templates/card/index.ts

@@ -0,0 +1 @@
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card'

package/templates/checkbox/checkbox.tsx

@@ -1,7 +1,6 @@
-// @ts-nocheck
 import * as React from "react";
-import { Checkbox as BaseCheckbox } from "@base-ui/react";
-import { cn } from "@/lib/utils"
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { cn } from "@/lib/utils";
 import { Check } from "lucide-react";
 
 const Checkbox = React.forwardRef<

package/templates/checkbox-group/checkbox-group.tsx

@@ -1,8 +1,6 @@
-// @ts-nocheck
 import * as React from "react";
 import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
-import { cn } from "@/lib/utils"
-
+import { cn } from "@/lib/utils";
 
 const CheckboxGroup = React.forwardRef<
   React.ComponentRef<typeof BaseCheckboxGroup>,

package/templates/collapsible/collapsible.tsx

@@ -1,6 +1,5 @@
-// @ts-nocheck
-
 "use client"
+
 import * as React from "react"
 import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
 import { cn } from "@/lib/utils"

package/templates/combobox/combobox.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/context-menu/context-menu.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as React from "react";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { Menu } from "@base-ui/react/menu";

package/templates/dialog/dialog.tsx

@@ -1,5 +1,5 @@
-// @ts-nocheck
 "use client"
+
 import * as React from "react"
 import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import { cn } from "@/lib/utils"

package/templates/drawer/drawer.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"