@fangxinyan/lumina 0.4.0 → 0.5.0

package/dist/{Slider-X4PVA65R.css → Slider-3JKA5EW6.css}

@@ -1,14 +1,25 @@
 /* ============ Slider ============ */
 .slider {
   position: relative;
-  height: 36px;
   width: 100%;
   display: flex;
   align-items: center;
+  gap: 10px;
   cursor: pointer;
+  min-height: 36px;
 }
 .slider.has-marks { padding-bottom: 26px; }
 .slider.disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Rail: positioning context for track + thumbs + marks */
+.slider-rail {
+  position: relative;
+  flex: 1 1 0%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+}
+
 .slider-track {
   position: relative;
   width: 100%;
@@ -16,8 +27,10 @@
   border-radius: 999px;
   background: var(--bg);
   box-shadow: var(--neu-in-sm);
-  overflow: hidden;
+  touch-action: none;
+  z-index: 1;
 }
+
 .slider-fill {
   position: absolute;
   top: 0; bottom: 0;
@@ -25,7 +38,9 @@
   box-shadow: 0 0 12px var(--accent-glow);
   border-radius: 999px;
   transition: left var(--dur-fast) var(--ease), right var(--dur-fast) var(--ease);
+  pointer-events: none;
 }
+
 .slider-thumb {
   position: absolute;
   top: 50%;
@@ -36,43 +51,45 @@
   transform: translate(-50%, -50%);
   transition: all var(--dur-fast) var(--ease);
   display: grid; place-items: center;
-  pointer-events: none;
+  z-index: 3;
+  outline: none;
+  touch-action: none;
 }
-.slider.has-marks .slider-thumb { top: calc(50% - 13px); }
-.slider.has-marks .slider-track { margin-top: -26px; }
 .slider-thumb::after {
   content: "";
   width: 6px; height: 6px;
   border-radius: 999px;
-  background: var(--accent);
+  background: var(--slider-thumb-color, var(--accent));
+}
+.slider-thumb:focus-visible {
+  box-shadow: var(--neu-out-sm), 0 0 0 3px var(--accent-glow);
 }
 .slider:hover .slider-thumb { transform: translate(-50%, -50%) scale(1.08); }
-.slider input[type="range"] {
-  position: absolute;
-  inset: 0;
-  width: 100%; height: 100%;
-  opacity: 0;
-  cursor: inherit;
-  margin: 0;
-  pointer-events: auto;
+
+.slider-value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent-ink);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
-/* In range mode (two stacked inputs), split the hit zones by half so the user can drag either thumb */
-.slider input[type="range"]:nth-of-type(1):not(:only-of-type) { right: 50%; }
-.slider input[type="range"]:nth-of-type(2) { left: 50%; }
-.slider.has-marks input[type="range"] { height: calc(100% - 26px); }
-.slider-value { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); margin-left: 10px; }
+
+/* Tone variants */
+.slider.success .slider-thumb { --slider-thumb-color: var(--success); }
 .slider.success .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--success) 70%, white), var(--success)); box-shadow: 0 0 10px color-mix(in oklch, var(--success) 35%, transparent); }
-.slider.success .slider-thumb::after { background: var(--success); }
+.slider.success .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--success) 35%, transparent); }
+.slider.warning .slider-thumb { --slider-thumb-color: var(--warning); }
 .slider.warning .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--warning) 70%, white), var(--warning)); box-shadow: 0 0 10px color-mix(in oklch, var(--warning) 35%, transparent); }
-.slider.warning .slider-thumb::after { background: var(--warning); }
+.slider.warning .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--warning) 35%, transparent); }
+.slider.danger .slider-thumb { --slider-thumb-color: var(--danger); }
 .slider.danger  .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 70%, white), var(--danger));  box-shadow: 0 0 10px color-mix(in oklch, var(--danger) 35%, transparent); }
-.slider.danger  .slider-thumb::after { background: var(--danger); }
+.slider.danger  .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--danger) 35%, transparent); }
 
 /* Marks */
 .slider-marks {
   position: absolute;
   left: 0; right: 0;
-  bottom: 0;
+  bottom: -26px;
   height: 22px;
   pointer-events: none;
 }
@@ -94,8 +111,10 @@
   border-radius: 999px;
   background: var(--bg);
   box-shadow: var(--neu-in-sm);
