{"version":3,"file":"number-field.cjs","sources":["../../../components/number-field/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, createContext, useContext, useId } from 'react';\nimport { MinusIcon, PlusIcon } from '~/icons';\nimport { useFieldContext } from '../field';\nimport { Label } from '../label';\nimport styles from './number-field.module.css';\n\nconst NumberFieldContext = createContext<{ fieldId: string } | null>(null);\n\nfunction NumberFieldRoot({\n  className,\n  children,\n  id,\n  required,\n  ...props\n}: NumberFieldPrimitive.Root.Props) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const fieldContext = useFieldContext();\n  const resolvedRequired = required ?? fieldContext?.required;\n\n  return (\n    <NumberFieldContext value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cx(styles.root, className)}\n        id={fieldId}\n        required={resolvedRequired}\n        data-slot='number-field'\n        {...props}\n      >\n        {children ?? (\n          <NumberFieldPrimitive.Group\n            className={styles.group}\n            data-slot='number-field-group'\n          >\n            <NumberFieldDecrement />\n            <NumberFieldInput />\n            <NumberFieldIncrement />\n          </NumberFieldPrimitive.Group>\n        )}\n      </NumberFieldPrimitive.Root>\n    </NumberFieldContext>\n  );\n}\nNumberFieldRoot.displayName = 'NumberField';\n\nfunction NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props) {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cx(styles.group, className)}\n      data-slot='number-field-group'\n      {...props}\n    />\n  );\n}\nNumberFieldGroup.displayName = 'NumberField.Group';\n\nfunction NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props) {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cx(styles.input, className)}\n      data-slot='number-field-input'\n      {...props}\n    />\n  );\n}\nNumberFieldInput.displayName = 'NumberField.Input';\n\nfunction NumberFieldDecrement({\n  className,\n  children,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props) {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cx(styles.decrement, className)}\n      data-slot='number-field-decrement'\n      {...props}\n    >\n      {children ?? (\n        <MinusIcon\n          width={12}\n          height={12}\n          data-slot='number-field-decrement-icon'\n        />\n      )}\n    </NumberFieldPrimitive.Decrement>\n  );\n}\nNumberFieldDecrement.displayName = 'NumberField.Decrement';\n\nfunction NumberFieldIncrement({\n  className,\n  children,\n  ...props\n}: NumberFieldPrimitive.Increment.Props) {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cx(styles.increment, className)}\n      data-slot='number-field-increment'\n      {...props}\n    >\n      {children ?? (\n        <PlusIcon\n          width={12}\n          height={12}\n          data-slot='number-field-increment-icon'\n        />\n      )}\n    </NumberFieldPrimitive.Increment>\n  );\n}\nNumberFieldIncrement.displayName = 'NumberField.Increment';\n\nexport interface NumberFieldScrubAreaProps\n  extends NumberFieldPrimitive.ScrubArea.Props {\n  label: string;\n}\n\nfunction NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldScrubAreaProps) {\n  const context = useContext(NumberFieldContext);\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cx(styles['scrub-area'], className)}\n      data-slot='number-field-scrub-area'\n      {...props}\n    >\n      <Label\n        className={styles['scrub-area-label']}\n        htmlFor={context?.fieldId}\n        data-slot='number-field-scrub-area-label'\n      >\n        {label}\n      </Label>\n      <NumberFieldScrubAreaCursor className={styles['scrub-area-cursor']}>\n        <CursorGrowIcon />\n      </NumberFieldScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\nNumberFieldScrubArea.displayName = 'NumberField.ScrubArea';\n\nfunction NumberFieldScrubAreaCursor(\n  props: NumberFieldPrimitive.ScrubAreaCursor.Props\n) {\n  return (\n    <NumberFieldPrimitive.ScrubAreaCursor\n      data-slot='number-field-scrub-area-cursor'\n      {...props}\n    />\n  );\n}\nNumberFieldScrubAreaCursor.displayName = 'NumberField.ScrubAreaCursor';\n\nfunction CursorGrowIcon(props: ComponentProps<'svg'>) {\n  return (\n    <svg\n      aria-hidden='true'\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      data-slot='number-field-scrub-area-cursor-icon'\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 const NumberField = Object.assign(NumberFieldRoot, {\n  Group: NumberFieldGroup,\n  Input: NumberFieldInput,\n  Decrement: NumberFieldDecrement,\n  Increment: NumberFieldIncrement,\n  ScrubArea: NumberFieldScrubArea,\n  ScrubAreaCursor: NumberFieldScrubAreaCursor\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAUA;AAEA;AAOE;AACA;AACA;AACA;AAEA;AAsBF;AACA;AAEA;;AAWA;AACA;AAEA;;AAWA;AACA;AAEA;AAKE;AAeF;AACA;AAEA;AAKE;AAeF;AACA;AAOA;AAKE;;AAoBF;AACA;AAEA;;AASA;AACA;AAEA;AACE;AAeF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}