@spark-ui/components 10.0.0

package/dist/rating/index.js

@@ -0,0 +1,362 @@
+"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/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",
+    {
+      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

package/dist/rating/index.js.map

@@ -0,0 +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/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      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 = 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, type 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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,gCAAiC;AACjC,IAAAA,mCAAmB;AACnB,IAAAC,gBAOO;;;ACTP,sBAAyB;AACzB,yBAA4B;AAC5B,IAAAC,mCAAmB;;;ACFnB,IAAAC,gBAA0F;;;ACA1F,sBAAkC;AAClC,mBAOO;AASE;AAPF,IAAM,YAAY,gBAAAC,KAAU;AAM5B,IAAM,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,MAAiB;AACpD,SAAO,4CAAC,gBAAAA,KAAU,MAAV,EAAe,KAAW,GAAG,OAAO;AAC9C;;;ACFI,IAAAC,sBAAA;AAJG,IAAM,iBAAiB,CAAC,EAAE,UAAU,OAAO,KAAK,GAAG,MAAM,MAA2B;AACzF,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA;AAAA,QAEL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,GAAG,MAAM;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;;;ACrC7B,4BAA6B;AAC7B,sCAAkC;AAE3B,IAAM,iBAAa,qCAAI,CAAC,uBAAuB,GAAG;AAAA,EACvD,UAAU;AAAA;AAAA;AAAA;AAAA,IAIR,YAAQ,oCAcN;AAAA,MACA,SAAS,CAAC,cAAc;AAAA,MACxB,MAAM,CAAC,WAAW;AAAA,MAClB,SAAS,CAAC,cAAc;AAAA,MACxB,QAAQ,CAAC,aAAa;AAAA,MACtB,OAAO,CAAC,YAAY;AAAA,MACpB,SAAS,CAAC,cAAc;AAAA,MACxB,OAAO,CAAC,YAAY;AAAA,MACpB,OAAO,CAAC,YAAY;AAAA,MACpB,MAAM,CAAC,WAAW;AAAA,MAClB,SAAS,CAAC,cAAc;AAAA,IAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,IAID,UAAM,oCAA0D;AAAA,MAC9D,SAAS,CAAC,qBAAqB;AAAA,MAC/B,IAAI,CAAC,WAAW,SAAS;AAAA,MACzB,IAAI,CAAC,WAAW,SAAS;AAAA,MACzB,IAAI,CAAC,WAAW,SAAS;AAAA,MACzB,IAAI,CAAC,WAAW,SAAS;AAAA,IAC3B,CAAC;AAAA,EACH;AACF,CAAC;;;AHjBG,IAAAC,sBAAA;AAXG,IAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAiB;AACf,QAAM,QAAQ,uBAAS,KAAK,QAAQ;AAEpC,SACE,8EACG;AAAA,oCAAa,OAA4C;AAAA,MACxD,WAAW,WAAW,EAAE,WAAW,MAAM,OAAO,CAAC;AAAA,MACjD,wBAAwB;AAAA,MACxB,eAAe;AAAA,MACf,WAAW;AAAA,MACX,GAAG;AAAA,IACL,CAAC;AAAA,IAEA,SAAS,6CAAC,kBAAgB,iBAAM;AAAA,KACnC;AAEJ;AAEA,KAAK,cAAc;;;AI1CnB,IAAAC,mCAA2C;AAE3C,IAAM,sCAAkC,qCAAG,2BAA2B;AAEtE,IAAM,uBAAmB;AAAA,EACvB,CAAC,QAAQ,iBAAiB,SAAS,YAAY,4BAA4B;AAAA,EAC3E;AAAA,IACE,UAAU;AAAA,MACR,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,KAAK;AAAA,QACH,IAAI,CAAC,4CAA4C,iCAAiC;AAAA,QAClF,IAAI,CAAC,4CAA4C,iCAAiC;AAAA,MACpF;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,QACE,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAW,qCAAG,iCAAiC,gBAAgB;AAAA,MACjE;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,UAAU;AAAA,MACV,KAAK;AAAA,IACP;AAAA,EACF;AACF;AAEA,IAAM,2BAAuB,sCAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,MACA,UAAU,CAAC,uBAAuB;AAAA,IACpC;AAAA,EACF;AACF,CAAC;;;ALpBG,IAAAC,sBAAA;AAVG,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AACP,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,iBAAiB;AAAA,QAC1B,KAAK,SAAS,OAAO,OAAO;AAAA,QAC5B;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACD,aAAU;AAAA,MACV;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACA,OAAO,EAAE,OAAO,QAAQ,MAAM,IAAI;AAAA,YAElC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,qBAAqB;AAAA,kBAC9B;AAAA,kBACA,QAAQ;AAAA,gBACV,CAAC;AAAA,gBAED,uDAAC,4BAAS;AAAA;AAAA,YACZ;AAAA;AAAA,QACF;AAAA,QAEA,6CAAC,QAAK,WAAW,qBAAqB,EAAE,MAAM,QAAQ,WAAW,CAAC,GAChE,uDAAC,kCAAY,GACf;AAAA;AAAA;AAAA,EACF;AAEJ;;;AM9DA,SAAS,sBAAsB,KAAqB;AAClD,SAAO,KAAK,MAAM,MAAM,GAAG,IAAI;AACjC;AAEA,SAAS,aAAa,EAAE,OAAO,MAAM,GAAiD;AACpF,MAAI,UAAU,OAAW,QAAO;AAEhC,QAAM,eAAe,QAAQ;AAC7B,QAAM,iBAAiB,sBAAsB,KAAK;AAElD,MAAI,KAAK,KAAK,cAAc,IAAI,aAAc,QAAO;AAErD,SAAO,kBAAkB,eAAe,IAAI;AAC9C;AAEA,SAAS,QAAW,KAAU,OAA2B;AACvD,QAAM,OAAO,IAAI,MAAM,GAAG,KAAK;AAC/B,QAAM,OAAO,IAAI,MAAM,KAAK;AAE5B,SAAO,CAAC,MAAM,IAAI;AACpB;;;AP2GI,IAAAC,sBAAA;AAjEG,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,eAAW,sBAAyB,IAAI;AAC9C,QAAM,kBAAc,sBAAyB,CAAC,CAAC;AAE/C,QAAM,CAAC,OAAO,cAAc,QAAI,4CAAiB,WAAW,cAAc,aAAa;AAEvF,QAAM,eAAW,sBAAO,KAAK;AAC7B,QAAM,gBAAgB,EAAE,YAAY;AAEpC,WAAS,YAAY,OAAe;AAClC,QAAI,CAAC,SAAS,QAAS;AAEvB,mBAAe,QAAQ,CAAC;AACxB,aAAS,UAAU,QAAQ;AAE3B,aAAS,QAAQ,MAAM;AACvB,aAAS,QAAQ,aAAa,gBAAgB,EAAE;AAAA,EAClD;AAEA,WAAS,cAAc,OAAsC;AAG3D,QAAI,SAAS,YAAY,OAAO,MAAM,OAAO,KAAK,KAAK,OAAO,MAAM,OAAO,KAAK,MAAM,GAAG;AACvF;AAAA,IACF;AACA,aAAS,UAAU,OAAO,MAAM,OAAO,KAAK;AAE5C,mBAAe,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA,EAC3C;AAEA,WAAS,iBAAiB,EAAE,cAAc,GAA+B;AACvE,UAAM,mBAAmB,YAAY,QAAQ,UAAU,UAAQ,SAAS,aAAa;AAErF,UAAM,CAAC,eAAe,cAAc,IAAI,QAAQ,YAAY,SAAS,mBAAmB,CAAC;AAEzF,kBAAc,QAAQ,UAAQ,KAAK,aAAa,gBAAgB,EAAE,CAAC;AACnE,mBAAe,QAAQ,UAAQ,KAAK,gBAAgB,cAAc,CAAC;AAAA,EACrE;AAEA,QAAM,oBAAgB,2BAAY,CAAC,QAA+B;AAChE,QAAI,CAAC,IAAK;AACV,gBAAY,QAAQ,KAAK,GAAG;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,WAAS,yBAAyB;AAChC,aAAS,SAAS,gBAAgB,cAAc;AAAA,EAClD;AAEA,WAAS,wBAAwB;AAC/B,gBAAY,QAAQ,QAAQ,UAAQ,KAAK,gBAAgB,cAAc,CAAC;AAAA,EAC1E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,wBAAqB;AAAA,MACpB,GAAG;AAAA,MACJ,cAAc;AAAA,MAEd;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,KAAK;AAAA,YACL,aAAU;AAAA,YACV,WAAU;AAAA,YACV,MAAK;AAAA,YACL,KAAI;AAAA,YACJ,KAAI;AAAA,YACJ,MAAM,WAAW,MAAM;AAAA,YACvB;AAAA,YACA;AAAA,YACA,OAAO,sBAAsB,SAAS,CAAC;AAAA,YACvC,UAAU,WAAS,iBAAiB,cAAc,KAAK;AAAA,YACvD,QAAQ;AAAA;AAAA,QACV;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT,SAAS,OAAO,aAAa;AAAA,cAC7B;AAAA,cACA;AAAA,YACF;AAAA,YAEC,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,UACjC;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,SAAS,MAAM,iBAAiB,YAAY,KAAK;AAAA,gBACjD,cAAc,WAAS,iBAAiB,iBAAiB,KAAK;AAAA,gBAC9D,KAAK;AAAA,gBAEL,OAAO,aAAa,EAAE,OAAO,MAAM,CAAC;AAAA;AAAA,cAD/B;AAAA,YAEP,CACD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;","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"]}

package/dist/rating/index.mjs

@@ -0,0 +1,247 @@
+import {
+  Icon
+} from "../chunk-AESXFMCC.mjs";
+import "../chunk-NBZKMCHF.mjs";
+import "../chunk-4F5DOL57.mjs";
+
+// src/rating/Rating.tsx
+import { useCombinedState } from "@spark-ui/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: {
+      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: cx(emptyRemainingStarsOnHoverClass, "cursor-pointer")
+      }
+    ],
+    defaultVariants: {
+      disabled: false,
+      readOnly: false,
+      gap: "sm"
+    }
+  }
+);
+var ratingStarIconStyles = 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
+import { jsx, jsxs } from "react/jsx-runtime";
+var RatingStar = ({
+  value,
+  size,
+  disabled,
+  readOnly,
+  onClick,
+  onMouseEnter,
+  ref: forwardedRef
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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 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
+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 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 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 = 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__ */ jsxs2(
+    "div",
+    {
+      className: "relative inline-flex",
+      ref,
+      "data-spark-component": "rating",
+      ...rest,
+      onMouseLeave: resetDataPartStarAttr,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(
+          "div",
+          {
+            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((_, index) => /* @__PURE__ */ jsx2(
+              RatingStar,
+              {
+                disabled,
+                readOnly,
+                size,
+                onClick: () => isInteractive && onStarClick(index),
+                onMouseEnter: (event) => isInteractive && onStarMouseEnter(event),
+                ref: handleStarRef,
+                value: getStarValue({ index, value })
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Rating
+};
+//# sourceMappingURL=index.mjs.map