@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/Slider/index.cjs

@@ -0,0 +1,880 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('nativewind/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// ../tokens/build/theme.ts
+var theme = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#fafafa",
+      elevated: "#ffffff",
+      subtle: "#f4f4f5"
+    },
+    border: {
+      default: "#e4e4e7",
+      strong: "#d4d4d8"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#0d9488",
+      primaryHover: "#0f766e",
+      primaryPressed: "#115e59"
+    },
+    text: {
+      default: "#18181b",
+      inverted: "#fafafa",
+      muted: "#52525b"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var themeDark = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#18181b",
+      elevated: "#3f3f46",
+      subtle: "#27272a"
+    },
+    border: {
+      default: "#3f3f46",
+      strong: "#52525b"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#2dd4bf",
+      primaryHover: "#5eead4",
+      primaryPressed: "#99f6e4"
+    },
+    text: {
+      default: "#fafafa",
+      inverted: "#18181b",
+      muted: "#a1a1aa"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var defaultTheme = {
+  light: theme,
+  dark: themeDark
+};
+var ThemeContext = react.createContext(defaultTheme);
+ThemeContext.displayName = "ThemeContext";
+var ColorSchemeOverrideContext = react.createContext(null);
+ColorSchemeOverrideContext.displayName = "ColorSchemeOverrideContext";
+var isWeb = reactNative.Platform.OS === "web";
+function readWebScheme() {
+  if (typeof document === "undefined") {
+    return "light";
+  }
+  const root = document.documentElement;
+  if (root.classList.contains("dark")) {
+    return "dark";
+  }
+  if (root.getAttribute("data-theme") === "dark") {
+    return "dark";
+  }
+  return "light";
+}
+__name(readWebScheme, "readWebScheme");
+function useColorScheme() {
+  const override = react.useContext(ColorSchemeOverrideContext);
+  const [scheme, setScheme] = react.useState(() => {
+    if (isWeb) {
+      return readWebScheme();
+    }
+    return reactNative.Appearance.getColorScheme() ?? "light";
+  });
+  react.useEffect(() => {
+    if (isWeb) {
+      const root = document.documentElement;
+      const update = /* @__PURE__ */ __name(() => setScheme(readWebScheme()), "update");
+      const observer = new MutationObserver(update);
+      observer.observe(root, { attributes: true, attributeFilter: ["class", "data-theme"] });
+      update();
+      return () => observer.disconnect();
+    }
+    const sub = reactNative.Appearance.addChangeListener(({ colorScheme }) => {
+      setScheme(colorScheme ?? "light");
+    });
+    return () => sub.remove();
+  }, []);
+  return override ?? scheme;
+}
+__name(useColorScheme, "useColorScheme");
+
+// src/theme/use-theme-colors.ts
+function useThemeColors() {
+  const scheme = useColorScheme();
+  const themePair = react.useContext(ThemeContext);
+  return scheme === "dark" ? themePair.dark : themePair.light;
+}
+__name(useThemeColors, "useThemeColors");
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  const out = [];
+  for (const input of inputs) {
+    append(out, input);
+  }
+  return out.join(" ");
+}
+__name(cn, "cn");
+function append(out, input) {
+  if (!input) {
+    return;
+  }
+  if (typeof input === "string") {
+    if (input.length > 0) {
+      out.push(input);
+    }
+    return;
+  }
+  if (typeof input === "number") {
+    return;
+  }
+  if (Array.isArray(input)) {
+    for (const inner of input) {
+      append(out, inner);
+    }
+    return;
+  }
+  if (typeof input === "object") {
+    for (const key of Object.keys(input)) {
+      if (input[key]) {
+        out.push(key);
+      }
+    }
+  }
+}
+__name(append, "append");
+var Ctx = react.createContext(null);
+function SliderGestureProvider({ children }) {
+  const activeCount = react.useRef(0);
+  const subs = react.useRef(/* @__PURE__ */ new Set());
+  const broadcast = react.useCallback(() => {
+    const isActive = activeCount.current > 0;
+    for (const s of subs.current) {
+      s(isActive);
+    }
+  }, []);
+  const bus = react.useMemo(
+    () => ({
+      begin: /* @__PURE__ */ __name(() => {
+        activeCount.current += 1;
+        broadcast();
+        let released = false;
+        return () => {
+          if (released) {
+            return;
+          }
+          released = true;
+          activeCount.current = Math.max(0, activeCount.current - 1);
+          broadcast();
+        };
+      }, "begin"),
+      subscribe: /* @__PURE__ */ __name((s) => {
+        subs.current.add(s);
+        return () => {
+          subs.current.delete(s);
+        };
+      }, "subscribe")
+    }),
+    [broadcast]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Ctx.Provider, { value: bus, children });
+}
+__name(SliderGestureProvider, "SliderGestureProvider");
+function useSliderGesturePublisher() {
+  const bus = react.useContext(Ctx);
+  const releaseRef = react.useRef(null);
+  return react.useMemo(
+    () => ({
+      begin: /* @__PURE__ */ __name(() => {
+        if (!bus) {
+          return;
+        }
+        if (releaseRef.current) {
+          return;
+        }
+        releaseRef.current = bus.begin();
+      }, "begin"),
+      end: /* @__PURE__ */ __name(() => {
+        if (!bus) {
+          return;
+        }
+        releaseRef.current?.();
+        releaseRef.current = null;
+      }, "end")
+    }),
+    [bus]
+  );
+}
+__name(useSliderGesturePublisher, "useSliderGesturePublisher");
+function useSliderInteractionActive() {
+  const bus = react.useContext(Ctx);
+  const [active, setActive] = react.useState(false);
+  react.useEffect(() => {
+    if (!bus) {
+      return;
+    }
+    const unsubscribe = bus.subscribe(setActive);
+    return unsubscribe;
+  }, [bus]);
+  return active;
+}
+__name(useSliderInteractionActive, "useSliderInteractionActive");
+var TRACK_THICKNESS = 6;
+var THUMB_SIZE = 18;
+var THUMB_HIT_SLOP = 8;
+var snap = /* @__PURE__ */ __name((raw, min, max, step) => {
+  const clamped = Math.min(max, Math.max(min, raw));
+  if (step <= 0) {
+    return clamped;
+  }
+  const stepped = Math.round((clamped - min) / step) * step + min;
+  return Math.min(max, Math.max(min, Number.parseFloat(stepped.toFixed(10))));
+}, "snap");
+var updateAt = /* @__PURE__ */ __name((values, index, next, gap) => {
+  const out = values.slice();
+  out[index] = next;
+  const left = index > 0 ? out[index - 1] : void 0;
+  const right = index < out.length - 1 ? out[index + 1] : void 0;
+  if (left !== void 0 && next < left + gap) {
+    out[index] = left + gap;
+  }
+  if (right !== void 0 && next > right - gap) {
+    out[index] = right - gap;
+  }
+  return out;
+}, "updateAt");
+var Slider = /* @__PURE__ */ __name(({
+  value,
+  defaultValue,
+  onChange,
+  onValueCommit,
+  onInteractionStart,
+  onInteractionEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  minStepsBetweenThumbs = 0,
+  orientation = "horizontal",
+  dir = "ltr",
+  inverted = false,
+  disabled = false,
+  ariaLabelForThumb,
+  length = 200,
+  className,
+  testID,
+  ...rest
+}) => {
+  const colors = useThemeColors();
+  const ariaLabel = rest["aria-label"];
+  const isVertical = orientation === "vertical";
+  const reversed = isVertical ? Boolean(inverted) : dir === "rtl" ? !inverted : Boolean(inverted);
+  const gap = step * minStepsBetweenThumbs;
+  const initial = (defaultValue ?? value ?? [min]).map((v) => snap(v, min, max, step));
+  const [inner, setInner] = react.useState(initial);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value.map((v) => snap(v, min, max, step)) : inner;
+  const trackRef = react.useRef(null);
+  const trackRectRef = react.useRef(null);
+  const measure = react.useCallback(() => {
+    const node = trackRef.current;
+    if (!node) {
+      return;
+    }
+    if (reactNative.Platform.OS === "web") {
+      const webNode = node;
+      if (typeof window === "undefined" || typeof webNode.getBoundingClientRect !== "function") {
+        return;
+      }
+      const rect = webNode.getBoundingClientRect();
+      trackRectRef.current = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+      return;
+    }
+    if (typeof node.measureInWindow === "function") {
+      node.measureInWindow((x, y, width, height) => {
+        trackRectRef.current = { x, y, width, height };
+      });
+    }
+  }, []);
+  react.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [measure]);
+  const setValues = react.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const commitValues = react.useCallback(
+    (next) => {
+      onValueCommit?.(next);
+    },
+    [onValueCommit]
+  );
+  const valueFromClient = react.useCallback(
+    (clientX, clientY) => {
+      const rect = trackRectRef.current;
+      if (!rect) {
+        return min;
+      }
+      const len = isVertical ? rect.height : rect.width;
+      if (len <= 0) {
+        return min;
+      }
+      const offset = isVertical ? clientY - rect.y : clientX - rect.x;
+      let ratio = offset / len;
+      ratio = Math.min(1, Math.max(0, ratio));
+      if (isVertical) {
+        ratio = 1 - ratio;
+      }
+      if (reversed) {
+        ratio = 1 - ratio;
+      }
+      const raw = min + ratio * (max - min);
+      return snap(raw, min, max, step);
+    },
+    [isVertical, reversed, min, max, step]
+  );
+  const closestThumbIndex = react.useCallback(
+    (target) => {
+      let best = 0;
+      let bestDelta = Number.POSITIVE_INFINITY;
+      for (let i = 0; i < current.length; i += 1) {
+        const cv = current[i];
+        if (cv === void 0) {
+          continue;
+        }
+        const delta = Math.abs(cv - target);
+        if (delta < bestDelta) {
+          best = i;
+          bestDelta = delta;
+        }
+      }
+      return best;
+    },
+    [current]
+  );
+  const draggingRef = react.useRef(null);
+  const gesturePublisher = useSliderGesturePublisher();
+  const onTrackPointerDown = react.useCallback(
+    (event) => {
+      if (disabled) {
+        return;
+      }
+      measure();
+      const targetValue = valueFromClient(event.clientX, event.clientY);
+      const idx = closestThumbIndex(targetValue);
+      const next = updateAt(current, idx, targetValue, gap);
+      setValues(next);
+      draggingRef.current = { index: idx, pointerId: event.pointerId };
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+      gesturePublisher.begin();
+      onInteractionStart?.();
+    },
+    [
+      disabled,
+      measure,
+      valueFromClient,
+      closestThumbIndex,
+      current,
+      gap,
+      setValues,
+      gesturePublisher,
+      onInteractionStart
+    ]
+  );
+  const onTrackPointerMove = react.useCallback(
+    (event) => {
+      const drag = draggingRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      const targetValue = valueFromClient(event.clientX, event.clientY);
+      const next = updateAt(current, drag.index, targetValue, gap);
+      setValues(next);
+    },
+    [valueFromClient, current, gap, setValues]
+  );
+  const onTrackPointerUp = react.useCallback(
+    (event) => {
+      const drag = draggingRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      draggingRef.current = null;
+      commitValues(current);
+      gesturePublisher.end();
+      onInteractionEnd?.();
+    },
+    [commitValues, current, gesturePublisher, onInteractionEnd]
+  );
+  const handleThumbKeyDown = react.useCallback(
+    (index) => (event) => {
+      if (disabled) {
+        return;
+      }
+      const cv = current[index];
+      if (cv === void 0) {
+        return;
+      }
+      const range = max - min;
+      const big = Math.max(step * 10, range / 10);
+      const arrowSign = /* @__PURE__ */ __name((key) => {
+        const base = key === "inc" ? 1 : -1;
+        return reversed ? -base : base;
+      }, "arrowSign");
+      let nextValue = cv;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          nextValue = cv + step * arrowSign("inc");
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          nextValue = cv + step * arrowSign("dec");
+          break;
+        case "PageUp":
+          nextValue = cv + big * arrowSign("inc");
+          break;
+        case "PageDown":
+          nextValue = cv + big * arrowSign("dec");
+          break;
+        case "Home":
+          nextValue = min;
+          break;
+        case "End":
+          nextValue = max;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const snapped = snap(nextValue, min, max, step);
+      const next = updateAt(current, index, snapped, gap);
+      setValues(next);
+      commitValues(next);
+    },
+    [disabled, current, max, min, step, reversed, gap, setValues, commitValues]
+  );
+  const pctSig = /* @__PURE__ */ __name((n) => `${Math.round(n * 1e4) / 1e4}%`, "pctSig");
+  const thumbPositionStyle = /* @__PURE__ */ __name((val) => {
+    const ratio = (val - min) / (max - min || 1);
+    const offset = pctSig((reversed ? 1 - ratio : ratio) * 100);
+    if (isVertical) {
+      const verticalOffset = pctSig((reversed ? ratio : 1 - ratio) * 100);
+      return {
+        position: "absolute",
+        top: verticalOffset,
+        left: pctSig(50),
+        marginLeft: -THUMB_SIZE / 2,
+        marginTop: -THUMB_SIZE / 2
+      };
+    }
+    return {
+      position: "absolute",
+      left: offset,
+      top: pctSig(50),
+      marginLeft: -THUMB_SIZE / 2,
+      marginTop: -THUMB_SIZE / 2
+    };
+  }, "thumbPositionStyle");
+  const sortedValues = react.useMemo(() => current.slice().sort((a, b) => a - b), [current]);
+  const isSingle = sortedValues.length <= 1;
+  const fillStart = isSingle ? min : sortedValues[0] ?? min;
+  const fillEnd = isSingle ? sortedValues[0] ?? min : sortedValues[sortedValues.length - 1] ?? min;
+  const startRatio = (fillStart - min) / (max - min || 1);
+  const endRatio = (fillEnd - min) / (max - min || 1);
+  const pct = /* @__PURE__ */ __name((n) => `${Math.round(n * 1e4) / 1e4}%`, "pct");
+  const rangeStyle = isVertical ? {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: pct((reversed ? 1 - endRatio : startRatio) * 100),
+    top: pct((reversed ? startRatio : 1 - endRatio) * 100),
+    backgroundColor: disabled ? colors.color.neutral["400"] : colors.semantic.interactive.primary
+  } : {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: pct((reversed ? 1 - endRatio : startRatio) * 100),
+    right: pct((reversed ? startRatio : 1 - endRatio) * 100),
+    backgroundColor: disabled ? colors.color.neutral["400"] : colors.semantic.interactive.primary
+  };
+  const trackStyle = isVertical ? {
+    width: TRACK_THICKNESS,
+    height: length,
+    backgroundColor: colors.semantic.background.subtle,
+    borderRadius: TRACK_THICKNESS / 2,
+    position: "relative"
+    // No overflow: hidden here — the thumb is a child and we don't
+    // want it clipped at the track's edge. The fill below sits in
+    // its own absolutely-positioned slot inside the track and
+    // already paints within the track's rounded corners thanks to
+    // matching borderRadius, so we don't need to clip.
+  } : {
+    height: TRACK_THICKNESS,
+    width: "100%",
+    backgroundColor: colors.semantic.background.subtle,
+    borderRadius: TRACK_THICKNESS / 2,
+    position: "relative"
+    // No overflow: hidden here — the thumb is a child and we don't
+    // want it clipped at the track's edge. The fill below sits in
+    // its own absolutely-positioned slot inside the track and
+    // already paints within the track's rounded corners thanks to
+    // matching borderRadius, so we don't need to clip.
+  };
+  const containerStyle = isVertical ? {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: THUMB_HIT_SLOP,
+    paddingHorizontal: THUMB_SIZE,
+    opacity: disabled ? 0.5 : 1
+  } : {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: THUMB_HIT_SLOP,
+    paddingHorizontal: THUMB_SIZE / 2,
+    opacity: disabled ? 0.5 : 1
+  };
+  const onTrackResponderGrant = react.useCallback(
+    (event) => {
+      if (disabled) {
+        return;
+      }
+      measure();
+      const { pageX, pageY } = event.nativeEvent;
+      const targetValue = valueFromClient(pageX, pageY);
+      const idx = closestThumbIndex(targetValue);
+      const next = updateAt(current, idx, targetValue, gap);
+      setValues(next);
+      draggingRef.current = { index: idx, pointerId: 0 };
+      gesturePublisher.begin();
+      onInteractionStart?.();
+    },
+    [
+      disabled,
+      measure,
+      valueFromClient,
+      closestThumbIndex,
+      current,
+      gap,
+      setValues,
+      gesturePublisher,
+      onInteractionStart
+    ]
+  );
+  const onTrackResponderMove = react.useCallback(
+    (event) => {
+      if (!draggingRef.current) {
+        return;
+      }
+      const { pageX, pageY } = event.nativeEvent;
+      const targetValue = valueFromClient(pageX, pageY);
+      const next = updateAt(current, draggingRef.current.index, targetValue, gap);
+      setValues(next);
+    },
+    [valueFromClient, current, gap, setValues]
+  );
+  const onTrackResponderRelease = react.useCallback(() => {
+    if (!draggingRef.current) {
+      return;
+    }
+    draggingRef.current = null;
+    commitValues(current);
+    gesturePublisher.end();
+    onInteractionEnd?.();
+  }, [commitValues, current, gesturePublisher, onInteractionEnd]);
+  const trackPointerProps = reactNative.Platform.OS === "web" ? {
+    onPointerDown: onTrackPointerDown,
+    onPointerMove: onTrackPointerMove,
+    onPointerUp: onTrackPointerUp,
+    onPointerCancel: onTrackPointerUp
+  } : {
+    // Capture variants run BEFORE non-capture handlers and
+    // walk root → leaf, so they win the gesture against an
+    // ancestor ScrollView whose own `onStartShould` would
+    // otherwise claim the touch first. Without these, a
+    // vertical slider inside a vertical ScrollView lets the
+    // ScrollView swallow the drag.
+    onStartShouldSetResponderCapture: /* @__PURE__ */ __name(() => !disabled, "onStartShouldSetResponderCapture"),
+    onMoveShouldSetResponderCapture: /* @__PURE__ */ __name(() => !disabled, "onMoveShouldSetResponderCapture"),
+    onStartShouldSetResponder: /* @__PURE__ */ __name(() => !disabled, "onStartShouldSetResponder"),
+    onMoveShouldSetResponder: /* @__PURE__ */ __name(() => !disabled, "onMoveShouldSetResponder"),
+    onResponderGrant: onTrackResponderGrant,
+    onResponderMove: onTrackResponderMove,
+    onResponderRelease: onTrackResponderRelease,
+    onResponderTerminate: onTrackResponderRelease,
+    onResponderTerminationRequest: /* @__PURE__ */ __name(() => false, "onResponderTerminationRequest")
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      role: "group",
+      accessibilityRole: "adjustable",
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel, accessibilityLabel: ariaLabel } : {},
+      ...disabled ? { "aria-disabled": true } : {},
+      className: cn(
+        isVertical ? "flex-col items-center" : "flex-row items-center",
+        disabled ? "opacity-50" : void 0,
+        className
+      ),
+      style: containerStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.View,
+        {
+          ref: trackRef,
+          onLayout: measure,
+          ...trackPointerProps,
+          className: cn("relative bg-neutral-200 rounded-full"),
+          style: trackStyle,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.View,
+              {
+                pointerEvents: "none",
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  borderRadius: TRACK_THICKNESS / 2,
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: rangeStyle })
+              }
+            ),
+            current.map((val, index) => {
+              const ratio = (val - min) / (max - min || 1);
+              const thumbProps = {
+                role: "slider",
+                accessibilityRole: "adjustable",
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": val,
+                "aria-orientation": orientation,
+                "aria-label": ariaLabelForThumb?.(index) ?? ariaLabel,
+                tabIndex: disabled ? -1 : 0,
+                onKeyDown: handleThumbKeyDown(index),
+                "data-thumb-index": index,
+                "data-value": val,
+                "data-ratio": ratio
+              };
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.View,
+                {
+                  ...thumbProps,
+                  style: [
+                    thumbPositionStyle(val),
+                    {
+                      width: THUMB_SIZE,
+                      height: THUMB_SIZE,
+                      borderRadius: THUMB_SIZE / 2,
+                      backgroundColor: colors.semantic.background.elevated,
+                      borderWidth: 2,
+                      borderColor: disabled ? colors.color.neutral["400"] : colors.semantic.interactive.primary,
+                      ...reactNative.Platform.OS === "web" ? { boxShadow: "0 1px 2px rgba(0,0,0,0.1)" } : {}
+                    }
+                  ]
+                },
+                `thumb-${index}`
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+}, "Slider");
+
+exports.Slider = Slider;
+exports.SliderGestureProvider = SliderGestureProvider;
+exports.useSliderInteractionActive = useSliderInteractionActive;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map