@spark-ui/components 14.0.0-beta.1 → 14.0.0

package/dist/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/input/InputGroupContext.ts","../../src/input/InputClearButton.tsx","../../src/input/InputGroup.styles.ts","../../src/input/InputGroup.tsx","../../src/input/InputAddon.styles.ts","../../src/input/InputAddon.tsx","../../src/input/InputLeadingAddon.tsx","../../src/input/InputIcon.tsx","../../src/input/InputLeadingIcon.tsx","../../src/input/InputTrailingAddon.tsx","../../src/input/InputTrailingIcon.tsx","../../src/input/Input.styles.ts","../../src/input/Input.tsx","../../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext.Provider value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext.Provider>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! mr-[-1px] rounded-l-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! ml-[-1px] rounded-r-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-lg'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-lg'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"names":["InputGroupContext","createContext","useInputGroup","useContext","Root","className","tabIndex","onClick","inline","ref","others","onClear","hasTrailingIcon","handleClick","event","jsx","cx","Icon","DeleteOutline","InputClearButton","inputGroupStyles","cva","InputGroup","childrenProp","stateProp","disabledProp","readOnlyProp","forwardedRef","getElementId","element","findElement","values","children","child","Children","isValidElement","input","props","inputRef","useRef","onClearRef","useMergeRefs","value","onChange","useCombinedState","field","useFormFieldControl","state","disabled","readOnly","leadingAddon","leadingIcon","clearButton","trailingIcon","trailingAddon","hasLeadingAddon","hasTrailingAddon","hasLeadingIcon","hasClearButton","handleChange","handleClear","useCallback","current","useMemo","useEffect","inputRefValue","jsxs","cloneElement","inputAddonStyles","InputAddon","asChildProp","isRawText","asChild","Component","Slot","design","isInactive","InputLeadingAddon","InputIcon","intent","InputLeadingIcon","InputTrailingAddon","InputTrailingIcon","inputStyles","onValueChange","onKeyDown","group","id","name","isInvalid","isRequired","description","handleKeyDown","Input"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/input/InputGroupContext.ts","../../src/input/InputClearButton.tsx","../../src/input/InputGroup.styles.ts","../../src/input/InputGroup.tsx","../../src/input/InputAddon.styles.ts","../../src/input/InputAddon.tsx","../../src/input/InputLeadingAddon.tsx","../../src/input/InputIcon.tsx","../../src/input/InputLeadingIcon.tsx","../../src/input/InputTrailingAddon.tsx","../../src/input/InputTrailingIcon.tsx","../../src/input/Input.styles.ts","../../src/input/Input.tsx","../../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext.Provider value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext.Provider>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! mr-[-1px] rounded-l-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! ml-[-1px] rounded-r-lg')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-lg'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-lg'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"names":["InputGroupContext","createContext","useInputGroup","useContext","Root","className","tabIndex","onClick","inline","ref","others","onClear","hasTrailingIcon","handleClick","event","jsx","cx","Icon","DeleteOutline","InputClearButton","inputGroupStyles","cva","InputGroup","childrenProp","stateProp","disabledProp","readOnlyProp","forwardedRef","getElementId","element","findElement","values","children","child","Children","isValidElement","input","props","inputRef","useRef","onClearRef","useMergeRefs","value","onChange","useCombinedState","field","useFormFieldControl","state","disabled","readOnly","leadingAddon","leadingIcon","clearButton","trailingIcon","trailingAddon","hasLeadingAddon","hasTrailingAddon","hasLeadingIcon","hasClearButton","handleChange","handleClear","useCallback","current","useMemo","useEffect","inputRefValue","jsxs","cloneElement","inputAddonStyles","InputAddon","asChildProp","isRawText","asChild","Component","Slot","design","isInactive","InputLeadingAddon","InputIcon","intent","InputLeadingIcon","InputTrailingAddon","InputTrailingIcon","inputStyles","onValueChange","onKeyDown","group","id","name","isInvalid","isRequired","description","handleKeyDown","Input"],"mappings":"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"}

package/dist/input/index.mjs

@@ -1,12 +1,12 @@
 import { jsx as l, jsxs as F } from "react/jsx-runtime";
 import { DeleteOutline as le } from "@spark-ui/icons/DeleteOutline";
-import { a as g, c as E } from "../index-BmAFn37q.mjs";
-import { I as K } from "../Icon-D1RueiPY.mjs";
+import { cx as g, cva as E } from "class-variance-authority";
+import { I as K } from "../Icon-Ck-dhfLd.mjs";
 import { createContext as ie, useContext as de, Children as P, isValidElement as ue, useRef as M, useCallback as ce, useMemo as pe, useEffect as fe, cloneElement as ge } from "react";
-import { useFormFieldControl as H } from "../form-field/index.mjs";
+import { useFormFieldControl as H } from "@spark-ui/components/form-field";
 import { useCombinedState as me } from "@spark-ui/hooks/use-combined-state";
 import { useMergeRefs as he } from "@spark-ui/hooks/use-merge-refs";
-import { a as J } from "../Slot-C98rL4yy.mjs";
+import { a as J } from "../Slot-D2Bbf8Gw.mjs";
 const Q = ie(null), v = () => de(Q) || { isStandalone: !0 }, U = ({
   className: n,
   tabIndex: e = -1,

package/dist/input-otp/index.d.mts

@@ -0,0 +1,14 @@
+import { InputOTP as Root } from './InputOTP';
+import { InputOTPGroup } from './InputOTPGroup';
+import { InputOTPSeparator } from './InputOTPSeparator';
+import { InputOTPSlot } from './InputOTPSlot';
+export declare const InputOTP: typeof Root & {
+    Group: typeof InputOTPGroup;
+    Slot: typeof InputOTPSlot;
+    Separator: typeof InputOTPSeparator;
+};
+export { type InputOTPProps } from './InputOTP';
+export { type InputOTPGroupProps } from './InputOTPGroup';
+export { type InputOTPSlotProps } from './InputOTPSlot';
+export { type InputOTPSeparatorProps } from './InputOTPSeparator';
+export { inputOTPSlotStyles, inputOTPStyles, type InputOTPSlotStylesProps, type InputOTPStylesProps, } from './InputOTP.styles';

package/dist/input-otp/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),Z=require("../index-DnaHaH_0.js"),a=require("react"),ie=require("../form-field/index.js"),oe=require("../Icon-Bf0XrmiR.js"),ce=require("@spark-ui/icons/Minus"),L=a.createContext(null),le=()=>{const e=a.useContext(L);if(!e)throw new Error("InputOTP components must be used within InputOTP");return e},H=Z.cva(["relative","border-sm first:rounded-l-lg last:rounded-r-lg","size-sz-44","text-center text-body-1","text-on-surface","outline-hidden","transition-colors","flex items-center justify-center","data-[active=true]:ring-1","data-[active=true]:ring-inset","data-[active=true]:ring-l-2","data-[active=true]:border-focus","data-[active=true]:z-raised ring-focus","data-[disabled=true]:cursor-not-allowed","data-[disabled=true]:border-outline","data-[disabled=true]:bg-on-surface/dim-5","data-[disabled=true]:text-on-surface/dim-3"],{variants:{intent:{neutral:["bg-surface border-outline"],success:["border-success bg-success-container text-on-success-container"],alert:["border-alert bg-alert-container text-on-alert-container"],error:["border-error bg-error-container text-on-error-container"]}},defaultVariants:{intent:"neutral"}}),ue=H,A=({index:e,className:i,...t})=>{const c=le(),s=e??0,u=c.slots[s];if(!u)return null;const{char:b,isActive:v,hasFakeCaret:y}=u,I=!b&&!y&&c.placeholder;return f.jsxs("div",{className:H({intent:c.intent,className:i}),"data-active":v,"data-disabled":c.disabled,"data-valid":c.intent!=="error",...t,children:[f.jsx("span",{className:I?"text-on-surface/dim-3":"",children:c.type==="password"&&b?"•":b||(!y&&c.placeholder?c.placeholder:"")}),y&&f.jsx("span",{className:"pointer-events-none absolute inset-0 flex items-center justify-center","aria-hidden":"true",children:f.jsx("span",{className:"bg-on-surface animate-standalone-caret-blink h-sz-24 w-px"})})]})};A.displayName="InputOTP.Slot";const de="Backspace",pe="ArrowLeft",fe="ArrowUp",be="ArrowRight",xe="ArrowDown",me="e",ve=({maxLength:e,type:i,value:t,defaultValue:c,onValueChange:s,isValid:u,disabledProp:b,autoFocus:v,forceUppercase:y,filterKeys:O,pattern:I,placeholder:C,nameProp:V})=>{const z=a.useId(),r=a.useRef(null),B=a.useRef(null),l=ie.useFormFieldControl(),T=l.id??z,k=V??l.name,h=l.disabled??b,D=l.isInvalid??!u,W=l.isRequired??!1,Y=l.labelId,_=l.description,S=l.state,w=["success","alert","error"].includes(S??"")?S:D?"error":"neutral",P=t!==void 0?t:c,q=y?P.toUpperCase():P,[$,R]=a.useState(q),[E,M]=a.useState(!1),d=t!==void 0?t:$,x=Math.min(d.length,e-1);a.useEffect(()=>{r.current&&r.current.setSelectionRange(x,x)},[x,d.length,e]);const F=a.useMemo(()=>Array.from({length:e},(o,n)=>({char:d[n]||"",isActive:n===x&&E,hasFakeCaret:n===x&&!d[n]&&!h&&E})),[e,d,x,E,h]);a.useEffect(()=>{r.current&&t!==void 0&&(r.current.value=t)},[t]),a.useEffect(()=>{v&&r.current&&r.current.focus()},[v]);const N=o=>{let n=o;if(y&&(n=n.toUpperCase()),i==="number"&&(n=n.replace(/[^\d]/g,"")),I)try{let m=I;I.startsWith("^")||(m=`^${I}$`);const p=new RegExp(m);n=n.split("").filter(g=>p.test(g)).join("")}catch(m){console.error("Invalid pattern provided to InputOTP:",I,m)}return n};return{uuid:T,inputRef:r,containerRef:B,name:k,disabled:h,isInvalid:D,isRequired:W,description:_,maxLength:e,intent:w,currentValue:d,activeIndex:x,slots:F,contextValue:{value:d,maxLength:e,slots:F,activeIndex:x,intent:w,disabled:h,placeholder:C,type:i},handleChange:o=>{if(h)return;const n=o.target.value,p=N(n).slice(0,e);s&&s(p),t===void 0&&R(p);const g=Math.min(p.length,e-1);r.current&&r.current.setSelectionRange(g,g)},handleKeyDown:o=>{if(!h){if(O.length>0&&O.includes(o.key)){o.preventDefault();return}switch(o.key){case de:o.preventDefault();const n=d.length;if(n>0){const m=d.slice(0,n-1);s&&s(m),t===void 0&&R(m);const p=Math.max(0,m.length);r.current&&r.current.setSelectionRange(p,p)}break;case pe:case be:o.preventDefault();break;case fe:case xe:o.preventDefault();break;case me:case"E":i==="number"&&o.preventDefault();break}}},handlePaste:o=>{if(h)return;o.preventDefault();const n=o.clipboardData.getData("text");if(!n)return;const p=N(n).slice(0,e);s&&s(p),t===void 0&&R(p);const g=Math.min(p.length,e-1);r.current&&r.current.setSelectionRange(g,g)},handleFocus:()=>{if(M(!0),r.current){const o=Math.min(d.length,e-1);r.current.setSelectionRange(o,o)}},handleBlur:()=>{M(!1)},handleClick:()=>{r.current&&r.current.focus()},labelId:Y}},ee=e=>{let i=0;return a.Children.forEach(e,t=>{if(a.isValidElement(t)){const c=t.props;t.type===A||t.type?.displayName==="InputOTP.Slot"?i++:c.children&&(i+=ee(c.children))}}),i},te=(e,i=0)=>{let t=i;return[a.Children.map(e,s=>{if(a.isValidElement(s)){const u=s.props;if(s.type===A||s.type?.displayName==="InputOTP.Slot"){const b=typeof u.index=="number"?u.index:t++;return a.cloneElement(s,{...u,index:b})}else if(u.children){const[b,v]=te(u.children,t);return t=v,a.cloneElement(s,{...s.props,children:b})}}return s}),t]},ne=({maxLength:e,type:i="text",value:t,defaultValue:c="",onValueChange:s,isValid:u=!0,disabled:b=!1,autoFocus:v=!1,autoComplete:y="off",forceUppercase:O=!1,filterKeys:I=["-","."],pattern:C,inputMode:V,placeholder:z="",name:r,className:B,children:l,...T})=>{const k=a.useMemo(()=>{if(e!==void 0)return e;const j=ee(l);return j>0?j:4},[e,l]),h=a.useMemo(()=>{const[j]=te(l);return j},[l]),{uuid:D,inputRef:W,containerRef:Y,name:_,disabled:S,isInvalid:G,isRequired:w,description:P,currentValue:q,contextValue:$,handleChange:R,handleKeyDown:E,handlePaste:M,handleFocus:d,handleBlur:x,handleClick:F,labelId:N}=ve({maxLength:k,type:i,value:t,defaultValue:c,onValueChange:s,isValid:u,disabledProp:b,autoFocus:v,forceUppercase:O,filterKeys:I,pattern:C,placeholder:z,nameProp:r}),U="aria-label"in T?T["aria-label"]:void 0,{"aria-label":re,...X}=T,K=N?{"aria-labelledby":N}:U?{"aria-label":U}:{};return f.jsx(L.Provider,{value:$,children:f.jsxs("div",{ref:Y,"data-spark-component":"input-otp",role:"group",...K,...P?{"aria-describedby":P}:{},className:Z.cx("gap-md relative inline-flex items-center",S?"cursor-not-allowed":"cursor-text",B),onClick:F,...X,children:[_&&f.jsx("input",{type:"hidden",name:_,value:q,required:w,"aria-required":w,"aria-invalid":G,...K}),f.jsx("input",{ref:W,id:D,type:i==="password"?"password":"text",value:q,maxLength:k,autoFocus:v,autoComplete:y,disabled:S,pattern:C,inputMode:V,...K,...P?{"aria-describedby":P}:{},"aria-invalid":G,onChange:R,onKeyDown:E,onPaste:M,onFocus:d,onBlur:x,className:"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 disabled:cursor-not-allowed",tabIndex:0}),h]})})};ne.displayName="InputOTP";const J=({children:e,className:i,...t})=>f.jsx("div",{className:`inline-flex [&>*:not(:first-child)]:-ml-px ${i||""}`,...t,children:e});J.displayName="InputOTP.Group";const Q=({className:e,...i})=>f.jsx("div",{className:`text-on-surface flex items-center justify-center ${e||""}`,...i,children:f.jsx(oe.Icon,{size:"md",children:f.jsx(ce.Minus,{})})});Q.displayName="InputOTP.Separator";const se=Object.assign(ne,{Group:J,Slot:A,Separator:Q});se.displayName="InputOTP";J.displayName="InputOTP.Group";A.displayName="InputOTP.Slot";Q.displayName="InputOTP.Separator";exports.InputOTP=se;exports.inputOTPSlotStyles=H;exports.inputOTPStyles=ue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),H=require("class-variance-authority"),a=require("react"),oe=require("@spark-ui/components/form-field"),ce=require("../Icon-CF0W0LKr.js"),le=require("@spark-ui/icons/Minus"),L=a.createContext(null),ue=()=>{const e=a.useContext(L);if(!e)throw new Error("InputOTP components must be used within InputOTP");return e};H.cva(["relative","inline-flex","items-center","gap-sm"]);const X=H.cva(["relative","border-sm first:rounded-l-lg last:rounded-r-lg","size-sz-44","text-center text-body-1","text-on-surface","outline-hidden","transition-colors","flex items-center justify-center","data-[active=true]:ring-1","data-[active=true]:ring-inset","data-[active=true]:ring-l-2","data-[active=true]:border-focus","data-[active=true]:z-raised ring-focus","data-[disabled=true]:cursor-not-allowed","data-[disabled=true]:border-outline","data-[disabled=true]:bg-on-surface/dim-5","data-[disabled=true]:text-on-surface/dim-3"],{variants:{intent:{neutral:["bg-surface border-outline"],success:["border-success bg-success-container text-on-success-container"],alert:["border-alert bg-alert-container text-on-alert-container"],error:["border-error bg-error-container text-on-error-container"]}},defaultVariants:{intent:"neutral"}}),de=X,j=({index:e,className:i,...t})=>{const c=ue(),s=e??0,u=c.slots[s];if(!u)return null;const{char:b,isActive:x,hasFakeCaret:y}=u,I=!b&&!y&&c.placeholder;return f.jsxs("div",{className:X({intent:c.intent,className:i}),"data-active":x,"data-disabled":c.disabled,"data-valid":c.intent!=="error",...t,children:[f.jsx("span",{className:I?"text-on-surface/dim-3":"",children:c.type==="password"&&b?"•":b||(!y&&c.placeholder?c.placeholder:"")}),y&&f.jsx("span",{className:"pointer-events-none absolute inset-0 flex items-center justify-center","aria-hidden":"true",children:f.jsx("span",{className:"bg-on-surface animate-standalone-caret-blink h-sz-24 w-px"})})]})};j.displayName="InputOTP.Slot";const pe="Backspace",fe="ArrowLeft",be="ArrowUp",me="ArrowRight",ve="ArrowDown",xe="e",Ie=({maxLength:e,type:i,value:t,defaultValue:c,onValueChange:s,isValid:u,disabledProp:b,autoFocus:x,forceUppercase:y,filterKeys:T,pattern:I,placeholder:C,nameProp:V})=>{const G=a.useId(),r=a.useRef(null),z=a.useRef(null),l=oe.useFormFieldControl(),O=l.id??G,D=V??l.name,h=l.disabled??b,_=l.isInvalid??!u,B=l.isRequired??!1,W=l.labelId,k=l.description,S=l.state,w=["success","alert","error"].includes(S??"")?S:_?"error":"neutral",P=t!==void 0?t:c,M=y?P.toUpperCase():P,[U,R]=a.useState(M),[E,F]=a.useState(!1),d=t!==void 0?t:U,m=Math.min(d.length,e-1);a.useEffect(()=>{r.current&&r.current.setSelectionRange(m,m)},[m,d.length,e]);const q=a.useMemo(()=>Array.from({length:e},(o,n)=>({char:d[n]||"",isActive:n===m&&E,hasFakeCaret:n===m&&!d[n]&&!h&&E})),[e,d,m,E,h]);a.useEffect(()=>{r.current&&t!==void 0&&(r.current.value=t)},[t]),a.useEffect(()=>{x&&r.current&&r.current.focus()},[x]);const N=o=>{let n=o;if(y&&(n=n.toUpperCase()),i==="number"&&(n=n.replace(/[^\d]/g,"")),I)try{let v=I;I.startsWith("^")||(v=`^${I}$`);const p=new RegExp(v);n=n.split("").filter(g=>p.test(g)).join("")}catch(v){console.error("Invalid pattern provided to InputOTP:",I,v)}return n};return{uuid:O,inputRef:r,containerRef:z,name:D,disabled:h,isInvalid:_,isRequired:B,description:k,maxLength:e,intent:w,currentValue:d,activeIndex:m,slots:q,contextValue:{value:d,maxLength:e,slots:q,activeIndex:m,intent:w,disabled:h,placeholder:C,type:i},handleChange:o=>{if(h)return;const n=o.target.value,p=N(n).slice(0,e);s&&s(p),t===void 0&&R(p);const g=Math.min(p.length,e-1);r.current&&r.current.setSelectionRange(g,g)},handleKeyDown:o=>{if(!h){if(T.length>0&&T.includes(o.key)){o.preventDefault();return}switch(o.key){case pe:o.preventDefault();const n=d.length;if(n>0){const v=d.slice(0,n-1);s&&s(v),t===void 0&&R(v);const p=Math.max(0,v.length);r.current&&r.current.setSelectionRange(p,p)}break;case fe:case me:o.preventDefault();break;case be:case ve:o.preventDefault();break;case xe:case"E":i==="number"&&o.preventDefault();break}}},handlePaste:o=>{if(h)return;o.preventDefault();const n=o.clipboardData.getData("text");if(!n)return;const p=N(n).slice(0,e);s&&s(p),t===void 0&&R(p);const g=Math.min(p.length,e-1);r.current&&r.current.setSelectionRange(g,g)},handleFocus:()=>{if(F(!0),r.current){const o=Math.min(d.length,e-1);r.current.setSelectionRange(o,o)}},handleBlur:()=>{F(!1)},handleClick:()=>{r.current&&r.current.focus()},labelId:W}},ee=e=>{let i=0;return a.Children.forEach(e,t=>{if(a.isValidElement(t)){const c=t.props;t.type===j||t.type?.displayName==="InputOTP.Slot"?i++:c.children&&(i+=ee(c.children))}}),i},te=(e,i=0)=>{let t=i;return[a.Children.map(e,s=>{if(a.isValidElement(s)){const u=s.props;if(s.type===j||s.type?.displayName==="InputOTP.Slot"){const b=typeof u.index=="number"?u.index:t++;return a.cloneElement(s,{...u,index:b})}else if(u.children){const[b,x]=te(u.children,t);return t=x,a.cloneElement(s,{...s.props,children:b})}}return s}),t]},ne=({maxLength:e,type:i="text",value:t,defaultValue:c="",onValueChange:s,isValid:u=!0,disabled:b=!1,autoFocus:x=!1,autoComplete:y="off",forceUppercase:T=!1,filterKeys:I=["-","."],pattern:C,inputMode:V,placeholder:G="",name:r,className:z,children:l,...O})=>{const D=a.useMemo(()=>{if(e!==void 0)return e;const A=ee(l);return A>0?A:4},[e,l]),h=a.useMemo(()=>{const[A]=te(l);return A},[l]),{uuid:_,inputRef:B,containerRef:W,name:k,disabled:S,isInvalid:Y,isRequired:w,description:P,currentValue:M,contextValue:U,handleChange:R,handleKeyDown:E,handlePaste:F,handleFocus:d,handleBlur:m,handleClick:q,labelId:N}=Ie({maxLength:D,type:i,value:t,defaultValue:c,onValueChange:s,isValid:u,disabledProp:b,autoFocus:x,forceUppercase:T,filterKeys:I,pattern:C,placeholder:G,nameProp:r}),$="aria-label"in O?O["aria-label"]:void 0,{"aria-label":re,...Z}=O,K=N?{"aria-labelledby":N}:$?{"aria-label":$}:{};return f.jsx(L.Provider,{value:U,children:f.jsxs("div",{ref:W,"data-spark-component":"input-otp",role:"group",...K,...P?{"aria-describedby":P}:{},className:H.cx("gap-md relative inline-flex items-center",S?"cursor-not-allowed":"cursor-text",z),onClick:q,...Z,children:[k&&f.jsx("input",{type:"hidden",name:k,value:M,required:w,"aria-required":w,"aria-invalid":Y,...K}),f.jsx("input",{ref:B,id:_,type:i==="password"?"password":"text",value:M,maxLength:D,autoFocus:x,autoComplete:y,disabled:S,pattern:C,inputMode:V,...K,...P?{"aria-describedby":P}:{},"aria-invalid":Y,onChange:R,onKeyDown:E,onPaste:F,onFocus:d,onBlur:m,className:"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 disabled:cursor-not-allowed",tabIndex:0}),h]})})};ne.displayName="InputOTP";const J=({children:e,className:i,...t})=>f.jsx("div",{className:`inline-flex [&>*:not(:first-child)]:-ml-px ${i||""}`,...t,children:e});J.displayName="InputOTP.Group";const Q=({className:e,...i})=>f.jsx("div",{className:`text-on-surface flex items-center justify-center ${e||""}`,...i,children:f.jsx(ce.Icon,{size:"md",children:f.jsx(le.Minus,{})})});Q.displayName="InputOTP.Separator";const se=Object.assign(ne,{Group:J,Slot:j,Separator:Q});se.displayName="InputOTP";J.displayName="InputOTP.Group";j.displayName="InputOTP.Slot";Q.displayName="InputOTP.Separator";exports.InputOTP=se;exports.inputOTPSlotStyles=X;exports.inputOTPStyles=de;
 //# sourceMappingURL=index.js.map

package/dist/input-otp/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/input-otp/InputOTPContext.tsx","../../src/input-otp/InputOTP.styles.ts","../../src/input-otp/InputOTPSlot.tsx","../../src/input-otp/useInputOTP.ts","../../src/input-otp/InputOTP.tsx","../../src/input-otp/InputOTPGroup.tsx","../../src/input-otp/InputOTPSeparator.tsx","../../src/input-otp/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputOTPContextValue {\n  value: string\n  maxLength: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  activeIndex: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  disabled: boolean\n  placeholder?: string\n  type: 'text' | 'number' | 'password' | 'tel'\n}\n\nexport const InputOTPContext = createContext<InputOTPContextValue | null>(null)\n\nexport const useInputOTPContext = () => {\n  const context = useContext(InputOTPContext)\n  if (!context) {\n    throw new Error('InputOTP components must be used within InputOTP')\n  }\n\n  return context\n}\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputOTPContainerStyles = cva(['relative', 'inline-flex', 'items-center', 'gap-sm'])\n\nexport const inputOTPSlotStyles = cva(\n  [\n    // Base slot styles\n    'relative',\n    'border-sm first:rounded-l-lg last:rounded-r-lg',\n    'size-sz-44',\n    'text-center text-body-1',\n    'text-on-surface',\n    'outline-hidden',\n    'transition-colors',\n    'flex items-center justify-center',\n    // Active state (when focused)\n    'data-[active=true]:ring-1',\n    'data-[active=true]:ring-inset',\n    'data-[active=true]:ring-l-2',\n\n    'data-[active=true]:border-focus',\n    // 'data-[active=true]:ring-focus',\n    // 'data-[active=true]:border-focus',\n    'data-[active=true]:z-raised ring-focus',\n    // Disabled state\n    'data-[disabled=true]:cursor-not-allowed',\n    'data-[disabled=true]:border-outline',\n    'data-[disabled=true]:bg-on-surface/dim-5',\n    'data-[disabled=true]:text-on-surface/dim-3',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the slot\n       */\n      intent: {\n        neutral: ['bg-surface border-outline'],\n        success: ['border-success bg-success-container text-on-success-container'],\n        alert: ['border-alert bg-alert-container text-on-alert-container'],\n        error: ['border-error bg-error-container text-on-error-container'],\n      },\n    },\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputOTPSlotStylesProps = VariantProps<typeof inputOTPSlotStyles>\n\n// Keep for backward compatibility\nexport const inputOTPStyles = inputOTPSlotStyles\nexport type InputOTPStylesProps = InputOTPSlotStylesProps\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport { inputOTPSlotStyles } from './InputOTP.styles'\nimport { useInputOTPContext } from './InputOTPContext'\n\nexport interface InputOTPSlotProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Index of the slot (0-based).\n   * If not provided, will be automatically assigned based on position in children.\n   */\n  index?: number\n}\n\nexport const InputOTPSlot = ({ index: indexProp, className, ...props }: InputOTPSlotProps) => {\n  const context = useInputOTPContext()\n\n  // Use provided index or fallback to 0 (should not happen if auto-assignment works)\n  const index = indexProp ?? 0\n  const slot = context.slots[index]\n\n  if (!slot) {\n    return null\n  }\n\n  const { char, isActive, hasFakeCaret } = slot\n  const isEmpty = !char\n  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder\n\n  return (\n    <div\n      className={inputOTPSlotStyles({\n        intent: context.intent,\n        className,\n      })}\n      data-active={isActive}\n      data-disabled={context.disabled}\n      data-valid={context.intent !== 'error'}\n      {...props}\n    >\n      <span className={isPlaceholder ? 'text-on-surface/dim-3' : ''}>\n        {context.type === 'password' && char\n          ? '•'\n          : char || (!hasFakeCaret && context.placeholder ? context.placeholder : '')}\n      </span>\n      {hasFakeCaret && (\n        <span\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center\"\n          aria-hidden=\"true\"\n        >\n          <span className=\"bg-on-surface animate-standalone-caret-blink h-sz-24 w-px\" />\n        </span>\n      )}\n    </div>\n  )\n}\n\nInputOTPSlot.displayName = 'InputOTP.Slot'\n","/* eslint-disable max-lines-per-function */\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n  ChangeEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { InputOTPContextValue } from './InputOTPContext'\n\nconst BACKSPACE_KEY = 'Backspace'\nconst LEFT_ARROW_KEY = 'ArrowLeft'\nconst UP_ARROW_KEY = 'ArrowUp'\nconst RIGHT_ARROW_KEY = 'ArrowRight'\nconst DOWN_ARROW_KEY = 'ArrowDown'\nconst E_KEY = 'e'\n\nexport interface UseInputOTPProps {\n  maxLength: number\n  type: 'text' | 'number' | 'password' | 'tel'\n  value?: string\n  defaultValue: string\n  onValueChange?: (value: string) => void\n  isValid: boolean\n  disabledProp: boolean\n  autoFocus: boolean\n  forceUppercase: boolean\n  filterKeys: string[]\n  pattern?: string\n  placeholder: string\n  nameProp?: string\n}\n\nexport interface UseInputOTPReturn {\n  uuid: string\n  inputRef: React.RefObject<HTMLInputElement | null>\n  containerRef: React.RefObject<HTMLDivElement | null>\n  name: string | undefined\n  disabled: boolean\n  isInvalid: boolean\n  isRequired: boolean\n  description: string | undefined\n  maxLength: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  currentValue: string\n  activeIndex: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  contextValue: InputOTPContextValue\n  handleChange: ChangeEventHandler<HTMLInputElement>\n  handleKeyDown: KeyboardEventHandler<HTMLInputElement>\n  handlePaste: ClipboardEventHandler<HTMLInputElement>\n  handleFocus: () => void\n  handleBlur: () => void\n  handleClick: () => void\n  labelId: string | undefined\n}\n\nexport const useInputOTP = ({\n  maxLength,\n  type,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  isValid,\n  disabledProp,\n  autoFocus,\n  forceUppercase,\n  filterKeys,\n  pattern,\n  placeholder,\n  nameProp,\n}: UseInputOTPProps): UseInputOTPReturn => {\n  const uuid = useId()\n  const inputRef = useRef<HTMLInputElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  // Get FormField context (optional, falls back gracefully if not present)\n  const field = useFormFieldControl()\n\n  // Use FormField values if available, otherwise fall back to props\n  // Use FormField id when available so label htmlFor works correctly\n  const id = field.id ?? uuid\n  const name = nameProp ?? field.name\n  const disabled = field.disabled ?? disabledProp\n  const isInvalid = field.isInvalid ?? !isValid\n  const isRequired = field.isRequired ?? false\n  const labelId = field.labelId\n  const description = field.description\n  const fieldState = field.state\n\n  // Determine intent based on FormField state or isValid prop\n  const getIntent = (): 'neutral' | 'success' | 'alert' | 'error' => {\n    // FormField state takes priority\n    if (['success', 'alert', 'error'].includes(fieldState ?? '')) {\n      return fieldState as 'success' | 'alert' | 'error'\n    }\n\n    // Fallback to isValid prop for backward compatibility\n    if (isInvalid) {\n      return 'error'\n    }\n\n    return 'neutral'\n  }\n\n  const intent = getIntent()\n\n  // Initialize value\n  const initialValue = controlledValue !== undefined ? controlledValue : defaultValue\n  const processedValue = forceUppercase ? initialValue.toUpperCase() : initialValue\n\n  const [internalValue, setInternalValue] = useState<string>(processedValue)\n  const [isFocused, setIsFocused] = useState<boolean>(false)\n\n  // Use controlled value if provided, otherwise use internal state\n  const currentValue = controlledValue !== undefined ? controlledValue : internalValue\n\n  // Calculate active index: last empty slot, or last slot if all are filled\n  const activeIndex = Math.min(currentValue.length, maxLength - 1)\n\n  // Sync cursor position with active index\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(activeIndex, activeIndex)\n    }\n  }, [activeIndex, currentValue.length, maxLength])\n\n  // Create slots array\n  const slots = useMemo(\n    () =>\n      Array.from({ length: maxLength }, (_, i) => ({\n        char: currentValue[i] || '',\n        isActive: i === activeIndex && isFocused,\n        hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && isFocused,\n      })),\n    [maxLength, currentValue, activeIndex, isFocused, disabled]\n  )\n\n  // Sync controlled value with input ref\n  useEffect(() => {\n    if (inputRef.current && controlledValue !== undefined) {\n      inputRef.current.value = controlledValue\n    }\n  }, [controlledValue])\n\n  // Focus management\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      inputRef.current.focus()\n    }\n  }, [autoFocus])\n\n  const processInputValue = (inputValue: string): string => {\n    let processed = inputValue\n\n    if (forceUppercase) {\n      processed = processed.toUpperCase()\n    }\n\n    if (type === 'number') {\n      processed = processed.replace(/[^\\d]/g, '')\n    }\n\n    // Filter characters using pattern if provided\n    if (pattern) {\n      try {\n        // Convert HTML pattern (string) to RegExp\n        // HTML patterns validate the entire string, but we need to test each character\n        // We create a regex that tests if a single character matches the pattern\n        // For example: [0-9]* becomes ^[0-9]$ to test a single digit\n        // We wrap the pattern in ^...$ to ensure it matches a single character\n        let regexPattern = pattern\n        // If pattern doesn't start with ^, wrap it to test single character\n        if (!pattern.startsWith('^')) {\n          regexPattern = `^${pattern}$`\n        }\n        const regex = new RegExp(regexPattern)\n        processed = processed\n          .split('')\n          .filter(currChar => {\n            // Test if the character matches the pattern\n            return regex.test(currChar)\n          })\n          .join('')\n      } catch (error) {\n        // If pattern is invalid, ignore it and continue with other filters\n        console.error('Invalid pattern provided to InputOTP:', pattern, error)\n      }\n    }\n\n    return processed\n  }\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    const inputValue = e.target.value\n    const processedValue = processInputValue(inputValue)\n\n    // Limit to maxLength\n    const newValue = processedValue.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Sync cursor position\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    // Filter keys\n    if (filterKeys.length > 0 && filterKeys.includes(e.key)) {\n      e.preventDefault()\n\n      return\n    }\n\n    switch (e.key) {\n      case BACKSPACE_KEY:\n        e.preventDefault()\n        const currentLength = currentValue.length\n        if (currentLength > 0) {\n          const newValue = currentValue.slice(0, currentLength - 1)\n\n          // Call onValueChange first\n          if (onValueChange) {\n            onValueChange(newValue)\n          }\n\n          // Update state only in uncontrolled mode\n          if (controlledValue === undefined) {\n            setInternalValue(newValue)\n          }\n\n          // Active index is automatically calculated based on value length\n          // Sync cursor position\n          const newActiveIndex = Math.max(0, newValue.length)\n          if (inputRef.current) {\n            inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n          }\n        }\n        break\n\n      case LEFT_ARROW_KEY:\n      case RIGHT_ARROW_KEY:\n        // Prevent navigation with arrow keys - focus stays on last empty slot\n        e.preventDefault()\n        break\n\n      case UP_ARROW_KEY:\n      case DOWN_ARROW_KEY:\n        e.preventDefault()\n        break\n\n      case E_KEY:\n      case 'E':\n        // Prevent 'e' or 'E' in number inputs\n        if (type === 'number') {\n          e.preventDefault()\n        }\n        break\n\n      default:\n        break\n    }\n  }\n\n  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    e.preventDefault()\n\n    const pastedText = e.clipboardData.getData('text')\n\n    if (!pastedText) return\n\n    const processedText = processInputValue(pastedText)\n    const newValue = processedText.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Move cursor to end\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleFocus = () => {\n    setIsFocused(true)\n    if (inputRef.current) {\n      // Focus on last empty slot, or last slot if all are filled\n      const cursorPosition = Math.min(currentValue.length, maxLength - 1)\n      inputRef.current.setSelectionRange(cursorPosition, cursorPosition)\n    }\n  }\n\n  const handleBlur = () => {\n    setIsFocused(false)\n  }\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.focus()\n    }\n  }\n\n  const contextValue: InputOTPContextValue = {\n    value: currentValue,\n    maxLength,\n    slots,\n    activeIndex,\n    intent,\n    disabled,\n    placeholder,\n    type,\n  }\n\n  const returnValue: UseInputOTPReturn = {\n    uuid: id,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    isInvalid,\n    isRequired,\n    description,\n    maxLength,\n    intent,\n    currentValue,\n    activeIndex,\n    slots,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  }\n\n  return returnValue\n}\n","/* eslint-disable max-lines-per-function */\nimport { cx } from 'class-variance-authority'\nimport {\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useMemo,\n} from 'react'\n\nimport { InputOTPContext } from './InputOTPContext'\nimport { InputOTPSlot } from './InputOTPSlot'\nimport { useInputOTP } from './useInputOTP'\n\n/**\n * Counts the number of InputOTPSlot components in the children tree\n */\nconst countSlots = (children: ReactNode): number => {\n  let count = 0\n\n  Children.forEach(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { children?: ReactNode }\n      // Check if it's an InputOTPSlot by checking displayName\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        count++\n      } else if (props.children) {\n        // Recursively count slots in nested children (e.g., inside InputOTPGroup)\n        count += countSlots(props.children)\n      }\n    }\n  })\n\n  return count\n}\n\n/**\n * Recursively assigns index to InputOTPSlot components\n * Returns a tuple of [processedChildren, nextIndex]\n */\nconst assignSlotIndexes = (children: ReactNode, startIndex: number = 0): [ReactNode, number] => {\n  let currentIndex = startIndex\n\n  const processed = Children.map(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { index?: number; children?: ReactNode }\n      // Check if it's an InputOTPSlot\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        // Only assign index if not already provided\n        const slotIndex = typeof props.index === 'number' ? props.index : currentIndex++\n\n        return cloneElement(child as ReactElement<{ index?: number }>, {\n          ...props,\n          index: slotIndex,\n        })\n      } else if (props.children) {\n        // Recursively process nested children\n        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex)\n        currentIndex = nextIndex\n\n        return cloneElement(child, {\n          ...(child.props as Record<string, unknown>),\n          children: processedChildren,\n        } as Parameters<typeof cloneElement>[1])\n      }\n    }\n\n    return child\n  })\n\n  return [processed, currentIndex]\n}\n\nexport interface InputOTPProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'inputMode'> {\n  /**\n   * Maximum length of the input value.\n   * If not provided, will be automatically detected from the number of InputOTP.Slot children.\n   */\n  maxLength?: number\n  /**\n   * Type of input\n   * @default 'text'\n   */\n  type?: 'text' | 'number' | 'password' | 'tel'\n  /**\n   * Current value (controlled mode)\n   */\n  value?: string\n  /**\n   * Default value (uncontrolled mode)\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the value changes\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * Whether the input is valid\n   * @default true\n   */\n  isValid?: boolean\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Whether to auto-focus the input\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * Auto-complete attribute\n   * @default 'off'\n   */\n  autoComplete?: string\n  /**\n   * Whether to force uppercase\n   * @default false\n   */\n  forceUppercase?: boolean\n  /**\n   * Array of keys to filter out (using KeyboardEvent.key values)\n   * @default ['-', '.']\n   */\n  filterKeys?: string[]\n  /**\n   * Pattern attribute for input validation and character filtering.\n   * Uses a regular expression to filter allowed characters in real-time.\n   * For example: \"[0-9]\" for digits only, \"[a-c]\" for letters a, b, c only.\n   */\n  pattern?: string\n  /**\n   * Input mode attribute\n   */\n  inputMode?: string\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n  /**\n   * Name attribute for form integration\n   */\n  name?: string\n  /**\n   * Children components (InputOTPGroup, InputOTPSlot, InputOTPSeparator)\n   */\n  children: ReactNode\n  /**\n   * Ref callback for the container\n   */\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputOTP = ({\n  maxLength: maxLengthProp,\n  type = 'text',\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  isValid = true,\n  disabled: disabledProp = false,\n  autoFocus = false,\n  autoComplete = 'off',\n  forceUppercase = false,\n  filterKeys = ['-', '.'],\n  pattern,\n  inputMode,\n  placeholder = '',\n  name: nameProp,\n  className,\n  children,\n  ...others\n}: InputOTPProps) => {\n  // Auto-detect maxLength from children if not provided\n  const maxLength = useMemo(() => {\n    if (maxLengthProp !== undefined) {\n      return maxLengthProp\n    }\n\n    const detectedLength = countSlots(children)\n\n    return detectedLength > 0 ? detectedLength : 4 // fallback to 4 if no slots found\n  }, [maxLengthProp, children])\n\n  // Assign indexes to slots automatically\n  const processedChildren = useMemo(() => {\n    const [processed] = assignSlotIndexes(children)\n\n    return processed\n  }, [children])\n\n  // Use the hook for all business logic\n  const {\n    uuid,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    isInvalid,\n    isRequired,\n    description,\n    currentValue,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  } = useInputOTP({\n    maxLength,\n    type,\n    value: controlledValue,\n    defaultValue,\n    onValueChange,\n    isValid,\n    disabledProp,\n    autoFocus,\n    forceUppercase,\n    filterKeys,\n    pattern,\n    placeholder,\n    nameProp,\n  })\n\n  // Extract aria-label from others if provided (for cases without FormField)\n  const ariaLabel =\n    'aria-label' in others ? (others['aria-label'] as string | undefined) : undefined\n  const { 'aria-label': _, ...restOthers } = others\n\n  // Determine accessible name props\n  const getAccessibleNameProps = (): Record<string, string | undefined> => {\n    if (labelId) {\n      return { 'aria-labelledby': labelId }\n    }\n\n    if (ariaLabel) {\n      return { 'aria-label': ariaLabel }\n    }\n\n    return {}\n  }\n\n  const accessibleNameProps = getAccessibleNameProps()\n\n  return (\n    <InputOTPContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        data-spark-component=\"input-otp\"\n        role=\"group\"\n        {...accessibleNameProps}\n        {...(description ? { 'aria-describedby': description } : {})}\n        className={cx(\n          'gap-md relative inline-flex items-center',\n          disabled ? 'cursor-not-allowed' : 'cursor-text',\n          className\n        )}\n        onClick={handleClick}\n        {...restOthers}\n      >\n        {/* Hidden input for form submission with complete value */}\n        {name && (\n          <input\n            type=\"hidden\"\n            name={name}\n            value={currentValue}\n            required={isRequired}\n            aria-required={isRequired}\n            aria-invalid={isInvalid}\n            {...accessibleNameProps}\n          />\n        )}\n        {/* Actual input that handles all interactions */}\n        <input\n          ref={inputRef}\n          id={uuid}\n          type={type === 'password' ? 'password' : 'text'}\n          value={currentValue}\n          maxLength={maxLength}\n          autoFocus={autoFocus}\n          autoComplete={autoComplete}\n          disabled={disabled}\n          pattern={pattern}\n          inputMode={inputMode as React.InputHTMLAttributes<HTMLInputElement>['inputMode']}\n          {...accessibleNameProps}\n          {...(description ? { 'aria-describedby': description } : {})}\n          aria-invalid={isInvalid}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 disabled:cursor-not-allowed\"\n          tabIndex={0}\n        />\n        {/* Children render slots with auto-assigned indexes */}\n        {processedChildren}\n      </div>\n    </InputOTPContext.Provider>\n  )\n}\n\nInputOTP.displayName = 'InputOTP'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPGroupProps extends ComponentPropsWithoutRef<'div'> {}\n\nexport const InputOTPGroup = ({ children, className, ...props }: InputOTPGroupProps) => {\n  return (\n    <div className={`inline-flex [&>*:not(:first-child)]:-ml-px ${className || ''}`} {...props}>\n      {children}\n    </div>\n  )\n}\n\nInputOTPGroup.displayName = 'InputOTP.Group'\n","import { Icon } from '@spark-ui/components/icon'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPSeparatorProps extends ComponentPropsWithoutRef<'div'> {}\n\nexport const InputOTPSeparator = ({ className, ...props }: InputOTPSeparatorProps) => {\n  return (\n    <div\n      className={`text-on-surface flex items-center justify-center ${className || ''}`}\n      {...props}\n    >\n      <Icon size=\"md\">\n        <Minus />\n      </Icon>\n    </div>\n  )\n}\n\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n","import { InputOTP as Root } from './InputOTP'\nimport { InputOTPGroup } from './InputOTPGroup'\nimport { InputOTPSeparator } from './InputOTPSeparator'\nimport { InputOTPSlot } from './InputOTPSlot'\n\nexport const InputOTP: typeof Root & {\n  Group: typeof InputOTPGroup\n  Slot: typeof InputOTPSlot\n  Separator: typeof InputOTPSeparator\n} = Object.assign(Root, {\n  Group: InputOTPGroup,\n  Slot: InputOTPSlot,\n  Separator: InputOTPSeparator,\n})\n\nInputOTP.displayName = 'InputOTP'\nInputOTPGroup.displayName = 'InputOTP.Group'\nInputOTPSlot.displayName = 'InputOTP.Slot'\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n\nexport { type InputOTPProps } from './InputOTP'\nexport { type InputOTPGroupProps } from './InputOTPGroup'\nexport { type InputOTPSlotProps } from './InputOTPSlot'\nexport { type InputOTPSeparatorProps } from './InputOTPSeparator'\nexport {\n  inputOTPSlotStyles,\n  inputOTPStyles,\n  type InputOTPSlotStylesProps,\n  type InputOTPStylesProps,\n} from './InputOTP.styles'\n"],"names":["InputOTPContext","createContext","useInputOTPContext","context","useContext","inputOTPSlotStyles","cva","inputOTPStyles","InputOTPSlot","indexProp","className","props","index","slot","char","isActive","hasFakeCaret","isPlaceholder","jsxs","jsx","BACKSPACE_KEY","LEFT_ARROW_KEY","UP_ARROW_KEY","RIGHT_ARROW_KEY","DOWN_ARROW_KEY","E_KEY","useInputOTP","maxLength","type","controlledValue","defaultValue","onValueChange","isValid","disabledProp","autoFocus","forceUppercase","filterKeys","pattern","placeholder","nameProp","uuid","useId","inputRef","useRef","containerRef","field","useFormFieldControl","id","name","disabled","isInvalid","isRequired","labelId","description","fieldState","intent","initialValue","processedValue","internalValue","setInternalValue","useState","isFocused","setIsFocused","currentValue","activeIndex","useEffect","slots","useMemo","_","i","processInputValue","inputValue","processed","regexPattern","regex","currChar","error","e","newValue","newActiveIndex","currentLength","pastedText","cursorPosition","countSlots","children","count","Children","child","isValidElement","assignSlotIndexes","startIndex","currentIndex","slotIndex","cloneElement","processedChildren","nextIndex","InputOTP","maxLengthProp","autoComplete","inputMode","others","detectedLength","contextValue","handleChange","handleKeyDown","handlePaste","handleFocus","handleBlur","handleClick","ariaLabel","restOthers","accessibleNameProps","cx","InputOTPGroup","InputOTPSeparator","Icon","Minus","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/input-otp/InputOTPContext.tsx","../../src/input-otp/InputOTP.styles.ts","../../src/input-otp/InputOTPSlot.tsx","../../src/input-otp/useInputOTP.ts","../../src/input-otp/InputOTP.tsx","../../src/input-otp/InputOTPGroup.tsx","../../src/input-otp/InputOTPSeparator.tsx","../../src/input-otp/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputOTPContextValue {\n  value: string\n  maxLength: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  activeIndex: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  disabled: boolean\n  placeholder?: string\n  type: 'text' | 'number' | 'password' | 'tel'\n}\n\nexport const InputOTPContext = createContext<InputOTPContextValue | null>(null)\n\nexport const useInputOTPContext = () => {\n  const context = useContext(InputOTPContext)\n  if (!context) {\n    throw new Error('InputOTP components must be used within InputOTP')\n  }\n\n  return context\n}\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputOTPContainerStyles = cva(['relative', 'inline-flex', 'items-center', 'gap-sm'])\n\nexport const inputOTPSlotStyles = cva(\n  [\n    // Base slot styles\n    'relative',\n    'border-sm first:rounded-l-lg last:rounded-r-lg',\n    'size-sz-44',\n    'text-center text-body-1',\n    'text-on-surface',\n    'outline-hidden',\n    'transition-colors',\n    'flex items-center justify-center',\n    // Active state (when focused)\n    'data-[active=true]:ring-1',\n    'data-[active=true]:ring-inset',\n    'data-[active=true]:ring-l-2',\n\n    'data-[active=true]:border-focus',\n    // 'data-[active=true]:ring-focus',\n    // 'data-[active=true]:border-focus',\n    'data-[active=true]:z-raised ring-focus',\n    // Disabled state\n    'data-[disabled=true]:cursor-not-allowed',\n    'data-[disabled=true]:border-outline',\n    'data-[disabled=true]:bg-on-surface/dim-5',\n    'data-[disabled=true]:text-on-surface/dim-3',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the slot\n       */\n      intent: {\n        neutral: ['bg-surface border-outline'],\n        success: ['border-success bg-success-container text-on-success-container'],\n        alert: ['border-alert bg-alert-container text-on-alert-container'],\n        error: ['border-error bg-error-container text-on-error-container'],\n      },\n    },\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputOTPSlotStylesProps = VariantProps<typeof inputOTPSlotStyles>\n\n// Keep for backward compatibility\nexport const inputOTPStyles = inputOTPSlotStyles\nexport type InputOTPStylesProps = InputOTPSlotStylesProps\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport { inputOTPSlotStyles } from './InputOTP.styles'\nimport { useInputOTPContext } from './InputOTPContext'\n\nexport interface InputOTPSlotProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Index of the slot (0-based).\n   * If not provided, will be automatically assigned based on position in children.\n   */\n  index?: number\n}\n\nexport const InputOTPSlot = ({ index: indexProp, className, ...props }: InputOTPSlotProps) => {\n  const context = useInputOTPContext()\n\n  // Use provided index or fallback to 0 (should not happen if auto-assignment works)\n  const index = indexProp ?? 0\n  const slot = context.slots[index]\n\n  if (!slot) {\n    return null\n  }\n\n  const { char, isActive, hasFakeCaret } = slot\n  const isEmpty = !char\n  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder\n\n  return (\n    <div\n      className={inputOTPSlotStyles({\n        intent: context.intent,\n        className,\n      })}\n      data-active={isActive}\n      data-disabled={context.disabled}\n      data-valid={context.intent !== 'error'}\n      {...props}\n    >\n      <span className={isPlaceholder ? 'text-on-surface/dim-3' : ''}>\n        {context.type === 'password' && char\n          ? '•'\n          : char || (!hasFakeCaret && context.placeholder ? context.placeholder : '')}\n      </span>\n      {hasFakeCaret && (\n        <span\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center\"\n          aria-hidden=\"true\"\n        >\n          <span className=\"bg-on-surface animate-standalone-caret-blink h-sz-24 w-px\" />\n        </span>\n      )}\n    </div>\n  )\n}\n\nInputOTPSlot.displayName = 'InputOTP.Slot'\n","/* eslint-disable max-lines-per-function */\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n  ChangeEventHandler,\n  ClipboardEventHandler,\n  KeyboardEventHandler,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { InputOTPContextValue } from './InputOTPContext'\n\nconst BACKSPACE_KEY = 'Backspace'\nconst LEFT_ARROW_KEY = 'ArrowLeft'\nconst UP_ARROW_KEY = 'ArrowUp'\nconst RIGHT_ARROW_KEY = 'ArrowRight'\nconst DOWN_ARROW_KEY = 'ArrowDown'\nconst E_KEY = 'e'\n\nexport interface UseInputOTPProps {\n  maxLength: number\n  type: 'text' | 'number' | 'password' | 'tel'\n  value?: string\n  defaultValue: string\n  onValueChange?: (value: string) => void\n  isValid: boolean\n  disabledProp: boolean\n  autoFocus: boolean\n  forceUppercase: boolean\n  filterKeys: string[]\n  pattern?: string\n  placeholder: string\n  nameProp?: string\n}\n\nexport interface UseInputOTPReturn {\n  uuid: string\n  inputRef: React.RefObject<HTMLInputElement | null>\n  containerRef: React.RefObject<HTMLDivElement | null>\n  name: string | undefined\n  disabled: boolean\n  isInvalid: boolean\n  isRequired: boolean\n  description: string | undefined\n  maxLength: number\n  intent: 'neutral' | 'success' | 'alert' | 'error'\n  currentValue: string\n  activeIndex: number\n  slots: {\n    char: string\n    isActive: boolean\n    hasFakeCaret: boolean\n  }[]\n  contextValue: InputOTPContextValue\n  handleChange: ChangeEventHandler<HTMLInputElement>\n  handleKeyDown: KeyboardEventHandler<HTMLInputElement>\n  handlePaste: ClipboardEventHandler<HTMLInputElement>\n  handleFocus: () => void\n  handleBlur: () => void\n  handleClick: () => void\n  labelId: string | undefined\n}\n\nexport const useInputOTP = ({\n  maxLength,\n  type,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  isValid,\n  disabledProp,\n  autoFocus,\n  forceUppercase,\n  filterKeys,\n  pattern,\n  placeholder,\n  nameProp,\n}: UseInputOTPProps): UseInputOTPReturn => {\n  const uuid = useId()\n  const inputRef = useRef<HTMLInputElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  // Get FormField context (optional, falls back gracefully if not present)\n  const field = useFormFieldControl()\n\n  // Use FormField values if available, otherwise fall back to props\n  // Use FormField id when available so label htmlFor works correctly\n  const id = field.id ?? uuid\n  const name = nameProp ?? field.name\n  const disabled = field.disabled ?? disabledProp\n  const isInvalid = field.isInvalid ?? !isValid\n  const isRequired = field.isRequired ?? false\n  const labelId = field.labelId\n  const description = field.description\n  const fieldState = field.state\n\n  // Determine intent based on FormField state or isValid prop\n  const getIntent = (): 'neutral' | 'success' | 'alert' | 'error' => {\n    // FormField state takes priority\n    if (['success', 'alert', 'error'].includes(fieldState ?? '')) {\n      return fieldState as 'success' | 'alert' | 'error'\n    }\n\n    // Fallback to isValid prop for backward compatibility\n    if (isInvalid) {\n      return 'error'\n    }\n\n    return 'neutral'\n  }\n\n  const intent = getIntent()\n\n  // Initialize value\n  const initialValue = controlledValue !== undefined ? controlledValue : defaultValue\n  const processedValue = forceUppercase ? initialValue.toUpperCase() : initialValue\n\n  const [internalValue, setInternalValue] = useState<string>(processedValue)\n  const [isFocused, setIsFocused] = useState<boolean>(false)\n\n  // Use controlled value if provided, otherwise use internal state\n  const currentValue = controlledValue !== undefined ? controlledValue : internalValue\n\n  // Calculate active index: last empty slot, or last slot if all are filled\n  const activeIndex = Math.min(currentValue.length, maxLength - 1)\n\n  // Sync cursor position with active index\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(activeIndex, activeIndex)\n    }\n  }, [activeIndex, currentValue.length, maxLength])\n\n  // Create slots array\n  const slots = useMemo(\n    () =>\n      Array.from({ length: maxLength }, (_, i) => ({\n        char: currentValue[i] || '',\n        isActive: i === activeIndex && isFocused,\n        hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && isFocused,\n      })),\n    [maxLength, currentValue, activeIndex, isFocused, disabled]\n  )\n\n  // Sync controlled value with input ref\n  useEffect(() => {\n    if (inputRef.current && controlledValue !== undefined) {\n      inputRef.current.value = controlledValue\n    }\n  }, [controlledValue])\n\n  // Focus management\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      inputRef.current.focus()\n    }\n  }, [autoFocus])\n\n  const processInputValue = (inputValue: string): string => {\n    let processed = inputValue\n\n    if (forceUppercase) {\n      processed = processed.toUpperCase()\n    }\n\n    if (type === 'number') {\n      processed = processed.replace(/[^\\d]/g, '')\n    }\n\n    // Filter characters using pattern if provided\n    if (pattern) {\n      try {\n        // Convert HTML pattern (string) to RegExp\n        // HTML patterns validate the entire string, but we need to test each character\n        // We create a regex that tests if a single character matches the pattern\n        // For example: [0-9]* becomes ^[0-9]$ to test a single digit\n        // We wrap the pattern in ^...$ to ensure it matches a single character\n        let regexPattern = pattern\n        // If pattern doesn't start with ^, wrap it to test single character\n        if (!pattern.startsWith('^')) {\n          regexPattern = `^${pattern}$`\n        }\n        const regex = new RegExp(regexPattern)\n        processed = processed\n          .split('')\n          .filter(currChar => {\n            // Test if the character matches the pattern\n            return regex.test(currChar)\n          })\n          .join('')\n      } catch (error) {\n        // If pattern is invalid, ignore it and continue with other filters\n        console.error('Invalid pattern provided to InputOTP:', pattern, error)\n      }\n    }\n\n    return processed\n  }\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    const inputValue = e.target.value\n    const processedValue = processInputValue(inputValue)\n\n    // Limit to maxLength\n    const newValue = processedValue.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Sync cursor position\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    // Filter keys\n    if (filterKeys.length > 0 && filterKeys.includes(e.key)) {\n      e.preventDefault()\n\n      return\n    }\n\n    switch (e.key) {\n      case BACKSPACE_KEY:\n        e.preventDefault()\n        const currentLength = currentValue.length\n        if (currentLength > 0) {\n          const newValue = currentValue.slice(0, currentLength - 1)\n\n          // Call onValueChange first\n          if (onValueChange) {\n            onValueChange(newValue)\n          }\n\n          // Update state only in uncontrolled mode\n          if (controlledValue === undefined) {\n            setInternalValue(newValue)\n          }\n\n          // Active index is automatically calculated based on value length\n          // Sync cursor position\n          const newActiveIndex = Math.max(0, newValue.length)\n          if (inputRef.current) {\n            inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n          }\n        }\n        break\n\n      case LEFT_ARROW_KEY:\n      case RIGHT_ARROW_KEY:\n        // Prevent navigation with arrow keys - focus stays on last empty slot\n        e.preventDefault()\n        break\n\n      case UP_ARROW_KEY:\n      case DOWN_ARROW_KEY:\n        e.preventDefault()\n        break\n\n      case E_KEY:\n      case 'E':\n        // Prevent 'e' or 'E' in number inputs\n        if (type === 'number') {\n          e.preventDefault()\n        }\n        break\n\n      default:\n        break\n    }\n  }\n\n  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    e.preventDefault()\n\n    const pastedText = e.clipboardData.getData('text')\n\n    if (!pastedText) return\n\n    const processedText = processInputValue(pastedText)\n    const newValue = processedText.slice(0, maxLength)\n\n    // Call onValueChange callback first (before updating state)\n    if (onValueChange) {\n      onValueChange(newValue)\n    }\n\n    // Update state only in uncontrolled mode\n    if (controlledValue === undefined) {\n      setInternalValue(newValue)\n    }\n\n    // Active index is automatically calculated based on value length\n    // Move cursor to end\n    const newActiveIndex = Math.min(newValue.length, maxLength - 1)\n    if (inputRef.current) {\n      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex)\n    }\n  }\n\n  const handleFocus = () => {\n    setIsFocused(true)\n    if (inputRef.current) {\n      // Focus on last empty slot, or last slot if all are filled\n      const cursorPosition = Math.min(currentValue.length, maxLength - 1)\n      inputRef.current.setSelectionRange(cursorPosition, cursorPosition)\n    }\n  }\n\n  const handleBlur = () => {\n    setIsFocused(false)\n  }\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.focus()\n    }\n  }\n\n  const contextValue: InputOTPContextValue = {\n    value: currentValue,\n    maxLength,\n    slots,\n    activeIndex,\n    intent,\n    disabled,\n    placeholder,\n    type,\n  }\n\n  const returnValue: UseInputOTPReturn = {\n    uuid: id,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    isInvalid,\n    isRequired,\n    description,\n    maxLength,\n    intent,\n    currentValue,\n    activeIndex,\n    slots,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  }\n\n  return returnValue\n}\n","/* eslint-disable max-lines-per-function */\nimport { cx } from 'class-variance-authority'\nimport {\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useMemo,\n} from 'react'\n\nimport { InputOTPContext } from './InputOTPContext'\nimport { InputOTPSlot } from './InputOTPSlot'\nimport { useInputOTP } from './useInputOTP'\n\n/**\n * Counts the number of InputOTPSlot components in the children tree\n */\nconst countSlots = (children: ReactNode): number => {\n  let count = 0\n\n  Children.forEach(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { children?: ReactNode }\n      // Check if it's an InputOTPSlot by checking displayName\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        count++\n      } else if (props.children) {\n        // Recursively count slots in nested children (e.g., inside InputOTPGroup)\n        count += countSlots(props.children)\n      }\n    }\n  })\n\n  return count\n}\n\n/**\n * Recursively assigns index to InputOTPSlot components\n * Returns a tuple of [processedChildren, nextIndex]\n */\nconst assignSlotIndexes = (children: ReactNode, startIndex: number = 0): [ReactNode, number] => {\n  let currentIndex = startIndex\n\n  const processed = Children.map(children, child => {\n    if (isValidElement(child)) {\n      const props = child.props as { index?: number; children?: ReactNode }\n      // Check if it's an InputOTPSlot\n      if (\n        child.type === InputOTPSlot ||\n        (child.type as { displayName?: string })?.displayName === 'InputOTP.Slot'\n      ) {\n        // Only assign index if not already provided\n        const slotIndex = typeof props.index === 'number' ? props.index : currentIndex++\n\n        return cloneElement(child as ReactElement<{ index?: number }>, {\n          ...props,\n          index: slotIndex,\n        })\n      } else if (props.children) {\n        // Recursively process nested children\n        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex)\n        currentIndex = nextIndex\n\n        return cloneElement(child, {\n          ...(child.props as Record<string, unknown>),\n          children: processedChildren,\n        } as Parameters<typeof cloneElement>[1])\n      }\n    }\n\n    return child\n  })\n\n  return [processed, currentIndex]\n}\n\nexport interface InputOTPProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'inputMode'> {\n  /**\n   * Maximum length of the input value.\n   * If not provided, will be automatically detected from the number of InputOTP.Slot children.\n   */\n  maxLength?: number\n  /**\n   * Type of input\n   * @default 'text'\n   */\n  type?: 'text' | 'number' | 'password' | 'tel'\n  /**\n   * Current value (controlled mode)\n   */\n  value?: string\n  /**\n   * Default value (uncontrolled mode)\n   */\n  defaultValue?: string\n  /**\n   * Callback fired when the value changes\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * Whether the input is valid\n   * @default true\n   */\n  isValid?: boolean\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Whether to auto-focus the input\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * Auto-complete attribute\n   * @default 'off'\n   */\n  autoComplete?: string\n  /**\n   * Whether to force uppercase\n   * @default false\n   */\n  forceUppercase?: boolean\n  /**\n   * Array of keys to filter out (using KeyboardEvent.key values)\n   * @default ['-', '.']\n   */\n  filterKeys?: string[]\n  /**\n   * Pattern attribute for input validation and character filtering.\n   * Uses a regular expression to filter allowed characters in real-time.\n   * For example: \"[0-9]\" for digits only, \"[a-c]\" for letters a, b, c only.\n   */\n  pattern?: string\n  /**\n   * Input mode attribute\n   */\n  inputMode?: string\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n  /**\n   * Name attribute for form integration\n   */\n  name?: string\n  /**\n   * Children components (InputOTPGroup, InputOTPSlot, InputOTPSeparator)\n   */\n  children: ReactNode\n  /**\n   * Ref callback for the container\n   */\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputOTP = ({\n  maxLength: maxLengthProp,\n  type = 'text',\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  isValid = true,\n  disabled: disabledProp = false,\n  autoFocus = false,\n  autoComplete = 'off',\n  forceUppercase = false,\n  filterKeys = ['-', '.'],\n  pattern,\n  inputMode,\n  placeholder = '',\n  name: nameProp,\n  className,\n  children,\n  ...others\n}: InputOTPProps) => {\n  // Auto-detect maxLength from children if not provided\n  const maxLength = useMemo(() => {\n    if (maxLengthProp !== undefined) {\n      return maxLengthProp\n    }\n\n    const detectedLength = countSlots(children)\n    const DEFAULT_MAX_LENGTH = 4\n\n    return detectedLength > 0 ? detectedLength : DEFAULT_MAX_LENGTH // fallback to 4 if no slots found\n  }, [maxLengthProp, children])\n\n  // Assign indexes to slots automatically\n  const processedChildren = useMemo(() => {\n    const [processed] = assignSlotIndexes(children)\n\n    return processed\n  }, [children])\n\n  // Use the hook for all business logic\n  const {\n    uuid,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    isInvalid,\n    isRequired,\n    description,\n    currentValue,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleClick,\n    labelId,\n  } = useInputOTP({\n    maxLength,\n    type,\n    value: controlledValue,\n    defaultValue,\n    onValueChange,\n    isValid,\n    disabledProp,\n    autoFocus,\n    forceUppercase,\n    filterKeys,\n    pattern,\n    placeholder,\n    nameProp,\n  })\n\n  // Extract aria-label from others if provided (for cases without FormField)\n  const ariaLabel =\n    'aria-label' in others ? (others['aria-label'] as string | undefined) : undefined\n  const { 'aria-label': _, ...restOthers } = others\n\n  const getAccessibleNameProps = (): Record<string, string | undefined> => {\n    if (labelId) {\n      return { 'aria-labelledby': labelId }\n    }\n\n    if (ariaLabel) {\n      return { 'aria-label': ariaLabel }\n    }\n\n    return {}\n  }\n\n  const accessibleNameProps = getAccessibleNameProps()\n\n  return (\n    <InputOTPContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        data-spark-component=\"input-otp\"\n        role=\"group\"\n        {...accessibleNameProps}\n        {...(description ? { 'aria-describedby': description } : {})}\n        className={cx(\n          'gap-md relative inline-flex items-center',\n          disabled ? 'cursor-not-allowed' : 'cursor-text',\n          className\n        )}\n        onClick={handleClick}\n        {...restOthers}\n      >\n        {/* Hidden input for form submission with complete value */}\n        {name && (\n          <input\n            type=\"hidden\"\n            name={name}\n            value={currentValue}\n            required={isRequired}\n            aria-required={isRequired}\n            aria-invalid={isInvalid}\n            {...accessibleNameProps}\n          />\n        )}\n        {/* Actual input that handles all interactions */}\n        <input\n          ref={inputRef}\n          id={uuid}\n          type={type === 'password' ? 'password' : 'text'}\n          value={currentValue}\n          maxLength={maxLength}\n          autoFocus={autoFocus}\n          autoComplete={autoComplete}\n          disabled={disabled}\n          pattern={pattern}\n          inputMode={inputMode as React.InputHTMLAttributes<HTMLInputElement>['inputMode']}\n          {...accessibleNameProps}\n          {...(description ? { 'aria-describedby': description } : {})}\n          aria-invalid={isInvalid}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 disabled:cursor-not-allowed\"\n          tabIndex={0}\n        />\n        {/* Children render slots with auto-assigned indexes */}\n        {processedChildren}\n      </div>\n    </InputOTPContext.Provider>\n  )\n}\n\nInputOTP.displayName = 'InputOTP'\n","import { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPGroupProps extends ComponentPropsWithoutRef<'div'> {}\n\nexport const InputOTPGroup = ({ children, className, ...props }: InputOTPGroupProps) => {\n  return (\n    <div className={`inline-flex [&>*:not(:first-child)]:-ml-px ${className || ''}`} {...props}>\n      {children}\n    </div>\n  )\n}\n\nInputOTPGroup.displayName = 'InputOTP.Group'\n","import { Icon } from '@spark-ui/components/icon'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { ComponentPropsWithoutRef } from 'react'\n\nexport interface InputOTPSeparatorProps extends ComponentPropsWithoutRef<'div'> {}\n\nexport const InputOTPSeparator = ({ className, ...props }: InputOTPSeparatorProps) => {\n  return (\n    <div\n      className={`text-on-surface flex items-center justify-center ${className || ''}`}\n      {...props}\n    >\n      <Icon size=\"md\">\n        <Minus />\n      </Icon>\n    </div>\n  )\n}\n\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n","import { InputOTP as Root } from './InputOTP'\nimport { InputOTPGroup } from './InputOTPGroup'\nimport { InputOTPSeparator } from './InputOTPSeparator'\nimport { InputOTPSlot } from './InputOTPSlot'\n\nexport const InputOTP: typeof Root & {\n  Group: typeof InputOTPGroup\n  Slot: typeof InputOTPSlot\n  Separator: typeof InputOTPSeparator\n} = Object.assign(Root, {\n  Group: InputOTPGroup,\n  Slot: InputOTPSlot,\n  Separator: InputOTPSeparator,\n})\n\nInputOTP.displayName = 'InputOTP'\nInputOTPGroup.displayName = 'InputOTP.Group'\nInputOTPSlot.displayName = 'InputOTP.Slot'\nInputOTPSeparator.displayName = 'InputOTP.Separator'\n\nexport { type InputOTPProps } from './InputOTP'\nexport { type InputOTPGroupProps } from './InputOTPGroup'\nexport { type InputOTPSlotProps } from './InputOTPSlot'\nexport { type InputOTPSeparatorProps } from './InputOTPSeparator'\nexport {\n  inputOTPSlotStyles,\n  inputOTPStyles,\n  type InputOTPSlotStylesProps,\n  type InputOTPStylesProps,\n} from './InputOTP.styles'\n"],"names":["InputOTPContext","createContext","useInputOTPContext","context","useContext","cva","inputOTPSlotStyles","inputOTPStyles","InputOTPSlot","indexProp","className","props","index","slot","char","isActive","hasFakeCaret","isPlaceholder","jsxs","jsx","BACKSPACE_KEY","LEFT_ARROW_KEY","UP_ARROW_KEY","RIGHT_ARROW_KEY","DOWN_ARROW_KEY","E_KEY","useInputOTP","maxLength","type","controlledValue","defaultValue","onValueChange","isValid","disabledProp","autoFocus","forceUppercase","filterKeys","pattern","placeholder","nameProp","uuid","useId","inputRef","useRef","containerRef","field","useFormFieldControl","id","name","disabled","isInvalid","isRequired","labelId","description","fieldState","intent","initialValue","processedValue","internalValue","setInternalValue","useState","isFocused","setIsFocused","currentValue","activeIndex","useEffect","slots","useMemo","_","i","processInputValue","inputValue","processed","regexPattern","regex","currChar","error","e","newValue","newActiveIndex","currentLength","pastedText","cursorPosition","countSlots","children","count","Children","child","isValidElement","assignSlotIndexes","startIndex","currentIndex","slotIndex","cloneElement","processedChildren","nextIndex","InputOTP","maxLengthProp","autoComplete","inputMode","others","detectedLength","contextValue","handleChange","handleKeyDown","handlePaste","handleFocus","handleBlur","handleClick","ariaLabel","restOthers","accessibleNameProps","cx","InputOTPGroup","InputOTPSeparator","Icon","Minus","Root"],"mappings":"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"}