@spark-ui/components 17.2.3 → 17.2.4-beta.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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  readOnly: 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 h-[50px] w-sz-40',\n    'border-sm rounded-md',\n    'text-center text-display-3 text-on-surface',\n    'outline-hidden',\n    'transition-colors',\n    'flex items-center justify-center',\n    // Slot that receives focus when clicking the group (first empty or last slot)\n    // Use data-[focus-target=true]:... for distinct styles\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    '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    // Read-only state (same as disabled but text stays normal)\n    'data-[readonly=true]:cursor-default',\n    'data-[readonly=true]:data-[active=false]:border-outline',\n    'data-[readonly=true]:bg-on-surface/dim-5',\n    'group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the slot\n       */\n      intent: {\n        neutral: ['data-[filled=true]:bg-neutral-container 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  const isFocusTarget = index === context.activeIndex\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-readonly={context.readOnly}\n      data-filled={!isEmpty}\n      data-focus-target={isFocusTarget}\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-sz-2\" />\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  readOnlyProp: 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  readOnly: 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  handleCopy: ClipboardEventHandler<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  readOnlyProp,\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 readOnly = field.readOnly ?? readOnlyProp\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 && !readOnly && isFocused,\n      })),\n    [maxLength, currentValue, activeIndex, isFocused, disabled, readOnly]\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 || readOnly) 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 || readOnly) return\n\n    // Allow copy/cut/paste/selectAll shortcuts even when key is in filterKeys\n    const isShortcut =\n      (e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())\n\n    // Filter keys\n    if (filterKeys.length > 0 && filterKeys.includes(e.key) && !isShortcut) {\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 handleCopy: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    e.preventDefault()\n    if (currentValue.length > 0) {\n      e.clipboardData.setData('text/plain', currentValue)\n    }\n  }\n\n  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) 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    readOnly,\n    placeholder,\n    type,\n  }\n\n  const returnValue: UseInputOTPReturn = {\n    uuid: id,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    maxLength,\n    intent,\n    currentValue,\n    activeIndex,\n    slots,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\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 the input is read-only (value visible but not editable)\n   * @default false\n   */\n  readOnly?: 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  readOnly: readOnlyProp = 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    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    currentValue,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\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    readOnlyProp,\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          'group gap-md relative inline-flex w-fit items-center default:cursor-text',\n          {\n            'cursor-not-allowed': disabled,\n            'cursor-default': readOnly,\n          },\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          readOnly={readOnly}\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          onCopy={handleCopy}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default 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={`gap-md flex ${className}`} {...props}>\n      {children}\n    </div>\n  )\n}\n\nInputOTPGroup.displayName = 'InputOTP.Group'\n","import { 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/dim-3 flex items-center justify-center ${className || ''}`}\n      {...props}\n    >\n      <div className=\"h-sz-4 w-sz-8 bg-outline rounded-full\" />\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","isEmpty","isPlaceholder","isFocusTarget","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","readOnlyProp","autoFocus","forceUppercase","filterKeys","pattern","placeholder","nameProp","uuid","useId","inputRef","useRef","containerRef","field","useFormFieldControl","id","name","disabled","readOnly","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","isShortcut","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","handleCopy","handlePaste","handleFocus","handleBlur","handleClick","ariaLabel","restOthers","accessibleNameProps","cx","InputOTPGroup","InputOTPSeparator","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"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  readOnly: 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 h-[50px] w-sz-40',\n    'border-sm rounded-md',\n    'text-center text-display-3 text-on-surface',\n    'outline-hidden',\n    'transition-colors',\n    'flex items-center justify-center',\n    // Slot that receives focus when clicking the group (first empty or last slot)\n    // Use data-[focus-target=true]:... for distinct styles\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    '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    // Read-only state (same as disabled but text stays normal)\n    'data-[readonly=true]:cursor-default',\n    'data-[readonly=true]:data-[active=false]:border-outline',\n    'data-[readonly=true]:bg-on-surface/dim-5',\n    'group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the slot\n       */\n      intent: {\n        neutral: ['data-[filled=true]:bg-neutral-container 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  const isFocusTarget = index === context.activeIndex\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-readonly={context.readOnly}\n      data-filled={!isEmpty}\n      data-focus-target={isFocusTarget}\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-sz-2\" />\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  readOnlyProp: 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  readOnly: 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  handleCopy: ClipboardEventHandler<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  readOnlyProp,\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 readOnly = field.readOnly ?? readOnlyProp\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 && !readOnly && isFocused,\n      })),\n    [maxLength, currentValue, activeIndex, isFocused, disabled, readOnly]\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 || readOnly) 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 || readOnly) return\n\n    // Allow copy/cut/paste/selectAll shortcuts even when key is in filterKeys\n    const isShortcut =\n      (e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())\n\n    // Filter keys\n    if (filterKeys.length > 0 && filterKeys.includes(e.key) && !isShortcut) {\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 handleCopy: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled) return\n\n    e.preventDefault()\n    if (currentValue.length > 0) {\n      e.clipboardData.setData('text/plain', currentValue)\n    }\n  }\n\n  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {\n    if (disabled || readOnly) 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    readOnly,\n    placeholder,\n    type,\n  }\n\n  const returnValue: UseInputOTPReturn = {\n    uuid: id,\n    inputRef,\n    containerRef,\n    name,\n    disabled,\n    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    maxLength,\n    intent,\n    currentValue,\n    activeIndex,\n    slots,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\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 extends Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'inputMode'\n> {\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 the input is read-only (value visible but not editable)\n   * @default false\n   */\n  readOnly?: 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  readOnly: readOnlyProp = 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    readOnly,\n    isInvalid,\n    isRequired,\n    description,\n    currentValue,\n    contextValue,\n    handleChange,\n    handleKeyDown,\n    handleCopy,\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    readOnlyProp,\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          'group gap-md relative inline-flex w-fit items-center default:cursor-text',\n          {\n            'cursor-not-allowed': disabled,\n            'cursor-default': readOnly,\n          },\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          readOnly={readOnly}\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          onCopy={handleCopy}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default 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={`gap-md flex ${className}`} {...props}>\n      {children}\n    </div>\n  )\n}\n\nInputOTPGroup.displayName = 'InputOTP.Group'\n","import { 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/dim-3 flex items-center justify-center ${className || ''}`}\n      {...props}\n    >\n      <div className=\"h-sz-4 w-sz-8 bg-outline rounded-full\" />\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"],"mappings":"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"}

