@dinachi/cli 0.4.0 → 0.5.0

package/templates/drawer/drawer.tsx

@@ -0,0 +1,109 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { DrawerPreview as DrawerPrimitive } from "@base-ui/react/drawer"
+import { cn } from "@/lib/utils"
+
+const Drawer = DrawerPrimitive.Root
+const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerPortal = DrawerPrimitive.Portal
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerBackdrop = React.forwardRef<
+  React.ComponentRef<typeof DrawerPrimitive.Backdrop>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Backdrop>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Backdrop
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      "transition-opacity duration-200",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerBackdrop.displayName = "DrawerBackdrop"
+
+type DrawerSide = "top" | "right" | "bottom" | "left"
+
+const DrawerContent = React.forwardRef<
+  React.ComponentRef<typeof DrawerPrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Popup> & {
+    side?: DrawerSide
+  }
+>(({ className, side = "right", children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerBackdrop />
+    <DrawerPrimitive.Popup
+      ref={ref}
+      className={cn(
+        "fixed z-50 flex flex-col gap-4 border bg-background p-6 shadow-lg transition duration-200",
+        side === "top" &&
+          "inset-x-0 top-0 border-b data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full",
+        side === "bottom" &&
+          "inset-x-0 bottom-0 border-t data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full",
+        side === "left" &&
+          "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",
+        side === "right" &&
+          "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
+        className
+      )}
+      {...props}
+    >
+      <DrawerPrimitive.Content className="size-full overflow-y-auto">
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Popup>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)} {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 sm:flex-row sm:justify-end", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  DrawerHeader,
+  DrawerFooter,
+}

package/templates/drawer/index.ts

@@ -0,0 +1,12 @@
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  DrawerHeader,
+  DrawerFooter,
+} from "./drawer"

package/templates/fieldset/fieldset.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset"
+import { cn } from "@/lib/utils"
+
+const Fieldset = React.forwardRef<
+  React.ComponentRef<typeof FieldsetPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof FieldsetPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <FieldsetPrimitive.Root
+    ref={ref}
+    className={cn("space-y-3 rounded-lg border p-4", className)}
+    {...props}
+  />
+))
+Fieldset.displayName = "Fieldset"
+
+const FieldsetLegend = React.forwardRef<
+  React.ComponentRef<typeof FieldsetPrimitive.Legend>,
+  React.ComponentPropsWithoutRef<typeof FieldsetPrimitive.Legend>
+>(({ className, ...props }, ref) => (
+  <FieldsetPrimitive.Legend
+    ref={ref}
+    className={cn("px-1 text-sm font-medium", className)}
+    {...props}
+  />
+))
+FieldsetLegend.displayName = "FieldsetLegend"
+
+export { Fieldset, FieldsetLegend }

package/templates/fieldset/index.ts

@@ -0,0 +1 @@
+export { Fieldset, FieldsetLegend } from "./fieldset"

package/templates/menu/index.ts

@@ -0,0 +1,17 @@
+export {
+  Menu,
+  MenuTrigger,
+  MenuPortal,
+  MenuPositioner,
+  MenuContent,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuLabel,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubContent,
+} from "./menu"

package/templates/menu/menu.tsx

