@spark-ui/components 17.15.4 → 17.15.5

package/dist/{progress-BfpWgeE1.mjs.map → progress-xbOXCGXi.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-BfpWgeE1.mjs","names":[],"sources":["../src/progress/ProgressContext.tsx","../src/progress/ProgressIndicator.tsx","../src/progress/ProgressTrack.tsx","../src/progress/Progress.tsx","../src/progress/ProgressLabel.tsx","../src/progress/ProgressValue.tsx","../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (\n    event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]\n  ) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\n/** The track of the progress indicator. Renders a <div> element. */\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends\n    Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'support',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\n/**\n * The label of the progress indicator. Renders a <span> element.\n */\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1-highlight text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\n/** The numeric value of the progress indicator. Renders an <output> element. */\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\n/**\n * A visual indicator that displays the completion progress of a task or operation.\n */\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"mappings":";;;;;;AAcA,IAAa,IAAkB,EAA2C,KAAK,EAElE,IAAY,aAEZ,UAAoB;CAC/B,IAAM,IAAU,EAAW,EAAgB;AAE3C,KAAI,CAAC,EACH,OAAU,MAAM,sDAAsD;AAGxE,QAAO;GCnBI,IAA0B,EAAI,CAAC,iBAAiB,gCAAgC,EAAE,EAC7F,UAAU;CAIR,QAAQ;EACN,MAAM,CAAC,UAAU;EACjB,SAAS,CAAC,aAAa;EACvB,QAAQ,CAAC,YAAY;EACrB,SAAS,CAAC,aAAa;EACvB,OAAO,CAAC,WAAW;EACnB,QAAQ,CAAC,WAAW;EACpB,MAAM,CAAC,UAAU;EACjB,SAAS,CAAC,aAAa;EACxB;CAID,OAAO;EACL,QAAQ,EAAE;EACV,SAAS,CAAC,aAAa;EACxB;CACF,EACF,CAAC,EAMW,KAAqB,EAChC,cACA,UACA,QACA,oBACA,GAAG,QAC4C;CAC/C,IAAM,EAAE,UAAO,QAAK,QAAK,WAAQ,UAAO,kBAAe,GAAa,EAE9D,IAAa,MAAU,OAA6C,KAApC,IAAQ,MAAQ,IAAM,KAAQ,KAC9D,IAAkB,MAAU,MAE5B,KACJ,MACG;AAKH,EAHA,IAAkB,EAAM,EAGpB,MAAU,QAAQ,KAAS,KAAO,KACpC,GAAY;;AAIhB,QACE,kBAAC,EAAa,WAAd;EACE,wBAAqB;EACrB,WAAW,EACT,EAAwB;GACtB;GACA;GACA;GACD,CAAC,EACF,KAAmB,iEACpB;EACD,OAAO;GACL,GAAG;GACH,GAAI,CAAC,KAAmB,MAAU,QAAQ,EAAE,OAAO,GAAG,EAAW,IAAI;GACtE;EACI;EACL,iBAAiB;EACjB,GAAI;EACJ,CAAA;;AAIN,EAAkB,cAAc;;;ACvEhC,IAAa,KAAiB,EAAE,cAAW,GAAG,QAAiC;CAC7E,IAAM,EAAE,aAAU,GAAa;AAE/B,QACE,kBAAC,EAAa,OAAd;EACE,wBAAqB;EACrB,WAAW,EACT,qCACA,iBACA,mBACA,0BACA,EAAE,cAAc,MAAU,WAAW,EACrC,EACD;EACD,GAAI;YAEJ,kBAAC,GAAD,EAAqB,CAAA;EACF,CAAA;;AAIzB,EAAc,cAAc;;;ACF5B,IAAa,KAAY,EACvB,cACA,OAAO,GACP,SAAM,KACN,SAAM,GACN,WAAQ,UACR,YAAS,WACT,eACA,kBACA,kBAAkB,GAClB,cAAW,kBAAC,GAAD,EAAiB,CAAA,EAC5B,QACA,GAAG,QACmC;CACtC,IAAM,CAAC,GAAS,KAAc,GAAkB,EAE1C,IAAe,SACZ;EACL,OAAO,KAAa;EACpB;EACA;EACA;EACA;EACA,WAAW;EACX;EACD,GACA;EAAC;EAAK;EAAK;EAAW;EAAQ;EAAO;EAAY;EAAW,CAAC,EAG1D,IACJ,MACC,KACI,GAA+B,MAC1B,MAAU,OAAa,KAAkB,KAEtC,EAAc,GAAO,EAAI,GAElC,KAAA;AAEN,QACE,kBAAC,GAAD;EAAiB,OAAO;YACtB,kBAAC,EAAa,MAAd;GACE,wBAAqB;GAChB;GACL,WAAW,EAAG,4DAA4D,EAAU;GACpF,OAAO,KAAa;GACf;GACA;GACL,mBAAiB;GACC;GAClB,GAAI;GAEH;GACiB,CAAA;EACJ,CAAA;;AAItB,EAAS,cAAc;;;AC5EvB,IAAa,KAAiB,EAC5B,IAAI,GACJ,aACA,KAAK,GACL,GAAG,QACqB;CACxB,IAAM,IAAa,GAAG,EAAU,SAAS,GAAO,IAC1C,IAAK,KAAU,GAEf,EAAE,iBAAc,GAAa,EAO7B,IAAM,EAAa,GANT,GACb,MAAwB;AACvB,IAAU,IAAK,IAAK,KAAA,EAAU;IAEhC,CAAC,GAAI,EAAU,CAChB,CAC8C;AAE/C,QACE,kBAAC,EAAa,OAAd;EACE,wBAAqB;EACjB;EACJ,WAAU;EACL;EACL,GAAI;EAEH;EACkB,CAAA;;AAIzB,EAAc,cAAc;;;ACnC5B,IAAa,KAAiB,EAC5B,cACA,aACA,GAAG,QAGD,kBAAC,EAAa,OAAd;CACE,wBAAqB;CACrB,WAAW,EAAG,8DAA8D,EAAU;CACtF,GAAI;CAEH;CACkB,CAAA;AAIzB,EAAc,cAAc;;;ACf5B,IAAa,IAIT,OAAO,OAAO,GAAM;CACtB,OAAO;CACP,OAAO;CACP,OAAO;CACR,CAAC;AAEF,EAAS,cAAc,YACvB,EAAc,cAAc,kBAC5B,EAAc,cAAc,kBAC5B,EAAc,cAAc"}
+{"version":3,"file":"progress-xbOXCGXi.mjs","names":[],"sources":["../src/progress/ProgressContext.tsx","../src/progress/ProgressIndicator.tsx","../src/progress/ProgressTrack.tsx","../src/progress/Progress.tsx","../src/progress/ProgressLabel.tsx","../src/progress/ProgressValue.tsx","../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (\n    event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]\n  ) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\n/** The track of the progress indicator. Renders a <div> element. */\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends\n    Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'support',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\n/**\n * The label of the progress indicator. Renders a <span> element.\n */\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1-highlight text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\n/** The numeric value of the progress indicator. Renders an <output> element. */\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\n/**\n * A visual indicator that displays the completion progress of a task or operation.\n */\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"mappings":"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"}

package/dist/radio-group/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react`),n=require(`radix-ui`),r=require(`react/jsx-runtime`),i=require(`@spark-ui/internal-utils`),a=require(`@spark-ui/components/form-field`);var o=(0,t.createContext)(null),s=()=>{let e=(0,t.useContext)(o);if(!e)throw Error(`useRadioGroup must be used within a RadioGroup provider`);return e},c=(0,e.cva)([`relative block`,`size-3/5`,`after:absolute`,`after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2`,`after:h-0`,`after:w-0`,`after:block`,`after:rounded-[50%]`,`after:content-['']`,`after:transition-all`,`data-[state=checked]:after:size-full`],{variants:{intent:(0,i.makeVariants)({main:[`after:bg-main`],support:[`after:bg-support`],accent:[`after:bg-accent`],neutral:[`after:bg-neutral`],success:[`after:bg-success`],alert:[`after:bg-alert`],error:[`after:bg-error`],info:[`after:bg-info`]})},defaultVariants:{intent:`support`}}),l=({intent:e,className:t,ref:i,...a})=>(0,r.jsx)(n.RadioGroup.Indicator,{ref:i,className:c({intent:e,className:t}),...a});l.displayName=`RadioGroup.RadioIndicator`;var u=(0,e.cva)([`flex shrink-0 items-center justify-center`,`rounded-full`,`border-md`,`outline-hidden`,`hover:ring-4`,`focus-visible:u-outline`,`disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent`,`u-shadow-border-transition`,`size-sz-24`],{variants:{intent:(0,i.makeVariants)({main:[`border-outline`,`data-[state=checked]:border-main`,`hover:ring-main-container`],support:[`border-outline`,`data-[state=checked]:border-support`,`hover:ring-support-container`],accent:[`border-outline`,`data-[state=checked]:border-accent`,`hover:ring-accent-container`],neutral:[`border-outline`,`data-[state=checked]:border-neutral`,`hover:ring-neutral-container`],info:[`border-info`,`data-[state=checked]:border-info`,`hover:ring-info-container`],success:[`border-success`,`data-[state=checked]:border-success`,`hover:ring-success-container`],alert:[`border-alert`,`data-[state=checked]:border-alert`,`hover:ring-alert-container`],error:[`border-error`,`data-[state=checked]:border-error`,`hover:ring-error-container`]})},defaultVariants:{intent:`support`}}),d=({intent:e,className:t,ref:i,...o})=>{let{state:s}=(0,a.useFormFieldControl)(),c=s??e;return(0,r.jsx)(n.RadioGroup.RadioGroupItem,{"data-spark-component":`radio-input`,ref:i,className:u({intent:c,className:t}),...o,children:(0,r.jsx)(l,{intent:c,forceMount:!0})})};d.displayName=`RadioGroup.RadioInput`;var f=(0,e.cva)(`grow`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),p=({disabled:e,...t})=>(0,r.jsx)(n.Label.Root,{"data-spark-component":`radio-label`,className:f({disabled:e}),...t});p.displayName=`RadioGroup.RadioLabel`;var m=`:radio`,h=({className:n,children:i,id:a,disabled:o,ref:c,...l})=>{let u=`${m}-input-${(0,t.useId)()}`,f=`${m}-label-${(0,t.useId)()}`,{intent:h,disabled:g,reverse:_}=s(),v=i&&(0,r.jsx)(p,{disabled:o||g,htmlFor:a||u,id:f,children:i}),y=(0,r.jsx)(d,{ref:c,id:a||u,intent:h,"aria-labelledby":i?f:void 0,...l,disabled:o}),b=_?(0,r.jsxs)(r.Fragment,{children:[v,y]}):(0,r.jsxs)(r.Fragment,{children:[y,v]});return(0,r.jsx)(`span`,{className:(0,e.cx)(`gap-md text-body-1 flex items-start`,n),children:b})};h.displayName=`RadioGroup.Radio`;var g=(0,e.cva)([`flex`],{variants:{orientation:{vertical:[`flex-col`,`gap-lg`],horizontal:[`flex-row`,`gap-xl`]}}}),_=({intent:e,disabled:n,reverse:i,children:a})=>(0,r.jsx)(o,{value:(0,t.useMemo)(()=>({intent:e,disabled:n,reverse:i}),[e,n,i]),children:a}),v=({orientation:e=`vertical`,loop:t=!0,intent:i=`support`,disabled:o,className:s,required:c,reverse:l=!1,ref:u,...d})=>{let{labelId:f,isInvalid:p,isRequired:m,description:h,name:v}=(0,a.useFormFieldControl)(),y=c===void 0?m:c;return(0,r.jsx)(_,{reverse:l,intent:i,disabled:o,children:(0,r.jsx)(n.RadioGroup.RadioGroup,{"data-spark-component":`radio-group`,className:g({orientation:e,className:s}),name:v,ref:u,disabled:o,orientation:e,loop:t,required:y,"aria-labelledby":f,"aria-invalid":p,"aria-required":y,"aria-describedby":h,...d})})};v.displayName=`RadioGroup`;var y=Object.assign(v,{Radio:h});y.displayName=`RadioGroup`,h.displayName=`RadioGroup.Radio`,exports.RadioGroup=y;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("class-variance-authority"),t=require("react"),n=require("radix-ui"),r=require("react/jsx-runtime"),i=require("@spark-ui/internal-utils"),a=require("@spark-ui/components/form-field");var o=(0,t.createContext)(null),s=()=>{let e=(0,t.useContext)(o);if(!e)throw Error(`useRadioGroup must be used within a RadioGroup provider`);return e},c=(0,e.cva)([`relative block`,`size-3/5`,`after:absolute`,`after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2`,`after:h-0`,`after:w-0`,`after:block`,`after:rounded-[50%]`,`after:content-['']`,`after:transition-all`,`data-[state=checked]:after:size-full`],{variants:{intent:(0,i.makeVariants)({main:[`after:bg-main`],support:[`after:bg-support`],accent:[`after:bg-accent`],neutral:[`after:bg-neutral`],success:[`after:bg-success`],alert:[`after:bg-alert`],error:[`after:bg-error`],info:[`after:bg-info`]})},defaultVariants:{intent:`support`}}),l=({intent:e,className:t,ref:i,...a})=>(0,r.jsx)(n.RadioGroup.Indicator,{ref:i,className:c({intent:e,className:t}),...a});l.displayName=`RadioGroup.RadioIndicator`;var u=(0,e.cva)([`flex shrink-0 items-center justify-center`,`rounded-full`,`border-md`,`outline-hidden`,`hover:ring-4`,`focus-visible:u-outline`,`disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent`,`u-shadow-border-transition`,`size-sz-24`],{variants:{intent:(0,i.makeVariants)({main:[`border-outline`,`data-[state=checked]:border-main`,`hover:ring-main-container`],support:[`border-outline`,`data-[state=checked]:border-support`,`hover:ring-support-container`],accent:[`border-outline`,`data-[state=checked]:border-accent`,`hover:ring-accent-container`],neutral:[`border-outline`,`data-[state=checked]:border-neutral`,`hover:ring-neutral-container`],info:[`border-info`,`data-[state=checked]:border-info`,`hover:ring-info-container`],success:[`border-success`,`data-[state=checked]:border-success`,`hover:ring-success-container`],alert:[`border-alert`,`data-[state=checked]:border-alert`,`hover:ring-alert-container`],error:[`border-error`,`data-[state=checked]:border-error`,`hover:ring-error-container`]})},defaultVariants:{intent:`support`}}),d=({intent:e,className:t,ref:i,...o})=>{let{state:s}=(0,a.useFormFieldControl)(),c=s??e;return(0,r.jsx)(n.RadioGroup.RadioGroupItem,{"data-spark-component":`radio-input`,ref:i,className:u({intent:c,className:t}),...o,children:(0,r.jsx)(l,{intent:c,forceMount:!0})})};d.displayName=`RadioGroup.RadioInput`;var f=(0,e.cva)(`grow`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),p=({disabled:e,...t})=>(0,r.jsx)(n.Label.Root,{"data-spark-component":`radio-label`,className:f({disabled:e}),...t});p.displayName=`RadioGroup.RadioLabel`;var m=`:radio`,h=({className:n,children:i,id:a,disabled:o,ref:c,...l})=>{let u=`${m}-input-${(0,t.useId)()}`,f=`${m}-label-${(0,t.useId)()}`,{intent:h,disabled:g,reverse:_}=s(),v=i&&(0,r.jsx)(p,{disabled:o||g,htmlFor:a||u,id:f,children:i}),y=(0,r.jsx)(d,{ref:c,id:a||u,intent:h,"aria-labelledby":i?f:void 0,...l,disabled:o}),b=_?(0,r.jsxs)(r.Fragment,{children:[v,y]}):(0,r.jsxs)(r.Fragment,{children:[y,v]});return(0,r.jsx)(`span`,{className:(0,e.cx)(`gap-md text-body-1 flex items-start`,n),children:b})};h.displayName=`RadioGroup.Radio`;var g=(0,e.cva)([`flex`],{variants:{orientation:{vertical:[`flex-col`,`gap-lg`],horizontal:[`flex-row`,`gap-xl`]}}}),_=({intent:e,disabled:n,reverse:i,children:a})=>(0,r.jsx)(o,{value:(0,t.useMemo)(()=>({intent:e,disabled:n,reverse:i}),[e,n,i]),children:a}),v=({orientation:e=`vertical`,loop:t=!0,intent:i=`support`,disabled:o,className:s,required:c,reverse:l=!1,ref:u,...d})=>{let{labelId:f,isInvalid:p,isRequired:m,description:h,name:v}=(0,a.useFormFieldControl)(),y=c===void 0?m:c;return(0,r.jsx)(_,{reverse:l,intent:i,disabled:o,children:(0,r.jsx)(n.RadioGroup.RadioGroup,{"data-spark-component":`radio-group`,className:g({orientation:e,className:s}),name:v,ref:u,disabled:o,orientation:e,loop:t,required:y,"aria-labelledby":f,"aria-invalid":p,"aria-required":y,"aria-describedby":h,...d})})};v.displayName=`RadioGroup`;var y=Object.assign(v,{Radio:h});y.displayName=`RadioGroup`,h.displayName=`RadioGroup.Radio`,exports.RadioGroup=y;
 //# sourceMappingURL=index.js.map

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\n/**\n * A radio button option. Renders a <label> element.\n */\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 value={value}>{children}</RadioGroupContext>\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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"}
+{"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\n/**\n * A radio button option. Renders a <label> element.\n */\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 value={value}>{children}</RadioGroupContext>\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\n/**\n * A radio button option. Renders a <label> element.\n */\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 value={value}>{children}</RadioGroupContext>\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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"}
+{"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\n/**\n * A radio button option. Renders a <label> element.\n */\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 value={value}>{children}</RadioGroupContext>\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":";;;;;;;AAQA,IAAa,IAAoB,EAA6C,IAAI,GAErE,UAAsB;CACjC,IAAM,IAAU,EAAW,CAAiB;CAE5C,IAAI,CAAC,GACH,MAAM,MAAM,yDAAyD;CAGvE,OAAO;AACT,GCfa,IAAuB,EAClC;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,QAAQ,EAGN;EACA,MAAM,CAAC,eAAe;EACtB,SAAS,CAAC,kBAAkB;EAC5B,QAAQ,CAAC,iBAAiB;EAC1B,SAAS,CAAC,kBAAkB;EAC5B,SAAS,CAAC,kBAAkB;EAC5B,OAAO,CAAC,gBAAgB;EACxB,OAAO,CAAC,gBAAgB;EACxB,MAAM,CAAC,eAAe;CACxB,CAAC,EACH;CACA,iBAAiB,EACf,QAAQ,UACV;AACF,CACF,GCnBa,KAAkB,EAAE,WAAQ,cAAW,QAAK,GAAG,QAExD,kBAAC,EAAgB,WAAjB;CACO;CACL,WAAW,EAAqB;EAAE;EAAQ;CAAU,CAAC;CACrD,GAAI;AACL,CAAA;AAIL,EAAe,cAAc;;;ACzB7B,IAAa,IAAqB,EAChC;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EAIR,QAAQ,EAGN;EACA,MAAM;GAAC;GAAkB;GAAoC;EAA2B;EACxF,SAAS;GACP;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;EACF;EACA,MAAM;GAAC;GAAe;GAAoC;EAA2B;EACrF,SAAS;GACP;GACA;GACA;EACF;EACA,OAAO;GAAC;GAAgB;GAAqC;EAA4B;EACzF,OAAO;GAAC;GAAgB;GAAqC;EAA4B;CAC3F,CAAC,EACH;CACA,iBAAiB,EACf,QAAQ,UACV;AACF,CACF,GCxBa,KAAc,EAAE,QAAQ,GAAY,cAAW,QAAK,GAAG,QAA8B;CAChG,IAAM,EAAE,aAAU,EAAoB,GAEhC,IAAS,KAAS;CAExB,OACE,kBAAC,EAAgB,gBAAjB;EACE,wBAAqB;EAChB;EACL,WAAW,EAAmB;GAAE;GAAQ;EAAU,CAAC;EACnD,GAAI;YAEJ,kBAAC,GAAD;GAAwB;GAAQ,YAAA;EAAY,CAAA;CACd,CAAA;AAEpC;AAEA,EAAW,cAAc;;;AC7CzB,IAAa,IAAmB,EAAI,QAAQ;CAC1C,UAAU,EACR,UAAU;EACR,MAAM,CAAC,sBAAsB,oBAAoB;EACjD,OAAO,CAAC,gBAAgB;CAC1B,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GCSY,KAAc,EAAE,aAAU,GAAG,QAEtC,kBAAC,EAAM,MAAP;CACE,wBAAqB;CACrB,WAAW,EAAiB,EAAE,YAAS,CAAC;CACxC,GAAI;AACL,CAAA;AAIL,EAAW,cAAc;;;ACpBzB,IAAM,IAAY,UAML,KAAS,EACpB,cACA,aACA,OACA,UAAU,GACV,QACA,GAAG,QACa;CAChB,IAAM,IAAU,GAAG,EAAU,SAAS,EAAM,KACtC,IAAe,GAAG,EAAU,SAAS,EAAM,KAE3C,EAAE,WAAQ,aAAU,eAAY,EAAc,GAE9C,IAAa,KACjB,kBAAC,GAAD;EAAY,UAAU,KAAgB;EAAU,SAAS,KAAM;EAAS,IAAI;EACzE;CACS,CAAA,GAGR,IACJ,kBAAC,GAAD;EACO;EACL,IAAI,KAAM;EACF;EACR,mBAAiB,IAAW,IAAe,KAAA;EAC3C,GAAI;EACJ,UAAU;CACX,CAAA,GAGG,IAAU,IACd,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,CACD,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,CACD,EAAA,CAAA;CAGJ,OAAO,kBAAC,QAAD;EAAM,WAAW,EAAG,uCAAuC,CAAS;YAAI;CAAc,CAAA;AAC/F;AAEA,EAAM,cAAc;;;AC5DpB,IAAa,IAAmB,EAAI,CAAC,MAAM,GAAG,EAC5C,UAAU,EACR,aAAa;CACX,UAAU,CAAC,YAAY,QAAQ;CAC/B,YAAY,CAAC,YAAY,QAAQ;AACnC,EACF,EACF,CAAC,GCEY,KAAsB,EACjC,WACA,aACA,YACA,kBAIO,kBAAC,GAAD;CAA0B,OAFnB,SAAe;EAAE;EAAQ;EAAU;CAAQ,IAAI;EAAC;EAAQ;EAAU;CAAO,CAEtD;CAAQ;AAA4B,CAAA,GCyC1D,KAAc,EACzB,iBAAc,YACd,UAAO,IACP,YAAS,WACT,aACA,cACA,UAAU,GACV,aAAU,IACV,QACA,GAAG,QACkB;CACrB,IAAM,EAAE,YAAS,cAAW,eAAY,gBAAa,YAAS,EAAoB,GAC5E,IAAW,MAAiB,KAAA,IAA2B,IAAf;CAE9C,OACE,kBAAC,GAAD;EAA6B;EAAiB;EAAkB;YAC9D,kBAAC,EAAgB,YAAjB;GACE,wBAAqB;GACrB,WAAW,EAAiB;IAAE;IAAa;GAAU,CAAC;GAChD;GACD;GACK;GACG;GACP;GACI;GACV,mBAAiB;GACjB,gBAAc;GACd,iBAAe;GACf,oBAAkB;GAClB,GAAI;EACL,CAAA;CACiB,CAAA;AAExB;AAEA,EAAW,cAAc;;;ACzFzB,IAAa,IAET,OAAO,OAAO,GAAM,EACtB,SACF,CAAC;AAED,EAAW,cAAc,cACzB,EAAM,cAAc"}

package/dist/rating/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../form-field-BCqHBvWN.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-combined-state`),o=require(`@spark-ui/icons/StarFill`),s=require(`@spark-ui/icons/StarOutline`);var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:+(e>=t+1)}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){V&&(F(e+1),A.current[e]?.focus())}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-DY4l9nsc.js"),t=require("../form-field-B38U0zp8.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/hooks/use-combined-state"),o=require("@spark-ui/icons/StarFill"),s=require("@spark-ui/icons/StarOutline");var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:+(e>=t+1)}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){if(!V)return;let t=e+1;F(t),A.current[e]?.focus()}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
 //# sourceMappingURL=index.js.map

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',\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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"}
+{"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',\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

@@ -1,5 +1,5 @@
-import { t as e } from "../icon-D05Uqh8_.mjs";
-import { n as t } from "../form-field-ByLHXtzx.mjs";
+import { t as e } from "../icon-Bs-39J-H.mjs";
+import { n as t } from "../form-field-DCKyhBmv.mjs";
 import { cva as n, cx as r } from "class-variance-authority";
 import { useCallback as i, useId as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -128,7 +128,9 @@ function b(e, t) {
 var x = ({ defaultValue: e, value: n, onValueChange: d, disabled: f, readOnly: p, required: m, name: x, id: S, "aria-label": C, getStarLabel: w, ref: T, ...E }) => {
 	let { labelId: D, isInvalid: O, isRequired: k, description: A, name: j, disabled: M, readOnly: N } = t(), P = o([]), F = a(), [I, L] = s(null), [R, z] = u(n, e, d), B = v(R ?? 0), V = f ?? M, H = p ?? N, U = m === void 0 ? k : m, W = x ?? j, G = !(V || H), K = w !== void 0 || C !== void 0, q = I === null ? B : I + 1;
 	function J(e) {
-		G && (z(e + 1), P.current[e]?.focus());
+		if (!G) return;
+		let t = e + 1;
+		z(t), P.current[e]?.focus();
 	}
 	let Y = i((e) => y(e, P, z, G), [G, z]);
 	function X({ currentTarget: e }) {

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',\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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"}
+{"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',\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

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