@spark-ui/components 16.0.0 → 16.0.2

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

package/dist/input-otp/useInputOTP.d.ts

@@ -8,6 +8,7 @@ export interface UseInputOTPProps {
     onValueChange?: (value: string) => void;
     isValid: boolean;
     disabledProp: boolean;
+    readOnlyProp: boolean;
     autoFocus: boolean;
     forceUppercase: boolean;
     filterKeys: string[];
@@ -21,6 +22,7 @@ export interface UseInputOTPReturn {
     containerRef: React.RefObject<HTMLDivElement | null>;
     name: string | undefined;
     disabled: boolean;
+    readOnly: boolean;
     isInvalid: boolean;
     isRequired: boolean;
     description: string | undefined;
@@ -36,10 +38,11 @@ export interface UseInputOTPReturn {
     contextValue: InputOTPContextValue;
     handleChange: ChangeEventHandler<HTMLInputElement>;
     handleKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    handleCopy: ClipboardEventHandler<HTMLInputElement>;
     handlePaste: ClipboardEventHandler<HTMLInputElement>;
     handleFocus: () => void;
     handleBlur: () => void;
     handleClick: () => void;
     labelId: string | undefined;
 }
-export declare const useInputOTP: ({ maxLength, type, value: controlledValue, defaultValue, onValueChange, isValid, disabledProp, autoFocus, forceUppercase, filterKeys, pattern, placeholder, nameProp, }: UseInputOTPProps) => UseInputOTPReturn;
+export declare const useInputOTP: ({ maxLength, type, value: controlledValue, defaultValue, onValueChange, isValid, disabledProp, readOnlyProp, autoFocus, forceUppercase, filterKeys, pattern, placeholder, nameProp, }: UseInputOTPProps) => UseInputOTPReturn;

package/dist/rating-display/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),x=require("react"),l=require("class-variance-authority"),N=require("@spark-ui/icons/StarFill"),j=require("@spark-ui/icons/StarOutline"),y=require("../Icon-CF0W0LKr.js"),D=x.createContext(null),V=({value:t,size:a,count:n,children:e})=>s.jsx(D.Provider,{value:{value:t,size:a,count:n},children:e}),d=()=>{const t=x.useContext(D);if(!t)throw new Error("RatingDisplay compound components must be used within RatingDisplay.");return t},v=({value:t=0,size:a="md",count:n,ref:e,children:i,...r})=>{const c=t??0;return s.jsx(V,{value:c,size:a,count:n,children:s.jsx("div",{ref:e,className:"gap-x-sm relative inline-flex items-center","data-spark-component":"rating-display",...r,children:i})})};v.displayName="RatingDisplay";const p=({className:t,children:a,...n})=>{const{count:e}=d();if(e===void 0)return null;const i=typeof a=="function"?a(e):a??e;return s.jsxs("span",{className:l.cx("text-on-surface/dim-1",t),...n,children:["(",i,")"]})};p.displayName="RatingDisplay.Count";const h=l.cva(["relative block after:absolute after:block after:inset-0"],{variants:{gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},defaultVariants:{gap:"sm"}}),f=l.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-3"},design:{filled:["text-main-variant"],outlined:["text-on-surface/dim-3"]}}}),b=({value:t,size:a})=>s.jsxs("div",{"data-spark-component":"rating-display-star","data-part":"star",className:h({gap:a==="lg"?"md":"sm"}),children:[s.jsx("div",{className:l.cx("z-raised absolute overflow-hidden"),style:{width:t*100+"%"},children:s.jsx(y.Icon,{className:f({size:a,design:"filled"}),children:s.jsx(N.StarFill,{})})}),s.jsx(y.Icon,{className:f({size:a,design:"outlined"}),children:s.jsx(j.StarOutline,{})})]});function w(t){return Math.round(t/.5)*.5}function C(t){const a=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(a,{minimumFractionDigits:0,maximumFractionDigits:1}).format(t)}function k({value:t,index:a}){if(t===void 0)return 0;const n=a+1,e=w(t);return Math.ceil(e)<n?0:e>=n?1:.5}function q(t){return t===void 0||t<1?0:t<4?.5:1}const m=({size:t,variant:a="default",getFillMode:n})=>{const{value:e,size:i}=d(),r=t??i,c=o=>n?n({index:o,value:e}):a==="single-star"?q(e):k({index:o,value:e}),S=a==="single-star"?[c(0)]:Array.from({length:5},(o,u)=>c(u));return s.jsx("div",{"data-spark-component":"rating-display-stars",className:l.cx(r==="lg"?"gap-x-md":"gap-x-sm","flex"),children:S.map((o,u)=>s.jsx(b,{size:r,value:o},u))})};m.displayName="RatingDisplay.Stars";const g=({className:t,children:a,...n})=>{const{value:e}=d(),i=C(e),r=typeof a=="function"?a(i,e):a??i;return s.jsx("span",{"data-spark-component":"rating-display-value",className:l.cx("text-on-surface font-bold",t),...n,children:r})};g.displayName="RatingDisplay.Value";const R=Object.assign(v,{Stars:m,Value:g,Count:p});R.displayName="RatingDisplay";m.displayName="RatingDisplay.Stars";g.displayName="RatingDisplay.Value";p.displayName="RatingDisplay.Count";exports.RatingDisplay=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),x=require("react"),o=require("class-variance-authority"),N=require("@spark-ui/icons/StarFill"),V=require("@spark-ui/icons/StarOutline"),y=require("../Icon-CF0W0LKr.js"),D=x.createContext(null),j=({value:t,size:a,count:s,children:e})=>n.jsx(D.Provider,{value:{value:t,size:a,count:s},children:e}),d=()=>{const t=x.useContext(D);if(!t)throw new Error("RatingDisplay compound components must be used within RatingDisplay.");return t},v=({value:t=0,size:a="md",count:s,ref:e,children:r,...i})=>{const l=t??0;return n.jsx(j,{value:l,size:a,count:s,children:n.jsx("div",{ref:e,className:"gap-x-sm relative inline-flex items-center","data-spark-component":"rating-display",...i,children:r})})};v.displayName="RatingDisplay";const b=o.cva("text-on-surface/dim-1",{variants:{size:{sm:"text-caption",md:"text-body-2",lg:"text-display-3"}},defaultVariants:{size:"md"}}),p=({className:t,children:a,...s})=>{const{count:e,size:r}=d();if(e===void 0)return null;const i=typeof a=="function"?a(e):a??e;return n.jsxs("span",{className:b({size:r??"md",className:t}),...s,children:["(",i,")"]})};p.displayName="RatingDisplay.Count";const h=o.cva(["relative block after:absolute after:block after:inset-0"],{variants:{gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},defaultVariants:{gap:"sm"}}),f=o.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-3"},design:{filled:["text-main-variant"],outlined:["text-on-surface/dim-3"]}}}),z=({value:t,size:a})=>n.jsxs("div",{"data-spark-component":"rating-display-star","data-part":"star",className:h({gap:a==="lg"?"md":"sm"}),children:[n.jsx("div",{className:o.cx("z-raised absolute overflow-hidden"),style:{width:t*100+"%"},children:n.jsx(y.Icon,{className:f({size:a,design:"filled"}),children:n.jsx(N.StarFill,{})})}),n.jsx(y.Icon,{className:f({size:a,design:"outlined"}),children:n.jsx(V.StarOutline,{})})]});function C(t){return Math.round(t/.5)*.5}function w(t){const a=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(a,{minimumFractionDigits:0,maximumFractionDigits:1}).format(t)}function k({value:t,index:a}){if(t===void 0)return 0;const s=a+1,e=C(t);return Math.ceil(e)<s?0:e>=s?1:.5}function q(t){return t===void 0||t<1?0:t<4?.5:1}const m=({size:t,variant:a="default",getFillMode:s})=>{const{value:e,size:r}=d(),i=t??r,l=c=>s?s({index:c,value:e}):a==="single-star"?q(e):k({index:c,value:e}),S=a==="single-star"?[l(0)]:Array.from({length:5},(c,u)=>l(u));return n.jsx("div",{"data-spark-component":"rating-display-stars",className:o.cx(i==="lg"?"gap-x-md":"gap-x-sm","flex"),children:S.map((c,u)=>n.jsx(z,{size:i,value:c},u))})};m.displayName="RatingDisplay.Stars";const I=o.cva("text-on-surface font-bold",{variants:{size:{sm:"text-caption",md:"text-body-2",lg:"text-display-3"}},defaultVariants:{size:"md"}}),g=({className:t,children:a,...s})=>{const{value:e,size:r}=d(),i=w(e),l=typeof a=="function"?a(i,e):a??i;return n.jsx("span",{"data-spark-component":"rating-display-value",className:I({size:r??"md",className:t}),...s,children:l})};g.displayName="RatingDisplay.Value";const R=Object.assign(v,{Stars:m,Value:g,Count:p});R.displayName="RatingDisplay";m.displayName="RatingDisplay.Stars";g.displayName="RatingDisplay.Value";p.displayName="RatingDisplay.Count";exports.RatingDisplay=R;
 //# sourceMappingURL=index.js.map