package/dist/kbd/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=({className:e,ref:o,...t})=>n.jsx("kbd",{"data-spark-component":"kbd",ref:o,className:["border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap",e].join(" "),...t});exports.Kbd=r;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`react/jsx-runtime`);var t=({className:t,ref:n,...r})=>(0,e.jsx)(`kbd`,{"data-spark-component":`kbd`,ref:n,className:[`border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap`,t].join(` `),...r});exports.Kbd=t;
+//# sourceMappingURL=index.js.map

package/dist/kbd/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/kbd/Kbd.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nexport type KbdProps = ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {\n  return (\n    <kbd\n      data-spark-component=\"kbd\"\n      ref={ref}\n      className={[\n        'border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap',\n        className,\n      ].join(' ')}\n      {...props}\n    />\n  )\n}\n"],"names":["Kbd","className","ref","props","jsx"],"mappings":"qHAMaA,EAAM,CAAC,CAAE,UAAAC,EAAW,IAAAC,EAAK,GAAGC,KAErCC,EAAAA,IAAC,MAAA,CACC,uBAAqB,MACrB,IAAAF,EACA,UAAW,CACT,gJACAD,CAAA,EACA,KAAK,GAAG,EACT,GAAGE,CAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/kbd/Kbd.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nexport type KbdProps = ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {\n  return (\n    <kbd\n      data-spark-component=\"kbd\"\n      ref={ref}\n      className={[\n        'border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap',\n        className,\n      ].join(' ')}\n      {...props}\n    />\n  )\n}\n"],"mappings":"sIAMA,IAAa,GAAO,CAAE,YAAW,MAAK,GAAG,MAErC,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,MAChB,MACL,UAAW,CACT,gJACA,EACD,CAAC,KAAK,IAAI,CACX,GAAI,EACJ,CAAA"}

package/dist/kbd/index.mjs

@@ -1,17 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-const d = ({ className: o, ref: e, ...n }) => /* @__PURE__ */ r(
-  "kbd",
-  {
-    "data-spark-component": "kbd",
-    ref: e,
-    className: [
-      "border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap",
-      o
-    ].join(" "),
-    ...n
-  }
-);
-export {
-  d as Kbd
-};
-//# sourceMappingURL=index.mjs.map
+import { jsx as e } from "react/jsx-runtime";
+//#region src/kbd/Kbd.tsx
+var t = ({ className: t, ref: n, ...r }) => /* @__PURE__ */ e("kbd", {
+	"data-spark-component": "kbd",
+	ref: n,
+	className: ["border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap", t].join(" "),
+	...r
+});
+//#endregion
+export { t as Kbd };
+
+//# sourceMappingURL=index.mjs.map

package/dist/kbd/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/kbd/Kbd.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nexport type KbdProps = ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {\n  return (\n    <kbd\n      data-spark-component=\"kbd\"\n      ref={ref}\n      className={[\n        'border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap',\n        className,\n      ].join(' ')}\n      {...props}\n    />\n  )\n}\n"],"names":["Kbd","className","ref","props","jsx"],"mappings":";AAMO,MAAMA,IAAM,CAAC,EAAE,WAAAC,GAAW,KAAAC,GAAK,GAAGC,QAErC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,wBAAqB;AAAA,IACrB,KAAAF;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACAD;AAAA,IAAA,EACA,KAAK,GAAG;AAAA,IACT,GAAGE;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/kbd/Kbd.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nexport type KbdProps = ComponentPropsWithoutRef<'div'> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Kbd = ({ className, ref, ...props }: PropsWithChildren<KbdProps>) => {\n  return (\n    <kbd\n      data-spark-component=\"kbd\"\n      ref={ref}\n      className={[\n        'border-sm border-b-md border-outline bg-neutral-container pe-md ps-md text-caption rounded-sm font-mono leading-4 font-bold whitespace-nowrap',\n        className,\n      ].join(' ')}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;AAMA,IAAa,KAAO,EAAE,cAAW,QAAK,GAAG,QAErC,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,WAAW,CACT,iJACA,EACD,CAAC,KAAK,IAAI;CACX,GAAI;CACJ,CAAA"}

