@spark-ui/components 15.1.0 → 16.0.1

package/dist/rating/Rating.d.ts

@@ -1,23 +1,23 @@
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';
-import { RatingStarProps } from './RatingStar';
+import { RatingValue } from './types';
 export interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {
     /**
      * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.
      *
      * Use this when you want to use it in an uncontrolled manner
      */
-    defaultValue?: number;
+    defaultValue?: RatingValue;
     /**
      * The value is the number of the rating selected, on a scale from 0 to 5.
      *
      * Use this when you want to use it in a controlled manner,
      * in conjunction with the `onValueChange` prop
      */
-    value?: number;
+    value?: RatingValue;
     /**
      * Event handler called when the value changes.
      */
-    onValueChange?: (value: number) => void;
+    onValueChange?: (value: RatingValue) => void;
     /**
      * Sets the component as interactive or not.
      * @default undefined
@@ -29,24 +29,29 @@ export interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'di
      */
     disabled?: boolean;
     /**
-     * Sets the size of the stars.
-     * @default 'md'
+     * When true, indicates that the user must select a rating before form submission.
+     * @default false
      */
-    size?: RatingStarProps['size'];
+    required?: boolean;
     /**
-     * Name of the underlying input.
+     * Name of the underlying hidden input (for form submission).
      * @default undefined
      */
     name?: string;
     /**
-     * id of the underlying input.
+     * id of the underlying hidden input.
      * @default undefined
      */
     id?: string;
     /**
-     * aria-label of the underlying input.
+     * aria-label of the radiogroup.
      * @default undefined
      */
-    'aria-label': string;
+    'aria-label'?: string;
+    /**
+     * Returns the aria-label applied to each radio star.
+     * Defaults to `${aria-label} ${index + 1}`.
+     */
+    getStarLabel?: (index: number) => string;
 }
