@spark-ui/components 14.1.2 → 15.1.0

package/dist/slider/index.mjs

@@ -1,176 +1,339 @@
-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",
+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 { S as oe } from "../Slot-D2Bbf8Gw.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"
-]), y = w({}), S = () => N(y), k = ({
-  asChild: n = !1,
-  intent: s = "basic",
-  shape: i = "square",
-  children: o,
-  className: d,
+]), H = W({}), I = () => _(H), J = ({
+  intent: t = "basic",
+  children: e,
+  className: r,
   ref: a,
-  disabled: u,
-  readOnly: m,
-  name: p,
+  value: o,
+  defaultValue: l,
+  disabled: b,
+  readOnly: v,
+  name: n,
+  onValueChange: i,
+  onValueCommit: f,
+  min: u = 0,
+  max: m = 100,
   ...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,
+  const s = P(), h = s.disabled ?? b, p = s.readOnly ?? v, S = s.name ?? n, [y, 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: s,
-        shape: i,
-        fieldLabelId: r.labelId,
-        fieldId: r.id
+        intent: t,
+        min: u,
+        max: m,
+        fieldLabelId: s.labelId || y,
+        fieldId: s.id,
+        onLabelId: U,
+        hasValueInThumb: V > 0,
+        registerValueInThumb: Y,
+        controlRef: z,
+        thumbRef: Q
       },
       children: /* @__PURE__ */ c(
-        b.Root,
+        N.Root,
         {
           ref: a,
           "data-spark-component": "slider",
-          asChild: n,
-          className: z({ className: d }),
-          dir: "ltr",
+          className: se({ className: r }),
           orientation: "horizontal",
-          inverted: !1,
-          minStepsBetweenThumbs: 0,
-          disabled: t || l,
-          name: e,
-          "aria-describedby": r.description,
-          "aria-invalid": r.isInvalid,
+          disabled: h || p,
+          thumbAlignment: "edge",
+          name: S,
+          "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: o
+          children: e
         }
       )
     }
   );
 };
-k.displayName = "Slider";
-const I = f(
+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
+    }
+  );
+};
+A.displayName = "Slider.Control";
+const le = L(["relative grow h-sz-4 bg-on-background/dim-4 rounded-sm"]), ie = L(
   [
-    "block h-sz-24 w-sz-24 rounded-full cursor-pointer",
-    "outline-hidden",
-    "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus",
-    "data-[interaction=pointerdown]:focus-visible:ring-0!",
-    "data-disabled:hover:ring-0 data-disabled:hover:after:w-0 data-disabled:hover:after:h-0 data-disabled:cursor-not-allowed",
-    "after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-hide",
-    "after:w-0 after:h-0 after:rounded-full after:border-solid after:border-sm after:transition-all duration-300",
-    "hover:after:w-sz-32 hover:after:h-sz-32"
+    "absolute h-full rounded-sm",
+    // Disable transitions during drag to eliminate latency
+    "transition-none"
   ],
   {
     variants: {
       intent: {
-        main: ["bg-main", "after:bg-main-container after:border-main"],
-        support: ["bg-support", "after:bg-support-container after:border-support"],
-        accent: ["bg-accent", "after:bg-accent-container after:border-accent"],
-        basic: ["bg-basic", "after:bg-basic-container after:border-basic"],
-        info: ["bg-info", "after:bg-info-container after:border-info"],
-        neutral: ["bg-neutral", "after:bg-neutral-container after:border-neutral"],
-        success: ["bg-success", "after:bg-success-container after:border-success"],
-        alert: ["bg-alert", "after:bg-alert-container after:border-alert"],
-        error: ["bg-error", "after:bg-error-container after:border-error"]
+        main: ["bg-main"],
+        support: ["bg-support"],
+        accent: ["bg-accent"],
+        basic: ["bg-basic"],
+        info: ["bg-info"],
+        neutral: ["bg-neutral"],
+        success: ["bg-success"],
+        alert: ["bg-alert"],
+        error: ["bg-error"]
       }
     },
     defaultVariants: {
       intent: "basic"
     }
   }
-), h = ({
-  asChild: n = !1,
-  className: s,
-  onPointerDown: i,
-  onKeyDown: o,
-  onBlur: d,
-  ref: a,
-  ...u
-}) => {
-  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);
-  };
+), O = ({ className: t, ref: e, ...r }) => {
+  const { intent: a } = I();
   return /* @__PURE__ */ c(
-    b.Thumb,
+    N.Indicator,
     {
-      "data-spark-component": "slider-thumb",
-      ref: t,
-      asChild: n,
-      id: g,
-      onPointerDown: (e) => {
-        l(e), i?.(e);
-      },
-      onKeyDown: (e) => {
-        l(e), o?.(e);
-      },
-      onBlur: (e) => {
-        l(e), d?.(e);
-      },
-      className: I({ intent: m, className: s }),
-      "aria-labelledby": p,
-      ...u
+      "data-spark-component": "slider-indicator",
+      ref: e,
+      className: ie({ intent: a, className: t }),
+      ...r
     }
   );
 };