package/dist/label/index.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("class-variance-authority"),c=require("radix-ui"),s=({className:e,ref:a,...t})=>i.jsx(c.Label.Label,{ref:a,"data-spark-component":"label",className:n.cx("text-body-1",e),...t});s.displayName="Label";const r=({className:e,children:a="*",ref:t,...o})=>i.jsx("span",{ref:t,"data-spark-component":"label-required-indicator",role:"presentation","aria-hidden":"true",className:n.cx(e,"text-caption text-on-surface/dim-1"),...o,children:a});r.displayName="Label.RequiredIndicator";const l=Object.assign(s,{RequiredIndicator:r});l.displayName="Label";r.displayName="Label.RequiredIndicator";exports.Label=l;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../label-DU0p0d-f.js`);exports.Label=e.t;

package/dist/label/index.mjs

@@ -1,40 +1,2 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cx as o } from "class-variance-authority";
-import { Label as d } from "radix-ui";
-const l = ({ className: a, ref: e, ...r }) => /* @__PURE__ */ i(
-  d.Label,
-  {
-    ref: e,
-    "data-spark-component": "label",
-    className: o("text-body-1", a),
-    ...r
-  }
-);
-l.displayName = "Label";
-const t = ({
-  className: a,
-  children: e = "*",
-  ref: r,
-  ...n
-}) => /* @__PURE__ */ i(
-  "span",
-  {
-    ref: r,
-    "data-spark-component": "label-required-indicator",
-    role: "presentation",
-    "aria-hidden": "true",
-    className: o(a, "text-caption text-on-surface/dim-1"),
-    ...n,
-    children: e
-  }
-);
-t.displayName = "Label.RequiredIndicator";
-const s = Object.assign(l, {
-  RequiredIndicator: t
-});
-s.displayName = "Label";
-t.displayName = "Label.RequiredIndicator";
-export {
-  s as Label
-};
-//# sourceMappingURL=index.mjs.map
+import { t as e } from "../label-BqRlrca0.mjs";
+export { e as Label };

package/dist/label-BqRlrca0.mjs

@@ -0,0 +1,31 @@
+import { cx as e } from "class-variance-authority";
+import { Label as t } from "radix-ui";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/label/Label.tsx
+var r = ({ className: r, ref: i, ...a }) => /* @__PURE__ */ n(t.Label, {
+	ref: i,
+	"data-spark-component": "label",
+	className: e("text-body-1", r),
+	...a
+});
+r.displayName = "Label";
+//#endregion
+//#region src/label/LabelRequiredIndicator.tsx
+var i = ({ className: t, children: r = "*", ref: i, ...a }) => /* @__PURE__ */ n("span", {
+	ref: i,
+	"data-spark-component": "label-required-indicator",
+	role: "presentation",
+	"aria-hidden": "true",
+	className: e(t, "text-caption text-on-surface/dim-1"),
+	...a,
+	children: r
+});
+i.displayName = "Label.RequiredIndicator";
+//#endregion
+//#region src/label/index.ts
+var a = Object.assign(r, { RequiredIndicator: i });
+a.displayName = "Label", i.displayName = "Label.RequiredIndicator";
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=label-BqRlrca0.mjs.map

package/dist/label-BqRlrca0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-BqRlrca0.mjs","names":[],"sources":["../src/label/Label.tsx","../src/label/LabelRequiredIndicator.tsx","../src/label/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Label as RadixLabel } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type LabelProps = RadixLabel.LabelProps & {\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const Label = ({ className, ref, ...others }: LabelProps) => {\n  return (\n    <RadixLabel.Label\n      ref={ref}\n      data-spark-component=\"label\"\n      className={cx('text-body-1', className)}\n      {...others}\n    />\n  )\n}\n\nLabel.displayName = 'Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nexport type LabelRequiredIndicatorProps = ComponentPropsWithRef<'span'>\n\nexport const LabelRequiredIndicator = ({\n  className,\n  children = '*',\n  ref,\n  ...others\n}: LabelRequiredIndicatorProps) => {\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"label-required-indicator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cx(className, 'text-caption text-on-surface/dim-1')}\n      {...others}\n    >\n      {children}\n    </span>\n  )\n}\n\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n","import { Label as Root } from './Label'\nimport { LabelRequiredIndicator } from './LabelRequiredIndicator'\n\nexport const Label: typeof Root & {\n  RequiredIndicator: typeof LabelRequiredIndicator\n} = Object.assign(Root, {\n  RequiredIndicator: LabelRequiredIndicator,\n})\n\nLabel.displayName = 'Label'\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n\nexport type { LabelProps } from './Label'\nexport type { LabelRequiredIndicatorProps } from './LabelRequiredIndicator'\n"],"mappings":";;;;AAQA,IAAa,KAAS,EAAE,cAAW,QAAK,GAAG,QAEvC,kBAAC,EAAW,OAAZ;CACO;CACL,wBAAqB;CACrB,WAAW,EAAG,eAAe,EAAU;CACvC,GAAI;CACJ,CAAA;AAIN,EAAM,cAAc;;;ACdpB,IAAa,KAA0B,EACrC,cACA,cAAW,KACX,QACA,GAAG,QAGD,kBAAC,QAAD;CACO;CACL,wBAAqB;CACrB,MAAK;CACL,eAAY;CACZ,WAAW,EAAG,GAAW,qCAAqC;CAC9D,GAAI;CAEH;CACI,CAAA;AAIX,EAAuB,cAAc;;;ACtBrC,IAAa,IAET,OAAO,OAAO,GAAM,EACtB,mBAAmB,GACpB,CAAC;AAEF,EAAM,cAAc,SACpB,EAAuB,cAAc"}

package/dist/label-DU0p0d-f.js

@@ -0,0 +1,2 @@
+require(`./chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`radix-ui`),n=require(`react/jsx-runtime`);var r=({className:r,ref:i,...a})=>(0,n.jsx)(t.Label.Label,{ref:i,"data-spark-component":`label`,className:(0,e.cx)(`text-body-1`,r),...a});r.displayName=`Label`;var i=({className:t,children:r=`*`,ref:i,...a})=>(0,n.jsx)(`span`,{ref:i,"data-spark-component":`label-required-indicator`,role:`presentation`,"aria-hidden":`true`,className:(0,e.cx)(t,`text-caption text-on-surface/dim-1`),...a,children:r});i.displayName=`Label.RequiredIndicator`;var a=Object.assign(r,{RequiredIndicator:i});a.displayName=`Label`,i.displayName=`Label.RequiredIndicator`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=label-DU0p0d-f.js.map

