@bug-on/md3-react 2.0.0 → 2.0.1

package/dist/index.js

@@ -236,7 +236,7 @@ function generateM3Theme(sourceColorHex, mode = "light") {
 function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
   const colors = generateM3Theme(sourceColorHex, mode);
   for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m26) => `-${m26.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m28) => `-${m28.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
     root.style.setProperty(`--color-m3-${kebabKey}`, value);
   }
@@ -5515,6 +5515,1748 @@ var RadioGroupComponent = React25__namespace.forwardRef(
 );
 RadioGroupComponent.displayName = "RadioGroup";
 var RadioGroup2 = React25__namespace.memo(RadioGroupComponent);
+function coerceValue(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function snapToStep(value, min, step) {
+  if (step <= 0) return value;
+  const steps = Math.round((value - min) / step);
+  return Number((min + steps * step).toPrecision(10));
+}
+function valueToPercent(value, min, max) {
+  if (max === min) return 0;
+  return (value - min) / (max - min);
+}
+function percentToValue(percent, min, max, step) {
+  const raw = min + percent * (max - min);
+  const snapped = snapToStep(raw, min, step);
+  return coerceValue(snapped, min, max);
+}
+function getKeyboardDelta(key, step, min, max) {
+  const range = max - min;
+  const discreteStep = step > 0 ? step : range / 100;
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowUp":
+      return discreteStep;
+    case "ArrowLeft":
+    case "ArrowDown":
+      return -discreteStep;
+    case "PageUp":
+      return step > 0 ? snapToStep(range * 0.1, 0, step) : range * 0.1;
+    case "PageDown":
+      return step > 0 ? -snapToStep(range * 0.1, 0, step) : -(range * 0.1);
+    default:
+      return null;
+  }
+}
+function generateTicks(min, max, step) {
+  if (step <= 0) return [];
+  const ticks = [];
+  let current = min;
+  while (current <= max) {
+    ticks.push(Number(current.toPrecision(10)));
+    current += step;
+  }
+  if (ticks[ticks.length - 1] !== max) {
+    ticks.push(max);
+  }
+  return ticks;
+}
+function useSliderMath({
+  min,
+  max,
+  step
+}) {
+  return React25.useMemo(
+    () => ({
+      coerce: (v) => coerceValue(v, min, max),
+      snap: (v) => snapToStep(v, min, step),
+      toPercent: (v) => valueToPercent(v, min, max),
+      fromPercent: (pct) => percentToValue(pct, min, max, step),
+      getKeyDelta: (key) => getKeyboardDelta(key, step, min, max),
+      ticks: generateTicks(min, max, step)
+    }),
+    [min, max, step]
+  );
+}
+
+// src/ui/slider/slider.tokens.ts
+var SliderTokens = {
+  // ── Track sizes (height for horizontal, width for vertical) ────────────────
+  trackSizes: {
+    xs: 16,
+    s: 24,
+    m: 40,
+    l: 56,
+    xl: 96
+  },
+  // ── Track shapes (border radius) ──────────────────────────────────────────
+  trackShapes: {
+    xs: 8,
+    s: 8,
+    m: 12,
+    l: 16,
+    xl: 28
+  },
+  // ── Thumb (handle) ────────────────────────────────────────────────────────
+  /** Thumb height grows with track size */
+  thumbHeights: {
+    xs: 44,
+    s: 44,
+    m: 52,
+    l: 68,
+    xl: 108
+  },
+  /**
+   * Thumb width at rest and on hover.
+   * MD3 Expressive handle pill: 4dp wide.
+   */
+  thumbWidthDefault: 4,
+  /**
+   * Thumb width while pressed/dragging.
+   * "Squeeze" animation: 4dp → 2dp (M3 Expressive behavior).
+   */
+  thumbWidthPressed: 2,
+  // ── Track–thumb gap ───────────────────────────────────────────────────────
+  /**
+   * Transparent gap between the active/inactive track segments and the thumb.
+   * Maps to ActiveHandleLeadingSpace / ActiveHandleTrailingSpace = 6dp.
+   *
+   * This gap is rendered by mathematically subtracting it from the track
+   * segment width — NOT using margin/padding.
+   */
+  thumbGap: 6,
+  // ── Track corner radii ────────────────────────────────────────────────────
+  /**
+   * Corner radius on the INNER ends of each track segment (facing the thumb).
+   * Fixed to 2px according to MD3 Expressive Slider specs (TrackInsideCornerSize).
+   * Outer ends use `trackSize / 2` (pill cap) — computed inline per component.
+   */
+  trackInnerRadius: 2,
+  // ── Stop indicator / Tick ─────────────────────────────────────────────────
+  /** Tick dot size (width and height). = 4dp. */
+  tickSize: 4,
+  // ── Touch target ─────────────────────────────────────────────────────────
+  /**
+   * Minimum touch target for the thumb wrapper.
+   * MD3 requires 48dp minimum touch target for interactive elements.
+   */
+  thumbTouchTarget: 48,
+  // ── Value indicator ───────────────────────────────────────────────────────
+  /** Offset above the thumb center for the value indicator tooltip. */
+  valueIndicatorOffset: 52,
+  // ── Inset icon ────────────────────────────────────────────────────────────
+  /** Standard icon size map for inset icons inside the track. */
+  insetIconSizes: {
+    xs: 0,
+    s: 0,
+    m: 24,
+    l: 24,
+    xl: 32
+  },
+  /**
+   * Padding between icon and track edge (horizontal).
+   * Keeps the icon visually centered within the pill track.
+   */
+  insetIconPadding: 4
+};
+var SliderColors = {
+  // ── Track ─────────────────────────────────────────────────────────────────
+  /** Active track color. Maps to ActiveTrackColor token. */
+  activeTrack: "var(--md-sys-color-primary)",
+  /** Inactive track color. Maps to InactiveTrackColor token. */
+  inactiveTrack: "var(--md-sys-color-secondary-container)",
+  /**
+   * Disabled track color.
+   * Uses opacity + on-surface per MD3 disabled state spec.
+   */
+  disabledActiveTrack: "var(--md-sys-color-on-surface)",
+  disabledInactiveTrack: "var(--md-sys-color-on-surface)",
+  // ── Thumb ─────────────────────────────────────────────────────────────────
+  /** Thumb (handle) color. Maps to HandleColor token. */
+  thumb: "var(--md-sys-color-primary)",
+  /** Disabled thumb color. */
+  disabledThumb: "var(--md-sys-color-on-surface)",
+  // ── Value indicator ───────────────────────────────────────────────────────
+  /** Value indicator (tooltip) background. Maps to InverseSurface. */
+  valueIndicatorBg: "var(--md-sys-color-inverse-surface)",
+  /** Value indicator (tooltip) text. Maps to InverseOnSurface. */
+  valueIndicatorText: "var(--md-sys-color-inverse-on-surface)",
+  // ── Ticks ────────────────────────────────────────────────────────────────
+  /**
+   * Tick on the INACTIVE portion of the track.
+   * Maps to TickMarkActiveContainerColor (in spec: primary color stands out).
+   */
+  tickOnInactive: "var(--md-sys-color-primary)",
+  /**
+   * Tick on the ACTIVE portion of the track.
+   * Maps to TickMarkInactiveContainerColor (secondary-container blends in).
+   */
+  tickOnActive: "var(--md-sys-color-secondary-container)",
+  disabledTick: "var(--md-sys-color-on-surface)"
+};
+var SLIDER_THUMB_SPRING = {
+  type: "spring",
+  stiffness: 500,
+  damping: 40
+};
+var SLIDER_INDICATOR_TRANSITION = {
+  type: "spring",
+  stiffness: 450,
+  damping: 32
+};
+var ValueIndicator = React25__namespace.memo(function ValueIndicator2({
+  value,
+  visible,
+  orientation,
+  formatValue,
+  prefersReduced,
+  trackSize
+}) {
+  const label = formatValue ? formatValue(value) : String(Math.round(value));
+  const isHorizontal = orientation === "horizontal";
+  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const offsetFromCenter = thumbHeight / 2 + 8;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: visible && /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.div,
+    {
+      role: "tooltip",
+      "aria-hidden": "true",
+      initial: prefersReduced ? false : {
+        scale: 0,
+        opacity: 0,
+        y: isHorizontal ? 6 : 0,
+        x: !isHorizontal ? -6 : 0
+      },
+      animate: { scale: 1, opacity: 1, y: 0, x: 0 },
+      exit: prefersReduced ? {} : {
+        scale: 0,
+        opacity: 0,
+        y: isHorizontal ? 6 : 0,
+        x: !isHorizontal ? -6 : 0
+      },
+      transition: prefersReduced ? { duration: 0 } : SLIDER_INDICATOR_TRANSITION,
+      className: cn(
+        "absolute pointer-events-none select-none",
+        "rounded-full px-2.5 py-1 text-xs font-medium leading-none whitespace-nowrap",
+        // Position: above for horizontal, right for vertical
+        isHorizontal ? "-translate-x-1/2 left-1/2" : "translate-y-1/2 bottom-1/2"
+      ),
+      style: __spreadValues({
+        backgroundColor: SliderColors.valueIndicatorBg,
+        color: SliderColors.valueIndicatorText,
+        transformOrigin: isHorizontal ? "bottom center" : "center left"
+      }, isHorizontal ? { bottom: `calc(50% + ${offsetFromCenter}px)` } : { left: `calc(50% + ${offsetFromCenter}px)` }),
+      children: label
+    },
+    "value-indicator"
+  ) });
+});
+var SliderThumb = React25__namespace.memo(function SliderThumb2({
+  value,
+  percent,
+  min,
+  max,
+  step,
+  disabled,
+  orientation,
+  showValueIndicator,
+  trackRef,
+  onValueChange,
+  onValueChangeEnd,
+  formatValue,
+  thumbId,
+  trackSize,
+  variant,
+  zIndex = 1,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  var _a;
+  const isHorizontal = orientation === "horizontal";
+  const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+  const trackInset = Math.min(
+    SliderTokens.trackSizes[trackSize] / 2,
+    insetLimit
+  );
+  const posTarget = isHorizontal ? "left" : "bottom";
+  const motionStyle = {
+    [posTarget]: `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`
+  };
+  const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
+  const [isDragging, setIsDragging] = React25__namespace.useState(false);
+  const [isHovered, setIsHovered] = React25__namespace.useState(false);
+  const [isFocused, setIsFocused] = React25__namespace.useState(false);
+  const pointerIdRef = React25__namespace.useRef(null);
+  const thumbRef = React25__namespace.useRef(null);
+  const showIndicator = showValueIndicator && (isDragging || isHovered || isFocused);
+  const positionStyle = isHorizontal ? __spreadProps(__spreadValues({
+    position: "absolute"
+  }, motionStyle), {
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex
+  }) : __spreadProps(__spreadValues({
+    position: "absolute"
+  }, motionStyle), {
+    left: "50%",
+    transform: "translate(-50%, 50%)",
+    zIndex
+  });
+  const getDeltaFromPointer = React25__namespace.useCallback(
+    (e) => {
+      const trackEl = trackRef.current;
+      if (!trackEl) return percent;
+      const rect = trackEl.getBoundingClientRect();
+      const space = isHorizontal ? rect.width : rect.height;
+      const insetLimit2 = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+      const trackInset2 = Math.min(
+        SliderTokens.trackSizes[trackSize] / 2,
+        insetLimit2
+      );
+      const safeSpace = space - trackInset2 * 2;
+      if (safeSpace <= 0) return percent;
+      let rawPercent;
+      if (isHorizontal) {
+        rawPercent = (e.clientX - rect.left - trackInset2) / safeSpace;
+      } else {
+        rawPercent = (rect.bottom - e.clientY - trackInset2) / safeSpace;
+      }
+      const clamped = Math.max(0, Math.min(1, rawPercent));
+      const range = max - min;
+      const rawValue = min + clamped * range;
+      const snapped = step > 0 ? Math.round((rawValue - min) / step) * step + min : rawValue;
+      return Math.max(min, Math.min(max, snapped));
+    },
+    [isHorizontal, max, min, percent, step, trackRef, trackSize]
+  );
+  const handlePointerDown = React25__namespace.useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      pointerIdRef.current = e.pointerId;
+      setIsDragging(true);
+    },
+    [disabled]
+  );
+  const handlePointerMove = React25__namespace.useCallback(
+    (e) => {
+      if (!isDragging || e.pointerId !== pointerIdRef.current) return;
+      const newValue = getDeltaFromPointer(e.nativeEvent);
+      onValueChange(newValue);
+    },
+    [isDragging, getDeltaFromPointer, onValueChange]
+  );
+  const handlePointerUp = React25__namespace.useCallback(
+    (e) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      e.currentTarget.releasePointerCapture(e.pointerId);
+      pointerIdRef.current = null;
+      setIsDragging(false);
+      onValueChangeEnd == null ? void 0 : onValueChangeEnd(value);
+    },
+    [onValueChangeEnd, value]
+  );
+  const handleKeyDown = React25__namespace.useCallback(
+    (e) => {
+      if (disabled) return;
+      if (e.key === "Home") {
+        e.preventDefault();
+        onValueChange(min);
+        onValueChangeEnd == null ? void 0 : onValueChangeEnd(min);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        onValueChange(max);
+        onValueChangeEnd == null ? void 0 : onValueChangeEnd(max);
+        return;
+      }
+      const delta = getKeyboardDelta(e.key, step, min, max);
+      if (delta === null) return;
+      e.preventDefault();
+      const newValue = Math.max(min, Math.min(max, value + delta));
+      onValueChange(newValue);
+      onValueChangeEnd == null ? void 0 : onValueChangeEnd(newValue);
+    },
+    [disabled, max, min, onValueChange, onValueChangeEnd, step, value]
+  );
+  const thumbColor = disabled ? SliderColors.disabledThumb : `var(--md-sys-color-${variant})`;
+  const squeezeSize = isDragging ? SliderTokens.thumbWidthPressed : SliderTokens.thumbWidthDefault;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: __spreadProps(__spreadValues({}, positionStyle), {
+        width: SliderTokens.thumbTouchTarget,
+        height: SliderTokens.thumbTouchTarget,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        touchAction: "none"
+      }),
+      className: cn(
+        "cursor-grab",
+        isDragging && "cursor-grabbing",
+        disabled && "cursor-not-allowed"
+      ),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ValueIndicator,
+          {
+            value,
+            visible: showIndicator,
+            orientation,
+            formatValue,
+            prefersReduced,
+            trackSize
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.m.div,
+          {
+            ref: thumbRef,
+            id: thumbId,
+            role: "slider",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": value,
+            "aria-orientation": orientation,
+            "aria-disabled": disabled || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            tabIndex: disabled ? -1 : 0,
+            onKeyDown: handleKeyDown,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            onMouseEnter: () => !disabled && setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            animate: __spreadProps(__spreadValues({}, isHorizontal ? { width: squeezeSize } : { height: squeezeSize }), {
+              backgroundColor: thumbColor,
+              opacity: disabled ? 0.38 : 1
+            }),
+            transition: prefersReduced ? { duration: 0 } : SLIDER_THUMB_SPRING,
+            className: cn(
+              "relative shrink-0 rounded-full select-none outline-none",
+              "focus-visible:outline-2 focus-visible:outline-offset-2",
+              "focus-visible:outline-(--md-sys-color-secondary)"
+            ),
+            style: __spreadProps(__spreadValues({}, isHorizontal ? {
+              height: SliderTokens.thumbHeights[trackSize],
+              width: SliderTokens.thumbWidthDefault,
+              willChange: "width"
+            } : {
+              width: SliderTokens.thumbHeights[trackSize],
+              height: SliderTokens.thumbWidthDefault,
+              willChange: "height"
+            }), {
+              backgroundColor: thumbColor
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+var RangeTrack = React25__namespace.memo(function RangeTrack2({
+  startPercent,
+  endPercent,
+  trackSize,
+  orientation,
+  variant,
+  disabled,
+  ticks,
+  min,
+  max,
+  trackShape = "md3",
+  trackRef,
+  onTrackPointerDown
+}) {
+  const isHorizontal = orientation === "horizontal";
+  const size = SliderTokens.trackSizes[trackSize];
+  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const { thumbGap, thumbWidthDefault, tickSize } = SliderTokens;
+  const thumbHalfWidth = thumbWidthDefault / 2;
+  const activeTrack = disabled ? SliderColors.disabledActiveTrack : `var(--md-sys-color-${variant})`;
+  const inactiveTrack = disabled ? SliderColors.disabledInactiveTrack : `var(--md-sys-color-${variant}-container)`;
+  const innerR = SliderTokens.trackInnerRadius;
+  let outerR = size / 2;
+  if (trackShape === "md3") {
+    outerR = Math.min(SliderTokens.trackShapes[trackSize], size / 2);
+  } else if (typeof trackShape === "number") {
+    outerR = Math.min(trackShape, size / 2);
+  }
+  if (isHorizontal) {
+    const insetLimit2 = thumbGap + thumbWidthDefault / 2;
+    const trackInset2 = Math.min(size / 2, insetLimit2);
+    const cxStart = `calc(${trackInset2}px + ${startPercent} * (100% - ${trackInset2 * 2}px))`;
+    const cxEnd = `calc(${trackInset2}px + ${endPercent} * (100% - ${trackInset2 * 2}px))`;
+    const gapWithThumbStr2 = `${thumbGap + thumbHalfWidth}px`;
+    const leadingWidth = `max(0px, calc(${cxStart} - ${gapWithThumbStr2}))`;
+    const activeLeft = `calc(${cxStart} + ${gapWithThumbStr2})`;
+    const activeWidth = `max(0px, calc(${cxEnd} - ${cxStart} - ${gapWithThumbStr2} * 2))`;
+    const trailingLeft = `calc(${cxEnd} + ${gapWithThumbStr2})`;
+    const trailingWidth = `max(0px, calc(100% - (${cxEnd} + ${gapWithThumbStr2})))`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: trackRef,
+        className: cn(
+          "relative w-full",
+          disabled ? "cursor-not-allowed" : "cursor-pointer"
+        ),
+        style: { height: thumbHeight },
+        onPointerDown: onTrackPointerDown,
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: leadingWidth,
+                height: size,
+                backgroundColor: inactiveTrack,
+                opacity: disabled ? 0.38 : 1,
+                borderTopLeftRadius: outerR,
+                borderBottomLeftRadius: outerR,
+                borderTopRightRadius: innerR,
+                borderBottomRightRadius: innerR
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: activeLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: activeWidth,
+                height: size,
+                backgroundColor: activeTrack,
+                opacity: disabled ? 0.38 : 1,
+                borderTopLeftRadius: startPercent <= 0 ? outerR : innerR,
+                borderBottomLeftRadius: startPercent <= 0 ? outerR : innerR,
+                borderTopRightRadius: endPercent >= 1 ? outerR : innerR,
+                borderBottomRightRadius: endPercent >= 1 ? outerR : innerR
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: trailingLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: trailingWidth,
+                height: size,
+                backgroundColor: inactiveTrack,
+                opacity: disabled ? 0.38 : 1,
+                borderTopLeftRadius: innerR,
+                borderBottomLeftRadius: innerR,
+                borderTopRightRadius: outerR,
+                borderBottomRightRadius: outerR
+              }
+            }
+          ),
+          ticks.map((tick) => {
+            const tickPct = (tick - min) / (max - min);
+            const isActive = tickPct > startPercent && tickPct < endPercent;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  width: tickSize,
+                  height: tickSize,
+                  borderRadius: "50%",
+                  backgroundColor: disabled ? SliderColors.disabledTick : isActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`,
+                  opacity: disabled ? 0.38 : 1,
+                  left: `calc(${trackInset2}px + ${tickPct} * (100% - ${trackInset2 * 2}px) - ${tickSize / 2}px)`,
+                  top: "50%",
+                  transform: "translateY(-50%)"
+                }
+              },
+              tick
+            );
+          })
+        ]
+      }
+    );
+  }
+  const insetLimit = thumbGap + thumbWidthDefault / 2;
+  const trackInset = Math.min(size / 2, insetLimit);
+  const cyStart = `calc(${trackInset}px + ${startPercent} * (100% - ${trackInset * 2}px))`;
+  const cyEnd = `calc(${trackInset}px + ${endPercent} * (100% - ${trackInset * 2}px))`;
+  const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
+  const leadingHeight = `max(0px, calc(${cyStart} - ${gapWithThumbStr}))`;
+  const activeBottom = `calc(${cyStart} + ${gapWithThumbStr})`;
+  const activeHeight = `max(0px, calc(${cyEnd} - ${cyStart} - ${gapWithThumbStr} * 2))`;
+  const trailingBottom = `calc(${cyEnd} + ${gapWithThumbStr})`;
+  const trailingHeight = `max(0px, calc(100% - (${cyEnd} + ${gapWithThumbStr})))`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: trackRef,
+      className: cn(
+        "relative h-full",
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ),
+      style: { width: thumbHeight },
+      onPointerDown: onTrackPointerDown,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: leadingHeight,
+              width: size,
+              backgroundColor: inactiveTrack,
+              opacity: disabled ? 0.38 : 1,
+              borderBottomLeftRadius: outerR,
+              borderBottomRightRadius: outerR,
+              borderTopLeftRadius: innerR,
+              borderTopRightRadius: innerR
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              bottom: activeBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: activeHeight,
+              width: size,
+              backgroundColor: activeTrack,
+              opacity: disabled ? 0.38 : 1,
+              borderBottomLeftRadius: startPercent <= 0 ? outerR : innerR,
+              borderBottomRightRadius: startPercent <= 0 ? outerR : innerR,
+              borderTopLeftRadius: endPercent >= 1 ? outerR : innerR,
+              borderTopRightRadius: endPercent >= 1 ? outerR : innerR
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              bottom: trailingBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: trailingHeight,
+              width: size,
+              backgroundColor: inactiveTrack,
+              opacity: disabled ? 0.38 : 1,
+              borderTopLeftRadius: outerR,
+              borderTopRightRadius: outerR,
+              borderBottomLeftRadius: innerR,
+              borderBottomRightRadius: innerR
+            }
+          }
+        ),
+        ticks.map((tick) => {
+          const tickPct = (tick - min) / (max - min);
+          const isActive = tickPct > startPercent && tickPct < endPercent;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                width: tickSize,
+                height: tickSize,
+                borderRadius: "50%",
+                backgroundColor: disabled ? SliderColors.disabledTick : isActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`,
+                opacity: disabled ? 0.38 : 1,
+                bottom: `calc(${trackInset}px + ${tickPct} * (100% - ${trackInset * 2}px) - ${tickSize / 2}px)`,
+                left: "50%",
+                transform: "translateX(-50%)"
+              }
+            },
+            tick
+          );
+        })
+      ]
+    }
+  );
+});
+var RangeSliderComponent = React25__namespace.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    onValueChangeEnd,
+    min = 0,
+    max = 100,
+    step = 0,
+    orientation = "horizontal",
+    trackSize = "m",
+    trackShape = "md3",
+    variant = "primary",
+    disabled = false,
+    showValueIndicator = false,
+    showTicks = false,
+    formatValue,
+    className,
+    "aria-label": ariaLabel
+  }, ref) => {
+    var _a, _b;
+    const isHorizontal = orientation === "horizontal";
+    const defaultStart = (_a = defaultValue == null ? void 0 : defaultValue[0]) != null ? _a : min;
+    const defaultEnd = (_b = defaultValue == null ? void 0 : defaultValue[1]) != null ? _b : max;
+    const [internalValue, setInternalValue] = React25__namespace.useState([
+      defaultStart,
+      defaultEnd
+    ]);
+    const resolvedValue = controlledValue !== void 0 ? controlledValue : internalValue;
+    const { coerce, snap, toPercent, ticks } = useSliderMath({
+      min,
+      max,
+      step
+    });
+    const startValue = snap(coerce(resolvedValue[0]));
+    const endValue = snap(coerce(resolvedValue[1]));
+    const startPercent = toPercent(startValue);
+    const endPercent = toPercent(endValue);
+    const [topThumb, setTopThumb] = React25__namespace.useState("end");
+    const trackRef = React25__namespace.useRef(null);
+    const minGap = step > 0 ? step : (max - min) / 1e3;
+    const handleStartChange = React25__namespace.useCallback(
+      (newStart) => {
+        setTopThumb("start");
+        const clamped = Math.min(newStart, endValue - minGap);
+        const final = snap(coerce(clamped));
+        if (controlledValue === void 0) {
+          setInternalValue([final, endValue]);
+        }
+        onValueChange == null ? void 0 : onValueChange([final, endValue]);
+      },
+      [controlledValue, coerce, endValue, minGap, onValueChange, snap]
+    );
+    const handleEndChange = React25__namespace.useCallback(
+      (newEnd) => {
+        setTopThumb("end");
+        const clamped = Math.max(newEnd, startValue + minGap);
+        const final = snap(coerce(clamped));
+        if (controlledValue === void 0) {
+          setInternalValue([startValue, final]);
+        }
+        onValueChange == null ? void 0 : onValueChange([startValue, final]);
+      },
+      [controlledValue, coerce, minGap, onValueChange, snap, startValue]
+    );
+    const handleStartChangeEnd = React25__namespace.useCallback(
+      (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([v, endValue]),
+      [endValue, onValueChangeEnd]
+    );
+    const handleEndChangeEnd = React25__namespace.useCallback(
+      (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([startValue, v]),
+      [onValueChangeEnd, startValue]
+    );
+    const handleTrackPointerDown = React25__namespace.useCallback(
+      (e) => {
+        if (disabled) return;
+        const trackEl = trackRef.current;
+        if (!trackEl) return;
+        const rect = trackEl.getBoundingClientRect();
+        let clickPercent;
+        const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+        const trackInset = Math.min(SliderTokens.trackSizes[trackSize] / 2, insetLimit);
+        if (isHorizontal) {
+          const x = e.clientX - rect.left;
+          clickPercent = (x - trackInset) / (rect.width - trackInset * 2);
+        } else {
+          const y = rect.bottom - e.clientY;
+          clickPercent = (y - trackInset) / (rect.height - trackInset * 2);
+        }
+        const clamped = Math.max(0, Math.min(1, clickPercent));
+        const rawValue = min + clamped * (max - min);
+        const clickValue = snap(coerce(rawValue));
+        const distStart = Math.abs(clickValue - startValue);
+        const distEnd = Math.abs(clickValue - endValue);
+        if (distStart <= distEnd) {
+          handleStartChange(clickValue);
+        } else {
+          handleEndChange(clickValue);
+        }
+      },
+      [
+        coerce,
+        disabled,
+        endValue,
+        handleEndChange,
+        handleStartChange,
+        isHorizontal,
+        max,
+        min,
+        snap,
+        startValue,
+        trackSize
+      ]
+    );
+    const id = React25__namespace.useId();
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex items-center",
+          isHorizontal ? "w-full flex-row" : "h-full flex-col",
+          disabled && "pointer-events-none",
+          className
+        ),
+        style: isHorizontal ? { minWidth: 0 } : { minHeight: 0 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RangeTrack,
+            {
+              startPercent,
+              endPercent,
+              trackSize,
+              trackShape,
+              orientation,
+              variant,
+              disabled,
+              ticks: showTicks ? ticks : [],
+              min,
+              max,
+              trackRef,
+              onTrackPointerDown: handleTrackPointerDown
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SliderThumb,
+            {
+              value: startValue,
+              percent: startPercent,
+              min,
+              max,
+              step,
+              disabled,
+              orientation,
+              trackSize,
+              variant,
+              showValueIndicator,
+              trackRef,
+              onValueChange: handleStartChange,
+              onValueChangeEnd: handleStartChangeEnd,
+              formatValue,
+              thumbId: `${id}-start`,
+              zIndex: topThumb === "start" ? 2 : 1,
+              "aria-label": ariaLabel ? `${ariaLabel} start` : "Range start"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SliderThumb,
+            {
+              value: endValue,
+              percent: endPercent,
+              min,
+              max,
+              step,
+              disabled,
+              orientation,
+              trackSize,
+              variant,
+              showValueIndicator,
+              trackRef,
+              onValueChange: handleEndChange,
+              onValueChangeEnd: handleEndChangeEnd,
+              formatValue,
+              thumbId: `${id}-end`,
+              zIndex: topThumb === "end" ? 2 : 1,
+              "aria-label": ariaLabel ? `${ariaLabel} end` : "Range end"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+RangeSliderComponent.displayName = "RangeSlider";
+var RangeSlider = React25__namespace.memo(RangeSliderComponent);
+function getHorizontalRadius(isLeading, innerR, outerR) {
+  if (isLeading) {
+    return {
+      borderTopLeftRadius: outerR,
+      borderBottomLeftRadius: outerR,
+      borderTopRightRadius: innerR,
+      borderBottomRightRadius: innerR
+    };
+  }
+  return {
+    borderTopLeftRadius: innerR,
+    borderBottomLeftRadius: innerR,
+    borderTopRightRadius: outerR,
+    borderBottomRightRadius: outerR
+  };
+}
+function getVerticalRadius(isLeading, innerR, outerR) {
+  if (isLeading) {
+    return {
+      borderBottomLeftRadius: outerR,
+      borderBottomRightRadius: outerR,
+      borderTopLeftRadius: innerR,
+      borderTopRightRadius: innerR
+    };
+  }
+  return {
+    borderTopLeftRadius: outerR,
+    borderTopRightRadius: outerR,
+    borderBottomLeftRadius: innerR,
+    borderBottomRightRadius: innerR
+  };
+}
+var allInnerRadius = (innerR) => ({
+  borderTopLeftRadius: innerR,
+  borderBottomLeftRadius: innerR,
+  borderTopRightRadius: innerR,
+  borderBottomRightRadius: innerR
+});
+var InsetIcon = React25__namespace.memo(function InsetIcon2({
+  icon,
+  isOnActiveSegment,
+  position,
+  orientation,
+  trackSize,
+  trackSizeToken,
+  disabled,
+  variant,
+  prefersReduced
+}) {
+  const iconSize = Math.min(
+    SliderTokens.insetIconSizes[trackSizeToken],
+    Math.max(4, trackSize - SliderTokens.insetIconPadding * 2)
+  );
+  const activeColor = `var(--md-sys-color-on-${variant})`;
+  const inactiveColor = `var(--md-sys-color-${variant})`;
+  const isHorizontal = orientation === "horizontal";
+  const fastFade = prefersReduced ? { duration: 0 } : { duration: 0.12 };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.div,
+    {
+      "aria-hidden": "true",
+      className: "[&_svg]:w-full [&_svg]:h-full",
+      initial: __spreadValues({
+        opacity: 0
+      }, isHorizontal ? { left: position } : { bottom: position }),
+      animate: {
+        [isHorizontal ? "left" : "bottom"]: position,
+        opacity: disabled ? 0.38 : 1,
+        color: isOnActiveSegment ? activeColor : inactiveColor
+      },
+      exit: { opacity: 0, transition: fastFade },
+      transition: prefersReduced ? { duration: 0 } : {
+        left: { type: "spring", stiffness: 500, damping: 40 },
+        bottom: { type: "spring", stiffness: 500, damping: 40 },
+        opacity: fastFade,
+        color: fastFade
+      },
+      style: __spreadValues({
+        position: "absolute",
+        width: iconSize,
+        height: iconSize,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: 1,
+        willChange: isHorizontal ? "left" : "bottom"
+      }, isHorizontal ? { top: "50%", transform: "translateY(-50%)" } : { left: "50%", transform: "translateX(-50%)" }),
+      children: icon
+    }
+  );
+});
+function Ticks({
+  ticks,
+  min,
+  max,
+  percent,
+  orientation,
+  variant,
+  isCentered,
+  disabled,
+  trackInset
+}) {
+  if (ticks.length === 0) return null;
+  const { thumbGap, thumbWidthDefault, tickSize } = SliderTokens;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ticks.map((tick) => {
+    const tickPercent = (tick - min) / (max - min);
+    const isOnActive = isCentered ? percent >= 0.5 ? tickPercent >= 0.5 && tickPercent <= percent : tickPercent <= 0.5 && tickPercent >= percent : tickPercent <= percent;
+    const thumbStart = percent - (thumbGap + thumbWidthDefault / 2) / 100;
+    const thumbEnd = percent + (thumbGap + thumbWidthDefault / 2) / 100;
+    if (tickPercent > thumbStart && tickPercent < thumbEnd) return null;
+    const color = disabled ? SliderColors.disabledTick : isOnActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`;
+    const style = __spreadValues({
+      position: "absolute",
+      width: tickSize,
+      height: tickSize,
+      borderRadius: "50%",
+      backgroundColor: color,
+      opacity: disabled ? 0.38 : 1
+    }, orientation === "horizontal" ? {
+      left: `calc(${trackInset}px + ${tickPercent} * (100% - ${trackInset * 2}px) - ${tickSize / 2}px)`,
+      top: "50%",
+      transform: "translateY(-50%)"
+    } : {
+      // Vertical: bottom=0%, top=100% (inverted Y-axis)
+      bottom: `calc(${trackInset}px + ${tickPercent} * (100% - ${trackInset * 2}px) - ${tickSize / 2}px)`,
+      left: "50%",
+      transform: "translateX(-50%)"
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style, "aria-hidden": "true" }, tick);
+  }) });
+}
+var SliderTrack = React25__namespace.memo(function SliderTrack2({
+  percent,
+  trackSize,
+  orientation,
+  variant,
+  isCentered,
+  min,
+  max,
+  disabled,
+  trackRef,
+  onTrackPointerDown,
+  ticks = [],
+  insetIcon,
+  insetIconAtMin,
+  insetIconTrailing,
+  insetIconAtMax,
+  value,
+  trackShape = "md3"
+}) {
+  var _a;
+  const isHorizontal = orientation === "horizontal";
+  const size = SliderTokens.trackSizes[trackSize];
+  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const { thumbGap, thumbWidthDefault, trackInnerRadius } = SliderTokens;
+  const innerR = trackInnerRadius;
+  let outerR = size / 2;
+  if (trackShape === "md3") {
+    outerR = Math.min(SliderTokens.trackShapes[trackSize], size / 2);
+  } else if (typeof trackShape === "number") {
+    outerR = Math.min(trackShape, size / 2);
+  }
+  const thumbHalfWidth = thumbWidthDefault / 2;
+  const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
+  const hasAnyInsetIcon = Boolean(insetIcon || insetIconTrailing);
+  const prefersReduced = (_a = react.useReducedMotion()) != null ? _a : false;
+  const [trackWidth, setTrackWidth] = React25__namespace.useState(0);
+  React25__namespace.useLayoutEffect(() => {
+    const el = trackRef.current;
+    if (!el || !hasAnyInsetIcon) return;
+    setTrackWidth(isHorizontal ? el.clientWidth : el.clientHeight);
+    const ro = new ResizeObserver(() => {
+      setTrackWidth(isHorizontal ? el.clientWidth : el.clientHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [hasAnyInsetIcon, isHorizontal, trackRef]);
+  const activeIconSize = Math.min(
+    SliderTokens.insetIconSizes[trackSize],
+    Math.max(4, size - SliderTokens.insetIconPadding * 2)
+  );
+  const iconTotalWidth = activeIconSize + SliderTokens.insetIconPadding * 2 + thumbGap + thumbHalfWidth;
+  const iconThreshold = trackWidth > 0 ? iconTotalWidth / trackWidth : 0.15;
+  const HYSTERESIS_GAP = 0.04;
+  const trailingActiveRef = React25__namespace.useRef(1 - percent <= iconThreshold);
+  const leadingActiveRef = React25__namespace.useRef(percent > iconThreshold);
+  const trailingPercent = 1 - percent;
+  if (trailingActiveRef.current) {
+    if (trailingPercent > iconThreshold + HYSTERESIS_GAP) {
+      trailingActiveRef.current = false;
+    }
+  } else {
+    if (trailingPercent <= iconThreshold) {
+      trailingActiveRef.current = true;
+    }
+  }
+  const trailingOnActive = trailingActiveRef.current;
+  if (leadingActiveRef.current) {
+    if (percent <= iconThreshold - HYSTERESIS_GAP) {
+      leadingActiveRef.current = false;
+    }
+  } else {
+    if (percent > iconThreshold) {
+      leadingActiveRef.current = true;
+    }
+  }
+  const leadingOnActive = leadingActiveRef.current;
+  const isAtMin = value !== void 0 && value <= min;
+  const resolvedLeadingIcon = isAtMin && insetIconAtMin ? insetIconAtMin : insetIcon;
+  const isAtMax = value !== void 0 && value >= max;
+  const resolvedTrailingIcon = isAtMax && insetIconAtMax ? insetIconAtMax : insetIconTrailing;
+  const activeColor = disabled ? SliderColors.disabledActiveTrack : `var(--md-sys-color-${variant})`;
+  const inactiveColor = disabled ? SliderColors.disabledInactiveTrack : `var(--md-sys-color-${variant}-container)`;
+  const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+  const trackInset = Math.min(size / 2, insetLimit);
+  const gapTotal = thumbGap + thumbHalfWidth;
+  const thumbCenter = `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`;
+  const leadingActiveLeft = `${trackInset + SliderTokens.insetIconPadding}px`;
+  const leadingInactiveLeft = `calc(${thumbCenter} + ${gapTotal}px + ${SliderTokens.insetIconPadding}px)`;
+  const trailingInactiveLeft = `calc(100% - ${trackInset}px - ${activeIconSize}px - ${SliderTokens.insetIconPadding}px)`;
+  const trailingActiveLeft = `calc(${thumbCenter} - ${gapTotal}px - ${activeIconSize}px - ${SliderTokens.insetIconPadding}px)`;
+  if (isHorizontal) {
+    const cxStr = `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`;
+    const segments2 = [];
+    if (!isCentered) {
+      const leftSegmentWidth = `max(0px, calc(${cxStr} - ${gapWithThumbStr}))`;
+      const rightSegmentLeft = `calc(${cxStr} + ${gapWithThumbStr})`;
+      const rightSegmentWidth = `max(0px, calc(100% - (${cxStr} + ${gapWithThumbStr})))`;
+      segments2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              left: 0,
+              top: "50%",
+              transform: "translateY(-50%)",
+              width: leftSegmentWidth,
+              height: size,
+              backgroundColor: activeColor,
+              opacity: disabled ? 0.38 : 1
+            }, getHorizontalRadius(true, innerR, outerR))
+          },
+          "left"
+        )
+      );
+      segments2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              left: rightSegmentLeft,
+              top: "50%",
+              transform: "translateY(-50%)",
+              width: rightSegmentWidth,
+              height: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getHorizontalRadius(false, innerR, outerR))
+          },
+          "right"
+        )
+      );
+    } else {
+      const halfCenterGap = SliderTokens.thumbGap / 2;
+      if (percent >= 0.5) {
+        const leftBaseWidth = `max(0px, min(calc(50% - ${halfCenterGap}px), calc(${cxStr} - ${gapWithThumbStr})))`;
+        segments2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: leftBaseWidth,
+                height: size,
+                backgroundColor: inactiveColor,
+                opacity: disabled ? 0.38 : 1
+              }, getHorizontalRadius(true, innerR, outerR))
+            },
+            "left-base"
+          )
+        );
+        const centerActiveLeft = `calc(50% + ${halfCenterGap}px)`;
+        const centerActiveWidth = `max(0px, calc(${cxStr} - ${gapWithThumbStr} - (50% + ${halfCenterGap}px)))`;
+        segments2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: centerActiveLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: centerActiveWidth,
+                height: size,
+                backgroundColor: activeColor,
+                opacity: disabled ? 0.38 : 1
+              }, allInnerRadius(innerR))
+            },
+            "center-active"
+          )
+        );
+        const rightBaseLeft = `calc(${cxStr} + ${gapWithThumbStr})`;
+        const rightBaseWidth = `max(0px, calc(100% - (${cxStr} + ${gapWithThumbStr})))`;
+        segments2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: rightBaseLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: rightBaseWidth,
+                height: size,
+                backgroundColor: inactiveColor,
+                opacity: disabled ? 0.38 : 1
+              }, getHorizontalRadius(false, innerR, outerR))
+            },
+            "right-base"
+          )
+        );
+      } else {
+        const leftBaseWidth = `max(0px, calc(${cxStr} - ${gapWithThumbStr}))`;
+        segments2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: leftBaseWidth,
+                height: size,
+                backgroundColor: inactiveColor,
+                opacity: disabled ? 0.38 : 1
+              }, getHorizontalRadius(true, innerR, outerR))
+            },
+            "left-base"
+          )
+        );
+        const centerActiveLeft = `calc(${cxStr} + ${gapWithThumbStr})`;
+        const centerActiveWidth = `max(0px, calc(50% - ${halfCenterGap}px - (${cxStr} + ${gapWithThumbStr})))`;
+        segments2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: centerActiveLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: centerActiveWidth,
+                height: size,
+                backgroundColor: activeColor,
+                opacity: disabled ? 0.38 : 1
+              }, allInnerRadius(innerR))
+            },
+            "center-active"
+          )
+        );
+        const rightBaseLeft = `max(calc(50% + ${halfCenterGap}px), calc(${cxStr} + ${gapWithThumbStr}))`;
+        const rightBaseWidth = `max(0px, calc(100% - max(calc(50% + ${halfCenterGap}px), calc(${cxStr} + ${gapWithThumbStr}))))`;
+        segments2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: __spreadValues({
+                position: "absolute",
+                left: rightBaseLeft,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: rightBaseWidth,
+                height: size,
+                backgroundColor: inactiveColor,
+                opacity: disabled ? 0.38 : 1
+              }, getHorizontalRadius(false, innerR, outerR))
+            },
+            "right-base"
+          )
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: trackRef,
+        className: cn(
+          "relative w-full",
+          disabled ? "cursor-not-allowed" : "cursor-pointer"
+        ),
+        style: { height: thumbHeight },
+        onPointerDown: onTrackPointerDown,
+        "aria-hidden": "true",
+        children: [
+          segments2,
+          ticks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            Ticks,
+            {
+              ticks,
+              min,
+              max,
+              percent,
+              orientation,
+              disabled,
+              variant,
+              isCentered,
+              trackInset
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: resolvedLeadingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            InsetIcon,
+            {
+              icon: resolvedLeadingIcon,
+              isOnActiveSegment: leadingOnActive,
+              position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
+              orientation,
+              trackSize: size,
+              trackSizeToken: trackSize,
+              disabled,
+              variant,
+              prefersReduced
+            },
+            isAtMin ? "lead-min" : leadingOnActive ? "lead-active" : "lead-inactive"
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: resolvedTrailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            InsetIcon,
+            {
+              icon: resolvedTrailingIcon,
+              isOnActiveSegment: trailingOnActive,
+              position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
+              orientation,
+              trackSize: size,
+              trackSizeToken: trackSize,
+              disabled,
+              variant,
+              prefersReduced
+            },
+            isAtMax ? "trail-max" : trailingOnActive ? "trail-active" : "trail-inactive"
+          ) })
+        ]
+      }
+    );
+  }
+  const cyStr = `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`;
+  const segments = [];
+  if (!isCentered) {
+    const bottomSegmentHeight = `max(0px, calc(${cyStr} - ${gapWithThumbStr}))`;
+    const topSegmentBottom = `calc(${cyStr} + ${gapWithThumbStr})`;
+    const topSegmentHeight = `max(0px, calc(100% - (${cyStr} + ${gapWithThumbStr})))`;
+    segments.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: __spreadValues({
+            position: "absolute",
+            bottom: 0,
+            left: "50%",
+            transform: "translateX(-50%)",
+            height: bottomSegmentHeight,
+            width: size,
+            backgroundColor: activeColor,
+            opacity: disabled ? 0.38 : 1
+          }, getVerticalRadius(true, innerR, outerR))
+        },
+        "bottom"
+      )
+    );
+    segments.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: __spreadValues({
+            position: "absolute",
+            bottom: topSegmentBottom,
+            left: "50%",
+            transform: "translateX(-50%)",
+            height: topSegmentHeight,
+            width: size,
+            backgroundColor: inactiveColor,
+            opacity: disabled ? 0.38 : 1
+          }, getVerticalRadius(false, innerR, outerR))
+        },
+        "top"
+      )
+    );
+  } else {
+    const halfCenterGap = SliderTokens.thumbGap / 2;
+    if (percent >= 0.5) {
+      const bottomBaseHeight = `max(0px, min(calc(50% - ${halfCenterGap}px), calc(${cyStr} - ${gapWithThumbStr})))`;
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: bottomBaseHeight,
+              width: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getVerticalRadius(true, innerR, outerR))
+          },
+          "bottom-base"
+        )
+      );
+      const centerActiveBottom = `calc(50% + ${halfCenterGap}px)`;
+      const centerActiveHeight = `max(0px, calc(${cyStr} - ${gapWithThumbStr} - (50% + ${halfCenterGap}px)))`;
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: centerActiveBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: centerActiveHeight,
+              width: size,
+              backgroundColor: activeColor,
+              opacity: disabled ? 0.38 : 1
+            }, allInnerRadius(innerR))
+          },
+          "center-active"
+        )
+      );
+      const topBaseBottom = `calc(${cyStr} + ${gapWithThumbStr})`;
+      const topBaseHeight = `max(0px, calc(100% - (${cyStr} + ${gapWithThumbStr})))`;
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: topBaseBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: topBaseHeight,
+              width: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getVerticalRadius(false, innerR, outerR))
+          },
+          "top-base"
+        )
+      );
+    } else {
+      const bottomBaseHeight = `max(0px, calc(${cyStr} - ${gapWithThumbStr}))`;
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: bottomBaseHeight,
+              width: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getVerticalRadius(true, innerR, outerR))
+          },
+          "bottom-base"
+        )
+      );
+      const centerActiveBottom = `calc(${cyStr} + ${gapWithThumbStr})`;
+      const centerActiveHeight = `max(0px, calc(50% - ${halfCenterGap}px - (${cyStr} + ${gapWithThumbStr})))`;
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: centerActiveBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: centerActiveHeight,
+              width: size,
+              backgroundColor: activeColor,
+              opacity: disabled ? 0.38 : 1
+            }, allInnerRadius(innerR))
+          },
+          "center-active"
+        )
+      );
+      const topBaseBottom = `max(calc(50% + ${halfCenterGap}px), calc(${cyStr} + ${gapWithThumbStr}))`;
+      const topBaseHeight = `max(0px, calc(100% - max(calc(50% + ${halfCenterGap}px), calc(${cyStr} + ${gapWithThumbStr}))))`;
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: __spreadValues({
+              position: "absolute",
+              bottom: topBaseBottom,
+              left: "50%",
+              transform: "translateX(-50%)",
+              height: topBaseHeight,
+              width: size,
+              backgroundColor: inactiveColor,
+              opacity: disabled ? 0.38 : 1
+            }, getVerticalRadius(false, innerR, outerR))
+          },
+          "top-base"
+        )
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: trackRef,
+      className: cn(
+        "relative h-full",
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ),
+      style: { width: thumbHeight },
+      onPointerDown: onTrackPointerDown,
+      "aria-hidden": "true",
+      children: [
+        segments,
+        ticks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          Ticks,
+          {
+            ticks,
+            min,
+            max,
+            percent,
+            orientation,
+            disabled,
+            variant,
+            isCentered,
+            trackInset
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: resolvedLeadingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          InsetIcon,
+          {
+            icon: resolvedLeadingIcon,
+            isOnActiveSegment: leadingOnActive,
+            position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
+            orientation,
+            trackSize: size,
+            trackSizeToken: trackSize,
+            disabled,
+            variant,
+            prefersReduced
+          },
+          isAtMin ? "lead-min" : leadingOnActive ? "lead-active" : "lead-inactive"
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: resolvedTrailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          InsetIcon,
+          {
+            icon: resolvedTrailingIcon,
+            isOnActiveSegment: trailingOnActive,
+            position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
+            orientation,
+            trackSize: size,
+            trackSizeToken: trackSize,
+            disabled,
+            variant,
+            prefersReduced
+          },
+          isAtMax ? "trail-max" : trailingOnActive ? "trail-active" : "trail-inactive"
+        ) })
+      ]
+    }
+  );
+});
+var SliderComponent = React25__namespace.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    onValueChangeEnd,
+    min = 0,
+    max = 100,
+    step = 0,
+    orientation = "horizontal",
+    trackSize = "m",
+    trackShape = "md3",
+    variant = "primary",
+    isCentered = false,
+    disabled = false,
+    showValueIndicator = false,
+    showTicks = false,
+    insetIcon,
+    insetIconAtMin,
+    insetIconTrailing,
+    insetIconAtMax,
+    formatValue,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const isHorizontal = orientation === "horizontal";
+    const midpoint = min + (max - min) / 2;
+    const initialValue = defaultValue != null ? defaultValue : midpoint;
+    const [internalValue, setInternalValue] = React25__namespace.useState(initialValue);
+    const resolvedValue = controlledValue !== void 0 ? controlledValue : internalValue;
+    const { coerce, snap, toPercent, ticks } = useSliderMath({
+      min,
+      max,
+      step
+    });
+    const safeValue = snap(coerce(resolvedValue));
+    const percent = toPercent(safeValue);
+    const trackRef = React25__namespace.useRef(null);
+    const handleValueChange = React25__namespace.useCallback(
+      (newValue) => {
+        const clamped = snap(coerce(newValue));
+        if (controlledValue === void 0) {
+          setInternalValue(clamped);
+        }
+        onValueChange == null ? void 0 : onValueChange(clamped);
+      },
+      [coerce, controlledValue, onValueChange, snap]
+    );
+    const handleValueChangeEnd = React25__namespace.useCallback(
+      (newValue) => {
+        onValueChangeEnd == null ? void 0 : onValueChangeEnd(snap(coerce(newValue)));
+      },
+      [coerce, onValueChangeEnd, snap]
+    );
+    const handleTrackPointerDown = React25__namespace.useCallback(
+      (e) => {
+        if (disabled) return;
+        const trackEl = trackRef.current;
+        if (!trackEl) return;
+        const rect = trackEl.getBoundingClientRect();
+        let clickPercent;
+        const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
+        const trackInset = Math.min(SliderTokens.trackSizes[trackSize] / 2, insetLimit);
+        if (isHorizontal) {
+          const x = e.clientX - rect.left;
+          clickPercent = (x - trackInset) / (rect.width - trackInset * 2);
+        } else {
+          const y = rect.bottom - e.clientY;
+          clickPercent = (y - trackInset) / (rect.height - trackInset * 2);
+        }
+        const clamped = Math.max(0, Math.min(1, clickPercent));
+        const rawValue = min + clamped * (max - min);
+        const newValue = snap(coerce(rawValue));
+        handleValueChange(newValue);
+      },
+      [
+        coerce,
+        disabled,
+        handleValueChange,
+        isHorizontal,
+        max,
+        min,
+        snap,
+        trackSize
+      ]
+    );
+    const id = React25__namespace.useId();
+    const thumbId = `slider-thumb-${id}`;
+    const supportsInsetIcon = !isCentered && SliderTokens.trackSizes[trackSize] >= 40;
+    const hasAnyInsetIcon = !!(insetIcon || insetIconTrailing);
+    if (hasAnyInsetIcon && !supportsInsetIcon) {
+      console.warn(
+        "[Slider] insetIcon is only supported on track sizes >= 40dp (e.g. xl track sizes). See MD3 spec: https://m3.material.io/components/sliders/specs"
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex items-center",
+          isHorizontal ? "w-full flex-row" : "h-full flex-col",
+          disabled && "pointer-events-none",
+          className
+        ),
+        style: isHorizontal ? { minWidth: 0 } : { minHeight: 0 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SliderTrack,
+            {
+              percent,
+              trackSize,
+              trackShape,
+              orientation,
+              isCentered,
+              min,
+              max,
+              disabled,
+              variant,
+              trackRef,
+              onTrackPointerDown: handleTrackPointerDown,
+              ticks: showTicks ? ticks : [],
+              insetIcon: supportsInsetIcon ? insetIcon : void 0,
+              insetIconAtMin: supportsInsetIcon ? insetIconAtMin : void 0,
+              insetIconTrailing: supportsInsetIcon ? insetIconTrailing : void 0,
+              insetIconAtMax: supportsInsetIcon ? insetIconAtMax : void 0,
+              value: safeValue
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SliderThumb,
+            {
+              value: safeValue,
+              percent,
+              min,
+              max,
+              step,
+              disabled,
+              orientation,
+              trackSize,
+              variant,
+              showValueIndicator,
+              trackRef,
+              onValueChange: handleValueChange,
+              onValueChangeEnd: handleValueChangeEnd,
+              formatValue,
+              thumbId,
+              zIndex: 1,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+SliderComponent.displayName = "Slider";
+var Slider = React25__namespace.memo(SliderComponent);
 var DURATION_MAP = {
   short: 4e3,
   long: 7e3
@@ -9011,10 +10753,14 @@ exports.PlainTooltip = PlainTooltip;
 exports.ProgressIndicator = ProgressIndicator;
 exports.RadioButton = RadioButton;
 exports.RadioGroup = RadioGroup2;
+exports.RangeSlider = RangeSlider;
 exports.RichTooltip = RichTooltip;
 exports.Ripple = Ripple;
 exports.ScrollArea = ScrollArea;
 exports.ScrollAreaScrollbar = ScrollAreaScrollbar;
+exports.Slider = Slider;
+exports.SliderColors = SliderColors;
+exports.SliderTokens = SliderTokens;
 exports.Snackbar = Snackbar;
 exports.SnackbarHost = SnackbarHost;
 exports.SnackbarProvider = SnackbarProvider;