@dinachi/cli 0.3.2 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [
@@ -27,14 +27,14 @@
     "templates"
   ],
   "dependencies": {
-    "commander": "^11.1.0",
+    "commander": "^14.0.2",
     "chalk": "^5.3.0",
-    "ora": "^7.0.1",
+    "ora": "^9.0.0",
     "prompts": "^2.4.2",
     "fs-extra": "^11.2.0",
     "node-fetch": "^3.3.2",
-    "execa": "^8.0.1",
-    "ts-morph": "^20.0.0"
+    "execa": "^9.6.1",
+    "ts-morph": "^27.0.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

package/templates/accordion/accordion.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react";
-import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import { cn } from "@/lib/utils"
 import { ChevronDown } from "lucide-react";
 

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

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react"
-import { AlertDialog as BaseAlertDialog } from "@base-ui-components/react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react"
 import { cn } from "@/lib/utils"
 
 const AlertDialog = BaseAlertDialog.Root

package/templates/autocomplete/autocomplete.tsx

@@ -0,0 +1,197 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"
+import { ChevronDown, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Autocomplete = AutocompletePrimitive.Root
+const AutocompleteValue = AutocompletePrimitive.Value
+const AutocompleteCollection = AutocompletePrimitive.Collection
+const AutocompletePortal = AutocompletePrimitive.Portal
+
+const AutocompleteInput = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Input
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm",
+      "placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+AutocompleteInput.displayName = "AutocompleteInput"
+
+const AutocompleteTrigger = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AutocompletePrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-3",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children ?? (
+      <AutocompletePrimitive.Icon>
+        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+      </AutocompletePrimitive.Icon>
+    )}
+  </AutocompletePrimitive.Trigger>
+))
+AutocompleteTrigger.displayName = "AutocompleteTrigger"
+
+const AutocompleteClear = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Clear>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Clear>
+>(({ className, children, ...props }, ref) => (
+  <AutocompletePrimitive.Clear
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted-foreground",
+      "hover:bg-accent hover:text-accent-foreground",
+      className
+    )}
+    {...props}
+  >
+    {children ?? <X className="h-4 w-4" />}
+  </AutocompletePrimitive.Clear>
+))
+AutocompleteClear.displayName = "AutocompleteClear"
+
+const AutocompleteContent = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Popup>
+>(({ className, ...props }, ref) => (
+  <AutocompletePortal>
+    <AutocompletePrimitive.Positioner sideOffset={4}>
+      <AutocompletePrimitive.Popup
+        ref={ref}
+        className={cn(
+          "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          "origin-[var(--transform-origin)] outline-none",
+          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AutocompletePrimitive.Positioner>
+  </AutocompletePortal>
+))
+AutocompleteContent.displayName = "AutocompleteContent"
+
+const AutocompleteList = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.List>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.List
+    ref={ref}
+    className={cn("max-h-80 overflow-y-auto p-1", className)}
+    {...props}
+  />
+))
+AutocompleteList.displayName = "AutocompleteList"
+
+const AutocompleteItem = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, children, inset, ...props }, ref) => (
+  <AutocompletePrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </AutocompletePrimitive.Item>
+))
+AutocompleteItem.displayName = "AutocompleteItem"
+
+const AutocompleteGroup = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Group ref={ref} className={cn(className)} {...props} />
+))
+AutocompleteGroup.displayName = "AutocompleteGroup"
+
+const AutocompleteGroupLabel = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.GroupLabel>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.GroupLabel>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.GroupLabel
+    ref={ref}
+    className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)}
+    {...props}
+  />
+))
+AutocompleteGroupLabel.displayName = "AutocompleteGroupLabel"
+
+const AutocompleteEmpty = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Empty
+    ref={ref}
+    className={cn("px-2 py-6 text-center text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AutocompleteEmpty.displayName = "AutocompleteEmpty"
+
+const AutocompleteStatus = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Status>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Status>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Status ref={ref} className={cn("sr-only", className)} {...props} />
+))
+AutocompleteStatus.displayName = "AutocompleteStatus"
+
+const AutocompleteSeparator = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+AutocompleteSeparator.displayName = "AutocompleteSeparator"
+
+export {
+  Autocomplete,
+  AutocompleteValue,
+  AutocompleteCollection,
+  AutocompletePortal,
+  AutocompleteInput,
+  AutocompleteTrigger,
+  AutocompleteClear,
+  AutocompleteContent,
+  AutocompleteList,
+  AutocompleteItem,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteStatus,
+  AutocompleteSeparator,
+}

