@metamask/design-system-react-native 0.34.0 → 0.36.0

package/dist/components/Slider/Slider.utilities.mjs

@@ -0,0 +1,266 @@
+/**
+ * Pure helpers for Slider coordinate conversion and UI defaults.
+ *
+ * Three coordinate systems:
+ * - **Domain value** — the controlled `value` prop (`minimumValue`…`maximumValue`).
+ * - **Track percent** — normalized 0–100 position along the track (used for dots,
+ *   labels, and haptic thresholds; may be non-linear via `map*` hooks).
+ * - **Pixel position** — thumb/fill offset in layout pixels (`translateX`).
+ *
+ * Functions marked with `'worklet'` run on the UI thread inside gesture handlers.
+ * JS-thread callers use the non-worklet wrappers (`getTrackPercentFromValue`, etc.).
+ */
+import { interpolateColor } from "react-native-reanimated";
+import { DOT_EDGE_INSET_PERCENT, DOT_EDGE_MAX_PERCENT } from "./Slider.constants.mjs";
+// --- Track-percent primitives (worklet) ---
+export function clampTrackPercent(trackPercent) {
+    'worklet';
+    return Math.max(0, Math.min(100, trackPercent));
+}
+// --- Domain ↔ track-percent mappers (worklet) ---
+/**
+ * Linear default: domain value → 0–100 track position.
+ *
+ * @param value - Domain value to map.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @returns Track percent clamped to 0–100.
+ */
+export function defaultMapValueToTrackPercent(value, minimumValue, maximumValue) {
+    'worklet';
+    const range = maximumValue - minimumValue;
+    if (range === 0) {
+        return 0;
+    }
+    const percent = ((value - minimumValue) / range) * 100;
+    return clampTrackPercent(percent);
+}
+/**
+ * Linear default: track position → stepped domain value.
+ *
+ * @param trackPercent - Track position from 0–100.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @param step - Step increment for rounding.
+ * @returns Stepped domain value clamped to the range.
+ */
+export function defaultMapTrackPercentToValue(trackPercent, minimumValue, maximumValue, step) {
+    'worklet';
+    const range = maximumValue - minimumValue;
+    if (range === 0) {
+        return minimumValue;
+    }
+    const rawValue = (clampTrackPercent(trackPercent) / 100) * range + minimumValue;
+    const stepped = Math.round(rawValue / step) * step;
+    return Math.max(minimumValue, Math.min(maximumValue, stepped));
+}
+/**
+ * UI-thread entry: custom `mapTrackPercentToValue` or linear default.
+ *
+ * @param trackPercent - Track position from 0–100.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @param step - Step increment for the default mapper.
+ * @param mapTrackPercentToValue - Optional custom mapper.
+ * @returns Domain value for the track position.
+ */
+export function resolveTrackPercentToValue(trackPercent, minimumValue, maximumValue, step, mapTrackPercentToValue) {
+    'worklet';
+    if (mapTrackPercentToValue) {
+        return mapTrackPercentToValue(trackPercent);
+    }
+    return defaultMapTrackPercentToValue(trackPercent, minimumValue, maximumValue, step);
+}
+/**
+ * UI-thread entry: custom `mapValueToTrackPercent` or linear default.
+ *
+ * @param value - Domain value to map.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @param mapValueToTrackPercent - Optional custom mapper.
+ * @returns Track percent for the domain value.
+ */
+export function resolveValueToTrackPercent(value, minimumValue, maximumValue, mapValueToTrackPercent) {
+    'worklet';
+    if (mapValueToTrackPercent) {
+        return mapValueToTrackPercent(value);
+    }
+    return defaultMapValueToTrackPercent(value, minimumValue, maximumValue);
+}
+// --- Track-percent ↔ pixel position (worklet) ---
+export function trackPercentToPosition(trackPercent, width) {
+    'worklet';
+    if (width === 0) {
+        return 0;
+    }
+    return (clampTrackPercent(trackPercent) / 100) * width;
+}
+export function positionToTrackPercent(position, width) {
+    'worklet';
+    if (width === 0) {
+        return 0;
+    }
+    return clampTrackPercent((position / width) * 100);
+}
+/**
+ * Clamps a touch X coordinate to the track bounds.
+ *
+ * @param position - Touch X in track coordinates.
+ * @param width - Track width in pixels.
+ * @returns Clamped pixel position.
+ */
+export function clampGesturePosition(position, width) {
+    'worklet';
+    return Math.max(0, Math.min(position, width));
+}
+// --- JS-thread domain ↔ track-percent ---
+/**
+ * JS-thread entry for mapping domain value → track percent.
+ * Used by Slider (labels, a11y) and useSliderGesture (prop/layout sync).
+ *
+ * @param value - Domain value to map.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @param mapValueToTrackPercent - Optional custom mapper.
+ * @returns Track percent for the domain value.
+ */
+export function getTrackPercentFromValue(value, minimumValue, maximumValue, mapValueToTrackPercent) {
+    if (mapValueToTrackPercent) {
+        return mapValueToTrackPercent(value);
+    }
+    return defaultMapValueToTrackPercent(value, minimumValue, maximumValue);
+}
+// --- Range label / dot defaults (Slider.tsx) ---
+/**
+ * Default linear track-percent → domain value for a mark.
+ *
+ * @param step - Track-percent step from a mark entry.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @returns Domain value for the step.
+ */
+export function defaultStepToValue(step, minimumValue, maximumValue) {
+    return (step / 100) * (maximumValue - minimumValue) + minimumValue;
+}
+/**
+ * Domain value for a mark: explicit `value` or linear default from step.
+ *
+ * @param mark - Mark entry.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @returns Domain value for the mark.
+ */
+export function getMarkValue(mark, minimumValue, maximumValue) {
+    if (mark.value !== undefined) {
+        return mark.value;
+    }
+    return defaultStepToValue(mark.step, minimumValue, maximumValue);
+}
+/**
+ * Track-percent thresholds that trigger onMark while dragging.
+ *
+ * @param marks - Mark entries.
+ * @returns Haptic threshold positions.
+ */
+export function getMarkHapticThresholds(marks) {
+    return marks
+        .filter((mark) => mark.haptic ?? Boolean(mark.label))
+        .map((mark) => mark.step);
+}
+/**
+ * Resolves a mark color to a concrete color string for Reanimated.
+ * Design tokens are looked up on the palette; raw hex/rgb pass through
+ * (temporary migration bridge — prefer `SliderMarkColor` tokens in app code).
+ *
+ * @param color - Theme token key (or legacy hex/rgb string).
+ * @param palette - Flattened theme color palette.
+ * @param fallback - Fallback color when token is not found.
+ * @returns Resolved color string.
+ */
+export function resolveMarkColor(color, palette, fallback) {
+    if (color.startsWith('#') || color.startsWith('rgb')) {
+        return color;
+    }
+    return palette[color] ?? fallback;
+}
+/**
+ * Builds color interpolation stops from marks, applying fallback for missing colors.
+ *
+ * @param marks - Mark entries.
+ * @param palette - Flattened theme color palette.
+ * @param fallbackToken - Default token key when mark.color is omitted.
+ * @returns Sorted color stops for interpolation.
+ */
+export function buildColorStops(marks, palette, fallbackToken) {
+    const fallback = palette[fallbackToken] ?? '#000000';
+    return [...marks]
+        .sort((a, b) => a.step - b.step)
+        .map((mark) => ({
+        step: mark.step,
+        color: mark.color
+            ? resolveMarkColor(mark.color, palette, fallback)
+            : fallback,
+    }));
+}
+/**
+ * Interpolates a color along the track based on mark color stops.
+ *
+ * @param trackPercent - Current track position from 0–100.
+ * @param stops - Sorted color stops.
+ * @returns Interpolated color string.
+ */
+export function interpolateMarkColor(trackPercent, stops) {
+    'worklet';
+    if (stops.length === 0) {
+        return '#000000';
+    }
+    if (stops.length === 1) {
+        return stops[0].color;
+    }
+    const inputRange = stops.map((stop) => stop.step);
+    const outputRange = stops.map((stop) => stop.color);
+    return interpolateColor(clampTrackPercent(trackPercent), inputRange, outputRange, 'RGB');
+}
+/**
+ * Whether any mark defines a theme color.
+ *
+ * @param marks - Mark entries.
+ * @returns True when at least one mark has a color.
+ */
+export function hasThemedMarkColors(marks) {
+    return marks.some((mark) => Boolean(mark.color));
+}
+/**
+ * Marker `left` percent for range dots and labels; edge steps inset to stay on track.
+ *
+ * @param step - Track-percent step from a mark entry.
+ * @returns CSS `left` percentage string.
+ */
+export function getDotLeftPercent(step) {
+    if (step === 0) {
+        return DOT_EDGE_INSET_PERCENT;
+    }
+    if (step === 100) {
+        return DOT_EDGE_MAX_PERCENT;
+    }
+    return `${step}%`;
+}
+// --- Accessibility (Slider.tsx) ---
+/**
+ * Clamps and steps a domain value for increment/decrement actions.
+ *
+ * @param value - Domain value to clamp.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @param step - Step increment for rounding.
+ * @returns Clamped and stepped domain value.
+ */
+export function clampValueToRange(value, minimumValue, maximumValue, step) {
+    const range = maximumValue - minimumValue;
+    if (range === 0) {
+        return minimumValue;
+    }
+    const clamped = Math.max(minimumValue, Math.min(maximumValue, value));
+    return Math.round(clamped / step) * step;
+}
+//# sourceMappingURL=Slider.utilities.mjs.map

