@dinachi/cli 0.3.2 → 0.5.0

package/templates/number-field/number-field.tsx

@@ -0,0 +1,114 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
+import { Minus, Plus } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const NumberField = NumberFieldPrimitive.Root
+
+const NumberFieldGroup = React.forwardRef<
+  React.ComponentRef<typeof NumberFieldPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <NumberFieldPrimitive.Group
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 w-full items-stretch overflow-hidden rounded-md border border-input bg-background",
+      className
+    )}
+    {...props}
+  />
+))
+NumberFieldGroup.displayName = "NumberFieldGroup"
+
+const NumberFieldInput = React.forwardRef<
+  React.ComponentRef<typeof NumberFieldPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <NumberFieldPrimitive.Input
+    ref={ref}
+    className={cn(
+      "w-full bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+NumberFieldInput.displayName = "NumberFieldInput"
+
+const NumberFieldIncrement = React.forwardRef<
+  React.ComponentRef<typeof NumberFieldPrimitive.Increment>,
+  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Increment>
+>(({ className, children, ...props }, ref) => (
+  <NumberFieldPrimitive.Increment
+    ref={ref}
+    className={cn(
+      "inline-flex h-full items-center justify-center border-l border-input px-3 text-muted-foreground transition-colors",
+      "hover:bg-accent hover:text-accent-foreground",
+      "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 ?? <Plus className="h-4 w-4" />}
+  </NumberFieldPrimitive.Increment>
+))
+NumberFieldIncrement.displayName = "NumberFieldIncrement"
+
+const NumberFieldDecrement = React.forwardRef<
+  React.ComponentRef<typeof NumberFieldPrimitive.Decrement>,
+  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Decrement>
+>(({ className, children, ...props }, ref) => (
+  <NumberFieldPrimitive.Decrement
+    ref={ref}
+    className={cn(
+      "inline-flex h-full items-center justify-center border-r border-input px-3 text-muted-foreground transition-colors",
+      "hover:bg-accent hover:text-accent-foreground",
+      "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 ?? <Minus className="h-4 w-4" />}
+  </NumberFieldPrimitive.Decrement>
+))
+NumberFieldDecrement.displayName = "NumberFieldDecrement"
+
+const NumberFieldScrubArea = React.forwardRef<
+  React.ComponentRef<typeof NumberFieldPrimitive.ScrubArea>,
+  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.ScrubArea>
+>(({ className, ...props }, ref) => (
+  <NumberFieldPrimitive.ScrubArea
+    ref={ref}
+    className={cn("cursor-ew-resize", className)}
+    {...props}
+  />
+))
+NumberFieldScrubArea.displayName = "NumberFieldScrubArea"
+
+const NumberFieldScrubAreaCursor = React.forwardRef<
+  React.ComponentRef<typeof NumberFieldPrimitive.ScrubAreaCursor>,
+  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.ScrubAreaCursor>
+>(({ className, ...props }, ref) => (
+  <NumberFieldPrimitive.ScrubAreaCursor
+    ref={ref}
+    className={cn("text-muted-foreground", className)}
+    {...props}
+  />
+))
+NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor"
+
+export {
+  NumberField,
+  NumberFieldGroup,
+  NumberFieldInput,
+  NumberFieldIncrement,
+  NumberFieldDecrement,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+}

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,15 +1,14 @@
 // @ts-nocheck
-
 "use client"
 
 import * as React from "react"
-import { PreviewCard as BasePreviewCard } from "@base-ui-components/react/preview-card"
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card"
 import { cn } from "@/lib/utils"
 
 const PreviewCard = BasePreviewCard.Root
 
 const PreviewCardTrigger = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Trigger>,
+  HTMLAnchorElement,
   React.ComponentProps<typeof BasePreviewCard.Trigger>
 >(({ className, ...props }, ref) => (
   <BasePreviewCard.Trigger
@@ -29,7 +28,7 @@ PreviewCardTrigger.displayName = "PreviewCardTrigger"
 const PreviewCardPortal = BasePreviewCard.Portal
 
 const PreviewCardBackdrop = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Backdrop>,
+  React.ComponentRef<typeof BasePreviewCard.Backdrop>,
   React.ComponentProps<typeof BasePreviewCard.Backdrop>
 >(({ className, ...props }, ref) => (
   <BasePreviewCard.Backdrop
@@ -45,7 +44,7 @@ const PreviewCardBackdrop = React.forwardRef<
 PreviewCardBackdrop.displayName = "PreviewCardBackdrop"
 
 const PreviewCardPositioner = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Positioner>,
+  React.ComponentRef<typeof BasePreviewCard.Positioner>,
   React.ComponentProps<typeof BasePreviewCard.Positioner>
 >(({ className, sideOffset = 8, ...props }, ref) => (
   <BasePreviewCard.Positioner
@@ -58,18 +57,18 @@ const PreviewCardPositioner = React.forwardRef<
 PreviewCardPositioner.displayName = "PreviewCardPositioner"
 
 const PreviewCardPopup = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Popup>,
+  React.ComponentRef<typeof BasePreviewCard.Popup>,
   React.ComponentProps<typeof BasePreviewCard.Popup>
 >(({ className, ...props }, ref) => (
   <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}
@@ -78,7 +77,7 @@ const PreviewCardPopup = React.forwardRef<
 PreviewCardPopup.displayName = "PreviewCardPopup"
 
 const PreviewCardArrow = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Arrow>,
+  React.ComponentRef<typeof BasePreviewCard.Arrow>,
   React.ComponentProps<typeof BasePreviewCard.Arrow> & {
     children?: React.ReactNode
   }
@@ -99,7 +98,7 @@ const PreviewCardArrow = React.forwardRef<
 PreviewCardArrow.displayName = "PreviewCardArrow"
 
 const PreviewCardContent = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Popup>,
+  React.ComponentRef<typeof BasePreviewCard.Popup>,
   React.ComponentProps<typeof BasePreviewCard.Popup>
 >(({ className, children, ...props }, ref) => (
   <PreviewCardPortal>
@@ -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/select/select.tsx

@@ -2,7 +2,7 @@
 "use client"
 
 import * as React from "react"
-import { Select as SelectPrimitive } from "@base-ui-components/react/select"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
 import { cn } from "@/lib/utils"
 import { Check, ChevronDown } from "lucide-react"
 
@@ -15,7 +15,7 @@ const SelectValue = SelectPrimitive.Value
 
 // Optimized SelectTrigger with better type safety and performance
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
     readonly children?: React.ReactNode
   }
@@ -38,7 +38,7 @@ SelectTrigger.displayName = "SelectTrigger"
 
 // Optimized SelectContent with better positioning and performance
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Popup>,
+  React.ComponentRef<typeof SelectPrimitive.Popup>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {
     readonly position?: "item-aligned" | "popper"
     readonly sideOffset?: number
@@ -74,7 +74,7 @@ SelectContent.displayName = "SelectContent"
 
 // Add scroll arrows for better UX with large lists
 const SelectScrollUpArrow = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpArrow>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollUpArrow>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpArrow>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpArrow
@@ -91,7 +91,7 @@ const SelectScrollUpArrow = React.forwardRef<
 SelectScrollUpArrow.displayName = "SelectScrollUpArrow"
 
 const SelectScrollDownArrow = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownArrow>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollDownArrow>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownArrow>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownArrow
@@ -109,7 +109,7 @@ SelectScrollDownArrow.displayName = "SelectScrollDownArrow"
 
 // Optimized SelectLabel with better accessibility
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.GroupLabel>,
+  React.ComponentRef<typeof SelectPrimitive.GroupLabel>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.GroupLabel
@@ -122,7 +122,7 @@ SelectLabel.displayName = "SelectLabel"
 
 // Optimized SelectItem with conditional indicator and better type safety
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
     readonly inset?: boolean
     readonly showIndicator?: boolean
@@ -186,7 +186,7 @@ SelectItem.displayName = "SelectItem"
 
 // Optimized SelectSeparator
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator

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 }