@spark-ui/components 14.0.0-beta.1 → 14.0.0

package/dist/slider/index.mjs

@@ -1,460 +1,58 @@
-import { jsx as u, jsxs as pe } from "react/jsx-runtime";
-import { c as I } from "../index-BmAFn37q.mjs";
-import * as l from "react";
-import { createContext as be, useContext as he, useRef as Se } from "react";
-import { u as ge, c as C } from "../index-DlIFg0Eu.mjs";
-import { u as _ } from "../index-DhGWNzsz.mjs";
-import { c as ve } from "../index-DFZozV_h.mjs";
-import { c as we, u as ye } from "../index-BlkdpEIe.mjs";
-import { u as xe } from "../index-BZPx6jYI.mjs";
-import { u as Re } from "../index-C1qb0595.mjs";
-import { P as K } from "../index-MSR-vgWR.mjs";
-function X(e, [t, r]) {
-  return Math.min(r, Math.max(t, e));
-}
-var G = ["PageUp", "PageDown"], W = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], J = {
-  "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
-  "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
-  "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
-  "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
-}, M = "Slider", [O, Pe, De] = we(M), [Q] = ve(M, [
-  De
-]), [Ee, N] = Q(M), Z = l.forwardRef(
-  (e, t) => {
-    const {
-      name: r,
-      min: n = 0,
-      max: a = 100,
-      step: s = 1,
-      orientation: i = "horizontal",
-      disabled: c = !1,
-      minStepsBetweenThumbs: d = 0,
-      defaultValue: p = [n],
-      value: f,
-      onValueChange: o = () => {
-      },
-      onValueCommit: m = () => {
-      },
-      inverted: v = !1,
-      form: x,
-      ...g
-    } = e, h = l.useRef(/* @__PURE__ */ new Set()), b = l.useRef(0), w = i === "horizontal" ? Ce : _e, [S = [], T] = ge({
-      prop: f,
-      defaultProp: p,
-      onChange: (y) => {
-        [...h.current][b.current]?.focus(), o(y);
-      }
-    }), A = l.useRef(S);
-    function B(y) {
-      const R = Ke(S, y);
-      V(y, R);
-    }
-    function fe(y) {
-      V(y, b.current);
-    }
-    function me() {
-      const y = A.current[b.current];
-      S[b.current] !== y && m(S);
-    }
-    function V(y, R, { commit: z } = { commit: !1 }) {
-      const q = Be(s), H = ze(Math.round((y - n) / s) * s + n, q), k = X(H, [n, a]);
-      T((E = []) => {
-        const P = Ve(E, k, R);
-        if (Ae(P, d * s)) {
-          b.current = P.indexOf(k);
-          const j = String(P) !== String(E);
-          return j && z && m(P), j ? P : E;
-        } else
-          return E;
-      });
-    }
-    return /* @__PURE__ */ u(
-      Ee,
-      {
-        scope: e.__scopeSlider,
-        name: r,
-        disabled: c,
-        min: n,
-        max: a,
-        valueIndexToChangeRef: b,
-        thumbs: h.current,
-        values: S,
-        orientation: i,
-        form: x,
-        children: /* @__PURE__ */ u(O.Provider, { scope: e.__scopeSlider, children: /* @__PURE__ */ u(O.Slot, { scope: e.__scopeSlider, children: /* @__PURE__ */ u(
-          w,
-          {
-            "aria-disabled": c,
-            "data-disabled": c ? "" : void 0,
-            ...g,
-            ref: t,
-            onPointerDown: C(g.onPointerDown, () => {
-              c || (A.current = S);
-            }),
-            min: n,
-            max: a,
-            inverted: v,
-            onSlideStart: c ? void 0 : B,
-            onSlideMove: c ? void 0 : fe,
-            onSlideEnd: c ? void 0 : me,
-            onHomeKeyDown: () => !c && V(n, 0, { commit: !0 }),
-            onEndKeyDown: () => !c && V(a, S.length - 1, { commit: !0 }),
-            onStepKeyDown: ({ event: y, direction: R }) => {
-              if (!c) {
-                const H = G.includes(y.key) || y.shiftKey && W.includes(y.key) ? 10 : 1, k = b.current, E = S[k], P = s * H * R;
-                V(E + P, k, { commit: !0 });
-              }
-            }
-          }
-        ) }) })
-      }
-    );
-  }
-);
-Z.displayName = M;
-var [ee, te] = Q(M, {
-  startEdge: "left",
-  endEdge: "right",
-  size: "width",
-  direction: 1
-}), Ce = l.forwardRef(
-  (e, t) => {
-    const {
-      min: r,
-      max: n,
-      dir: a,
-      inverted: s,
-      onSlideStart: i,
-      onSlideMove: c,
-      onSlideEnd: d,
-      onStepKeyDown: p,
-      ...f
-    } = e, [o, m] = l.useState(null), v = _(t, (w) => m(w)), x = l.useRef(void 0), g = ye(a), h = g === "ltr", b = h && !s || !h && s;
-    function D(w) {
-      const S = x.current || o.getBoundingClientRect(), T = [0, S.width], B = U(T, b ? [r, n] : [n, r]);
-      return x.current = S, B(w - S.left);
-    }
-    return /* @__PURE__ */ u(
-      ee,
-      {
-        scope: e.__scopeSlider,
-        startEdge: b ? "left" : "right",
-        endEdge: b ? "right" : "left",
-        direction: b ? 1 : -1,
-        size: "width",
-        children: /* @__PURE__ */ u(
-          re,
-          {
-            dir: g,
-            "data-orientation": "horizontal",
-            ...f,
-            ref: v,
-            style: {
-              ...f.style,
-              "--radix-slider-thumb-transform": "translateX(-50%)"
-            },
-            onSlideStart: (w) => {
-              const S = D(w.clientX);
-              i?.(S);
-            },
-            onSlideMove: (w) => {
-              const S = D(w.clientX);
-              c?.(S);
-            },
-            onSlideEnd: () => {
-              x.current = void 0, d?.();
-            },
-            onStepKeyDown: (w) => {
-              const T = J[b ? "from-left" : "from-right"].includes(w.key);
-              p?.({ event: w, direction: T ? -1 : 1 });
-            }
-          }
-        )
-      }
-    );
-  }
-), _e = l.forwardRef(
-  (e, t) => {
-    const {
-      min: r,
-      max: n,
-      inverted: a,
-      onSlideStart: s,
-      onSlideMove: i,
-      onSlideEnd: c,
-      onStepKeyDown: d,
-      ...p
-    } = e, f = l.useRef(null), o = _(t, f), m = l.useRef(void 0), v = !a;
-    function x(g) {
-      const h = m.current || f.current.getBoundingClientRect(), b = [0, h.height], w = U(b, v ? [n, r] : [r, n]);
-      return m.current = h, w(g - h.top);
-    }
-    return /* @__PURE__ */ u(
-      ee,
-      {
-        scope: e.__scopeSlider,
-        startEdge: v ? "bottom" : "top",
-        endEdge: v ? "top" : "bottom",
-        size: "height",
-        direction: v ? 1 : -1,
-        children: /* @__PURE__ */ u(
-          re,
-          {
-            "data-orientation": "vertical",
-            ...p,
-            ref: o,
-            style: {
-              ...p.style,
-              "--radix-slider-thumb-transform": "translateY(50%)"
-            },
-            onSlideStart: (g) => {
-              const h = x(g.clientY);
-              s?.(h);
-            },
-            onSlideMove: (g) => {
-              const h = x(g.clientY);
-              i?.(h);
-            },
-            onSlideEnd: () => {
-              m.current = void 0, c?.();
-            },
-            onStepKeyDown: (g) => {
-              const b = J[v ? "from-bottom" : "from-top"].includes(g.key);
-              d?.({ event: g, direction: b ? -1 : 1 });
-            }
-          }
-        )
-      }
-    );
-  }
-), re = l.forwardRef(
-  (e, t) => {
-    const {
-      __scopeSlider: r,
-      onSlideStart: n,
-      onSlideMove: a,
-      onSlideEnd: s,
-      onHomeKeyDown: i,
-      onEndKeyDown: c,
-      onStepKeyDown: d,
-      ...p
-    } = e, f = N(M, r);
-    return /* @__PURE__ */ u(
-      K.span,
-      {
-        ...p,
-        ref: t,
-        onKeyDown: C(e.onKeyDown, (o) => {
-          o.key === "Home" ? (i(o), o.preventDefault()) : o.key === "End" ? (c(o), o.preventDefault()) : G.concat(W).includes(o.key) && (d(o), o.preventDefault());
-        }),
-        onPointerDown: C(e.onPointerDown, (o) => {
-          const m = o.target;
-          m.setPointerCapture(o.pointerId), o.preventDefault(), f.thumbs.has(m) ? m.focus() : n(o);
-        }),
-        onPointerMove: C(e.onPointerMove, (o) => {
-          o.target.hasPointerCapture(o.pointerId) && a(o);
-        }),
-        onPointerUp: C(e.onPointerUp, (o) => {
-          const m = o.target;
-          m.hasPointerCapture(o.pointerId) && (m.releasePointerCapture(o.pointerId), s(o));
-        })
-      }
-    );
-  }
-), ne = "SliderTrack", oe = l.forwardRef(
-  (e, t) => {
-    const { __scopeSlider: r, ...n } = e, a = N(ne, r);
-    return /* @__PURE__ */ u(
-      K.span,
-      {
-        "data-disabled": a.disabled ? "" : void 0,
-        "data-orientation": a.orientation,
-        ...n,
-        ref: t
-      }
-    );
-  }
-);
-oe.displayName = ne;
-var L = "SliderRange", ae = l.forwardRef(
-  (e, t) => {
-    const { __scopeSlider: r, ...n } = e, a = N(L, r), s = te(L, r), i = l.useRef(null), c = _(t, i), d = a.values.length, p = a.values.map(
-      (m) => ce(m, a.min, a.max)
-    ), f = d > 1 ? Math.min(...p) : 0, o = 100 - Math.max(...p);
-    return /* @__PURE__ */ u(
-      K.span,
-      {
-        "data-orientation": a.orientation,
-        "data-disabled": a.disabled ? "" : void 0,
-        ...n,
-        ref: c,
-        style: {
-          ...e.style,
-          [s.startEdge]: f + "%",
-          [s.endEdge]: o + "%"
-        }
-      }
-    );
-  }
-);
-ae.displayName = L;
-var $ = "SliderThumb", ie = l.forwardRef(
-  (e, t) => {
-    const r = Pe(e.__scopeSlider), [n, a] = l.useState(null), s = _(t, (c) => a(c)), i = l.useMemo(
-      () => n ? r().findIndex((c) => c.ref.current === n) : -1,
-      [r, n]
-    );
-    return /* @__PURE__ */ u(Me, { ...e, ref: s, index: i });
-  }
-), Me = l.forwardRef(
-  (e, t) => {
-    const { __scopeSlider: r, index: n, name: a, ...s } = e, i = N($, r), c = te($, r), [d, p] = l.useState(null), f = _(t, (D) => p(D)), o = d ? i.form || !!d.closest("form") : !0, m = Re(d), v = i.values[n], x = v === void 0 ? 0 : ce(v, i.min, i.max), g = ke(n, i.values.length), h = m?.[c.size], b = h ? Ie(h, x, c.direction) : 0;
-    return l.useEffect(() => {
-      if (d)
-        return i.thumbs.add(d), () => {
-          i.thumbs.delete(d);
-        };
-    }, [d, i.thumbs]), /* @__PURE__ */ pe(
-      "span",
-      {
-        style: {
-          transform: "var(--radix-slider-thumb-transform)",
-          position: "absolute",
-          [c.startEdge]: `calc(${x}% + ${b}px)`
-        },
-        children: [
-          /* @__PURE__ */ u(O.ItemSlot, { scope: e.__scopeSlider, children: /* @__PURE__ */ u(
-            K.span,
-            {
-              role: "slider",
-              "aria-label": e["aria-label"] || g,
-              "aria-valuemin": i.min,
-              "aria-valuenow": v,
-              "aria-valuemax": i.max,
-              "aria-orientation": i.orientation,
-              "data-orientation": i.orientation,
-              "data-disabled": i.disabled ? "" : void 0,
-              tabIndex: i.disabled ? void 0 : 0,
-              ...s,
-              ref: f,
-              style: v === void 0 ? { display: "none" } : e.style,
-              onFocus: C(e.onFocus, () => {
-                i.valueIndexToChangeRef.current = n;
-              })
-            }
-          ) }),
-          o && /* @__PURE__ */ u(
-            se,
-            {
-              name: a ?? (i.name ? i.name + (i.values.length > 1 ? "[]" : "") : void 0),
-              form: i.form,
-              value: v
-            },
-            n
-          )
-        ]
-      }
-    );
-  }
-);
-ie.displayName = $;
-var Te = "RadioBubbleInput", se = l.forwardRef(
-  ({ __scopeSlider: e, value: t, ...r }, n) => {
-    const a = l.useRef(null), s = _(a, n), i = xe(t);
-    return l.useEffect(() => {
-      const c = a.current;
-      if (!c) return;
-      const d = window.HTMLInputElement.prototype, f = Object.getOwnPropertyDescriptor(d, "value").set;
-      if (i !== t && f) {
-        const o = new Event("input", { bubbles: !0 });
-        f.call(c, t), c.dispatchEvent(o);
-      }
-    }, [i, t]), /* @__PURE__ */ u(
-      K.input,
-      {
-        style: { display: "none" },
-        ...r,
-        ref: s,
-        defaultValue: t
-      }
-    );
-  }
-);
-se.displayName = Te;
-function Ve(e = [], t, r) {
-  const n = [...e];
-  return n[r] = t, n.sort((a, s) => a - s);
-}
-function ce(e, t, r) {
-  const s = 100 / (r - t) * (e - t);
-  return X(s, [0, 100]);
-}
-function ke(e, t) {
-  return t > 2 ? `Value ${e + 1} of ${t}` : t === 2 ? ["Minimum", "Maximum"][e] : void 0;
-}
-function Ke(e, t) {
-  if (e.length === 1) return 0;
-  const r = e.map((a) => Math.abs(a - t)), n = Math.min(...r);
-  return r.indexOf(n);
-}
-function Ie(e, t, r) {
-  const n = e / 2, s = U([0, 50], [0, n]);
-  return (n - s(t) * r) * r;
-}
-function Ne(e) {
-  return e.slice(0, -1).map((t, r) => e[r + 1] - t);
-}
-function Ae(e, t) {
-  if (t > 0) {
-    const r = Ne(e);
-    return Math.min(...r) >= t;
-  }
-  return !0;
-}
-function U(e, t) {
-  return (r) => {
-    if (e[0] === e[1] || t[0] === t[1]) return t[0];
-    const n = (t[1] - t[0]) / (e[1] - e[0]);
-    return t[0] + n * (r - e[0]);
-  };
-}
-function Be(e) {
-  return (String(e).split(".")[1] || "").length;
-}
-function ze(e, t) {
-  const r = Math.pow(10, t);
-  return Math.round(e * r) / r;
-}
-var He = Z, Oe = oe, Le = ae, $e = ie;
-const Ue = I([
+import { jsx as c } from "react/jsx-runtime";
+import { useFormFieldControl as T } from "@spark-ui/components/form-field";
+import { Slider as b } from "radix-ui";
+import { cva as f } from "class-variance-authority";
+import { createContext as w, useContext as N, useRef as x } from "react";
+const z = f([
   "flex relative h-sz-24 items-center",
   "touch-none select-none",
   "data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"
-]), le = be({}), de = () => he(le), ue = ({
-  asChild: e = !1,
-  intent: t = "basic",
-  shape: r = "square",
-  children: n,
-  className: a,
-  ref: s,
-  ...i
-}) => /* @__PURE__ */ u(le.Provider, { value: { intent: t, shape: r }, children: /* @__PURE__ */ u(
-  He,
-  {
-    ref: s,
-    "data-spark-component": "slider",
-    asChild: e,
-    className: Ue({ className: a }),
-    dir: "ltr",
-    orientation: "horizontal",
-    inverted: !1,
-    minStepsBetweenThumbs: 0,
-    ...i,
-    children: n
-  }
-) });
-ue.displayName = "Slider";
-const Fe = I(
+]), y = w({}), S = () => N(y), k = ({
+  asChild: n = !1,
+  intent: s = "basic",
+  shape: i = "square",
+  children: o,
+  className: d,
+  ref: a,
+  disabled: u,
+  readOnly: m,
+  name: p,
+  ...g
+}) => {
+  const r = T(), t = r.disabled ?? u, l = r.readOnly ?? m, e = r.name ?? p;
+  return console.log("✅ field ", r.disabled), /* @__PURE__ */ c(
+    y.Provider,
+    {
+      value: {
+        intent: s,
+        shape: i,
+        fieldLabelId: r.labelId,
+        fieldId: r.id
+      },
+      children: /* @__PURE__ */ c(
+        b.Root,
+        {
+          ref: a,
+          "data-spark-component": "slider",
+          asChild: n,
+          className: z({ className: d }),
+          dir: "ltr",
+          orientation: "horizontal",
+          inverted: !1,
+          minStepsBetweenThumbs: 0,
+          disabled: t || l,
+          name: e,
+          "aria-describedby": r.description,
+          "aria-invalid": r.isInvalid,
+          ...g,
+          children: o
+        }
+      )
+    }
+  );
+};
+k.displayName = "Slider";
+const I = f(
   [
     "block h-sz-24 w-sz-24 rounded-full cursor-pointer",
     "outline-hidden",
@@ -483,40 +81,42 @@ const Fe = I(
       intent: "basic"
     }
   }
-), F = ({
-  asChild: e = !1,
-  className: t,
-  onPointerDown: r,
-  onKeyDown: n,
-  onBlur: a,
-  ref: s,
-  ...i
+), h = ({
+  asChild: n = !1,
+  className: s,
+  onPointerDown: i,
+  onKeyDown: o,
+  onBlur: d,
+  ref: a,
+  ...u
 }) => {
-  const { intent: c } = de(), d = Se(null), p = s || d, f = (o) => {
-    typeof p == "function" || !p.current || (p.current.dataset.interaction = o.type);
+  const { intent: m, fieldLabelId: p, fieldId: g } = S(), r = x(null), t = a || r, l = (e) => {
+    typeof t == "function" || !t.current || (t.current.dataset.interaction = e.type);
   };
-  return /* @__PURE__ */ u(
-    $e,
+  return /* @__PURE__ */ c(
+    b.Thumb,
     {
       "data-spark-component": "slider-thumb",
-      ref: p,
-      asChild: e,
-      onPointerDown: (o) => {
-        f(o), r?.(o);
+      ref: t,
+      asChild: n,
+      id: g,
+      onPointerDown: (e) => {
+        l(e), i?.(e);
       },
-      onKeyDown: (o) => {
-        f(o), n?.(o);
+      onKeyDown: (e) => {
+        l(e), o?.(e);
       },
-      onBlur: (o) => {
-        f(o), a?.(o);
+      onBlur: (e) => {
+        l(e), d?.(e);
       },
-      className: Fe({ intent: c, className: t }),
-      ...i
+      className: I({ intent: m, className: s }),
+      "aria-labelledby": p,
+      ...u
     }
   );
 };
-F.displayName = "Slider.Thumb";
-const Ye = I(["relative grow h-sz-4 bg-on-background/dim-4"], {
+h.displayName = "Slider.Thumb";
+const V = f(["relative grow h-sz-4 bg-on-background/dim-4"], {
   variants: {
     shape: {
       rounded: "rounded-sm",
@@ -526,7 +126,7 @@ const Ye = I(["relative grow h-sz-4 bg-on-background/dim-4"], {
   defaultVariants: {
     shape: "square"
   }
-}), qe = I(["absolute h-full"], {
+}), q = f(["absolute h-full"], {
   variants: {
     intent: {
       main: ["bg-main"],
@@ -548,29 +148,29 @@ const Ye = I(["relative grow h-sz-4 bg-on-background/dim-4"], {
     intent: "basic",
     shape: "square"
   }
-}), Y = ({ asChild: e = !1, className: t, ref: r, ...n }) => {
-  const { intent: a, shape: s } = de();
-  return /* @__PURE__ */ u(
-    Oe,
+}), v = ({ asChild: n = !1, className: s, ref: i, ...o }) => {
+  const { intent: d, shape: a } = S();
+  return /* @__PURE__ */ c(
+    b.Track,
     {
       "data-spark-component": "slider-track",
-      ref: r,
-      asChild: e,
-      className: Ye({ shape: s }),
-      ...n,
-      children: /* @__PURE__ */ u(Le, { className: qe({ intent: a, shape: s, className: t }) })
+      ref: i,
+      asChild: n,
+      className: V({ shape: a }),
+      ...o,
+      children: /* @__PURE__ */ c(b.Range, { className: q({ intent: d, shape: a, className: s }) })
     }
   );
 };
-Y.displayName = "Slider.Track";
-const je = Object.assign(ue, {
-  Thumb: F,
-  Track: Y
+v.displayName = "Slider.Track";
+const C = Object.assign(k, {
+  Thumb: h,
+  Track: v
 });
-je.displayName = "Slider";
-F.displayName = "Slider.Thumb";
-Y.displayName = "Slider.Track";
+C.displayName = "Slider";
+h.displayName = "Slider.Thumb";
+v.displayName = "Slider.Track";
 export {
-  je as Slider
+  C as Slider
 };
 //# sourceMappingURL=index.mjs.map