package/dist/label-DU0p0d-f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-DU0p0d-f.js","names":[],"sources":["../src/label/Label.tsx","../src/label/LabelRequiredIndicator.tsx","../src/label/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Label as RadixLabel } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type LabelProps = RadixLabel.LabelProps & {\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const Label = ({ className, ref, ...others }: LabelProps) => {\n  return (\n    <RadixLabel.Label\n      ref={ref}\n      data-spark-component=\"label\"\n      className={cx('text-body-1', className)}\n      {...others}\n    />\n  )\n}\n\nLabel.displayName = 'Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nexport type LabelRequiredIndicatorProps = ComponentPropsWithRef<'span'>\n\nexport const LabelRequiredIndicator = ({\n  className,\n  children = '*',\n  ref,\n  ...others\n}: LabelRequiredIndicatorProps) => {\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"label-required-indicator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cx(className, 'text-caption text-on-surface/dim-1')}\n      {...others}\n    >\n      {children}\n    </span>\n  )\n}\n\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n","import { Label as Root } from './Label'\nimport { LabelRequiredIndicator } from './LabelRequiredIndicator'\n\nexport const Label: typeof Root & {\n  RequiredIndicator: typeof LabelRequiredIndicator\n} = Object.assign(Root, {\n  RequiredIndicator: LabelRequiredIndicator,\n})\n\nLabel.displayName = 'Label'\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n\nexport type { LabelProps } from './Label'\nexport type { LabelRequiredIndicatorProps } from './LabelRequiredIndicator'\n"],"mappings":"8HAQA,IAAa,GAAS,CAAE,YAAW,MAAK,GAAG,MAEvC,EAAA,EAAA,KAAC,EAAA,MAAW,MAAZ,CACO,MACL,uBAAqB,QACrB,WAAA,EAAA,EAAA,IAAc,cAAe,EAAU,CACvC,GAAI,EACJ,CAAA,CAIN,EAAM,YAAc,QCdpB,IAAa,GAA0B,CACrC,YACA,WAAW,IACX,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,OAAD,CACO,MACL,uBAAqB,2BACrB,KAAK,eACL,cAAY,OACZ,WAAA,EAAA,EAAA,IAAc,EAAW,qCAAqC,CAC9D,GAAI,EAEH,WACI,CAAA,CAIX,EAAuB,YAAc,0BCtBrC,IAAa,EAET,OAAO,OAAO,EAAM,CACtB,kBAAmB,EACpB,CAAC,CAEF,EAAM,YAAc,QACpB,EAAuB,YAAc"}

package/dist/link-box/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("class-variance-authority"),r=require("../Slot-DQ8z2zsy.js"),c=({className:e,asChild:o,ref:n,...a})=>{const t=o?r.Slot:"div";return s.jsx(t,{ref:n,"data-spark-component":"link-box",className:l.cx("default:relative",e),...a})};c.displayName="LinkBox";const k=({className:e,asChild:o,ref:n,...a})=>{const t=o?r.Slot:"a";return s.jsx(t,{ref:n,"data-spark-component":"link-box-link",className:l.cx("before:z-base static before:absolute before:top-0 before:left-0 before:block before:size-full before:content-['']",e),...a})};k.displayName="LinkBox.Link";const d=({className:e,...o})=>s.jsx(r.Slot,{className:l.cx("default:z-raised default:relative",e),...o});d.displayName="LinkBox.Raised";const i=Object.assign(c,{Link:k,Raised:d});i.displayName="LinkBox";i.Link.displayName="LinkBox.Link";i.Raised.displayName="LinkBox.Raised";exports.LinkBox=i;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=({className:r,asChild:i,ref:a,...o})=>(0,n.jsx)(i?e.Slot:`div`,{ref:a,"data-spark-component":`link-box`,className:(0,t.cx)(`default:relative`,r),...o});r.displayName=`LinkBox`;var i=({className:r,asChild:i,ref:a,...o})=>(0,n.jsx)(i?e.Slot:`a`,{ref:a,"data-spark-component":`link-box-link`,className:(0,t.cx)(`before:z-base static before:absolute before:top-0 before:left-0 before:block before:size-full before:content-['']`,r),...o});i.displayName=`LinkBox.Link`;var a=({className:r,...i})=>(0,n.jsx)(e.Slot,{className:(0,t.cx)(`default:z-raised default:relative`,r),...i});a.displayName=`LinkBox.Raised`;var o=Object.assign(r,{Link:i,Raised:a});o.displayName=`LinkBox`,o.Link.displayName=`LinkBox.Link`,o.Raised.displayName=`LinkBox.Raised`,exports.LinkBox=o;
+//# sourceMappingURL=index.js.map

