@koide-labs/ui 0.0.15 → 0.1.0

package/dist/components/slider/slider.js

@@ -0,0 +1,899 @@
+import { jsx as be, jsxs as Je } from "react/jsx-runtime";
+import { c as Ct } from "../../clsx-OuTLNxxd.js";
+import { View as Pt } from "../view/view.js";
+import * as a from "react";
+import { o as Ne } from "../../owner-rKN292Q9.js";
+import { u as _t } from "../../useControlled-Du4sJyMj.js";
+import { u as H } from "../../useStableCallback-DKZHlUAT.js";
+import { u as Qe } from "../../useValueAsRef-B4EriRsI.js";
+import { u as He } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { w as Nt } from "../../warn-CKtX8MLJ.js";
+import { c as we, n as wt, g as Ze, k as Et, m as Vt, r as At, u as Ge } from "../../createBaseUIEventDetails-CCSfZ2vM.js";
+import { u as Tt } from "../../useValueChanged-MJRmEWz1.js";
+import { u as Ue } from "../../useBaseUiId-B7WyxtIE.js";
+import { u as Ee, m as Mt, d as Ot } from "../../useRenderElement-DngNDu_P.js";
+import { c as ue } from "../../clamp-D0KDAQIz.js";
+import { C as Ft, u as Bt } from "../../useCompositeListItem-CZp9WTnF.js";
+import { c as Dt, a as et, u as Lt, b as kt } from "../../LabelableContext-Be1u-eFg.js";
+import { f as $t } from "../../formatErrorMessage-BqPuTBN-.js";
+import { d as tt, f as zt } from "../../element-u5WgOZX1.js";
+import { a as qe } from "../../floating-ui.utils.dom-cbi420Pg.js";
+import { u as qt } from "../../useAnimationFrame-DvK1s63A.js";
+import { u as nt } from "../../DirectionContext-C2o_MF_i.js";
+import { u as rt } from "../../useOnMount-VRW6CK2u.js";
+import { v as We } from "../../valueToPercent-DaP9qN4u.js";
+import { v as je } from "../../visuallyHidden-CpJ-mhai.js";
+import { f as De } from "../../formatNumber-1UNwjeqf.js";
+import { C as Ht, H as ot, E as it, d as st, b as at, c as ut, e as lt } from "../../composite-BwEK5cWH.js";
+import { u as Ut } from "../../useLabelableId-CX4tcfzK.js";
+import '../../slider.css';function ct(e, t, r = (i, o) => i === o) {
+  return e.length === t.length && e.every((i, o) => r(i, t[o]));
+}
+function dt(e, t) {
+  return e - t;
+}
+function Wt(e, t, r) {
+  const i = e.slice();
+  return i[t] = r, i.sort(dt);
+}
+function ft(e, t, r, i, o, l) {
+  let u = e;
+  return u = ue(u, r, i), o && (u = Wt(
+    l,
+    t,
+    // Bound the new value to the thumb's neighbours.
+    ue(u, l[t - 1] || -1 / 0, l[t + 1] || 1 / 0)
+  )), u;
+}
+function mt(e, t, r) {
+  if (!Array.isArray(e))
+    return !0;
+  const i = e.reduce((o, l, u, g) => (u === g.length - 1 || o.push(Math.abs(l - g[u + 1])), o), []);
+  return Math.min(...i) >= t * r;
+}
+const Ve = {
+  activeThumbIndex: () => null,
+  max: () => null,
+  min: () => null,
+  minStepsBetweenValues: () => null,
+  step: () => null,
+  values: () => null
+}, Ke = /* @__PURE__ */ a.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Ke.displayName = "SliderRootContext");
+function Le() {
+  const e = a.useContext(Ke);
+  if (e === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>." : $t(62));
+  return e;
+}
+function Kt(e) {
+  return "key" in e ? Et : Vt;
+}
+function Yt(e, t) {
+  return typeof e == "number" && typeof t == "number" ? e === t : Array.isArray(e) && Array.isArray(t) ? ct(e, t) : !1;
+}
+const pt = /* @__PURE__ */ a.forwardRef(function(t, r) {
+  const {
+    "aria-labelledby": i,
+    className: o,
+    defaultValue: l,
+    disabled: u = !1,
+    id: g,
+    format: p,
+    largeStep: w = 10,
+    locale: h,
+    render: U,
+    max: E = 100,
+    min: m = 0,
+    minStepsBetweenValues: s = 0,
+    name: V,
+    onValueChange: x,
+    onValueCommitted: P,
+    orientation: y = "horizontal",
+    step: M = 1,
+    thumbCollisionBehavior: te = "push",
+    thumbAlignment: ne = "center",
+    value: re,
+    ...Re
+  } = t, le = Ue(g), W = H(x), ce = H(P), {
+    clearErrors: z
+  } = Dt(), {
+    state: q,
+    disabled: K,
+    name: S,
+    setTouched: Y,
+    setDirty: A,
+    validityData: R,
+    shouldValidateOnChange: _,
+    validation: B
+  } = et(), {
+    labelId: oe
+  } = Lt(), X = i ?? oe, G = K || u, de = S ?? V, [C, Ie] = _t({
+    controlled: re,
+    default: l ?? m,
+    name: "Slider"
+  }), ie = a.useRef(null), he = a.useRef(null), O = a.useRef([]), F = a.useRef(null), fe = a.useRef(null), ye = a.useRef(-1), D = a.useRef(null), L = a.useRef(null), se = a.useRef("none"), n = Qe(p), [f, c] = a.useState(-1), [b, d] = a.useState(-1), [$, me] = a.useState(!1), [J, ge] = a.useState(() => /* @__PURE__ */ new Map()), [Pe, Se] = a.useState([void 0, void 0]), I = H((v) => {
+    c(v), v !== -1 && d(v);
+  });
+  kt({
+    id: le,
+    commit: B.commit,
+    value: C,
+    controlRef: he,
+    name: de,
+    getValue: () => C
+  }), Tt(C, () => {
+    z(de), _() ? B.commit(C) : B.commit(C, !0);
+    const v = R.initialValue;
+    let pe;
+    Array.isArray(C) && Array.isArray(v) ? pe = !ct(C, v) : pe = C !== v, A(pe);
+  });
+  const xe = H((v) => {
+    v && (he.current = v);
+  }), Q = Array.isArray(C), Z = a.useMemo(() => Q ? C.slice().sort(dt) : [ue(C, m, E)], [E, m, Q, C]), j = H((v, pe) => {
+    if (Number.isNaN(v) || Yt(v, C))
+      return;
+    const ae = pe ?? we(wt, void 0, void 0, {
+      activeThumbIndex: -1
+    });
+    se.current = ae.reason;
+    const ve = new event.constructor(event.type, event);
+    Object.defineProperty(ve, "target", {
+      writable: !0,
+      value: {
+        value: v,
+        name: de
+      }
+    }), ae.event = ve, L.current = v, W(v, ae), !ae.isCanceled && Ie(v);
+  }), Ce = H((v, pe, ae) => {
+    const ve = ft(v, pe, m, E, Q, Z);
+    if (mt(ve, M, s)) {
+      const Te = Kt(ae);
+      j(ve, we(Te, ae.nativeEvent, void 0, {
+        activeThumbIndex: pe
+      })), Y(!0);
+      const Ye = L.current ?? ve;
+      ce(Ye, Ze(Te, ae.nativeEvent));
+    }
+  });
+  process.env.NODE_ENV !== "production" && m >= E && Nt("Slider `max` must be greater than `min`."), He(() => {
+    const v = tt(Ne(ie.current));
+    G && v && ie.current?.contains(v) && v.blur();
+  }, [G]), G && f !== -1 && I(-1);
+  const ee = a.useMemo(() => ({
+    ...q,
+    activeThumbIndex: f,
+    disabled: G,
+    dragging: $,
+    orientation: y,
+    max: E,
+    min: m,
+    minStepsBetweenValues: s,
+    step: M,
+    values: Z
+  }), [q, f, G, $, E, m, s, y, M, Z]), ke = a.useMemo(() => ({
+    active: f,
+    controlRef: he,
+    disabled: G,
+    dragging: $,
+    validation: B,
+    formatOptionsRef: n,
+    handleInputChange: Ce,
+    indicatorPosition: Pe,
+    inset: ne !== "center",
+    labelId: X,
+    largeStep: w,
+    lastUsedThumbIndex: b,
+    lastChangedValueRef: L,
+    lastChangeReasonRef: se,
+    locale: h,
+    max: E,
+    min: m,
+    minStepsBetweenValues: s,
+    name: de,
+    onValueCommitted: ce,
+    orientation: y,
+    pressedInputRef: F,
+    pressedThumbCenterOffsetRef: fe,
+    pressedThumbIndexRef: ye,
+    pressedValuesRef: D,
+    registerFieldControlRef: xe,
+    renderBeforeHydration: ne === "edge",
+    setActive: I,
+    setDragging: me,
+    setIndicatorPosition: Se,
+    setValue: j,
+    state: ee,
+    step: M,
+    thumbCollisionBehavior: te,
+    thumbMap: J,
+    thumbRefs: O,
+    values: Z
+  }), [f, he, X, G, $, B, n, Ce, Pe, w, b, L, se, h, E, m, s, de, ce, y, F, fe, ye, D, xe, I, me, Se, j, ee, M, te, ne, J, O, Z]), Ae = Ee("div", t, {
+    state: ee,
+    ref: [r, ie],
+    props: [{
+      "aria-labelledby": X,
+      id: le,
+      role: "group"
+    }, B.getValidationProps, Re],
+    stateAttributesMapping: Ve
+  });
+  return /* @__PURE__ */ be(Ke.Provider, {
+    value: ke,
+    children: /* @__PURE__ */ be(Ft, {
+      elementsRef: O,
+      onMapChange: ge,
+      children: Ae
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (pt.displayName = "SliderRoot");
+function ht(e) {
+  const t = e.getBoundingClientRect();
+  return {
+    x: (t.left + t.right) / 2,
+    y: (t.top + t.bottom) / 2
+  };
+}
+function Gt(e) {
+  if (Math.abs(e) < 1) {
+    const r = e.toExponential().split("e-"), i = r[0].split(".")[1];
+    return (i ? i.length : 0) + parseInt(r[1], 10);
+  }
+  const t = e.toString().split(".")[1];
+  return t ? t.length : 0;
+}
+function gt(e, t, r) {
+  const i = Math.round((e - r) / t) * t + r;
+  return Number(i.toFixed(Gt(t)));
+}
+function Xe({
+  values: e,
+  index: t,
+  nextValue: r,
+  min: i,
+  max: o,
+  step: l,
+  minStepsBetweenValues: u,
+  initialValues: g
+}) {
+  if (e.length === 0)
+    return [];
+  const p = e.slice(), w = l * u, h = p.length - 1, U = g ?? e, E = i + t * w, m = o - (h - t) * w;
+  p[t] = ue(r, E, m);
+  for (let s = t + 1; s <= h; s += 1) {
+    const V = p[s - 1] + w, x = o - (h - s) * w, P = U[s] ?? p[s];
+    let y = Math.max(p[s], V);
+    P < y && (y = Math.max(P, V)), p[s] = ue(y, V, x);
+  }
+  for (let s = t - 1; s >= 0; s -= 1) {
+    const V = p[s + 1] - w, x = i + s * w, P = U[s] ?? p[s];
+    let y = Math.min(p[s], V);
+    P > y && (y = Math.min(P, V)), p[s] = ue(y, x, V);
+  }
+  for (let s = 0; s <= h; s += 1)
+    p[s] = Number(p[s].toFixed(12));
+  return p;
+}
+function jt({
+  behavior: e,
+  values: t,
+  currentValues: r,
+  initialValues: i,
+  pressedIndex: o,
+  nextValue: l,
+  min: u,
+  max: g,
+  step: p,
+  minStepsBetweenValues: w
+}) {
+  const h = r ?? t, U = i ?? t;
+  if (!(h.length > 1))
+    return {
+      value: l,
+      thumbIndex: 0,
+      didSwap: !1
+    };
+  const m = p * w;
+  switch (e) {
+    case "swap": {
+      const s = h[o], V = 1e-7, x = h.slice(), P = x[o - 1], y = x[o + 1], M = P != null ? P + m : u, te = y != null ? y - m : g, ne = ue(l, M, te), re = Number(ne.toFixed(12));
+      x[o] = re;
+      const Re = l > s, le = l < s, W = Re && y != null && l >= y - V, ce = le && P != null && l <= P + V;
+      if (!W && !ce)
+        return {
+          value: x,
+          thumbIndex: o,
+          didSwap: !1
+        };
+      const z = W ? o + 1 : o - 1, q = x.map((A, R) => {
+        if (R === o)
+          return re;
+        const _ = U[R];
+        return _ ?? h[R];
+      });
+      let K = l;
+      W ? K = Math.max(l, x[z]) : K = Math.min(l, x[z]);
+      const S = Xe({
+        values: x,
+        index: z,
+        nextValue: K,
+        min: u,
+        max: g,
+        step: p,
+        minStepsBetweenValues: w,
+        initialValues: q
+      }), Y = W ? z - 1 : z + 1;
+      if (Y >= 0 && Y < S.length) {
+        const A = S[Y - 1], R = S[Y + 1];
+        let _ = A != null ? A + m : u;
+        _ = Math.max(_, u + Y * m);
+        let B = R != null ? R - m : g;
+        B = Math.min(B, g - (S.length - 1 - Y) * m);
+        const oe = ue(re, _, B);
+        S[Y] = Number(oe.toFixed(12));
+      }
+      return {
+        value: S,
+        thumbIndex: z,
+        didSwap: !0
+      };
+    }
+    case "push":
+      return {
+        value: Xe({
+          values: h,
+          index: o,
+          nextValue: l,
+          min: u,
+          max: g,
+          step: p,
+          minStepsBetweenValues: w
+        }),
+        thumbIndex: o,
+        didSwap: !1
+      };
+    default: {
+      const s = h.slice(), V = s[o - 1], x = s[o + 1], P = V != null ? V + m : u, y = x != null ? x - m : g, M = ue(l, P, y);
+      return s[o] = Number(M.toFixed(12)), {
+        value: s,
+        thumbIndex: o,
+        didSwap: !1
+      };
+    }
+  }
+}
+const Xt = 2;
+function Jt(e, t) {
+  if (!e)
+    return {
+      start: 0,
+      end: 0
+    };
+  function r(l) {
+    const u = l != null ? parseFloat(l) : 0;
+    return Number.isNaN(u) ? 0 : u;
+  }
+  const i = t ? "Top" : "InlineStart", o = t ? "Bottom" : "InlineEnd";
+  return {
+    start: r(e[`border${i}Width`]) + r(e[`padding${i}`]),
+    end: r(e[`border${o}Width`]) + r(e[`padding${o}`])
+  };
+}
+function Fe(e, t) {
+  if (t.current != null && e.changedTouches) {
+    const r = e;
+    for (let i = 0; i < r.changedTouches.length; i += 1) {
+      const o = r.changedTouches[i];
+      if (o.identifier === t.current)
+        return {
+          x: o.clientX,
+          y: o.clientY
+        };
+    }
+    return null;
+  }
+  return {
+    x: e.clientX,
+    y: e.clientY
+  };
+}
+const bt = /* @__PURE__ */ a.forwardRef(function(t, r) {
+  const {
+    render: i,
+    className: o,
+    ...l
+  } = t, {
+    disabled: u,
+    dragging: g,
+    validation: p,
+    inset: w,
+    lastChangedValueRef: h,
+    lastChangeReasonRef: U,
+    max: E,
+    min: m,
+    minStepsBetweenValues: s,
+    onValueCommitted: V,
+    orientation: x,
+    pressedInputRef: P,
+    pressedThumbCenterOffsetRef: y,
+    pressedThumbIndexRef: M,
+    pressedValuesRef: te,
+    registerFieldControlRef: ne,
+    renderBeforeHydration: re,
+    setActive: Re,
+    setDragging: le,
+    setValue: W,
+    state: ce,
+    step: z,
+    thumbCollisionBehavior: q,
+    thumbRefs: K,
+    values: S
+  } = Le(), Y = nt(), A = S.length > 1, R = x === "vertical", _ = a.useRef(null), B = a.useRef(null), oe = H((n) => {
+    n && B.current == null && B.current == null && (B.current = getComputedStyle(n));
+  }), X = a.useRef(null), G = a.useRef(0), de = a.useRef(0), C = Qe(S), Ie = H((n) => {
+    M.current !== n && (M.current = n);
+    const f = K.current[n];
+    if (!f) {
+      y.current = null, P.current = null;
+      return;
+    }
+    P.current = f.querySelector('input[type="range"]');
+  }), ie = H((n) => {
+    const f = _.current;
+    if (!f)
+      return null;
+    const {
+      width: c,
+      height: b,
+      bottom: d,
+      left: $,
+      right: me
+    } = f.getBoundingClientRect(), J = Jt(B.current, R), ge = de.current, Pe = (R ? b : c) - J.start - J.end - ge * 2, Se = y.current ?? 0, I = n.x - Se, xe = n.y - Se, Q = R ? d - xe - J.end : (Y === "rtl" ? me - I : I - $) - J.start, Z = ue((Q - ge) / Pe, 0, 1);
+    let j = (E - m) * Z + m;
+    if (j = gt(j, z, m), j = ue(j, m, E), !A)
+      return {
+        value: j,
+        thumbIndex: 0,
+        didSwap: !1
+      };
+    const Ce = M.current;
+    if (Ce < 0)
+      return null;
+    const ee = jt({
+      behavior: q,
+      values: S,
+      currentValues: C.current ?? S,
+      initialValues: te.current,
+      pressedIndex: Ce,
+      nextValue: j,
+      min: m,
+      max: E,
+      step: z,
+      minStepsBetweenValues: s
+    });
+    return q === "swap" && ee.didSwap ? Ie(ee.thumbIndex) : M.current = ee.thumbIndex, ee;
+  }), he = H((n) => {
+    te.current = A ? S.slice() : null, C.current = S;
+    const f = M.current;
+    let c = f;
+    if (f > -1 && f < S.length) {
+      if (S[f] === E) {
+        let b = f;
+        for (; b > 0 && S[b - 1] === E; )
+          b -= 1;
+        c = b;
+      }
+    } else {
+      const b = R ? "y" : "x";
+      let d;
+      c = -1;
+      for (let $ = 0; $ < K.current.length; $ += 1) {
+        const me = K.current[$];
+        if (qe(me)) {
+          const J = ht(me), ge = Math.abs(n[b] - J[b]);
+          (d === void 0 || ge <= d) && (c = $, d = ge);
+        }
+      }
+    }
+    if (c > -1 && c !== f && Ie(c), w) {
+      const b = K.current[c];
+      if (qe(b)) {
+        const d = b.getBoundingClientRect(), $ = R ? "height" : "width";
+        de.current = d[$] / 2;
+      }
+    }
+  }), O = H((n) => {
+    K.current?.[n]?.querySelector('input[type="range"]')?.focus({
+      preventScroll: !0
+    });
+  }), F = H((n) => {
+    const f = Fe(n, X);
+    if (f == null)
+      return;
+    if (G.current += 1, n.type === "pointermove" && n.buttons === 0) {
+      fe(n);
+      return;
+    }
+    const c = ie(f);
+    c != null && mt(c.value, z, s) && (!g && G.current > Xt && le(!0), W(c.value, we(At, n, void 0, {
+      activeThumbIndex: c.thumbIndex
+    })), C.current = Array.isArray(c.value) ? c.value : [c.value], c.didSwap && O(c.thumbIndex));
+  });
+  function fe(n) {
+    Re(-1), le(!1), P.current = null, y.current = null, M.current = -1;
+    const f = Fe(n, X), c = f != null ? ie(f) : null;
+    if (c != null) {
+      const b = U.current;
+      p.commit(h.current ?? c.value), V(h.current ?? c.value, Ze(b, n));
+    }
+    "pointerType" in n && _.current?.hasPointerCapture(n.pointerId) && _.current?.releasePointerCapture(n.pointerId), X.current = null, te.current = null, D();
+  }
+  const ye = H((n) => {
+    if (u)
+      return;
+    const f = n.changedTouches[0];
+    f != null && (X.current = f.identifier);
+    const c = Fe(n, X);
+    if (c != null) {
+      he(c);
+      const d = ie(c);
+      if (d == null)
+        return;
+      O(d.thumbIndex), W(d.value, we(Ge, n, void 0, {
+        activeThumbIndex: d.thumbIndex
+      })), C.current = Array.isArray(d.value) ? d.value : [d.value], d.didSwap && O(d.thumbIndex);
+    }
+    G.current = 0;
+    const b = Ne(_.current);
+    b.addEventListener("touchmove", F, {
+      passive: !0
+    }), b.addEventListener("touchend", fe, {
+      passive: !0
+    });
+  }), D = H(() => {
+    const n = Ne(_.current);
+    n.removeEventListener("pointermove", F), n.removeEventListener("pointerup", fe), n.removeEventListener("touchmove", F), n.removeEventListener("touchend", fe), te.current = null;
+  }), L = qt();
+  return a.useEffect(() => {
+    const n = _.current;
+    return n ? (n.addEventListener("touchstart", ye, {
+      passive: !0
+    }), () => {
+      n.removeEventListener("touchstart", ye), L.cancel(), D();
+    }) : () => D();
+  }, [D, ye, _, L]), a.useEffect(() => {
+    u && D();
+  }, [u, D]), Ee("div", t, {
+    state: ce,
+    ref: [r, ne, _, oe],
+    props: [{
+      "data-base-ui-slider-control": re ? "" : void 0,
+      onPointerDown(n) {
+        const f = _.current;
+        if (!f || u || n.defaultPrevented || !qe(n.target) || // Only handle left clicks
+        n.button !== 0)
+          return;
+        const c = Fe(n, X);
+        if (c != null) {
+          he(c);
+          const d = ie(c);
+          if (d == null)
+            return;
+          zt(K.current[d.thumbIndex], tt(Ne(f))) ? n.preventDefault() : L.request(() => {
+            O(d.thumbIndex);
+          }), le(!0), y.current != null || (W(d.value, we(Ge, n.nativeEvent, void 0, {
+            activeThumbIndex: d.thumbIndex
+          })), C.current = Array.isArray(d.value) ? d.value : [d.value], d.didSwap && O(d.thumbIndex));
+        }
+        n.nativeEvent.pointerId && f.setPointerCapture(n.nativeEvent.pointerId), G.current = 0;
+        const b = Ne(_.current);
+        b.addEventListener("pointermove", F, {
+          passive: !0
+        }), b.addEventListener("pointerup", fe, {
+          once: !0
+        });
+      },
+      tabIndex: -1
+    }, l],
+    stateAttributesMapping: Ve
+  });
+});
+process.env.NODE_ENV !== "production" && (bt.displayName = "SliderControl");
+const yt = /* @__PURE__ */ a.forwardRef(function(t, r) {
+  const {
+    render: i,
+    className: o,
+    ...l
+  } = t, {
+    state: u
+  } = Le();
+  return Ee("div", t, {
+    state: u,
+    ref: r,
+    props: [{
+      style: {
+        position: "relative"
+      }
+    }, l],
+    stateAttributesMapping: Ve
+  });
+});
+process.env.NODE_ENV !== "production" && (yt.displayName = "SliderTrack");
+let Qt = /* @__PURE__ */ (function(e) {
+  return e.index = "data-index", e.dragging = "data-dragging", e.orientation = "data-orientation", e.disabled = "data-disabled", e.readonly = "data-readonly", e.required = "data-required", e.valid = "data-valid", e.invalid = "data-invalid", e.touched = "data-touched", e.dirty = "data-dirty", e.focused = "data-focused", e;
+})({});
+const Zt = '!function(){const t=document.currentScript?.parentElement;if(!t)return;const e=t.closest("[data-base-ui-slider-control]");if(!e)return;const r=e.querySelector("[data-base-ui-slider-indicator]"),i=e.getBoundingClientRect(),n="vertical"===e.getAttribute("data-orientation")?"height":"width",o=e.querySelectorAll(\'input[type="range"]\'),l=o.length>1,s=o.length-1;let a=null,u=null;for(let t=0;t<o.length;t+=1){const e=o[t],y=parseFloat(e.getAttribute("value")??"");if(Number.isNaN(y))return;const c=e.parentElement;if(!c)return;const p=parseFloat(e.getAttribute("max")??"100"),g=parseFloat(e.getAttribute("min")??"0"),b=c?.getBoundingClientRect(),d=i[n]-b[n],m=100*(y-g)/(p-g),v=(b[n]/2+d*m/100)/i[n]*100;c.style.setProperty("--position",`${v}%`),Number.isFinite(v)&&(c.style.removeProperty("visibility"),r&&(0===t?(a=v,r.style.setProperty("--start-position",`${v}%`),l||r.style.removeProperty("visibility")):t===s&&(u=v-(a??0),r.style.setProperty("--end-position",`${v}%`),r.style.setProperty("--relative-size",`${u}%`),r.style.removeProperty("visibility"))))}}();', vt = "PageUp", Rt = "PageDown", en = /* @__PURE__ */ new Set([lt, at, st, ut, ot, it, vt, Rt]);
+function tn(e, t, r, i) {
+  if (!(t < 0))
+    return e.length === 2 ? t === 0 ? `${De(e[t], i, r)} start range` : `${De(e[t], i, r)} end range` : r ? De(e[t], i, r) : void 0;
+}
+function _e(e, t, r, i, o) {
+  return r === 1 ? Math.min(e + t, o) : Math.max(e - t, i);
+}
+const It = /* @__PURE__ */ a.forwardRef(function(t, r) {
+  const {
+    render: i,
+    children: o,
+    className: l,
+    "aria-describedby": u,
+    "aria-label": g,
+    "aria-labelledby": p,
+    disabled: w = !1,
+    getAriaLabel: h,
+    getAriaValueText: U,
+    id: E,
+    index: m,
+    inputRef: s,
+    onBlur: V,
+    onFocus: x,
+    onKeyDown: P,
+    tabIndex: y,
+    ...M
+  } = t, te = Ue(E), {
+    active: ne,
+    lastUsedThumbIndex: re,
+    controlRef: Re,
+    disabled: le,
+    validation: W,
+    formatOptionsRef: ce,
+    handleInputChange: z,
+    inset: q,
+    labelId: K,
+    largeStep: S,
+    locale: Y,
+    max: A,
+    min: R,
+    minStepsBetweenValues: _,
+    name: B,
+    orientation: oe,
+    pressedInputRef: X,
+    pressedThumbCenterOffsetRef: G,
+    pressedThumbIndexRef: de,
+    renderBeforeHydration: C,
+    setActive: Ie,
+    setIndicatorPosition: ie,
+    state: he,
+    step: O,
+    values: F
+  } = Le(), fe = nt(), ye = w || le, D = F.length > 1, L = oe === "vertical", se = fe === "rtl", {
+    setTouched: n,
+    setFocused: f,
+    validationMode: c
+  } = et(), b = a.useRef(null), d = a.useRef(null), $ = Ue(), me = Ut(), J = D ? $ : me, ge = a.useMemo(() => ({
+    inputId: J
+  }), [J]), {
+    ref: Pe,
+    index: Se
+  } = Bt({
+    metadata: ge
+  }), I = D ? m ?? Se : 0, xe = I === F.length - 1, Q = F[I], Z = We(Q, R, A), [j, Ce] = a.useState(!1), [ee, ke] = a.useState();
+  rt(() => Ce(!0));
+  const Ae = re >= 0 && re < F.length ? re : -1, v = H(() => {
+    const N = Re.current, T = b.current;
+    if (!N || !T)
+      return;
+    const k = T.getBoundingClientRect(), Me = N.getBoundingClientRect(), Oe = L ? "height" : "width", xt = Me[Oe] - k[Oe], $e = (k[Oe] / 2 + xt * Z / 100) / Me[Oe] * 100;
+    ke($e), I === 0 ? ie((ze) => [$e, ze[1]]) : xe && ie((ze) => [ze[0], $e]);
+  });
+  He(() => {
+    q && queueMicrotask(v);
+  }, [v, q]), He(() => {
+    q && v();
+  }, [v, q, Z]);
+  const pe = a.useCallback(() => {
+    const N = L ? "bottom" : "insetInlineStart", T = L ? "left" : "top";
+    let k;
+    return D ? ne === I ? k = 2 : Ae === I && (k = 1) : ne === I && (k = 1), q ? {
+      "--position": `${ee}%`,
+      visibility: C && !j || ee === void 0 ? "hidden" : void 0,
+      position: "absolute",
+      [N]: "var(--position)",
+      [T]: "50%",
+      translate: `${(L || !se ? -1 : 1) * 50}% ${(L ? 1 : -1) * 50}%`,
+      zIndex: k
+    } : Number.isFinite(Z) ? {
+      position: "absolute",
+      [N]: `${Z}%`,
+      [T]: "50%",
+      translate: `${(L || !se ? -1 : 1) * 50}% ${(L ? 1 : -1) * 50}%`,
+      zIndex: k
+    } : je;
+  }, [ne, I, q, j, ee, D, C, se, Ae, Z, L]);
+  let ae;
+  oe === "vertical" && (ae = se ? "vertical-rl" : "vertical-lr");
+  const ve = Mt({
+    "aria-label": typeof h == "function" ? h(I) : g,
+    "aria-labelledby": p ?? K,
+    "aria-describedby": u,
+    "aria-orientation": oe,
+    "aria-valuenow": Q,
+    "aria-valuetext": typeof U == "function" ? U(De(Q, Y, ce.current ?? void 0), Q, I) : tn(F, I, ce.current ?? void 0, Y),
+    disabled: ye,
+    id: J,
+    max: A,
+    min: R,
+    name: B,
+    onChange(N) {
+      z(N.target.valueAsNumber, I, N);
+    },
+    onFocus() {
+      Ie(I), f(!0);
+    },
+    onBlur() {
+      b.current && (Ie(-1), n(!0), f(!1), c === "onBlur" && W.commit(ft(Q, I, R, A, D, F)));
+    },
+    onKeyDown(N) {
+      if (!en.has(N.key))
+        return;
+      Ht.has(N.key) && N.stopPropagation();
+      let T = null;
+      const k = gt(Q, O, R);
+      switch (N.key) {
+        case lt:
+          T = _e(k, N.shiftKey ? S : O, 1, R, A);
+          break;
+        case ut:
+          T = _e(k, N.shiftKey ? S : O, se ? -1 : 1, R, A);
+          break;
+        case at:
+          T = _e(k, N.shiftKey ? S : O, -1, R, A);
+          break;
+        case st:
+          T = _e(k, N.shiftKey ? S : O, se ? 1 : -1, R, A);
+          break;
+        case vt:
+          T = _e(k, S, 1, R, A);
+          break;
+        case Rt:
+          T = _e(k, S, -1, R, A);
+          break;
+        case it:
+          T = A, D && (T = Number.isFinite(F[I + 1]) ? F[I + 1] - O * _ : A);
+          break;
+        case ot:
+          T = R, D && (T = Number.isFinite(F[I - 1]) ? F[I - 1] + O * _ : R);
+          break;
+      }
+      T !== null && (z(T, I, N), N.preventDefault());
+    },
+    step: O,
+    style: {
+      ...je,
+      // So that VoiceOver's focus indicator matches the thumb's dimensions
+      width: "100%",
+      height: "100%",
+      writingMode: ae
+    },
+    tabIndex: y ?? void 0,
+    type: "range",
+    value: Q ?? ""
+  }, W.getInputValidationProps), Te = Ot(d, W.inputRef, s);
+  return Ee("div", t, {
+    state: he,
+    ref: [r, Pe, b],
+    props: [{
+      [Qt.index]: I,
+      children: /* @__PURE__ */ Je(a.Fragment, {
+        children: [o, /* @__PURE__ */ be("input", {
+          ref: Te,
+          ...ve
+        }), q && !j && C && // this must be rendered with the last thumb to ensure all
+        // preceding thumbs are already rendered in the DOM
+        xe && /* @__PURE__ */ be("script", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: Zt
+          },
+          suppressHydrationWarning: !0
+        })]
+      }),
+      id: te,
+      onBlur: V,
+      onFocus: x,
+      onPointerDown(N) {
+        if (de.current = I, b.current != null) {
+          const T = oe === "horizontal" ? "x" : "y", k = ht(b.current), Me = (oe === "horizontal" ? N.clientX : N.clientY) - k[T];
+          G.current = Me;
+        }
+        d.current != null && X.current !== d.current && (X.current = d.current);
+      },
+      style: pe(),
+      suppressHydrationWarning: C || void 0,
+      tabIndex: -1
+    }, M],
+    stateAttributesMapping: Ve
+  });
+});
+process.env.NODE_ENV !== "production" && (It.displayName = "SliderThumb");
+function nn(e, t, r, i, o, l) {
+  const u = r === void 0 || t && i === void 0 ? "hidden" : void 0, g = e ? "bottom" : "insetInlineStart", p = e ? "height" : "width", h = {
+    visibility: o && !l ? "hidden" : u,
+    position: e ? "absolute" : "relative",
+    [e ? "width" : "height"]: "inherit"
+  };
+  return h["--start-position"] = `${r ?? 0}%`, t ? (h["--relative-size"] = `${(i ?? 0) - (r ?? 0)}%`, h[g] = "var(--start-position)", h[p] = "var(--relative-size)", h) : (h[g] = 0, h[p] = "var(--start-position)", h);
+}
+function rn(e, t, r, i) {
+  const o = e ? "bottom" : "insetInlineStart", l = e ? "height" : "width", g = {
+    position: e ? "absolute" : "relative",
+    [e ? "width" : "height"]: "inherit"
+  };
+  if (!t)
+    return g[o] = 0, g[l] = `${r}%`, g;
+  const p = i - r;
+  return g[o] = `${r}%`, g[l] = `${p}%`, g;
+}
+const St = /* @__PURE__ */ a.forwardRef(function(t, r) {
+  const {
+    render: i,
+    className: o,
+    ...l
+  } = t, {
+    indicatorPosition: u,
+    inset: g,
+    max: p,
+    min: w,
+    orientation: h,
+    renderBeforeHydration: U,
+    state: E,
+    values: m
+  } = Le(), [s, V] = a.useState(!1);
+  rt(() => V(!0));
+  const x = h === "vertical", P = m.length > 1, y = g ? nn(x, P, u[0], u[1], U, s) : rn(x, P, We(m[0], w, p), We(m[m.length - 1], w, p));
+  return Ee("div", t, {
+    state: E,
+    ref: r,
+    props: [{
+      "data-base-ui-slider-indicator": U ? "" : void 0,
+      style: y,
+      suppressHydrationWarning: U || void 0
+    }, l],
+    stateAttributesMapping: Ve
+  });
+});
+process.env.NODE_ENV !== "production" && (St.displayName = "SliderIndicator");
+const on = "_slider__control_q5h2z_2", sn = "_slider__track_q5h2z_9", an = "_slider__indicator_q5h2z_17", un = "_slider__thumb_q5h2z_28", Be = {
+  slider__control: on,
+  slider__track: sn,
+  slider__indicator: an,
+  slider__thumb: un
+};
+function Dn({ color: e = "primary", ...t }) {
+  return /* @__PURE__ */ be(pt, { ...t, children: /* @__PURE__ */ be(bt, { className: Be.slider__control, children: /* @__PURE__ */ Je(
+    Pt,
+    {
+      render: /* @__PURE__ */ be(yt, {}),
+      color: e,
+      className: Be.slider__track,
+      children: [
+        /* @__PURE__ */ be(St, { className: Be.slider__indicator }),
+        /* @__PURE__ */ be(It, { className: Ct(Be.slider__thumb) })
+      ]
+    }
+  ) }) });
+}
+export {
+  Dn as Slider
+};