-h.displayName = "Slider.Thumb";
-const V = f(["relative grow h-sz-4 bg-on-background/dim-4"], {
-  variants: {
-    shape: {
-      rounded: "rounded-sm",
-      square: "rounded-0"
+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, S = n.isRequired, y = T(null), x = M(b, y);
+  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 }),
+        S && o
+      ] })
     }
-  },
-  defaultVariants: {
-    shape: "square"
+  );
+};
+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
+      }
+    );
   }
-}), q = f(["absolute h-full"], {
-  variants: {
-    intent: {
-      main: ["bg-main"],
-      support: ["bg-support"],
-      accent: ["bg-accent"],
-      basic: ["bg-basic"],
-      info: ["bg-info"],
-      neutral: ["bg-neutral"],
-      success: ["bg-success"],
-      alert: ["bg-alert"],
-      error: ["bg-error"]
+);
+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"],
+        basic: ["after:bg-basic", "before:bg-basic-container before:border-basic"],
+        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"]
+      }
     },
-    shape: {
-      rounded: "rounded-sm",
-      square: "rounded-0"
+    defaultVariants: {
+      intent: "basic"
     }
-  },
-  defaultVariants: {
-    intent: "basic",
-    shape: "square"
   }
-}), v = ({ asChild: n = !1, className: s, ref: i, ...o }) => {
-  const { intent: d, shape: a } = S();
-  return /* @__PURE__ */ c(
-    b.Track,
+), 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-track",
+      "data-spark-component": "slider-thumb",
       ref: i,
-      asChild: n,
-      className: V({ shape: a }),
-      ...o,
-      children: /* @__PURE__ */ c(b.Range, { className: q({ intent: d, shape: a, className: s }) })
+      id: b,
+      className: ue({ intent: o, className: t }),
+      "aria-labelledby": l,
+      ...a,
+      children: r
+    }
+  ) });
+};
+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 S = h.left - s.left + h.width / 2, y = p / 2, x = s.width - p / 2, C = Math.max(y, Math.min(x, S)) - S;
+      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;
+}
+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(
+    (S, y) => {
+      const x = S[0] ?? String(y[0] ?? ""), V = y[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
     }
   );
 };
