@spark-ui/components 15.0.0 → 16.0.0

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

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';