@spark-ui/components 17.4.2 → 17.5.0

package/dist/progress-tracker/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/progress-tracker/ProgressTracker.styles.ts","../../src/progress-tracker/ProgressTrackerContext.ts","../../src/progress-tracker/ProgressTracker.tsx","../../src/progress-tracker/ProgressTrackerStep.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.tsx","../../src/progress-tracker/ProgressTrackerStep.tsx","../../src/progress-tracker/ProgressTrackerStepLabel.tsx","../../src/progress-tracker/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\n\nexport const progressList = cx([\n  'flex flex-nowrap items-start group/list',\n  'data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',\n  'data-[orientation=vertical]:flex-col',\n])\n","import { createContext, type Dispatch, type SetStateAction, useContext } from 'react'\n\nimport type { ProgressTrackerProps } from './ProgressTracker'\n\n// Interfaces\nexport type ProgressTrackerContextInterface = Required<\n  Pick<ProgressTrackerProps, 'stepIndex' | 'size' | 'intent' | 'readOnly'>\n> &\n  Pick<ProgressTrackerProps, 'onStepClick'> & {\n    steps: Map<string, string[]>\n    setSteps: Dispatch<SetStateAction<Map<string, string[]>>>\n  }\n\nexport interface ProgressTrackerStepContextInterface {\n  index: number\n  state: 'active' | 'complete' | 'incomplete'\n}\n\n// Contexts\nexport const ProgressTrackerContext = createContext<ProgressTrackerContextInterface>(\n  {} as ProgressTrackerContextInterface\n)\n\nexport const ProgressTrackerStepContext = createContext<ProgressTrackerStepContextInterface>(\n  {} as ProgressTrackerStepContextInterface\n)\n\n// Hooks\nexport const useProgressTrackerContext = () => useContext(ProgressTrackerContext)\n\nexport const useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext)\n\nexport const ID_PREFIX = ':progress-tracker'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type PropsWithChildren, useState } from 'react'\n\nimport { progressList } from './ProgressTracker.styles'\nimport {\n  ProgressTrackerContext,\n  type ProgressTrackerContextInterface,\n} from './ProgressTrackerContext'\nimport type { StepIndicatorVariantProps } from './ProgressTrackerStepIndicator.styles'\n\nexport interface ProgressTrackerProps\n  extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent'> {\n  /**\n   * The orientation of the progress tracker\n   * @default 'horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The index of the current step.\n   * @default 0\n   */\n  stepIndex?: number\n  /**\n   * Event handler called when clicking on a step.\n   */\n  onStepClick?: (stepIndex: number) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default false\n   */\n  readOnly?: boolean\n}\n\nexport const ProgressTracker = ({\n  stepIndex = 0,\n  onStepClick,\n  readOnly = false,\n  intent = 'support',\n  size = 'lg',\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ProgressTrackerProps>) => {\n  const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())\n\n  const Component = readOnly ? 'div' : 'nav'\n\n  return (\n    <ProgressTrackerContext.Provider\n      value={{ stepIndex, onStepClick, steps, setSteps, size, intent, readOnly }}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"progress-tracker\"\n        className={cx('inline-flex', className)}\n        {...rest}\n      >\n        <ol\n          data-orientation={orientation}\n          className={progressList}\n          style={{ counterReset: 'step' }}\n        >\n          {children}\n        </ol>\n      </Component>\n    </ProgressTrackerContext.Provider>\n  )\n}\n\nProgressTracker.displayName = 'ProgressTracker'\n","import { cva } from 'class-variance-authority'\n\nexport const stepItemVariant = cva(\n  [\n    'relative inline-flex items-start flex-auto first:grow-0 justify-center group/item',\n    // Progress Track\n    'after:absolute after:z-base',\n    'last:after:content-none',\n    'after:bg-outline',\n    'group-data-[orientation=horizontal]/list:before:bg-outline',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:px-[1px]',\n    'group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base',\n    'group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0',\n    'group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]',\n    'first:group-data-[orientation=horizontal]/list:before:content-none',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:py-[1px]',\n    'group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[8px]',\n          'group-data-[orientation=vertical]/list:after:top-[25px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[21px]',\n        ],\n        md: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[12px]',\n          'group-data-[orientation=vertical]/list:after:top-[33px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[29px]',\n        ],\n        lg: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[16px]',\n          'group-data-[orientation=vertical]/list:after:top-[41px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[37px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      disabled: {\n        true: 'before:opacity-dim-3',\n        false: '',\n      },\n      disabledAfter: {\n        true: 'after:opacity-dim-3',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n      disabledAfter: false,\n      size: 'lg',\n      intent: 'support',\n    },\n  }\n)\n\nexport const stepButtonVariant = cva(\n  [\n    'relative flex group/btn disabled:cursor-default',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center',\n    'group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm',\n    'group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm',\n    'group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]',\n        ],\n        md: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]',\n        ],\n        lg: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]',\n        ],\n      },\n      readOnly: {\n        true: 'cursor-default',\n        false: 'cursor-pointer',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n      readOnly: false,\n    },\n  }\n)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n  [\n    'relative flex shrink-0 justify-center items-center',\n    'rounded-full',\n    'text-body-2 font-bold',\n    'group-disabled/btn:opacity-dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'w-sz-16 h-sz-16',\n          'group-data-[orientation=horizontal]/list:mt-[-16px]',\n          'group-data-[orientation=vertical]/list:ml-[-16px]',\n        ],\n        md: [\n          'w-sz-24 h-sz-24',\n          'group-data-[orientation=horizontal]/list:mt-[-24px]',\n          'group-data-[orientation=vertical]/list:ml-[-24px]',\n        ],\n        lg: [\n          'w-sz-32 h-sz-32',\n          'group-data-[orientation=horizontal]/list:mt-[-32px]',\n          'group-data-[orientation=vertical]/list:ml-[-32px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      state: {\n        complete: '',\n        incomplete: '',\n        active: '',\n      },\n    },\n    /**\n     * Known type issue with CVA compoundVariants and VS Code/Intellisense:\n     * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163\n     * */\n    /* @ts-ignore */\n    compoundVariants: [\n      // Support\n      {\n        intent: 'support',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-support-container bg-support-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-support-container',\n        ],\n      },\n      {\n        intent: 'support',\n        state: 'active',\n        class: 'text-on-support bg-support',\n      },\n      // Neutral\n      {\n        intent: 'neutral',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-neutral-container bg-neutral-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container',\n        ],\n      },\n      {\n        intent: 'neutral',\n        state: 'active',\n        class: 'text-on-neutral bg-neutral',\n      },\n      // Success\n      {\n        intent: 'success',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-success-container bg-success-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-success-container',\n        ],\n      },\n      {\n        intent: 'success',\n        state: 'active',\n        class: 'text-on-success bg-success',\n      },\n    ],\n    defaultVariants: {\n      size: 'lg',\n      state: 'incomplete',\n      intent: 'support',\n    },\n  }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * The content to be rendered when step status is complete (checkmark icon by default)\n   */\n  complete?: ReactNode\n  /**\n   * The content to be rendered when step status is incomplete (step index by default)\n   */\n  incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n  <Icon size=\"sm\">\n    <Check />\n  </Icon>\n)\n\nexport const ProgressTrackerStepIndicator = ({\n  complete,\n  incomplete,\n  className,\n}: ProgressTrackerStepIndicatorProps) => {\n  const { size, intent } = useProgressTrackerContext()\n  const { index, state } = useProgressTrackerStepContext()\n\n  return (\n    <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n      {size !== 'sm' && (\n        <>\n          {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n          {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n        </>\n      )}\n    </span>\n  )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n  ID_PREFIX,\n  ProgressTrackerStepContext,\n  useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n  (\n    | {\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        disabled?: boolean\n        'aria-label': string\n      }\n  )\n\nexport const ProgressTrackerStep = ({\n  disabled = false,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: ProgressTrackerStepProps) => {\n  const {\n    stepIndex: currentStepIndex,\n    steps,\n    onStepClick,\n    setSteps,\n    size,\n    intent,\n    readOnly,\n  } = useProgressTrackerContext()\n\n  const stepId = `${ID_PREFIX}-step-${useId()}`\n  const stepIndex = [...steps.keys()].indexOf(stepId)\n\n  const disabledAfter = (() => {\n    const nextStepId = [...steps.keys()][stepIndex + 1]\n\n    return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n  })()\n\n  const progressState = (() => {\n    if (stepIndex === currentStepIndex) return 'active'\n    else if (stepIndex < currentStepIndex) return 'complete'\n    else return 'incomplete'\n  })()\n\n  useEffect(() => {\n    setSteps(steps => {\n      const newSteps = new Map(steps)\n\n      return newSteps.set(\n        stepId,\n        [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n      )\n    })\n\n    return () => {\n      setSteps(steps => {\n        steps.delete(stepId)\n\n        return steps\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <li\n      data-spark-component=\"progress-tracker-step\"\n      id={stepId}\n      ref={ref}\n      data-state={progressState}\n      {...(progressState === 'active' && {\n        'aria-current': 'step',\n      })}\n      className={stepItemVariant({\n        size,\n        intent,\n        disabled,\n        disabledAfter,\n      })}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-interactive={!disabled && !readOnly}\n        {...(!disabled &&\n          !readOnly && {\n            onClick: () => onStepClick?.(stepIndex),\n          })}\n        disabled={disabled}\n        className={stepButtonVariant({\n          size,\n          readOnly,\n          className,\n        })}\n      >\n        <ProgressTrackerStepContext.Provider\n          value={{\n            index: stepIndex,\n            state: progressState,\n          }}\n        >\n          {children || <ProgressTrackerStepIndicator />}\n        </ProgressTrackerStepContext.Provider>\n      </button>\n    </li>\n  )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n  children: ReactNode\n}\n\nconst stepLabel = cva(\n  [\n    'flex text-body-2 ',\n    'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n    'group-data-[orientation=horizontal]/list:mt-md',\n    'group-data-[orientation=vertical]/list:ml-md',\n    'group-data-[orientation=vertical]/list:my-auto',\n  ],\n  {\n    variants: {\n      state: {\n        complete: '',\n        incomplete: '',\n        active: 'font-bold',\n      },\n    },\n  }\n)\n\nexport const ProgressTrackerStepLabel = ({\n  className,\n  children,\n}: ProgressTrackerStepLabelProps) => {\n  const { state } = useProgressTrackerStepContext()\n\n  return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n  ProgressTrackerStepIndicator as StepIndicator,\n  type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\nexport const ProgressTracker: typeof Root & {\n  Step: typeof Step\n  StepLabel: typeof StepLabel\n  StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n  Step,\n  StepLabel,\n  StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/progress-tracker/ProgressTracker.styles.ts","../../src/progress-tracker/ProgressTrackerContext.ts","../../src/progress-tracker/ProgressTracker.tsx","../../src/progress-tracker/ProgressTrackerStep.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.styles.ts","../../src/progress-tracker/ProgressTrackerStepIndicator.tsx","../../src/progress-tracker/ProgressTrackerStep.tsx","../../src/progress-tracker/ProgressTrackerStepLabel.tsx","../../src/progress-tracker/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\n\nexport const progressList = cx([\n  'flex flex-nowrap items-start group/list',\n  'data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',\n  'data-[orientation=vertical]:flex-col',\n])\n","import { createContext, type Dispatch, type SetStateAction, useContext } from 'react'\n\nimport type { ProgressTrackerProps } from './ProgressTracker'\n\n// Interfaces\nexport type ProgressTrackerContextInterface = Required<\n  Pick<ProgressTrackerProps, 'stepIndex' | 'size' | 'intent' | 'readOnly'>\n> &\n  Pick<ProgressTrackerProps, 'onStepClick'> & {\n    steps: Map<string, string[]>\n    setSteps: Dispatch<SetStateAction<Map<string, string[]>>>\n  }\n\nexport interface ProgressTrackerStepContextInterface {\n  index: number\n  state: 'active' | 'complete' | 'incomplete'\n}\n\n// Contexts\nexport const ProgressTrackerContext = createContext<ProgressTrackerContextInterface>(\n  {} as ProgressTrackerContextInterface\n)\n\nexport const ProgressTrackerStepContext = createContext<ProgressTrackerStepContextInterface>(\n  {} as ProgressTrackerStepContextInterface\n)\n\n// Hooks\nexport const useProgressTrackerContext = () => useContext(ProgressTrackerContext)\n\nexport const useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext)\n\nexport const ID_PREFIX = ':progress-tracker'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type PropsWithChildren, useState } from 'react'\n\nimport { progressList } from './ProgressTracker.styles'\nimport {\n  ProgressTrackerContext,\n  type ProgressTrackerContextInterface,\n} from './ProgressTrackerContext'\nimport type { StepIndicatorVariantProps } from './ProgressTrackerStepIndicator.styles'\n\nexport interface ProgressTrackerProps\n  extends ComponentPropsWithRef<'div'>, Pick<StepIndicatorVariantProps, 'size' | 'intent'> {\n  /**\n   * The orientation of the progress tracker\n   * @default 'horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The index of the current step.\n   * @default 0\n   */\n  stepIndex?: number\n  /**\n   * Event handler called when clicking on a step.\n   */\n  onStepClick?: (stepIndex: number) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default false\n   */\n  readOnly?: boolean\n}\n\nexport const ProgressTracker = ({\n  stepIndex = 0,\n  onStepClick,\n  readOnly = false,\n  intent = 'support',\n  size = 'lg',\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: PropsWithChildren<ProgressTrackerProps>) => {\n  const [steps, setSteps] = useState<ProgressTrackerContextInterface['steps']>(new Map())\n\n  const Component = readOnly ? 'div' : 'nav'\n\n  return (\n    <ProgressTrackerContext.Provider\n      value={{ stepIndex, onStepClick, steps, setSteps, size, intent, readOnly }}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"progress-tracker\"\n        className={cx('inline-flex', className)}\n        {...rest}\n      >\n        <ol\n          data-orientation={orientation}\n          className={progressList}\n          style={{ counterReset: 'step' }}\n        >\n          {children}\n        </ol>\n      </Component>\n    </ProgressTrackerContext.Provider>\n  )\n}\n\nProgressTracker.displayName = 'ProgressTracker'\n","import { cva } from 'class-variance-authority'\n\nexport const stepItemVariant = cva(\n  [\n    'relative inline-flex items-start flex-auto first:grow-0 justify-center group/item',\n    // Progress Track\n    'after:absolute after:z-base',\n    'last:after:content-none',\n    'after:bg-outline',\n    'group-data-[orientation=horizontal]/list:before:bg-outline',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:px-[1px]',\n    'group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base',\n    'group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0',\n    'group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]',\n    'first:group-data-[orientation=horizontal]/list:before:content-none',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:py-[1px]',\n    'group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[8px]',\n          'group-data-[orientation=vertical]/list:after:top-[25px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[21px]',\n        ],\n        md: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[12px]',\n          'group-data-[orientation=vertical]/list:after:top-[33px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[29px]',\n        ],\n        lg: [\n          // Horizontal orientation\n          'group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]',\n          'group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]',\n          'first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]',\n          'last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]',\n          // Vertical orientation\n          'group-data-[orientation=vertical]/list:after:left-[16px]',\n          'group-data-[orientation=vertical]/list:after:top-[41px]',\n          'first:group-data-[orientation=vertical]/list:after:top-[37px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      disabled: {\n        true: 'before:opacity-dim-3',\n        false: '',\n      },\n      disabledAfter: {\n        true: 'after:opacity-dim-3',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      disabled: false,\n      disabledAfter: false,\n      size: 'lg',\n      intent: 'support',\n    },\n  }\n)\n\nexport const stepButtonVariant = cva(\n  [\n    'relative flex group/btn disabled:cursor-default',\n    // Horizontal orientation\n    'group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center',\n    'group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm',\n    'group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0',\n    // Vertical orientation\n    'group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start',\n    'group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm',\n    'group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]',\n        ],\n        md: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]',\n        ],\n        lg: [\n          'group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]',\n          'group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]',\n        ],\n      },\n      readOnly: {\n        true: 'cursor-default',\n        false: 'cursor-pointer',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n      readOnly: false,\n    },\n  }\n)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const stepIndicatorVariant = cva(\n  [\n    'relative flex shrink-0 justify-center items-center',\n    'rounded-full',\n    'text-body-2 font-bold',\n    'group-disabled/btn:opacity-dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'w-sz-16 h-sz-16',\n          'group-data-[orientation=horizontal]/list:mt-[-16px]',\n          'group-data-[orientation=vertical]/list:ml-[-16px]',\n        ],\n        md: [\n          'w-sz-24 h-sz-24',\n          'group-data-[orientation=horizontal]/list:mt-[-24px]',\n          'group-data-[orientation=vertical]/list:ml-[-24px]',\n        ],\n        lg: [\n          'w-sz-32 h-sz-32',\n          'group-data-[orientation=horizontal]/list:mt-[-32px]',\n          'group-data-[orientation=vertical]/list:ml-[-32px]',\n        ],\n      },\n      intent: {\n        support: '',\n        neutral: '',\n        success: '',\n      },\n      state: {\n        complete: '',\n        incomplete: '',\n        active: '',\n      },\n    },\n    /**\n     * Known type issue with CVA compoundVariants and VS Code/Intellisense:\n     * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163\n     * */\n    /* @ts-ignore */\n    compoundVariants: [\n      // Support\n      {\n        intent: 'support',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-support-container bg-support-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-support-container',\n        ],\n      },\n      {\n        intent: 'support',\n        state: 'active',\n        class: 'text-on-support bg-support',\n      },\n      // Neutral\n      {\n        intent: 'neutral',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-neutral-container bg-neutral-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container',\n        ],\n      },\n      {\n        intent: 'neutral',\n        state: 'active',\n        class: 'text-on-neutral bg-neutral',\n      },\n      // Success\n      {\n        intent: 'success',\n        state: ['complete', 'incomplete'],\n        class: [\n          'text-on-success-container bg-success-container',\n          'group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered',\n          'group-hover/btn:group-data-[interactive=false]/btn:bg-success-container',\n        ],\n      },\n      {\n        intent: 'success',\n        state: 'active',\n        class: 'text-on-success bg-success',\n      },\n    ],\n    defaultVariants: {\n      size: 'lg',\n      state: 'incomplete',\n      intent: 'support',\n    },\n  }\n)\n\nexport type StepIndicatorVariantProps = VariantProps<typeof stepIndicatorVariant>\n","import { Check } from '@spark-ui/icons/Check'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useProgressTrackerContext, useProgressTrackerStepContext } from './ProgressTrackerContext'\nimport { stepIndicatorVariant } from './ProgressTrackerStepIndicator.styles'\n\nexport type ProgressTrackerStepIndicatorProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * The content to be rendered when step status is complete (checkmark icon by default)\n   */\n  complete?: ReactNode\n  /**\n   * The content to be rendered when step status is incomplete (step index by default)\n   */\n  incomplete?: ReactNode\n}\n\nconst CompleteIndicator = () => (\n  <Icon size=\"sm\">\n    <Check />\n  </Icon>\n)\n\nexport const ProgressTrackerStepIndicator = ({\n  complete,\n  incomplete,\n  className,\n}: ProgressTrackerStepIndicatorProps) => {\n  const { size, intent } = useProgressTrackerContext()\n  const { index, state } = useProgressTrackerStepContext()\n\n  return (\n    <span className={stepIndicatorVariant({ size, intent, state, className })} aria-hidden=\"true\">\n      {size !== 'sm' && (\n        <>\n          {state === 'complete' && (complete === undefined ? <CompleteIndicator /> : complete)}\n          {state !== 'complete' && (incomplete === undefined ? `${index + 1}` : incomplete)}\n        </>\n      )}\n    </span>\n  )\n}\n\nProgressTrackerStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n","import { type ComponentPropsWithRef, type ReactNode, useEffect, useId } from 'react'\n\nimport {\n  ID_PREFIX,\n  ProgressTrackerStepContext,\n  useProgressTrackerContext,\n} from './ProgressTrackerContext'\nimport { stepButtonVariant, stepItemVariant } from './ProgressTrackerStep.styles'\nimport { ProgressTrackerStepIndicator } from './ProgressTrackerStepIndicator'\n\nexport type ProgressTrackerStepProps = ComponentPropsWithRef<'li'> &\n  (\n    | {\n        disabled?: boolean\n        children: ReactNode\n      }\n    | {\n        disabled?: boolean\n        'aria-label': string\n      }\n  )\n\nexport const ProgressTrackerStep = ({\n  disabled = false,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: ProgressTrackerStepProps) => {\n  const {\n    stepIndex: currentStepIndex,\n    steps,\n    onStepClick,\n    setSteps,\n    size,\n    intent,\n    readOnly,\n  } = useProgressTrackerContext()\n\n  const stepId = `${ID_PREFIX}-step-${useId()}`\n  const stepIndex = [...steps.keys()].indexOf(stepId)\n\n  const disabledAfter = (() => {\n    const nextStepId = [...steps.keys()][stepIndex + 1]\n\n    return !!(nextStepId && steps.get(nextStepId)?.includes('disabled'))\n  })()\n\n  const progressState = (() => {\n    if (stepIndex === currentStepIndex) return 'active'\n    else if (stepIndex < currentStepIndex) return 'complete'\n    else return 'incomplete'\n  })()\n\n  useEffect(() => {\n    setSteps(steps => {\n      const newSteps = new Map(steps)\n\n      return newSteps.set(\n        stepId,\n        [progressState, disabled ? 'disabled' : ''].filter(v => !!v)\n      )\n    })\n\n    return () => {\n      setSteps(steps => {\n        steps.delete(stepId)\n\n        return steps\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <li\n      data-spark-component=\"progress-tracker-step\"\n      id={stepId}\n      ref={ref}\n      data-state={progressState}\n      {...(progressState === 'active' && {\n        'aria-current': 'step',\n      })}\n      className={stepItemVariant({\n        size,\n        intent,\n        disabled,\n        disabledAfter,\n      })}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-interactive={!disabled && !readOnly}\n        {...(!disabled &&\n          !readOnly && {\n            onClick: () => onStepClick?.(stepIndex),\n          })}\n        disabled={disabled}\n        className={stepButtonVariant({\n          size,\n          readOnly,\n          className,\n        })}\n      >\n        <ProgressTrackerStepContext.Provider\n          value={{\n            index: stepIndex,\n            state: progressState,\n          }}\n        >\n          {children || <ProgressTrackerStepIndicator />}\n        </ProgressTrackerStepContext.Provider>\n      </button>\n    </li>\n  )\n}\n\nProgressTrackerStep.displayName = 'ProgressTracker.Step'\n","import { cva } from 'class-variance-authority'\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { useProgressTrackerStepContext } from './ProgressTrackerContext'\n\ntype ProgressTrackerStepLabelProps = ComponentPropsWithoutRef<'span'> & {\n  children: ReactNode\n}\n\nconst stepLabel = cva(\n  [\n    'flex text-body-2 ',\n    'text-on-surface group-disabled/btn:text-on-surface/dim-1',\n    'group-data-[orientation=horizontal]/list:mt-md',\n    'group-data-[orientation=vertical]/list:ml-md',\n    'group-data-[orientation=vertical]/list:my-auto',\n  ],\n  {\n    variants: {\n      state: {\n        complete: '',\n        incomplete: '',\n        active: 'font-bold',\n      },\n    },\n  }\n)\n\nexport const ProgressTrackerStepLabel = ({\n  className,\n  children,\n}: ProgressTrackerStepLabelProps) => {\n  const { state } = useProgressTrackerStepContext()\n\n  return <span className={stepLabel({ state, className })}>{children}</span>\n}\n\nProgressTrackerStepLabel.displayName = 'ProgressTracker.StepLabel'\n","import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'\nimport { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'\nimport {\n  ProgressTrackerStepIndicator as StepIndicator,\n  type ProgressTrackerStepIndicatorProps,\n} from './ProgressTrackerStepIndicator'\nimport { ProgressTrackerStepLabel as StepLabel } from './ProgressTrackerStepLabel'\n\n/**\n * A component that displays a multi-step process with visual indicators for completed, current, and upcoming steps.\n */\nexport const ProgressTracker: typeof Root & {\n  Step: typeof Step\n  StepLabel: typeof StepLabel\n  StepIndicator: typeof StepIndicator\n} = Object.assign(Root, {\n  Step,\n  StepLabel,\n  StepIndicator,\n})\n\nProgressTracker.displayName = 'ProgressTracker'\nStep.displayName = 'ProgressTracker.Step'\nStepLabel.displayName = 'ProgressTracker.StepLabel'\nStepIndicator.displayName = 'ProgressTracker.StepIndicator'\n\nexport type { ProgressTrackerProps, ProgressTrackerStepProps, ProgressTrackerStepIndicatorProps }\n"],"mappings":"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"}

