@spark-ui/components 13.1.3 → 13.1.4

package/dist/rating/index.mjs

@@ -1,11 +1,26 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import { useCombinedState as H } from "@spark-ui/hooks/use-combined-state";
-import { a as f, c as k } from "../index-BmAFn37q.mjs";
-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-D1RueiPY.mjs";
-const F = f("[&_>_div]:peer-hover:w-0!"), q = k(
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import "../chunk-6QCEPQ3U.mjs";
+
+// src/rating/Rating.tsx
+import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
+import { cx as cx3 } from "class-variance-authority";
+import {
+  useCallback,
+  useRef
+} from "react";
+
+// src/rating/RatingStar.tsx
+import { StarFill } from "@spark-ui/icons/StarFill";
+import { StarOutline } from "@spark-ui/icons/StarOutline";
+import { cx as cx2 } from "class-variance-authority";
+
+// src/rating/RatingStar.styles.ts
+import { cva, cx } from "class-variance-authority";
+var emptyRemainingStarsOnHoverClass = cx("[&_>_div]:peer-hover:w-0!");
+var ratingStarStyles = cva(
   ["peer", "after:inset-0", "group", "relative", "after:block after:absolute"],
   {
     variants: {
@@ -24,18 +39,19 @@ const F = f("[&_>_div]:peer-hover:w-0!"), q = k(
     },
     compoundVariants: [
       {
-        readOnly: !1,
-        disabled: !1,
-        className: f(F, "cursor-pointer")
+        readOnly: false,
+        disabled: false,
+        className: cx(emptyRemainingStarsOnHoverClass, "cursor-pointer")
       }
     ],
     defaultVariants: {
-      disabled: !1,
-      readOnly: !1,
+      disabled: false,
+      readOnly: false,
       gap: "sm"
     }
   }
-), N = k("", {
+);
+var ratingStarIconStyles = cva("", {
   variants: {
     size: {
       sm: "text-caption-link",
@@ -50,146 +66,175 @@ const F = f("[&_>_div]:peer-hover:w-0!"), q = k(
       outlined: ["text-on-surface/dim-3"]
     }
   }
-}), G = ({
-  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;
+});
+
+// src/rating/RatingStar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var RatingStar = ({
+  value,
+  size,
+  disabled,
+  readOnly,
+  onClick,
+  onMouseEnter,
+  ref: forwardedRef
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-spark-component": "rating-star",
+      ref: forwardedRef,
+      onMouseEnter,
+      className: ratingStarStyles({
+        gap: size === "lg" ? "md" : "sm",
+        disabled,
+        readOnly
+      }),
+      "data-part": "star",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx2(
+              "z-raised absolute overflow-hidden",
+              "group-[[data-part=star][data-hovered]]:overflow-visible"
+            ),
+            style: { width: value * 100 + "%" },
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                className: ratingStarIconStyles({
+                  size,
+                  design: "filled"
+                }),
+                children: /* @__PURE__ */ jsx(StarFill, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(Icon, { className: ratingStarIconStyles({ size, design: "outlined" }), children: /* @__PURE__ */ jsx(StarOutline, {}) })
+      ]
+    }
+  );
+};
+
+// src/rating/utils.ts
+function getNearestHalfDecimal(num) {
+  return Math.round(num / 0.5) * 0.5;
 }
-function J({ value: e, index: a }) {
-  if (e === void 0) return 0;
-  const n = a + 1, r = A(e);
-  return Math.ceil(r) < n ? 0 : r >= n ? 1 : 0.5;
+function getStarValue({ value, index }) {
+  if (value === void 0) return 0;
+  const starPosition = index + 1;
+  const formattedValue = getNearestHalfDecimal(value);
+  if (Math.ceil(formattedValue) < starPosition) return 0;
+  return formattedValue >= starPosition ? 1 : 0.5;
 }
-function K(e, a) {
-  const n = e.slice(0, a), r = e.slice(a);
-  return [n, r];
+function splitAt(arr, index) {
+  const prev = arr.slice(0, index);
+  const next = arr.slice(index);
+  return [prev, next];
 }
-const $ = ({
-  defaultValue: e,
-  value: a,
-  onValueChange: n,
-  size: r = "md",
-  disabled: i,
-  readOnly: s,
-  name: m,
-  id: R,
-  "aria-label": w,
-  ref: I,
-  ...C
+
+// src/rating/Rating.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Rating = ({
+  defaultValue,
+  value: propValue,
+  onValueChange,
+  size = "md",
+  disabled,
+  readOnly,
+  name,
+  id,
+  "aria-label": ariaLabel,
+  ref,
+  ...rest
 }) => {
-  const c = b(null), d = b([]), [p, S] = H(a, e, n), v = b(p), g = !(i || s);
-  function E(t) {
-    c.current && (S(t + 1), v.current = t + 1, c.current.focus(), c.current.setAttribute("data-clicked", ""));
+  const inputRef = useRef(null);
+  const starRefList = useRef([]);
+  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange);
+  const valueRef = useRef(value);
+  const isInteractive = !(disabled || readOnly);
+  function onStarClick(index) {
+    if (!inputRef.current) return;
+    setRatingValue(index + 1);
+    valueRef.current = index + 1;
+    inputRef.current.focus();
+    inputRef.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)));
+  function onInputChange(event) {
+    if (valueRef.current === Number(event.target.value) || Number(event.target.value) === 0) {
+      return;
+    }
+    valueRef.current = Number(event.target.value);
+    setRatingValue(Number(event.target.value));
   }
-  function V({ currentTarget: t }) {
-    const l = d.current.findIndex((u) => u === t), [h, j] = K(d.current, l + 1);
-    h.forEach((u) => u.setAttribute("data-hovered", "")), j.forEach((u) => u.removeAttribute("data-hovered"));
+  function onStarMouseEnter({ currentTarget }) {
+    const currentStarIndex = starRefList.current.findIndex((star) => star === currentTarget);
+    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1);
+    previousStars.forEach((star) => star.setAttribute("data-hovered", ""));
+    followingStars.forEach((star) => star.removeAttribute("data-hovered"));
   }
-  const D = L((t) => {
-    t && d.current.push(t);
+  const handleStarRef = useCallback((elm) => {
+    if (!elm) return;
+    starRefList.current.push(elm);
   }, []);
-  function P() {
-    c.current?.removeAttribute("data-clicked");
+  function resetDataPartInputAttr() {
+    inputRef.current?.removeAttribute("data-clicked");
   }
-  function _() {
-    d.current.forEach((t) => t.removeAttribute("data-hovered"));
+  function resetDataPartStarAttr() {
+    starRefList.current.forEach((star) => star.removeAttribute("data-hovered"));
   }
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: "relative inline-flex",
-      ref: I,
+      ref,
       "data-spark-component": "rating",
-      ...C,
-      onMouseLeave: _,
+      ...rest,
+      onMouseLeave: resetDataPartStarAttr,
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ jsx2(
           "input",
           {
-            name: m,
-            id: R,
-            "aria-label": w,
-            ref: c,
+            name,
+            id,
+            "aria-label": ariaLabel,
+            ref: inputRef,
             "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
+            step: readOnly ? 0.5 : 1,
+            disabled,
+            readOnly,
+            value: getNearestHalfDecimal(value ?? 0),
+            onChange: (event) => isInteractive && onInputChange(event),
+            onBlur: resetDataPartInputAttr
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ jsx2(
           "div",
           {
-            className: f(
-              r === "lg" ? "gap-x-md" : "gap-x-sm",
+            className: cx3(
+              size === "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) => /* @__PURE__ */ o(
-              G,
+            children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx2(
+              RatingStar,
               {
-                disabled: i,
-                readOnly: s,
-                size: r,
-                onClick: () => g && E(l),
-                onMouseEnter: (h) => g && V(h),
-                ref: D,
-                value: J({ index: l, value: p })
+                disabled,
+                readOnly,
+                size,
+                onClick: () => isInteractive && onStarClick(index),
+                onMouseEnter: (event) => isInteractive && onStarMouseEnter(event),
+                ref: handleStarRef,
+                value: getStarValue({ index, value })
               },
-              l
+              index
             ))
           }
         )
@@ -198,6 +243,6 @@ const $ = ({
   );
 };
 export {
-  $ as Rating
+  Rating
 };
-//# sourceMappingURL=index.mjs.map
+//# 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,"sources":["../../src/rating/Rating.tsx","../../src/rating/RatingStar.tsx","../../src/rating/RatingStar.styles.ts","../../src/rating/utils.ts"],"sourcesContent":["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","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 { 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 { 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"],"mappings":"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","names":["cx","cx","cx","jsx","jsxs","cx"]}

package/dist/scrolling-list/index.d.mts

@@ -0,0 +1,118 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithRef, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { IconButtonProps } from '../icon-button/index.mjs';
+import '../button/index.mjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type SnapType = 'mandatory' | 'proximity' | 'none';
+type ScrollBehavior = 'smooth' | 'instant';
+type SnapStop = 'normal' | 'always';
+interface Props$2 extends ComponentPropsWithRef<'div'> {
+    /**
+     * CSS scroll snap behavior.
+     * - `mandatory` to force snapping on each "page".
+     * - `proximity` to force snapping only when scroll position is near the edge of a "page". Behavior can change depending on each browser.
+     * - `none` to disabled scroll snapping.
+     */
+    snapType?: SnapType;
+    /**
+     * Defines whether or not the scroll container is allowed to "pass over" possible snap positions.
+     */
+    snapStop?: SnapStop;
+    scrollBehavior?: ScrollBehavior;
+    /**
+     * Add a fade effect to indicate content overflow.
+     */
+    withFade?: boolean;
+    children?: ReactNode;
+    /**
+     * When `true`, allow previous and next buttons to be used when reaching the edges of the list.
+     */
+    loop?: boolean;
+    /**
+     * Space (in pixels) between items.
+     */
+    gap?: number;
+    /**
+     * Offset (in pixels) of the left of the optimal viewing region of the list.
+     */
+    scrollPadding?: number;
+    className?: string;
+}
+declare const ScrollingList$1: {
+    ({ snapType, snapStop, scrollBehavior, loop, gap, withFade, scrollPadding, children, className, ...rest }: Props$2): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ScrollingListControls extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Visibility behavior of the control buttons:
+     * - `always`: buttons are always visible.
+     * - `hover`: buttons only appear on hover.
+     *
+     * a11y: `hover` is dangerous for accessibility as it disabled controls for touch screen users.
+     * When using it, you must provide an alternative control outside of the list to replace them.
+     */
+    visibility?: 'hover' | 'always';
+    children: ReactNode;
+}
+declare const ScrollingListControls: {
+    ({ children, visibility, className, ...rest }: ScrollingListControls): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ScrollingListItemProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+    /**
+     * DO NOT USE. This prop is automatically managed by the parent ScrollingList.ListItems
+     */
+    index?: number;
+    className?: string;
+}
+declare const ScrollingListItem: {
+    ({ asChild, children, index, className, ...rest }: ScrollingListItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface Props$1 extends ComponentPropsWithRef<'div'> {
+    children?: ReactNode;
+    className?: string;
+}
+declare const ScrollingListItems: {
+    ({ children, ref, className, ...rest }: Props$1): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const ScrollingListNextButton: {
+    ({ "aria-label": ariaLabel, ...rest }: IconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const ScrollingListPrevButton: {
+    ({ "aria-label": ariaLabel, ...rest }: IconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface Props extends ComponentPropsWithoutRef<'button'> {
+    children: string;
+}
+declare const ScrollingListSkipButton: {
+    ({ children, ...rest }: Props): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const ScrollingList: typeof ScrollingList$1 & {
+    Controls: typeof ScrollingListControls;
+    NextButton: typeof ScrollingListNextButton;
+    PrevButton: typeof ScrollingListPrevButton;
+    Item: typeof ScrollingListItem;
+    Items: typeof ScrollingListItems;
+    SkipButton: typeof ScrollingListSkipButton;
+};
+
+export { ScrollingList };