@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/slider/index.mjs

@@ -1,334 +1,267 @@
-import { jsx as c, jsxs as Z, Fragment as ee } from "react/jsx-runtime";
-import { Slider as N } from "@base-ui/react/slider";
-import { useFormFieldControl as P } from "@spark-ui/components/form-field";
-import { createContext as W, useContext as _, useState as R, useRef as T, useCallback as F, useId as te, useEffect as D, forwardRef as G, useLayoutEffect as re } from "react";
-import { cva as L, cx as k } from "class-variance-authority";
-import { useMergeRefs as M } from "@spark-ui/hooks/use-merge-refs";
-import { F as ae } from "../FormFieldRequiredIndicator-DTnCGiX2.mjs";
-import { Label as ne } from "../label/index.mjs";
-import { a as oe } from "../Slot-DLY1rJrG.mjs";
-const se = L([
-  "grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative",
-  "touch-none select-none",
-  "data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"
-]), H = W({}), I = () => _(H), J = ({
-  intent: t = "support",
-  children: e,
-  className: r,
-  ref: a,
-  value: o,
-  defaultValue: l,
-  disabled: b,
-  readOnly: v,
-  name: n,
-  onValueChange: i,
-  onValueCommit: f,
-  min: u = 0,
-  max: m = 100,
-  ...g
-}) => {
-  const s = P(), h = s.disabled ?? b, p = s.readOnly ?? v, y = s.name ?? n, [S, x] = R(s.labelId), [V, C] = R(0), z = T(null), Q = T(null), U = F((d) => {
-    x(d);
-  }, []), Y = F(() => (C((d) => d + 1), () => C((d) => d - 1)), []);
-  return /* @__PURE__ */ c(
-    H.Provider,
-    {
-      value: {
-        intent: t,
-        min: u,
-        max: m,
-        fieldLabelId: s.labelId || S,
-        fieldId: s.id,
-        onLabelId: U,
-        hasValueInThumb: V > 0,
-        registerValueInThumb: Y,
-        controlRef: z,
-        thumbRef: Q
-      },
-      children: /* @__PURE__ */ c(
-        N.Root,
-        {
-          ref: a,
-          "data-spark-component": "slider",
-          className: se({ className: r }),
-          orientation: "horizontal",
-          disabled: h || p,
-          thumbAlignment: "edge",
-          name: y,
-          "aria-describedby": s.description,
-          "aria-invalid": s.isInvalid,
-          "aria-disabled": h || p ? !0 : void 0,
-          value: o !== void 0 ? [o] : void 0,
-          defaultValue: l !== void 0 ? [l] : void 0,
-          onValueChange: i ? (d) => {
-            const w = Array.isArray(d) ? d[0] ?? 0 : d;
-            i(w);
-          } : void 0,
-          onValueCommitted: f ? (d) => {
-            const w = Array.isArray(d) ? d[0] ?? 0 : d;
-            f(w);
-          } : void 0,
-          min: u,
-          max: m,
-          ...g,
-          children: e
-        }
-      )
-    }
-  );
+import { Slottable as e } from "../slot/index.mjs";
+import { t } from "../label-BqRlrca0.mjs";
+import { t as n } from "../FormFieldRequiredIndicator-DOGQ_HxO.mjs";
+import { cva as r, cx as i } from "class-variance-authority";
+import { createContext as a, forwardRef as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useRef as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useMergeRefs as _ } from "@spark-ui/hooks/use-merge-refs";
+import { useFormFieldControl as v } from "@spark-ui/components/form-field";
+import { Slider as y } from "@base-ui/react/slider";
+//#region src/slider/Slider.styles.ts
+var b = r([
+	"grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative",
+	"touch-none select-none",
+	"data-disabled:cursor-not-allowed data-disabled:opacity-dim-3"
+]), x = a({}), S = () => c(x), C = ({ intent: e = "support", children: t, className: n, ref: r, value: i, defaultValue: a, disabled: o, readOnly: c, name: l, onValueChange: u, onValueCommit: d, min: m = 0, max: g = 100, ..._ }) => {
+	let S = v(), C = S.disabled ?? o, w = S.readOnly ?? c, T = S.name ?? l, [E, D] = p(S.labelId), [O, k] = p(0), A = f(null), j = f(null), M = s((e) => {
+		D(e);
+	}, []), N = s(() => (k((e) => e + 1), () => k((e) => e - 1)), []);
+	return /* @__PURE__ */ h(x.Provider, {
+		value: {
+			intent: e,
+			min: m,
+			max: g,
+			fieldLabelId: S.labelId || E,
+			fieldId: S.id,
+			onLabelId: M,
+			hasValueInThumb: O > 0,
+			registerValueInThumb: N,
+			controlRef: A,
+			thumbRef: j
+		},
+		children: /* @__PURE__ */ h(y.Root, {
+			ref: r,
+			"data-spark-component": "slider",
+			className: b({ className: n }),
+			orientation: "horizontal",
+			disabled: C || w,
+			thumbAlignment: "edge",
+			name: T,
+			"aria-describedby": S.description,
+			"aria-invalid": S.isInvalid,
+			"aria-disabled": C || w ? !0 : void 0,
+			value: i === void 0 ? void 0 : [i],
+			defaultValue: a === void 0 ? void 0 : [a],
+			onValueChange: u ? (e) => {
+				u(Array.isArray(e) ? e[0] ?? 0 : e);
+			} : void 0,
+			onValueCommitted: d ? (e) => {
+				d(Array.isArray(e) ? e[0] ?? 0 : e);
+			} : void 0,
+			min: m,
+			max: g,
+			..._,
+			children: t
+		})
+	});
 };
-J.displayName = "Slider";
-const A = ({ className: t, ref: e, ...r }) => {
-  const { hasValueInThumb: a, controlRef: o } = I(), l = M(o, e);
-  return /* @__PURE__ */ c(
-    N.Control,
-    {
-      "data-spark-component": "slider-control",
-      ref: l,
-      className: k(
-        "min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center",
-        a && "mt-xl",
-        t
-      ),
-      ...r
-    }
-  );
+C.displayName = "Slider";
+//#endregion
+//#region src/slider/SliderControl.tsx
+var w = ({ className: e, ref: t, ...n }) => {
+	let { hasValueInThumb: r, controlRef: a } = S(), o = _(a, t);
+	return /* @__PURE__ */ h(y.Control, {
+		"data-spark-component": "slider-control",
+		ref: o,
+		className: i("min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center", r && "mt-xl", e),
+		...n
+	});
 };
-A.displayName = "Slider.Control";
-const le = L(["relative grow h-sz-4 bg-on-background/dim-4 rounded-sm"]), ie = L(
-  [
-    "absolute h-full rounded-sm",
-    // Disable transitions during drag to eliminate latency
-    "transition-none"
-  ],
-  {
-    variants: {
-      intent: {
-        main: ["bg-main"],
-        support: ["bg-support"],
-        accent: ["bg-accent"],
-        info: ["bg-info"],
-        neutral: ["bg-neutral"],
-        success: ["bg-success"],
-        alert: ["bg-alert"],
-        error: ["bg-error"]
-      }
-    },
-    defaultVariants: {
-      intent: "support"
-    }
-  }
-), O = ({ className: t, ref: e, ...r }) => {
-  const { intent: a } = I();
-  return /* @__PURE__ */ c(
-    N.Indicator,
-    {
-      "data-spark-component": "slider-indicator",
-      ref: e,
-      className: ie({ intent: a, className: t }),
-      ...r
-    }
-  );
+w.displayName = "Slider.Control";
+//#endregion
+//#region src/slider/SliderTrack.styles.ts
+var T = r(["relative grow h-sz-4 bg-on-background/dim-4 rounded-sm"]), E = r(["absolute h-full rounded-sm", "transition-none"], {
+	variants: { intent: {
+		main: ["bg-main"],
+		support: ["bg-support"],
+		accent: ["bg-accent"],
+		info: ["bg-info"],
+		neutral: ["bg-neutral"],
+		success: ["bg-success"],
+		alert: ["bg-alert"],
+		error: ["bg-error"]
+	} },
+	defaultVariants: { intent: "support" }
+}), D = ({ className: e, ref: t, ...n }) => {
+	let { intent: r } = S();
+	return /* @__PURE__ */ h(y.Indicator, {
+		"data-spark-component": "slider-indicator",
+		ref: t,
+		className: E({
+			intent: r,
+			className: e
+		}),
+		...n
+	});
 };
-O.displayName = "Slider.Indicator";
-const de = ":slider-label", q = ({
-  htmlFor: t,
-  id: e,
-  className: r,
-  children: a,
-  requiredIndicator: o = /* @__PURE__ */ c(ae, {}),
-  asChild: l,
-  ref: b,
-  ...v
-}) => {
-  const n = P(), { fieldLabelId: i, fieldId: f, onLabelId: u } = I(), m = te(), g = `${de}-${m}`, s = e || i || n.labelId || g, h = l ? void 0 : t || f || n.id, p = n.disabled, y = n.isRequired, S = T(null), x = M(b, S);
-  return D(() => {
-    u && !i && !n.labelId && u(s);
-  }, [u, i, n.labelId, s]), /* @__PURE__ */ c(
-    ne,
-    {
-      ref: x,
-      id: s,
-      "data-spark-component": "slider-label",
-      htmlFor: h,
-      className: k(p ? "text-on-surface/dim-3 pointer-events-none" : void 0, r),
-      asChild: l,
-      ...v,
-      children: /* @__PURE__ */ Z(ee, { children: [
-        /* @__PURE__ */ c(oe, { children: a }),
-        y && o
-      ] })
-    }
-  );
+D.displayName = "Slider.Indicator";
+//#endregion
+//#region src/slider/SliderLabel.tsx
+var O = ":slider-label", k = ({ htmlFor: r, id: a, className: o, children: s, requiredIndicator: c = /* @__PURE__ */ h(n, {}), asChild: d, ref: p, ...y }) => {
+	let b = v(), { fieldLabelId: x, fieldId: C, onLabelId: w } = S(), T = `${O}-${u()}`, E = a || x || b.labelId || T, D = d ? void 0 : r || C || b.id, k = b.disabled, A = b.isRequired, j = _(p, f(null));
+	return l(() => {
+		w && !x && !b.labelId && w(E);
+	}, [
+		w,
+		x,
+		b.labelId,
+		E
+	]), /* @__PURE__ */ h(t, {
+		ref: j,
+		id: E,
+		"data-spark-component": "slider-label",
+		htmlFor: D,
+		className: i(k ? "text-on-surface/dim-3 pointer-events-none" : void 0, o),
+		asChild: d,
+		...y,
+		children: /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(e, { children: s }), A && c] })
+	});
 };
-q.displayName = "Slider.Label";
-const X = G(
-  ({ className: t, children: e }, r) => {
-    const { max: a = 100 } = I(), o = e ? e(a) : a;
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        "data-spark-component": "slider-max-value",
-        ref: r,
-        className: k("text-on-surface/dim-1 text-body-2 col-start-2 text-right", t),
-        children: o
-      }
-    );
-  }
-);
-X.displayName = "Slider.MaxValue";
-const $ = G(
-  ({ className: t, children: e }, r) => {
-    const { min: a = 0 } = I(), o = e ? e(a) : a;
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        "data-spark-component": "slider-min-value",
-        ref: r,
-        className: k("text-on-surface/dim-1 text-body-2 col-start-1 text-left", t),
-        children: o
-      }
-    );
-  }
-);
-$.displayName = "Slider.MinValue";
-const K = W(null), ce = () => _(K), ue = L(
-  [
-    "relative block size-sz-24 rounded-full cursor-pointer",
-    "outline-hidden",
-    "has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus",
-    "data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden",
-    // visual thumb
-    "after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2",
-    "after:size-sz-24 after:rounded-full",
-    // hover effect
-    "before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2",
-    "before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75",
-    "hover:before:size-sz-32 data-dragging:before:size-sz-32"
-  ],
-  {
-    variants: {
-      intent: {
-        main: ["after:bg-main", "before:bg-main-container before:border-main"],
-        support: ["after:bg-support", "before:bg-support-container before:border-support"],
-        accent: ["after:bg-accent", "before:bg-accent-container before:border-accent"],
-        info: ["after:bg-info", "before:bg-info-container before:border-info"],
-        neutral: ["after:bg-neutral", "before:bg-neutral-container before:border-neutral"],
-        success: ["after:bg-success", "before:bg-success-container before:border-success"],
-        alert: ["after:bg-alert", "before:bg-alert-container before:border-alert"],
-        error: ["after:bg-error", "before:bg-error-container before:border-error"]
-      }
-    },
-    defaultVariants: {
-      intent: "support"
-    }
-  }
-), E = ({
-  className: t,
-  ref: e,
-  children: r,
-  ...a
-}) => {
-  const { intent: o, fieldLabelId: l, fieldId: b, thumbRef: v } = I(), n = T(null), i = M(v, e ?? n);
-  return /* @__PURE__ */ c(K.Provider, { value: { isInsideThumb: !0 }, children: /* @__PURE__ */ c(
-    N.Thumb,
-    {
-      "data-spark-component": "slider-thumb",
-      ref: i,
-      id: b,
-      className: ue({ intent: o, className: t }),
-      "aria-labelledby": l,
-      ...a,
-      children: r
-    }
-  ) });
+k.displayName = "Slider.Label";
+//#endregion
+//#region src/slider/SliderMaxValue.tsx
+var A = o(({ className: e, children: t }, n) => {
+	let { max: r = 100 } = S(), a = t ? t(r) : r;
+	return /* @__PURE__ */ h("div", {
+		"data-spark-component": "slider-max-value",
+		ref: n,
+		className: i("text-on-surface/dim-1 text-body-2 col-start-2 text-right", e),
+		children: a
+	});
+});
+A.displayName = "Slider.MaxValue";
+//#endregion
+//#region src/slider/SliderMinValue.tsx
+var j = o(({ className: e, children: t }, n) => {
+	let { min: r = 0 } = S(), a = t ? t(r) : r;
+	return /* @__PURE__ */ h("div", {
+		"data-spark-component": "slider-min-value",
+		ref: n,
+		className: i("text-on-surface/dim-1 text-body-2 col-start-1 text-left", e),
+		children: a
+	});
+});
+j.displayName = "Slider.MinValue";
+//#endregion
+//#region src/slider/SliderThumb.styles.ts
+var M = r([
+	"relative block size-sz-24 rounded-full cursor-pointer",
+	"outline-hidden",
+	"has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus",
+	"data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden",
+	"after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2",
+	"after:size-sz-24 after:rounded-full",
+	"before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2",
+	"before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75",
+	"hover:before:size-sz-32 data-dragging:before:size-sz-32"
+], {
+	variants: { intent: {
+		main: ["after:bg-main", "before:bg-main-container before:border-main"],
+		support: ["after:bg-support", "before:bg-support-container before:border-support"],
+		accent: ["after:bg-accent", "before:bg-accent-container before:border-accent"],
+		info: ["after:bg-info", "before:bg-info-container before:border-info"],
+		neutral: ["after:bg-neutral", "before:bg-neutral-container before:border-neutral"],
+		success: ["after:bg-success", "before:bg-success-container before:border-success"],
+		alert: ["after:bg-alert", "before:bg-alert-container before:border-alert"],
+		error: ["after:bg-error", "before:bg-error-container before:border-error"]
+	} },
+	defaultVariants: { intent: "support" }
+}), N = a(null), P = () => c(N), F = ({ className: e, ref: t, children: n, ...r }) => {
+	let { intent: i, fieldLabelId: a, fieldId: o, thumbRef: s } = S(), c = f(null), l = _(s, t ?? c);
+	return /* @__PURE__ */ h(N.Provider, {
+		value: { isInsideThumb: !0 },
+		children: /* @__PURE__ */ h(y.Thumb, {
+			"data-spark-component": "slider-thumb",
+			ref: l,
+			id: o,
+			className: M({
+				intent: i,
+				className: e
+			}),
+			"aria-labelledby": a,
+			...r,
+			children: n
+		})
+	});
 };
-E.displayName = "Slider.Thumb";
-const j = ({ className: t, ref: e, ...r }) => /* @__PURE__ */ c(
-  N.Track,
-  {
-    "data-spark-component": "slider-track",
-    ref: e,
-    className: le({ className: t }),
-    ...r
-  }
-);
-j.displayName = "Slider.Track";
-function be(t, e, r, a) {
-  const [o, l] = R(0), [b, v] = R(!1);
-  return re(() => {
-    const n = t.current, i = e.current, f = r.current;
-    if (!n || !i || !f) {
-      l(0), b || requestAnimationFrame(() => v(!0));
-      return;
-    }
-    let u = !1;
-    const m = () => {
-      if (u) return;
-      const s = n.getBoundingClientRect(), h = i.getBoundingClientRect(), p = f.scrollWidth;
-      if (p === 0) {
-        requestAnimationFrame(m);
-        return;
-      }
-      const y = h.left - s.left + h.width / 2, S = p / 2, x = s.width - p / 2, C = Math.max(S, Math.min(x, y)) - y;
-      l((z) => z !== C ? C : z);
-    };
-    m();
-    const g = new ResizeObserver(m);
-    return g.observe(n), g.observe(f), () => {
-      u = !0, g.disconnect();
-    };
-  }, [t, e, r, a, b]), o;
+F.displayName = "Slider.Thumb";
+//#endregion
+//#region src/slider/SliderTrack.tsx
+var I = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ h(y.Track, {
+	"data-spark-component": "slider-track",
+	ref: t,
+	className: T({ className: e }),
+	...n
+});
+I.displayName = "Slider.Track";
+//#endregion
+//#region src/slider/useSliderValueBoundaries.ts
+function L(e, t, n, r) {
+	let [i, a] = p(0), [o, s] = p(!1);
+	return d(() => {
+		let r = e.current, i = t.current, c = n.current;
+		if (!r || !i || !c) {
+			a(0), o || requestAnimationFrame(() => s(!0));
+			return;
+		}
+		let l = !1, u = () => {
+			if (l) return;
+			let e = r.getBoundingClientRect(), t = i.getBoundingClientRect(), n = c.scrollWidth;
+			if (n === 0) {
+				requestAnimationFrame(u);
+				return;
+			}
+			let o = t.left - e.left + t.width / 2, s = n / 2, d = e.width - n / 2, f = Math.max(s, Math.min(d, o)) - o;
+			a((e) => e === f ? e : f);
+		};
+		u();
+		let d = new ResizeObserver(u);
+		return d.observe(r), d.observe(c), () => {
+			l = !0, d.disconnect();
+		};
+	}, [
+		e,
+		t,
+		n,
+		r,
+		o
+	]), i;
 }
-const B = ({ className: t, children: e, ref: r, ...a }) => {
-  const { registerValueInThumb: o, controlRef: l, thumbRef: b } = I(), n = ce() !== null, i = T(null), f = M(i, r), [u, m] = R(0), g = be(l, b, i, u);
-  D(() => {
-    if (n)
-      return o();
-  }, [n, o]);
-  const s = k(
-    n ? "absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap" : "default:text-body-1 col-start-2 text-right default:font-bold",
-    t
-  ), h = F(
-    (y, S) => {
-      const x = y[0] ?? String(S[0] ?? ""), V = S[0] ?? 0;
-      return m(V), typeof e == "function" ? e(x, V) : x;
-    },
-    [e]
-  ), p = n ? { transform: `translate(calc(0% + ${g}px), 0)` } : void 0;
-  return /* @__PURE__ */ c(
-    N.Value,
-    {
-      "data-spark-component": "slider-value",
-      ref: f,
-      className: s,
-      style: p,
-      ...a,
-      children: h
-    }
-  );
+//#endregion
+//#region src/slider/SliderValue.tsx
+var R = ({ className: e, children: t, ref: n, ...r }) => {
+	let { registerValueInThumb: a, controlRef: o, thumbRef: c } = S(), u = P() !== null, d = f(null), m = _(d, n), [g, v] = p(0), b = L(o, c, d, g);
+	l(() => {
+		if (u) return a();
+	}, [u, a]);
+	let x = i(u ? "absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap" : "default:text-body-1 col-start-2 text-right default:font-bold", e), C = s((e, n) => {
+		let r = e[0] ?? String(n[0] ?? ""), i = n[0] ?? 0;
+		return v(i), typeof t == "function" ? t(r, i) : r;
+	}, [t]), w = u ? { transform: `translate(calc(0% + ${b}px), 0)` } : void 0;
+	return /* @__PURE__ */ h(y.Value, {
+		"data-spark-component": "slider-value",
+		ref: m,
+		className: x,
+		style: w,
+		...r,
+		children: C
+	});
 };
-B.displayName = "Slider.Value";
-const fe = Object.assign(J, {
-  Control: A,
-  Indicator: O,
-  Label: q,
-  MaxValue: X,
-  MinValue: $,
-  Thumb: E,
-  Track: j,
-  Value: B
+R.displayName = "Slider.Value";
+//#endregion
+//#region src/slider/index.ts
+var z = Object.assign(C, {
+	Control: w,
+	Indicator: D,
+	Label: k,
+	MaxValue: A,
+	MinValue: j,
+	Thumb: F,
+	Track: I,
+	Value: R
 });
-fe.displayName = "Slider";
-A.displayName = "Slider.Control";
-O.displayName = "Slider.Indicator";
-q.displayName = "Slider.Label";
-X.displayName = "Slider.MaxValue";
-$.displayName = "Slider.MinValue";
-E.displayName = "Slider.Thumb";
-j.displayName = "Slider.Track";
-B.displayName = "Slider.Value";
-export {
-  fe as Slider
-};
-//# sourceMappingURL=index.mjs.map
+z.displayName = "Slider", w.displayName = "Slider.Control", D.displayName = "Slider.Indicator", k.displayName = "Slider.Label", A.displayName = "Slider.MaxValue", j.displayName = "Slider.MinValue", F.displayName = "Slider.Thumb", I.displayName = "Slider.Track", R.displayName = "Slider.Value";
+//#endregion
+export { z as Slider };
+
+//# sourceMappingURL=index.mjs.map