@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/dist/shared/{components-t5pk5nmc.js → components-wvp1m52g.js}

@@ -1,19 +1,18 @@
-"use client";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSizeVariant2
-} from "./components-h83az0bz.js";
+} from "./components-0sn7ypjw.js";
 import {
-  spring2
-} from "./components-3ey0hzpb.js";
-import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/inputs/slider/index.tsx
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
@@ -76,7 +75,7 @@ function ValueDisplay({
   isRange,
   isInteracting
 }) {
-  const shape = useShape2();
+  const shape = useShape();
   const [inputValue, setInputValue] = useState("");
   const inputRef = useRef(null);
   useEffect(() => {
@@ -181,16 +180,18 @@ function ValueDisplay({
     ]
   });
 }
-function TooltipValue({ value, formatValue, motionX, vertical = false }) {
-  const shape = useShape2();
+function TooltipValue({ value, formatValue, motionX }) {
+  const shape = useShape();
   const tooltipX = useTransform(motionX, (x) => x + THUMB_SIZE / 2);
-  const tooltipY = useTransform(motionX, (x) => -x);
   return /* @__PURE__ */ jsx(motion.div, {
-    className: cn2("absolute pointer-events-none z-20", vertical ? "translate-y-1/2" : "-translate-x-1/2"),
-    style: vertical ? { y: tooltipY, bottom: THUMB_SIZE / 2, left: `calc(50% + ${THUMB_SIZE}px)` } : { x: tooltipX, top: -16 },
-    initial: vertical ? { opacity: 0, x: -4 } : { opacity: 0, y: 4 },
-    animate: vertical ? { opacity: 1, x: 0 } : { opacity: 1, y: 0 },
-    exit: vertical ? { opacity: 0, x: -4, transition: spring2.fast.exit } : { opacity: 0, y: 4, transition: spring2.fast.exit },
+    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: spring2.fast.exit },
     transition: spring2.fast,
     children: /* @__PURE__ */ jsx("span", {
       className: cn2("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
@@ -207,7 +208,7 @@ var CompactSlider = forwardRef(({
   steps,
   showSteps = false,
   showValue = true,
-  valuePosition: valuePositionProp,
+  valuePosition = "left",
   formatValue = String,
   label,
   disabled = false,
@@ -218,20 +219,12 @@ var CompactSlider = forwardRef(({
   hideFill = false,
   thumbColor,
   thumbBorderColor,
-  orientation = "horizontal",
-  onValueCommit,
   className,
-  "aria-label": ariaLabel,
   ...props
 }, ref) => {
-  const vertical = orientation === "vertical";
-  const valuePosition = valuePositionProp ?? (vertical ? "top" : "left");
-  const onValueCommitRef = useRef(onValueCommit);
-  onValueCommitRef.current = onValueCommit;
-  const latestValue = useRef(value);
   const isRange = Array.isArray(value);
   const values = toRadixValue(value);
-  const shape = useShape2();
+  const shape = useShape();
   const stepsKey = steps ? steps.join(",") : "";
   const stepValues = useMemo(() => {
     if (!stepsKey)
@@ -277,31 +270,16 @@ var CompactSlider = forwardRef(({
   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 thumbY0 = useTransform(motionX0, (x) => -x);
-  const thumbY1 = useTransform(motionX1, (x) => -x);
-  const maskDir = vertical ? "to top" : "to right";
   const stepDotsMaskSingle = useTransform(motionX0, (x) => {
     const edge = x + THUMB_SIZE / 2;
-    return `linear-gradient(${maskDir}, transparent ${edge}px, black ${edge + 2}px)`;
+    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(${maskDir}, black ${left - 2}px, transparent ${left}px, transparent ${right}px, black ${right + 2}px)`;
+    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 measure = useCallback((clientX, clientY) => {
-    const trackEl = trackRef.current;
-    if (!trackEl)
-      return null;
-    const rect = trackEl.getBoundingClientRect();
-    const length = vertical ? trackEl.offsetHeight : trackEl.offsetWidth;
-    const visual = vertical ? rect.height : rect.width;
-    if (length <= 0 || visual <= 0)
-      return null;
-    const scale = visual / length;
-    return { length, pos: (vertical ? rect.bottom - clientY : clientX - rect.left) / scale };
-  }, [vertical]);
   const computeHoverPreview = useCallback((cursorX, trackWidth) => {
     const usable = trackWidth - THUMB_SIZE;
     const rawPx = cursorX - THUMB_SIZE / 2;
@@ -325,7 +303,7 @@ var CompactSlider = forwardRef(({
     const el = trackRef.current;
     if (!el || initialSyncDone.current)
       return;
-    const w = vertical ? el.offsetHeight : el.offsetWidth;
+    const w = el.offsetWidth;
     trackWidthRef.current = w;
     const px0 = valueToPixel(values[0], min, max, w);
     motionX0.set(px0);
@@ -341,7 +319,7 @@ var CompactSlider = forwardRef(({
     if (!el)
       return;
     const ro = new ResizeObserver(([entry]) => {
-      const w = vertical ? entry.contentRect.height : entry.contentRect.width;
+      const w = entry.contentRect.width;
       trackWidthRef.current = w;
       if (!dragging.current && initialSyncDone.current) {
         const v = valuesRef.current;
@@ -357,7 +335,7 @@ var CompactSlider = forwardRef(({
     });
     ro.observe(el);
     return () => ro.disconnect();
-  }, [isRange, vertical, motionX0, motionX1]);
+  }, [isRange, motionX0, motionX1]);
   const valuesKey = values.join(",");
   useEffect(() => {
     if (!initialSyncDone.current)
@@ -387,10 +365,8 @@ var CompactSlider = forwardRef(({
     if (isRange) {
       const newValues = [...values];
       newValues[thumbIndex] = newValue;
-      latestValue.current = newValues;
       onChange(newValues);
     } else {
-      latestValue.current = newValue;
       onChange(newValue);
     }
   }, [isRange, values, onChange]);
@@ -401,11 +377,15 @@ var CompactSlider = forwardRef(({
       return;
     e.preventDefault();
     e.stopPropagation();
-    const m = measure(e.clientX, e.clientY);
-    if (!m)
+    const trackEl = trackRef.current;
+    if (!trackEl)
+      return;
+    const trackRect = trackEl.getBoundingClientRect();
+    const layoutWidth = trackEl.offsetWidth;
+    if (layoutWidth <= 0 || trackRect.width <= 0)
       return;
-    const layoutWidth = m.length;
-    const localX = m.pos - THUMB_SIZE / 2;
+    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());
@@ -424,16 +404,20 @@ var CompactSlider = forwardRef(({
     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, measure]);
+  }, [disabled, isRange, min, max, step, stepValues, motionX0, motionX1, clampForRange, emitChange]);
   const handlePointerMove = useCallback((e) => {
     if (!dragging.current)
       return;
     e.stopPropagation();
-    const m = measure(e.clientX, e.clientY);
-    if (!m)
+    const trackEl = trackRef.current;
+    if (!trackEl)
+      return;
+    const trackRect = trackEl.getBoundingClientRect();
+    const layoutWidth = trackEl.offsetWidth;
+    if (layoutWidth <= 0 || trackRect.width <= 0)
       return;
-    const layoutWidth = m.length;
-    const localX = m.pos - THUMB_SIZE / 2;
+    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);
@@ -442,12 +426,11 @@ var CompactSlider = forwardRef(({
     motionX.set(finalPx);
     const finalValue = pixelToValue(finalPx, min, max, step, layoutWidth, stepValues);
     emitChange(activeDragThumb.current, finalValue);
-  }, [min, max, step, stepValues, motionX0, motionX1, clampForRange, emitChange, measure]);
+  }, [min, max, step, stepValues, motionX0, motionX1, clampForRange, emitChange]);
   const handlePointerUp = useCallback(() => {
     if (!dragging.current)
       return;
     dragging.current = false;
-    onValueCommitRef.current?.(latestValue.current);
     setIsPressed(false);
     setHoverPreview(null);
     const tw = trackWidthRef.current;
@@ -467,16 +450,11 @@ var CompactSlider = forwardRef(({
       onChange(mapped[0]);
     }
   }, [isRange, onChange, stepValues]);
-  const handleRadixCommit = useCallback((newValues) => {
-    const mapped = stepValues ? newValues.map((i) => stepValues[Math.round(i)]) : newValues;
-    onValueCommitRef.current?.(isRange ? mapped : mapped[0]);
-  }, [isRange, stepValues]);
   const handleStartEdit = useCallback((index) => {
     setEditingIndex(index);
   }, []);
   const handleCommitEdit = useCallback((index, v) => {
     emitChange(index, v);
-    onValueCommitRef.current?.(latestValue.current);
     setEditingIndex(null);
   }, [emitChange]);
   const handleCancelEdit = useCallback(() => {
@@ -492,12 +470,11 @@ var CompactSlider = forwardRef(({
   }) : [], [showSteps, min, max, step, stepValues]);
   const isInteracting = isHovered || isPressed;
   const thumbAriaLabel = (index) => {
-    const name = ariaLabel || label;
     if (!isRange)
-      return name;
-    if (!name)
+      return label;
+    if (!label)
       return index === 0 ? "Minimum" : "Maximum";
-    return index === 0 ? `${name} minimum` : `${name} maximum`;
+    return index === 0 ? `${label} minimum` : `${label} maximum`;
   };
   const valueDisplay = showValue && valuePosition !== "tooltip" && /* @__PURE__ */ jsx(ValueDisplay, {
     values,
@@ -518,16 +495,7 @@ var CompactSlider = forwardRef(({
     const motionX = index === 0 ? motionX0 : motionX1;
     return /* @__PURE__ */ jsxs(motion.span, {
       className: "flex items-center justify-center pointer-events-none",
-      style: vertical ? {
-        width: THUMB_SIZE,
-        height: THUMB_SIZE,
-        marginLeft: -THUMB_SIZE / 2,
-        y: index === 0 ? thumbY0 : thumbY1,
-        position: "absolute",
-        left: "50%",
-        bottom: 0,
-        zIndex: 10
-      } : {
+      style: {
         width: THUMB_SIZE,
         height: THUMB_SIZE,
         marginTop: -THUMB_SIZE / 2,
@@ -567,13 +535,13 @@ var CompactSlider = forwardRef(({
   };
   return /* @__PURE__ */ jsxs("div", {
     ref,
-    className: cn2("flex gap-0 select-none touch-none overflow-visible", vertical ? "h-40 w-fit items-center" : "flex-col w-full", valuePosition === "left" || valuePosition === "right" ? vertical ? "flex-row gap-2" : "flex-row items-center gap-2 mb-2" : "flex-col", vertical && (valuePosition === "top" || valuePosition === "bottom" || valuePosition === "tooltip") && "gap-2", disabled && "opacity-50 pointer-events-none", className),
+    className: cn2("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: cn2("relative overflow-visible", vertical ? "min-h-0 min-w-0" : "flex-1", vertical && (valuePosition === "left" || valuePosition === "right" ? "h-full" : "flex-1")),
-        style: vertical ? { width: THUMB_SIZE + 16 } : {
+        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
         },
@@ -585,10 +553,17 @@ var CompactSlider = forwardRef(({
         onMouseMove: (e) => {
           if (dragging.current)
             return;
-          const m = measure(e.clientX, e.clientY);
-          if (!m)
+          const trackEl = trackRef.current;
+          if (!trackEl)
             return;
-          computeHoverPreview(Math.max(0, Math.min(m.length, m.pos)), m.length);
+          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, {
@@ -596,28 +571,24 @@ var CompactSlider = forwardRef(({
               isInteracting && /* @__PURE__ */ jsx(TooltipValue, {
                 value: values[0],
                 formatValue,
-                motionX: motionX0,
-                vertical
+                motionX: motionX0
               }, "tooltip-0"),
               isInteracting && isRange && values[1] !== undefined && /* @__PURE__ */ jsx(TooltipValue, {
                 value: values[1],
                 formatValue,
-                motionX: motionX1,
-                vertical
+                motionX: motionX1
               }, "tooltip-1")
             ]
           }),
           /* @__PURE__ */ jsx(SliderPrimitive.Root, {
             value: stepValues ? values.map((v) => nearestStepIndex(v, stepValues)) : values,
             onValueChange: (v) => handleRadixChange(v),
-            onValueCommitted: (v) => handleRadixCommit(v),
             min: stepValues ? 0 : min,
             max: stepValues ? stepValues.length - 1 : max,
             step: stepValues ? 1 : step,
-            orientation,
             disabled,
             className: "absolute inset-0 opacity-0 pointer-events-none",
-            style: vertical ? { width: THUMB_SIZE } : { height: THUMB_SIZE },
+            style: { height: THUMB_SIZE },
             children: /* @__PURE__ */ jsxs(SliderPrimitive.Control, {
               className: "w-full h-full",
               children: [
@@ -632,7 +603,7 @@ var CompactSlider = forwardRef(({
                   className: "block outline-none",
                   style: { width: THUMB_SIZE, height: THUMB_SIZE },
                   onFocus: (e) => {
-                    if (e.target.matches(":focus-visible"))
+                    if (e.currentTarget.matches(":focus-visible"))
                       setFocusedThumb(0);
                   },
                   onBlur: () => setFocusedThumb((prev) => prev === 0 ? null : prev)
@@ -644,7 +615,7 @@ var CompactSlider = forwardRef(({
                   className: "block outline-none",
                   style: { width: THUMB_SIZE, height: THUMB_SIZE },
                   onFocus: (e) => {
-                    if (e.target.matches(":focus-visible"))
+                    if (e.currentTarget.matches(":focus-visible"))
                       setFocusedThumb(1);
                   },
                   onBlur: () => setFocusedThumb((prev) => prev === 1 ? null : prev)
@@ -654,16 +625,16 @@ var CompactSlider = forwardRef(({
           }),
           /* @__PURE__ */ jsxs("div", {
             ref: trackRef,
-            className: cn2("relative", vertical ? "h-full cursor-ns-resize px-2" : "w-full cursor-ew-resize py-2"),
-            style: vertical ? { width: THUMB_SIZE + 16, opacity: ready ? 1 : 0 } : { height: THUMB_SIZE + 16, opacity: ready ? 1 : 0 },
+            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: cn2("absolute", vertical ? "cursor-ns-resize" : "cursor-ew-resize"),
-                style: vertical ? { left: 0, right: 0, top: -8, bottom: -8 } : { left: -8, right: -8, top: 0, bottom: 0 },
+                className: "absolute cursor-ew-resize",
+                style: { left: -8, right: -8, top: 0, bottom: 0 },
                 onPointerDown: handlePointerDown,
                 onPointerMove: handlePointerMove,
                 onPointerUp: handlePointerUp,
@@ -671,12 +642,15 @@ var CompactSlider = forwardRef(({
               }),
               /* @__PURE__ */ jsx(AnimatePresence, {
                 children: hoverPreview && showHoverTooltip && !isPressed && valuePosition !== "tooltip" && /* @__PURE__ */ jsx(motion.div, {
-                  className: cn2("absolute pointer-events-none z-20", vertical ? "translate-y-1/2" : "-translate-x-1/2"),
-                  initial: vertical ? { opacity: 0, x: -4 } : { opacity: 0, y: 4 },
-                  animate: vertical ? { opacity: 1, x: 0 } : { opacity: 1, y: 0 },
-                  exit: vertical ? { opacity: 0, x: -4, transition: spring2.fast.exit } : { opacity: 0, y: 4, transition: spring2.fast.exit },
+                  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: spring2.fast.exit },
                   transition: spring2.fast,
-                  style: vertical ? { bottom: hoverPreview.cursorX, left: `calc(100% + 4px)` } : { left: hoverPreview.cursorX, top: -20 },
+                  style: {
+                    left: hoverPreview.cursorX,
+                    top: -20
+                  },
                   children: /* @__PURE__ */ jsx("span", {
                     className: cn2("text-caption text-background tabular-nums whitespace-nowrap bg-foreground px-2 py-1", shape.bg, "weight-medium"),
                     children: formatValue(hoverPreview.snappedValue)
@@ -686,22 +660,27 @@ var CompactSlider = forwardRef(({
               /* @__PURE__ */ jsxs(motion.div, {
                 className: cn2("absolute bg-transparent border border-border overflow-hidden rounded-full", trackClassName),
                 initial: false,
-                animate: vertical ? { width: TRACK_BG_HEIGHT, left: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2 } : { height: TRACK_BG_HEIGHT, top: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2 },
+                animate: {
+                  height: TRACK_BG_HEIGHT,
+                  top: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2
+                },
                 transition: spring2.fast,
                 style: {
-                  ...vertical ? { top: TRACK_INSET, bottom: TRACK_INSET } : { left: TRACK_INSET, right: TRACK_INSET },
+                  left: TRACK_INSET,
+                  right: TRACK_INSET,
                   ...trackStyle
                 },
                 children: [
                   !hideFill && /* @__PURE__ */ jsx(motion.div, {
-                    className: cn2("absolute bg-selected/50 dark:bg-accent/40", vertical ? "w-full" : "h-full", fillClassName),
+                    className: cn2("absolute h-full bg-selected/50 dark:bg-accent/40", fillClassName),
                     style: {
-                      ...vertical ? { bottom: fillLeft, height: fillWidth } : { left: fillLeft, width: fillWidth },
+                      left: fillLeft,
+                      width: fillWidth,
                       ...fillStyle
                     }
                   }),
                   /* @__PURE__ */ jsx(motion.div, {
-                    className: cn2("absolute bg-accent/40 pointer-events-none z-[2]", vertical ? "w-full" : "h-full"),
+                    className: "absolute h-full bg-accent/40 pointer-events-none z-[2]",
                     initial: false,
                     animate: {
                       opacity: hoverPreview && !isPressed ? 1 : 0
@@ -710,35 +689,26 @@ var CompactSlider = forwardRef(({
                       opacity: { duration: 0.15 }
                     },
                     style: {
-                      ...vertical ? {
-                        bottom: hoverPreview ? hoverPreview.left - TRACK_INSET : 0,
-                        height: hoverPreview ? hoverPreview.width : 0
-                      } : {
-                        left: hoverPreview ? hoverPreview.left - TRACK_INSET : 0,
-                        width: hoverPreview ? hoverPreview.width : 0
-                      },
-                      borderRadius: hoverPreview && hoverPreview.cursorX > hoverPreview.left ? vertical ? "9999px 9999px 0 0" : "0 9999px 9999px 0" : vertical ? "0 0 9999px 9999px" : "9999px 0 0 9999px"
+                      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: cn2("absolute pointer-events-none", vertical ? "top-0 bottom-0" : "left-0 right-0"),
+                className: "absolute left-0 right-0 pointer-events-none",
                 style: {
-                  ...vertical ? { left: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2, width: TRACK_BG_HEIGHT } : { top: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2, height: TRACK_BG_HEIGHT },
+                  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: {
-                    ...vertical ? {
-                      bottom: `calc(${THUMB_SIZE / 2}px + ${percent} * (100% - ${THUMB_SIZE}px))`,
-                      left: "50%"
-                    } : {
-                      left: `calc(${THUMB_SIZE / 2}px + ${percent} * (100% - ${THUMB_SIZE}px))`,
-                      top: "50%"
-                    },
+                    left: `calc(${THUMB_SIZE / 2}px + ${percent} * (100% - ${THUMB_SIZE}px))`,
+                    top: "50%",
                     width: 0,
                     height: 0
                   },
@@ -774,15 +744,10 @@ var ComfortableSlider = forwardRef(({
   label,
   formatValue = String,
   disabled = false,
-  onValueCommit,
   className,
-  "aria-label": ariaLabel,
   ...props
 }, ref) => {
   const containerRef = useRef(null);
-  const onValueCommitRef = useRef(onValueCommit);
-  onValueCommitRef.current = onValueCommit;
-  const latestValue = useRef(value);
   const dragging = useRef(false);
   const handleDragging = useRef(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -791,7 +756,7 @@ var ComfortableSlider = forwardRef(({
   const [hoverPreview, setHoverPreview] = useState(null);
   const [showHoverTooltip, setShowHoverTooltip] = useState(false);
   const hoverDelayRef = useRef(null);
-  const shape = useShape2();
+  const shape = useShape();
   useEffect(() => {
     if (isHovered) {
       hoverDelayRef.current = setTimeout(() => setShowHoverTooltip(true), 100);
@@ -896,7 +861,6 @@ var ComfortableSlider = forwardRef(({
     dragging.current = true;
     setIsPressed(true);
     const newVal = getValueFromX(e.clientX);
-    latestValue.current = newVal;
     onChange(newVal);
     const newPercent = Math.max(0, Math.min(1, (newVal - min) / (max - min)));
     animate(fillPercent, newPercent, spring2.fast);
@@ -907,7 +871,6 @@ var ComfortableSlider = forwardRef(({
     if (!dragging.current)
       return;
     const newVal = getValueFromX(e.clientX);
-    latestValue.current = newVal;
     onChange(newVal);
     const newPercent = Math.max(0, Math.min(1, (newVal - min) / (max - min)));
     if (variant === "scrubber") {
@@ -918,8 +881,6 @@ var ComfortableSlider = forwardRef(({
     animate(zeroOffset, newVal === min ? zeroTarget : 0, spring2.fast);
   }, [getValueFromX, onChange, variant, fillPercent, zeroOffset, zeroTarget, min, max]);
   const handlePointerUp = useCallback(() => {
-    if (dragging.current)
-      onValueCommitRef.current?.(latestValue.current);
     dragging.current = false;
     setIsPressed(false);
     setHoverPreview(null);
@@ -934,7 +895,6 @@ var ComfortableSlider = forwardRef(({
     handleDragging.current = true;
     setIsPressed(true);
     const newVal = getValueFromX(e.clientX);
-    latestValue.current = newVal;
     onChange(newVal);
     fillPercent.set(Math.max(0, Math.min(1, (newVal - min) / (max - min))));
     animate(zeroOffset, newVal === min ? zeroTarget : 0, spring2.fast);
@@ -944,14 +904,11 @@ var ComfortableSlider = forwardRef(({
     if (!handleDragging.current)
       return;
     const newVal = getValueFromX(e.clientX);
-    latestValue.current = newVal;
     onChange(newVal);
     fillPercent.set(Math.max(0, Math.min(1, (newVal - min) / (max - min))));
     animate(zeroOffset, newVal === min ? zeroTarget : 0, spring2.fast);
   }, [getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max]);
   const handleResizePointerUp = useCallback(() => {
-    if (handleDragging.current)
-      onValueCommitRef.current?.(latestValue.current);
     handleDragging.current = false;
     setIsPressed(false);
     setHoverPreview(null);
@@ -1020,7 +977,6 @@ var ComfortableSlider = forwardRef(({
           /* @__PURE__ */ jsx(SliderPrimitive.Root, {
             value: [value],
             onValueChange: (v) => handleRadixChange(v),
-            onValueCommitted: (v) => onValueCommitRef.current?.(v[0]),
             min,
             max,
             step,
@@ -1035,10 +991,10 @@ var ComfortableSlider = forwardRef(({
                 }),
                 /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
                   index: 0,
-                  "aria-label": ariaLabel || label,
+                  "aria-label": label,
                   className: "block outline-none",
                   onFocus: (e) => {
-                    if (e.target.matches(":focus-visible"))
+                    if (e.currentTarget.matches(":focus-visible"))
                       setIsFocused(true);
                   },
                   onBlur: () => setIsFocused(false)
@@ -1191,10 +1147,10 @@ var ComfortableSlider = forwardRef(({
 });
 ComfortableSlider.displayName = "SliderComfortable";
 var Slider2 = forwardRef(({ size, variant = "pips", value: valueProp, defaultValue, onChange: onChangeProp, ...rest }, ref) => {
-  const [value, onChange] = useControllableState2(valueProp, defaultValue ?? (rest.steps && rest.steps.length > 0 ? Math.min(...rest.steps) : rest.min ?? 0), onChangeProp);
+  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 = useSizeVariant2(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 || props.orientation === "vertical";
+  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,
@@ -1210,7 +1166,6 @@ var Slider2 = forwardRef(({ size, variant = "pips", value: valueProp, defaultVal
     label,
     formatValue,
     disabled,
-    onValueCommit,
     steps: _steps,
     showSteps: _showSteps,
     showValue: _showValue,
@@ -1222,7 +1177,6 @@ var Slider2 = forwardRef(({ size, variant = "pips", value: valueProp, defaultVal
     hideFill: _hideFill,
     thumbColor: _thumbColor,
     thumbBorderColor: _thumbBorderColor,
-    orientation: _orientation,
     ...html
   } = props;
   return /* @__PURE__ */ jsx(ComfortableSlider, {
@@ -1236,7 +1190,6 @@ var Slider2 = forwardRef(({ size, variant = "pips", value: valueProp, defaultVal
     label,
     formatValue,
     disabled,
-    onValueCommit,
     ...html
   });
 });