{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "A number field with the small up and down arrows beside it, stepped by clicks, held arrows and the keyboard.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme"
  ],
  "files": [
    {
      "path": "registry/macos/ui/stepper.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// A macOS stepper: a number field with the small up and down arrows beside\n// it. The arrow keys, Page Up and Page Down also step the value, and\n// holding an arrow keeps stepping. Built on Base UI's Number Field, so it\n// takes min, max, step, format and the rest.\nfunction Stepper({\n  className,\n  size = \"default\",\n  ...props\n}: NumberFieldPrimitive.Root.Props & { size?: \"sm\" | \"default\" }) {\n  return (\n    <NumberFieldPrimitive.Root\n      data-slot=\"stepper\"\n      data-size={size}\n      className={cn(\"group/stepper flex w-fit items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction StepperInput({ className, ...props }: NumberFieldPrimitive.Input.Props) {\n  return (\n    <NumberFieldPrimitive.Input\n      data-slot=\"stepper-input\"\n      className={cn(\n        \"h-6 w-14 min-w-0 rounded-[6px] bg-mac-field px-2 text-right text-mac-body font-medium text-mac-label tabular-nums shadow-[0_0_0_1px_var(--mac-field-border)] transition-[box-shadow] outline-none selection:bg-mac-accent/30 focus-visible:shadow-[0_0_0_1px_var(--mac-field-border),0_0_0_3.5px_color-mix(in_srgb,var(--mac-accent)_50%,transparent),inset_0_0_0_1px_color-mix(in_srgb,var(--mac-accent)_50%,transparent)] data-disabled:opacity-50 group-data-[size=sm]/stepper:h-5 group-data-[size=sm]/stepper:w-11 group-data-[size=sm]/stepper:rounded-[5px] group-data-[size=sm]/stepper:px-1.5 group-data-[size=sm]/stepper:text-mac-subheadline\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst arrowClassName =\n  \"flex min-h-0 flex-1 cursor-default items-center justify-center outline-none active:bg-mac-control-pressed disabled:text-mac-label-tertiary [&_svg]:size-2.5 group-data-[size=sm]/stepper:[&_svg]:size-2\"\n\n// The up and down arrows, on a capsule.\nfunction StepperButtons({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"stepper-buttons\"\n      className={cn(\n        \"flex h-[22px] w-[13px] shrink-0 flex-col overflow-hidden rounded-full bg-mac-control text-mac-label group-data-[disabled]/stepper:opacity-50 group-data-[size=sm]/stepper:h-[18px] group-data-[size=sm]/stepper:w-[11px]\",\n        className\n      )}\n      {...props}\n    >\n      <NumberFieldPrimitive.Increment aria-label=\"Increase\" className={arrowClassName}>\n        <ChevronUpIcon strokeWidth={3} />\n      </NumberFieldPrimitive.Increment>\n      <NumberFieldPrimitive.Decrement aria-label=\"Decrease\" className={arrowClassName}>\n        <ChevronDownIcon strokeWidth={3} />\n      </NumberFieldPrimitive.Decrement>\n    </div>\n  )\n}\n\nexport { Stepper, StepperButtons, StepperInput }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}