package/dist/link-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/link-box/LinkBox.tsx","../../src/link-box/LinkBoxLink.tsx","../../src/link-box/LinkBoxRaised.tsx","../../src/link-box/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxProps extends ComponentPropsWithRef<'div'> {\n  asChild?: boolean\n}\n\nexport const LinkBox = ({ className, asChild, ref, ...props }: LinkBoxProps) => {\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"link-box\"\n      className={cx('default:relative', className)}\n      {...props}\n    />\n  )\n}\n\nLinkBox.displayName = 'LinkBox'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxLinkProps extends ComponentPropsWithRef<'a'> {\n  asChild?: boolean\n}\n\nexport const LinkBoxLink = ({ className, asChild, ref, ...props }: LinkBoxLinkProps) => {\n  const Component = asChild ? Slot : 'a'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"link-box-link\"\n      className={cx(\n        \"before:z-base static before:absolute before:top-0 before:left-0 before:block before:size-full before:content-['']\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nLinkBoxLink.displayName = 'LinkBox.Link'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxRaisedProps {\n  className?: string\n  children: ReactNode\n}\n\nexport const LinkBoxRaised = ({ className, ...props }: LinkBoxRaisedProps) => {\n  return <Slot className={cx('default:z-raised default:relative', className)} {...props} />\n}\n\nLinkBoxRaised.displayName = 'LinkBox.Raised'\n","import { LinkBox as Root } from './LinkBox'\nimport { LinkBoxLink } from './LinkBoxLink'\nimport { LinkBoxRaised } from './LinkBoxRaised'\n\nexport const LinkBox: typeof Root & {\n  Link: typeof LinkBoxLink\n  Raised: typeof LinkBoxRaised\n} = Object.assign(Root, { Link: LinkBoxLink, Raised: LinkBoxRaised })\n\nLinkBox.displayName = 'LinkBox'\nLinkBox.Link.displayName = 'LinkBox.Link'\nLinkBox.Raised.displayName = 'LinkBox.Raised'\n\nexport { type LinkBoxProps } from './LinkBox'\nexport { type LinkBoxLinkProps } from './LinkBoxLink'\n"],"names":["LinkBox","className","asChild","ref","props","Component","Slot","jsx","cx","LinkBoxLink","LinkBoxRaised","Root"],"mappings":"4LASaA,EAAU,CAAC,CAAE,UAAAC,EAAW,QAAAC,EAAS,IAAAC,EAAK,GAAGC,KAA0B,CAC9E,MAAMC,EAAYH,EAAUI,EAAAA,KAAO,MAEnC,OACEC,EAAAA,IAACF,EAAA,CACC,IAAAF,EACA,uBAAqB,WACrB,UAAWK,EAAAA,GAAG,mBAAoBP,CAAS,EAC1C,GAAGG,CAAA,CAAA,CAGV,EAEAJ,EAAQ,YAAc,UCbf,MAAMS,EAAc,CAAC,CAAE,UAAAR,EAAW,QAAAC,EAAS,IAAAC,EAAK,GAAGC,KAA8B,CACtF,MAAMC,EAAYH,EAAUI,EAAAA,KAAO,IAEnC,OACEC,EAAAA,IAACF,EAAA,CACC,IAAAF,EACA,uBAAqB,gBACrB,UAAWK,EAAAA,GACT,oHACAP,CAAA,EAED,GAAGG,CAAA,CAAA,CAGV,EAEAK,EAAY,YAAc,eCfnB,MAAMC,EAAgB,CAAC,CAAE,UAAAT,EAAW,GAAGG,KACrCG,EAAAA,IAACD,QAAK,UAAWE,EAAAA,GAAG,oCAAqCP,CAAS,EAAI,GAAGG,EAAO,EAGzFM,EAAc,YAAc,iBCVrB,MAAMV,EAGT,OAAO,OAAOW,EAAM,CAAE,KAAMF,EAAa,OAAQC,CAAA,CAAe,EAEpEV,EAAQ,YAAc,UACtBA,EAAQ,KAAK,YAAc,eAC3BA,EAAQ,OAAO,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/link-box/LinkBox.tsx","../../src/link-box/LinkBoxLink.tsx","../../src/link-box/LinkBoxRaised.tsx","../../src/link-box/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxProps extends ComponentPropsWithRef<'div'> {\n  asChild?: boolean\n}\n\nexport const LinkBox = ({ className, asChild, ref, ...props }: LinkBoxProps) => {\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"link-box\"\n      className={cx('default:relative', className)}\n      {...props}\n    />\n  )\n}\n\nLinkBox.displayName = 'LinkBox'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxLinkProps extends ComponentPropsWithRef<'a'> {\n  asChild?: boolean\n}\n\nexport const LinkBoxLink = ({ className, asChild, ref, ...props }: LinkBoxLinkProps) => {\n  const Component = asChild ? Slot : 'a'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"link-box-link\"\n      className={cx(\n        \"before:z-base static before:absolute before:top-0 before:left-0 before:block before:size-full before:content-['']\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nLinkBoxLink.displayName = 'LinkBox.Link'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxRaisedProps {\n  className?: string\n  children: ReactNode\n}\n\nexport const LinkBoxRaised = ({ className, ...props }: LinkBoxRaisedProps) => {\n  return <Slot className={cx('default:z-raised default:relative', className)} {...props} />\n}\n\nLinkBoxRaised.displayName = 'LinkBox.Raised'\n","import { LinkBox as Root } from './LinkBox'\nimport { LinkBoxLink } from './LinkBoxLink'\nimport { LinkBoxRaised } from './LinkBoxRaised'\n\nexport const LinkBox: typeof Root & {\n  Link: typeof LinkBoxLink\n  Raised: typeof LinkBoxRaised\n} = Object.assign(Root, { Link: LinkBoxLink, Raised: LinkBoxRaised })\n\nLinkBox.displayName = 'LinkBox'\nLinkBox.Link.displayName = 'LinkBox.Link'\nLinkBox.Raised.displayName = 'LinkBox.Raised'\n\nexport { type LinkBoxProps } from './LinkBox'\nexport { type LinkBoxLinkProps } from './LinkBoxLink'\n"],"mappings":"gNASA,IAAa,GAAW,CAAE,YAAW,UAAS,MAAK,GAAG,MAIlD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,MAGjC,CACO,MACL,uBAAqB,WACrB,WAAA,EAAA,EAAA,IAAc,mBAAoB,EAAU,CAC5C,GAAI,EACJ,CAAA,CAIN,EAAQ,YAAc,UCbtB,IAAa,GAAe,CAAE,YAAW,UAAS,MAAK,GAAG,MAItD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,IAGjC,CACO,MACL,uBAAqB,gBACrB,WAAA,EAAA,EAAA,IACE,oHACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,EAAY,YAAc,eCf1B,IAAa,GAAiB,CAAE,YAAW,GAAG,MACrC,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,WAAA,EAAA,EAAA,IAAc,oCAAqC,EAAU,CAAE,GAAI,EAAS,CAAA,CAG3F,EAAc,YAAc,iBCV5B,IAAa,EAGT,OAAO,OAAO,EAAM,CAAE,KAAM,EAAa,OAAQ,EAAe,CAAC,CAErE,EAAQ,YAAc,UACtB,EAAQ,KAAK,YAAc,eAC3B,EAAQ,OAAO,YAAc"}