@@ -0,0 +1,282 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { useRender } from "@base-ui/react/use-render"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Menu = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Root>,
+  React.ComponentProps<typeof MenuPrimitive.Root>
+>(({ children, ...props }, ref) => {
+  const element = useRender({
+    render: <MenuPrimitive.Root>{children}</MenuPrimitive.Root>,
+    props,
+    ref,
+  })
+
+  return element
+})
+Menu.displayName = "Menu"
+
+const MenuTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof MenuPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+MenuTrigger.displayName = "MenuTrigger"
+
+const MenuPortal = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Portal>,
+  React.ComponentProps<typeof MenuPrimitive.Portal>
+>(({ ...props }, ref) => {
+  const element = useRender({
+    render: <MenuPrimitive.Portal />,
+    props,
+    ref,
+  })
+
+  return element
+})
+MenuPortal.displayName = "MenuPortal"
+
+const MenuPositioner = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Positioner>,
+  React.ComponentProps<typeof MenuPrimitive.Positioner>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Positioner
+    ref={ref}
+    className={cn("outline-none", className)}
+    sideOffset={6}
+    {...props}
+  />
+))
+MenuPositioner.displayName = "MenuPositioner"
+
+const MenuContent = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Popup>,
+  React.ComponentProps<typeof MenuPrimitive.Popup>
+>(({ className, ...props }, ref) => (
+  <MenuPortal>
+    <MenuPositioner>
+      <MenuPrimitive.Popup
+        ref={ref}
+        className={cn(
+          "z-50 min-w-[10rem] overflow-hidden rounded-md border bg-popover p-1 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}
+      />
+    </MenuPositioner>
+  </MenuPortal>
+))
+MenuContent.displayName = "MenuContent"
+
+const MenuItem = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Item>,
+  React.ComponentProps<typeof MenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenuItem.displayName = "MenuItem"
+
+const MenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.CheckboxItem>,
+  React.ComponentProps<typeof MenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenuPrimitive.CheckboxItem
+    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",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      {checked && <Check className="h-4 w-4" />}
+    </span>
+    {children}
+  </MenuPrimitive.CheckboxItem>
+))
+MenuCheckboxItem.displayName = "MenuCheckboxItem"
+
+const MenuRadioGroup = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.RadioGroup>,
+  React.ComponentProps<typeof MenuPrimitive.RadioGroup>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.RadioGroup ref={ref} className={cn(className)} {...props} />
+))
+MenuRadioGroup.displayName = "MenuRadioGroup"
+
+const MenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.RadioItem>,
+  React.ComponentProps<typeof MenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenuPrimitive.RadioItem
+    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",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <Circle className="h-2 w-2 fill-current data-[checked]:block data-[unchecked]:hidden" />
+    </span>
+    {children}
+  </MenuPrimitive.RadioItem>
+))
+MenuRadioItem.displayName = "MenuRadioItem"
+
+const MenuLabel = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.GroupLabel>,
+  React.ComponentProps<typeof MenuPrimitive.GroupLabel> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenuPrimitive.GroupLabel
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+))
+MenuLabel.displayName = "MenuLabel"
+
+const MenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Separator>,
+  React.ComponentProps<typeof MenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+MenuSeparator.displayName = "MenuSeparator"
+
+const MenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+    {...props}
+  />
+)
+MenuShortcut.displayName = "MenuShortcut"
+
+const MenuSub = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Root>,
+  React.ComponentProps<typeof MenuPrimitive.Root>
+>(({ children, ...props }, ref) => {
+  const element = useRender({
+    render: <MenuPrimitive.Root>{children}</MenuPrimitive.Root>,
+    props,
+    ref,
+  })
+
+  return element
+})
+MenuSub.displayName = "MenuSub"
+
+const MenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.SubmenuTrigger>,
+  React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenuPrimitive.SubmenuTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenuPrimitive.SubmenuTrigger>
+))
+MenuSubTrigger.displayName = "MenuSubTrigger"
+
+const MenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Popup>,
+  React.ComponentProps<typeof MenuPrimitive.Popup>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Portal>
+    <MenuPrimitive.Positioner className="outline-none" alignOffset={-4} sideOffset={8}>
+      <MenuPrimitive.Popup
+        ref={ref}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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}
+      />
+    </MenuPrimitive.Positioner>
+  </MenuPrimitive.Portal>
+))
+MenuSubContent.displayName = "MenuSubContent"
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuPortal,
+  MenuPositioner,
+  MenuContent,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuLabel,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubContent,
+}

package/templates/menubar/menubar.tsx

@@ -1,12 +1,12 @@
 // @ts-nocheck
 "use client"
+
 import * as React from "react"
 import { Menubar as BaseMenubar } from "@base-ui/react/menubar"
 import { Menu } from "@base-ui/react/menu"
+import { useRender } from "@base-ui/react/use-render"
 import { cn } from "@/lib/utils"
 import { Check, ChevronRight, Circle } from "lucide-react"
-import { useRender } from "@base-ui/react/use-render"
-
 
 const Menubar = React.forwardRef<
   React.ComponentRef<typeof BaseMenubar>,
@@ -37,7 +37,7 @@ const MenubarMenu = React.forwardRef<
 MenubarMenu.displayName = "MenubarMenu"
 
 const MenubarTrigger = React.forwardRef<
-  React.ComponentRef<typeof Menu.Trigger>,
+  HTMLButtonElement,
   React.ComponentProps<typeof Menu.Trigger>
 >(({ className, ...props }, ref) => (
   <Menu.Trigger
@@ -223,11 +223,11 @@ const MenubarShortcut = ({
 MenubarShortcut.displayName = "MenubarShortcut"
 
 const MenubarSub = React.forwardRef<
-  React.ComponentRef<typeof Menu.Root>,
-  React.ComponentProps<typeof Menu.Root>
+  React.ComponentRef<typeof Menu.SubmenuRoot>,
+  React.ComponentProps<typeof Menu.SubmenuRoot>
 >(({ children, ...props }, ref) => {
   const element = useRender({
-    render: <Menu.Root>{children}</Menu.Root>,
+    render: <Menu.SubmenuRoot>{children}</Menu.SubmenuRoot>,
     props,
     ref,
   });
@@ -300,4 +300,4 @@ export {
   MenubarSub,
   MenubarSubTrigger,
   MenubarSubContent,
-} 
+} 

package/templates/meter/index.ts

@@ -0,0 +1 @@
+export { Meter, MeterTrack, MeterIndicator, MeterLabel, MeterValue } from "./meter"

package/templates/meter/meter.tsx

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

package/templates/number-field/index.ts

@@ -0,0 +1,9 @@
+export {
+  NumberField,
+  NumberFieldGroup,
+  NumberFieldInput,
+  NumberFieldIncrement,
+  NumberFieldDecrement,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from "./number-field"

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,
+}