@godxjp/ui 22.0.0 → 23.1.0

package/dist/components/data-entry/slider.js

@@ -1,33 +1,472 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
+import {
+  Label as AriaLabel,
+  Slider as AriaSlider,
+  SliderStateContext,
+  SliderThumb as AriaSliderThumb,
+  SliderTrack as AriaSliderTrack,
+  useLocale
+} from "react-aria-components";
 import { cn } from "../../lib/utils.js";
+const PAGE_STEPS = 10;
+const GRID_PRECISION = 10;
+const PERCENT_PRECISION = 4;
+const OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function clamp(value, low, high) {
+  return Math.min(high, Math.max(low, value));
+}
+function decimalPlaces(value) {
+  if (!Number.isFinite(value)) return 0;
+  const text = String(value);
+  const exponent = /e-(\d+)$/.exec(text);
+  if (exponent) return Number(exponent[1]);
+  const dot = text.indexOf(".");
+  return dot === -1 ? 0 : text.length - dot - 1;
+}
+function snapToStep(value, min, max, step) {
+  const places = Math.max(decimalPlaces(step), decimalPlaces(min));
+  const lastOnGrid = min + Math.floor(Number(((max - min) / step).toFixed(GRID_PRECISION))) * step;
+  const snapped = Math.round((value - min) / step) * step + min;
+  return Number(clamp(snapped, min, Math.max(min, lastOnGrid)).toFixed(places));
+}
 function fraction(value, min, max, reverse) {
   if (max === min) return 0;
   const raw = (value - min) / (max - min);
   return reverse ? 1 - raw : raw;
 }
+function isMarkObject(mark) {
+  return typeof mark === "object" && mark !== null && !React.isValidElement(mark) && !Array.isArray(mark) && !(Symbol.iterator in mark);
+}
 function markEntries(marks) {
   if (!marks) return [];
-  return Object.entries(marks).map(([key, label]) => [Number(key), label]).filter(([at]) => Number.isFinite(at)).sort((a, b) => a[0] - b[0]);
+  return Object.entries(marks).map(([key, mark]) => [Number(key), mark]).filter(([at]) => Number.isFinite(at)).sort((a, b) => a[0] - b[0]);
 }
 function dotStops(min, max, step) {
   if (!Number.isFinite(step) || step <= 0) return [];
   const stops = [];
-  for (let at = min; at <= max; at += step) stops.push(at);
+  for (let at = min; at <= max; at += step) stops.push(snapToStep(at, min, max, step));
   return stops;
 }
+function markStops(min, max, marks) {
+  const inside = marks.map(([at]) => at).filter((at) => at >= min && at <= max);
+  return [.../* @__PURE__ */ new Set([min, ...inside, max])].sort((a, b) => a - b);
+}
+function greatestCommonDivisor(a, b) {
+  return b === 0 ? a : greatestCommonDivisor(b, a % b);
+}
+function gridThrough(stops) {
+  const places = Math.max(...stops.map(decimalPlaces));
+  const scale = 10 ** places;
+  const offsets = stops.map((at) => Math.round((at - stops[0]) * scale));
+  const divisor = offsets.reduce((acc, offset) => greatestCommonDivisor(acc, Math.abs(offset)), 0);
+  return divisor > 0 ? divisor / scale : 1;
+}
+function nearestStop(stops, value) {
+  return stops.reduce((best, at) => Math.abs(at - value) < Math.abs(best - value) ? at : best);
+}
+function stepThroughStops(stops, from, sign, count) {
+  const ahead = sign > 0 ? stops.filter((at) => at > from) : stops.filter((at) => at < from).reverse();
+  if (ahead.length === 0) return from;
+  return ahead[Math.min(count, ahead.length) - 1];
+}
+function toList(value) {
+  if (value === void 0) return void 0;
+  return Array.isArray(value) ? [...value] : [value];
+}
 function tooltipContent(tooltip, value) {
   if (!tooltip || tooltip === true) return value;
   if (tooltip.formatter === null) return null;
   return tooltip.formatter ? tooltip.formatter(value) : value;
 }