package/templates/autocomplete/index.ts

@@ -0,0 +1,17 @@
+export {
+  Autocomplete,
+  AutocompleteValue,
+  AutocompleteCollection,
+  AutocompletePortal,
+  AutocompleteInput,
+  AutocompleteTrigger,
+  AutocompleteClear,
+  AutocompleteContent,
+  AutocompleteList,
+  AutocompleteItem,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteStatus,
+  AutocompleteSeparator,
+} from "./autocomplete"

package/templates/avatar/avatar.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react";
-import { Avatar as BaseAvatar } from "@base-ui-components/react";
+import { Avatar as BaseAvatar } from "@base-ui/react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils"
 
@@ -22,7 +22,7 @@ const avatarVariants = cva(
 );
 
 const Avatar = React.forwardRef<
-  React.ElementRef<typeof BaseAvatar.Root>,
+  React.ComponentRef<typeof BaseAvatar.Root>,
   React.ComponentPropsWithoutRef<typeof BaseAvatar.Root> &
     VariantProps<typeof avatarVariants>
 >(({ className, size, ...props }, ref) => (
@@ -35,7 +35,7 @@ const Avatar = React.forwardRef<
 Avatar.displayName = "Avatar";
 
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof BaseAvatar.Image>,
+  React.ComponentRef<typeof BaseAvatar.Image>,
   React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>
 >(({ className, ...props }, ref) => (
   <BaseAvatar.Image
@@ -47,7 +47,7 @@ const AvatarImage = React.forwardRef<
 AvatarImage.displayName = "AvatarImage";
 
 const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof BaseAvatar.Fallback>,
+  React.ComponentRef<typeof BaseAvatar.Fallback>,
   React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>
 >(({ className, ...props }, ref) => (
   <BaseAvatar.Fallback

package/templates/checkbox/checkbox.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import * as React from "react";
-import { Checkbox as BaseCheckbox } from "@base-ui-components/react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react";
 import { cn } from "@/lib/utils"
 import { Check } from "lucide-react";
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof BaseCheckbox.Root>,
+  React.ComponentRef<typeof BaseCheckbox.Root>,
   React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>
 >(({ className, ...props }, ref) => (
   <BaseCheckbox.Root

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

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import * as React from "react";
-import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui-components/react/checkbox-group";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
 import { cn } from "@/lib/utils"
 
 
 const CheckboxGroup = React.forwardRef<
-  React.ElementRef<typeof BaseCheckboxGroup>,
+  React.ComponentRef<typeof BaseCheckboxGroup>,
   React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup>
 >(({ className, ...props }, ref) => (
   <BaseCheckboxGroup

package/templates/collapsible/collapsible.tsx

@@ -2,11 +2,11 @@
 
 "use client"
 import * as React from "react"
-import { Collapsible as BaseCollapsible } from "@base-ui-components/react/collapsible"
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
 import { cn } from "@/lib/utils"
 
 const Collapsible = React.forwardRef<
-  React.ElementRef<typeof BaseCollapsible.Root>,
+  React.ComponentRef<typeof BaseCollapsible.Root>,
   React.ComponentPropsWithoutRef<typeof BaseCollapsible.Root>
 >(({ className, ...props }, ref) => (
   <BaseCollapsible.Root ref={ref} className={cn("w-full", className)} {...props} />
@@ -14,7 +14,7 @@ const Collapsible = React.forwardRef<
 Collapsible.displayName = "Collapsible"
 
 const CollapsibleTrigger = React.forwardRef<
-  React.ElementRef<typeof BaseCollapsible.Trigger>,
+  React.ComponentRef<typeof BaseCollapsible.Trigger>,
   React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>
 >(({ className, ...props }, ref) => (
   <BaseCollapsible.Trigger
@@ -33,7 +33,7 @@ const CollapsibleTrigger = React.forwardRef<
 CollapsibleTrigger.displayName = "CollapsibleTrigger"
 
 const CollapsiblePanel = React.forwardRef<
-  React.ElementRef<typeof BaseCollapsible.Panel>,
+  React.ComponentRef<typeof BaseCollapsible.Panel>,
   React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>
 >(({ className, ...props }, ref) => (
   <BaseCollapsible.Panel

package/templates/combobox/combobox.tsx

@@ -0,0 +1,202 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"
+import { Check, ChevronDown, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Combobox = ComboboxPrimitive.Root
+const ComboboxValue = ComboboxPrimitive.Value
+const ComboboxCollection = ComboboxPrimitive.Collection
+const ComboboxPortal = ComboboxPrimitive.Portal
+
+const ComboboxInput = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Input
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm",
+      "placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+ComboboxInput.displayName = "ComboboxInput"
+
+const ComboboxTrigger = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <ComboboxPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-3",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children ?? (
+      <ComboboxPrimitive.Icon>
+        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+      </ComboboxPrimitive.Icon>
+    )}
+  </ComboboxPrimitive.Trigger>
+))
+ComboboxTrigger.displayName = "ComboboxTrigger"
+
+const ComboboxClear = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Clear>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Clear>
+>(({ className, children, ...props }, ref) => (
+  <ComboboxPrimitive.Clear
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted-foreground",
+      "hover:bg-accent hover:text-accent-foreground",
+      className
+    )}
+    {...props}
+  >
+    {children ?? <X className="h-4 w-4" />}
+  </ComboboxPrimitive.Clear>
+))
+ComboboxClear.displayName = "ComboboxClear"
+
+const ComboboxContent = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup>
+>(({ className, ...props }, ref) => (
+  <ComboboxPortal>
+    <ComboboxPrimitive.Positioner sideOffset={4}>
+      <ComboboxPrimitive.Popup
+        ref={ref}
+        className={cn(
+          "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          "origin-[var(--transform-origin)] outline-none",
+          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </ComboboxPrimitive.Positioner>
+  </ComboboxPortal>
+))
+ComboboxContent.displayName = "ComboboxContent"
+
+const ComboboxList = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.List
+    ref={ref}
+    className={cn("max-h-80 overflow-y-auto p-1", className)}
+    {...props}
+  />
+))
+ComboboxList.displayName = "ComboboxList"
+
+const ComboboxItem = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, children, inset, ...props }, ref) => (
+  <ComboboxPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-10",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ComboboxPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ComboboxPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ComboboxPrimitive.Item>
+))
+ComboboxItem.displayName = "ComboboxItem"
+
+const ComboboxGroup = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Group ref={ref} className={cn(className)} {...props} />
+))
+ComboboxGroup.displayName = "ComboboxGroup"
+
+const ComboboxGroupLabel = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.GroupLabel>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.GroupLabel
+    ref={ref}
+    className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)}
+    {...props}
+  />
+))
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel"
+
+const ComboboxEmpty = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Empty
+    ref={ref}
+    className={cn("px-2 py-6 text-center text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+ComboboxEmpty.displayName = "ComboboxEmpty"
+
+const ComboboxStatus = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Status>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Status>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Status ref={ref} className={cn("sr-only", className)} {...props} />
+))
+ComboboxStatus.displayName = "ComboboxStatus"
+
+const ComboboxSeparator = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ComboboxSeparator.displayName = "ComboboxSeparator"
+
+export {
+  Combobox,
+  ComboboxValue,
+  ComboboxCollection,
+  ComboboxPortal,
+  ComboboxInput,
+  ComboboxTrigger,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxEmpty,
+  ComboboxStatus,
+  ComboboxSeparator,
+}

package/templates/combobox/index.ts

@@ -0,0 +1,17 @@
+export {
+  Combobox,
+  ComboboxValue,
+  ComboboxCollection,
+  ComboboxPortal,
+  ComboboxInput,
+  ComboboxTrigger,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxEmpty,
+  ComboboxStatus,
+  ComboboxSeparator,
+} from "./combobox"