package/dist/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends\n    RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>, Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends\n    RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends\n    RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>, Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends\n    RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\n/**\n * A set of radio buttons that allows users to select a single option from a group of choices.\n */\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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"}

package/dist/radio-group/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends\n    RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>, Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends\n    RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n  Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext)\n\n  if (!context) {\n    throw Error('useRadioGroup must be used within a RadioGroup provider')\n  }\n\n  return context\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n  [\n    'relative block',\n    'size-3/5',\n    'after:absolute',\n    'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:h-0',\n    'after:w-0',\n    'after:block',\n    'after:rounded-[50%]',\n    \"after:content-['']\",\n    'after:transition-all',\n    'data-[state=checked]:after:size-full',\n  ],\n  {\n    variants: {\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['after:bg-main'],\n        support: ['after:bg-support'],\n        accent: ['after:bg-accent'],\n        neutral: ['after:bg-neutral'],\n        success: ['after:bg-success'],\n        alert: ['after:bg-alert'],\n        error: ['after:bg-error'],\n        info: ['after:bg-info'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n  className?: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true | undefined\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n  return (\n    <RadixRadioGroup.Indicator\n      ref={ref}\n      className={radioIndicatorStyles({ intent, className })}\n      {...others}\n    />\n  )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n  [\n    'flex shrink-0 items-center justify-center',\n    'rounded-full',\n    'border-md',\n    'outline-hidden',\n    'hover:ring-4',\n    'focus-visible:u-outline',\n    'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n    'u-shadow-border-transition',\n    'size-sz-24',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the radio input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n        support: [\n          'border-outline',\n          'data-[state=checked]:border-support',\n          'hover:ring-support-container',\n        ],\n        accent: [\n          'border-outline',\n          'data-[state=checked]:border-accent',\n          'hover:ring-accent-container',\n        ],\n        neutral: [\n          'border-outline',\n          'data-[state=checked]:border-neutral',\n          'hover:ring-neutral-container',\n        ],\n        info: ['border-info', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n        success: [\n          'border-success',\n          'data-[state=checked]:border-success',\n          'hover:ring-success-container',\n        ],\n        alert: ['border-alert', 'data-[state=checked]:border-alert', 'hover:ring-alert-container'],\n        error: ['border-error', 'data-[state=checked]:border-error', 'hover:ring-error-container'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n  extends\n    RadioInputVariantsProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n  const { state } = useFormFieldControl()\n\n  const intent = state ?? intentProp\n\n  return (\n    <RadixRadioGroup.RadioGroupItem\n      data-spark-component=\"radio-input\"\n      ref={ref}\n      className={radioInputVariants({ intent, className })}\n      {...others}\n    >\n      <RadioIndicator intent={intent} forceMount />\n    </RadixRadioGroup.RadioGroupItem>\n  )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n  extends RadioLabelStylesProps, PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the radio item.\n   */\n  disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n  return (\n    <Label.Root\n      data-spark-component=\"radio-label\"\n      className={radioLabelStyles({ disabled })}\n      {...others}\n    />\n  )\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n  className,\n  children,\n  id,\n  disabled: disabledProp,\n  ref,\n  ...others\n}: RadioProps) => {\n  const innerId = `${ID_PREFIX}-input-${useId()}`\n  const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n  const { intent, disabled, reverse } = useRadioGroup()\n\n  const radioLabel = children && (\n    <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </RadioLabel>\n  )\n\n  const radioInput = (\n    <RadioInput\n      ref={ref}\n      id={id || innerId}\n      intent={intent}\n      aria-labelledby={children ? innerLabelId : undefined}\n      {...others}\n      disabled={disabledProp}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {radioLabel}\n      {radioInput}\n    </>\n  ) : (\n    <>\n      {radioInput}\n      {radioLabel}\n    </>\n  )\n\n  return <span className={cx('gap-md text-body-1 flex items-start', className)}>{content}</span>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n  variants: {\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['flex-row', 'gap-xl'],\n    },\n  },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n  extends Pick<RadioInputProps, 'intent' | 'disabled'>, Pick<RadioGroupProps, 'reverse'> {\n  children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n  intent,\n  disabled,\n  reverse,\n  children,\n}: RadioGroupProviderProps) => {\n  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n  return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n  extends\n    RadioGroupVariantsProps,\n    Pick<RadioInputVariantsProps, 'intent'>,\n    Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   */\n  defaultValue?: string\n  /**\n   * The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n   */\n  value?: string\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: string) => void\n  /**\n   * When true, prevents the user from interacting with radio items.\n   */\n  disabled?: boolean\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * When true, indicates that the user must check a radio item before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The orientation of the component.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * The reading direction of the radio group.\n   */\n  dir?: 'ltr' | 'rtl'\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   */\n  loop?: boolean\n  /**\n   * When true, the label will be placed on the left side of the Radio\n   */\n  reverse?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n  orientation = 'vertical',\n  loop = true,\n  intent = 'support',\n  disabled,\n  className,\n  required: requiredProp,\n  reverse = false,\n  ref,\n  ...others\n}: RadioGroupProps) => {\n  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n\n  return (\n    <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n      <RadixRadioGroup.RadioGroup\n        data-spark-component=\"radio-group\"\n        className={radioGroupStyles({ orientation, className })}\n        name={name}\n        ref={ref}\n        disabled={disabled}\n        orientation={orientation}\n        loop={loop}\n        required={required}\n        aria-labelledby={labelId}\n        aria-invalid={isInvalid}\n        aria-required={required}\n        aria-describedby={description}\n        {...others}\n      />\n    </RadioGroupProvider>\n  )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\n/**\n * A set of radio buttons that allows users to select a single option from a group of choices.\n */\nexport const RadioGroup: typeof Root & {\n  Radio: typeof Radio\n} = Object.assign(Root, {\n  Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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"}

package/dist/rating/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\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  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\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 { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\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  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\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 { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\n/**\n * An interactive component that allows users to provide a rating using a star-based scale.\n */\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/rating/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\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  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\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 { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\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  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\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 { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\n/**\n * An interactive component that allows users to provide a rating using a star-based scale.\n */\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\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  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\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      </Component>\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, 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"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"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 { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\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  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\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      </Component>\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, 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\n/**\n * A read-only component that displays a rating value using stars.\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"],"mappings":"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"}