-const Slider = React.forwardRef(
-  ({
+function sameList(a, b) {
+  return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+function placeThumb(model, list, index, proposed, mode, count = 1) {
+  const { min, max, stops, step, gap, places } = model;
+  let target;
+  if (stops) {
+    target = mode === "nearest" ? nearestStop(stops, clamp(proposed, min, max)) : stepThroughStops(stops, list[index], mode, count);
+  } else {
+    target = snapToStep(clamp(proposed, min, max), min, max, step);
+  }
+  const low = index > 0 ? list[index - 1] + gap : min;
+  const high = index < list.length - 1 ? list[index + 1] - gap : max;
+  if (low > high) return list;
+  const held = Number(clamp(target, low, high).toFixed(places));
+  return list.map((value, at) => at === index ? held : value);
+}
+function shiftAll(model, start, delta) {
+  const { min, max, step, places } = model;
+  const lastOnGrid = snapToStep(max, min, max, step);
+  const rounded = Math.round(delta / step) * step;
+  const moved = clamp(rounded, min - start[0], lastOnGrid - start[start.length - 1]);
+  return start.map((value) => Number((value + moved).toFixed(places)));
+}
+function closestThumb(list, point, disabledAt) {
+  let best = null;
+  let bestDistance = Infinity;
+  list.forEach((value, index) => {
+    if (disabledAt(index)) return;
+    const distance = Math.abs(value - point);
+    if (distance < bestDistance || distance === bestDistance && point > value) {
+      best = index;
+      bestDistance = distance;
+    }
+  });
+  return best;
+}
+function arrowSign(key, axis, direction, reversed) {
+  if (axis === "vertical") {
+    if (key === "ArrowUp") return reversed ? -1 : 1;
+    if (key === "ArrowDown") return reversed ? 1 : -1;
+    return key === "ArrowRight" ? 1 : -1;
+  }
+  if (key === "ArrowUp") return 1;
+  if (key === "ArrowDown") return -1;
+  const rightIncreases = direction === "ltr" !== reversed;
+  return key === "ArrowRight" === rightIncreases ? 1 : -1;
+}
+const ARROWS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
+function percent(share) {
+  return `${Number((share * 100).toFixed(PERCENT_PRECISION))}%`;
+}
+function offsetStyle(model, value, name) {
+  return {
+    [name]: percent(fraction(value, model.min, model.max, model.reversed))
+  };
+}
+function SliderTooltip({
+  placement,
+  adjust,
+  open,
+  direction,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [flipped, setFlipped] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const anchor = ref.current;
+    const thumb = anchor?.parentElement;
+    if (!anchor || !thumb || !adjust) {
+      setFlipped(false);
+      return;
+    }
+    const rect = thumb.getBoundingClientRect();
+    const vertical = placement === "top" || placement === "bottom";
+    const need = vertical ? anchor.offsetHeight : anchor.offsetWidth;
+    const inlineStartRoom = direction === "rtl" ? window.innerWidth - rect.right : rect.left;
+    const inlineEndRoom = direction === "rtl" ? rect.left : window.innerWidth - rect.right;
+    const room = {
+      top: rect.top,
+      bottom: window.innerHeight - rect.bottom,
+      left: inlineStartRoom,
+      right: inlineEndRoom
+    };
+    setFlipped(room[placement] < need && room[OPPOSITE[placement]] > room[placement]);
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "slider-tooltip",
+      "data-placement": flipped ? OPPOSITE[placement] : placement,
+      "data-open": open === void 0 ? void 0 : String(open),
+      className: "ui-slider-tooltip",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("span", { className: "ui-slider-tooltip-content", children })
+    }
+  );
+}
+function SliderThumbView({
+  model,
+  index,
+  value,
+  inputRef
+}) {
+  const { tooltip, values } = model;
+  const multiple = values.length > 1;
+  const indexId = React.useId();
+  const content = tooltip === false ? null : tooltipContent(tooltip, value);
+  const settings = typeof tooltip === "object" ? tooltip : void 0;
+  const spoken = settings?.formatter && (typeof content === "string" || typeof content === "number") ? String(content) : void 0;
+  React.useLayoutEffect(() => {
+    if (spoken !== void 0) inputRef.current?.setAttribute("aria-valuetext", spoken);
+  }, [inputRef, spoken, value]);
+  React.useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    if (model.label) input.setAttribute("aria-label", model.label);
+    else input.removeAttribute("aria-label");
+  }, [inputRef, model.label]);
+  const labelledBy = [model.labelledBy, multiple ? indexId : void 0].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    AriaSliderThumb,
+    {
+      index,
+      "data-slot": "slider-thumb",
+      "data-index": index,
+      className: "ui-slider-thumb",
+      style: {
+        ...offsetStyle(model, value, "--slider-thumb-offset"),
+        left: void 0,
+        top: void 0,
+        transform: void 0
+      },
+      isDisabled: model.thumbDisabled(index),
+      name: model.name ? multiple ? `${model.name}[]` : model.name : void 0,
+      form: model.form,
+      inputRef,
+      "aria-labelledby": labelledBy || void 0,
+      isInvalid: model.isInvalid || void 0,
+      isRequired: model.isRequired || void 0,
+      "aria-errormessage": model.errorMessage,
+      children: [
+        multiple ? /* @__PURE__ */ jsx("span", { id: indexId, className: "sr-only", children: index + 1 }) : null,
+        content !== null && content !== void 0 ? /* @__PURE__ */ jsx(
+          SliderTooltip,
+          {
+            placement: settings?.placement ?? (model.axis === "vertical" ? "right" : "top"),
+            adjust: settings?.autoAdjustOverflow ?? true,
+            open: settings?.open,
+            direction: model.direction,
+            children: content
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function SliderBody({ model }) {
+  const state = React.useContext(SliderStateContext);
+  const railRef = React.useRef(null);
+  const pendingFocus = React.useRef(null);
+  const stopDrag = React.useRef(null);
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const { values, min, max, axis, direction, reversed, stops, step } = model;
+  const thumbCount = values.length;
+  const inputRefs = React.useMemo(
+    () => Array.from({ length: thumbCount }, () => React.createRef()),
+    [thumbCount]
+  );
+  React.useLayoutEffect(() => {
+    if (pendingFocus.current !== null) {
+      inputRefs[pendingFocus.current]?.current?.focus();
+      pendingFocus.current = null;
+    }
+  });
+  const stateRef = React.useRef(state);
+  React.useLayoutEffect(() => {
+    stateRef.current = state;
+  });
+  React.useLayoutEffect(() => {
+    if (activeIndex === null) return;
+    stateRef.current?.setThumbDragging(activeIndex, true);
+    return () => stateRef.current?.setThumbDragging(activeIndex, false);
+  }, [activeIndex]);
+  React.useEffect(() => () => stopDrag.current?.(), []);
+  function focusThumb(index) {
+    pendingFocus.current = index;
+    inputRefs[index]?.current?.focus();
+  }
+  function valueAtPoint(clientX, clientY) {
+    const rect = railRef.current?.getBoundingClientRect();
+    if (!rect) return min;
+    let share = axis === "vertical" ? rect.height > 0 ? (rect.bottom - clientY) / rect.height : 0 : rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
+    if (axis === "horizontal" && direction === "rtl") share = 1 - share;
+    if (reversed) share = 1 - share;
+    return min + clamp(share, 0, 1) * (max - min);
+  }
+  function thumbIndexOf(target) {
+    const thumb = target?.closest?.('[data-slot="slider-thumb"]');
+    if (!thumb) return null;
+    return Number(thumb.getAttribute("data-index"));
+  }
+  function onKeyDownCapture(event) {
+    const index = thumbIndexOf(event.target);
+    if (index === null || model.rootDisabled || model.thumbDisabled(index)) return;
+    const list = model.latest.current;
+    const along = (sign, count) => stops ? placeThumb(model, list, index, list[index], sign, count) : placeThumb(model, list, index, list[index] + sign * step * count, "nearest");
+    let next;
+    if (ARROWS.has(event.key)) {
+      next = along(
+        arrowSign(event.key, axis, direction, reversed),
+        event.shiftKey ? PAGE_STEPS : 1
+      );
+    } else if (event.key === "PageUp" || event.key === "PageDown") {
+      next = along(event.key === "PageUp" ? 1 : -1, PAGE_STEPS);
+    } else if (event.key === "Home" || event.key === "End") {
+      next = placeThumb(model, list, index, event.key === "Home" ? min : max, "nearest");
+    } else if ((event.key === "Delete" || event.key === "Backspace") && model.editable && list.length > model.minCount) {
+      next = list.filter((_, at) => at !== index);
+      if (next.length > 0) pendingFocus.current = Math.min(index, next.length - 1);
+    } else {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    model.update(next, true);
+  }
+  function onPointerDownCapture(event) {
+    event.stopPropagation();
+    if (model.rootDisabled) return;
+    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.altKey) return;
+    const list = model.latest.current;
+    const target = event.target;
+    const at = valueAtPoint(event.clientX, event.clientY);
+    let index = null;
+    let grab = 0;
+    let track = null;
+    let next = list;
+    const pressedThumb = thumbIndexOf(target);
+    if (pressedThumb !== null) {
+      if (model.thumbDisabled(pressedThumb)) return;
+      index = pressedThumb;
+      grab = at - list[pressedThumb];
+    } else if (model.draggableTrack && list.length > 1 && target.closest?.('[data-slot="slider-range"]')) {
+      track = { at, values: list };
+    } else {
+      const mark = target.closest?.('[data-slot="slider-mark"]');
+      const point = mark ? Number(mark.getAttribute("data-value")) : at;
+      if (model.editable && list.length < model.maxCount) {
+        const settled = placeThumb(model, [point], 0, point, "nearest")[0];
+        const insertAt = list.findIndex((value) => value > settled);
+        index = insertAt === -1 ? list.length : insertAt;
+        next = [...list.slice(0, index), settled, ...list.slice(index)];
+      } else {
+        index = closestThumb(list, point, model.thumbDisabled);
+        if (index === null) return;
+        next = placeThumb(model, list, index, point, "nearest");
+      }
+    }
+    event.preventDefault();
+    const start = list;
+    const pointerId = event.pointerId;
+    if (next !== list) model.update(next, false);
+    if (index !== null) {
+      focusThumb(index);
+      setActiveIndex(index);
+    }
+    const onMove = (move) => {
+      if (move.pointerId !== pointerId) return;
+      const point = valueAtPoint(move.clientX, move.clientY);
+      if (track) {
+        model.update(shiftAll(model, track.values, point - track.at), false);
+      } else if (index !== null) {
+        model.update(
+          placeThumb(model, model.latest.current, index, point - grab, "nearest"),
+          false
+        );
+      }
+    };
+    const finish = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+      stopDrag.current = null;
+      setActiveIndex(null);
+    };
+    const onUp = (up) => {
+      if (up.pointerId !== pointerId) return;
+      finish();
+      const final = model.latest.current;
+      if (!sameList(final, start)) model.update(final, true);
+    };
+    stopDrag.current?.();
+    stopDrag.current = finish;
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  }
+  const first = values[0] ?? min;
+  const last = values[values.length - 1] ?? min;
+  const spanFrom = values.length > 1 ? first : min;
+  const spanTo = values.length > 1 ? last : first;
+  const startShare = fraction(spanFrom, min, max, reversed);
+  const endShare = fraction(spanTo, min, max, reversed);
+  const dots = !model.dots ? [] : stops ? stops : dotStops(min, max, step);
+  const markOffset = axis === "vertical" ? "--slider-mark-offset-block" : "--slider-mark-offset-inline";
+  return /* @__PURE__ */ jsxs(
+    AriaSliderTrack,
+    {
+      "data-slot": "slider-control",
+      className: "ui-slider-control",
+      onPointerDownCapture,
+      onMouseDownCapture: (event) => event.stopPropagation(),
+      onTouchStartCapture: (event) => event.stopPropagation(),
+      ...{ onKeyDownCapture },
+      children: [
+        /* @__PURE__ */ jsxs("span", { ref: railRef, "data-slot": "slider-track", className: "ui-slider-track", children: [
+          model.included && values.length > 0 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "slider-range",
+              "data-draggable": model.draggableTrack && values.length > 1 ? "true" : void 0,
+              className: "ui-slider-range",
+              style: {
+                "--slider-range-start": percent(Math.min(startShare, endShare)),
+                "--slider-range-size": percent(Math.abs(endShare - startShare))
+              }
+            }
+          ) : null,
+          dots.map((at) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "slider-dot",
+              "data-active": model.included && at >= spanFrom && at <= spanTo && values.length > 0 ? "true" : void 0,
+              className: "ui-slider-dot",
+              style: offsetStyle(model, at, markOffset),
+              "aria-hidden": "true"
+            },
+            `dot-${at}`
+          ))
+        ] }),
+        values.map((value, index) => /* @__PURE__ */ jsx(
+          SliderThumbView,
+          {
+            model,
+            index,
+            value,
+            inputRef: inputRefs[index]
+          },
+          index
+        )),
+        model.marks.length > 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "slider-marks", className: "ui-slider-marks", "aria-hidden": "true", children: model.marks.map(([at, mark]) => {
+          const label = isMarkObject(mark) ? mark.label : mark;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "slider-mark",
+              "data-value": at,
+              className: "ui-slider-mark",
+              style: offsetStyle(model, at, markOffset),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ui-slider-mark-label",
+                  style: isMarkObject(mark) ? mark.style : void 0,
+                  children: label
+                }
+              )
+            },
+            `mark-${at}`
+          );
+        }) }) : null
+      ]
+    }
+  );
+}
+const Slider = React.forwardRef((props, ref) => {
+  const {
     className,
-    defaultValue,
     value,
+    defaultValue,
     min = 0,
     max = 100,
     step = 1,
@@ -36,96 +475,146 @@ const Slider = React.forwardRef(
     dots = false,
     included = true,
     reverse = false,
-    tooltip = false,
     inverted,
-    orientation = "horizontal",
+    tooltip = false,
+    disabled,
+    orientation,
+    vertical = false,
+    dir,
+    minStepsBetweenThumbs = 0,
+    onValueChange,
+    onValueCommit,
+    onChange,
+    onChangeComplete,
+    name,
+    form,
+    id,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
-    ...props
-  }, ref) => {
-    const values = React.useMemo(() => {
-      const given = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : null;
-      if (range === true) {
-        if (given) return given.length >= 2 ? given.slice(0, 2) : [given[0] ?? min, max];
-        return [min, max];
-      }
-      if (range === false) return given ? given.slice(0, 1) : [min];
-      return given ?? [min, max];
-    }, [defaultValue, max, min, range, value]);
-    const thumbLabel = (index) => ariaLabel != null && values.length > 1 ? `${ariaLabel} ${index + 1}` : ariaLabel;
-    const ticks = markEntries(marks);
-    const stops = dots ? dotStops(min, max, typeof step === "number" ? step : 1) : [];
-    const vertical = orientation === "vertical";
-    const showTooltip = tooltip !== false && tooltip != null;
-    const offsetStyle = (at) => ({
-      [vertical ? "--slider-mark-offset-block" : "--slider-mark-offset-inline"]: `${fraction(at, min, max, reverse) * 100}%`
-    });
-    return /* @__PURE__ */ jsxs(
-      SliderPrimitive.Root,
-      {
-        ref,
-        "data-slot": "slider",
-        "data-has-marks": ticks.length > 0 ? "true" : void 0,
-        className: cn("ui-slider", className),
-        defaultValue: defaultValue ?? (range === true ? [min, max] : void 0),
-        min,
-        max,
-        step,
-        value,
-        orientation,
-        inverted: inverted ?? reverse,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(SliderPrimitive.Track, { "data-slot": "slider-track", className: "ui-slider-track", children: [
-            included ? /* @__PURE__ */ jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "ui-slider-range" }) : null,
-            stops.map((at) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-slot": "slider-dot",
-                "data-active": included && at <= (values[values.length - 1] ?? min) ? "true" : void 0,
-                className: "ui-slider-dot",
-                style: offsetStyle(at),
-                "aria-hidden": "true"
-              },
-              `dot-${at}`
-            ))
-          ] }),
-          values.map((thumbValue, index) => /* @__PURE__ */ jsx(
-            SliderPrimitive.Thumb,
-            {
-              "data-slot": "slider-thumb",
-              className: "ui-slider-thumb",
-              "aria-label": thumbLabel(index),
-              "aria-labelledby": ariaLabelledby,
-              children: showTooltip ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-slot": "slider-tooltip",
-                  "data-open": tooltip !== true && tooltip.open ? "true" : void 0,
-                  className: "ui-slider-tooltip",
-                  "aria-hidden": "true",
-                  children: tooltipContent(tooltip, thumbValue)
-                }
-              ) : null
-            },
-            index
-          )),
-          ticks.length > 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "slider-marks", className: "ui-slider-marks", "aria-hidden": "true", children: ticks.map(([at, label]) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              "data-slot": "slider-mark",
-              className: "ui-slider-mark",
-              style: offsetStyle(at),
-              children: label
-            },
-            `mark-${at}`
-          )) }) : null
-        ]
-      }
-    );
-  }
-);
-Slider.displayName = SliderPrimitive.Root.displayName;
+    "aria-describedby": ariaDescribedby,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    "aria-errormessage": ariaErrormessage,
+    ...rest
+  } = props;
+  const locale = useLocale();
+  const direction = dir ?? locale.direction;
+  const axis = orientation ?? (vertical ? "vertical" : "horizontal");
+  const reversed = inverted ?? reverse;
+  const rangeConfig = typeof range === "object" && range !== null ? range : void 0;
+  const rangeOn = range === true || rangeConfig !== void 0;
+  const perThumbDisabled = Array.isArray(disabled) ? disabled : void 0;
+  const rootDisabled = disabled === true;
+  const editable = Boolean(rangeConfig?.editable) && !perThumbDisabled?.some(Boolean);
+  const draggableTrack = Boolean(rangeConfig?.draggableTrack) && !editable && step !== null;
+  const ticks = markEntries(marks);
+  const stops = step === null ? markStops(min, max, ticks) : null;
+  const gridStep = stops ? gridThrough(stops) : step;
+  const places = Math.max(decimalPlaces(gridStep), decimalPlaces(min));
+  const settle = (list) => list.map(
+    (at) => stops ? nearestStop(stops, clamp(at, min, max)) : snapToStep(clamp(at, min, max), min, max, gridStep)
+  ).sort((a, b) => a - b);
+  const resolve = (given) => {
+    if (rangeOn) {
+      if (!given) return [min, max];
+      if (editable || given.length >= 2) return settle(given);
+      return settle([given[0] ?? min, max]);
+    }
+    if (range === false) return settle([given?.[0] ?? min]);
+    return settle(given && given.length > 0 ? given : [min]);
+  };
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(() => resolve(toList(defaultValue)));
+  const values = isControlled ? resolve(toList(value)) : internal;
+  const latest = React.useRef(values);
+  React.useLayoutEffect(() => {
+    latest.current = values;
+  });
+  const emit = rangeOn ? (list) => list : (list) => list[0];
+  const update = (next, commit) => {
+    if (sameList(next, latest.current)) {
+      if (!commit) return;
+    } else {
+      latest.current = next;
+      if (!isControlled) setInternal(next);
+      onValueChange?.(next);
+      onChange?.(emit(next));
+    }
+    if (commit) {
+      onValueCommit?.(next);
+      onChangeComplete?.(emit(next));
+    }
+  };
+  const onAriaChange = (next) => {
+    const list = latest.current;
+    const proposed = Array.isArray(next) ? next : [next];
+    const index = proposed.findIndex((at, position) => at !== list[position]);
+    if (index === -1) return;
+    const sign = proposed[index] > list[index] ? 1 : -1;
+    const placed = placeThumb(model, list, index, proposed[index], stops ? sign : "nearest");
+    if (!sameList(placed, list)) update(placed, true);
+  };
+  const isInvalid = ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false";
+  const isRequired = ariaRequired === true || ariaRequired === "true";
+  const model = {
+    values,
+    min,
+    max,
+    axis,
+    direction,
+    reversed,
+    stops,
+    step: gridStep,
+    gap: stops ? 0 : minStepsBetweenThumbs * gridStep,
+    places,
+    included,
+    marks: ticks,
+    dots,
+    tooltip,
+    rootDisabled,
+    thumbDisabled: (index) => rootDisabled || Boolean(perThumbDisabled?.[index]),
+    editable,
+    draggableTrack,
+    minCount: rangeConfig?.minCount ?? 0,
+    maxCount: rangeConfig?.maxCount ?? Infinity,
+    name,
+    form,
+    labelledBy: ariaLabelledby,
+    label: ariaLabel,
+    isInvalid,
+    isRequired,
+    errorMessage: ariaErrormessage,
+    update,
+    latest
+  };
+  return /* @__PURE__ */ jsxs(
+    AriaSlider,
+    {
+      ...rest,
+      ref,
+      id,
+      "data-slot": "slider",
+      "data-has-marks": ticks.length > 0 ? "true" : void 0,
+      "data-reverse": reversed ? "true" : void 0,
+      dir: direction,
+      className: cn("ui-slider", className),
+      value: values,
+      onChange: onAriaChange,
+      minValue: min,
+      maxValue: max,
+      step: gridStep,
+      orientation: axis,
+      isDisabled: rootDisabled,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      children: [
+        /* @__PURE__ */ jsx(AriaLabel, { className: "sr-only", children: ariaLabelledby ? null : ariaLabel }),
+        /* @__PURE__ */ jsx(SliderBody, { model })
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
 export {
   Slider
 };