{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-field",
  "type": "registry:ui",
  "title": "Number Field",
  "description": "Number input with press-depth steppers, built on Base UI.",
  "dependencies": [
    "@base-ui/react",
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://seamui.dev/r/utils.json",
    "https://seamui.dev/r/motion.json",
    "https://seamui.dev/r/button.json"
  ],
  "files": [
    {
      "path": "registry/seam/ui/number-field.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\"\nimport { Minus, Plus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"./button\"\n\n// Steppers dogfood the foundation: a ghost icon Button (base classes, focus\n// ring, disabled + press depth + haptic tap for free). Only the shape is\n// overridden — square inner corners and a divider so the pair reads as one\n// control in the well.\nconst stepperClass = \"text-muted-foreground size-10 rounded-none border-input\"\n\nfunction NumberField(props: React.ComponentProps<typeof BaseNumberField.Root>) {\n  return <BaseNumberField.Root data-slot=\"number-field\" {...props} />\n}\n\n// The debossed well the value + steppers sit in (seamui entry-field language).\nfunction NumberFieldGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseNumberField.Group>) {\n  return (\n    <BaseNumberField.Group\n      data-slot=\"number-field-group\"\n      className={cn(\n        \"inline-flex items-center rounded-md squircle border border-border/60 bg-muted shadow-well\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// The editable value. Spread onto the real <input>, so this is where a\n// consumer's `aria-label`/`id`/`name`/`placeholder` belong.\nfunction NumberFieldInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseNumberField.Input>) {\n  return (\n    <BaseNumberField.Input\n      data-slot=\"number-field-input\"\n      className={cn(\n        \"h-10 w-16 bg-transparent text-center text-sm tabular-nums outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NumberFieldDecrement({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseNumberField.Decrement>) {\n  return (\n    <BaseNumberField.Decrement\n      data-slot=\"number-field-decrement\"\n      render={\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className={cn(stepperClass, \"rounded-l-md border-r\", className)}\n        />\n      }\n      aria-label=\"Decrease\"\n      {...props}\n    >\n      {children ?? <Minus />}\n    </BaseNumberField.Decrement>\n  )\n}\n\nfunction NumberFieldIncrement({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseNumberField.Increment>) {\n  return (\n    <BaseNumberField.Increment\n      data-slot=\"number-field-increment\"\n      render={\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className={cn(stepperClass, \"rounded-r-md border-l\", className)}\n        />\n      }\n      aria-label=\"Increase\"\n      {...props}\n    >\n      {children ?? <Plus />}\n    </BaseNumberField.Increment>\n  )\n}\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/number-field.tsx"
    }
  ]
}