@dinachi/cli 0.3.2 → 0.5.0

package/templates/slider/slider.tsx

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import * as React from "react";
-import { Slider as BaseSlider } from "@base-ui-components/react/slider";
-import { DirectionProvider } from "@base-ui-components/react/direction-provider";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
 import { cn } from "@/lib/utils"
 
 
 const Slider = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Root>,
+  React.ComponentRef<typeof BaseSlider.Root>,
   React.ComponentProps<typeof BaseSlider.Root>
 >(({ className, ...props }, ref) => {
   const internalRef = React.useRef<HTMLDivElement>(null);
@@ -15,7 +15,7 @@ const Slider = React.forwardRef<
   
   return (
     <BaseSlider.Root
-      ref={internalRef}
+      ref={internalRef as React.RefObject<HTMLDivElement>}
       className={cn("relative flex w-full touch-none select-none items-center", className)}
       {...props}
     />
@@ -24,7 +24,7 @@ const Slider = React.forwardRef<
 Slider.displayName = "Slider";
 
 const SliderValue = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Value>,
+  React.ComponentRef<typeof BaseSlider.Value>,
   React.ComponentProps<typeof BaseSlider.Value>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Value
@@ -36,7 +36,7 @@ const SliderValue = React.forwardRef<
 SliderValue.displayName = "SliderValue";
 
 const SliderControl = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Control>,
+  React.ComponentRef<typeof BaseSlider.Control>,
   React.ComponentProps<typeof BaseSlider.Control>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Control
@@ -48,7 +48,7 @@ const SliderControl = React.forwardRef<
 SliderControl.displayName = "SliderControl";
 
 const SliderTrack = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Track>,
+  React.ComponentRef<typeof BaseSlider.Track>,
   React.ComponentProps<typeof BaseSlider.Track>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Track
@@ -63,7 +63,7 @@ const SliderTrack = React.forwardRef<
 SliderTrack.displayName = "SliderTrack";
 
 const SliderRange = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Indicator>,
+  React.ComponentRef<typeof BaseSlider.Indicator>,
   React.ComponentProps<typeof BaseSlider.Indicator>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Indicator
@@ -75,7 +75,7 @@ const SliderRange = React.forwardRef<
 SliderRange.displayName = "SliderRange";
 
 const SliderThumb = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Thumb>,
+  React.ComponentRef<typeof BaseSlider.Thumb>,
   React.ComponentProps<typeof BaseSlider.Thumb>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Thumb
@@ -118,4 +118,4 @@ export {
   SliderRange,
   SliderThumb,
   SliderDirectionProvider,
-}; 
+};

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/tabs/tabs.tsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import * as React from "react";
-import { Tabs as BaseTabs } from "@base-ui-components/react/tabs";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { cn } from "@/lib/utils";
 
 const Tabs = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.Root>,
+  React.ComponentRef<typeof BaseTabs.Root>,
   React.ComponentProps<typeof BaseTabs.Root>
 >(({ className, ...props }, ref) => (
   <BaseTabs.Root
@@ -16,7 +16,7 @@ const Tabs = React.forwardRef<
 Tabs.displayName = "Tabs";
 
 const TabsList = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.List>,
+  React.ComponentRef<typeof BaseTabs.List>,
   React.ComponentProps<typeof BaseTabs.List>
 >(({ className, ...props }, ref) => (
   <BaseTabs.List
@@ -31,7 +31,7 @@ const TabsList = React.forwardRef<
 TabsList.displayName = "TabsList";
 
 const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.Tab>,
+  React.ComponentRef<typeof BaseTabs.Tab>,
   React.ComponentProps<typeof BaseTabs.Tab>
 >(({ className, ...props }, ref) => (
   <BaseTabs.Tab
@@ -50,7 +50,7 @@ const TabsTrigger = React.forwardRef<
 TabsTrigger.displayName = "TabsTrigger";
 
 const TabsContent = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.Panel>,
+  React.ComponentRef<typeof BaseTabs.Panel>,
   React.ComponentProps<typeof BaseTabs.Panel>
 >(({ className, ...props }, ref) => (
   <BaseTabs.Panel
@@ -66,7 +66,7 @@ const TabsContent = React.forwardRef<
 TabsContent.displayName = "TabsContent";
 
 const TabsIndicator = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.Indicator>,
+  React.ComponentRef<typeof BaseTabs.Indicator>,
   React.ComponentProps<typeof BaseTabs.Indicator>
 >(({ className, ...props }, ref) => (
   <BaseTabs.Indicator

package/templates/toast/toast.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react";
-import { Toast as BaseToast } from "@base-ui-components/react/toast";
+import { Toast as BaseToast } from "@base-ui/react/toast";
 import { cn } from "@/lib/utils";
 import { type VariantProps, cva } from "class-variance-authority";
 

package/templates/toggle/toggle.tsx

@@ -2,7 +2,7 @@
 "use client"
 
 import * as React from "react"
-import { Toggle as TogglePrimitive } from "@base-ui-components/react/toggle"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { type VariantProps, cva } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
@@ -68,7 +68,7 @@ export interface ToggleProps
     VariantProps<typeof toggleVariants> {}
 
 const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive>,
+  React.ComponentRef<typeof TogglePrimitive>,
   ToggleProps
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive

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/toolbar/toolbar.tsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import * as React from "react";
-import { Toolbar as BaseToolbar } from "@base-ui-components/react/toolbar";
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import { cn } from "@/lib/utils";
 
 const ToolbarRoot = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Root>,
+  React.ComponentRef<typeof BaseToolbar.Root>,
   React.ComponentProps<typeof BaseToolbar.Root>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Root
@@ -19,7 +19,7 @@ const ToolbarRoot = React.forwardRef<
 ToolbarRoot.displayName = "ToolbarRoot";
 
 const ToolbarButton = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Button>,
+  React.ComponentRef<typeof BaseToolbar.Button>,
   React.ComponentProps<typeof BaseToolbar.Button>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Button
@@ -38,7 +38,7 @@ const ToolbarButton = React.forwardRef<
 ToolbarButton.displayName = "ToolbarButton";
 
 const ToolbarLink = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Link>,
+  React.ComponentRef<typeof BaseToolbar.Link>,
   React.ComponentProps<typeof BaseToolbar.Link>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Link
@@ -56,7 +56,7 @@ const ToolbarLink = React.forwardRef<
 ToolbarLink.displayName = "ToolbarLink";
 
 const ToolbarSeparator = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Separator>,
+  React.ComponentRef<typeof BaseToolbar.Separator>,
   React.ComponentProps<typeof BaseToolbar.Separator>
 >(({ className, orientation = "vertical", ...props }, ref) => (
   <BaseToolbar.Separator
@@ -73,7 +73,7 @@ const ToolbarSeparator = React.forwardRef<
 ToolbarSeparator.displayName = "ToolbarSeparator";
 
 const ToolbarGroup = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Group>,
+  React.ComponentRef<typeof BaseToolbar.Group>,
   React.ComponentProps<typeof BaseToolbar.Group>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Group
@@ -85,7 +85,7 @@ const ToolbarGroup = React.forwardRef<
 ToolbarGroup.displayName = "ToolbarGroup";
 
 const ToolbarInput = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Input>,
+  React.ComponentRef<typeof BaseToolbar.Input>,
   React.ComponentProps<typeof BaseToolbar.Input>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Input

package/templates/tooltip/tooltip.tsx

@@ -2,14 +2,14 @@
 "use client";
 
 import * as React from "react";
-import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { cn } from "@/lib/utils";
 
 // Provider Component
-const TooltipProvider = BaseTooltip.Provider;
+const TooltipProvider: typeof BaseTooltip.Provider = BaseTooltip.Provider;
 
 // Root Component
-const Tooltip = BaseTooltip.Root;
+const Tooltip: typeof BaseTooltip.Root = BaseTooltip.Root;
 
 // Trigger Component with Base UI's native render prop support
 interface TooltipTriggerProps
@@ -18,8 +18,10 @@ interface TooltipTriggerProps
   size?: "default" | "sm" | "lg" | "icon";
 }
 
-const TooltipTrigger = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Trigger>,
+const TooltipTrigger: React.ForwardRefExoticComponent<
+  TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef<
+  HTMLButtonElement,
   TooltipTriggerProps
 >(
   (
@@ -64,11 +66,14 @@ const TooltipTrigger = React.forwardRef<
 TooltipTrigger.displayName = "TooltipTrigger";
 
 // Portal Component
-const TooltipPortal = BaseTooltip.Portal;
+const TooltipPortal: typeof BaseTooltip.Portal = BaseTooltip.Portal;
 
 // Positioner Component
-const TooltipPositioner = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Positioner>,
+const TooltipPositioner: React.ForwardRefExoticComponent<
+  React.ComponentProps<typeof BaseTooltip.Positioner> &
+    React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Positioner>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Positioner>,
   React.ComponentProps<typeof BaseTooltip.Positioner>
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <BaseTooltip.Positioner
@@ -86,8 +91,10 @@ interface TooltipPopupProps
   variant?: "default" | "inverse";
 }
 
-const TooltipPopup = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Popup>,
+const TooltipPopup: React.ForwardRefExoticComponent<
+  TooltipPopupProps & React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Popup>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Popup>,
   TooltipPopupProps
 >(({ className, variant = "default", ...props }, ref) => {
   const variantStyles = {
@@ -113,12 +120,16 @@ const TooltipPopup = React.forwardRef<
 TooltipPopup.displayName = "TooltipPopup";
 
 // Arrow Component with custom SVG
-const TooltipArrow = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Arrow>,
-  React.ComponentProps<typeof BaseTooltip.Arrow> & {
-    children?: React.ReactNode;
-    variant?: "default" | "inverse";
-  }
+type TooltipArrowProps = React.ComponentProps<typeof BaseTooltip.Arrow> & {
+  children?: React.ReactNode;
+  variant?: "default" | "inverse";
+};
+
+const TooltipArrow: React.ForwardRefExoticComponent<
+  TooltipArrowProps & React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Arrow>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Arrow>,
+  TooltipArrowProps
 >(({ className, children, variant = "default", ...props }, ref) => (
   <BaseTooltip.Arrow
     ref={ref}
@@ -143,8 +154,10 @@ interface TooltipContentProps extends TooltipPopupProps {
   showArrow?: boolean;
 }
 
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Popup>,
+const TooltipContent: React.ForwardRefExoticComponent<
+  TooltipContentProps & React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Popup>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Popup>,
   TooltipContentProps
 >(
   (
@@ -178,11 +191,13 @@ const TooltipContent = React.forwardRef<
 TooltipContent.displayName = "TooltipContent";
 
 // Optimized Arrow SVG Component
-const TooltipArrowSvg = React.memo(
-  ({
-    variant = "default",
-    ...props
-  }: React.ComponentProps<"svg"> & { variant?: "default" | "inverse" }) => {
+type TooltipArrowSvgProps = React.ComponentProps<"svg"> & {
+  variant?: "default" | "inverse";
+};
+
+const TooltipArrowSvg: React.MemoExoticComponent<
+  React.FC<TooltipArrowSvgProps>
+> = React.memo(({ variant = "default", ...props }: TooltipArrowSvgProps) => {
     const fillClasses = variant === "inverse" ? "fill-primary" : "fill-popover";
 
     const borderClasses =