package/dist/rating-display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return (\n    <RatingDisplayContext.Provider value={{ value, size, count }}>\n      {children}\n    </RatingDisplayContext.Provider>\n  )\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <div\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </div>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={cx('text-on-surface/dim-1', className)} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps,\n    RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('z-raised absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={cx('text-on-surface font-bold', className)}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"names":["RatingDisplayContext","createContext","RatingDisplayProvider","value","size","count","children","jsx","useRatingDisplay","context","useContext","RatingDisplay","ref","rest","ratingValue","RatingDisplayCount","className","renderedCount","jsxs","cx","ratingDisplayStarStyles","cva","ratingDisplayStarIconStyles","RatingDisplayStar","Icon","StarFill","StarOutline","getNearestHalfDecimal","num","formatRatingValue","locale","getStarValue","index","starPosition","formattedValue","getSingleStarValue","RatingDisplayStars","variant","getFillMode","contextSize","resolvedSize","getDisplayValue","stars","_","starValue","RatingDisplayValue","renderedValue","Root","Stars","Value","Count"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return (\n    <RatingDisplayContext.Provider value={{ value, size, count }}>\n      {children}\n    </RatingDisplayContext.Provider>\n  )\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <div\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </div>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps,\n    RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('z-raised absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface font-bold', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"names":["RatingDisplayContext","createContext","RatingDisplayProvider","value","size","count","children","jsx","useRatingDisplay","context","useContext","RatingDisplay","ref","rest","ratingValue","ratingDisplayCountStyles","cva","RatingDisplayCount","className","renderedCount","jsxs","ratingDisplayStarStyles","ratingDisplayStarIconStyles","RatingDisplayStar","cx","Icon","StarFill","StarOutline","getNearestHalfDecimal","num","formatRatingValue","locale","getStarValue","index","starPosition","formattedValue","getSingleStarValue","RatingDisplayStars","variant","getFillMode","contextSize","resolvedSize","getDisplayValue","stars","_","starValue","ratingDisplayValueStyles","RatingDisplayValue","renderedValue","Root","Stars","Value","Count"],"mappings":"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"}

package/dist/rating-display/index.mjs

@@ -1,49 +1,60 @@
 import { jsx as i, jsxs as D } from "react/jsx-runtime";
 import { createContext as S, useContext as V } from "react";
-import { cx as l, cva as v } from "class-variance-authority";
-import { StarFill as h } from "@spark-ui/icons/StarFill";
+import { cva as c, cx as x } from "class-variance-authority";
+import { StarFill as z } from "@spark-ui/icons/StarFill";
 import { StarOutline as b } from "@spark-ui/icons/StarOutline";
-import { I as f } from "../Icon-Ck-dhfLd.mjs";
-const x = S(null), w = ({
+import { I as y } from "../Icon-Ck-dhfLd.mjs";
+const v = S(null), h = ({
   value: t,
   size: a,
-  count: e,
-  children: n
-}) => /* @__PURE__ */ i(x.Provider, { value: { value: t, size: a, count: e }, children: n }), m = () => {
-  const t = V(x);
+  count: n,
+  children: e
+}) => /* @__PURE__ */ i(v.Provider, { value: { value: t, size: a, count: n }, children: e }), p = () => {
+  const t = V(v);
   if (!t)
     throw new Error("RatingDisplay compound components must be used within RatingDisplay.");
   return t;
 }, R = ({
   value: t = 0,
   size: a = "md",
-  count: e,
-  ref: n,
-  children: s,
-  ...r
-}) => /* @__PURE__ */ i(w, { value: t ?? 0, size: a, count: e, children: /* @__PURE__ */ i(
+  count: n,
+  ref: e,
+  children: r,
+  ...s
+}) => /* @__PURE__ */ i(h, { value: t ?? 0, size: a, count: n, children: /* @__PURE__ */ i(
   "div",
   {
-    ref: n,
+    ref: e,
     className: "gap-x-sm relative inline-flex items-center",
     "data-spark-component": "rating-display",
-    ...r,
-    children: s
+    ...s,
+    children: r
   }
 ) });
 R.displayName = "RatingDisplay";
-const u = ({ className: t, children: a, ...e }) => {
-  const { count: n } = m();
-  if (n === void 0) return null;
-  const s = typeof a == "function" ? a(n) : a ?? n;
-  return /* @__PURE__ */ D("span", { className: l("text-on-surface/dim-1", t), ...e, children: [
+const C = c("text-on-surface/dim-1", {
+  variants: {
+    size: {
+      sm: "text-caption",
+      md: "text-body-2",
+      lg: "text-display-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), d = ({ className: t, children: a, ...n }) => {
+  const { count: e, size: r } = p();
+  if (e === void 0) return null;
+  const s = typeof a == "function" ? a(e) : a ?? e;
+  return /* @__PURE__ */ D("span", { className: C({ size: r ?? "md", className: t }), ...n, children: [
     "(",
     s,
     ")"
   ] });
 };
-u.displayName = "RatingDisplay.Count";
-const C = v(["relative block after:absolute after:block after:inset-0"], {
+d.displayName = "RatingDisplay.Count";
+const w = c(["relative block after:absolute after:block after:inset-0"], {
   variants: {
     gap: {
       sm: ["after:w-[calc(100%+(var(--spacing-sm)))]", "last-of-type:after:content-none"],
@@ -53,7 +64,7 @@ const C = v(["relative block after:absolute after:block after:inset-0"], {
   defaultVariants: {
     gap: "sm"
   }
-}), y = v("", {
+}), f = c("", {
   variants: {
     size: {
       sm: "text-caption-link",
@@ -70,81 +81,92 @@ const C = v(["relative block after:absolute after:block after:inset-0"], {
   {
     "data-spark-component": "rating-display-star",
     "data-part": "star",
-    className: C({
+    className: w({
       gap: a === "lg" ? "md" : "sm"
     }),
     children: [
-      /* @__PURE__ */ i("div", { className: l("z-raised absolute overflow-hidden"), style: { width: t * 100 + "%" }, children: /* @__PURE__ */ i(
-        f,
+      /* @__PURE__ */ i("div", { className: x("z-raised absolute overflow-hidden"), style: { width: t * 100 + "%" }, children: /* @__PURE__ */ i(
+        y,
         {
-          className: y({
+          className: f({
             size: a,
             design: "filled"
           }),
-          children: /* @__PURE__ */ i(h, {})
+          children: /* @__PURE__ */ i(z, {})
         }
       ) }),
-      /* @__PURE__ */ i(f, { className: y({ size: a, design: "outlined" }), children: /* @__PURE__ */ i(b, {}) })
+      /* @__PURE__ */ i(y, { className: f({ size: a, design: "outlined" }), children: /* @__PURE__ */ i(b, {}) })
     ]
   }
 );
 function I(t) {
   return Math.round(t / 0.5) * 0.5;
 }
-function z(t) {
+function F(t) {
   const a = Intl.DateTimeFormat().resolvedOptions().locale;
   return new Intl.NumberFormat(a, {
     minimumFractionDigits: 0,
     maximumFractionDigits: 1
   }).format(t);
 }
-function F({ value: t, index: a }) {
+function j({ value: t, index: a }) {
   if (t === void 0) return 0;
-  const e = a + 1, n = I(t);
-  return Math.ceil(n) < e ? 0 : n >= e ? 1 : 0.5;
+  const n = a + 1, e = I(t);
+  return Math.ceil(e) < n ? 0 : e >= n ? 1 : 0.5;
 }
-function j(t) {
+function O(t) {
   return t === void 0 || t < 1 ? 0 : t < 4 ? 0.5 : 1;
 }
-const d = ({
+const u = ({
   size: t,
   variant: a = "default",
-  getFillMode: e
+  getFillMode: n
 }) => {
-  const { value: n, size: s } = m(), r = t ?? s, c = (o) => e ? e({ index: o, value: n }) : a === "single-star" ? j(n) : F({ index: o, value: n }), N = a === "single-star" ? [c(0)] : Array.from({ length: 5 }, (o, p) => c(p));
+  const { value: e, size: r } = p(), s = t ?? r, l = (o) => n ? n({ index: o, value: e }) : a === "single-star" ? O(e) : j({ index: o, value: e }), N = a === "single-star" ? [l(0)] : Array.from({ length: 5 }, (o, m) => l(m));
   return /* @__PURE__ */ i(
     "div",
     {
       "data-spark-component": "rating-display-stars",
-      className: l(r === "lg" ? "gap-x-md" : "gap-x-sm", "flex"),
-      children: N.map((o, p) => /* @__PURE__ */ i(k, { size: r, value: o }, p))
+      className: x(s === "lg" ? "gap-x-md" : "gap-x-sm", "flex"),
+      children: N.map((o, m) => /* @__PURE__ */ i(k, { size: s, value: o }, m))
     }
   );
 };
-d.displayName = "RatingDisplay.Stars";
-const g = ({ className: t, children: a, ...e }) => {
-  const { value: n } = m(), s = z(n), r = typeof a == "function" ? a(s, n) : a ?? s;
+u.displayName = "RatingDisplay.Stars";
+const P = c("text-on-surface font-bold", {
+  variants: {
+    size: {
+      sm: "text-caption",
+      md: "text-body-2",
+      lg: "text-display-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), g = ({ className: t, children: a, ...n }) => {
+  const { value: e, size: r } = p(), s = F(e), l = typeof a == "function" ? a(s, e) : a ?? s;
   return /* @__PURE__ */ i(
     "span",
     {
       "data-spark-component": "rating-display-value",
-      className: l("text-on-surface font-bold", t),
-      ...e,
-      children: r
+      className: P({ size: r ?? "md", className: t }),
+      ...n,
+      children: l
     }
   );
 };
 g.displayName = "RatingDisplay.Value";
-const O = Object.assign(R, {
-  Stars: d,
+const A = Object.assign(R, {
+  Stars: u,
   Value: g,
-  Count: u
+  Count: d
 });
-O.displayName = "RatingDisplay";
-d.displayName = "RatingDisplay.Stars";
+A.displayName = "RatingDisplay";
+u.displayName = "RatingDisplay.Stars";
 g.displayName = "RatingDisplay.Value";
-u.displayName = "RatingDisplay.Count";
+d.displayName = "RatingDisplay.Count";
 export {
-  O as RatingDisplay
+  A as RatingDisplay
 };
 //# sourceMappingURL=index.mjs.map