@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-V6FJYERX.mjs

@@ -0,0 +1,501 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Carousel.tsx
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useMemo,
+  useImperativeHandle,
+  useId,
+  forwardRef
+} from "react";
+import {
+  carouselPauseButtonClasses,
+  carouselTrackFadeClasses,
+  carouselTrackScrollClasses,
+  carouselViewportClasses,
+  carouselNextArrowPath,
+  carouselPrevArrowPath,
+  clampSlideIndex,
+  composeComponentClasses,
+  createCarouselAutoplayController,
+  getCarouselArrowClasses,
+  getCarouselCloneAttributes,
+  getCarouselContainerClasses,
+  getCarouselDisplayIndex,
+  getCarouselDotClasses,
+  getCarouselDotMarkClasses,
+  getCarouselDotsClasses,
+  getCarouselDotsOrientation,
+  getCarouselLabels,
+  getCarouselLoopTarget,
+  getCarouselPointerPoint,
+  getCarouselSlideClasses,
+  getNextSlideIndex,
+  getPrevSlideIndex,
+  getScrollTransform,
+  isCarouselAutoplayEnabled,
+  isCarouselChromeTarget,
+  isCarouselFocusInside,
+  isCarouselHorizontalLock,
+  isCarouselKeyboardIgnoredTarget,
+  isCarouselPaused,
+  isNextDisabled,
+  isPrevDisabled,
+  mergeTigerLocale,
+  prefersReducedMotion,
+  resolveCarouselKeyboardNavigation,
+  resolveCarouselLoopSnap,
+  resolveCarouselRegion,
+  resolveCarouselSwipeDirection,
+  resolveCarouselTabKeyboardNavigation,
+  shouldLoopCarousel
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Carousel = forwardRef(
+  ({
+    autoplay = false,
+    autoplaySpeed = 3e3,
+    dots = true,
+    dotPosition = "bottom",
+    effect = "scroll",
+    arrows = false,
+    infinite = true,
+    speed = 500,
+    currentIndex: controlledCurrentIndex,
+    defaultCurrentIndex = 0,
+    pauseOnHover = true,
+    pauseOnFocus = true,
+    className,
+    style,
+    locale,
+    labels: labelsOverride,
+    onCurrentIndexChange,
+    onChange,
+    onBeforeChange,
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const { "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledByAttr, ...domProps } = rest;
+    const config = useTigerConfig();
+    const instanceId = useId();
+    const slides = useMemo(
+      () => React.Children.toArray(children).filter((child) => React.isValidElement(child)),
+      [children]
+    );
+    const slideCount = slides.length;
+    const looping = shouldLoopCarousel(infinite, slideCount, effect);
+    const dir = config.direction;
+    const reducedMotion = prefersReducedMotion();
+    const autoplayEnabled = isCarouselAutoplayEnabled(autoplay, autoplaySpeed, reducedMotion);
+    const [currentIndex, setCurrentIndexValue] = useControlledState({
+      value: controlledCurrentIndex,
+      defaultValue: defaultCurrentIndex,
+      onChange: onCurrentIndexChange,
+      postState: (index) => clampSlideIndex(index, slideCount)
+    });
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [userPaused, setUserPaused] = useState(false);
+    const [displayIndex, setDisplayIndex] = useState(
+      () => getCarouselDisplayIndex(currentIndex, slideCount, looping)
+    );
+    const [snapPending, setSnapPending] = useState(false);
+    const paused = isCarouselPaused({
+      userPaused,
+      pauseOnHover,
+      pauseOnFocus,
+      hovered,
+      focused
+    });
+    const containerRef = useRef(null);
+    const viewportRef = useRef(null);
+    const wrappingRef = useRef(false);
+    const requestedIndexRef = useRef(
+      controlledCurrentIndex !== void 0 ? controlledCurrentIndex : defaultCurrentIndex
+    );
+    const pointerRef = useRef(null);
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getCarouselLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    const namedAriaLabel = typeof ariaLabelAttr === "string" ? ariaLabelAttr : labelsOverride?.ariaLabel;
+    const region = resolveCarouselRegion({
+      ariaLabel: namedAriaLabel,
+      labelledBy: typeof ariaLabelledByAttr === "string" ? ariaLabelledByAttr : void 0
+    });
+    const onChangeRef = useRef(onChange);
+    const onBeforeChangeRef = useRef(onBeforeChange);
+    onChangeRef.current = onChange;
+    onBeforeChangeRef.current = onBeforeChange;
+    const currentIndexRef = useRef(currentIndex);
+    currentIndexRef.current = currentIndex;
+    const infiniteRef = useRef(infinite);
+    infiniteRef.current = infinite;
+    const effectRef = useRef(effect);
+    effectRef.current = effect;
+    const slideCountRef = useRef(slideCount);
+    slideCountRef.current = slideCount;
+    const dirRef = useRef(dir);
+    dirRef.current = dir;
+    const navigateToIndex = useCallback(
+      (index, source = "goto") => {
+        const count = slideCountRef.current;
+        const current = currentIndexRef.current;
+        const clampedIndex = clampSlideIndex(index, count);
+        if (clampedIndex === current) return;
+        onBeforeChangeRef.current?.(current, clampedIndex);
+        const loopingNow = shouldLoopCarousel(infiniteRef.current, count, effectRef.current);
+        const target = source === "step" ? getCarouselLoopTarget(current, clampedIndex, count, loopingNow) : {
+          displayIndex: getCarouselDisplayIndex(clampedIndex, count, loopingNow),
+          logicalIndex: clampedIndex,
+          needsSnap: false
+        };
+        wrappingRef.current = target.needsSnap;
+        setSnapPending(false);
+        setDisplayIndex(target.displayIndex);
+        requestedIndexRef.current = clampedIndex;
+        setCurrentIndexValue(clampedIndex);
+        onChangeRef.current?.(clampedIndex, current);
+      },
+      [setCurrentIndexValue]
+    );
+    const navigateByDirection = useCallback(
+      (direction) => {
+        const current = currentIndexRef.current;
+        const count = slideCountRef.current;
+        const targetIndex = direction === "next" ? getNextSlideIndex(current, count, infiniteRef.current) : getPrevSlideIndex(current, count, infiniteRef.current);
+        navigateToIndex(targetIndex, "step");
+      },
+      [navigateToIndex]
+    );
+    const goTo = useCallback(
+      (index) => {
+        navigateToIndex(index, "goto");
+      },
+      [navigateToIndex]
+    );
+    const next = useCallback(() => {
+      navigateByDirection("next");
+    }, [navigateByDirection]);
+    const prev = useCallback(() => {
+      navigateByDirection("prev");
+    }, [navigateByDirection]);
+    useImperativeHandle(ref, () => ({ next, prev, goTo }), [next, prev, goTo]);
+    useLayoutEffect(() => {
+      if (wrappingRef.current) return;
+      const nextDisplay = getCarouselDisplayIndex(currentIndex, slideCount, looping);
+      setDisplayIndex((prevDisplay) => prevDisplay === nextDisplay ? prevDisplay : nextDisplay);
+    }, [currentIndex, slideCount, looping]);
+    useEffect(() => {
+      const requested = controlledCurrentIndex !== void 0 ? controlledCurrentIndex : requestedIndexRef.current;
+      const clamped = clampSlideIndex(requested, slideCount);
+      if (clamped === requested) return;
+      requestedIndexRef.current = clamped;
+      if (clamped !== currentIndexRef.current) {
+        navigateToIndex(clamped, "goto");
+      }
+    }, [slideCount, controlledCurrentIndex, navigateToIndex]);
+    useEffect(() => {
+      if (!autoplayEnabled || paused) return;
+      const controller = createCarouselAutoplayController({
+        interval: autoplaySpeed,
+        onAdvance: () => {
+          navigateByDirection("next");
+        }
+      });
+      controller.start();
+      return () => controller.stop();
+    }, [autoplayEnabled, autoplaySpeed, paused, navigateByDirection]);
+    useEffect(() => {
+      const viewport = viewportRef.current;
+      if (!viewport || slideCount <= 1) return;
+      const resetPointer = () => {
+        pointerRef.current = null;
+      };
+      const handlePointerDown = (event) => {
+        if (event.button !== 0) return;
+        if (isCarouselChromeTarget(event.target)) return;
+        const point = getCarouselPointerPoint(event);
+        if (!point) return;
+        pointerRef.current = {
+          id: event.pointerId,
+          start: point,
+          current: point,
+          locked: false
+        };
+        try {
+          viewport.setPointerCapture(event.pointerId);
+        } catch {
+        }
+      };
+      const handlePointerMove = (event) => {
+        const session = pointerRef.current;
+        if (!session || session.id !== event.pointerId) return;
+        const point = getCarouselPointerPoint(event);
+        if (!point) return;
+        session.current = point;
+        if (!session.locked && isCarouselHorizontalLock(session.start, point)) {
+          session.locked = true;
+        }
+        if (session.locked && event.cancelable) {
+          event.preventDefault();
+        }
+      };
+      const handlePointerEnd = (event) => {
+        const session = pointerRef.current;
+        if (!session || session.id !== event.pointerId) return;
+        const end = getCarouselPointerPoint(event) ?? session.current;
+        const direction = resolveCarouselSwipeDirection(session.start, end, {
+          dir: dirRef.current
+        });
+        resetPointer();
+        if (direction) navigateByDirection(direction);
+      };
+      const handlePointerCancel = (event) => {
+        if (pointerRef.current?.id === event.pointerId) resetPointer();
+      };
+      viewport.addEventListener("pointerdown", handlePointerDown);
+      viewport.addEventListener("pointermove", handlePointerMove, { passive: false });
+      viewport.addEventListener("pointerup", handlePointerEnd);
+      viewport.addEventListener("pointercancel", handlePointerCancel);
+      return () => {
+        resetPointer();
+        viewport.removeEventListener("pointerdown", handlePointerDown);
+        viewport.removeEventListener("pointermove", handlePointerMove);
+        viewport.removeEventListener("pointerup", handlePointerEnd);
+        viewport.removeEventListener("pointercancel", handlePointerCancel);
+      };
+    }, [navigateByDirection, slideCount]);
+    const handleTrackTransitionEnd = (event) => {
+      if (event.target !== event.currentTarget) return;
+      if (!wrappingRef.current) return;
+      const snap = resolveCarouselLoopSnap(displayIndex, slideCount);
+      if (snap === null) {
+        wrappingRef.current = false;
+        return;
+      }
+      wrappingRef.current = false;
+      setSnapPending(true);
+      setDisplayIndex(snap);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setSnapPending(false));
+      });
+    };
+    const handleMouseEnter = (event) => {
+      if (pauseOnHover && autoplayEnabled) setHovered(true);
+      onMouseEnter?.(event);
+    };
+    const handleMouseLeave = (event) => {
+      if (pauseOnHover && autoplayEnabled) setHovered(false);
+      onMouseLeave?.(event);
+    };
+    const handleFocus = (event) => {
+      if (pauseOnFocus && autoplayEnabled) setFocused(true);
+      onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+      if (pauseOnFocus && autoplayEnabled && !isCarouselFocusInside(event.currentTarget, event.relatedTarget)) {
+        setFocused(false);
+      }
+      onBlur?.(event);
+    };
+    const handleRootKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || slideCount <= 1) return;
+      if (isCarouselKeyboardIgnoredTarget(event.target)) return;
+      if (event.target?.closest?.('[role="tablist"]')) return;
+      const action = resolveCarouselKeyboardNavigation(event.key, dir);
+      if (!action) return;
+      event.preventDefault();
+      if (action === "next") next();
+      else if (action === "prev") prev();
+      else if (action === "first") goTo(0);
+      else goTo(slideCount - 1);
+    };
+    const handleTablistKeyDown = (event) => {
+      const action = resolveCarouselTabKeyboardNavigation(
+        event.key,
+        getCarouselDotsOrientation(dotPosition),
+        dir
+      );
+      if (!action) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const nextIndex = action === "next" ? getNextSlideIndex(currentIndex, slideCount, true) : action === "prev" ? getPrevSlideIndex(currentIndex, slideCount, true) : action === "first" ? 0 : slideCount - 1;
+      goTo(nextIndex);
+      const tab = event.currentTarget.querySelector(
+        `[data-tiger-carousel-tab="${nextIndex}"]`
+      );
+      tab?.focus();
+    };
+    const isPrevArrowDisabled = isPrevDisabled(currentIndex, slideCount, infinite);
+    const isNextArrowDisabled = isNextDisabled(currentIndex, slideCount, infinite);
+    const transitionDuration = snapPending || reducedMotion || speed <= 0 ? "0ms" : `${speed}ms`;
+    const renderArrowButton = (type, disabled, onClick, path) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-tiger-carousel-chrome": "",
+        className: getCarouselArrowClasses(type, disabled),
+        onClick,
+        disabled,
+        "aria-label": type === "prev" ? labels.previousSlideAriaLabel : labels.nextSlideAriaLabel,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "w-6 h-6",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: /* @__PURE__ */ jsx("path", { d: path })
+          }
+        )
+      }
+    );
+    const renderSlide = (slide, logicalIndex, clone) => {
+      const active = !clone && logicalIndex === currentIndex;
+      const slideId = `${instanceId}-slide-${logicalIndex}`;
+      const hidden = !active;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: clone ? void 0 : slideId,
+          className: getCarouselSlideClasses({ effect, active }),
+          style: effect === "fade" ? { transitionDuration } : void 0,
+          role: "group",
+          "aria-roledescription": labels.slideRoleDescription,
+          "aria-label": labels.slideAriaLabel.replace("{index}", String(logicalIndex + 1)).replace("{total}", String(slideCount)),
+          "aria-hidden": hidden || void 0,
+          inert: hidden || void 0,
+          "data-tiger-carousel-slide": clone ? "clone" : active ? "active" : "inactive",
+          ...clone ? getCarouselCloneAttributes() : {},
+          children: slide
+        },
+        clone ? `clone-${logicalIndex}-${logicalIndex === 0 ? "trailing" : "leading"}` : slideId
+      );
+    };
+    const slideNodes = looping ? [
+      renderSlide(slides[slideCount - 1], slideCount - 1, true),
+      ...slides.map((slide, index) => renderSlide(slide, index, false)),
+      renderSlide(slides[0], 0, true)
+    ] : slides.map((slide, index) => renderSlide(slide, index, false));
+    const track = effect === "fade" ? /* @__PURE__ */ jsx("div", { className: carouselTrackFadeClasses, "data-tiger-carousel-track": "", children: slideNodes }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: carouselTrackScrollClasses,
+        "data-tiger-carousel-track": "",
+        style: {
+          transform: getScrollTransform(displayIndex, dir),
+          transitionDuration
+        },
+        onTransitionEnd: handleTrackTransitionEnd,
+        children: slideNodes
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...domProps,
+        ref: containerRef,
+        className: composeComponentClasses(getCarouselContainerClasses(className)),
+        style,
+        "data-tiger-carousel": "",
+        role: region.role,
+        "aria-roledescription": labels.roleDescription,
+        "aria-label": region.ariaLabel,
+        "aria-labelledby": typeof ariaLabelledByAttr === "string" ? ariaLabelledByAttr : void 0,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleRootKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: carouselViewportClasses,
+              "data-tiger-carousel-viewport": "",
+              tabIndex: slideCount > 1 ? 0 : void 0,
+              children: track
+            }
+          ),
+          autoplayEnabled ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-tiger-carousel-chrome": "",
+              className: carouselPauseButtonClasses,
+              "aria-label": userPaused ? labels.playAriaLabel : labels.pauseAriaLabel,
+              "aria-pressed": userPaused,
+              onClick: () => setUserPaused((value) => !value),
+              children: userPaused ? labels.playAriaLabel : labels.pauseAriaLabel
+            }
+          ) : null,
+          arrows ? renderArrowButton("prev", isPrevArrowDisabled, prev, carouselPrevArrowPath) : null,
+          arrows ? renderArrowButton("next", isNextArrowDisabled, next, carouselNextArrowPath) : null,
+          dots && slideCount > 1 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getCarouselDotsClasses(dotPosition),
+              "data-tiger-carousel-chrome": "",
+              role: "tablist",
+              "aria-label": labels.navigationAriaLabel,
+              "aria-orientation": getCarouselDotsOrientation(dotPosition),
+              onKeyDown: handleTablistKeyDown,
+              children: slides.map((_, index) => {
+                const selected = index === currentIndex;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    id: `${instanceId}-tab-${index}`,
+                    role: "tab",
+                    "data-tiger-carousel-tab": index,
+                    className: getCarouselDotClasses(selected),
+                    "aria-label": labels.goToSlideAriaLabel.replace("{index}", String(index + 1)),
+                    "aria-selected": selected,
+                    "aria-controls": `${instanceId}-slide-${index}`,
+                    tabIndex: selected ? 0 : -1,
+                    onClick: () => goTo(index),
+                    children: /* @__PURE__ */ jsx("span", { className: getCarouselDotMarkClasses(selected) })
+                  },
+                  index
+                );
+              })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+export {
+  Carousel
+};

