{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"number-field","type":"registry:ui","title":"Number Field","description":"","dependencies":["@base-ui/react","class-variance-authority"],"registryDependencies":["label"],"files":[{"path":"number-field.tsx","type":"registry:ui","content":"\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport { createContext, useContext, useId } from \"react\"\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst NumberFieldContext = createContext<{\n  fieldId: string\n  size: \"sm\" | \"default\" | \"lg\"\n} | null>(null)\n\nconst numberFieldGroupVariants = cva(\n  \"relative flex w-full justify-between border border-input data-disabled:pointer-events-none data-disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-within:has-aria-invalid:border-destructive focus-within:has-aria-invalid:ring-destructive/20 dark:focus-within:has-aria-invalid:ring-destructive/40 rounded-3xl bg-transparent dark:bg-input/30 transition-colors focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-3\",\n  {\n    variants: {\n      size: {\n        sm: \"h-7 text-sm\",\n        default: \"h-8 text-sm\",\n        lg: \"h-9 text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nconst numberFieldButtonVariants = cva(\n  \"relative flex shrink-0 cursor-pointer items-center justify-center transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n  {\n    variants: {\n      size: {\n        sm: \"px-1.5 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-3.5 [&_svg:not([class*='size-'])]:size-3.5 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-3 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-3.5\",\n        default:\n          \"px-2 ([class*='size-'])]:size-4 ([class*='size-'])]:size-4 [&_svg:not([class*='size-'])]:size-4 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5\",\n        lg: \"px-2.5 ([class*='size-'])]:size-4 ([class*='size-'])]:size-4 [&_svg:not([class*='size-'])]:size-4 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nconst numberFieldInputVariants = cva(\n  \"w-full min-w-0 flex-1 bg-transparent text-center tabular-nums outline-none\",\n  {\n    variants: {\n      size: {\n        sm: \"px-2 py-0.5\",\n        default: \"px-2.5 py-1\",\n        lg: \"px-2.5 py-1.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nfunction NumberField({\n  id,\n  className,\n  size = \"default\",\n  ...props\n}: NumberFieldPrimitive.Root.Props &\n  VariantProps<typeof numberFieldGroupVariants>) {\n  const generatedId = useId()\n  const fieldId = id ?? generatedId\n  const sizeValue = size ?? \"default\"\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId, size: sizeValue }}>\n      <NumberFieldPrimitive.Root\n        className={cn(\"flex w-full flex-col items-start gap-2\", className)}\n        data-size={sizeValue}\n        data-slot=\"number-field\"\n        id={fieldId}\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  )\n}\n\nfunction NumberFieldGroup({\n  className,\n  size: sizeProp,\n  ...props\n}: NumberFieldPrimitive.Group.Props &\n  Partial<VariantProps<typeof numberFieldGroupVariants>>) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error(\n      \"NumberFieldGroup must be used within a NumberField component.\"\n    )\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(numberFieldGroupVariants({ size }), className)}\n      data-slot=\"number-field-group\"\n      {...props}\n    />\n  )\n}\n\nfunction NumberFieldDecrement({\n  className,\n  size: sizeProp,\n  children,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props &\n  Partial<VariantProps<typeof numberFieldButtonVariants>> & {\n    children?: React.ReactNode\n  }) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error(\n      \"NumberFieldDecrement must be used within a NumberField component.\"\n    )\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        numberFieldButtonVariants({ size }),\n        \"rounded-s-3xl border-e-0\",\n        className\n      )}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"MinusIcon\"\n          tabler=\"IconMinus\"\n          hugeicons=\"MinusSignIcon\"\n          phosphor=\"MinusIcon\"\n          remixicon=\"RiSubtractLine\"\n        />\n      )}\n    </NumberFieldPrimitive.Decrement>\n  )\n}\n\nfunction NumberFieldIncrement({\n  className,\n  size: sizeProp,\n  children,\n  ...props\n}: NumberFieldPrimitive.Increment.Props &\n  Partial<VariantProps<typeof numberFieldButtonVariants>> & {\n    children?: ReactNode\n  }) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error(\n      \"NumberFieldIncrement must be used within a NumberField component.\"\n    )\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\n        numberFieldButtonVariants({ size }),\n        \"rounded-e-3xl border-s-0\",\n        className\n      )}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"PlusIcon\"\n          tabler=\"IconPlus\"\n          hugeicons=\"PlusSignIcon\"\n          phosphor=\"PlusIcon\"\n          remixicon=\"RiAddLine\"\n        />\n      )}\n    </NumberFieldPrimitive.Increment>\n  )\n}\n\nfunction NumberFieldInput({\n  className,\n  size: sizeProp,\n  ...props\n}: NumberFieldPrimitive.Input.Props &\n  Partial<VariantProps<typeof numberFieldInputVariants>>) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error(\n      \"NumberFieldInput must be used within a NumberField component.\"\n    )\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(numberFieldInputVariants({ size }), className)}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  )\n}\n\nfunction NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldPrimitive.ScrubArea.Props & {\n  label: string\n}) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error(\n      \"NumberFieldScrubArea must be used within a NumberField component for accessibility.\"\n    )\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cn(\"flex cursor-ew-resize\", className)}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  )\n}\n\nfunction CursorGrowIcon(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\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\" />\n    </svg>\n  )\n}\n\nexport {\n  NumberField,\n  NumberFieldScrubArea,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldGroup,\n  NumberFieldInput,\n}","target":"components/neui/number-field.tsx"}]}