@spark-ui/components 13.1.4 → 13.2.0

package/dist/rating/index.d.ts

@@ -1,78 +1 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MouseEvent, Ref, PropsWithChildren, ComponentPropsWithRef } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-
-declare const ratingStarStyles: (props?: ({
-    disabled?: boolean | null | undefined;
-    readOnly?: boolean | null | undefined;
-    gap?: "sm" | "md" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const ratingStarIconStyles: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-    design?: "filled" | "outlined" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>;
-type RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>;
-
-type StarValue = 0 | 0.5 | 1;
-
-interface RatingStarProps extends RatingStarstylesProps, RatingStarIconStylesProps {
-    value: StarValue;
-    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-    onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
-    ref?: Ref<HTMLDivElement>;
-}
-
-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;
-    /**
-     * 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;
-    /**
-     * Event handler called when the value changes.
-     */
-    onValueChange?: (value: number) => void;
-    /**
-     * Sets the component as interactive or not.
-     * @default undefined
-     */
-    readOnly?: boolean;
-    /**
-     * When `true`, prevents the user from interacting.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Sets the size of the stars.
-     * @default 'md'
-     */
-    size?: RatingStarProps['size'];
-    /**
-     * Name of the underlying input.
-     * @default undefined
-     */
-    name?: string;
-    /**
-     * id of the underlying input.
-     * @default undefined
-     */
-    id?: string;
-    /**
-     * aria-label of the underlying input.
-     * @default undefined
-     */
-    'aria-label': string;
-}
-declare const Rating: ({ defaultValue, value: propValue, onValueChange, size, disabled, readOnly, name, id, "aria-label": ariaLabel, ref, ...rest }: RatingProps) => react_jsx_runtime.JSX.Element;
-
-export { Rating, type RatingProps };
+export { Rating, type RatingProps } from './Rating';

package/dist/rating/index.js

@@ -1,363 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/rating/index.ts
-var rating_exports = {};
-__export(rating_exports, {
-  Rating: () => Rating
-});
-module.exports = __toCommonJS(rating_exports);
-
-// src/rating/Rating.tsx
-var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
-var import_class_variance_authority4 = require("class-variance-authority");
-var import_react3 = require("react");
-
-// src/rating/RatingStar.tsx
-var import_StarFill = require("@spark-ui/icons/StarFill");
-var import_StarOutline = require("@spark-ui/icons/StarOutline");
-var import_class_variance_authority3 = require("class-variance-authority");
-
-// src/icon/Icon.tsx
-var import_react2 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Component,
-    {
-      ...props,
-      ref,
-      style: {
-        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-        position: "absolute",
-        border: 0,
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        wordWrap: "normal",
-        ...props.style
-      }
-    }
-  );
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
-// src/icon/Icon.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils.makeVariants)({
-      current: ["text-current"],
-      main: ["text-main"],
-      support: ["text-support"],
-      accent: ["text-accent"],
-      basic: ["text-basic"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      error: ["text-error"],
-      info: ["text-info"],
-      neutral: ["text-neutral"]
-    }),
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils.makeVariants)({
-      current: ["u-current-font-size"],
-      sm: ["w-sz-16", "h-sz-16"],
-      md: ["w-sz-24", "h-sz-24"],
-      lg: ["w-sz-32", "h-sz-32"],
-      xl: ["w-sz-40", "h-sz-40"]
-    })
-  }
-});
-
-// src/icon/Icon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react2.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    (0, import_react2.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/rating/RatingStar.styles.ts
-var import_class_variance_authority2 = require("class-variance-authority");
-var emptyRemainingStarsOnHoverClass = (0, import_class_variance_authority2.cx)("[&_>_div]:peer-hover:w-0!");
-var ratingStarStyles = (0, import_class_variance_authority2.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: false,
-        disabled: false,
-        className: (0, import_class_variance_authority2.cx)(emptyRemainingStarsOnHoverClass, "cursor-pointer")
-      }
-    ],
-    defaultVariants: {
-      disabled: false,
-      readOnly: false,
-      gap: "sm"
-    }
-  }
-);
-var ratingStarIconStyles = (0, import_class_variance_authority2.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"]
-    }
-  }
-});
-
-// src/rating/RatingStar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var RatingStar = ({
-  value,
-  size,
-  disabled,
-  readOnly,
-  onClick,
-  onMouseEnter,
-  ref: forwardedRef
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
-          {
-            className: (0, import_class_variance_authority3.cx)(
-              "z-raised absolute overflow-hidden",
-              "group-[[data-part=star][data-hovered]]:overflow-visible"
-            ),
-            style: { width: value * 100 + "%" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              Icon,
-              {
-                className: ratingStarIconStyles({
-                  size,
-                  design: "filled"
-                }),
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_StarFill.StarFill, {})
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: ratingStarIconStyles({ size, design: "outlined" }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_StarOutline.StarOutline, {}) })
-      ]
-    }
-  );
-};
-
-// src/rating/utils.ts
-function getNearestHalfDecimal(num) {
-  return Math.round(num / 0.5) * 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 splitAt(arr, index) {
-  const prev = arr.slice(0, index);
-  const next = arr.slice(index);
-  return [prev, next];
-}
-
-// src/rating/Rating.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Rating = ({
-  defaultValue,
-  value: propValue,
-  onValueChange,
-  size = "md",
-  disabled,
-  readOnly,
-  name,
-  id,
-  "aria-label": ariaLabel,
-  ref,
-  ...rest
-}) => {
-  const inputRef = (0, import_react3.useRef)(null);
-  const starRefList = (0, import_react3.useRef)([]);
-  const [value, setRatingValue] = (0, import_use_combined_state.useCombinedState)(propValue, defaultValue, onValueChange);
-  const valueRef = (0, import_react3.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 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 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 handleStarRef = (0, import_react3.useCallback)((elm) => {
-    if (!elm) return;
-    starRefList.current.push(elm);
-  }, []);
-  function resetDataPartInputAttr() {
-    inputRef.current?.removeAttribute("data-clicked");
-  }
-  function resetDataPartStarAttr() {
-    starRefList.current.forEach((star) => star.removeAttribute("data-hovered"));
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      className: "relative inline-flex",
-      ref,
-      "data-spark-component": "rating",
-      ...rest,
-      onMouseLeave: resetDataPartStarAttr,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "input",
-          {
-            name,
-            id,
-            "aria-label": ariaLabel,
-            ref: inputRef,
-            "data-part": "input",
-            className: "peer absolute inset-0 opacity-0",
-            type: "range",
-            min: "0",
-            max: "5",
-            step: readOnly ? 0.5 : 1,
-            disabled,
-            readOnly,
-            value: getNearestHalfDecimal(value ?? 0),
-            onChange: (event) => isInteractive && onInputChange(event),
-            onBlur: resetDataPartInputAttr
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            className: (0, import_class_variance_authority4.cx)(
-              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((_, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              RatingStar,
-              {
-                disabled,
-                readOnly,
-                size,
-                onClick: () => isInteractive && onStarClick(index),
-                onMouseEnter: (event) => isInteractive && onStarMouseEnter(event),
-                ref: handleStarRef,
-                value: getStarValue({ index, value })
-              },
-              index
-            ))
-          }
-        )
-      ]
-    }
-  );
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Rating
-});
-//# sourceMappingURL=index.js.map
+"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;
+//# sourceMappingURL=index.js.map

package/dist/rating/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/rating/index.ts","../../src/rating/Rating.tsx","../../src/rating/RatingStar.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/rating/RatingStar.styles.ts","../../src/rating/utils.ts"],"sourcesContent":["export { Rating, type RatingProps } from './Rating'\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","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 { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      style={{\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: 'absolute',\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n        ...props.style,\n      }}\n    />\n  )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      [\n        'current',\n        'main',\n        'support',\n        'accent',\n        'basic',\n        'success',\n        'alert',\n        'error',\n        'info',\n        'neutral',\n      ]\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      basic: ['text-basic'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\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":["import_class_variance_authority","import_react","import_class_variance_authority","import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime"]}
+{"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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"}