package/dist/link-box/index.mjs

@@ -1,36 +1,38 @@
-import { jsx as i } from "react/jsx-runtime";
+import { Slot as e } from "../slot/index.mjs";
 import { cx as t } from "class-variance-authority";
-import { S as s } from "../Slot-DLY1rJrG.mjs";
-const l = ({ className: e, asChild: o, ref: n, ...a }) => /* @__PURE__ */ i(
-  o ? s : "div",
-  {
-    ref: n,
-    "data-spark-component": "link-box",
-    className: t("default:relative", e),
-    ...a
-  }
-);
-l.displayName = "LinkBox";
-const k = ({ className: e, asChild: o, ref: n, ...a }) => /* @__PURE__ */ i(
-  o ? s : "a",
-  {
-    ref: n,
-    "data-spark-component": "link-box-link",
-    className: t(
-      "before:z-base static before:absolute before:top-0 before:left-0 before:block before:size-full before:content-['']",
-      e
-    ),
-    ...a
-  }
-);
-k.displayName = "LinkBox.Link";
-const m = ({ className: e, ...o }) => /* @__PURE__ */ i(s, { className: t("default:z-raised default:relative", e), ...o });
-m.displayName = "LinkBox.Raised";
-const r = Object.assign(l, { Link: k, Raised: m });
+import { jsx as n } from "react/jsx-runtime";
+//#region src/link-box/LinkBox.tsx
+var r = ({ className: r, asChild: i, ref: a, ...o }) => /* @__PURE__ */ n(i ? e : "div", {
+	ref: a,
+	"data-spark-component": "link-box",
+	className: t("default:relative", r),
+	...o
+});
 r.displayName = "LinkBox";
-r.Link.displayName = "LinkBox.Link";
-r.Raised.displayName = "LinkBox.Raised";
-export {
-  r as LinkBox
-};
-//# sourceMappingURL=index.mjs.map
+//#endregion
+//#region src/link-box/LinkBoxLink.tsx
+var i = ({ className: r, asChild: i, ref: a, ...o }) => /* @__PURE__ */ n(i ? e : "a", {
+	ref: a,
+	"data-spark-component": "link-box-link",
+	className: t("before:z-base static before:absolute before:top-0 before:left-0 before:block before:size-full before:content-['']", r),
+	...o
+});
+i.displayName = "LinkBox.Link";
+//#endregion
+//#region src/link-box/LinkBoxRaised.tsx
+var a = ({ className: r, ...i }) => /* @__PURE__ */ n(e, {
+	className: t("default:z-raised default:relative", r),
+	...i
+});
+a.displayName = "LinkBox.Raised";
+//#endregion
+//#region src/link-box/index.ts
+var o = Object.assign(r, {
+	Link: i,
+	Raised: a
+});
+o.displayName = "LinkBox", o.Link.displayName = "LinkBox.Link", o.Raised.displayName = "LinkBox.Raised";
+//#endregion
+export { o as LinkBox };
+
+//# sourceMappingURL=index.mjs.map

