{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-field",
  "type": "registry:ui",
  "title": "Number Field",
  "description": "A customizable number field component",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "classes"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/ui/number-field/index.tsx",
      "content": "\"use client\";\r\n\r\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\r\n\r\nimport { cn } from \"@/lib/classes\";\r\n\r\ninterface NumberFieldProps extends NumberFieldPrimitive.Root.Props {}\r\n\r\nfunction NumberField({ className, ...props }: NumberFieldProps) {\r\n  return (\r\n    <NumberFieldPrimitive.Root\r\n      className={cn(\r\n        \"flex w-full flex-col items-start gap-2 max-w-[200px]\",\r\n        className\r\n      )}\r\n      data-slot=\"number-field\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface NumberFieldGroupProps extends NumberFieldPrimitive.Group.Props {}\r\n\r\nfunction NumberFieldGroup({ className, ...props }: NumberFieldGroupProps) {\r\n  return (\r\n    <NumberFieldPrimitive.Group\r\n      className={cn(\r\n        \"relative flex w-full rounded-lg border border-input bg-background dark:bg-input/32 text-sm shadow-xs transition-colors focus-within:border-ring focus-within:ring-[1px] focus-within:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64\",\r\n        className\r\n      )}\r\n      data-slot=\"number-field-group\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface NumberFieldInputProps extends NumberFieldPrimitive.Input.Props {}\r\n\r\nfunction NumberFieldInput({ className, ...props }: NumberFieldInputProps) {\r\n  return (\r\n    <NumberFieldPrimitive.Input\r\n      className={cn(\r\n        \"flex-1 w-full min-w-0 bg-transparent px-3 py-1.5 text-center outline-none tabular-nums\",\r\n        className\r\n      )}\r\n      data-slot=\"number-field-input\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface NumberFieldDecrementProps\r\n  extends NumberFieldPrimitive.Decrement.Props {}\r\n\r\nfunction NumberFieldDecrement({\r\n  className,\r\n  ...props\r\n}: NumberFieldDecrementProps) {\r\n  return (\r\n    <NumberFieldPrimitive.Decrement\r\n      className={cn(\r\n        \"flex shrink-0 cursor-pointer items-center justify-center hover:bg-accent rounded-s-lg px-3 transition-colors disabled:pointer-events-none disabled:opacity-64 disabled:cursor-not-allowed\",\r\n        className\r\n      )}\r\n      data-slot=\"number-field-decrement\"\r\n      {...props}\r\n    >\r\n      <MinusIcon />\r\n    </NumberFieldPrimitive.Decrement>\r\n  );\r\n}\r\n\r\ninterface NumberFieldIncrementProps\r\n  extends NumberFieldPrimitive.Increment.Props {}\r\n\r\nfunction NumberFieldIncrement({\r\n  className,\r\n  ...props\r\n}: NumberFieldIncrementProps) {\r\n  return (\r\n    <NumberFieldPrimitive.Increment\r\n      className={cn(\r\n        \"flex shrink-0 cursor-pointer items-center justify-center hover:bg-accent rounded-e-lg px-3 transition-colors disabled:pointer-events-none disabled:opacity-64 disabled:cursor-not-allowed\",\r\n        className\r\n      )}\r\n      data-slot=\"number-field-increment\"\r\n      {...props}\r\n    >\r\n      <PlusIcon />\r\n    </NumberFieldPrimitive.Increment>\r\n  );\r\n}\r\n\r\nfunction NumberFieldScrubArea({\r\n  className,\r\n  children,\r\n  ...props\r\n}: NumberFieldPrimitive.ScrubArea.Props) {\r\n  return (\r\n    <NumberFieldPrimitive.ScrubArea\r\n      className={cn(\"flex cursor-ew-resize\", className)}\r\n      data-slot=\"number-field-scrub-area\"\r\n      {...props}\r\n    >\r\n      {children}\r\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\r\n        <CursorGrowIcon />\r\n      </NumberFieldPrimitive.ScrubAreaCursor>\r\n    </NumberFieldPrimitive.ScrubArea>\r\n  );\r\n}\r\nfunction CursorGrowIcon(props: React.ComponentProps<\"svg\">) {\r\n  return (\r\n    <svg\r\n      fill=\"black\"\r\n      height=\"14\"\r\n      stroke=\"white\"\r\n      viewBox=\"0 0 24 14\"\r\n      width=\"26\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      {...props}\r\n    >\r\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\nfunction PlusIcon(props: React.ComponentProps<\"svg\">) {\r\n  return (\r\n    <svg\r\n      width=\"10\"\r\n      height=\"10\"\r\n      viewBox=\"0 0 10 10\"\r\n      fill=\"none\"\r\n      stroke=\"currentcolor\"\r\n      strokeWidth=\"1.6\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      {...props}\r\n    >\r\n      <path d=\"M0 5H5M10 5H5M5 5V0M5 5V10\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\nfunction MinusIcon(props: React.ComponentProps<\"svg\">) {\r\n  return (\r\n    <svg\r\n      width=\"10\"\r\n      height=\"10\"\r\n      viewBox=\"0 0 10 10\"\r\n      fill=\"none\"\r\n      stroke=\"currentcolor\"\r\n      strokeWidth=\"1.6\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      {...props}\r\n    >\r\n      <path d=\"M0 5H10\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\nexport {\r\n  NumberField,\r\n  NumberFieldGroup,\r\n  NumberFieldInput,\r\n  NumberFieldDecrement,\r\n  NumberFieldIncrement,\r\n  NumberFieldScrubArea,\r\n};\r\n",
      "type": "registry:ui",
      "target": "components/ui/number-field.tsx"
    }
  ]
}