-v.displayName = "Slider.Track";
-const C = Object.assign(k, {
-  Thumb: h,
-  Track: v
+B.displayName = "Slider.Value";
+const fe = Object.assign(J, {
+  Control: A,
+  Indicator: O,
+  Label: q,
+  MaxValue: X,
+  MinValue: $,
+  Thumb: E,
+  Track: j,
+  Value: B
 });
-C.displayName = "Slider";
-h.displayName = "Slider.Thumb";
-v.displayName = "Slider.Track";
+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 {
-  C as Slider
+  fe as Slider
 };
 //# sourceMappingURL=index.mjs.map

package/dist/slider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderTrack.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex relative h-sz-24 items-center',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'> & {\n  fieldLabelId?: string\n  fieldId?: string\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { Slider as RadixSlider } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      RadixSlider.SliderProps,\n      'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number[]\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number[]\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number[]) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number[]) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  asChild = false,\n  intent = 'basic',\n  shape = 'square',\n  children,\n  className,\n  ref,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  console.log('✅ field ', field.disabled)\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        shape,\n        fieldLabelId: field.labelId,\n        fieldId: field.id,\n      }}\n    >\n      <RadixSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        asChild={asChild}\n        className={rootStyles({ className })}\n        dir=\"ltr\"\n        orientation=\"horizontal\"\n        inverted={false}\n        minStepsBetweenThumbs={0}\n        disabled={disabled || readOnly}\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        {...rest}\n      >\n        {children}\n      </RadixSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'block h-sz-24 w-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus',\n    'data-[interaction=pointerdown]:focus-visible:ring-0!',\n    'data-disabled:hover:ring-0 data-disabled:hover:after:w-0 data-disabled:hover:after:h-0 data-disabled:cursor-not-allowed',\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-hide',\n    'after:w-0 after:h-0 after:rounded-full after:border-solid after:border-sm after:transition-all duration-300',\n    'hover:after:w-sz-32 hover:after:h-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main', 'after:bg-main-container after:border-main'],\n        support: ['bg-support', 'after:bg-support-container after:border-support'],\n        accent: ['bg-accent', 'after:bg-accent-container after:border-accent'],\n        basic: ['bg-basic', 'after:bg-basic-container after:border-basic'],\n        info: ['bg-info', 'after:bg-info-container after:border-info'],\n        neutral: ['bg-neutral', 'after:bg-neutral-container after:border-neutral'],\n        success: ['bg-success', 'after:bg-success-container after:border-success'],\n        alert: ['bg-alert', 'after:bg-alert-container after:border-alert'],\n        error: ['bg-error', 'after:bg-error-container after:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { Slider as RadixSlider } from 'radix-ui'\nimport { type FocusEvent, type KeyboardEvent, type PointerEvent, Ref, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport interface SliderThumbProps extends RadixSlider.SliderThumbProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const SliderThumb = ({\n  asChild = false,\n  className,\n  onPointerDown,\n  onKeyDown,\n  onBlur,\n  ref: forwardedRef,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId } = useSliderContext()\n\n  const innerRef = useRef(null)\n  const ref = forwardedRef || innerRef\n\n  const setInteractionType = (e: KeyboardEvent | FocusEvent | PointerEvent) => {\n    /**\n     * Radix Slider implementation uses `.focus()` and thus prevent us to handle\n     * distinctively focus/focus-visible styles. So we use a `data-interaction` attribute to stay\n     * aware of the type of event, and adapt styles if needed.\n     */\n    if (typeof ref === 'function' || !ref.current) return\n    ref.current.dataset.interaction = e.type\n  }\n\n  return (\n    <RadixSlider.Thumb\n      data-spark-component=\"slider-thumb\"\n      ref={ref}\n      asChild={asChild}\n      id={fieldId}\n      onPointerDown={(e: PointerEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onPointerDown?.(e)\n      }}\n      onKeyDown={(e: KeyboardEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onKeyDown?.(e)\n      }}\n      onBlur={(e: FocusEvent<HTMLSpanElement>) => {\n        setInteractionType(e)\n        onBlur?.(e)\n      }}\n      className={thumbVariants({ intent, className })}\n      aria-labelledby={fieldLabelId}\n      {...rest}\n    />\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4'], {\n  variants: {\n    shape: {\n      rounded: 'rounded-sm',\n      square: 'rounded-0',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\n\nexport const rangeVariants = cva(['absolute h-full'], {\n  variants: {\n    intent: {\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      basic: ['bg-basic'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      error: ['bg-error'],\n    },\n    shape: {\n      rounded: 'rounded-sm',\n      square: 'rounded-0',\n    },\n  },\n  defaultVariants: {\n    intent: 'basic',\n    shape: 'square',\n  },\n})\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as RadixSlider } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants, trackVariants } from './SliderTrack.styles'\n\nexport interface SliderTrackProps\n  extends RadixSlider.SliderTrackProps,\n    RadixSlider.SliderRangeProps {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   * @default false\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SliderTrack = ({ asChild = false, className, ref, ...rest }: SliderTrackProps) => {\n  const { intent, shape } = useSliderContext()\n\n  return (\n    <RadixSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      asChild={asChild}\n      className={trackVariants({ shape })}\n      {...rest}\n    >\n      <RadixSlider.Range className={rangeVariants({ intent, shape, className })} />\n    </RadixSlider.Track>\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\n\nexport const Slider: typeof Root & {\n  Thumb: typeof Thumb\n  Track: typeof Track\n} = Object.assign(Root, {\n  Thumb,\n  Track,\n})\n\nSlider.displayName = 'Slider'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\n\nexport type { SliderProps, SliderThumbProps, SliderTrackProps }\n"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","asChild","intent","shape","children","className","ref","disabledProp","readOnlyProp","nameProp","rest","field","useFormFieldControl","disabled","readOnly","name","jsx","RadixSlider","thumbVariants","SliderThumb","onPointerDown","onKeyDown","onBlur","forwardedRef","fieldLabelId","fieldId","innerRef","useRef","setInteractionType","trackVariants","rangeVariants","SliderTrack","Root","Thumb","Track"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/slider/Slider.styles.ts","../../src/slider/SliderContext.tsx","../../src/slider/Slider.tsx","../../src/slider/SliderControl.tsx","../../src/slider/SliderTrack.styles.ts","../../src/slider/SliderIndicator.tsx","../../src/slider/SliderLabel.tsx","../../src/slider/SliderMaxValue.tsx","../../src/slider/SliderMinValue.tsx","../../src/slider/SliderThumbContext.tsx","../../src/slider/SliderThumb.styles.ts","../../src/slider/SliderThumb.tsx","../../src/slider/SliderTrack.tsx","../../src/slider/useSliderValueBoundaries.ts","../../src/slider/SliderValue.tsx","../../src/slider/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'grid grid-cols-[1fr_auto] gap-y-sm gap-x-md relative',\n  'touch-none select-none',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-dim-3',\n])\n","import type { RefObject } from 'react'\nimport { createContext, useContext } from 'react'\n\nimport type { SliderProps } from './Slider'\n\nexport type SliderContextInterface = Pick<SliderProps, 'intent' | 'min' | 'max'> & {\n  fieldLabelId?: string\n  fieldId?: string\n  onLabelId?: (id: string | undefined) => void\n  hasValueInThumb: boolean\n  registerValueInThumb: () => () => void\n  controlRef: RefObject<HTMLElement | null>\n  thumbRef: RefObject<HTMLElement | null>\n}\n\nexport const SliderContext = createContext<SliderContextInterface>({} as SliderContextInterface)\n\nexport const useSliderContext = () => useContext(SliderContext)\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ComponentProps, type PropsWithChildren, Ref, useCallback, useRef, useState } from 'react'\n\nimport { rootStyles } from './Slider.styles'\nimport { SliderContext } from './SliderContext'\nimport type { SliderRangeVariantsProps } from './SliderTrack.styles'\n\nexport interface SliderProps\n  extends Omit<\n      ComponentProps<typeof BaseSlider.Root>,\n      'render' | 'orientation' | 'onValueChange' | 'onValueCommitted'\n    >,\n    PropsWithChildren<SliderRangeVariantsProps> {\n  /**\n   * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The controlled value of the slider. Must be used in conjunction with `onValueChange`.\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number) => void\n  /**\n   * The name of the slider. Submitted with its owning form as part of a name/value pair.\n   * If wrapped with a FormField with a name, will be inherited from it.\n   */\n  name?: string\n  /**\n   * When `true`, prevents the user from interacting with the slider.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the slider as interactive or not.\n   */\n  readOnly?: boolean\n  /**\n   * The minimum value for the range.\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value for the range.\n   * @default 100\n   */\n  max?: number\n  /**\n   * The stepping interval.\n   * @default 1\n   */\n  step?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Slider = ({\n  intent = 'basic',\n  children,\n  className,\n  ref,\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  name: nameProp,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  ...rest\n}: SliderProps) => {\n  const field = useFormFieldControl()\n\n  const disabled = field.disabled ?? disabledProp\n  const readOnly = field.readOnly ?? readOnlyProp\n  const name = field.name ?? nameProp\n\n  const [labelId, setLabelId] = useState<string | undefined>(field.labelId)\n  const [valueInThumbCount, setValueInThumbCount] = useState(0)\n  const controlRef = useRef<HTMLElement | null>(null)\n  const thumbRef = useRef<HTMLElement | null>(null)\n\n  const handleLabelId = useCallback((id: string | undefined) => {\n    setLabelId(id)\n  }, [])\n\n  const registerValueInThumb = useCallback(() => {\n    setValueInThumbCount(c => c + 1)\n    return () => setValueInThumbCount(c => c - 1)\n  }, [])\n\n  return (\n    <SliderContext.Provider\n      value={{\n        intent,\n        min,\n        max,\n        fieldLabelId: field.labelId || labelId,\n        fieldId: field.id,\n        onLabelId: handleLabelId,\n        hasValueInThumb: valueInThumbCount > 0,\n        registerValueInThumb,\n        controlRef,\n        thumbRef,\n      }}\n    >\n      <BaseSlider.Root\n        ref={ref}\n        data-spark-component=\"slider\"\n        className={rootStyles({ className })}\n        orientation=\"horizontal\"\n        disabled={disabled || readOnly}\n        thumbAlignment=\"edge\"\n        name={name}\n        aria-describedby={field.description}\n        aria-invalid={field.isInvalid}\n        aria-disabled={disabled || readOnly ? true : undefined}\n        value={valueProp !== undefined ? [valueProp] : undefined}\n        defaultValue={\n          defaultValueProp !== undefined ? [defaultValueProp] : undefined\n        }\n        onValueChange={\n          onValueChange\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? value[0] ?? 0 : value\n                onValueChange(v)\n              }\n            : undefined\n        }\n        onValueCommitted={\n          onValueCommit\n            ? (value: number | readonly number[]) => {\n                const v = Array.isArray(value) ? value[0] ?? 0 : value\n                onValueCommit(v)\n              }\n            : undefined\n        }\n        min={min}\n        max={max}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport type SliderControlProps = Omit<ComponentProps<typeof BaseSlider.Control>, 'render'>\n\nexport const SliderControl = ({ className, ref, ...rest }: SliderControlProps) => {\n  const { hasValueInThumb, controlRef } = useSliderContext()\n  const mergedRef = useMergeRefs(controlRef, ref)\n\n  return (\n    <BaseSlider.Control\n      data-spark-component=\"slider-control\"\n      ref={mergedRef}\n      className={cx(\n        'min-h-sz-24 relative col-span-2 flex w-full min-w-0 flex-1 items-center',\n        hasValueInThumb && 'mt-xl',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSliderControl.displayName = 'Slider.Control'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const trackVariants = cva(['relative grow h-sz-4 bg-on-background/dim-4 rounded-sm'])\n\nexport const rangeVariants = cva(\n  [\n    'absolute h-full rounded-sm',\n    // Disable transitions during drag to eliminate latency\n    'transition-none',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        accent: ['bg-accent'],\n        basic: ['bg-basic'],\n        info: ['bg-info'],\n        neutral: ['bg-neutral'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        error: ['bg-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { rangeVariants } from './SliderTrack.styles'\n\nexport type SliderIndicatorProps = Omit<ComponentProps<typeof BaseSlider.Indicator>, 'render'>\n\nexport const SliderIndicator = ({ className, ref, ...rest }: SliderIndicatorProps) => {\n  const { intent } = useSliderContext()\n\n  return (\n    <BaseSlider.Indicator\n      data-spark-component=\"slider-indicator\"\n      ref={ref}\n      className={rangeVariants({ intent, className })}\n      {...rest}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'Slider.Indicator'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useEffect, useId, useRef } from 'react'\n\nimport { FormFieldRequiredIndicator } from '../form-field/FormFieldRequiredIndicator'\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useSliderContext } from './SliderContext'\n\nconst ID_PREFIX = ':slider-label'\n\nexport interface SliderLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const SliderLabel = ({\n  htmlFor: htmlForProp,\n  id: idProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: SliderLabelProps) => {\n  const field = useFormFieldControl()\n  const { fieldLabelId, fieldId, onLabelId } = useSliderContext()\n\n  // Generate an id if not provided and no FormField labelId is available\n  const internalId = useId()\n  const generatedId = `${ID_PREFIX}-${internalId}`\n  const labelId = idProp || fieldLabelId || field.labelId || generatedId\n\n  // Use FormField id for htmlFor if present, otherwise use fieldId from context, or the prop\n  const htmlFor = asChild ? undefined : htmlForProp || fieldId || field.id\n\n  // Get disabled and required state from FormField if present\n  const disabled = field.disabled\n  const isRequired = field.isRequired\n\n  // Notify SliderContext of the label id if no FormField is present\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const mergedRef = useMergeRefs(ref, labelRef)\n\n  useEffect(() => {\n    if (onLabelId && !fieldLabelId && !field.labelId) {\n      onLabelId(labelId)\n    }\n  }, [onLabelId, fieldLabelId, field.labelId, labelId])\n\n  return (\n    <Label\n      ref={mergedRef}\n      id={labelId}\n      data-spark-component=\"slider-label\"\n      htmlFor={htmlFor}\n      className={cx(disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined, className)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nSliderLabel.displayName = 'Slider.Label'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMaxValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMaxValue = forwardRef<HTMLDivElement, SliderMaxValueProps>(\n  ({ className, children }, ref) => {\n    const { max = 100 } = useSliderContext()\n\n    const content = children ? children(max) : max\n\n    return (\n      <div\n        data-spark-component=\"slider-max-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-2 text-right', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMaxValue.displayName = 'Slider.MaxValue'\n","import { cx } from 'class-variance-authority'\nimport { forwardRef, type ReactNode } from 'react'\n\nimport { useSliderContext } from './SliderContext'\n\nexport interface SliderMinValueProps {\n  className?: string\n  children?: (value: number) => ReactNode\n}\n\nexport const SliderMinValue = forwardRef<HTMLDivElement, SliderMinValueProps>(\n  ({ className, children }, ref) => {\n    const { min = 0 } = useSliderContext()\n\n    const content = children ? children(min) : min\n\n    return (\n      <div\n        data-spark-component=\"slider-min-value\"\n        ref={ref}\n        className={cx('text-on-surface/dim-1 text-body-2 col-start-1 text-left', className)}\n      >\n        {content}\n      </div>\n    )\n  }\n)\n\nSliderMinValue.displayName = 'Slider.MinValue'\n","import { createContext, useContext } from 'react'\n\nexport interface SliderThumbContextValue {\n  isInsideThumb: true\n}\n\nexport const SliderThumbContext = createContext<SliderThumbContextValue | null>(null)\n\nexport const useSliderThumbContext = () => useContext(SliderThumbContext)\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const thumbVariants = cva(\n  [\n    'relative block size-sz-24 rounded-full cursor-pointer',\n    'outline-hidden',\n    'has-focus-visible:ring-2 has-focus-visible:ring-offset-2 has-focus-visible:ring-focus',\n    'data-disabled:hover:ring-0 data-disabled:cursor-not-allowed data-disabled:before:hidden',\n    // visual thumb\n    'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n    'after:size-sz-24 after:rounded-full',\n    // hover effect\n    'before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n    'before:size-sz-24 before:rounded-full before:border-solid before:border-sm before:transition-all before:duration-75',\n    'hover:before:size-sz-32 data-dragging:before:size-sz-32',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['after:bg-main', 'before:bg-main-container before:border-main'],\n        support: ['after:bg-support', 'before:bg-support-container before:border-support'],\n        accent: ['after:bg-accent', 'before:bg-accent-container before:border-accent'],\n        basic: ['after:bg-basic', 'before:bg-basic-container before:border-basic'],\n        info: ['after:bg-info', 'before:bg-info-container before:border-info'],\n        neutral: ['after:bg-neutral', 'before:bg-neutral-container before:border-neutral'],\n        success: ['after:bg-success', 'before:bg-success-container before:border-success'],\n        alert: ['after:bg-alert', 'before:bg-alert-container before:border-alert'],\n        error: ['after:bg-error', 'before:bg-error-container before:border-error'],\n      },\n    },\n    defaultVariants: {\n      intent: 'basic',\n    },\n  }\n)\n\nexport type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps, type PropsWithChildren, useRef } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { SliderThumbContext } from './SliderThumbContext'\nimport { thumbVariants } from './SliderThumb.styles'\n\nexport type SliderThumbProps = Omit<\n  ComponentProps<typeof BaseSlider.Thumb>,\n  'render' | 'index'\n> &\n  PropsWithChildren\n\nexport const SliderThumb = ({\n  className,\n  ref: forwardedRef,\n  children,\n  ...rest\n}: SliderThumbProps) => {\n  const { intent, fieldLabelId, fieldId, thumbRef: contextThumbRef } = useSliderContext()\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(contextThumbRef, forwardedRef ?? innerRef)\n\n  return (\n    <SliderThumbContext.Provider value={{ isInsideThumb: true }}>\n      <BaseSlider.Thumb\n        data-spark-component=\"slider-thumb\"\n        ref={ref}\n        id={fieldId}\n        className={thumbVariants({ intent, className })}\n        aria-labelledby={fieldLabelId}\n        {...rest}\n      >\n        {children}\n      </BaseSlider.Thumb>\n    </SliderThumbContext.Provider>\n  )\n}\n\nSliderThumb.displayName = 'Slider.Thumb'\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { ComponentProps } from 'react'\n\nimport { trackVariants } from './SliderTrack.styles'\n\nexport type SliderTrackProps = Omit<ComponentProps<typeof BaseSlider.Track>, 'render'>\n\nexport const SliderTrack = ({ className, ref, ...rest }: SliderTrackProps) => {\n  return (\n    <BaseSlider.Track\n      data-spark-component=\"slider-track\"\n      ref={ref}\n      className={trackVariants({ className })}\n      {...rest}\n    />\n  )\n}\n\nSliderTrack.displayName = 'Slider.Track'\n","import type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n/**\n * Computes the translateX (in pixels) to apply to the value element so it stays\n * within the horizontal bounds of the slider control when displayed inside the thumb.\n *\n * @param controlRef - Ref to the slider control (track container)\n * @param thumbRef - Ref to the thumb element\n * @param valueRef - Ref to the value label element\n * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves\n * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing\n */\nexport function useSliderValueBoundaries(\n  controlRef: RefObject<HTMLElement | null>,\n  thumbRef: RefObject<HTMLElement | null>,\n  valueRef: RefObject<HTMLElement | null>,\n  value: number\n): number {\n  const [translateX, setTranslateX] = useState(0)\n  const [refsRetryScheduled, setRefsRetryScheduled] = useState(false)\n\n  useLayoutEffect(() => {\n    const control = controlRef.current\n    const thumb = thumbRef.current\n    const valueEl = valueRef.current\n\n    if (!control || !thumb || !valueEl) {\n      setTranslateX(0)\n      // Re-run once on next frame when refs may be set (e.g. Slider.Value mounts after Control/Thumb)\n      if (!refsRetryScheduled) {\n        requestAnimationFrame(() => setRefsRetryScheduled(true))\n      }\n\n      return\n    }\n\n    let cancelled = false\n\n    const compute = () => {\n      if (cancelled) return\n\n      const controlRect = control.getBoundingClientRect()\n      const thumbRect = thumb.getBoundingClientRect()\n      const valueWidth = valueEl.scrollWidth\n\n      // Skip until value label has been laid out (content from render prop may not be ready on first paint)\n      if (valueWidth === 0) {\n        requestAnimationFrame(compute)\n\n        return\n      }\n\n      const thumbCenterPx = thumbRect.left - controlRect.left + thumbRect.width / 2\n\n      const valueCenterMin = valueWidth / 2\n      const valueCenterMax = controlRect.width - valueWidth / 2\n\n      const clampedCenter = Math.max(valueCenterMin, Math.min(valueCenterMax, thumbCenterPx))\n      const nextTranslateX = clampedCenter - thumbCenterPx\n\n      setTranslateX(prev => (prev !== nextTranslateX ? nextTranslateX : prev))\n    }\n\n    compute()\n\n    const resizeObserver = new ResizeObserver(compute)\n    resizeObserver.observe(control)\n    resizeObserver.observe(valueEl)\n\n    return () => {\n      cancelled = true\n      resizeObserver.disconnect()\n    }\n  }, [controlRef, thumbRef, valueRef, value, refsRetryScheduled])\n\n  return translateX\n}\n","import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useSliderContext } from './SliderContext'\nimport { useSliderThumbContext } from './SliderThumbContext'\nimport { useSliderValueBoundaries } from './useSliderValueBoundaries'\n\nexport type SliderValueProps = Omit<ComponentProps<typeof BaseSlider.Value>, 'render'>\n\n/**\n * Normalizes Base UI's (formattedValues, values) to single (formatted, value) for the render prop.\n */\nexport const SliderValue = ({ className, children, ref, ...rest }: SliderValueProps) => {\n  const { registerValueInThumb, controlRef, thumbRef } = useSliderContext()\n  const thumbContext = useSliderThumbContext()\n  const isInsideThumb = thumbContext !== null\n\n  const valueRef = useRef<HTMLOutputElement | null>(null)\n  const mergedRef = useMergeRefs(valueRef, ref)\n\n  const [currentValue, setCurrentValue] = useState(0)\n  const translateX = useSliderValueBoundaries(controlRef, thumbRef, valueRef, currentValue)\n\n  useEffect(() => {\n    if (!isInsideThumb) return\n\n    return registerValueInThumb()\n  }, [isInsideThumb, registerValueInThumb])\n\n  const resolvedClassName = cx(\n    isInsideThumb\n      ? 'absolute left-1/2 -translate-x-1/2 top-[calc(-100%-var(--spacing-sm))] text-body-1 font-bold whitespace-nowrap'\n      : 'default:text-body-1 col-start-2 text-right default:font-bold',\n    className\n  )\n\n  const normalizedChildren = useCallback(\n    (formattedValues: readonly string[], values: readonly number[]) => {\n      const formatted = formattedValues[0] ?? String(values[0] ?? '')\n      const value = values[0] ?? 0\n      setCurrentValue(value)\n      if (typeof children === 'function') {\n        return (children as unknown as (formatted: string, value: number) => ReactNode)(\n          formatted,\n          value\n        )\n      }\n\n      return formatted\n    },\n    [children]\n  )\n\n  const style = isInsideThumb\n    ? { transform: `translate(calc(0% + ${translateX}px), 0)` }\n    : undefined\n\n  return (\n    <BaseSlider.Value\n      data-spark-component=\"slider-value\"\n      ref={mergedRef}\n      className={resolvedClassName}\n      style={style}\n      {...rest}\n    >\n      {normalizedChildren}\n    </BaseSlider.Value>\n  )\n}\n\nSliderValue.displayName = 'Slider.Value'\n","import { Slider as Root, type SliderProps } from './Slider'\nimport { SliderControl as Control, type SliderControlProps } from './SliderControl'\nimport { SliderIndicator as Indicator, type SliderIndicatorProps } from './SliderIndicator'\nimport { SliderLabel as Label, type SliderLabelProps } from './SliderLabel'\nimport { SliderMaxValue as MaxValue, type SliderMaxValueProps } from './SliderMaxValue'\nimport { SliderMinValue as MinValue, type SliderMinValueProps } from './SliderMinValue'\nimport { SliderThumb as Thumb, type SliderThumbProps } from './SliderThumb'\nimport { SliderTrack as Track, type SliderTrackProps } from './SliderTrack'\nimport { SliderValue as Value, type SliderValueProps } from './SliderValue'\n\nexport const Slider: typeof Root & {\n  Control: typeof Control\n  Indicator: typeof Indicator\n  Label: typeof Label\n  MaxValue: typeof MaxValue\n  MinValue: typeof MinValue\n  Thumb: typeof Thumb\n  Track: typeof Track\n  Value: typeof Value\n} = Object.assign(Root, {\n  Control,\n  Indicator,\n  Label,\n  MaxValue,\n  MinValue,\n  Thumb,\n  Track,\n  Value,\n})\n\nSlider.displayName = 'Slider'\nControl.displayName = 'Slider.Control'\nIndicator.displayName = 'Slider.Indicator'\nLabel.displayName = 'Slider.Label'\nMaxValue.displayName = 'Slider.MaxValue'\nMinValue.displayName = 'Slider.MinValue'\nThumb.displayName = 'Slider.Thumb'\nTrack.displayName = 'Slider.Track'\nValue.displayName = 'Slider.Value'\n\nexport type {\n  SliderProps,\n  SliderControlProps,\n  SliderIndicatorProps,\n  SliderLabelProps,\n  SliderMaxValueProps,\n  SliderMinValueProps,\n  SliderThumbProps,\n  SliderTrackProps,\n  SliderValueProps,\n}\n"],"names":["rootStyles","cva","SliderContext","createContext","useSliderContext","useContext","Slider","intent","children","className","ref","valueProp","defaultValueProp","disabledProp","readOnlyProp","nameProp","onValueChange","onValueCommit","min","max","rest","field","useFormFieldControl","disabled","readOnly","name","labelId","setLabelId","useState","valueInThumbCount","setValueInThumbCount","controlRef","useRef","thumbRef","handleLabelId","useCallback","id","registerValueInThumb","c","jsx","BaseSlider","value","v","SliderControl","hasValueInThumb","mergedRef","useMergeRefs","cx","trackVariants","rangeVariants","SliderIndicator","ID_PREFIX","SliderLabel","htmlForProp","idProp","requiredIndicator","FormFieldRequiredIndicator","asChild","others","fieldLabelId","fieldId","onLabelId","internalId","useId","generatedId","htmlFor","isRequired","labelRef","useEffect","Label","jsxs","Fragment","Slottable","SliderMaxValue","forwardRef","content","SliderMinValue","SliderThumbContext","useSliderThumbContext","thumbVariants","SliderThumb","forwardedRef","contextThumbRef","innerRef","SliderTrack","useSliderValueBoundaries","valueRef","translateX","setTranslateX","refsRetryScheduled","setRefsRetryScheduled","useLayoutEffect","control","thumb","valueEl","cancelled","compute","controlRect","thumbRect","valueWidth","thumbCenterPx","valueCenterMin","valueCenterMax","nextTranslateX","prev","resizeObserver","SliderValue","isInsideThumb","currentValue","setCurrentValue","resolvedClassName","normalizedChildren","formattedValues","values","formatted","style","Root","Control","Indicator","MaxValue","MinValue","Thumb","Track","Value"],"mappings":"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"}

package/dist/slider/useSliderValueBoundaries.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+/**
+ * Computes the translateX (in pixels) to apply to the value element so it stays
+ * within the horizontal bounds of the slider control when displayed inside the thumb.
+ *
+ * @param controlRef - Ref to the slider control (track container)
+ * @param thumbRef - Ref to the thumb element
+ * @param valueRef - Ref to the value label element
+ * @param value - Current slider value (0–100 or min–max), used to re-run when thumb moves
+ * @returns translateX in pixels (positive = right, negative = left), or 0 if refs are missing
+ */
+export declare function useSliderValueBoundaries(controlRef: RefObject<HTMLElement | null>, thumbRef: RefObject<HTMLElement | null>, valueRef: RefObject<HTMLElement | null>, value: number): number;