@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-8hk9ve3r.js

@@ -0,0 +1,1200 @@
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSizeVariant
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/slider/index.tsx
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { AnimatePresence, animate, motion, useMotionValue, useTransform } from "motion/react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var THUMB_SIZE = 20;
+var THUMB_SIZE_REST = 16;
+var TRACK_BG_HEIGHT = 18;
+var DOT_SIZE = 4;
+var PIP_SIZE = 5;
+var TRACK_INSET = (THUMB_SIZE - TRACK_BG_HEIGHT) / 2;
+function valueToPixel(v, min, max, trackWidth) {
+  if (max === min)
+    return 0;
+  const usable = trackWidth - THUMB_SIZE;
+  return (v - min) / (max - min) * usable;
+}
+function nearestStepIndex(v, steps) {
+  let idx = 0;
+  for (let i = 1;i < steps.length; i++) {
+    if (Math.abs(steps[i] - v) < Math.abs(steps[idx] - v))
+      idx = i;
+  }
+  return idx;
+}
+function pixelToValue(px, min, max, step, trackWidth, stepValues = null) {
+  const usable = trackWidth - THUMB_SIZE;
+  if (usable <= 0)
+    return min;
+  const raw = px / usable * (max - min) + min;
+  if (stepValues)
+    return stepValues[nearestStepIndex(raw, stepValues)];
+  const snapped = Math.round((raw - min) / step) * step + min;
+  return Math.max(min, Math.min(max, snapped));
+}
+function toRadixValue(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function ValueDisplay({
+  values,
+  editingIndex,
+  onStartEdit,
+  onCommitEdit,
+  onCancelEdit,
+  min,
+  max,
+  step,
+  stepValues,
+  formatValue,
+  label,
+  isRange,
+  isInteracting
+}) {
+  const shape = useShape();
+  const [inputValue, setInputValue] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (editingIndex !== null) {
+      setInputValue(String(values[editingIndex]));
+      requestAnimationFrame(() => inputRef.current?.select());
+    }
+  }, [editingIndex]);
+  const commitEdit = useCallback((index) => {
+    const parsed = parseFloat(inputValue);
+    if (!isNaN(parsed)) {
+      const clamped = Math.max(min, Math.min(max, parsed));
+      const snapped = stepValues ? stepValues[nearestStepIndex(clamped, stepValues)] : Math.round((clamped - min) / step) * step + min;
+      onCommitEdit(index, snapped);
+    } else {
+      onCancelEdit();
+    }
+  }, [inputValue, min, max, step, stepValues, onCommitEdit, onCancelEdit]);
+  const renderValue = (index) => {
+    if (editingIndex === index) {
+      return /* @__PURE__ */ jsxs("span", {
+        className: "inline-grid text-body",
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            className: "col-start-1 row-start-1 invisible weight-medium",
+            "aria-hidden": "true",
+            children: [
+              label ? `${label}: ` : "",
+              formatValue(max)
+            ]
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: "col-start-1 row-start-1 flex items-center gap-1",
+            children: [
+              label && /* @__PURE__ */ jsxs("span", {
+                className: "text-muted-foreground",
+                children: [
+                  label,
+                  ":"
+                ]
+              }),
+              /* @__PURE__ */ jsx("input", {
+                ref: inputRef,
+                type: "number",
+                value: inputValue,
+                min,
+                max,
+                step: stepValues ? "any" : step,
+                onChange: (e) => setInputValue(e.target.value),
+                onBlur: () => commitEdit(index),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter")
+                    commitEdit(index);
+                  if (e.key === "Escape")
+                    onCancelEdit();
+                },
+                "aria-label": `Edit slider value${isRange ? index === 0 ? " (start)" : " (end)" : ""}`,
+                className: cn("w-[5ch] bg-transparent text-foreground outline-none border-b border-border text-center", shape.input, "weight-medium")
+              })
+            ]
+          })
+        ]
+      });
+    }
+    return /* @__PURE__ */ jsx("span", {
+      className: "cursor-text select-none",
+      onClick: () => onStartEdit(index),
+      children: formatValue(values[index])
+    });
+  };
+  const widestValue = isRange ? `${label ? `${label}: ` : ""}${formatValue(max)} — ${formatValue(max)}` : `${label ? `${label}: ` : ""}${formatValue(max)}`;
+  return /* @__PURE__ */ jsxs("span", {
+    className: cn("inline-grid shrink-0 text-body leading-none text-muted-foreground transition-[font-variation-settings] duration-100", "tabular-nums", isInteracting ? "weight-medium" : "weight-normal"),
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "col-start-1 row-start-1 invisible whitespace-nowrap weight-medium",
+        "aria-hidden": "true",
+        children: widestValue
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: "col-start-1 row-start-1 whitespace-nowrap",
+        children: [
+          label && editingIndex === null && /* @__PURE__ */ jsxs("span", {
+            className: "text-muted-foreground",
+            children: [
+              label,
+              ": "
+            ]
+          }),
+          isRange ? /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              renderValue(0),
+              /* @__PURE__ */ jsx("span", {
+                className: "mx-1 text-muted-foreground/50",
+                children: "—"
+              }),
+              renderValue(1)
+            ]
+          }) : renderValue(0)
+        ]
+      })
+    ]
+  });
+}
+function TooltipValue({ value, formatValue, motionX }) {
+  const shape = useShape();
+  const tooltipX = useTransform(motionX, (x) => x + THUMB_SIZE / 2);
+  return /* @__PURE__ */ jsx(motion.div, {
+    className: "absolute -translate-x-1/2 pointer-events-none z-20",
+    style: {
+      x: tooltipX,
+      top: -16
+    },
+    initial: { opacity: 0, y: 4 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 4, transition: spring.fast.exit },
+    transition: spring.fast,
+    children: /* @__PURE__ */ jsx("span", {
+      className: cn("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
+      children: formatValue(value)
+    })
+  });
+}
+var CompactSlider = forwardRef(({
+  value,
+  onChange,
+  min: minProp = 0,
+  max: maxProp = 100,
+  step = 1,
+  steps,
+  showSteps = false,
+  showValue = true,
+  valuePosition = "left",
+  formatValue = String,
+  label,
+  disabled = false,
+  trackClassName,
+  trackStyle,
+  fillClassName,
+  fillStyle,
+  hideFill = false,
+  thumbColor,
+  thumbBorderColor,
+  className,
+  ...props
+}, ref) => {
+  const isRange = Array.isArray(value);
+  const values = toRadixValue(value);
+  const shape = useShape();
+  const stepsKey = steps ? steps.join(",") : "";
+  const stepValues = useMemo(() => {
+    if (!stepsKey)
+      return null;
+    const parsed = Array.from(new Set(stepsKey.split(",").map(Number))).sort((a, b) => a - b);
+    return parsed.length > 1 ? parsed : null;
+  }, [stepsKey]);
+  const min = stepValues ? stepValues[0] : minProp;
+  const max = stepValues ? stepValues[stepValues.length - 1] : maxProp;
+  const trackRef = useRef(null);
+  const trackWidthRef = useRef(0);
+  const dragging = useRef(false);
+  const activeDragThumb = useRef(0);
+  const valuesRef = useRef(values);
+  const minRef = useRef(min);
+  const maxRef = useRef(max);
+  valuesRef.current = values;
+  minRef.current = min;
+  maxRef.current = max;
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [hoverPreview, setHoverPreview] = useState(null);
+  const [focusedThumb, setFocusedThumb] = useState(null);
+  const [showHoverTooltip, setShowHoverTooltip] = useState(false);
+  const hoverDelayRef = useRef(null);
+  useEffect(() => {
+    if (isHovered) {
+      hoverDelayRef.current = setTimeout(() => setShowHoverTooltip(true), 100);
+    } else {
+      if (hoverDelayRef.current)
+        clearTimeout(hoverDelayRef.current);
+      setShowHoverTooltip(false);
+    }
+    return () => {
+      if (hoverDelayRef.current)
+        clearTimeout(hoverDelayRef.current);
+    };
+  }, [isHovered]);
+  const motionX0 = useMotionValue(0);
+  const motionX1 = useMotionValue(0);
+  const fillLeft = useTransform(motionX0, (x) => isRange ? x + THUMB_SIZE / 2 - TRACK_INSET : 0);
+  const fillWidthSingle = useTransform(motionX0, (x) => x + THUMB_SIZE / 2 - TRACK_INSET);
+  const fillWidthRange = useTransform([motionX0, motionX1], ([x0, x1]) => x1 - x0);
+  const fillWidth = isRange ? fillWidthRange : fillWidthSingle;
+  const stepDotsMaskSingle = useTransform(motionX0, (x) => {
+    const edge = x + THUMB_SIZE / 2;
+    return `linear-gradient(to right, transparent ${edge}px, black ${edge + 2}px)`;
+  });
+  const stepDotsMaskRange = useTransform([motionX0, motionX1], ([x0, x1]) => {
+    const left = x0 + THUMB_SIZE / 2;
+    const right = x1 + THUMB_SIZE / 2;
+    return `linear-gradient(to right, black ${left - 2}px, transparent ${left}px, transparent ${right}px, black ${right + 2}px)`;
+  });
+  const stepDotsMask = isRange ? stepDotsMaskRange : stepDotsMaskSingle;
+  const computeHoverPreview = useCallback((cursorX, trackWidth) => {
+    const usable = trackWidth - THUMB_SIZE;
+    const rawPx = cursorX - THUMB_SIZE / 2;
+    const clampedPx = Math.max(0, Math.min(usable, rawPx));
+    const rawVal = usable > 0 ? clampedPx / usable * (max - min) + min : min;
+    const snappedVal = stepValues ? stepValues[nearestStepIndex(rawVal, stepValues)] : Math.max(min, Math.min(max, Math.round((rawVal - min) / step) * step + min));
+    const snappedPercent = max === min ? 0 : (snappedVal - min) / (max - min);
+    const snappedX = THUMB_SIZE / 2 + snappedPercent * usable;
+    const c0 = motionX0.get() + THUMB_SIZE / 2;
+    const c1 = motionX1.get() + THUMB_SIZE / 2;
+    const nearestIdx = isRange ? Math.abs(snappedX - c0) <= Math.abs(snappedX - c1) ? 0 : 1 : 0;
+    const nearest = nearestIdx === 0 ? c0 : c1;
+    const edgeX = snappedVal === min ? 0 : snappedVal === max ? trackWidth : snappedX;
+    const left = Math.min(nearest, edgeX);
+    const width = Math.abs(edgeX - nearest);
+    setHoverPreview({ left, width, snappedValue: snappedVal, cursorX: snappedX });
+  }, [min, max, step, stepValues, isRange, motionX0, motionX1]);
+  const initialSyncDone = useRef(false);
+  const [ready, setReady] = useState(false);
+  useLayoutEffect(() => {
+    const el = trackRef.current;
+    if (!el || initialSyncDone.current)
+      return;
+    const w = el.offsetWidth;
+    trackWidthRef.current = w;
+    const px0 = valueToPixel(values[0], min, max, w);
+    motionX0.set(px0);
+    if (isRange && values[1] !== undefined) {
+      const px1 = valueToPixel(values[1], min, max, w);
+      motionX1.set(px1);
+    }
+    initialSyncDone.current = true;
+    setReady(true);
+  }, []);
+  useEffect(() => {
+    const el = trackRef.current;
+    if (!el)
+      return;
+    const ro = new ResizeObserver(([entry]) => {
+      const w = entry.contentRect.width;
+      trackWidthRef.current = w;
+      if (!dragging.current && initialSyncDone.current) {
+        const v = valuesRef.current;
+        const mn = minRef.current;
+        const mx = maxRef.current;
+        const px0 = valueToPixel(v[0], mn, mx, w);
+        animate(motionX0, px0, spring.moderate);
+        if (isRange && v[1] !== undefined) {
+          const px1 = valueToPixel(v[1], mn, mx, w);
+          animate(motionX1, px1, spring.moderate);
+        }
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [isRange, motionX0, motionX1]);
+  const valuesKey = values.join(",");
+  useEffect(() => {
+    if (!initialSyncDone.current)
+      return;
+    if (dragging.current)
+      return;
+    const tw = trackWidthRef.current;
+    if (tw <= 0)
+      return;
+    const v = valuesRef.current;
+    const px0 = valueToPixel(v[0], min, max, tw);
+    animate(motionX0, px0, spring.moderate);
+    if (isRange && v[1] !== undefined) {
+      const px1 = valueToPixel(v[1], min, max, tw);
+      animate(motionX1, px1, spring.moderate);
+    }
+  }, [valuesKey, min, max, isRange, motionX0, motionX1]);
+  const clampForRange = useCallback((px, thumbIndex) => {
+    if (!isRange)
+      return px;
+    if (thumbIndex === 0) {
+      return Math.min(px, motionX1.get() - THUMB_SIZE * 0.5);
+    }
+    return Math.max(px, motionX0.get() + THUMB_SIZE * 0.5);
+  }, [isRange, motionX0, motionX1]);
+  const emitChange = useCallback((thumbIndex, newValue) => {
+    if (isRange) {
+      const newValues = [...values];
+      newValues[thumbIndex] = newValue;
+      onChange(newValues);
+    } else {
+      onChange(newValue);
+    }
+  }, [isRange, values, onChange]);
+  const handlePointerDown = useCallback((e) => {
+    if (disabled)
+      return;
+    if (e.pointerType === "mouse" && e.button !== 0)
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    const trackEl = trackRef.current;
+    if (!trackEl)
+      return;
+    const trackRect = trackEl.getBoundingClientRect();
+    const layoutWidth = trackEl.offsetWidth;
+    if (layoutWidth <= 0 || trackRect.width <= 0)
+      return;
+    const scale = trackRect.width / layoutWidth;
+    const localX = (e.clientX - trackRect.left) / scale - THUMB_SIZE / 2;
+    const clamped = Math.max(0, Math.min(layoutWidth - THUMB_SIZE, localX));
+    if (isRange) {
+      const dist0 = Math.abs(clamped - motionX0.get());
+      const dist1 = Math.abs(clamped - motionX1.get());
+      activeDragThumb.current = dist0 <= dist1 ? 0 : 1;
+    } else {
+      activeDragThumb.current = 0;
+    }
+    dragging.current = true;
+    setIsPressed(true);
+    const motionX = activeDragThumb.current === 0 ? motionX0 : motionX1;
+    const snappedValue = pixelToValue(clamped, min, max, step, layoutWidth, stepValues);
+    const snappedPx = valueToPixel(snappedValue, min, max, layoutWidth);
+    const finalPx = clampForRange(snappedPx, activeDragThumb.current);
+    animate(motionX, finalPx, spring.moderate);
+    const finalValue = pixelToValue(finalPx, min, max, step, layoutWidth, stepValues);
+    emitChange(activeDragThumb.current, finalValue);
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [disabled, isRange, min, max, step, stepValues, motionX0, motionX1, clampForRange, emitChange]);
+  const handlePointerMove = useCallback((e) => {
+    if (!dragging.current)
+      return;
+    e.stopPropagation();
+    const trackEl = trackRef.current;
+    if (!trackEl)
+      return;
+    const trackRect = trackEl.getBoundingClientRect();
+    const layoutWidth = trackEl.offsetWidth;
+    if (layoutWidth <= 0 || trackRect.width <= 0)
+      return;
+    const scale = trackRect.width / layoutWidth;
+    const localX = (e.clientX - trackRect.left) / scale - THUMB_SIZE / 2;
+    const clamped = Math.max(0, Math.min(layoutWidth - THUMB_SIZE, localX));
+    const motionX = activeDragThumb.current === 0 ? motionX0 : motionX1;
+    const snappedValue = pixelToValue(clamped, min, max, step, layoutWidth, stepValues);
+    const snappedPx = valueToPixel(snappedValue, min, max, layoutWidth);
+    const finalPx = clampForRange(snappedPx, activeDragThumb.current);
+    motionX.set(finalPx);
+    const finalValue = pixelToValue(finalPx, min, max, step, layoutWidth, stepValues);
+    emitChange(activeDragThumb.current, finalValue);
+  }, [min, max, step, stepValues, motionX0, motionX1, clampForRange, emitChange]);
+  const handlePointerUp = useCallback(() => {
+    if (!dragging.current)
+      return;
+    dragging.current = false;
+    setIsPressed(false);
+    setHoverPreview(null);
+    const tw = trackWidthRef.current;
+    const motionX = activeDragThumb.current === 0 ? motionX0 : motionX1;
+    const currentPx = motionX.get();
+    const snapped = pixelToValue(currentPx, min, max, step, tw, stepValues);
+    const snappedPx = valueToPixel(snapped, min, max, tw);
+    animate(motionX, snappedPx, spring.moderate);
+  }, [min, max, step, stepValues, motionX0, motionX1]);
+  const handleRadixChange = useCallback((newValues) => {
+    if (dragging.current)
+      return;
+    const mapped = stepValues ? newValues.map((i) => stepValues[Math.round(i)]) : newValues;
+    if (isRange) {
+      onChange(mapped);
+    } else {
+      onChange(mapped[0]);
+    }
+  }, [isRange, onChange, stepValues]);
+  const handleStartEdit = useCallback((index) => {
+    setEditingIndex(index);
+  }, []);
+  const handleCommitEdit = useCallback((index, v) => {
+    emitChange(index, v);
+    setEditingIndex(null);
+  }, [emitChange]);
+  const handleCancelEdit = useCallback(() => {
+    setEditingIndex(null);
+  }, []);
+  const stepDots = useMemo(() => showSteps ? stepValues ? stepValues.map((v) => ({
+    value: v,
+    percent: max === min ? 0 : (v - min) / (max - min)
+  })) : Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => {
+    const v = min + i * step;
+    const percent = (v - min) / (max - min);
+    return { value: v, percent };
+  }) : [], [showSteps, min, max, step, stepValues]);
+  const isInteracting = isHovered || isPressed;
+  const thumbAriaLabel = (index) => {
+    if (!isRange)
+      return label;
+    if (!label)
+      return index === 0 ? "Minimum" : "Maximum";
+    return index === 0 ? `${label} minimum` : `${label} maximum`;
+  };
+  const valueDisplay = showValue && valuePosition !== "tooltip" && /* @__PURE__ */ jsx(ValueDisplay, {
+    values,
+    editingIndex,
+    onStartEdit: handleStartEdit,
+    onCommitEdit: handleCommitEdit,
+    onCancelEdit: handleCancelEdit,
+    min,
+    max,
+    step,
+    stepValues,
+    formatValue,
+    label,
+    isRange,
+    isInteracting
+  });
+  const renderVisualThumb = (index) => {
+    const motionX = index === 0 ? motionX0 : motionX1;
+    return /* @__PURE__ */ jsxs(motion.span, {
+      className: "flex items-center justify-center pointer-events-none",
+      style: {
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+        marginTop: -THUMB_SIZE / 2,
+        x: motionX,
+        position: "absolute",
+        top: "50%",
+        left: 0,
+        zIndex: 10
+      },
+      initial: false,
+      children: [
+        /* @__PURE__ */ jsx(motion.span, {
+          className: cn("block rounded-full shadow-thumb", !thumbColor && "bg-thumb"),
+          initial: false,
+          animate: {
+            width: THUMB_SIZE_REST,
+            height: THUMB_SIZE_REST
+          },
+          transition: spring.fast,
+          style: {
+            backgroundColor: thumbColor,
+            border: thumbBorderColor ? `1px solid ${thumbBorderColor}` : undefined
+          }
+        }),
+        /* @__PURE__ */ jsx(motion.span, {
+          className: "absolute rounded-full border border-focus-ring pointer-events-none",
+          initial: false,
+          animate: {
+            opacity: focusedThumb === index ? 1 : 0,
+            width: THUMB_SIZE + 4,
+            height: THUMB_SIZE + 4
+          },
+          transition: spring.fast
+        })
+      ]
+    }, `visual-thumb-${index}`);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cn("flex flex-col gap-0 w-full select-none touch-none overflow-visible", valuePosition === "left" || valuePosition === "right" ? "flex-row items-center gap-2 mb-2" : "flex-col", disabled && "opacity-50 pointer-events-none", className),
+    ...props,
+    children: [
+      (valuePosition === "top" || valuePosition === "left") && valueDisplay,
+      /* @__PURE__ */ jsxs("div", {
+        className: "relative flex-1 overflow-visible",
+        style: {
+          height: valuePosition === "left" || valuePosition === "right" ? THUMB_SIZE + 16 : THUMB_SIZE + (valuePosition === "tooltip" ? 16 : 0),
+          paddingTop: valuePosition === "tooltip" ? 16 : 0
+        },
+        onPointerEnter: () => setIsHovered(true),
+        onPointerLeave: () => {
+          setIsHovered(false);
+          setHoverPreview(null);
+        },
+        onMouseMove: (e) => {
+          if (dragging.current)
+            return;
+          const trackEl = trackRef.current;
+          if (!trackEl)
+            return;
+          const trackRect = trackEl.getBoundingClientRect();
+          const layoutWidth = trackEl.offsetWidth;
+          if (layoutWidth <= 0 || trackRect.width <= 0)
+            return;
+          const scale = trackRect.width / layoutWidth;
+          const layoutX = (e.clientX - trackRect.left) / scale;
+          const clamped = Math.max(0, Math.min(layoutWidth, layoutX));
+          computeHoverPreview(clamped, layoutWidth);
+        },
+        children: [
+          showValue && valuePosition === "tooltip" && /* @__PURE__ */ jsxs(AnimatePresence, {
+            children: [
+              isInteracting && /* @__PURE__ */ jsx(TooltipValue, {
+                value: values[0],
+                formatValue,
+                motionX: motionX0
+              }, "tooltip-0"),
+              isInteracting && isRange && values[1] !== undefined && /* @__PURE__ */ jsx(TooltipValue, {
+                value: values[1],
+                formatValue,
+                motionX: motionX1
+              }, "tooltip-1")
+            ]
+          }),
+          /* @__PURE__ */ jsx(SliderPrimitive.Root, {
+            value: stepValues ? values.map((v) => nearestStepIndex(v, stepValues)) : values,
+            onValueChange: (v) => handleRadixChange(v),
+            min: stepValues ? 0 : min,
+            max: stepValues ? stepValues.length - 1 : max,
+            step: stepValues ? 1 : step,
+            disabled,
+            className: "absolute inset-0 opacity-0 pointer-events-none",
+            style: { height: THUMB_SIZE },
+            children: /* @__PURE__ */ jsxs(SliderPrimitive.Control, {
+              className: "w-full h-full",
+              children: [
+                /* @__PURE__ */ jsx(SliderPrimitive.Track, {
+                  className: "w-full h-full",
+                  children: /* @__PURE__ */ jsx(SliderPrimitive.Indicator, {})
+                }),
+                /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
+                  index: 0,
+                  "aria-label": thumbAriaLabel(0),
+                  getAriaValueText: stepValues ? () => formatValue(values[0]) : undefined,
+                  className: "block outline-none",
+                  style: { width: THUMB_SIZE, height: THUMB_SIZE },
+                  onFocus: (e) => {
+                    if (e.currentTarget.matches(":focus-visible"))
+                      setFocusedThumb(0);
+                  },
+                  onBlur: () => setFocusedThumb((prev) => prev === 0 ? null : prev)
+                }),
+                isRange && /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
+                  index: 1,
+                  "aria-label": thumbAriaLabel(1),
+                  getAriaValueText: stepValues ? () => formatValue(values[1]) : undefined,
+                  className: "block outline-none",
+                  style: { width: THUMB_SIZE, height: THUMB_SIZE },
+                  onFocus: (e) => {
+                    if (e.currentTarget.matches(":focus-visible"))
+                      setFocusedThumb(1);
+                  },
+                  onBlur: () => setFocusedThumb((prev) => prev === 1 ? null : prev)
+                })
+              ]
+            })
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            ref: trackRef,
+            className: "relative w-full cursor-ew-resize py-2",
+            style: { height: THUMB_SIZE + 16, opacity: ready ? 1 : 0 },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "absolute cursor-ew-resize",
+                style: { left: -8, right: -8, top: 0, bottom: 0 },
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                onPointerCancel: handlePointerUp
+              }),
+              /* @__PURE__ */ jsx(AnimatePresence, {
+                children: hoverPreview && showHoverTooltip && !isPressed && valuePosition !== "tooltip" && /* @__PURE__ */ jsx(motion.div, {
+                  className: "absolute -translate-x-1/2 pointer-events-none z-20",
+                  initial: { opacity: 0, y: 4 },
+                  animate: { opacity: 1, y: 0 },
+                  exit: { opacity: 0, y: 4, transition: spring.fast.exit },
+                  transition: spring.fast,
+                  style: {
+                    left: hoverPreview.cursorX,
+                    top: -20
+                  },
+                  children: /* @__PURE__ */ jsx("span", {
+                    className: cn("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
+                    children: formatValue(hoverPreview.snappedValue)
+                  })
+                }, "hover-tooltip")
+              }),
+              /* @__PURE__ */ jsxs(motion.div, {
+                className: cn("absolute bg-transparent border border-border overflow-hidden rounded-full", trackClassName),
+                initial: false,
+                animate: {
+                  height: TRACK_BG_HEIGHT,
+                  top: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2
+                },
+                transition: spring.fast,
+                style: {
+                  left: TRACK_INSET,
+                  right: TRACK_INSET,
+                  ...trackStyle
+                },
+                children: [
+                  !hideFill && /* @__PURE__ */ jsx(motion.div, {
+                    className: cn("absolute h-full bg-selected/50 dark:bg-accent/40", fillClassName),
+                    style: {
+                      left: fillLeft,
+                      width: fillWidth,
+                      ...fillStyle
+                    }
+                  }),
+                  /* @__PURE__ */ jsx(motion.div, {
+                    className: "absolute h-full bg-accent/40 pointer-events-none z-[2]",
+                    initial: false,
+                    animate: {
+                      opacity: hoverPreview && !isPressed ? 1 : 0
+                    },
+                    transition: {
+                      opacity: { duration: 0.15 }
+                    },
+                    style: {
+                      left: hoverPreview ? hoverPreview.left - TRACK_INSET : 0,
+                      width: hoverPreview ? hoverPreview.width : 0,
+                      borderRadius: hoverPreview && hoverPreview.cursorX > hoverPreview.left ? "0 9999px 9999px 0" : "9999px 0 0 9999px"
+                    }
+                  })
+                ]
+              }),
+              stepDots.length > 0 && /* @__PURE__ */ jsx(motion.div, {
+                className: "absolute left-0 right-0 pointer-events-none",
+                style: {
+                  top: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2,
+                  height: TRACK_BG_HEIGHT,
+                  WebkitMaskImage: stepDotsMask,
+                  maskImage: stepDotsMask
+                },
+                children: stepDots.map(({ value: v, percent }) => /* @__PURE__ */ jsx("div", {
+                  className: "absolute pointer-events-none flex items-center justify-center",
+                  style: {
+                    left: `calc(${THUMB_SIZE / 2}px + ${percent} * (100% - ${THUMB_SIZE}px))`,
+                    top: "50%",
+                    width: 0,
+                    height: 0
+                  },
+                  children: /* @__PURE__ */ jsx(motion.div, {
+                    className: "rounded-full flex-shrink-0 bg-muted-foreground opacity-30",
+                    initial: false,
+                    animate: {
+                      width: isHovered ? DOT_SIZE * 1.25 : DOT_SIZE,
+                      height: isHovered ? DOT_SIZE * 1.25 : DOT_SIZE
+                    },
+                    transition: spring.moderate
+                  })
+                }, v))
+              }),
+              renderVisualThumb(0),
+              isRange && renderVisualThumb(1)
+            ]
+          })
+        ]
+      }),
+      (valuePosition === "bottom" || valuePosition === "right") && valueDisplay
+    ]
+  });
+});
+CompactSlider.displayName = "SliderCompact";
+var ComfortableSlider = forwardRef(({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  variant = "pips",
+  label,
+  formatValue = String,
+  disabled = false,
+  className,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const dragging = useRef(false);
+  const handleDragging = useRef(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [hoverPreview, setHoverPreview] = useState(null);
+  const [showHoverTooltip, setShowHoverTooltip] = useState(false);
+  const hoverDelayRef = useRef(null);
+  const shape = useShape();
+  useEffect(() => {
+    if (isHovered) {
+      hoverDelayRef.current = setTimeout(() => setShowHoverTooltip(true), 100);
+    } else {
+      if (hoverDelayRef.current)
+        clearTimeout(hoverDelayRef.current);
+      setShowHoverTooltip(false);
+    }
+    return () => {
+      if (hoverDelayRef.current)
+        clearTimeout(hoverDelayRef.current);
+    };
+  }, [isHovered]);
+  const mergedRef = useCallback((el) => {
+    containerRef.current = el;
+    if (typeof ref === "function")
+      ref(el);
+    else if (ref)
+      ref.current = el;
+  }, [ref]);
+  const pipSteps = useMemo(() => Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => min + i * step), [min, max, step]);
+  const pipCount = pipSteps.length;
+  const fillPercent = useMotionValue(max === min ? 0 : Math.max(0, Math.min(1, (value - min) / (max - min))));
+  const zeroTarget = variant === "pips" ? 8 : 17;
+  const zeroOffset = useMotionValue(value === min ? zeroTarget : 0);
+  const fillWidthStyle = useTransform(fillPercent, (p) => `${p * 100}%`);
+  const handleLeftStyle = useTransform([fillPercent, zeroOffset], ([p, zo]) => `calc(${p * 100}% - 8px + ${zo}px)`);
+  const handleLineLeftStyle = useTransform([fillPercent, zeroOffset], ([p, zo]) => `calc(${p * 100}% - 9px + ${zo}px)`);
+  const pipsFillWidthStyle = useTransform([fillPercent, zeroOffset], ([p, zo]) => `calc(${p * 100}% + ${20 - 20 * p - zo * 2.5}px)`);
+  const pipsHandleLineLeftStyle = useTransform(fillPercent, (p) => `calc(${p * 100}% + ${11 - 24 * p}px)`);
+  const pipsMaskStyle = useTransform([fillPercent, zeroOffset], ([p, zo]) => {
+    const offset = 20 - 20 * p - zo * 2.5;
+    return `linear-gradient(to right, transparent calc(${p * 100}% + ${offset}px), black calc(${p * 100}% + ${offset + 2}px))`;
+  });
+  const computeHoverPreview = useCallback((clientX) => {
+    const el = containerRef.current;
+    if (!el)
+      return;
+    const rect = el.getBoundingClientRect();
+    const w = el.clientWidth;
+    if (w <= 0 || rect.width <= 0)
+      return;
+    const scale = rect.width / el.offsetWidth;
+    const borderLeftLayout = (el.offsetWidth - w) / 2;
+    const visualX = clientX - rect.left;
+    const layoutX = visualX / scale - borderLeftLayout;
+    const clamped = Math.max(0, Math.min(w, layoutX));
+    let snappedVal;
+    if (variant === "pips") {
+      if (pipCount <= 1)
+        return;
+      const index = Math.max(0, Math.min(pipCount - 1, Math.round(clamped / w * (pipCount - 1))));
+      snappedVal = pipSteps[index];
+    } else {
+      const raw = min + clamped / w * (max - min);
+      snappedVal = Math.max(min, Math.min(max, Math.round((raw - min) / step) * step + min));
+    }
+    const snappedPercent = max === min ? 0 : (snappedVal - min) / (max - min);
+    const snappedX = snappedPercent * w;
+    const currentPercent = fillPercent.get();
+    let handleX;
+    if (variant === "pips") {
+      const zo = zeroOffset.get();
+      handleX = currentPercent * w + (20 - 20 * currentPercent - zo * 2.5);
+    } else {
+      handleX = currentPercent * w;
+    }
+    const edgeX = snappedVal === min ? 0 : snappedVal === max ? w : snappedX;
+    const left = Math.min(handleX, edgeX);
+    const width = Math.abs(edgeX - handleX);
+    setHoverPreview({ left, width, snappedValue: snappedVal, cursorX: snappedX });
+  }, [variant, pipSteps, pipCount, min, max, step, fillPercent, zeroOffset]);
+  useEffect(() => {
+    if (dragging.current || handleDragging.current)
+      return;
+    const percent = max === min ? 0 : Math.max(0, Math.min(1, (value - min) / (max - min)));
+    animate(fillPercent, percent, spring.fast);
+    animate(zeroOffset, value === min ? zeroTarget : 0, spring.fast);
+  }, [value, min, max, variant, fillPercent, zeroOffset, zeroTarget]);
+  const getValueFromX = useCallback((clientX) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect)
+      return min;
+    const x = clientX - rect.left;
+    const clamped = Math.max(0, Math.min(rect.width, x));
+    if (variant === "pips") {
+      if (pipCount <= 1)
+        return min;
+      const index = Math.max(0, Math.min(pipCount - 1, Math.round(clamped / rect.width * (pipCount - 1))));
+      return pipSteps[index];
+    }
+    const raw = min + clamped / rect.width * (max - min);
+    const snapped = Math.round((raw - min) / step) * step + min;
+    return Math.max(min, Math.min(max, snapped));
+  }, [variant, pipSteps, pipCount, min, max, step]);
+  const handlePointerDown = useCallback((e) => {
+    if (disabled)
+      return;
+    if (e.pointerType === "mouse" && e.button !== 0)
+      return;
+    e.preventDefault();
+    dragging.current = true;
+    setIsPressed(true);
+    const newVal = getValueFromX(e.clientX);
+    onChange(newVal);
+    const newPercent = Math.max(0, Math.min(1, (newVal - min) / (max - min)));
+    animate(fillPercent, newPercent, spring.fast);
+    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast);
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [disabled, getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max]);
+  const handlePointerMove = useCallback((e) => {
+    if (!dragging.current)
+      return;
+    const newVal = getValueFromX(e.clientX);
+    onChange(newVal);
+    const newPercent = Math.max(0, Math.min(1, (newVal - min) / (max - min)));
+    if (variant === "scrubber") {
+      fillPercent.set(newPercent);
+    } else {
+      animate(fillPercent, newPercent, spring.fast);
+    }
+    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast);
+  }, [getValueFromX, onChange, variant, fillPercent, zeroOffset, zeroTarget, min, max]);
+  const handlePointerUp = useCallback(() => {
+    dragging.current = false;
+    setIsPressed(false);
+    setHoverPreview(null);
+  }, []);
+  const handleResizePointerDown = useCallback((e) => {
+    if (disabled)
+      return;
+    if (e.pointerType === "mouse" && e.button !== 0)
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    handleDragging.current = true;
+    setIsPressed(true);
+    const newVal = getValueFromX(e.clientX);
+    onChange(newVal);
+    fillPercent.set(Math.max(0, Math.min(1, (newVal - min) / (max - min))));
+    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast);
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [disabled, getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max]);
+  const handleResizePointerMove = useCallback((e) => {
+    if (!handleDragging.current)
+      return;
+    const newVal = getValueFromX(e.clientX);
+    onChange(newVal);
+    fillPercent.set(Math.max(0, Math.min(1, (newVal - min) / (max - min))));
+    animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast);
+  }, [getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max]);
+  const handleResizePointerUp = useCallback(() => {
+    handleDragging.current = false;
+    setIsPressed(false);
+    setHoverPreview(null);
+  }, []);
+  const handleRadixChange = useCallback((newValues) => {
+    onChange(newValues[0]);
+  }, [onChange]);
+  const isActive = isHovered || isFocused;
+  return /* @__PURE__ */ jsxs("div", {
+    className: "relative w-full touch-none",
+    onPointerEnter: () => {
+      if (!disabled)
+        setIsHovered(true);
+    },
+    onPointerLeave: () => {
+      if (!disabled) {
+        setIsHovered(false);
+        setHoverPreview(null);
+      }
+    },
+    onMouseMove: (e) => {
+      if (disabled || dragging.current || handleDragging.current)
+        return;
+      computeHoverPreview(e.clientX);
+    },
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "absolute cursor-ew-resize",
+        style: { left: -8, right: -8, top: 0, bottom: 0 },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        children: hoverPreview && showHoverTooltip && !isPressed && /* @__PURE__ */ jsx(motion.div, {
+          className: "absolute -translate-x-1/2 pointer-events-none z-20",
+          initial: { opacity: 0, y: 4 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: 4, transition: spring.fast.exit },
+          transition: spring.fast,
+          style: {
+            left: hoverPreview.cursorX,
+            top: -30
+          },
+          children: /* @__PURE__ */ jsx("span", {
+            className: cn("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
+            children: formatValue(hoverPreview.snappedValue)
+          })
+        }, "hover-tooltip")
+      }),
+      /* @__PURE__ */ jsxs(motion.div, {
+        ref: mergedRef,
+        className: cn("relative w-full h-8 select-none touch-none border border-border overflow-hidden outline-offset-2", variant === "scrubber" ? "flex items-center gap-3 px-4 cursor-ew-resize" : "cursor-ew-resize", shape.bg, disabled && "opacity-50 pointer-events-none", className),
+        initial: false,
+        animate: {
+          outline: isFocused ? "1px solid var(--focus-ring)" : "1px solid transparent"
+        },
+        transition: spring.fast,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Root, {
+            value: [value],
+            onValueChange: (v) => handleRadixChange(v),
+            min,
+            max,
+            step,
+            disabled,
+            className: "absolute inset-0 opacity-0 pointer-events-none [&_*]:pointer-events-none",
+            children: /* @__PURE__ */ jsxs(SliderPrimitive.Control, {
+              className: "w-full h-full",
+              children: [
+                /* @__PURE__ */ jsx(SliderPrimitive.Track, {
+                  className: "w-full h-full",
+                  children: /* @__PURE__ */ jsx(SliderPrimitive.Indicator, {})
+                }),
+                /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
+                  index: 0,
+                  "aria-label": label,
+                  className: "block outline-none",
+                  onFocus: (e) => {
+                    if (e.currentTarget.matches(":focus-visible"))
+                      setIsFocused(true);
+                  },
+                  onBlur: () => setIsFocused(false)
+                })
+              ]
+            })
+          }),
+          /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute inset-y-0 bg-accent/40 pointer-events-none z-[3]",
+            initial: false,
+            animate: {
+              opacity: hoverPreview && !isPressed ? 1 : 0
+            },
+            transition: { opacity: { duration: 0.15 } },
+            style: {
+              left: hoverPreview ? hoverPreview.left : 0,
+              width: hoverPreview ? hoverPreview.width : 0
+            }
+          }),
+          variant === "pips" && /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute inset-0 flex justify-between items-center px-3 pointer-events-none z-[1]",
+            style: { WebkitMaskImage: pipsMaskStyle, maskImage: pipsMaskStyle },
+            children: pipSteps.map((pipValue) => {
+              const isActivePip = pipValue === value;
+              return /* @__PURE__ */ jsx("div", {
+                className: "relative flex items-center justify-center",
+                style: { width: PIP_SIZE, height: PIP_SIZE },
+                children: /* @__PURE__ */ jsx(motion.div, {
+                  className: "rounded-full",
+                  initial: false,
+                  animate: {
+                    backgroundColor: isActivePip ? "var(--foreground)" : "var(--muted-foreground)",
+                    opacity: isActivePip ? 1 : 0.3
+                  },
+                  transition: spring.fast,
+                  style: { width: PIP_SIZE, height: PIP_SIZE }
+                })
+              }, pipValue);
+            })
+          }),
+          variant === "pips" && /* @__PURE__ */ jsxs("div", {
+            className: "absolute inset-0 flex items-center px-2 z-[2] pointer-events-none",
+            "aria-hidden": true,
+            children: [
+              label && /* @__PURE__ */ jsx("span", {
+                className: "text-body px-2 bg-background text-transparent select-none",
+                children: label
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "text-body tabular-nums ml-auto px-2 bg-background text-transparent select-none",
+                style: { minWidth: `${String(formatValue(max)).length}ch` },
+                children: formatValue(value)
+              })
+            ]
+          }),
+          variant === "pips" && /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute left-0 top-0 bottom-0 bg-active pointer-events-none z-[3]",
+            style: {
+              width: pipsFillWidthStyle
+            }
+          }),
+          variant === "pips" && /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute rounded-full pointer-events-none z-[3]",
+            initial: false,
+            animate: {
+              top: isActive ? 7 : 8,
+              bottom: isActive ? 7 : 8,
+              backgroundColor: isFocused ? "var(--foreground)" : isHovered ? "color-mix(in srgb, var(--foreground) 50%, transparent)" : "color-mix(in srgb, var(--foreground) 25%, transparent)"
+            },
+            transition: spring.fast,
+            style: {
+              left: pipsHandleLineLeftStyle,
+              width: 2
+            }
+          }),
+          variant === "pips" && /* @__PURE__ */ jsxs("div", {
+            className: "absolute inset-0 flex items-center px-2 z-[4] pointer-events-none",
+            children: [
+              label && /* @__PURE__ */ jsx(motion.span, {
+                className: "text-body px-2",
+                initial: false,
+                animate: { color: isActive ? "var(--foreground)" : "var(--muted-foreground)" },
+                transition: spring.fast,
+                children: label
+              }),
+              /* @__PURE__ */ jsx(motion.span, {
+                className: "text-body tabular-nums ml-auto px-2",
+                initial: false,
+                animate: { color: isActive ? "var(--foreground)" : "var(--muted-foreground)" },
+                transition: spring.fast,
+                style: { minWidth: `${String(formatValue(max)).length}ch`, textAlign: "right" },
+                children: formatValue(value)
+              })
+            ]
+          }),
+          variant === "scrubber" && /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute left-0 top-0 bottom-0 bg-active pointer-events-none",
+            style: {
+              width: fillWidthStyle
+            }
+          }),
+          variant === "scrubber" && /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute rounded-full pointer-events-none z-10",
+            initial: false,
+            animate: {
+              top: isActive ? 7 : 8,
+              bottom: isActive ? 7 : 8,
+              backgroundColor: isFocused ? "var(--foreground)" : isHovered ? "color-mix(in srgb, var(--foreground) 50%, transparent)" : "color-mix(in srgb, var(--foreground) 25%, transparent)"
+            },
+            transition: spring.fast,
+            style: {
+              left: handleLineLeftStyle,
+              width: 2
+            }
+          }),
+          variant === "scrubber" && label && /* @__PURE__ */ jsx(motion.span, {
+            className: "text-body shrink-0 z-10",
+            initial: false,
+            animate: { color: isActive ? "var(--foreground)" : "var(--muted-foreground)" },
+            transition: spring.fast,
+            children: label
+          }),
+          variant === "scrubber" && /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "flex-1"
+              }),
+              /* @__PURE__ */ jsx(motion.span, {
+                className: "text-body shrink-0 tabular-nums text-right z-10",
+                initial: false,
+                animate: { color: isActive ? "var(--foreground)" : "var(--muted-foreground)" },
+                transition: spring.fast,
+                style: { minWidth: `${String(formatValue(max)).length}ch` },
+                children: formatValue(value)
+              })
+            ]
+          }),
+          variant === "scrubber" && /* @__PURE__ */ jsx(motion.div, {
+            className: "absolute top-0 bottom-0 w-2 cursor-ew-resize z-20",
+            style: { left: handleLeftStyle },
+            onPointerDown: handleResizePointerDown,
+            onPointerMove: handleResizePointerMove,
+            onPointerUp: handleResizePointerUp,
+            onPointerCancel: handleResizePointerUp
+          })
+        ]
+      })
+    ]
+  });
+});
+ComfortableSlider.displayName = "SliderComfortable";
+var Slider = forwardRef(({ size, variant = "pips", value: valueProp, defaultValue, onChange: onChangeProp, ...rest }, ref) => {
+  const [value, onChange] = useControllableState(valueProp, defaultValue ?? (rest.steps && rest.steps.length > 0 ? Math.min(...rest.steps) : rest.min ?? 0), onChangeProp);
+  const props = { ...rest, value, onChange };
+  const resolved = useSizeVariant(size);
+  const needsCompactEngine = Array.isArray(props.value) || props.steps !== undefined || props.showSteps !== undefined || props.showValue !== undefined || props.valuePosition !== undefined || props.trackClassName !== undefined || props.trackStyle !== undefined || props.fillClassName !== undefined || props.fillStyle !== undefined || props.hideFill !== undefined || props.thumbColor !== undefined || props.thumbBorderColor !== undefined;
+  if (resolved === "compact" || needsCompactEngine) {
+    return /* @__PURE__ */ jsx(CompactSlider, {
+      ref,
+      ...props
+    });
+  }
+  const {
+    value: singleValue,
+    onChange: singleOnChange,
+    min,
+    max,
+    step,
+    label,
+    formatValue,
+    disabled,
+    steps: _steps,
+    showSteps: _showSteps,
+    showValue: _showValue,
+    valuePosition: _valuePosition,
+    trackClassName: _trackClassName,
+    trackStyle: _trackStyle,
+    fillClassName: _fillClassName,
+    fillStyle: _fillStyle,
+    hideFill: _hideFill,
+    thumbColor: _thumbColor,
+    thumbBorderColor: _thumbBorderColor,
+    ...html
+  } = props;
+  return /* @__PURE__ */ jsx(ComfortableSlider, {
+    ref,
+    value: singleValue,
+    onChange: singleOnChange,
+    min,
+    max,
+    step,
+    variant,
+    label,
+    formatValue,
+    disabled,
+    ...html
+  });
+});
+Slider.displayName = "Slider";
+var SliderComfortable = ComfortableSlider;
+var slider_default = Slider;
+
+export { Slider, SliderComfortable, slider_default };