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

package/dist/rating/index.js.map

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