package/dist/link-box/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/link-box/LinkBox.tsx","../../src/link-box/LinkBoxLink.tsx","../../src/link-box/LinkBoxRaised.tsx","../../src/link-box/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxProps extends ComponentPropsWithRef<'div'> {\n  asChild?: boolean\n}\n\nexport const LinkBox = ({ className, asChild, ref, ...props }: LinkBoxProps) => {\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"link-box\"\n      className={cx('default:relative', className)}\n      {...props}\n    />\n  )\n}\n\nLinkBox.displayName = 'LinkBox'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxLinkProps extends ComponentPropsWithRef<'a'> {\n  asChild?: boolean\n}\n\nexport const LinkBoxLink = ({ className, asChild, ref, ...props }: LinkBoxLinkProps) => {\n  const Component = asChild ? Slot : 'a'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"link-box-link\"\n      className={cx(\n        \"before:z-base static before:absolute before:top-0 before:left-0 before:block before:size-full before:content-['']\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nLinkBoxLink.displayName = 'LinkBox.Link'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxRaisedProps {\n  className?: string\n  children: ReactNode\n}\n\nexport const LinkBoxRaised = ({ className, ...props }: LinkBoxRaisedProps) => {\n  return <Slot className={cx('default:z-raised default:relative', className)} {...props} />\n}\n\nLinkBoxRaised.displayName = 'LinkBox.Raised'\n","import { LinkBox as Root } from './LinkBox'\nimport { LinkBoxLink } from './LinkBoxLink'\nimport { LinkBoxRaised } from './LinkBoxRaised'\n\nexport const LinkBox: typeof Root & {\n  Link: typeof LinkBoxLink\n  Raised: typeof LinkBoxRaised\n} = Object.assign(Root, { Link: LinkBoxLink, Raised: LinkBoxRaised })\n\nLinkBox.displayName = 'LinkBox'\nLinkBox.Link.displayName = 'LinkBox.Link'\nLinkBox.Raised.displayName = 'LinkBox.Raised'\n\nexport { type LinkBoxProps } from './LinkBox'\nexport { type LinkBoxLinkProps } from './LinkBoxLink'\n"],"names":["LinkBox","className","asChild","ref","props","jsx","Slot","cx","LinkBoxLink","LinkBoxRaised","Root"],"mappings":";;;AASO,MAAMA,IAAU,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,KAAAC,GAAK,GAAGC,QAIlD,gBAAAC;AAAA,EAHgBH,IAAUI,IAAO;AAAA,EAGhC;AAAA,IACC,KAAAH;AAAA,IACA,wBAAqB;AAAA,IACrB,WAAWI,EAAG,oBAAoBN,CAAS;AAAA,IAC1C,GAAGG;AAAA,EAAA;AAAA;AAKVJ,EAAQ,cAAc;ACbf,MAAMQ,IAAc,CAAC,EAAE,WAAAP,GAAW,SAAAC,GAAS,KAAAC,GAAK,GAAGC,QAItD,gBAAAC;AAAA,EAHgBH,IAAUI,IAAO;AAAA,EAGhC;AAAA,IACC,KAAAH;AAAA,IACA,wBAAqB;AAAA,IACrB,WAAWI;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,EAAA;AAAA;AAKVI,EAAY,cAAc;ACfnB,MAAMC,IAAgB,CAAC,EAAE,WAAAR,GAAW,GAAGG,QACrC,gBAAAC,EAACC,KAAK,WAAWC,EAAG,qCAAqCN,CAAS,GAAI,GAAGG,GAAO;AAGzFK,EAAc,cAAc;ACVrB,MAAMT,IAGT,OAAO,OAAOU,GAAM,EAAE,MAAMF,GAAa,QAAQC,EAAA,CAAe;AAEpET,EAAQ,cAAc;AACtBA,EAAQ,KAAK,cAAc;AAC3BA,EAAQ,OAAO,cAAc;"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/link-box/LinkBox.tsx","../../src/link-box/LinkBoxLink.tsx","../../src/link-box/LinkBoxRaised.tsx","../../src/link-box/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxProps extends ComponentPropsWithRef<'div'> {\n  asChild?: boolean\n}\n\nexport const LinkBox = ({ className, asChild, ref, ...props }: LinkBoxProps) => {\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"link-box\"\n      className={cx('default:relative', className)}\n      {...props}\n    />\n  )\n}\n\nLinkBox.displayName = 'LinkBox'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxLinkProps extends ComponentPropsWithRef<'a'> {\n  asChild?: boolean\n}\n\nexport const LinkBoxLink = ({ className, asChild, ref, ...props }: LinkBoxLinkProps) => {\n  const Component = asChild ? Slot : 'a'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"link-box-link\"\n      className={cx(\n        \"before:z-base static before:absolute before:top-0 before:left-0 before:block before:size-full before:content-['']\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nLinkBoxLink.displayName = 'LinkBox.Link'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface LinkBoxRaisedProps {\n  className?: string\n  children: ReactNode\n}\n\nexport const LinkBoxRaised = ({ className, ...props }: LinkBoxRaisedProps) => {\n  return <Slot className={cx('default:z-raised default:relative', className)} {...props} />\n}\n\nLinkBoxRaised.displayName = 'LinkBox.Raised'\n","import { LinkBox as Root } from './LinkBox'\nimport { LinkBoxLink } from './LinkBoxLink'\nimport { LinkBoxRaised } from './LinkBoxRaised'\n\nexport const LinkBox: typeof Root & {\n  Link: typeof LinkBoxLink\n  Raised: typeof LinkBoxRaised\n} = Object.assign(Root, { Link: LinkBoxLink, Raised: LinkBoxRaised })\n\nLinkBox.displayName = 'LinkBox'\nLinkBox.Link.displayName = 'LinkBox.Link'\nLinkBox.Raised.displayName = 'LinkBox.Raised'\n\nexport { type LinkBoxProps } from './LinkBox'\nexport { type LinkBoxLinkProps } from './LinkBoxLink'\n"],"mappings":";;;;AASA,IAAa,KAAW,EAAE,cAAW,YAAS,QAAK,GAAG,QAIlD,kBAHgB,IAAU,IAAO,OAGjC;CACO;CACL,wBAAqB;CACrB,WAAW,EAAG,oBAAoB,EAAU;CAC5C,GAAI;CACJ,CAAA;AAIN,EAAQ,cAAc;;;ACbtB,IAAa,KAAe,EAAE,cAAW,YAAS,QAAK,GAAG,QAItD,kBAHgB,IAAU,IAAO,KAGjC;CACO;CACL,wBAAqB;CACrB,WAAW,EACT,qHACA,EACD;CACD,GAAI;CACJ,CAAA;AAIN,EAAY,cAAc;;;ACf1B,IAAa,KAAiB,EAAE,cAAW,GAAG,QACrC,kBAAC,GAAD;CAAM,WAAW,EAAG,qCAAqC,EAAU;CAAE,GAAI;CAAS,CAAA;AAG3F,EAAc,cAAc;;;ACV5B,IAAa,IAGT,OAAO,OAAO,GAAM;CAAE,MAAM;CAAa,QAAQ;CAAe,CAAC;AAErE,EAAQ,cAAc,WACtB,EAAQ,KAAK,cAAc,gBAC3B,EAAQ,OAAO,cAAc"}