-  margin-top: -18px;
-  position: relative;
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1;
 }
 .slider-mark.active .slider-mark-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }

package/dist/Slider.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var chunkB5JH7NRZ_cjs = require('./chunk-B5JH7NRZ.cjs');
+var chunkN6ZLZUBF_cjs = require('./chunk-N6ZLZUBF.cjs');
 
 
 
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
-  get: function () { return chunkB5JH7NRZ_cjs.Slider; }
+  get: function () { return chunkN6ZLZUBF_cjs.Slider; }
 });
 //# sourceMappingURL=Slider.cjs.map
 //# sourceMappingURL=Slider.cjs.map

package/dist/Slider.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 
-type SliderSingleValue = number;
 type SliderRangeValue = [number, number];
-type SliderValue = SliderSingleValue | SliderRangeValue;
+type SliderValue = number | SliderRangeValue;
 interface SliderBaseProps {
     min?: number;
     max?: number;
@@ -10,6 +9,8 @@ interface SliderBaseProps {
     disabled?: boolean;
     showValue?: boolean;
     tone?: "accent" | "success" | "warning" | "danger";
+    /** Custom gradient colors mapped from min→max. Overrides `tone` for fill & thumb. */
+    colors?: string[];
     /** Tick marks with labels. Clicking a mark snaps to it. */
     marks?: Record<number, React.ReactNode>;
     className?: string;
@@ -27,7 +28,9 @@ interface SliderRangeProps extends SliderBaseProps {
     onChange?: (value: SliderRangeValue) => void;
 }
 type SliderProps = SliderSingleProps | SliderRangeProps;
-/** `Slider` — neumorphic range input with grooved track. */
-declare const Slider: React.FC<SliderProps>;
+/** `Slider` — neumorphic range input with grooved track.
+ * @example <Slider defaultValue={40} showValue />
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Slider, type SliderProps, type SliderRangeProps, type SliderRangeValue, type SliderSingleProps, type SliderSingleValue, type SliderValue };
+export { Slider, type SliderProps, type SliderRangeProps, type SliderRangeValue, type SliderSingleProps, type SliderValue };

package/dist/Slider.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 
-type SliderSingleValue = number;
 type SliderRangeValue = [number, number];
-type SliderValue = SliderSingleValue | SliderRangeValue;
+type SliderValue = number | SliderRangeValue;
 interface SliderBaseProps {
     min?: number;
     max?: number;
@@ -10,6 +9,8 @@ interface SliderBaseProps {
     disabled?: boolean;
     showValue?: boolean;
     tone?: "accent" | "success" | "warning" | "danger";
+    /** Custom gradient colors mapped from min→max. Overrides `tone` for fill & thumb. */
+    colors?: string[];
     /** Tick marks with labels. Clicking a mark snaps to it. */
     marks?: Record<number, React.ReactNode>;
     className?: string;
@@ -27,7 +28,9 @@ interface SliderRangeProps extends SliderBaseProps {
     onChange?: (value: SliderRangeValue) => void;
 }
 type SliderProps = SliderSingleProps | SliderRangeProps;
-/** `Slider` — neumorphic range input with grooved track. */
-declare const Slider: React.FC<SliderProps>;
+/** `Slider` — neumorphic range input with grooved track.
+ * @example <Slider defaultValue={40} showValue />
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Slider, type SliderProps, type SliderRangeProps, type SliderRangeValue, type SliderSingleProps, type SliderSingleValue, type SliderValue };
+export { Slider, type SliderProps, type SliderRangeProps, type SliderRangeValue, type SliderSingleProps, type SliderValue };

package/dist/Slider.js

@@ -1,3 +1,3 @@
-export { Slider } from './chunk-QJGKI2BD.js';
+export { Slider } from './chunk-2TZ2R7L2.js';
 //# sourceMappingURL=Slider.js.map
 //# sourceMappingURL=Slider.js.map

package/dist/chunk-2TZ2R7L2.js

@@ -0,0 +1,235 @@
+import './tokens-BIIUTPKN.css';
+import './shared-NJHRNLRH.css';
+import './Slider-3JKA5EW6.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Slider/Slider.tsx
+function clamp(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
+}
+function snap(raw, step, min) {
+  return Math.round((raw - min) / step) * step + min;
+}
+function lerpColor(colors, t) {
+  const pos = Math.max(0, Math.min(1, t)) * (colors.length - 1);
+  const i = Math.min(Math.floor(pos), colors.length - 2);
+  const frac = pos - i;
+  if (frac === 0) return colors[i];
+  return `color-mix(in oklch, ${colors[i + 1]} ${Math.round(frac * 100)}%, ${colors[i]})`;
+}
+var Slider = React.forwardRef(
+  (props, ref) => {
+    const {
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled,
+      showValue,
+      tone = "accent",
+      colors,
+      marks,
+      className = ""
+    } = props;
+    const range = props.range === true;
+    const controlled = props.value;
+    const defaultVal = props.defaultValue;
+    const onChange = props.onChange;
+    const initRef = React.useRef(
+      defaultVal !== void 0 ? Array.isArray(defaultVal) ? [...defaultVal] : [defaultVal] : range ? [min, max] : [min]
+    );
+    const [inner, setInner] = React.useState(initRef.current);
+    const isControlled = controlled !== void 0;
+    const vals = isControlled ? Array.isArray(controlled) ? controlled : [controlled] : inner;
+    const valsRef = React.useRef(vals);
+    valsRef.current = vals;
+    const trackRef = React.useRef(null);
+    const thumbEls = React.useRef([]);
+    const dragging = React.useRef(null);
+    const pct = (n) => (n - min) / (max - min) * 100;
+    const commit = React.useCallback(
+      (next) => {
+        if (!isControlled) setInner(next);
+        if (range) {
+          onChange?.([next[0], next[1]]);
+        } else {
+          onChange?.(next[0]);
+        }
+      },
+      [isControlled, range, onChange]
+    );
+    const setAt = React.useCallback(
+      (index, raw) => {
+        const snapped = snap(clamp(raw, min, max), step, min);
+        const clamped = clamp(snapped, min, max);
+        const out = [...valsRef.current];
+        out[index] = clamped;
+        if (range && out.length === 2 && out[0] > out[1]) out.sort((a, b) => a - b);
+        commit(out);
+      },
+      [min, max, step, range, commit]
+    );
+    const valFromX = React.useCallback(
+      (clientX) => {
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect) return min;
+        const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+        return min + ratio * (max - min);
+      },
+      [min, max]
+    );
+    const closerIndex = React.useCallback(
+      (target) => {
+        const v = valsRef.current;
+        if (!range || v.length < 2) return 0;
+        const d0 = Math.abs(v[0] - target);
+        const d1 = Math.abs(v[1] - target);
+        if (d0 === d1) return target < v[0] ? 0 : 1;
+        return d0 < d1 ? 0 : 1;
+      },
+      [range]
+    );
+    const onPointerDown = React.useCallback(
+      (e) => {
+        if (disabled) return;
+        e.preventDefault();
+        const val = valFromX(e.clientX);
+        const idx = closerIndex(val);
+        dragging.current = idx;
+        setAt(idx, val);
+        trackRef.current?.setPointerCapture(e.pointerId);
+        thumbEls.current[idx]?.focus();
+      },
+      [disabled, valFromX, closerIndex, setAt]
+    );
+    const onPointerMove = React.useCallback(
+      (e) => {
+        if (dragging.current === null) return;
+        setAt(dragging.current, valFromX(e.clientX));
+      },
+      [valFromX, setAt]
+    );
+    const onPointerUp = React.useCallback(() => {
+      dragging.current = null;
+    }, []);
+    const handleKey = React.useCallback(
+      (index, e) => {
+        if (disabled) return;
+        let delta = 0;
+        if (e.key === "ArrowRight" || e.key === "ArrowUp") delta = step;
+        else if (e.key === "ArrowLeft" || e.key === "ArrowDown") delta = -step;
+        else if (e.key === "Home") {
+          setAt(index, min);
+          return;
+        } else if (e.key === "End") {
+          setAt(index, max);
+          return;
+        } else return;
+        e.preventDefault();
+        setAt(index, valsRef.current[index] + delta);
+      },
+      [disabled, step, min, max, setAt]
+    );
+    const handleMarkClick = React.useCallback(
+      (mark) => {
+        if (disabled) return;
+        setAt(closerIndex(mark), mark);
+      },
+      [disabled, closerIndex, setAt]
+    );
+    const fillLeft = range ? pct(Math.min(vals[0], vals[1])) : 0;
+    const fillRight = range ? 100 - pct(Math.max(vals[0], vals[1])) : 100 - pct(vals[0]);
+    const hasGradient = colors && colors.length >= 2;
+    const fillStyle = {
+      left: `${fillLeft}%`,
+      right: `${fillRight}%`
+    };
+    if (hasGradient) {
+      const w = 100 - fillLeft - fillRight;
+      if (w > 0) {
+        const stops = colors.map((c, i) => {
+          const orig = i / (colors.length - 1) * 100;
+          return `${c} ${((orig - fillLeft) / w * 100).toFixed(2)}%`;
+        }).join(", ");
+        fillStyle.background = `linear-gradient(to right, ${stops})`;
+        fillStyle.boxShadow = "none";
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: `slider ${range ? "range" : ""} ${hasGradient ? "gradient" : tone} ${disabled ? "disabled" : ""} ${marks ? "has-marks" : ""} ${className}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "slider-rail", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "slider-track",
+                ref: trackRef,
+                onPointerDown,
+                onPointerMove,
+                onPointerUp,
+                children: /* @__PURE__ */ jsx("div", { className: "slider-fill", style: fillStyle })
+              }
+            ),
+            vals.map((n, i) => {
+              const thumbStyle = { left: `${pct(n)}%` };
+              if (hasGradient) {
+                thumbStyle["--slider-thumb-color"] = lerpColor(colors, (n - min) / (max - min));
+              }
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: (el) => {
+                    thumbEls.current[i] = el;
+                  },
+                  className: "slider-thumb",
+                  style: thumbStyle,
+                  role: "slider",
+                  tabIndex: disabled ? -1 : 0,
+                  "aria-valuemin": min,
+                  "aria-valuemax": max,
+                  "aria-valuenow": n,
+                  "aria-disabled": disabled || void 0,
+                  onKeyDown: (e) => handleKey(i, e),
+                  onPointerDown: (e) => {
+                    if (disabled) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dragging.current = i;
+                    trackRef.current?.setPointerCapture(e.pointerId);
+                    e.currentTarget.focus();
+                  }
+                },
+                i
+              );
+            }),
+            marks && /* @__PURE__ */ jsx("div", { className: "slider-marks", children: Object.entries(marks).map(([k, label]) => {
+              const n = Number(k);
+              const active = range ? n >= Math.min(vals[0], vals[1]) && n <= Math.max(vals[0], vals[1]) : n <= vals[0];
+              return /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: `slider-mark ${active ? "active" : ""}`,
+                  style: { left: `${pct(n)}%` },
+                  onClick: () => handleMarkClick(n),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "slider-mark-dot" }),
+                    /* @__PURE__ */ jsx("span", { className: "slider-mark-label", children: label })
+                  ]
+                },
+                k
+              );
+            }) })
+          ] }),
+          showValue && /* @__PURE__ */ jsx("span", { className: "slider-value", children: range ? `${vals[0]} \u2013 ${vals[1]}` : vals[0] })
+        ]
+      }
+    );
+  }
+);
+
+export { Slider };
+//# sourceMappingURL=chunk-2TZ2R7L2.js.map
+//# sourceMappingURL=chunk-2TZ2R7L2.js.map

