@spark-ui/components 15.1.0 → 16.0.1

package/dist/rating/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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(\n  ['peer', 'after:inset-0', 'group', 'relative', 'after:block after:absolute'],\n  {\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(emptyRemainingStarsOnHoverClass, 'cursor-pointer'),\n      },\n    ],\n    defaultVariants: {\n      disabled: false,\n      readOnly: false,\n      gap: 'sm',\n    },\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 MouseEvent, Ref } 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 extends RatingStarstylesProps, RatingStarIconStylesProps {\n  value: StarValue\n  onClick?: (event: MouseEvent<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  onClick,\n  onMouseEnter,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-star\"\n      ref={forwardedRef}\n      onMouseEnter={onMouseEnter}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      data-part=\"star\"\n      onClick={onClick}\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    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction 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 { getNearestHalfDecimal, getStarValue, splitAt }\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type PropsWithChildren,\n  useCallback,\n  useRef,\n} from 'react'\n\nimport { RatingStar, type RatingStarProps } from './RatingStar'\nimport { getNearestHalfDecimal, getStarValue, splitAt } from './utils'\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?: number\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?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => 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   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingStarProps['size']\n  /**\n   * Name of the underlying input.\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the underlying input.\n   * @default undefined\n   */\n  'aria-label': string\n}\n\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  size = 'md',\n  disabled,\n  readOnly,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const starRefList = useRef<HTMLDivElement[]>([])\n\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n\n  const valueRef = useRef(value)\n  const isInteractive = !(disabled || readOnly)\n\n  function onStarClick(index: number) {\n    if (!inputRef.current) return\n\n    setRatingValue(index + 1)\n    valueRef.current = index + 1\n\n    inputRef.current.focus()\n    inputRef.current.setAttribute('data-clicked', '')\n  }\n\n  function onInputChange(event: ChangeEvent<HTMLInputElement>) {\n    // 1. Avoiding unnecessary calls to onValueChange prop if value doesn't change\n    // 2. Preventing value to be resetted to 0\n    if (valueRef.current === Number(event.target.value) || Number(event.target.value) === 0) {\n      return\n    }\n    valueRef.current = Number(event.target.value)\n\n    setRatingValue(Number(event.target.value))\n  }\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n\n    previousStars.forEach(star => star.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback((elm: HTMLDivElement | null) => {\n    if (!elm) return\n    starRefList.current.push(elm)\n  }, [])\n\n  function resetDataPartInputAttr() {\n    inputRef.current?.removeAttribute('data-clicked')\n  }\n\n  function resetDataPartStarAttr() {\n    starRefList.current.forEach(star => star.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      className=\"relative inline-flex\"\n      ref={ref}\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      <input\n        name={name}\n        id={id}\n        aria-label={ariaLabel}\n        ref={inputRef}\n        data-part=\"input\"\n        className=\"peer absolute inset-0 opacity-0\"\n        type=\"range\"\n        min=\"0\"\n        max=\"5\"\n        step={readOnly ? 0.5 : 1}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={getNearestHalfDecimal(value ?? 0)}\n        onChange={event => isInteractive && onInputChange(event)}\n        onBlur={resetDataPartInputAttr}\n      />\n      <div\n        className={cx(\n          size === 'lg' ? 'gap-x-md' : 'gap-x-sm',\n          'flex',\n          'peer-focus-visible:u-outline peer-[[data-part=input][data-clicked]]:shadow-none'\n        )}\n      >\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            disabled={disabled}\n            readOnly={readOnly}\n            size={size}\n            onClick={() => isInteractive && onStarClick(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n            ref={handleStarRef}\n            key={index}\n            value={getStarValue({ index, value })}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["emptyRemainingStarsOnHoverClass","cx","ratingStarStyles","cva","ratingStarIconStyles","RatingStar","value","size","disabled","readOnly","onClick","onMouseEnter","forwardedRef","jsxs","jsx","Icon","StarFill","StarOutline","getNearestHalfDecimal","num","getStarValue","index","starPosition","formattedValue","splitAt","arr","prev","next","Rating","defaultValue","propValue","onValueChange","name","id","ariaLabel","ref","rest","inputRef","useRef","starRefList","setRatingValue","useCombinedState","valueRef","isInteractive","onStarClick","onInputChange","event","onStarMouseEnter","currentTarget","currentStarIndex","star","previousStars","followingStars","handleStarRef","useCallback","elm","resetDataPartInputAttr","resetDataPartStarAttr","_"],"mappings":"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"}
+{"version":3,"file":"index.mjs","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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"}

package/dist/rating/types.d.ts

@@ -1 +1,2 @@
-export type StarValue = 0 | 0.5 | 1;
+export type RatingValue = 0 | 1 | 2 | 3 | 4 | 5;
+export type StarValue = 0 | 1;

package/dist/rating/utils.d.ts

@@ -1,8 +1,7 @@
 import { StarValue } from './types';
-declare function getNearestHalfDecimal(num: number): number;
 declare function getStarValue({ value, index }: {
     value?: number;
     index: number;
 }): StarValue;
 declare function splitAt<T>(arr: T[], index: number): [T[], T[]];
-export { getNearestHalfDecimal, getStarValue, splitAt };
+export { getStarValue, splitAt };

package/dist/rating-display/RatingDisplay.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import { RatingDisplayStarProps } from './RatingDisplayStar';
+export interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {
+    /**
+     * The rating value to display, on a scale from 0 to 5.
+     */
+    value?: number;
+    /**
+     * Sets the size of the stars.
+     * @default 'md'
+     */
+    size?: RatingDisplayStarProps['size'];
+    /**
+     * Optional count value available to `RatingDisplay.Count`.
+     */
+    count?: number;
+    /**
+     * Accessible description of the rating content.
+     */
+    'aria-label': string;
+}
+export type RatingDisplayRootProps = RatingDisplayProps;
+export declare const RatingDisplay: {
+    ({ value, size, count, ref, children, ...rest }: RatingDisplayProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/rating-display/RatingDisplayContext.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { RatingDisplayStarProps } from './RatingDisplayStar';
+interface RatingDisplayContextValue {
+    value: number;
+    size: RatingDisplayStarProps['size'];
+    count?: number;
+}
+interface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {
+}
+export declare const RatingDisplayProvider: ({ value, size, count, children, }: RatingDisplayProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useRatingDisplay: () => RatingDisplayContextValue;
+export {};

package/dist/rating-display/RatingDisplayCount.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+    /**
+     * Custom count content.
+     * Pass a render function to receive the count value and return the content to render.
+     */
+    children?: ReactNode | ((count: number) => ReactNode);
+}
+export declare const RatingDisplayCount: {
+    ({ className, children, ...rest }: RatingDisplayCountProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/rating-display/RatingDisplayStar.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import { StarValue } from './types';
+declare const ratingDisplayStarStyles: (props?: ({
+    gap?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const ratingDisplayStarIconStyles: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    design?: "filled" | "outlined" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>;
+type RatingDisplayStarIconStylesProps = Omit<VariantProps<typeof ratingDisplayStarIconStyles>, 'design'>;
+export interface RatingDisplayStarProps extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {
+    value: StarValue;
+}
+export declare const RatingDisplayStar: ({ value, size }: RatingDisplayStarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/rating-display/RatingDisplayStars.d.ts

@@ -0,0 +1,22 @@
+import { RatingDisplayStarProps } from './RatingDisplayStar';
+import { StarValue } from './types';
+export interface RatingDisplayStarsProps {
+    size?: RatingDisplayStarProps['size'];
+    /**
+     * Sets the rendering mode for stars.
+     * @default 'default'
+     */
+    variant?: 'default' | 'single-star';
+    /**
+     * Custom fill algorithm for each star.
+     * By default, stars are rounded to the nearest 0.5.
+     */
+    getFillMode?: ({ value, index }: {
+        value?: number;
+        index: number;
+    }) => StarValue;
+}
+export declare const RatingDisplayStars: {
+    ({ size, variant, getFillMode, }: RatingDisplayStarsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/rating-display/RatingDisplayValue.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+    /**
+     * Custom value content.
+     * Pass a render function to receive the formatted value (first arg) and raw value (second arg),
+     * then return the content to render.
+     */
+    children?: ReactNode | ((formattedValue: string, value: number) => ReactNode);
+}
+export declare const RatingDisplayValue: {
+    ({ className, children, ...rest }: RatingDisplayValueProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/rating-display/index.d.mts

@@ -0,0 +1,14 @@
+import { RatingDisplay as Root } from './RatingDisplay';
+import { RatingDisplayCount as Count } from './RatingDisplayCount';
+import { RatingDisplayStars as Stars } from './RatingDisplayStars';
+import { RatingDisplayValue as Value } from './RatingDisplayValue';
+export declare const RatingDisplay: typeof Root & {
+    Stars: typeof Stars;
+    Value: typeof Value;
+    Count: typeof Count;
+};
+export { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay';
+export { type RatingDisplayStarsProps } from './RatingDisplayStars';
+export { type RatingDisplayValueProps } from './RatingDisplayValue';
+export { type RatingDisplayCountProps } from './RatingDisplayCount';
+export type { StarValue } from './types';

package/dist/rating-display/index.d.ts

@@ -0,0 +1,14 @@
+import { RatingDisplay as Root } from './RatingDisplay';
+import { RatingDisplayCount as Count } from './RatingDisplayCount';
+import { RatingDisplayStars as Stars } from './RatingDisplayStars';
+import { RatingDisplayValue as Value } from './RatingDisplayValue';
+export declare const RatingDisplay: typeof Root & {
+    Stars: typeof Stars;
+    Value: typeof Value;
+    Count: typeof Count;
+};
+export { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay';
+export { type RatingDisplayStarsProps } from './RatingDisplayStars';
+export { type RatingDisplayValueProps } from './RatingDisplayValue';
+export { type RatingDisplayCountProps } from './RatingDisplayCount';
+export type { StarValue } from './types';

package/dist/rating-display/index.js

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

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

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

package/dist/rating-display/index.mjs

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

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

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

package/dist/rating-display/types.d.ts

@@ -0,0 +1 @@
+export type StarValue = 0 | 0.5 | 1;

package/dist/rating-display/utils.d.ts

@@ -0,0 +1,10 @@
+import { StarValue } from './types';
+declare function getNearestHalfDecimal(num: number): number;
+declare function formatRatingValue(value: number): string;
+declare function getStarValue({ value, index }: {
+    value?: number;
+    index: number;
+}): StarValue;
+declare function getSingleStarValue(value?: number): StarValue;
+declare function splitAt<T>(arr: T[], index: number): [T[], T[]];
+export { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt };

package/dist/switch/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("@spark-ui/components/form-field"),c=require("class-variance-authority"),v=require("react"),D=require("@spark-ui/hooks/use-combined-state"),$=require("@spark-ui/icons/Check"),L=require("@spark-ui/icons/Close"),w=require("radix-ui"),k=require("../Slot-DQ8z2zsy.js"),a=require("@spark-ui/internal-utils"),P=require("../label/index.js"),T=c.cva(a.tw(["relative shrink-0 self-baseline","cursor-pointer","rounded-full border-transparent","hover:ring-4","transition-colors duration-200 ease-in-out","disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3","focus-visible:u-outline","data-[state=unchecked]:bg-on-surface/dim-3","u-shadow-border-transition","overflow-x-hidden"]),{variants:{size:a.makeVariants({sm:a.tw(["h-sz-24","w-sz-40","border-md"]),md:a.tw(["h-sz-32","w-sz-56","border-[4px]"])}),intent:a.makeVariants({main:["data-[state=checked]:bg-main","hover:ring-main-container","text-main"],support:["data-[state=checked]:bg-support","hover:ring-support-container","text-support"],accent:["data-[state=checked]:bg-accent","hover:ring-accent-container","text-accent"],basic:["data-[state=checked]:bg-basic","hover:ring-basic-container","text-basic"],success:["data-[state=checked]:bg-success","hover:ring-success-container","text-success"],alert:["data-[state=checked]:bg-alert","hover:ring-alert-container","text-alert"],error:["data-[state=checked]:bg-error","hover:ring-error-container","text-error"],info:["data-[state=checked]:bg-info","hover:ring-info-container","text-info"],neutral:["data-[state=checked]:bg-neutral","hover:ring-neutral-container","text-neutral"]})},defaultVariants:{intent:"basic",size:"sm"}}),U=c.cva(["pointer-events-none absolute inset-0 flex items-center","transition-all duration-200 ease-in-out"],{variants:{checked:{true:"translate-x-full",false:"translate-x-0"}}}),A=c.cva(["absolute left-0 top-0 flex items-center justify-center","bg-surface","rounded-full","ring-0","transition-all duration-200 ease-in-out"],{variants:{size:a.makeVariants({sm:["h-sz-20","w-sz-20"],md:["h-sz-24","w-sz-24"]}),checked:{true:"-translate-x-full",false:"translate-x-0 text-on-surface/dim-2"}},defaultVariants:{size:"sm",checked:!1}}),S=c.cva(["transition-opacity duration-200"],{variants:{size:a.makeVariants({sm:["h-sz-10 w-sz-10"],md:["h-sz-12 w-sz-12"]})},defaultVariants:{size:"sm"}}),z=({checked:n,checkedIcon:t=e.jsx($.Check,{}),defaultChecked:r,intent:m,uncheckedIcon:o=e.jsx(L.Close,{}),size:i="md",value:b="on",onCheckedChange:x,className:l,required:d,ref:p,...u})=>{const[s,h]=D.useCombinedState(n,r),{name:f,description:q,state:I,isRequired:F,isInvalid:N}=y.useFormFieldControl(),V=I??m,R=g=>{h(g),x?.(g)};return e.jsx(w.Switch.Root,{"data-spark-component":"switch-input",ref:p,className:T({intent:V,size:i,className:l}),value:b,checked:n,defaultChecked:r,onCheckedChange:R,name:f,required:d||F,"aria-invalid":N,"aria-describedby":q,...u,children:e.jsx("span",{className:U({checked:s}),children:e.jsxs(w.Switch.Thumb,{className:A({size:i,checked:s}),children:[s&&t&&e.jsx(k.Slot,{className:S({size:i}),children:t}),!s&&o&&e.jsx(k.Slot,{className:S({size:i}),children:o})]})})})};z.displayName="SwitchInput";const E=c.cva("",{variants:{disabled:{true:["text-neutral/dim-2","cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),G=({className:n,disabled:t,...r})=>e.jsx(P.Label,{"data-spark-component":"switch-label",className:E({disabled:t,className:n}),...r}),j=":switch",C=({size:n="md",children:t,className:r,id:m,disabled:o,reverse:i=!1,ref:b,...x})=>{const l=y.useFormFieldControl(),d=`${j}-label-${v.useId()}`,p=`${j}-input-${v.useId()}`,u=l.id||m||p,s=t&&e.jsx(G,{disabled:o,htmlFor:u,id:d,children:t}),h=e.jsx(z,{ref:b,size:n,id:u,disabled:o,"aria-labelledby":t?d:l.labelId,...x}),f=i?e.jsxs(e.Fragment,{children:[s,h]}):e.jsxs(e.Fragment,{children:[h,s]});return e.jsx("div",{"data-spark-component":"switch",className:c.cx("gap-md text-body-1 flex items-center",r),children:f})};C.displayName="Switch";exports.Switch=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("@spark-ui/components/form-field"),c=require("class-variance-authority"),v=require("react"),D=require("@spark-ui/hooks/use-combined-state"),$=require("@spark-ui/icons/Check"),L=require("@spark-ui/icons/Close"),w=require("radix-ui"),k=require("../Slot-DQ8z2zsy.js"),a=require("@spark-ui/internal-utils"),P=require("../label/index.js"),T=c.cva(a.tw(["relative shrink-0 self-baseline","cursor-pointer","rounded-full border-transparent","hover:ring-4","transition-colors duration-200 ease-in-out","disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3","focus-visible:u-outline","data-[state=unchecked]:bg-on-surface/dim-3","u-shadow-border-transition","overflow-x-hidden"]),{variants:{size:a.makeVariants({sm:a.tw(["h-sz-24","w-sz-40","border-md"]),md:a.tw(["h-sz-32","w-sz-56","border-[4px]"])}),intent:a.makeVariants({main:["data-[state=checked]:bg-main","hover:ring-main-container","text-main"],support:["data-[state=checked]:bg-support","hover:ring-support-container","text-support"],accent:["data-[state=checked]:bg-accent","hover:ring-accent-container","text-accent"],basic:["data-[state=checked]:bg-basic","hover:ring-basic-container","text-basic"],success:["data-[state=checked]:bg-success","hover:ring-success-container","text-success"],alert:["data-[state=checked]:bg-alert","hover:ring-alert-container","text-alert"],error:["data-[state=checked]:bg-error","hover:ring-error-container","text-error"],info:["data-[state=checked]:bg-info","hover:ring-info-container","text-info"],neutral:["data-[state=checked]:bg-neutral","hover:ring-neutral-container","text-neutral"]})},defaultVariants:{intent:"basic",size:"sm"}}),U=c.cva(["pointer-events-none absolute inset-0 flex items-center","transition-all duration-200 ease-in-out"],{variants:{checked:{true:"translate-x-full",false:"translate-x-0"}}}),A=c.cva(["absolute left-0 top-0 flex items-center justify-center","bg-surface","rounded-full","ring-0","transition-all duration-200 ease-in-out"],{variants:{size:a.makeVariants({sm:["h-sz-20","w-sz-20"],md:["h-sz-24","w-sz-24"]}),checked:{true:"-translate-x-full",false:"translate-x-0 text-on-surface/dim-2"}},defaultVariants:{size:"sm",checked:!1}}),S=c.cva(["transition-opacity duration-200"],{variants:{size:a.makeVariants({sm:["h-sz-10 w-sz-10"],md:["h-sz-12 w-sz-12"]})},defaultVariants:{size:"sm"}}),z=({checked:n,checkedIcon:t=e.jsx($.Check,{}),defaultChecked:r,intent:m,uncheckedIcon:o=e.jsx(L.Close,{}),size:i="md",value:b="on",onCheckedChange:x,className:l,required:d,ref:p,...u})=>{const[s,h]=D.useCombinedState(n,r),{name:f,description:q,state:I,isRequired:F,isInvalid:N}=y.useFormFieldControl(),V=I??m,R=g=>{h(g),x?.(g)};return e.jsx(w.Switch.Root,{"data-spark-component":"switch-input",ref:p,className:T({intent:V,size:i,className:l}),value:b,checked:n,defaultChecked:r,onCheckedChange:R,name:f,required:d||F,"aria-invalid":N,"aria-describedby":q,...u,children:e.jsx("span",{className:U({checked:s}),children:e.jsxs(w.Switch.Thumb,{className:A({size:i,checked:s}),children:[s&&t&&e.jsx(k.Slot,{className:S({size:i}),children:t}),!s&&o&&e.jsx(k.Slot,{className:S({size:i}),children:o})]})})})};z.displayName="SwitchInput";const E=c.cva("default:text-on-surface",{variants:{disabled:{true:["text-neutral/dim-2","cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),G=({className:n,disabled:t,...r})=>e.jsx(P.Label,{"data-spark-component":"switch-label",className:E({disabled:t,className:n}),...r}),j=":switch",C=({size:n="md",children:t,className:r,id:m,disabled:o,reverse:i=!1,ref:b,...x})=>{const l=y.useFormFieldControl(),d=`${j}-label-${v.useId()}`,p=`${j}-input-${v.useId()}`,u=l.id||m||p,s=t&&e.jsx(G,{disabled:o,htmlFor:u,id:d,children:t}),h=e.jsx(z,{ref:b,size:n,id:u,disabled:o,"aria-labelledby":t?d:l.labelId,...x}),f=i?e.jsxs(e.Fragment,{children:[s,h]}):e.jsxs(e.Fragment,{children:[h,s]});return e.jsx("div",{"data-spark-component":"switch",className:c.cx("gap-md text-body-1 flex items-center",r),children:f})};C.displayName="Switch";exports.Switch=C;
 //# sourceMappingURL=index.js.map