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

package/dist/input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/input/index.ts","../../src/input/InputClearButton.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/input/InputGroupContext.ts","../../src/input/InputGroup.tsx","../../src/input/InputGroup.styles.ts","../../src/input/InputLeadingAddon.tsx","../../src/input/InputAddon.tsx","../../src/input/InputAddon.styles.ts","../../src/input/InputLeadingIcon.tsx","../../src/input/InputIcon.tsx","../../src/input/InputTrailingAddon.tsx","../../src/input/InputTrailingIcon.tsx","../../src/input/Input.tsx","../../src/input/Input.styles.ts"],"sourcesContent":["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","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 { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      style={{\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: 'absolute',\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n        ...props.style,\n      }}\n    />\n  )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      [\n        'current',\n        'main',\n        'support',\n        'accent',\n        'basic',\n        'success',\n        'alert',\n        'error',\n        'info',\n        'neutral',\n      ]\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      basic: ['text-basic'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","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","/* 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 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","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 { 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 { 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 { 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'\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'\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 { 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 { 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"],"mappings":"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","names":["InputGroup","import_class_variance_authority","import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_react","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","Root","import_class_variance_authority","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","Root","import_class_variance_authority","import_jsx_runtime","import_form_field","import_class_variance_authority","import_jsx_runtime","Root","InputGroup"]}
+{"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,14 +1,455 @@
-import {
-  Input,
-  InputGroup,
-  useInputGroup
-} from "../chunk-VBX7BTNU.mjs";
-import "../chunk-UMUMFMFB.mjs";
-import "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
+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 { 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 { 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";
+const Q = ie(null), v = () => de(Q) || { isStandalone: !0 }, U = ({
+  className: n,
+  tabIndex: e = -1,
+  onClick: t,
+  inline: r = !1,
+  ref: o,
+  ...s
+}) => {
+  const { onClear: i, hasTrailingIcon: m } = v(), d = (a) => {
+    t && t(a), i && i();
+  };
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      ref: o,
+      "data-spark-component": "input-clear-button",
+      className: g(
+        n,
+        "pointer-events-auto absolute",
+        r ? "h-sz-44 top-0 -translate-y-0" : "top-1/2 -translate-y-1/2",
+        "inline-flex h-full items-center justify-center outline-hidden",
+        "text-neutral hover:text-neutral-hovered",
+        m ? "right-3xl px-sz-12" : "pl-md pr-lg right-0"
+      ),
+      tabIndex: e,
+      onClick: d,
+      type: "button",
+      ...s,
+      children: /* @__PURE__ */ l(K, { size: "sm", children: /* @__PURE__ */ l(le, {}) })
+    }
+  );
+}, W = Object.assign(U, {
+  id: "ClearButton"
+});
+U.displayName = "InputGroup.ClearButton";
+const Ie = E(["relative inline-flex w-full"], {
+  variants: {
+    /**
+     * When `true`, prevents the user from interacting.
+     */
+    disabled: {
+      true: [
+        "cursor-not-allowed",
+        "relative",
+        "after:absolute",
+        "after:top-0",
+        "after:h-full",
+        "after:w-full",
+        "after:border-sm after:border-outline",
+        "after:rounded-lg"
+      ],
+      false: "after:hidden"
+    },
+    /**
+     * Sets the component as interactive or not.
+     */
+    readOnly: {
+      true: [
+        "relative",
+        "after:absolute",
+        "after:top-0",
+        "after:h-full",
+        "after:w-full",
+        "after:border-sm after:border-outline",
+        "after:rounded-lg"
+      ],
+      false: "after:hidden"
+    }
+  }
+}), X = ({
+  className: n,
+  children: e,
+  state: t,
+  disabled: r,
+  readOnly: o,
+  onClear: s,
+  ref: i,
+  ...m
+}) => {
+  const d = (y) => y ? y.type.id : "", a = (...y) => c.find((se) => y.includes(d(se) || "")), c = P.toArray(e).filter(ue), p = a("Input"), f = p?.props || {}, h = M(null), x = M(s), V = he(p?.ref, h), [T, C] = me(
+    f.value,
+    f.defaultValue,
+    f.onValueChange
+  ), N = H(), L = N.state ?? t, I = N.disabled || !!r, b = N.readOnly || !!o, O = a("LeadingAddon"), G = a("LeadingIcon"), B = a("ClearButton"), w = a("TrailingIcon"), k = a("TrailingAddon"), A = !!O, u = !!k, _ = !!G, $ = !!w, z = !!T && !!B && !I && !b, ae = (y) => {
+    f.onChange && f.onChange(y), C(y.target.value);
+  }, q = ce(() => {
+    x.current && x.current(), C(""), h.current.focus();
+  }, [C]), re = pe(() => ({
+    state: L,
+    disabled: I,
+    readOnly: b,
+    hasLeadingIcon: _,
+    hasTrailingIcon: $,
+    hasLeadingAddon: A,
+    hasTrailingAddon: u,
+    hasClearButton: z,
+    onClear: q
+  }), [
+    L,
+    I,
+    b,
+    _,
+    $,
+    A,
+    u,
+    z,
+    q
+  ]);
+  fe(() => {
+    x.current = s;
+  }, [s]);
+  const oe = h.current?.value;
+  return /* @__PURE__ */ l(Q.Provider, { value: re, children: /* @__PURE__ */ F(
+    "div",
+    {
+      "data-spark-component": "input-group",
+      ref: i,
+      className: Ie({ disabled: I, readOnly: b, className: n }),
+      ...m,
+      children: [
+        A && O,
+        /* @__PURE__ */ F("div", { className: "relative inline-flex w-full", children: [
+          p && ge(p, {
+            value: T ?? oe ?? "",
+            ref: V,
+            defaultValue: void 0,
+            onChange: ae
+          }),
+          G,
+          z && B,
+          w
+        ] }),
+        u && k
+      ]
+    }
+  ) });
+};
+X.displayName = "InputGroup";
+const be = E(
+  [
+    "overflow-hidden",
+    "border-sm",
+    "shrink-0",
+    "h-full",
+    "focus-visible:relative focus-visible:z-raised",
+    "mx-0"
+  ],
+  {
+    variants: {
+      /**
+       * Change the component to the HTML tag or custom component of the only child.
+       */
+      asChild: { false: ["flex", "items-center", "px-lg"] },
+      intent: {
+        neutral: "border-outline",
+        error: "border-error",
+        alert: "border-alert",
+        success: "border-success"
+      },
+      /**
+       * Disable the input addon, preventing user interaction and adding opacity.
+       */
+      disabled: {
+        true: ["pointer-events-none border-outline!"]
+      },
+      /**
+       * Changes input addon styles based on the read only status from the input.
+       */
+      readOnly: {
+        true: ["pointer-events-none"]
+      },
+      /**
+       * Main style of the input addon.
+       */
+      design: {
+        text: "",
+        solid: "",
+        inline: ""
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: !1,
+        readOnly: !1,
+        design: "text",
+        class: ["bg-surface", "text-on-surface"]
+      },
+      {
+        disabled: !0,
+        design: "text",
+        class: ["text-on-surface/dim-3"]
+      },
+      {
+        disabled: !0,
+        design: ["solid", "inline"],
+        class: ["opacity-dim-3"]
+      }
+    ],
+    defaultVariants: {
+      intent: "neutral"
+    }
+  }
+), S = ({
+  asChild: n,
+  className: e,
+  children: t,
+  ref: r,
+  ...o
+}) => {
+  const { state: s, disabled: i, readOnly: m } = v(), d = typeof t == "string", a = !!(!d && n), c = d ? t : P.only(t), p = a && !d ? J : "div", h = d ? "text" : a ? "solid" : "inline";
+  return /* @__PURE__ */ l(
+    p,
+    {
+      ref: r,
+      "data-spark-component": "input-addon",
+      className: be({
+        className: e,
+        intent: s,
+        disabled: i,
+        readOnly: m,
+        asChild: a,
+        design: h
+      }),
+      ...i && { tabIndex: -1 },
+      ...o,
+      children: c
+    }
+  );
+};
+S.displayName = "InputGroup.Addon";
+const Y = ({ className: n, ref: e, ...t }) => {
+  const { disabled: r, readOnly: o } = v();
+  return /* @__PURE__ */ l("div", { className: g("rounded-l-lg", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
+    S,
+    {
+      ref: e,
+      className: g(n, "rounded-r-0! mr-[-1px] rounded-l-lg"),
+      ...t
+    }
+  ) });
+}, Z = Object.assign(Y, {
+  id: "LeadingAddon"
+});
+Y.displayName = "InputGroup.LeadingAddon";
+const D = ({ className: n, intent: e, children: t, ...r }) => {
+  const { disabled: o, readOnly: s } = v();
+  return /* @__PURE__ */ l(
+    K,
+    {
+      "data-spark-component": "input-icon",
+      intent: e,
+      className: g(
+        n,
+        "pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",
+        e ? void 0 : "text-neutral peer-focus:text-outline-high",
+        o || s ? "opacity-dim-3" : void 0
+      ),
+      ...r,
+      children: t
+    }
+  );
+};
+D.displayName = "InputGroup.Icon";
+const R = ({ className: n, ...e }) => /* @__PURE__ */ l(D, { className: g(n, "left-lg text-body-1"), ...e });
+R.id = "LeadingIcon";
+R.displayName = "InputGroup.LeadingIcon";
+const ee = ({ className: n, ref: e, ...t }) => {
+  const { disabled: r, readOnly: o } = v();
+  return /* @__PURE__ */ l("div", { className: g("rounded-r-lg", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
+    S,
+    {
+      ref: e,
+      className: g(n, "rounded-l-0! ml-[-1px] rounded-r-lg"),
+      ...t
+    }
+  ) });
+}, ne = Object.assign(ee, {
+  id: "TrailingAddon"
+});
+ee.displayName = "InputGroup.TrailingAddon";
+const j = ({ className: n, ...e }) => /* @__PURE__ */ l(D, { className: g(n, "right-lg text-body-1"), ...e });
+j.id = "TrailingIcon";
+j.displayName = "InputGroup.TrailingIcon";
+const ye = E(
+  [
+    "relative",
+    "border-sm",
+    "peer",
+    "w-full",
+    "appearance-none outline-hidden",
+    "bg-surface",
+    "text-ellipsis text-body-1 text-on-surface",
+    "caret-neutral",
+    "[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]",
+    "autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]",
+    "disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3",
+    "read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5",
+    "focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"
+  ],
+  {
+    variants: {
+      /**
+       * Change the component to the HTML tag or custom component of the only child.
+       */
+      asChild: {
+        true: ["min-h-sz-44"],
+        false: ["h-sz-44"]
+      },
+      /**
+       * Color scheme of the button.
+       */
+      intent: {
+        neutral: ["border-outline", "default:hover:border-outline-high"],
+        success: ["default:border-success"],
+        alert: ["default:border-alert"],
+        error: ["default:border-error"]
+      },
+      /**
+       * Sets if there is an addon before the input text.
+       */
+      hasLeadingAddon: {
+        true: ["rounded-l-0"],
+        false: ["rounded-l-lg"]
+      },
+      /**
+       * Sets if there is an addon after the input text.
+       */
+      hasTrailingAddon: {
+        true: ["rounded-r-0"],
+        false: ["rounded-r-lg"]
+      },
+      /**
+       * Sets if there is an icon before the input text.
+       */
+      hasLeadingIcon: {
+        true: ["pl-3xl"],
+        false: ["pl-lg"]
+      },
+      /**
+       * Sets if there is an icon after the input text.
+       */
+      hasTrailingIcon: { true: "" },
+      /**
+       * Sets if there is a button to clear the input text.
+       */
+      hasClearButton: { true: "" }
+    },
+    compoundVariants: [
+      {
+        hasTrailingIcon: !1,
+        hasClearButton: !1,
+        class: "pr-lg"
+      },
+      {
+        hasTrailingIcon: !0,
+        hasClearButton: !1,
+        class: "pr-3xl"
+      },
+      {
+        hasTrailingIcon: !1,
+        hasClearButton: !0,
+        class: "pr-3xl"
+      },
+      {
+        hasTrailingIcon: !0,
+        hasClearButton: !0,
+        class: "pr-[calc(var(--spacing-3xl)*2)]"
+      }
+    ],
+    defaultVariants: {
+      intent: "neutral"
+    }
+  }
+), te = ({
+  className: n,
+  asChild: e = !1,
+  onValueChange: t,
+  onChange: r,
+  onKeyDown: o,
+  disabled: s,
+  readOnly: i,
+  ref: m,
+  ...d
+}) => {
+  const a = H(), c = v(), { id: p, name: f, isInvalid: h, isRequired: x, description: V } = a, {
+    hasLeadingAddon: T,
+    hasTrailingAddon: C,
+    hasLeadingIcon: N,
+    hasTrailingIcon: L,
+    hasClearButton: I,
+    onClear: b
+  } = c, O = e ? J : "input", G = a.state || c.state, B = a.disabled || c.disabled || s, w = a.readOnly || c.readOnly || i, k = (u) => {
+    r && r(u), t && t(u.target.value);
+  }, A = (u) => {
+    o && o(u), I && b && u.key === "Escape" && b();
+  };
+  return /* @__PURE__ */ l(
+    O,
+    {
+      "data-spark-component": "input",
+      ref: m,
+      id: p,
+      name: f,
+      className: ye({
+        asChild: e,
+        className: n,
+        intent: G,
+        hasLeadingAddon: !!T,
+        hasTrailingAddon: !!C,
+        hasLeadingIcon: !!N,
+        hasTrailingIcon: !!L,
+        hasClearButton: !!I
+      }),
+      disabled: B,
+      readOnly: w,
+      required: x,
+      "aria-describedby": V,
+      "aria-invalid": h,
+      onChange: k,
+      onKeyDown: A,
+      ...d
+    }
+  );
+}, we = Object.assign(te, {
+  id: "Input"
+});
+te.displayName = "Input";
+const ve = Object.assign(X, {
+  LeadingAddon: Z,
+  TrailingAddon: ne,
+  LeadingIcon: R,
+  TrailingIcon: j,
+  ClearButton: W
+});
+ve.displayName = "InputGroup";
+Z.displayName = "InputGroup.LeadingAddon";
+ne.displayName = "InputGroup.TrailingAddon";
+R.displayName = "InputGroup.LeadingIcon";
+j.displayName = "InputGroup.TrailingIcon";
+W.displayName = "InputGroup.ClearButton";
 export {
-  Input,
-  InputGroup,
-  useInputGroup
+  we as Input,
+  ve as InputGroup,
+  v as useInputGroup
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map