package/dist/chunk-VDBLI5Y3.mjs

@@ -0,0 +1,33 @@
+// src/components/Text.tsx
+import React, { forwardRef } from "react";
+import {
+  classNames,
+  getTextClasses,
+  resolveTextTag
+} from "@expcat/tigercat-core";
+var Text = forwardRef(function Text2({
+  tag = "p",
+  size,
+  weight,
+  align,
+  color,
+  truncate,
+  italic,
+  underline,
+  lineThrough,
+  children,
+  className,
+  ...props
+}, ref) {
+  const resolvedTag = resolveTextTag(tag);
+  const textClasses = classNames(
+    getTextClasses({ size, weight, align, color, truncate, italic, underline, lineThrough }),
+    className
+  );
+  return React.createElement(resolvedTag, { ...props, ref, className: textClasses }, children);
+});
+Text.displayName = "Text";
+
+export {
+  Text
+};

package/dist/chunk-VE3PZFFT.mjs

@@ -0,0 +1,161 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Rate.tsx
+import { forwardRef, useMemo, useState } from "react";
+import {
+  rateBaseClasses,
+  getRateStarClasses,
+  rateCharacterGlyphClasses,
+  rateHalfStarInnerClasses,
+  rateActiveColor,
+  rateInactiveColor,
+  rateHoverColor,
+  rateIsInlineStartHalf,
+  starPathD,
+  starViewBox,
+  classNames,
+  mergeTigerLocale,
+  getRateLabels,
+  formatRateValueText,
+  sliderGetKeyboardValue,
+  sliderNormalizeValue,
+  getLocaleDirection
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Rate = forwardRef(function Rate2({
+  value,
+  defaultValue = 0,
+  count = 5,
+  allowHalf = false,
+  disabled = false,
+  readOnly = false,
+  size = "md",
+  allowClear = true,
+  character,
+  className,
+  locale,
+  labels: labelsOverride,
+  onChange,
+  onHoverChange,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const [currentValue, setCurrentValue] = useControlledState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const [hoverValue, setHoverValue] = useState(0);
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getRateLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const rtl = getLocaleDirection(mergedLocale) === "rtl";
+  const locked = disabled || readOnly;
+  const step = allowHalf ? 0.5 : 1;
+  const normalized = sliderNormalizeValue(currentValue, 0, count, step);
+  const displayValue = hoverValue > 0 ? hoverValue : normalized;
+  const isChar = character != null && character !== false;
+  const glyph = (extraClass) => isChar ? /* @__PURE__ */ jsx("span", { className: classNames(rateCharacterGlyphClasses, extraClass), children: character }) : /* @__PURE__ */ jsx("svg", { viewBox: starViewBox, fill: "currentColor", className: extraClass ?? "h-full w-full", children: /* @__PURE__ */ jsx("path", { d: starPathD }) });
+  const hitValue = (index, clientX, el) => {
+    const half = allowHalf && rateIsInlineStartHalf(clientX, el.getBoundingClientRect(), rtl);
+    return half ? index + 0.5 : index + 1;
+  };
+  const commit = (next) => {
+    if (locked) return;
+    setCurrentValue(next);
+  };
+  const stars = [];
+  for (let i = 0; i < count; i++) {
+    const full = displayValue >= i + 1;
+    const half = allowHalf && !full && displayValue >= i + 0.5;
+    const isHovering = hoverValue > 0;
+    const colorClass = full || half ? isHovering ? rateHoverColor : rateActiveColor : rateInactiveColor;
+    const content = half ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: classNames("absolute inset-0", rateInactiveColor), children: glyph() }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "absolute top-0 bottom-0 overflow-hidden",
+            isHovering ? rateHoverColor : rateActiveColor
+          ),
+          style: { width: "50%", insetInlineStart: 0 },
+          children: glyph(rateHalfStarInnerClasses)
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("span", { className: colorClass, children: glyph() });
+    stars.push(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: getRateStarClasses(size, Boolean(isChar), locked),
+          "aria-hidden": "true",
+          onClick: (e) => {
+            if (locked) return;
+            const val = hitValue(i, e.clientX, e.currentTarget);
+            commit(allowClear && val === normalized ? 0 : val);
+          },
+          onMouseMove: (e) => {
+            if (locked) return;
+            const val = hitValue(i, e.clientX, e.currentTarget);
+            if (val !== hoverValue) {
+              setHoverValue(val);
+              onHoverChange?.(val);
+            }
+          },
+          children: content
+        },
+        i
+      )
+    );
+  }
+  const valueText = formatRateValueText(labels.valueText, normalized, mergedLocale?.locale);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classNames(rateBaseClasses, className),
+      role: "slider",
+      "aria-label": ariaLabel ?? labels.ariaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": count,
+      "aria-valuenow": normalized,
+      "aria-valuetext": valueText,
+      "aria-disabled": disabled || void 0,
+      "aria-readonly": readOnly || void 0,
+      "aria-orientation": "horizontal",
+      tabIndex: disabled ? -1 : 0,
+      ...rest,
+      onMouseLeave: () => {
+        if (locked) return;
+        setHoverValue(0);
+        onHoverChange?.(0);
+      },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || locked) return;
+        const next = sliderGetKeyboardValue(e.key, normalized, 0, count, step, void 0, rtl);
+        if (next == null) return;
+        e.preventDefault();
+        commit(next);
+      },
+      children: stars
+    }
+  );
+});
+
+export {
+  Rate
+};