package/dist/components/Slider/Slider.utilities.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.utilities.mjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.utilities.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Pure helpers for Slider coordinate conversion and UI defaults.\n *\n * Three coordinate systems:\n * - **Domain value** — the controlled `value` prop (`minimumValue`…`maximumValue`).\n * - **Track percent** — normalized 0–100 position along the track (used for dots,\n *   labels, and haptic thresholds; may be non-linear via `map*` hooks).\n * - **Pixel position** — thumb/fill offset in layout pixels (`translateX`).\n *\n * Functions marked with `'worklet'` run on the UI thread inside gesture handlers.\n * JS-thread callers use the non-worklet wrappers (`getTrackPercentFromValue`, etc.).\n */\n\nimport type {\n  SliderMark,\n  SliderMarkColor,\n} from '@metamask/design-system-shared';\nimport { interpolateColor } from 'react-native-reanimated';\n\nimport {\n  DOT_EDGE_INSET_PERCENT,\n  DOT_EDGE_MAX_PERCENT,\n} from './Slider.constants';\n\nexport type SliderColorStop = {\n  step: number;\n  color: string;\n};\n\n// --- Track-percent primitives (worklet) ---\n\nexport function clampTrackPercent(trackPercent: number): number {\n  'worklet';\n\n  return Math.max(0, Math.min(100, trackPercent));\n}\n\n// --- Domain ↔ track-percent mappers (worklet) ---\n\n/**\n * Linear default: domain value → 0–100 track position.\n *\n * @param value - Domain value to map.\n * @param minimumValue - Lower bound of the domain range.\n * @param maximumValue - Upper bound of the domain range.\n * @returns Track percent clamped to 0–100.\n */\nexport function defaultMapValueToTrackPercent(\n  value: number,\n  minimumValue: number,\n  maximumValue: number,\n): number {\n  'worklet';\n\n  const range = maximumValue - minimumValue;\n  if (range === 0) {\n    return 0;\n  }\n\n  const percent = ((value - minimumValue) / range) * 100;\n  return clampTrackPercent(percent);\n}\n\n/**\n * Linear default: track position → stepped domain value.\n *\n * @param trackPercent - Track position from 0–100.\n * @param minimumValue - Lower bound of the domain range.\n * @param maximumValue - Upper bound of the domain range.\n * @param step - Step increment for rounding.\n * @returns Stepped domain value clamped to the range.\n */\nexport function defaultMapTrackPercentToValue(\n  trackPercent: number,\n  minimumValue: number,\n  maximumValue: number,\n  step: number,\n): number {\n  'worklet';\n\n  const range = maximumValue - minimumValue;\n  if (range === 0) {\n    return minimumValue;\n  }\n\n  const rawValue =\n    (clampTrackPercent(trackPercent) / 100) * range + minimumValue;\n  const stepped = Math.round(rawValue / step) * step;\n  return Math.max(minimumValue, Math.min(maximumValue, stepped));\n}\n\n/**\n * UI-thread entry: custom `mapTrackPercentToValue` or linear default.\n *\n * @param trackPercent - Track position from 0–100.\n * @param minimumValue - Lower bound of the domain range.\n * @param maximumValue - Upper bound of the domain range.\n * @param step - Step increment for the default mapper.\n * @param mapTrackPercentToValue - Optional custom mapper.\n * @returns Domain value for the track position.\n */\nexport function resolveTrackPercentToValue(\n  trackPercent: number,\n  minimumValue: number,\n  maximumValue: number,\n  step: number,\n  mapTrackPercentToValue?: (trackPercent: number) => number,\n): number {\n  'worklet';\n\n  if (mapTrackPercentToValue) {\n    return mapTrackPercentToValue(trackPercent);\n  }\n\n  return defaultMapTrackPercentToValue(\n    trackPercent,\n    minimumValue,\n    maximumValue,\n    step,\n  );\n}\n\n/**\n * UI-thread entry: custom `mapValueToTrackPercent` or linear default.\n *\n * @param value - Domain value to map.\n * @param minimumValue - Lower bound of the domain range.\n * @param maximumValue - Upper bound of the domain range.\n * @param mapValueToTrackPercent - Optional custom mapper.\n * @returns Track percent for the domain value.\n */\nexport function resolveValueToTrackPercent(\n  value: number,\n  minimumValue: number,\n  maximumValue: number,\n  mapValueToTrackPercent?: (value: number) => number,\n): number {\n  'worklet';\n\n  if (mapValueToTrackPercent) {\n    return mapValueToTrackPercent(value);\n  }\n\n  return defaultMapValueToTrackPercent(value, minimumValue, maximumValue);\n}\n\n// --- Track-percent ↔ pixel position (worklet) ---\n\nexport function trackPercentToPosition(\n  trackPercent: number,\n  width: number,\n): number {\n  'worklet';\n\n  if (width === 0) {\n    return 0;\n  }\n\n  return (clampTrackPercent(trackPercent) / 100) * width;\n}\n\nexport function positionToTrackPercent(\n  position: number,\n  width: number,\n): number {\n  'worklet';\n\n  if (width === 0) {\n    return 0;\n  }\n\n  return clampTrackPercent((position / width) * 100);\n}\n\n/**\n * Clamps a touch X coordinate to the track bounds.\n *\n * @param position - Touch X in track coordinates.\n * @param width - Track width in pixels.\n * @returns Clamped pixel position.\n */\nexport function clampGesturePosition(position: number, width: number): number {\n  'worklet';\n\n  return Math.max(0, Math.min(position, width));\n}\n\n// --- JS-thread domain ↔ track-percent ---\n\n/**\n * JS-thread entry for mapping domain value → track percent.\n * Used by Slider (labels, a11y) and useSliderGesture (prop/layout sync).\n *\n * @param value - Domain value to map.\n * @param minimumValue - Lower bound of the domain range.\n * @param maximumValue - Upper bound of the domain range.\n * @param mapValueToTrackPercent - Optional custom mapper.\n * @returns Track percent for the domain value.\n */\nexport function getTrackPercentFromValue(\n  value: number,\n  minimumValue: number,\n  maximumValue: number,\n  mapValueToTrackPercent?: (value: number) => number,\n): number {\n  if (mapValueToTrackPercent) {\n    return mapValueToTrackPercent(value);\n  }\n\n  return defaultMapValueToTrackPercent(value, minimumValue, maximumValue);\n}\n\n// --- Range label / dot defaults (Slider.tsx) ---\n\n/**\n * Default linear track-percent → domain value for a mark.\n *\n * @param step - Track-percent step from a mark entry.\n * @param minimumValue - Lower bound of the domain range.\n * @param maximumValue - Upper bound of the domain range.\n * @returns Domain value for the step.\n */\nexport function defaultStepToValue(\n  step: number,\n  minimumValue: number,\n  maximumValue: number,\n): number {\n  return (step / 100) * (maximumValue - minimumValue) + minimumValue;\n}\n\n/**\n * Domain value for a mark: explicit `value` or linear default from step.\n *\n * @param mark - Mark entry.\n * @param minimumValue - Lower bound of the domain range.\n * @param maximumValue - Upper bound of the domain range.\n * @returns Domain value for the mark.\n */\nexport function getMarkValue(\n  mark: SliderMark,\n  minimumValue: number,\n  maximumValue: number,\n): number {\n  if (mark.value !== undefined) {\n    return mark.value;\n  }\n\n  return defaultStepToValue(mark.step, minimumValue, maximumValue);\n}\n\n/**\n * Track-percent thresholds that trigger onMark while dragging.\n *\n * @param marks - Mark entries.\n * @returns Haptic threshold positions.\n */\nexport function getMarkHapticThresholds(\n  marks: readonly SliderMark[],\n): number[] {\n  return marks\n    .filter((mark) => mark.haptic ?? Boolean(mark.label))\n    .map((mark) => mark.step);\n}\n\n/**\n * Resolves a mark color to a concrete color string for Reanimated.\n * Design tokens are looked up on the palette; raw hex/rgb pass through\n * (temporary migration bridge — prefer `SliderMarkColor` tokens in app code).\n *\n * @param color - Theme token key (or legacy hex/rgb string).\n * @param palette - Flattened theme color palette.\n * @param fallback - Fallback color when token is not found.\n * @returns Resolved color string.\n */\nexport function resolveMarkColor(\n  color: SliderMarkColor | string,\n  palette: Record<string, string>,\n  fallback: string,\n): string {\n  if (color.startsWith('#') || color.startsWith('rgb')) {\n    return color;\n  }\n\n  return palette[color] ?? fallback;\n}\n\n/**\n * Builds color interpolation stops from marks, applying fallback for missing colors.\n *\n * @param marks - Mark entries.\n * @param palette - Flattened theme color palette.\n * @param fallbackToken - Default token key when mark.color is omitted.\n * @returns Sorted color stops for interpolation.\n */\nexport function buildColorStops(\n  marks: readonly SliderMark[],\n  palette: Record<string, string>,\n  fallbackToken: string,\n): SliderColorStop[] {\n  const fallback = palette[fallbackToken] ?? '#000000';\n\n  return [...marks]\n    .sort((a, b) => a.step - b.step)\n    .map((mark) => ({\n      step: mark.step,\n      color: mark.color\n        ? resolveMarkColor(mark.color, palette, fallback)\n        : fallback,\n    }));\n}\n\n/**\n * Interpolates a color along the track based on mark color stops.\n *\n * @param trackPercent - Current track position from 0–100.\n * @param stops - Sorted color stops.\n * @returns Interpolated color string.\n */\nexport function interpolateMarkColor(\n  trackPercent: number,\n  stops: readonly SliderColorStop[],\n): string {\n  'worklet';\n\n  if (stops.length === 0) {\n    return '#000000';\n  }\n\n  if (stops.length === 1) {\n    return stops[0].color;\n  }\n\n  const inputRange = stops.map((stop) => stop.step);\n  const outputRange = stops.map((stop) => stop.color);\n\n  return interpolateColor(\n    clampTrackPercent(trackPercent),\n    inputRange,\n    outputRange,\n    'RGB',\n  );\n}\n\n/**\n * Whether any mark defines a theme color.\n *\n * @param marks - Mark entries.\n * @returns True when at least one mark has a color.\n */\nexport function hasThemedMarkColors(marks: readonly SliderMark[]): boolean {\n  return marks.some((mark) => Boolean(mark.color));\n}\n\n/**\n * Marker `left` percent for range dots and labels; edge steps inset to stay on track.\n *\n * @param step - Track-percent step from a mark entry.\n * @returns CSS `left` percentage string.\n */\nexport function getDotLeftPercent(step: number): string {\n  if (step === 0) {\n    return DOT_EDGE_INSET_PERCENT;\n  }\n  if (step === 100) {\n    return DOT_EDGE_MAX_PERCENT;\n  }\n\n  return `${step}%`;\n}\n\n// --- Accessibility (Slider.tsx) ---\n\n/**\n * Clamps and steps a domain value for increment/decrement actions.\n *\n * @param value - Domain value to clamp.\n * @param minimumValue - Lower bound of the domain range.\n * @param maximumValue - Upper bound of the domain range.\n * @param step - Step increment for rounding.\n * @returns Clamped and stepped domain value.\n */\nexport function clampValueToRange(\n  value: number,\n  minimumValue: number,\n  maximumValue: number,\n  step: number,\n): number {\n  const range = maximumValue - minimumValue;\n  if (range === 0) {\n    return minimumValue;\n  }\n\n  const clamped = Math.max(minimumValue, Math.min(maximumValue, value));\n  return Math.round(clamped / step) * step;\n}\n"]}

