@dinachi/cli 0.4.0 → 0.5.0

package/templates/popover/index.ts

@@ -0,0 +1,12 @@
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverClose,
+  PopoverPortal,
+  PopoverBackdrop,
+} from "./popover"
+

package/templates/popover/popover.tsx

@@ -0,0 +1,137 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import { cn } from "@/lib/utils"
+
+// Re-export root components for better tree-shaking
+const Popover = PopoverPrimitive.Root
+const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverPortal = PopoverPrimitive.Portal
+const PopoverClose = PopoverPrimitive.Close
+
+// Optimized PopoverContent with better positioning and animations
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup> & {
+    readonly sideOffset?: number
+    readonly align?: "start" | "center" | "end"
+    readonly side?: "top" | "bottom" | "left" | "right"
+  }
+>(({ className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Positioner 
+      align={align}
+      side={side}
+      sideOffset={sideOffset}
+    >
+      <PopoverPrimitive.Popup
+        ref={ref}
+        className={cn(
+          "z-50 rounded-lg border bg-popover px-6 py-4 text-popover-foreground shadow-lg outline-none",
+          "origin-[var(--transform-origin)]",
+          "data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
+          "data-[ending-style]:scale-90 data-[ending-style]:opacity-0",
+          "transition-[transform,opacity] duration-150",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Positioner>
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = "PopoverContent"
+
+// Optimized PopoverArrow
+const PopoverArrow = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
+>(({ className, children, ...props }, ref) => (
+  <PopoverPrimitive.Arrow
+    ref={ref}
+    className={cn(
+      "data-[side=bottom]:top-[-8px]",
+      "data-[side=left]:right-[-13px] data-[side=left]:rotate-90",
+      "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90",
+      "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
+      className
+    )}
+    {...props}
+  >
+    {children || (
+      <svg width="20" height="10" viewBox="0 0 20 10" fill="none">
+        <path
+          d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+          className="fill-popover"
+        />
+        <path
+          d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+          className="fill-border"
+        />
+        <path
+          d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
+          className="fill-border"
+        />
+      </svg>
+    )}
+  </PopoverPrimitive.Arrow>
+))
+PopoverArrow.displayName = "PopoverArrow"
+
+// Optimized PopoverTitle
+const PopoverTitle = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Title
+    ref={ref}
+    className={cn("mb-2 text-base font-medium leading-none", className)}
+    {...props}
+  />
+))
+PopoverTitle.displayName = "PopoverTitle"
+
+// Optimized PopoverDescription
+const PopoverDescription = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Description
+    ref={ref}
+    className={cn("text-base text-muted-foreground", className)}
+    {...props}
+  />
+))
+PopoverDescription.displayName = "PopoverDescription"
+
+// Optimized PopoverBackdrop
+const PopoverBackdrop = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Backdrop>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Backdrop>
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Backdrop
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-40 bg-black/50",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      "transition-opacity duration-150",
+      className
+    )}
+    {...props}
+  />
+))
+PopoverBackdrop.displayName = "PopoverBackdrop"
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverClose,
+  PopoverPortal,
+  PopoverBackdrop,
+}
+

package/templates/preview-card/preview-card.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-
 "use client"
 
 import * as React from "react"
@@ -9,7 +8,7 @@ import { cn } from "@/lib/utils"
 const PreviewCard = BasePreviewCard.Root
 
 const PreviewCardTrigger = React.forwardRef<
-  React.ComponentRef<typeof BasePreviewCard.Trigger>,
+  HTMLAnchorElement,
   React.ComponentProps<typeof BasePreviewCard.Trigger>
 >(({ className, ...props }, ref) => (
   <BasePreviewCard.Trigger
@@ -64,12 +63,12 @@ const PreviewCardPopup = React.forwardRef<
   <BasePreviewCard.Popup
     ref={ref}
     className={cn(
-      "flex w-[280px] origin-[var(--transform-origin)] flex-col gap-3 rounded-lg bg-secondary/70 p-4 shadow-lg shadow-secondary/20",
+      "flex w-[280px] origin-[var(--transform-origin)] flex-col gap-3 rounded-lg bg-secondary/80 p-4 shadow-lg shadow-secondary/20",
       "outline outline-1 outline-border",
       "transition-[transform,scale,opacity] duration-200",
       "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
-      "bg-secondary/70 backdrop-blur-sm dark:shadow-none dark:-outline-offset-1",
+      "bg-secondary/80 backdrop-blur-sm dark:shadow-none dark:-outline-offset-1",
       className
     )}
     {...props}
@@ -139,4 +138,4 @@ export {
   PreviewCardArrow,
   PreviewCardContent,
   PreviewCardArrowSvg,
-} 
+} 

package/templates/progress/index.ts

@@ -0,0 +1,7 @@
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+} from "./progress"

package/templates/progress/progress.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <ProgressPrimitive.Root ref={ref} className={cn("grid gap-2", className)} {...props} />
+))
+Progress.displayName = "Progress"
+
+const ProgressTrack = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Track>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Track>
+>(({ className, ...props }, ref) => (
+  <ProgressPrimitive.Track
+    ref={ref}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
+    {...props}
+  />
+))
+ProgressTrack.displayName = "ProgressTrack"
+
+const ProgressIndicator = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <ProgressPrimitive.Indicator
+    ref={ref}
+    className={cn("h-full rounded-full bg-primary transition-[width] duration-200", className)}
+    {...props}
+  />
+))
+ProgressIndicator.displayName = "ProgressIndicator"
+
+const ProgressLabel = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <ProgressPrimitive.Label
+    ref={ref}
+    className={cn("text-sm font-medium leading-none", className)}
+    {...props}
+  />
+))
+ProgressLabel.displayName = "ProgressLabel"
+
+const ProgressValue = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Value>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Value>
+>(({ className, ...props }, ref) => (
+  <ProgressPrimitive.Value
+    ref={ref}
+    className={cn("text-xs text-muted-foreground", className)}
+    {...props}
+  />
+))
+ProgressValue.displayName = "ProgressValue"
+
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue }

package/templates/radio/index.ts

@@ -0,0 +1 @@
+export { Radio, RadioGroup } from "./radio"

package/templates/radio/radio.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+import { Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive ref={ref} className={cn("grid gap-2", className)} {...props} />
+))
+RadioGroup.displayName = "RadioGroup"
+
+const Radio = React.forwardRef<
+  React.ComponentRef<typeof RadioPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioPrimitive.Root
+    ref={ref}
+    className={cn(
+      "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <RadioPrimitive.Indicator className="flex items-center justify-center">
+      <Circle className="h-2.5 w-2.5 fill-current text-current" />
+    </RadioPrimitive.Indicator>
+  </RadioPrimitive.Root>
+))
+Radio.displayName = "Radio"
+
+export { Radio, RadioGroup }

package/templates/scroll-area/index.ts

@@ -0,0 +1,8 @@
+export {
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollAreaContent,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaCorner,
+} from "./scroll-area"

package/templates/scroll-area/scroll-area.tsx

@@ -0,0 +1,94 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  />
+))
+ScrollArea.displayName = "ScrollArea"
+
+const ScrollAreaViewport = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Viewport
+    ref={ref}
+    className={cn("size-full rounded-[inherit]", className)}
+    {...props}
+  />
+))
+ScrollAreaViewport.displayName = "ScrollAreaViewport"
+
+const ScrollAreaContent = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Content
+    ref={ref}
+    className={cn("min-w-full", className)}
+    {...props}
+  />
+))
+ScrollAreaContent.displayName = "ScrollAreaContent"
+
+const ScrollAreaScrollbar = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.Scrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none p-0.5 transition-colors",
+      orientation === "vertical"
+        ? "h-full w-2.5 border-l border-l-transparent"
+        : "h-2.5 w-full flex-col border-t border-t-transparent",
+      className
+    )}
+    {...props}
+  />
+))
+ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar"
+
+const ScrollAreaThumb = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Thumb>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Thumb>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Thumb
+    ref={ref}
+    className={cn("relative flex-1 rounded-full bg-border", className)}
+    {...props}
+  />
+))
+ScrollAreaThumb.displayName = "ScrollAreaThumb"
+
+const ScrollAreaCorner = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Corner>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Corner>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Corner
+    ref={ref}
+    className={cn("bg-background", className)}
+    {...props}
+  />
+))
+ScrollAreaCorner.displayName = "ScrollAreaCorner"
+
+export {
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollAreaContent,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaCorner,
+}

package/templates/separator/index.ts

@@ -0,0 +1 @@
+export { Separator } from "./separator"

package/templates/separator/separator.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ComponentRef<typeof SeparatorPrimitive>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>
+>(({ className, orientation = "horizontal", ...props }, ref) => (
+  <SeparatorPrimitive
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className
+    )}
+    {...props}
+  />
+))
+Separator.displayName = "Separator"
+
+export { Separator }

package/templates/switch/index.ts

@@ -0,0 +1 @@
+export { Switch, SwitchThumb } from "./switch"

package/templates/switch/switch.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[checked]:bg-primary data-[unchecked]:bg-input",
+      className
+    )}
+    {...props}
+  />
+))
+Switch.displayName = "Switch"
+
+const SwitchThumb = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitive.Thumb>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Thumb>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Thumb
+    ref={ref}
+    className={cn(
+      "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+      "data-[checked]:translate-x-5 data-[unchecked]:translate-x-0",
+      className
+    )}
+    {...props}
+  />
+))
+SwitchThumb.displayName = "SwitchThumb"
+
+export { Switch, SwitchThumb }

package/templates/toggle-group/index.ts

@@ -0,0 +1 @@
+export { ToggleGroup, ToggleGroupItem } from "./toggle-group"

package/templates/toggle-group/toggle-group.tsx

@@ -0,0 +1,67 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive> & {
+  variant?: "default" | "outline"
+  size?: "default" | "sm" | "lg"
+}
+
+const toggleGroupItemVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded-md text-sm font-medium",
+    "ring-offset-background transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent hover:bg-muted hover:text-muted-foreground",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground data-[state=on]:border-accent",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5 text-xs",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "sm",
+    },
+  }
+)
+
+const ToggleGroup = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive>
+>(({ className, ...props }, ref) => (
+  <ToggleGroupPrimitive
+    ref={ref}
+    className={cn("inline-flex items-center justify-center gap-1", className)}
+    {...props}
+  />
+))
+ToggleGroup.displayName = "ToggleGroup"
+
+const ToggleGroupItem = React.forwardRef<
+  React.ComponentRef<typeof TogglePrimitive>,
+  ToggleGroupItemProps
+>(({ className, variant = "outline", size = "sm", ...props }, ref) => (
+  <TogglePrimitive
+    ref={ref}
+    className={cn(toggleGroupItemVariants({ variant, size }), className)}
+    {...props}
+  />
+))
+ToggleGroupItem.displayName = "ToggleGroupItem"
+
+export { ToggleGroup, ToggleGroupItem }

package/templates/tooltip/tooltip.tsx

@@ -19,9 +19,9 @@ interface TooltipTriggerProps
 }
 
 const TooltipTrigger: React.ForwardRefExoticComponent<
-  TooltipTriggerProps & React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Trigger>>
+  TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>
 > = React.forwardRef<
-  React.ComponentRef<typeof BaseTooltip.Trigger>,
+  HTMLButtonElement,
   TooltipTriggerProps
 >(
   (