@docyrus/shadcn 1.0.0 → 1.2.0

package/dist/radix-vega/rating.js

@@ -0,0 +1,749 @@
+import { useDirection } from '@radix-ui/react-direction';
+import { Slot } from '@radix-ui/react-slot';
+import { Star } from 'lucide-react';
+import * as React6 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as ReactDOM from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React6.useCallback(composeRefs(...refs), refs);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var VisuallyHiddenInput = React6.forwardRef(({ className, control, ...props }, ref) => {
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      className: cn(
+        "absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0",
+        "[clip:rect(0,0,0,0)]",
+        className
+      ),
+      ...props
+    }
+  );
+  if (control) {
+    return ReactDOM.createPortal(input, control);
+  }
+  return input;
+});
+VisuallyHiddenInput.displayName = "VisuallyHiddenInput";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React6.useLayoutEffect : React6.useEffect;
+
+// src/hooks/use-as-ref.ts
+function useAsRef(props) {
+  const ref = React6.useRef(props);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+  return ref;
+}
+function useLazyRef(fn) {
+  const ref = React6.useRef(null);
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+  return ref;
+}
+var ROOT_NAME = "Rating";
+var ITEM_NAME = "RatingItem";
+var ENTRY_FOCUS = "ratingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS = { bubbles: false, cancelable: true };
+function getItemId(id, value) {
+  return `${id}-item-${value}`;
+}
+function getPartialFillGradientId(id, step) {
+  return `partial-fill-gradient-${id}-${step}`;
+}
+var 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;
+  }
+}
+var StoreContext = React6.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React6.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStore(selector, ogStore) {
+  const contextStore = React6.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React6.useCallback(
+    () => selector(store.getState()),
+    [store, selector]
+  );
+  return React6.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+var RatingContext = React6.createContext(null);
+function useRatingContext(consumerName) {
+  const context = React6.useContext(RatingContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+var FocusContext = React6.createContext(null);
+function useFocusContext(consumerName) {
+  const context = React6.useContext(FocusContext);
+  if (!context) {
+    throw new Error(
+      `\`${consumerName}\` must be used within \`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,
+    className,
+    id,
+    name,
+    ref,
+    ...rootProps
+  } = props;
+  const dir = useDirection(dirProp);
+  const instanceId = React6.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 = React6.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] = React6.useState(
+    null
+  );
+  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+  const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+  const [tabStopId, setTabStopId] = React6.useState(null);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React6.useState(false);
+  const [focusableItemCount, setFocusableItemCount] = React6.useState(0);
+  const isClickFocusRef = React6.useRef(false);
+  const itemsRef = React6.useRef(/* @__PURE__ */ new Map());
+  const autoIndexMapRef = React6.useRef(/* @__PURE__ */ new Map());
+  const nextAutoIndexRef = React6.useRef(0);
+  const getAutoIndex = React6.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 = React6.useCallback((tabStopId2) => {
+    setTabStopId(tabStopId2);
+  }, []);
+  const onItemShiftTab = React6.useCallback(() => {
+    setIsTabbingBackOut(true);
+  }, []);
+  const onFocusableItemAdd = React6.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount + 1);
+  }, []);
+  const onFocusableItemRemove = React6.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount - 1);
+  }, []);
+  const onItemRegister = React6.useCallback((item) => {
+    itemsRef.current.set(item.id, item);
+  }, []);
+  const onItemUnregister = React6.useCallback((id2) => {
+    itemsRef.current.delete(id2);
+  }, []);
+  const getItems = React6.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 = React6.useCallback(
+    (event) => {
+      rootProps.onBlur?.(event);
+      if (event.defaultPrevented) return;
+      setIsTabbingBackOut(false);
+    },
+    [rootProps.onBlur]
+  );
+  const onFocus = React6.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 = React6.useCallback(
+    (event) => {
+      propsRef.current.onMouseDown?.(event);
+      if (event.defaultPrevented) return;
+      isClickFocusRef.current = true;
+    },
+    [propsRef]
+  );
+  const contextValue = React6.useMemo(
+    () => ({
+      rootId,
+      dir,
+      orientation,
+      activationMode,
+      disabled,
+      readOnly,
+      size,
+      max,
+      step,
+      clearable,
+      getAutoIndex
+    }),
+    [
+      rootId,
+      dir,
+      orientation,
+      activationMode,
+      disabled,
+      readOnly,
+      size,
+      max,
+      step,
+      clearable,
+      getAutoIndex
+    ]
+  );
+  const focusContextValue = React6.useMemo(
+    () => ({
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    }),
+    [
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    ]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  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,
+        "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(
+          "flex gap-1 text-primary outline-none",
+          orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start",
+          className
+        ),
+        onBlur,
+        onFocus,
+        onMouseDown
+      }
+    ),
+    /* @__PURE__ */ jsx("svg", { width: "0", height: "0", 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" })
+    ] }) }) }) }),
+    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 = React6.useRef(null);
+  const composedRef = useComposedRefs(ref, itemRef);
+  const context = useRatingContext(ITEM_NAME);
+  const instanceId = React6.useId();
+  const actualIndex = React6.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 isMouseClickRef = React6.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 = React6.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 = React6.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 = React6.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 = React6.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 = React6.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 = React6.useCallback(
+    (event) => {
+      propsRef.current.onMouseLeave?.(event);
+      if (event.defaultPrevented) return;
+      if (!isDisabled && !isReadOnly) {
+        store.setState("hoveredValue", null);
+      }
+    },
+    [isDisabled, isReadOnly, store, propsRef]
+  );
+  const onMouseMove = React6.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-checked": isFilled,
+      "aria-posinset": itemValue,
+      "aria-setsize": context.max,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-readonly": isReadOnly ? "" : void 0,
+      "data-state": isFilled ? "full" : isPartiallyFilled ? "partial" : "empty",
+      "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(
+        "inline-flex items-center justify-center rounded transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg:not([class*='size-'])]:size-full [&_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)",
+        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, {})
+    }
+  );
+}
+
+export { Rating, RatingItem, useStore as useRating };
+//# sourceMappingURL=rating.js.map
+//# sourceMappingURL=rating.js.map