package/dist/components/Slider/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderMarkColor = exports.DEFAULT_MARKS = exports.Slider = void 0;
+var Slider_1 = require("./Slider.cjs");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+var Slider_constants_1 = require("./Slider.constants.cjs");
+Object.defineProperty(exports, "DEFAULT_MARKS", { enumerable: true, get: function () { return Slider_constants_1.DEFAULT_MARKS; } });
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "SliderMarkColor", { enumerable: true, get: function () { return design_system_shared_1.SliderMarkColor; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/Slider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":";;;AAAA,uCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,2DAAmD;AAA1C,iHAAA,aAAa,OAAA;AACtB,uEAAiE;AAAxD,uHAAA,eAAe,OAAA","sourcesContent":["export { Slider } from './Slider';\nexport { DEFAULT_MARKS } from './Slider.constants';\nexport { SliderMarkColor } from '@metamask/design-system-shared';\nexport type { SliderProps } from './Slider.types';\nexport type { SliderMark } from '@metamask/design-system-shared';\n"]}

package/dist/components/Slider/index.d.cts

@@ -0,0 +1,6 @@
+export { Slider } from "./Slider.cjs";
+export { DEFAULT_MARKS } from "./Slider.constants.cjs";
+export { SliderMarkColor } from "@metamask/design-system-shared";
+export type { SliderProps } from "./Slider.types.cjs";
+export type { SliderMark } from "@metamask/design-system-shared";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Slider/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,OAAO,EAAE,aAAa,EAAE,+BAA2B;AACnD,OAAO,EAAE,eAAe,EAAE,uCAAuC;AACjE,YAAY,EAAE,WAAW,EAAE,2BAAuB;AAClD,YAAY,EAAE,UAAU,EAAE,uCAAuC"}

package/dist/components/Slider/index.d.mts

@@ -0,0 +1,6 @@
+export { Slider } from "./Slider.mjs";
+export { DEFAULT_MARKS } from "./Slider.constants.mjs";
+export { SliderMarkColor } from "@metamask/design-system-shared";
+export type { SliderProps } from "./Slider.types.mjs";
+export type { SliderMark } from "@metamask/design-system-shared";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/Slider/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,OAAO,EAAE,aAAa,EAAE,+BAA2B;AACnD,OAAO,EAAE,eAAe,EAAE,uCAAuC;AACjE,YAAY,EAAE,WAAW,EAAE,2BAAuB;AAClD,YAAY,EAAE,UAAU,EAAE,uCAAuC"}

package/dist/components/Slider/index.mjs

@@ -0,0 +1,4 @@
+export { Slider } from "./Slider.mjs";
+export { DEFAULT_MARKS } from "./Slider.constants.mjs";
+export { SliderMarkColor } from "@metamask/design-system-shared";
+//# sourceMappingURL=index.mjs.map

package/dist/components/Slider/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,OAAO,EAAE,aAAa,EAAE,+BAA2B;AACnD,OAAO,EAAE,eAAe,EAAE,uCAAuC","sourcesContent":["export { Slider } from './Slider';\nexport { DEFAULT_MARKS } from './Slider.constants';\nexport { SliderMarkColor } from '@metamask/design-system-shared';\nexport type { SliderProps } from './Slider.types';\nexport type { SliderMark } from '@metamask/design-system-shared';\n"]}

package/dist/components/Slider/useSliderGesture.cjs

@@ -0,0 +1,252 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSliderGesture = void 0;
+const react_1 = require("react");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const Slider_constants_1 = require("./Slider.constants.cjs");
+const Slider_utilities_1 = require("./Slider.utilities.cjs");
+/**
+ * Owns Slider gesture handling, animated thumb/fill position, and range-label taps.
+ *
+ * Flow during drag (UI thread):
+ *   touch X → clamp to track width → trackPercent → domain value → callbacks
+ *
+ * Flow when `value` prop changes (JS thread → UI thread via useAnimatedReaction):
+ *   domain value → trackPercent → translateX (skipped while dragging)
+ *
+ * `mapValueToTrackPercent` / `mapTrackPercentToValue` must be worklets when provided.
+ *
+ * @param params - Gesture configuration and callbacks.
+ * @returns Gesture state and handlers for Slider.
+ */
+function useSliderGesture(params) {
+    const { value, minimumValue = 0, maximumValue = 100, step = 1, isDisabled = false, onValueChange, onDragEnd, onGrip, onMark, marks, fillColorStops, thumbColorStops, hasThemedColors, mapValueToTrackPercent, mapTrackPercentToValue, } = params;
+    const hapticThresholds = (0, react_1.useMemo)(() => (0, Slider_utilities_1.getMarkHapticThresholds)(marks), [marks]);
+    // --- Animated state ---
+    const sliderWidth = (0, react_native_reanimated_1.useSharedValue)(0);
+    const translateX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const thumbScale = (0, react_native_reanimated_1.useSharedValue)(1);
+    const isDragging = (0, react_native_reanimated_1.useSharedValue)(false);
+    const propValue = (0, react_native_reanimated_1.useSharedValue)(value);
+    const previousTrackPercentRef = (0, react_1.useRef)((0, Slider_utilities_1.getTrackPercentFromValue)(value, minimumValue, maximumValue, mapValueToTrackPercent));
+    const isDraggingRef = (0, react_1.useRef)(false);
+    // --- Position sync (domain value → thumb pixels) ---
+    const syncPositionFromValue = (0, react_1.useCallback)((nextValue, width = sliderWidth.value) => {
+        const trackPercent = (0, Slider_utilities_1.getTrackPercentFromValue)(nextValue, minimumValue, maximumValue, mapValueToTrackPercent);
+        translateX.value = (0, Slider_utilities_1.trackPercentToPosition)(trackPercent, width);
+    }, [
+        mapValueToTrackPercent,
+        maximumValue,
+        minimumValue,
+        sliderWidth,
+        translateX,
+    ]);
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        const { width } = event.nativeEvent.layout;
+        sliderWidth.value = width;
+        syncPositionFromValue(value, width);
+    }, [sliderWidth, syncPositionFromValue, value]);
+    (0, react_1.useEffect)(() => {
+        propValue.value = value;
+        if (!isDraggingRef.current) {
+            previousTrackPercentRef.current = (0, Slider_utilities_1.getTrackPercentFromValue)(value, minimumValue, maximumValue, mapValueToTrackPercent);
+        }
+    }, [mapValueToTrackPercent, maximumValue, minimumValue, propValue, value]);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => propValue.value, (currentValue, previousValue) => {
+        if (isDragging.value) {
+            return;
+        }
+        if (previousValue !== null && currentValue === previousValue) {
+            return;
+        }
+        const trackPercent = (0, Slider_utilities_1.resolveValueToTrackPercent)(currentValue, minimumValue, maximumValue, mapValueToTrackPercent);
+        translateX.value = (0, Slider_utilities_1.trackPercentToPosition)(trackPercent, sliderWidth.value);
+    }, [mapValueToTrackPercent, maximumValue, minimumValue]);
+    // --- JS-thread bridges (stable refs for runOnJS from worklets) ---
+    const emitValueChange = (0, react_1.useCallback)((nextValue) => {
+        onValueChange(nextValue);
+    }, [onValueChange]);
+    const emitDragEnd = (0, react_1.useCallback)((nextValue) => {
+        onDragEnd?.(nextValue);
+    }, [onDragEnd]);
+    const triggerGrip = (0, react_1.useCallback)(() => {
+        if (!isDisabled) {
+            onGrip?.();
+        }
+    }, [isDisabled, onGrip]);
+    const setDragging = (0, react_1.useCallback)((dragging) => {
+        isDraggingRef.current = dragging;
+    }, []);
+    const checkThresholdCrossing = (0, react_1.useCallback)((newTrackPercent) => {
+        const prevTrackPercent = previousTrackPercentRef.current;
+        for (const threshold of hapticThresholds) {
+            if ((prevTrackPercent < threshold && newTrackPercent >= threshold) ||
+                (prevTrackPercent > threshold && newTrackPercent <= threshold)) {
+                onMark?.();
+                break;
+            }
+        }
+        previousTrackPercentRef.current = newTrackPercent;
+    }, [hapticThresholds, onMark]);
+    // --- Animated styles (thumb + fill width follow translateX) ---
+    const activeFillColor = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        if (!hasThemedColors) {
+            return undefined;
+        }
+        return (0, Slider_utilities_1.interpolateMarkColor)((0, Slider_utilities_1.positionToTrackPercent)(translateX.value, sliderWidth.value), fillColorStops);
+    });
+    const activeThumbColor = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        if (!hasThemedColors) {
+            return undefined;
+        }
+        return (0, Slider_utilities_1.interpolateMarkColor)((0, Slider_utilities_1.positionToTrackPercent)(translateX.value, sliderWidth.value), thumbColorStops);
+    });
+    const progressStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        width: translateX.value,
+        ...(hasThemedColors && {
+            backgroundColor: activeFillColor.value,
+        }),
+    }), [fillColorStops, hasThemedColors]);
+    const thumbStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [
+            { translateX: translateX.value },
+            { scale: thumbScale.value },
+        ],
+        ...(hasThemedColors && {
+            backgroundColor: activeThumbColor.value,
+        }),
+    }), [hasThemedColors, thumbColorStops]);
+    // --- Pan + tap gestures ---
+    const gesture = (0, react_1.useMemo)(() => {
+        // Gesture callbacks need explicit 'worklet' directives because this package
+        // ships pre-built dist compiled by ts-bridge. The consumer's Reanimated Babel
+        // plugin does not auto-detect the compiled namespaced Gesture form.
+        const gripEasing = react_native_reanimated_1.Easing.bezier(0.3, 0.8, 0.3, 1);
+        const positionToDomainValue = (position) => {
+            'worklet';
+            const trackPercent = (0, Slider_utilities_1.positionToTrackPercent)(position, sliderWidth.value);
+            const domainValue = (0, Slider_utilities_1.resolveTrackPercentToValue)(trackPercent, minimumValue, maximumValue, step, mapTrackPercentToValue);
+            return { trackPercent, domainValue };
+        };
+        const snapThumbToValue = (domainValue) => {
+            'worklet';
+            const snappedTrackPercent = (0, Slider_utilities_1.resolveValueToTrackPercent)(domainValue, minimumValue, maximumValue, mapValueToTrackPercent);
+            translateX.value = (0, Slider_utilities_1.trackPercentToPosition)(snappedTrackPercent, sliderWidth.value);
+        };
+        // Finalize a gesture: emit callbacks, then re-sync thumb to stepped value.
+        const commitAtPosition = (position, options) => {
+            'worklet';
+            translateX.value = position;
+            const { trackPercent, domainValue } = positionToDomainValue(position);
+            (0, react_native_reanimated_1.runOnJS)(emitValueChange)(domainValue);
+            if (options.checkThreshold) {
+                (0, react_native_reanimated_1.runOnJS)(checkThresholdCrossing)(trackPercent);
+            }
+            (0, react_native_reanimated_1.runOnJS)(emitDragEnd)(domainValue);
+            if (options.triggerGrip) {
+                (0, react_native_reanimated_1.runOnJS)(triggerGrip)();
+            }
+            snapThumbToValue(domainValue);
+        };
+        const panGesture = react_native_gesture_handler_1.Gesture.Pan()
+            .enabled(!isDisabled)
+            .onStart(() => {
+            'worklet';
+            isDragging.value = true;
+            thumbScale.value = (0, react_native_reanimated_1.withTiming)(Slider_constants_1.THUMB_GRIP_SCALE, {
+                duration: Slider_constants_1.THUMB_GRIP_ANIMATION_DURATION,
+                easing: gripEasing,
+            });
+            (0, react_native_reanimated_1.runOnJS)(setDragging)(true);
+            (0, react_native_reanimated_1.runOnJS)(triggerGrip)();
+        })
+            .onUpdate((event) => {
+            'worklet';
+            const position = (0, Slider_utilities_1.clampGesturePosition)(event.x, sliderWidth.value);
+            translateX.value = position;
+            const { trackPercent, domainValue } = positionToDomainValue(position);
+            (0, react_native_reanimated_1.runOnJS)(emitValueChange)(domainValue);
+            (0, react_native_reanimated_1.runOnJS)(checkThresholdCrossing)(trackPercent);
+        })
+            .onEnd(() => {
+            'worklet';
+            // Thresholds already checked during onUpdate; grip fires again on release.
+            commitAtPosition(translateX.value, {
+                checkThreshold: false,
+                triggerGrip: true,
+            });
+        })
+            .onFinalize(() => {
+            'worklet';
+            isDragging.value = false;
+            thumbScale.value = (0, react_native_reanimated_1.withTiming)(1, {
+                duration: Slider_constants_1.THUMB_GRIP_ANIMATION_DURATION,
+                easing: gripEasing,
+            });
+            (0, react_native_reanimated_1.runOnJS)(setDragging)(false);
+        });
+        const tapGesture = react_native_gesture_handler_1.Gesture.Tap()
+            .enabled(!isDisabled)
+            .onEnd((event) => {
+            'worklet';
+            const position = (0, Slider_utilities_1.clampGesturePosition)(event.x, sliderWidth.value);
+            commitAtPosition(position, {
+                checkThreshold: true,
+                triggerGrip: false,
+            });
+        });
+        return react_native_gesture_handler_1.Gesture.Simultaneous(tapGesture, panGesture);
+    }, [
+        checkThresholdCrossing,
+        emitDragEnd,
+        emitValueChange,
+        isDisabled,
+        isDragging,
+        mapTrackPercentToValue,
+        mapValueToTrackPercent,
+        maximumValue,
+        minimumValue,
+        setDragging,
+        sliderWidth,
+        step,
+        thumbScale,
+        translateX,
+        triggerGrip,
+    ]);
+    // --- Range label tap (JS thread) ---
+    const handlePressStep = (0, react_1.useCallback)((rangeStep) => {
+        if (isDisabled) {
+            return;
+        }
+        const mark = marks.find((entry) => entry.step === rangeStep);
+        if (!mark) {
+            return;
+        }
+        const newValue = (0, Slider_utilities_1.getMarkValue)(mark, minimumValue, maximumValue);
+        onValueChange(newValue);
+        const trackPercent = (0, Slider_utilities_1.getTrackPercentFromValue)(newValue, minimumValue, maximumValue, mapValueToTrackPercent);
+        checkThresholdCrossing(trackPercent);
+        onDragEnd?.(newValue);
+        syncPositionFromValue(newValue);
+    }, [
+        checkThresholdCrossing,
+        isDisabled,
+        mapValueToTrackPercent,
+        maximumValue,
+        minimumValue,
+        onDragEnd,
+        onValueChange,
+        syncPositionFromValue,
+        marks,
+    ]);
+    return {
+        handleLayout,
+        progressStyle,
+        thumbStyle,
+        gesture,
+        handlePressStep,
+    };
+}
+exports.useSliderGesture = useSliderGesture;
+//# sourceMappingURL=useSliderGesture.cjs.map

