@bug-on/md3-react 2.0.0 → 2.0.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import * as React25 from 'react';
-import { createContext, forwardRef, useState, useEffect, useRef, useCallback, useContext, useMemo, useId, cloneElement, useLayoutEffect, createElement } from 'react';
+import { createContext, forwardRef, useMemo, useState, useEffect, useRef, useCallback, useContext, useId, cloneElement, useLayoutEffect, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { argbFromHex, themeFromSourceColor, hexFromArgb } from '@material/material-color-utilities';
 import { clsx } from 'clsx';
@@ -212,7 +212,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);
   }
@@ -5491,6 +5491,1748 @@ var RadioGroupComponent = React25.forwardRef(
 );
 RadioGroupComponent.displayName = "RadioGroup";
 var RadioGroup2 = React25.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 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.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__ */ jsx(AnimatePresence, { children: visible && /* @__PURE__ */ jsx(
+    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.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 = useReducedMotion()) != null ? _a : false;
+  const [isDragging, setIsDragging] = React25.useState(false);
+  const [isHovered, setIsHovered] = React25.useState(false);
+  const [isFocused, setIsFocused] = React25.useState(false);
+  const pointerIdRef = React25.useRef(null);
+  const thumbRef = React25.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.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.useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      pointerIdRef.current = e.pointerId;
+      setIsDragging(true);
+    },
+    [disabled]
+  );
+  const handlePointerMove = React25.useCallback(
+    (e) => {
+      if (!isDragging || e.pointerId !== pointerIdRef.current) return;
+      const newValue = getDeltaFromPointer(e.nativeEvent);
+      onValueChange(newValue);
+    },
+    [isDragging, getDeltaFromPointer, onValueChange]
+  );
+  const handlePointerUp = React25.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.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__ */ 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__ */ jsx(
+          ValueIndicator,
+          {
+            value,
+            visible: showIndicator,
+            orientation,
+            formatValue,
+            prefersReduced,
+            trackSize
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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.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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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.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.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.useState("end");
+    const trackRef = React25.useRef(null);
+    const minGap = step > 0 ? step : (max - min) / 1e3;
+    const handleStartChange = React25.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.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.useCallback(
+      (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([v, endValue]),
+      [endValue, onValueChangeEnd]
+    );
+    const handleEndChangeEnd = React25.useCallback(
+      (v) => onValueChangeEnd == null ? void 0 : onValueChangeEnd([startValue, v]),
+      [onValueChangeEnd, startValue]
+    );
+    const handleTrackPointerDown = React25.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.useId();
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ 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__ */ jsx(
+            RangeTrack,
+            {
+              startPercent,
+              endPercent,
+              trackSize,
+              trackShape,
+              orientation,
+              variant,
+              disabled,
+              ticks: showTicks ? ticks : [],
+              min,
+              max,
+              trackRef,
+              onTrackPointerDown: handleTrackPointerDown
+            }
+          ),
+          /* @__PURE__ */ 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__ */ 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.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.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__ */ jsx(
+    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__ */ jsx(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__ */ jsx("div", { style, "aria-hidden": "true" }, tick);
+  }) });
+}
+var SliderTrack = React25.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 = useReducedMotion()) != null ? _a : false;
+  const [trackWidth, setTrackWidth] = React25.useState(0);
+  React25.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.useRef(1 - percent <= iconThreshold);
+  const leadingActiveRef = React25.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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(
+            Ticks,
+            {
+              ticks,
+              min,
+              max,
+              percent,
+              orientation,
+              disabled,
+              variant,
+              isCentered,
+              trackInset
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: resolvedLeadingIcon && /* @__PURE__ */ 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__ */ jsx(AnimatePresence, { mode: "wait", children: resolvedTrailingIcon && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(
+          Ticks,
+          {
+            ticks,
+            min,
+            max,
+            percent,
+            orientation,
+            disabled,
+            variant,
+            isCentered,
+            trackInset
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: resolvedLeadingIcon && /* @__PURE__ */ 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__ */ jsx(AnimatePresence, { mode: "wait", children: resolvedTrailingIcon && /* @__PURE__ */ 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.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.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.useRef(null);
+    const handleValueChange = React25.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.useCallback(
+      (newValue) => {
+        onValueChangeEnd == null ? void 0 : onValueChangeEnd(snap(coerce(newValue)));
+      },
+      [coerce, onValueChangeEnd, snap]
+    );
+    const handleTrackPointerDown = React25.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.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__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ 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__ */ 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__ */ 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.memo(SliderComponent);
 var DURATION_MAP = {
   short: 4e3,
   long: 7e3
@@ -8924,6 +10666,6 @@ function TypographyProvider({
   return /* @__PURE__ */ jsx(TypographyContext.Provider, { value, children });
 }
 
-export { Badge, BadgedBox, Button, ButtonGroup, Card, Checkbox, Chip, CodeBlock, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FAB, FABMenu, FABMenuItem, FABPosition, Icon, IconButton, LoadingIndicator, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MaterialSymbolsPreconnect, NavigationRail, NavigationRailItem, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup2 as RadioGroup, RichTooltip, Ripple, ScrollArea, ScrollAreaScrollbar, Snackbar, SnackbarHost, SnackbarProvider, Switch, SwitchColors, SwitchTokens, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, TextField, ToggleFAB, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, applyTheme, buildWavePath, cn, generateM3Theme, useRipple as useDOMRipple, useMediaQuery, useRipple2 as useRipple, useRippleState, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
+export { Badge, BadgedBox, Button, ButtonGroup, Card, Checkbox, Chip, CodeBlock, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FAB, FABMenu, FABMenuItem, FABPosition, Icon, IconButton, LoadingIndicator, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MaterialSymbolsPreconnect, NavigationRail, NavigationRailItem, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup2 as RadioGroup, RangeSlider, RichTooltip, Ripple, ScrollArea, ScrollAreaScrollbar, Slider, SliderColors, SliderTokens, Snackbar, SnackbarHost, SnackbarProvider, Switch, SwitchColors, SwitchTokens, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, TextField, ToggleFAB, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, applyTheme, buildWavePath, cn, generateM3Theme, useRipple as useDOMRipple, useMediaQuery, useRipple2 as useRipple, useRippleState, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map