package/dist/chunk-2TZ2R7L2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","file":"chunk-2TZ2R7L2.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Slider.css\";\nimport * as React from \"react\";\n\nexport type SliderRangeValue = [number, number];\nexport type SliderValue = number | SliderRangeValue;\n\ninterface SliderBaseProps {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showValue?: boolean;\n  tone?: \"accent\" | \"success\" | \"warning\" | \"danger\";\n  /** Custom gradient colors mapped from min→max. Overrides `tone` for fill & thumb. */\n  colors?: string[];\n  /** Tick marks with labels. Clicking a mark snaps to it. */\n  marks?: Record<number, React.ReactNode>;\n  className?: string;\n}\n\nexport interface SliderSingleProps extends SliderBaseProps {\n  range?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n}\n\nexport interface SliderRangeProps extends SliderBaseProps {\n  range: true;\n  value?: SliderRangeValue;\n  defaultValue?: SliderRangeValue;\n  onChange?: (value: SliderRangeValue) => void;\n}\n\nexport type SliderProps = SliderSingleProps | SliderRangeProps;\n\nfunction clamp(v: number, lo: number, hi: number) {\n  return Math.max(lo, Math.min(hi, v));\n}\n\nfunction snap(raw: number, step: number, min: number) {\n  return Math.round((raw - min) / step) * step + min;\n}\n\nfunction lerpColor(colors: string[], t: number): string {\n  const pos = Math.max(0, Math.min(1, t)) * (colors.length - 1);\n  const i = Math.min(Math.floor(pos), colors.length - 2);\n  const frac = pos - i;\n  if (frac === 0) return colors[i];\n  return `color-mix(in oklch, ${colors[i + 1]} ${Math.round(frac * 100)}%, ${colors[i]})`;\n}\n\n/** `Slider` — neumorphic range input with grooved track.\n * @example <Slider defaultValue={40} showValue />\n */\nexport const Slider = React.forwardRef<HTMLDivElement, SliderProps>(\n  (props, ref) => {\n    const {\n      min = 0,\n      max = 100,\n      step = 1,\n      disabled,\n      showValue,\n      tone = \"accent\",\n      colors,\n      marks,\n      className = \"\",\n    } = props;\n\n    const range = (props as SliderRangeProps).range === true;\n    const controlled = (props as { value?: SliderValue }).value;\n    const defaultVal = (props as { defaultValue?: SliderValue }).defaultValue;\n    const onChange = (props as { onChange?: (v: any) => void }).onChange;\n\n    const initRef = React.useRef<number[]>(\n      defaultVal !== undefined\n        ? Array.isArray(defaultVal)\n          ? [...defaultVal]\n          : [defaultVal]\n        : range\n          ? [min, max]\n          : [min]\n    );\n    const [inner, setInner] = React.useState<number[]>(initRef.current);\n\n    const isControlled = controlled !== undefined;\n    const vals = isControlled\n      ? Array.isArray(controlled)\n        ? controlled\n        : [controlled]\n      : inner;\n\n    const valsRef = React.useRef(vals);\n    valsRef.current = vals;\n\n    const trackRef = React.useRef<HTMLDivElement>(null);\n    const thumbEls = React.useRef<(HTMLDivElement | null)[]>([]);\n    const dragging = React.useRef<number | null>(null);\n\n    const pct = (n: number) => ((n - min) / (max - min)) * 100;\n\n    const commit = React.useCallback(\n      (next: number[]) => {\n        if (!isControlled) setInner(next);\n        if (range) {\n          onChange?.([next[0], next[1]] as SliderRangeValue);\n        } else {\n          onChange?.(next[0]);\n        }\n      },\n      [isControlled, range, onChange]\n    );\n\n    const setAt = React.useCallback(\n      (index: number, raw: number) => {\n        const snapped = snap(clamp(raw, min, max), step, min);\n        const clamped = clamp(snapped, min, max);\n        const out = [...valsRef.current];\n        out[index] = clamped;\n        if (range && out.length === 2 && out[0] > out[1]) out.sort((a, b) => a - b);\n        commit(out);\n      },\n      [min, max, step, range, commit]\n    );\n\n    const valFromX = React.useCallback(\n      (clientX: number) => {\n        const rect = trackRef.current?.getBoundingClientRect();\n        if (!rect) return min;\n        const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);\n        return min + ratio * (max - min);\n      },\n      [min, max]\n    );\n\n    const closerIndex = React.useCallback(\n      (target: number) => {\n        const v = valsRef.current;\n        if (!range || v.length < 2) return 0;\n        const d0 = Math.abs(v[0] - target);\n        const d1 = Math.abs(v[1] - target);\n        if (d0 === d1) return target < v[0] ? 0 : 1;\n        return d0 < d1 ? 0 : 1;\n      },\n      [range]\n    );\n\n    const onPointerDown = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        if (disabled) return;\n        e.preventDefault();\n        const val = valFromX(e.clientX);\n        const idx = closerIndex(val);\n        dragging.current = idx;\n        setAt(idx, val);\n        trackRef.current?.setPointerCapture(e.pointerId);\n        thumbEls.current[idx]?.focus();\n      },\n      [disabled, valFromX, closerIndex, setAt]\n    );\n\n    const onPointerMove = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        if (dragging.current === null) return;\n        setAt(dragging.current, valFromX(e.clientX));\n      },\n      [valFromX, setAt]\n    );\n\n    const onPointerUp = React.useCallback(() => {\n      dragging.current = null;\n    }, []);\n\n    const handleKey = React.useCallback(\n      (index: number, e: React.KeyboardEvent) => {\n        if (disabled) return;\n        let delta = 0;\n        if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") delta = step;\n        else if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") delta = -step;\n        else if (e.key === \"Home\") { setAt(index, min); return; }\n        else if (e.key === \"End\") { setAt(index, max); return; }\n        else return;\n        e.preventDefault();\n        setAt(index, valsRef.current[index] + delta);\n      },\n      [disabled, step, min, max, setAt]\n    );\n\n    const handleMarkClick = React.useCallback(\n      (mark: number) => {\n        if (disabled) return;\n        setAt(closerIndex(mark), mark);\n      },\n      [disabled, closerIndex, setAt]\n    );\n\n    const fillLeft = range ? pct(Math.min(vals[0], vals[1])) : 0;\n    const fillRight = range\n      ? 100 - pct(Math.max(vals[0], vals[1]))\n      : 100 - pct(vals[0]);\n\n    const hasGradient = colors && colors.length >= 2;\n\n    const fillStyle: React.CSSProperties = {\n      left: `${fillLeft}%`,\n      right: `${fillRight}%`,\n    };\n    if (hasGradient) {\n      const w = 100 - fillLeft - fillRight;\n      if (w > 0) {\n        const stops = colors.map((c, i) => {\n          const orig = (i / (colors.length - 1)) * 100;\n          return `${c} ${((orig - fillLeft) / w * 100).toFixed(2)}%`;\n        }).join(\", \");\n        fillStyle.background = `linear-gradient(to right, ${stops})`;\n        fillStyle.boxShadow = \"none\";\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={`slider ${range ? \"range\" : \"\"} ${hasGradient ? \"gradient\" : tone} ${disabled ? \"disabled\" : \"\"} ${marks ? \"has-marks\" : \"\"} ${className}`}\n      >\n        <div className=\"slider-rail\">\n          <div\n            className=\"slider-track\"\n            ref={trackRef}\n            onPointerDown={onPointerDown}\n            onPointerMove={onPointerMove}\n            onPointerUp={onPointerUp}\n          >\n            <div className=\"slider-fill\" style={fillStyle} />\n          </div>\n\n          {vals.map((n, i) => {\n            const thumbStyle: React.CSSProperties = { left: `${pct(n)}%` };\n            if (hasGradient) {\n              (thumbStyle as any)[\"--slider-thumb-color\"] = lerpColor(colors, (n - min) / (max - min));\n            }\n            return (\n              <div\n                key={i}\n                ref={(el) => { thumbEls.current[i] = el; }}\n                className=\"slider-thumb\"\n                style={thumbStyle}\n                role=\"slider\"\n                tabIndex={disabled ? -1 : 0}\n                aria-valuemin={min}\n                aria-valuemax={max}\n                aria-valuenow={n}\n                aria-disabled={disabled || undefined}\n                onKeyDown={(e) => handleKey(i, e)}\n                onPointerDown={(e) => {\n                  if (disabled) return;\n                  e.preventDefault();\n                  e.stopPropagation();\n                  dragging.current = i;\n                  trackRef.current?.setPointerCapture(e.pointerId);\n                  e.currentTarget.focus();\n                }}\n              />\n            );\n          })}\n\n          {marks && (\n            <div className=\"slider-marks\">\n              {Object.entries(marks).map(([k, label]) => {\n                const n = Number(k);\n                const active = range\n                  ? n >= Math.min(vals[0], vals[1]) && n <= Math.max(vals[0], vals[1])\n                  : n <= vals[0];\n                return (\n                  <span\n                    key={k}\n                    className={`slider-mark ${active ? \"active\" : \"\"}`}\n                    style={{ left: `${pct(n)}%` }}\n                    onClick={() => handleMarkClick(n)}\n                  >\n                    <span className=\"slider-mark-dot\" />\n                    <span className=\"slider-mark-label\">{label}</span>\n                  </span>\n                );\n              })}\n            </div>\n          )}\n        </div>\n\n        {showValue && (\n          <span className=\"slider-value\">\n            {range ? `${vals[0]} – ${vals[1]}` : vals[0]}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n"]}