package/dist/components/Slider/useSliderGesture.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderGesture.cjs","sourceRoot":"","sources":["../../../src/components/Slider/useSliderGesture.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Gesture } from 'react-native-gesture-handler';\nimport {\n  Easing,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport {\n  THUMB_GRIP_ANIMATION_DURATION,\n  THUMB_GRIP_SCALE,\n} from './Slider.constants';\nimport type {\n  UseSliderGestureParams,\n  UseSliderGestureResult,\n} from './Slider.types';\nimport {\n  clampGesturePosition,\n  getMarkHapticThresholds,\n  getMarkValue,\n  getTrackPercentFromValue,\n  interpolateMarkColor,\n  positionToTrackPercent,\n  resolveTrackPercentToValue,\n  resolveValueToTrackPercent,\n  trackPercentToPosition,\n} from './Slider.utilities';\n\n/**\n * Owns Slider gesture handling, animated thumb/fill position, and range-label taps.\n *\n * Flow during drag (UI thread):\n *   touch X → clamp to track width → trackPercent → domain value → callbacks\n *\n * Flow when `value` prop changes (JS thread → UI thread via useAnimatedReaction):\n *   domain value → trackPercent → translateX (skipped while dragging)\n *\n * `mapValueToTrackPercent` / `mapTrackPercentToValue` must be worklets when provided.\n *\n * @param params - Gesture configuration and callbacks.\n * @returns Gesture state and handlers for Slider.\n */\nexport function useSliderGesture(\n  params: UseSliderGestureParams,\n): UseSliderGestureResult {\n  const {\n    value,\n    minimumValue = 0,\n    maximumValue = 100,\n    step = 1,\n    isDisabled = false,\n    onValueChange,\n    onDragEnd,\n    onGrip,\n    onMark,\n    marks,\n    fillColorStops,\n    thumbColorStops,\n    hasThemedColors,\n    mapValueToTrackPercent,\n    mapTrackPercentToValue,\n  } = params;\n\n  const hapticThresholds = useMemo(\n    () => getMarkHapticThresholds(marks),\n    [marks],\n  );\n\n  // --- Animated state ---\n\n  const sliderWidth = useSharedValue(0);\n  const translateX = useSharedValue(0);\n  const thumbScale = useSharedValue(1);\n  const isDragging = useSharedValue(false);\n  const propValue = useSharedValue(value);\n  const previousTrackPercentRef = useRef(\n    getTrackPercentFromValue(\n      value,\n      minimumValue,\n      maximumValue,\n      mapValueToTrackPercent,\n    ),\n  );\n  const isDraggingRef = useRef(false);\n\n  // --- Position sync (domain value → thumb pixels) ---\n\n  const syncPositionFromValue = useCallback(\n    (nextValue: number, width = sliderWidth.value) => {\n      const trackPercent = getTrackPercentFromValue(\n        nextValue,\n        minimumValue,\n        maximumValue,\n        mapValueToTrackPercent,\n      );\n      translateX.value = trackPercentToPosition(trackPercent, width);\n    },\n    [\n      mapValueToTrackPercent,\n      maximumValue,\n      minimumValue,\n      sliderWidth,\n      translateX,\n    ],\n  );\n\n  const handleLayout = useCallback(\n    (event: { nativeEvent: { layout: { width: number } } }) => {\n      const { width } = event.nativeEvent.layout;\n      sliderWidth.value = width;\n      syncPositionFromValue(value, width);\n    },\n    [sliderWidth, syncPositionFromValue, value],\n  );\n\n  useEffect(() => {\n    propValue.value = value;\n    if (!isDraggingRef.current) {\n      previousTrackPercentRef.current = getTrackPercentFromValue(\n        value,\n        minimumValue,\n        maximumValue,\n        mapValueToTrackPercent,\n      );\n    }\n  }, [mapValueToTrackPercent, maximumValue, minimumValue, propValue, value]);\n\n  useAnimatedReaction(\n    () => propValue.value,\n    (currentValue, previousValue) => {\n      if (isDragging.value) {\n        return;\n      }\n\n      if (previousValue !== null && currentValue === previousValue) {\n        return;\n      }\n\n      const trackPercent = resolveValueToTrackPercent(\n        currentValue,\n        minimumValue,\n        maximumValue,\n        mapValueToTrackPercent,\n      );\n      translateX.value = trackPercentToPosition(\n        trackPercent,\n        sliderWidth.value,\n      );\n    },\n    [mapValueToTrackPercent, maximumValue, minimumValue],\n  );\n\n  // --- JS-thread bridges (stable refs for runOnJS from worklets) ---\n\n  const emitValueChange = useCallback(\n    (nextValue: number) => {\n      onValueChange(nextValue);\n    },\n    [onValueChange],\n  );\n\n  const emitDragEnd = useCallback(\n    (nextValue: number) => {\n      onDragEnd?.(nextValue);\n    },\n    [onDragEnd],\n  );\n\n  const triggerGrip = useCallback(() => {\n    if (!isDisabled) {\n      onGrip?.();\n    }\n  }, [isDisabled, onGrip]);\n\n  const setDragging = useCallback((dragging: boolean) => {\n    isDraggingRef.current = dragging;\n  }, []);\n\n  const checkThresholdCrossing = useCallback(\n    (newTrackPercent: number) => {\n      const prevTrackPercent = previousTrackPercentRef.current;\n\n      for (const threshold of hapticThresholds) {\n        if (\n          (prevTrackPercent < threshold && newTrackPercent >= threshold) ||\n          (prevTrackPercent > threshold && newTrackPercent <= threshold)\n        ) {\n          onMark?.();\n          break;\n        }\n      }\n\n      previousTrackPercentRef.current = newTrackPercent;\n    },\n    [hapticThresholds, onMark],\n  );\n\n  // --- Animated styles (thumb + fill width follow translateX) ---\n\n  const activeFillColor = useDerivedValue(() => {\n    if (!hasThemedColors) {\n      return undefined;\n    }\n\n    return interpolateMarkColor(\n      positionToTrackPercent(translateX.value, sliderWidth.value),\n      fillColorStops,\n    );\n  });\n\n  const activeThumbColor = useDerivedValue(() => {\n    if (!hasThemedColors) {\n      return undefined;\n    }\n\n    return interpolateMarkColor(\n      positionToTrackPercent(translateX.value, sliderWidth.value),\n      thumbColorStops,\n    );\n  });\n\n  const progressStyle = useAnimatedStyle(\n    () => ({\n      width: translateX.value,\n      ...(hasThemedColors && {\n        backgroundColor: activeFillColor.value,\n      }),\n    }),\n    [fillColorStops, hasThemedColors],\n  );\n\n  const thumbStyle = useAnimatedStyle(\n    () => ({\n      transform: [\n        { translateX: translateX.value },\n        { scale: thumbScale.value },\n      ],\n      ...(hasThemedColors && {\n        backgroundColor: activeThumbColor.value,\n      }),\n    }),\n    [hasThemedColors, thumbColorStops],\n  );\n\n  // --- Pan + tap gestures ---\n\n  const gesture = useMemo(() => {\n    // Gesture callbacks need explicit 'worklet' directives because this package\n    // ships pre-built dist compiled by ts-bridge. The consumer's Reanimated Babel\n    // plugin does not auto-detect the compiled namespaced Gesture form.\n\n    const gripEasing = Easing.bezier(0.3, 0.8, 0.3, 1);\n\n    const positionToDomainValue = (position: number) => {\n      'worklet';\n\n      const trackPercent = positionToTrackPercent(position, sliderWidth.value);\n      const domainValue = resolveTrackPercentToValue(\n        trackPercent,\n        minimumValue,\n        maximumValue,\n        step,\n        mapTrackPercentToValue,\n      );\n\n      return { trackPercent, domainValue };\n    };\n\n    const snapThumbToValue = (domainValue: number) => {\n      'worklet';\n\n      const snappedTrackPercent = resolveValueToTrackPercent(\n        domainValue,\n        minimumValue,\n        maximumValue,\n        mapValueToTrackPercent,\n      );\n      translateX.value = trackPercentToPosition(\n        snappedTrackPercent,\n        sliderWidth.value,\n      );\n    };\n\n    // Finalize a gesture: emit callbacks, then re-sync thumb to stepped value.\n    const commitAtPosition = (\n      position: number,\n      options: { checkThreshold: boolean; triggerGrip: boolean },\n    ) => {\n      'worklet';\n\n      translateX.value = position;\n      const { trackPercent, domainValue } = positionToDomainValue(position);\n\n      runOnJS(emitValueChange)(domainValue);\n      if (options.checkThreshold) {\n        runOnJS(checkThresholdCrossing)(trackPercent);\n      }\n      runOnJS(emitDragEnd)(domainValue);\n      if (options.triggerGrip) {\n        runOnJS(triggerGrip)();\n      }\n      snapThumbToValue(domainValue);\n    };\n\n    const panGesture = Gesture.Pan()\n      .enabled(!isDisabled)\n      .onStart(() => {\n        'worklet';\n\n        isDragging.value = true;\n        thumbScale.value = withTiming(THUMB_GRIP_SCALE, {\n          duration: THUMB_GRIP_ANIMATION_DURATION,\n          easing: gripEasing,\n        });\n        runOnJS(setDragging)(true);\n        runOnJS(triggerGrip)();\n      })\n      .onUpdate((event) => {\n        'worklet';\n\n        const position = clampGesturePosition(event.x, sliderWidth.value);\n        translateX.value = position;\n        const { trackPercent, domainValue } = positionToDomainValue(position);\n\n        runOnJS(emitValueChange)(domainValue);\n        runOnJS(checkThresholdCrossing)(trackPercent);\n      })\n      .onEnd(() => {\n        'worklet';\n\n        // Thresholds already checked during onUpdate; grip fires again on release.\n        commitAtPosition(translateX.value, {\n          checkThreshold: false,\n          triggerGrip: true,\n        });\n      })\n      .onFinalize(() => {\n        'worklet';\n\n        isDragging.value = false;\n        thumbScale.value = withTiming(1, {\n          duration: THUMB_GRIP_ANIMATION_DURATION,\n          easing: gripEasing,\n        });\n        runOnJS(setDragging)(false);\n      });\n\n    const tapGesture = Gesture.Tap()\n      .enabled(!isDisabled)\n      .onEnd((event) => {\n        'worklet';\n\n        const position = clampGesturePosition(event.x, sliderWidth.value);\n        commitAtPosition(position, {\n          checkThreshold: true,\n          triggerGrip: false,\n        });\n      });\n\n    return Gesture.Simultaneous(tapGesture, panGesture);\n  }, [\n    checkThresholdCrossing,\n    emitDragEnd,\n    emitValueChange,\n    isDisabled,\n    isDragging,\n    mapTrackPercentToValue,\n    mapValueToTrackPercent,\n    maximumValue,\n    minimumValue,\n    setDragging,\n    sliderWidth,\n    step,\n    thumbScale,\n    translateX,\n    triggerGrip,\n  ]);\n\n  // --- Range label tap (JS thread) ---\n\n  const handlePressStep = useCallback(\n    (rangeStep: number) => {\n      if (isDisabled) {\n        return;\n      }\n\n      const mark = marks.find((entry) => entry.step === rangeStep);\n      if (!mark) {\n        return;\n      }\n\n      const newValue = getMarkValue(mark, minimumValue, maximumValue);\n      onValueChange(newValue);\n      const trackPercent = getTrackPercentFromValue(\n        newValue,\n        minimumValue,\n        maximumValue,\n        mapValueToTrackPercent,\n      );\n      checkThresholdCrossing(trackPercent);\n      onDragEnd?.(newValue);\n      syncPositionFromValue(newValue);\n    },\n    [\n      checkThresholdCrossing,\n      isDisabled,\n      mapValueToTrackPercent,\n      maximumValue,\n      minimumValue,\n      onDragEnd,\n      onValueChange,\n      syncPositionFromValue,\n      marks,\n    ],\n  );\n\n  return {\n    handleLayout,\n    progressStyle,\n    thumbStyle,\n    gesture,\n    handlePressStep,\n  };\n}\n"]}