@comitor/ui 2.0.0 → 3.0.0

package/dist/components/ui/rating.js

@@ -0,0 +1,648 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useDirection } from "@radix-ui/react-direction";
+import { Slot } from "@radix-ui/react-slot";
+import { Star } from "lucide-react";
+import * as React from "react";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useAsRef } from "../../lib/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../lib/use-lazy-ref.js";
+import { VisuallyHiddenInput } from "../../lib/visually-hidden-input.js";
+const ROOT_NAME = "Rating";
+const ITEM_NAME = "RatingItem";
+const ENTRY_FOCUS = "ratingFocusGroup.onEntryFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+function getItemId(id, value) {
+  return `${id}-item-${value}`;
+}
+function getPartialFillGradientId(id, step) {
+  return `partial-fill-gradient-${id}-${step}`;
+}
+const MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  Home: "first",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, dir, orientation) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidateRef of candidates) {
+    const candidate = candidateRef.current;
+    if (!candidate) continue;
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStore(selector, ogStore) {
+  const contextStore = React.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`useRating\` ph\u1EA3i \u0111\u01B0\u1EE3c g\u1ECDi b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const RatingContext = React.createContext(null);
+function useRatingContext(consumerName) {
+  const context = React.useContext(RatingContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+const FocusContext = React.createContext(null);
+function useFocusContext(consumerName) {
+  const context = React.useContext(FocusContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`FocusProvider\``);
+  }
+  return context;
+}
+function Rating(props) {
+  const {
+    value: valueProp,
+    defaultValue = 0,
+    onValueChange,
+    onHover,
+    onFocus: onFocusProp,
+    onMouseDown: onMouseDownProp,
+    dir: dirProp,
+    orientation = "horizontal",
+    activationMode = "automatic",
+    size = "default",
+    max = 5,
+    step = 1,
+    clearable = false,
+    asChild,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    itemLabel: itemLabelProp,
+    className,
+    children,
+    id,
+    name,
+    ref,
+    ...rootProps
+  } = props;
+  const t = useComitorMessages("rating");
+  const itemLabel = itemLabelProp ?? t.itemLabel;
+  const dir = useDirection(dirProp);
+  const instanceId = React.useId();
+  const rootId = id ?? instanceId;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    value: valueProp ?? defaultValue,
+    hoveredValue: null
+  }));
+  const propsRef = useAsRef({
+    onValueChange,
+    onHover,
+    onFocus: onFocusProp,
+    onMouseDown: onMouseDownProp,
+    step
+  });
+  const store = React.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value2) => {
+        if (Object.is(stateRef.current[key], value2)) return;
+        if (key === "value" && typeof value2 === "number") {
+          stateRef.current.value = value2;
+          propsRef.current.onValueChange?.(value2);
+        } else if (key === "hoveredValue") {
+          stateRef.current.hoveredValue = value2;
+          propsRef.current.onHover?.(value2);
+        } else {
+          stateRef.current[key] = value2;
+        }
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef, propsRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (valueProp !== void 0) {
+      store.setState("value", valueProp);
+    }
+  }, [valueProp]);
+  const value = useStore((state) => state.value, store);
+  const [formTrigger, setFormTrigger] = React.useState(null);
+  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+  const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+  const [tabStopId, setTabStopId] = React.useState(null);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
+  const [focusableItemCount, setFocusableItemCount] = React.useState(0);
+  const isClickFocusRef = React.useRef(false);
+  const itemsRef = React.useRef(/* @__PURE__ */ new Map());
+  const autoIndexMapRef = React.useRef(/* @__PURE__ */ new Map());
+  const nextAutoIndexRef = React.useRef(0);
+  const getAutoIndex = React.useCallback((instanceId2) => {
+    const existingIndex = autoIndexMapRef.current.get(instanceId2);
+    if (existingIndex !== void 0) {
+      return existingIndex;
+    }
+    const newIndex = nextAutoIndexRef.current++;
+    autoIndexMapRef.current.set(instanceId2, newIndex);
+    return newIndex;
+  }, []);
+  const onItemFocus = React.useCallback((tabStopId2) => {
+    setTabStopId(tabStopId2);
+  }, []);
+  const onItemShiftTab = React.useCallback(() => {
+    setIsTabbingBackOut(true);
+  }, []);
+  const onFocusableItemAdd = React.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount + 1);
+  }, []);
+  const onFocusableItemRemove = React.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount - 1);
+  }, []);
+  const onItemRegister = React.useCallback((item) => {
+    itemsRef.current.set(item.id, item);
+  }, []);
+  const onItemUnregister = React.useCallback((id2) => {
+    itemsRef.current.delete(id2);
+  }, []);
+  const getItems = React.useCallback(() => {
+    return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
+      const elementA = a.ref.current;
+      const elementB = b.ref.current;
+      if (!elementA || !elementB) return 0;
+      const position = elementA.compareDocumentPosition(elementB);
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+      }
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+      }
+      return 0;
+    });
+  }, []);
+  const onBlur = React.useCallback(
+    (event) => {
+      rootProps.onBlur?.(event);
+      if (event.defaultPrevented) return;
+      setIsTabbingBackOut(false);
+    },
+    [rootProps.onBlur]
+  );
+  const onFocus = React.useCallback(
+    (event) => {
+      propsRef.current.onFocus?.(event);
+      if (event.defaultPrevented) return;
+      const isKeyboardFocus = !isClickFocusRef.current;
+      if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+        const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+        event.currentTarget.dispatchEvent(entryFocusEvent);
+        if (!entryFocusEvent.defaultPrevented) {
+          const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
+          const selectedItem = propsRef.current.step < 1 ? items.find((item) => item.value === Math.ceil(value)) : items.find((item) => item.value === value);
+          const currentItem = items.find((item) => item.id === tabStopId);
+          const candidateItems = [selectedItem, currentItem, ...items].filter(Boolean);
+          const candidateRefs = candidateItems.map((item) => item.ref);
+          focusFirst(candidateRefs, false);
+        }
+      }
+      isClickFocusRef.current = false;
+    },
+    [propsRef, isTabbingBackOut, value, tabStopId]
+  );
+  const onMouseDown = React.useCallback(
+    (event) => {
+      propsRef.current.onMouseDown?.(event);
+      if (event.defaultPrevented) return;
+      isClickFocusRef.current = true;
+    },
+    [propsRef]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      rootId,
+      dir,
+      orientation,
+      activationMode,
+      disabled,
+      readOnly,
+      size,
+      max,
+      step,
+      clearable,
+      itemLabel,
+      getAutoIndex
+    }),
+    [rootId, dir, orientation, activationMode, disabled, readOnly, size, max, step, clearable, itemLabel, getAutoIndex]
+  );
+  const focusContextValue = React.useMemo(
+    () => ({
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    }),
+    [
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    ]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  const partialFillGradient = /* @__PURE__ */ jsx("svg", { width: "0", height: "0", "aria-hidden": "true", focusable: "false", style: { position: "absolute" }, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("linearGradient", { id: getPartialFillGradientId(rootId, step), children: dir === "rtl" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "transparent" }),
+    /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "currentColor" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "currentColor" }),
+    /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "transparent" })
+  ] }) }) }) });
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(RatingContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(FocusContext.Provider, { value: focusContextValue, children: [
+    /* @__PURE__ */ jsx(
+      RootPrimitive,
+      {
+        id: rootId,
+        role: "radiogroup",
+        "aria-orientation": orientation,
+        "aria-disabled": disabled || void 0,
+        "aria-readonly": readOnly || void 0,
+        "aria-required": required || void 0,
+        "data-disabled": disabled ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
+        "data-orientation": orientation,
+        "data-slot": "rating",
+        dir,
+        tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
+        ...rootProps,
+        ref: composedRef,
+        className: cn(
+          /*
+           * Ngôi sao là thành phần PHI VĂN BẢN mang nghĩa (nó LÀ giá trị) → màu đi qua bậc
+           * `-ink` của tone, không phải token tô nền. Bản gốc `text-primary` đọc thẳng màu
+           * TÔ NỀN; ở bảng mặc định hai token trùng nhau (`--primary-ink: var(--primary)`),
+           * nhưng bảng tương phản cao kéo `--primary-ink` xuống bậc tối — và chỉ `-ink` mới
+           * được đổi theo. Hợp đồng §1 của docs/hop-dong-mau.md.
+           */
+          "flex gap-1 text-primary-ink outline-none",
+          orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start",
+          className
+        ),
+        onBlur,
+        onFocus,
+        onMouseDown,
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          partialFillGradient
+        ] })
+      }
+    ),
+    asChild ? partialFillGradient : null,
+    isFormControl && /* @__PURE__ */ jsx(
+      VisuallyHiddenInput,
+      {
+        type: "hidden",
+        control: formTrigger,
+        name,
+        value,
+        disabled,
+        readOnly,
+        required
+      }
+    )
+  ] }) }) });
+}
+function RatingItem(props) {
+  const {
+    index,
+    asChild,
+    onClick: onClickProp,
+    onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp,
+    onMouseDown: onMouseDownProp,
+    onMouseEnter: onMouseEnterProp,
+    onMouseMove: onMouseMoveProp,
+    onMouseLeave: onMouseLeaveProp,
+    disabled,
+    className,
+    children,
+    ref,
+    ...itemProps
+  } = props;
+  const itemRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, itemRef);
+  const context = useRatingContext(ITEM_NAME);
+  const instanceId = React.useId();
+  const actualIndex = React.useMemo(() => {
+    if (index !== void 0) {
+      return index;
+    }
+    return context.getAutoIndex(instanceId);
+  }, [index, context, instanceId]);
+  const itemValue = actualIndex + 1;
+  const store = useStoreContext(ITEM_NAME);
+  const focusContext = useFocusContext(ITEM_NAME);
+  const value = useStore((state) => state.value);
+  const hoveredValue = useStore((state) => state.hoveredValue);
+  const clearable = context.clearable;
+  const step = context.step;
+  const activationMode = context.activationMode;
+  const itemId = getItemId(context.rootId, itemValue);
+  const isDisabled = context.disabled || disabled;
+  const isReadOnly = context.readOnly;
+  const isTabStop = focusContext.tabStopId === itemId;
+  const displayValue = hoveredValue ?? value;
+  const isFilled = displayValue >= itemValue;
+  const isPartiallyFilled = step < 1 && displayValue >= itemValue - step && displayValue < itemValue;
+  const isHovered = hoveredValue !== null && hoveredValue < itemValue;
+  const isChecked = value > 0 && Math.ceil(value) === itemValue;
+  const isMouseClickRef = React.useRef(false);
+  const propsRef = useAsRef({
+    onClick: onClickProp,
+    onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp,
+    onMouseDown: onMouseDownProp,
+    onMouseEnter: onMouseEnterProp,
+    onMouseMove: onMouseMoveProp,
+    onMouseLeave: onMouseLeaveProp
+  });
+  useIsomorphicLayoutEffect(() => {
+    focusContext.onItemRegister({
+      id: itemId,
+      ref: itemRef,
+      value: itemValue,
+      disabled: !!isDisabled
+    });
+    if (!isDisabled) {
+      focusContext.onFocusableItemAdd();
+    }
+    return () => {
+      focusContext.onItemUnregister(itemId);
+      if (!isDisabled) {
+        focusContext.onFocusableItemRemove();
+      }
+    };
+  }, [focusContext, itemId, itemValue, isDisabled]);
+  const onClick = React.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (!isDisabled && !isReadOnly) {
+        let newValue = itemValue;
+        if (step < 1) {
+          const rect = event.currentTarget.getBoundingClientRect();
+          const clickX = event.clientX - rect.left;
+          const isLeftHalf = clickX < rect.width / 2;
+          if (context.dir === "rtl") {
+            if (!isLeftHalf) {
+              newValue = itemValue - step;
+            }
+          } else {
+            if (isLeftHalf) {
+              newValue = itemValue - step;
+            }
+          }
+        }
+        if (clearable && value === newValue) {
+          newValue = 0;
+        }
+        store.setState("value", newValue);
+      }
+    },
+    [isDisabled, isReadOnly, clearable, step, value, itemValue, store, context.dir, propsRef]
+  );
+  const onFocus = React.useCallback(
+    (event) => {
+      propsRef.current.onFocus?.(event);
+      if (event.defaultPrevented) return;
+      focusContext.onItemFocus(itemId);
+      const isKeyboardFocus = !isMouseClickRef.current;
+      if (!isDisabled && !isReadOnly && activationMode !== "manual" && isKeyboardFocus) {
+        const isHalfStepValue = step < 1 && value === itemValue - step;
+        if (!isHalfStepValue) {
+          const newValue = clearable && value === itemValue ? 0 : itemValue;
+          store.setState("value", newValue);
+        }
+      }
+      isMouseClickRef.current = false;
+    },
+    [focusContext, itemId, activationMode, isDisabled, isReadOnly, clearable, value, itemValue, step, store, propsRef]
+  );
+  const onKeyDown = React.useCallback(
+    (event) => {
+      propsRef.current.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if ((event.key === "Enter" || event.key === " ") && activationMode === "manual") {
+        event.preventDefault();
+        if (!isDisabled && !isReadOnly && itemRef.current) {
+          itemRef.current.click();
+        }
+        return;
+      }
+      if (event.key === "Tab" && event.shiftKey) {
+        focusContext.onItemShiftTab();
+        return;
+      }
+      if (event.target !== event.currentTarget) return;
+      const focusIntent = getFocusIntent(event, context.dir, context.orientation);
+      if (focusIntent !== void 0) {
+        if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+        event.preventDefault();
+        if (step < 1 && (focusIntent === "prev" || focusIntent === "next")) {
+          if (!isDisabled && !isReadOnly) {
+            let newValue = value;
+            if (focusIntent === "next") {
+              newValue = Math.min(value + step, context.max);
+            } else {
+              newValue = Math.max(value - step, 0);
+            }
+            store.setState("value", newValue);
+            const items2 = focusContext.getItems().filter((item) => !item.disabled);
+            const targetItem = items2.find((item) => item.value === Math.ceil(newValue));
+            if (targetItem?.ref.current) {
+              queueMicrotask(() => targetItem.ref.current?.focus());
+            }
+          }
+          return;
+        }
+        const items = focusContext.getItems().filter((item) => !item.disabled);
+        let candidateRefs = items.map((item) => item.ref);
+        if (focusIntent === "last") {
+          candidateRefs.reverse();
+        } else if (focusIntent === "prev" || focusIntent === "next") {
+          if (focusIntent === "prev") candidateRefs.reverse();
+          const currentIndex = candidateRefs.findIndex((ref2) => ref2.current === event.currentTarget);
+          candidateRefs = candidateRefs.slice(currentIndex + 1);
+        }
+        queueMicrotask(() => focusFirst(candidateRefs));
+      }
+    },
+    [
+      focusContext,
+      context.dir,
+      context.orientation,
+      activationMode,
+      isDisabled,
+      isReadOnly,
+      step,
+      value,
+      context.max,
+      store,
+      propsRef
+    ]
+  );
+  const onMouseDown = React.useCallback(
+    (event) => {
+      propsRef.current.onMouseDown?.(event);
+      if (event.defaultPrevented) return;
+      isMouseClickRef.current = true;
+      if (isDisabled) {
+        event.preventDefault();
+      } else {
+        focusContext.onItemFocus(itemId);
+      }
+    },
+    [focusContext, itemId, isDisabled, propsRef]
+  );
+  const onMouseEnter = React.useCallback(
+    (event) => {
+      propsRef.current.onMouseEnter?.(event);
+      if (event.defaultPrevented) return;
+      if (!isDisabled && !isReadOnly) {
+        let hoverValue = itemValue;
+        if (step < 1) {
+          const rect = event.currentTarget.getBoundingClientRect();
+          const mouseX = event.clientX - rect.left;
+          const isLeftHalf = mouseX < rect.width / 2;
+          if (context.dir === "rtl") {
+            if (!isLeftHalf) {
+              hoverValue = itemValue - step;
+            }
+          } else {
+            if (isLeftHalf) {
+              hoverValue = itemValue - step;
+            }
+          }
+        }
+        store.setState("hoveredValue", hoverValue);
+      }
+    },
+    [isDisabled, isReadOnly, step, itemValue, store, context.dir, propsRef]
+  );
+  const onMouseLeave = React.useCallback(
+    (event) => {
+      propsRef.current.onMouseLeave?.(event);
+      if (event.defaultPrevented) return;
+      if (!isDisabled && !isReadOnly) {
+        store.setState("hoveredValue", null);
+      }
+    },
+    [isDisabled, isReadOnly, store, propsRef]
+  );
+  const onMouseMove = React.useCallback(
+    (event) => {
+      propsRef.current.onMouseMove?.(event);
+      if (event.defaultPrevented) return;
+      if (!isDisabled && !isReadOnly && step < 1) {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const isLeftHalf = mouseX < rect.width / 2;
+        let hoverValue = itemValue;
+        if (context.dir === "rtl") {
+          hoverValue = !isLeftHalf ? itemValue - step : itemValue;
+        } else {
+          hoverValue = isLeftHalf ? itemValue - step : itemValue;
+        }
+        store.setState("hoveredValue", hoverValue);
+      }
+    },
+    [isDisabled, isReadOnly, step, itemValue, store, context.dir, propsRef]
+  );
+  const dataState = isFilled ? "full" : isPartiallyFilled ? "partial" : "empty";
+  const ItemPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    ItemPrimitive,
+    {
+      role: "radio",
+      type: "button",
+      id: itemId,
+      "aria-label": context.itemLabel(itemValue, context.max),
+      "aria-checked": isChecked,
+      "aria-posinset": itemValue,
+      "aria-setsize": context.max,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-readonly": isReadOnly ? "" : void 0,
+      "data-state": dataState,
+      "data-hovered": isHovered ? "" : void 0,
+      "data-slot": "rating-item",
+      disabled: isDisabled,
+      tabIndex: isTabStop ? 0 : -1,
+      ...itemProps,
+      ref: composedRef,
+      style: {
+        ...itemProps.style,
+        ...isPartiallyFilled && {
+          "--partial-fill": `url(#${getPartialFillGradientId(context.rootId, step)})`
+        }
+      },
+      className: cn(
+        // Viền focus cùng khuôn với `Checkbox`/`RadioGroup` của gói.
+        "inline-flex items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-colors [&_svg]:duration-200 data-[state=empty]:[&_svg]:fill-transparent data-[state=full]:[&_svg]:fill-current data-[state=partial]:[&_svg]:fill-(--partial-fill) [&_svg:not([class*='size-'])]:size-full",
+        context.size === "sm" ? "size-4" : context.size === "lg" ? "size-6" : "size-5",
+        className
+      ),
+      onClick,
+      onFocus,
+      onKeyDown,
+      onMouseDown,
+      onMouseEnter,
+      onMouseMove,
+      onMouseLeave,
+      children: typeof children === "function" ? children(dataState) : children ?? /* @__PURE__ */ jsx(Star, { "aria-hidden": "true" })
+    }
+  );
+}
+export {
+  Rating,
+  RatingItem,
+  useStore as useRating
+};
+//# sourceMappingURL=rating.js.map