-export declare const Rating: ({ defaultValue, value: propValue, onValueChange, size, disabled, readOnly, name, id, "aria-label": ariaLabel, ref, ...rest }: RatingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Rating: ({ defaultValue, value: propValue, onValueChange, disabled, readOnly, required: requiredProp, name, id, "aria-label": ariaLabel, getStarLabel, ref, ...rest }: RatingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/rating/RatingStar.d.ts

@@ -1,10 +1,19 @@
-import { MouseEvent, Ref } from 'react';
+import { KeyboardEvent, MouseEvent, PropsWithChildren, Ref } from 'react';
 import { RatingStarIconStylesProps, RatingStarstylesProps } from './RatingStar.styles';
 import { StarValue } from './types';
-export interface RatingStarProps extends RatingStarstylesProps, RatingStarIconStylesProps {
+export interface RatingStarProps extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {
     value: StarValue;
+    /** Whether this radio option is selected (for radiogroup pattern). */
+    checked?: boolean;
+    /** Accessible name for the radio (e.g. "one star", "two stars"). */
+    ariaLabel?: string;
+    /** Accessible ids used to compose the radio name. */
+    ariaLabelledBy?: string;
+    /** Tab index for roving tabindex (0 or -1). */
+    tabIndex?: number;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
     onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     ref?: Ref<HTMLDivElement>;
 }
-export declare const RatingStar: ({ value, size, disabled, readOnly, onClick, onMouseEnter, ref: forwardedRef, }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RatingStar: ({ value, size, disabled, readOnly, checked, ariaLabel, ariaLabelledBy, tabIndex, onClick, onKeyDown, onMouseEnter, children, ref: forwardedRef, }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/rating/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),O=require("@spark-ui/hooks/use-combined-state"),o=require("class-variance-authority"),p=require("react"),P=require("@spark-ui/icons/StarFill"),D=require("@spark-ui/icons/StarOutline"),S=require("../Icon-CF0W0LKr.js"),_=o.cx("[&_>_div]:peer-hover:w-0!"),F=o.cva(["peer","after:inset-0","group","relative","after:block after:absolute"],{variants:{disabled:{true:"opacity-dim-3",false:""},readOnly:{true:"",false:""},gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},compoundVariants:[{readOnly:!1,disabled:!1,className:o.cx(_,"cursor-pointer")}],defaultVariants:{disabled:!1,readOnly:!1,gap:"sm"}}),y=o.cva("",{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:e,size:a,disabled:s,readOnly:n,onClick:c,onMouseEnter:i,ref:m})=>r.jsxs("div",{"data-spark-component":"rating-star",ref:m,onMouseEnter:i,className:F({gap:a==="lg"?"md":"sm",disabled:s,readOnly:n}),"data-part":"star",onClick:c,children:[r.jsx("div",{className:o.cx("z-raised absolute overflow-hidden","group-[[data-part=star][data-hovered]]:overflow-visible"),style:{width:e*100+"%"},children:r.jsx(S.Icon,{className:y({size:a,design:"filled"}),children:r.jsx(P.StarFill,{})})}),r.jsx(S.Icon,{className:y({size:a,design:"outlined"}),children:r.jsx(D.StarOutline,{})})]});function R(e){return Math.round(e/.5)*.5}function L({value:e,index:a}){if(e===void 0)return 0;const s=a+1,n=R(e);return Math.ceil(n)<s?0:n>=s?1:.5}function B(e,a){const s=e.slice(0,a),n=e.slice(a);return[s,n]}const T=({defaultValue:e,value:a,onValueChange:s,size:n="md",disabled:c,readOnly:i,name:m,id:N,"aria-label":j,ref:k,...A})=>{const u=p.useRef(null),f=p.useRef([]),[v,b]=O.useCombinedState(a,e,s),g=p.useRef(v),h=!(c||i);function I(t){u.current&&(b(t+1),g.current=t+1,u.current.focus(),u.current.setAttribute("data-clicked",""))}function w(t){g.current===Number(t.target.value)||Number(t.target.value)===0||(g.current=Number(t.target.value),b(Number(t.target.value)))}function C({currentTarget:t}){const l=f.current.findIndex(d=>d===t),[x,E]=B(f.current,l+1);x.forEach(d=>d.setAttribute("data-hovered","")),E.forEach(d=>d.removeAttribute("data-hovered"))}const q=p.useCallback(t=>{t&&f.current.push(t)},[]);function M(){u.current?.removeAttribute("data-clicked")}function V(){f.current.forEach(t=>t.removeAttribute("data-hovered"))}return r.jsxs("div",{className:"relative inline-flex",ref:k,"data-spark-component":"rating",...A,onMouseLeave:V,children:[r.jsx("input",{name:m,id:N,"aria-label":j,ref:u,"data-part":"input",className:"peer absolute inset-0 opacity-0",type:"range",min:"0",max:"5",step:i?.5:1,disabled:c,readOnly:i,value:R(v??0),onChange:t=>h&&w(t),onBlur:M}),r.jsx("div",{className:o.cx(n==="lg"?"gap-x-md":"gap-x-sm","flex","peer-focus-visible:u-outline peer-[[data-part=input][data-clicked]]:shadow-none"),children:Array.from({length:5}).map((t,l)=>r.jsx(H,{disabled:c,readOnly:i,size:n,onClick:()=>h&&I(l),onMouseEnter:x=>h&&C(x),ref:q,value:L({index:l,value:v})},l))})]})};exports.Rating=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),G=require("@spark-ui/hooks/use-combined-state"),f=require("class-variance-authority"),u=require("react"),Q=require("../form-field/index.js"),W=require("@spark-ui/icons/StarFill"),X=require("@spark-ui/icons/StarOutline"),V=require("../Icon-CF0W0LKr.js"),Y=f.cx("[&_>_div]:peer-hover:w-0!"),Z=f.cva(["peer after:inset-0 group relative after:block after:absolute"],{variants:{disabled:{true:"opacity-dim-3",false:""},readOnly:{true:"",false:""},gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},compoundVariants:[{readOnly:!1,disabled:!1,className:f.cx(Y,"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"}}),H=f.cva("",{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"]}}}),ee=({value:e,size:t,disabled:r,readOnly:o,checked:i=!1,ariaLabel:l,ariaLabelledBy:c,tabIndex:I,onClick:v,onKeyDown:h,onMouseEnter:k,children:w,ref:p})=>{const g=!r&&!o,[j,y]=u.useState(!1),C=R=>{v?.(R),g&&y(!0)},S=()=>y(!1);return n.jsxs("div",{ref:p,role:"radio","aria-checked":i,"aria-label":l,"aria-labelledby":c,tabIndex:I,"data-spark-component":"rating-star","data-part":"star",...g&&j&&{"data-suppress-scale":""},className:Z({gap:t==="lg"?"md":"sm",disabled:r,readOnly:o}),onClick:C,onKeyDown:h,onMouseEnter:k,onMouseLeave:S,onMouseMove:S,children:[n.jsx("div",{className:f.cx("z-raised absolute overflow-hidden","group-[[data-part=star][data-hovered]]:overflow-visible"),style:{width:e*100+"%"},children:n.jsx(V.Icon,{className:H({size:t,design:"filled"}),children:n.jsx(W.StarFill,{})})}),n.jsx(V.Icon,{className:H({size:t,design:"outlined"}),children:n.jsx(X.StarOutline,{})}),w]})};function ae({value:e,index:t}){if(e===void 0)return 0;const r=t+1;return e>=r?1:0}function te(e,t){const r=e.slice(0,t),o=e.slice(t);return[r,o]}const re=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function se(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}}}function ne(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}const oe=({defaultValue:e,value:t,onValueChange:r,disabled:o,readOnly:i,required:l,name:c,id:I,"aria-label":v,getStarLabel:h,ref:k,...w})=>{const{labelId:p,isInvalid:g,isRequired:j,description:y,name:C,disabled:S,readOnly:R}=Q.useFormFieldControl(),d=u.useRef([]),N=u.useId(),[D,O]=u.useState(null),[K,q]=G.useCombinedState(t,e,r),x=re(K??0),F=o??S,$=i??R,L=l!==void 0?l:j,E=c??C,m=!(F||$),A=h!==void 0||v!==void 0,_=D!==null?D+1:x;function J(s){if(!m)return;const a=s+1;q(a),d.current[s]?.focus()}const P=u.useCallback(s=>se(s,d,q,m),[m,q]);function T({currentTarget:s}){const a=d.current.findIndex(b=>b===s);O(a>=0?a:null);const[M,U]=te(d.current,a+1);M.forEach(b=>b?.setAttribute("data-hovered","")),U.forEach(b=>b?.removeAttribute("data-hovered"))}const z=u.useCallback(s=>a=>{d.current[s]=a},[]);function B(){O(null),d.current.forEach(s=>s?.removeAttribute("data-hovered"))}return n.jsxs("div",{ref:k,id:I,role:"radiogroup","aria-label":v,"aria-labelledby":p,"aria-invalid":g,"aria-required":L,"aria-describedby":y,className:"relative inline-flex","data-spark-component":"rating",...w,onMouseLeave:B,children:[E!==void 0&&n.jsx("input",{type:"hidden",name:E,value:x,"aria-hidden":!0,"data-part":"input"}),n.jsx("div",{className:f.cx("gap-x-md","flex"),children:Array.from({length:5}).map((s,a)=>n.jsx(ee,{ref:z(a),disabled:F,readOnly:$,size:"lg",value:ae({index:a,value:_}),checked:x===a+1,ariaLabel:A?h?.(a)??`${v} ${a+1}`:void 0,ariaLabelledBy:!A&&p?`${p} ${N}-star-${a+1}`:void 0,tabIndex:m?ne(a,x):-1,onClick:()=>J(a),onKeyDown:P(a),onMouseEnter:M=>m&&T(M),children:!A&&n.jsx("span",{id:`${N}-star-${a+1}`,className:"sr-only",children:a+1})},a))})]})};exports.Rating=oe;
 //# sourceMappingURL=index.js.map

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(\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.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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"}

package/dist/rating/index.mjs

@@ -1,41 +1,46 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import { useCombinedState as H } from "@spark-ui/hooks/use-combined-state";
-import { cx as f, cva as k } from "class-variance-authority";
-import { useRef as b, useCallback as L } from "react";
-import { StarFill as O } from "@spark-ui/icons/StarFill";
-import { StarOutline as B } from "@spark-ui/icons/StarOutline";
-import { I as x } from "../Icon-Ck-dhfLd.mjs";
-const F = f("[&_>_div]:peer-hover:w-0!"), q = k(
-  ["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"]
-      }
+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-Ck-dhfLd.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: ""
     },
-    compoundVariants: [
-      {
-        readOnly: !1,
-        disabled: !1,
-        className: f(F, "cursor-pointer")
-      }
-    ],
-    defaultVariants: {
-      disabled: !1,
+    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,
-      gap: "sm"
+      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"
   }
-), N = k("", {
+}), H = L("", {
   variants: {
     size: {
       sm: "text-caption-link",
@@ -50,154 +55,196 @@ const F = f("[&_>_div]:peer-hover:w-0!"), q = k(
       outlined: ["text-on-surface/dim-3"]
     }
   }
-}), G = ({
+}), ne = ({
   value: e,
-  size: a,
-  disabled: n,
-  readOnly: r,
-  onClick: i,
-  onMouseEnter: s,
-  ref: m
-}) => /* @__PURE__ */ y(
-  "div",
-  {
-    "data-spark-component": "rating-star",
-    ref: m,
-    onMouseEnter: s,
-    className: q({
-      gap: a === "lg" ? "md" : "sm",
-      disabled: n,
-      readOnly: r
-    }),
-    "data-part": "star",
-    onClick: i,
-    children: [
-      /* @__PURE__ */ o(
-        "div",
-        {
-          className: f(
-            "z-raised absolute overflow-hidden",
-            "group-[[data-part=star][data-hovered]]:overflow-visible"
-          ),
-          style: { width: e * 100 + "%" },
-          children: /* @__PURE__ */ o(
-            x,
-            {
-              className: N({
-                size: a,
-                design: "filled"
-              }),
-              children: /* @__PURE__ */ o(O, {})
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ o(x, { className: N({ size: a, design: "outlined" }), children: /* @__PURE__ */ o(B, {}) })
-    ]
-  }
-);
-function A(e) {
-  return Math.round(e / 0.5) * 0.5;
-}
-function J({ value: e, index: a }) {
+  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
+      ]
+    }
+  );
+};
+function oe({ value: e, index: t }) {
   if (e === void 0) return 0;
-  const n = a + 1, r = A(e);
-  return Math.ceil(r) < n ? 0 : r >= n ? 1 : 0.5;
+  const r = t + 1;
+  return e >= r ? 1 : 0;
+}
+function ie(e, t) {
+  const r = e.slice(0, t), o = e.slice(t);
+  return [r, o];
 }
-function K(e, a) {
-  const n = e.slice(0, a), r = e.slice(a);
-  return [n, r];
+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;
+      }
+  };
+}
+function de(e, t) {
+  return t >= 1 ? t - 1 === e ? 0 : -1 : e === 0 ? 0 : -1;
 }
-const $ = ({
+const ye = ({
   defaultValue: e,
-  value: a,
-  onValueChange: n,
-  size: r = "md",
-  disabled: i,
-  readOnly: s,
-  name: m,
-  id: R,
-  "aria-label": w,
-  ref: I,
-  ...C
+  value: t,
+  onValueChange: r,
+  disabled: o,
+  readOnly: i,
+  required: l,
+  name: c,
+  id: I,
+  "aria-label": u,
+  getStarLabel: v,
+  ref: k,
+  ...w
 }) => {
-  const l = b(null), d = b([]), [p, S] = H(a, e, n), v = b(p), g = !(i || s);
-  function E(t) {
-    l.current && (S(t + 1), v.current = t + 1, l.current.focus(), l.current.setAttribute("data-clicked", ""));
-  }
-  function M(t) {
-    v.current === Number(t.target.value) || Number(t.target.value) === 0 || (v.current = Number(t.target.value), S(Number(t.target.value)));
+  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();
   }
-  function V({ currentTarget: t }) {
-    const c = d.current.findIndex((u) => u === t), [h, j] = K(d.current, c + 1);
-    h.forEach((u) => u.setAttribute("data-hovered", "")), j.forEach((u) => u.removeAttribute("data-hovered"));
-  }
-  const D = L((t) => {
-    t && d.current.push(t);
-  }, []);
-  function P() {
-    l.current?.removeAttribute("data-clicked");
+  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"));
   }
-  function _() {
-    d.current.forEach((t) => t.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__ */ y(
+  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",
-      ref: I,
       "data-spark-component": "rating",
-      ...C,
-      onMouseLeave: _,
+      ...w,
+      onMouseLeave: Q,
       children: [
-        /* @__PURE__ */ o(
-          "input",
+        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,
           {
-            name: m,
-            id: R,
-            "aria-label": w,
-            ref: l,
-            "data-part": "input",
-            className: "peer absolute inset-0 opacity-0",
-            type: "range",
-            min: "0",
-            max: "5",
-            step: s ? 0.5 : 1,
-            disabled: i,
-            readOnly: s,
-            value: A(p ?? 0),
-            onChange: (t) => g && M(t),
-            onBlur: P
-          }
-        ),
-        /* @__PURE__ */ o(
-          "div",
-          {
-            className: f(
-              r === "lg" ? "gap-x-md" : "gap-x-sm",
-              "flex",
-              "peer-focus-visible:u-outline peer-[[data-part=input][data-clicked]]:shadow-none"
-            ),
-            children: Array.from({ length: 5 }).map((t, c) => /* @__PURE__ */ o(
-              G,
-              {
-                disabled: i,
-                readOnly: s,
-                size: r,
-                onClick: () => g && E(c),
-                onMouseEnter: (h) => g && V(h),
-                ref: D,
-                value: J({ index: c, value: p })
-              },
-              c
-            ))
-          }
-        )
+            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
+        )) })
       ]
     }
   );
 };
 export {
-  $ as Rating
+  ye as Rating
 };
 //# sourceMappingURL=index.mjs.map