package/dist/meter/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),f=require("@base-ui/react/meter"),b=require("class-variance-authority"),s=require("react"),N=require("@spark-ui/hooks/use-merge-refs"),x=s.createContext(null),R=":meter",y=()=>{const t=s.useContext(x);if(!t)throw new Error("useMeter must be used within a Meter provider");return t},h=({className:t,value:r,max:a=100,min:n=0,shape:o="rounded",intent:e="support",children:c,ref:i,...u})=>{const[l,d]=s.useState(),v=s.useMemo(()=>({value:r??0,max:a,min:n,intent:e,shape:o,onLabelId:d}),[a,n,r,e,o,d]);return m.jsx(x.Provider,{value:v,children:m.jsx(f.Meter.Root,{"data-spark-component":"meter",ref:i,className:b.cx("gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]",t),value:r,max:a,min:n,"aria-labelledby":l,...u,children:c})})};h.displayName="Meter";const p=({id:t,children:r,ref:a,...n})=>{const o=`${R}-label-${s.useId()}`,e=t||o,{onLabelId:c}=y(),i=s.useCallback(l=>{c(l?e:void 0)},[e,c]),u=N.useMergeRefs(a,i);return m.jsx(f.Meter.Label,{"data-spark-component":"meter-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:r})};p.displayName="Meter.Label";const I=b.cva(["relative col-span-2","h-sz-8 w-full","transform-gpu overflow-hidden","bg-on-background/dim-4"]),j=b.cva(["size-full","ease-standard transition-[width] duration-700","motion-reduce:transition-none"],{variants:{intent:{main:["bg-main"],support:["bg-support"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"]},shape:{square:[],rounded:["rounded-sm"]}}});function w(t,r,a={}){const{threshold:n=.1,rootMargin:o}=a,e=s.useRef(!1),c=s.useRef(r);return s.useEffect(()=>{c.current=r},[r]),s.useEffect(()=>{const i=t.current;if(!i||e.current)return;const u=new IntersectionObserver(l=>{l.forEach(d=>{d.isIntersecting&&!e.current&&requestAnimationFrame(()=>{e.current||(e.current=!0,c.current(),u.disconnect())})})},{threshold:n,rootMargin:o});return u.observe(i),()=>{u.disconnect()}},[t,n,o]),e.current}const M=({className:t,...r})=>{const{value:a,max:n,min:o,intent:e,shape:c}=y(),i=(a-o)/(n-o)*100,u=s.useRef(null),[l,d]=s.useState(!1);return w(u,()=>{d(!0)}),m.jsx(f.Meter.Track,{ref:u,"data-spark-component":"meter-track",className:b.cx(I(),{"rounded-sm":c==="rounded"},t),...r,children:m.jsx(f.Meter.Indicator,{"data-spark-component":"meter-indicator",className:j({intent:e,shape:c}),style:{width:l?`${i}%`:"0%"}})})};M.displayName="Meter.Track";const g=({className:t,children:r,...a})=>m.jsx(f.Meter.Value,{"data-spark-component":"meter-value",className:b.cx("default:text-body-1 text-on-surface","col-start-2 text-right",t),...a,children:r});g.displayName="Meter.Value";const k=Object.assign(h,{Label:p,Track:M,Value:g});k.displayName="Meter";p.displayName="Meter.Label";M.displayName="Meter.Track";g.displayName="Meter.Value";exports.Meter=k;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/hooks/use-merge-refs`),i=require(`@base-ui/react/meter`);var a=(0,t.createContext)(null),o=`:meter`,s=()=>{let e=(0,t.useContext)(a);if(!e)throw Error(`useMeter must be used within a Meter provider`);return e},c=({className:r,value:o,max:s=100,min:c=0,shape:l=`rounded`,intent:u=`support`,children:d,ref:f,...p})=>{let[m,h]=(0,t.useState)(),g=(0,t.useMemo)(()=>({value:o??0,max:s,min:c,intent:u,shape:l,onLabelId:h}),[s,c,o,u,l,h]);return(0,n.jsx)(a.Provider,{value:g,children:(0,n.jsx)(i.Meter.Root,{"data-spark-component":`meter`,ref:f,className:(0,e.cx)(`gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]`,r),value:o,max:s,min:c,"aria-labelledby":m,...p,children:d})})};c.displayName=`Meter`;var l=({id:e,children:a,ref:c,...l})=>{let u=`${o}-label-${(0,t.useId)()}`,d=e||u,{onLabelId:f}=s(),p=(0,r.useMergeRefs)(c,(0,t.useCallback)(e=>{f(e?d:void 0)},[d,f]));return(0,n.jsx)(i.Meter.Label,{"data-spark-component":`meter-label`,id:d,className:`default:text-body-1 text-on-surface default:font-bold`,ref:p,...l,children:a})};l.displayName=`Meter.Label`;var u=(0,e.cva)([`relative col-span-2`,`h-sz-8 w-full`,`transform-gpu overflow-hidden`,`bg-on-background/dim-4`]),d=(0,e.cva)([`size-full`,`ease-standard transition-[width] duration-700`,`motion-reduce:transition-none`],{variants:{intent:{main:[`bg-main`],support:[`bg-support`],success:[`bg-success`],alert:[`bg-alert`],danger:[`bg-error`],info:[`bg-info`]},shape:{square:[],rounded:[`rounded-sm`]}}});function f(e,n,r={}){let{threshold:i=.1,rootMargin:a}=r,o=(0,t.useRef)(!1),s=(0,t.useRef)(n);return(0,t.useEffect)(()=>{s.current=n},[n]),(0,t.useEffect)(()=>{let t=e.current;if(!t||o.current)return;let n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!o.current&&requestAnimationFrame(()=>{o.current||(o.current=!0,s.current(),n.disconnect())})})},{threshold:i,rootMargin:a});return n.observe(t),()=>{n.disconnect()}},[e,i,a]),o.current}var p=({className:r,...a})=>{let{value:o,max:c,min:l,intent:p,shape:m}=s(),h=(o-l)/(c-l)*100,g=(0,t.useRef)(null),[_,v]=(0,t.useState)(!1);return f(g,()=>{v(!0)}),(0,n.jsx)(i.Meter.Track,{ref:g,"data-spark-component":`meter-track`,className:(0,e.cx)(u(),{"rounded-sm":m===`rounded`},r),...a,children:(0,n.jsx)(i.Meter.Indicator,{"data-spark-component":`meter-indicator`,className:d({intent:p,shape:m}),style:{width:_?`${h}%`:`0%`}})})};p.displayName=`Meter.Track`;var m=({className:t,children:r,...a})=>(0,n.jsx)(i.Meter.Value,{"data-spark-component":`meter-value`,className:(0,e.cx)(`default:text-body-1 text-on-surface`,`col-start-2 text-right`,t),...a,children:r});m.displayName=`Meter.Value`;var h=Object.assign(c,{Label:l,Track:p,Value:m});h.displayName=`Meter`,l.displayName=`Meter.Label`,p.displayName=`Meter.Track`,m.displayName=`Meter.Value`,exports.Meter=h;
+//# sourceMappingURL=index.js.map

package/dist/meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\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<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\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<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}