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

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

@@ -4,12 +4,17 @@
  * 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 `tickThresholds`; may be non-linear via `map*` hooks).
+ *   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 type { SliderMark, SliderMarkColor } from "@metamask/design-system-shared";
+export type SliderColorStop = {
+    step: number;
+    color: string;
+};
 export declare function clampTrackPercent(trackPercent: number): number;
 /**
  * Linear default: domain value → 0–100 track position.
@@ -73,25 +78,69 @@ export declare function clampGesturePosition(position: number, width: number): n
  */
 export declare function getTrackPercentFromValue(value: number, minimumValue: number, maximumValue: number, mapValueToTrackPercent?: (value: number) => number): number;
 /**
- * Default `stepToValue`: linear track-percent → domain value.
+ * Default linear track-percent → domain value for a mark.
  *
- * @param step - Track-percent step from `rangeLabelSteps`.
+ * @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 declare function defaultStepToValue(step: number, minimumValue: number, maximumValue: number): number;
 /**
- * Default `formatStepLabel`: display track percent as a percent string.
+ * Domain value for a mark: explicit `value` or linear default from step.
  *
- * @param step - Track-percent step from `rangeLabelSteps`.
- * @returns Formatted label string.
+ * @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 declare function getMarkValue(mark: SliderMark, minimumValue: number, maximumValue: number): number;
+/**
+ * Track-percent thresholds that trigger onMark while dragging.
+ *
+ * @param marks - Mark entries.
+ * @returns Haptic threshold positions.
+ */
+export declare function getMarkHapticThresholds(marks: readonly SliderMark[]): number[];
+/**
+ * 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 declare function resolveMarkColor(color: SliderMarkColor | string, palette: Record<string, string>, fallback: string): string;
+/**
+ * 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 declare function buildColorStops(marks: readonly SliderMark[], palette: Record<string, string>, fallbackToken: string): SliderColorStop[];
+/**
+ * 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 declare function interpolateMarkColor(trackPercent: number, stops: readonly SliderColorStop[]): string;
+/**
+ * Whether any mark defines a theme color.
+ *
+ * @param marks - Mark entries.
+ * @returns True when at least one mark has a color.
  */
-export declare function defaultFormatStepLabel(step: number): string;
+export declare function hasThemedMarkColors(marks: readonly SliderMark[]): boolean;
 /**
  * Marker `left` percent for range dots and labels; edge steps inset to stay on track.
  *
- * @param step - Track-percent step from `rangeLabelSteps`.
+ * @param step - Track-percent step from a mark entry.
  * @returns CSS `left` percentage string.
  */
 export declare function getDotLeftPercent(step: number): string;

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.utilities.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.utilities.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AASH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAI9D;AAID;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,GACnB,MAAM,CAUR;AAED;;;;;;;;GAQG;AACH,wBAAgB,6BAA6B,CAC3C,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,MAAM,GACX,MAAM,CAYR;AAED;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,MAAM,EACZ,sBAAsB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,GACxD,MAAM,CAaR;AAED;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GACjD,MAAM,CAQR;AAID,wBAAgB,sBAAsB,CACpC,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CAQR;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,GACZ,MAAM,CAQR;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAI5E;AAID;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GACjD,MAAM,CAMR;AAID;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,GACnB,MAAM,CAER;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3D;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAStD;AAID;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,MAAM,GACX,MAAM,CAQR"}
+{"version":3,"file":"Slider.utilities.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.utilities.ts"],"names":[],"mappings":"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"}

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

@@ -4,12 +4,17 @@
  * 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 `tickThresholds`; may be non-linear via `map*` hooks).
+ *   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 type { SliderMark, SliderMarkColor } from "@metamask/design-system-shared";
+export type SliderColorStop = {
+    step: number;
+    color: string;
+};
 export declare function clampTrackPercent(trackPercent: number): number;
 /**
  * Linear default: domain value → 0–100 track position.
@@ -73,25 +78,69 @@ export declare function clampGesturePosition(position: number, width: number): n
  */
 export declare function getTrackPercentFromValue(value: number, minimumValue: number, maximumValue: number, mapValueToTrackPercent?: (value: number) => number): number;
 /**
- * Default `stepToValue`: linear track-percent → domain value.
+ * Default linear track-percent → domain value for a mark.
  *
- * @param step - Track-percent step from `rangeLabelSteps`.
+ * @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 declare function defaultStepToValue(step: number, minimumValue: number, maximumValue: number): number;
 /**
- * Default `formatStepLabel`: display track percent as a percent string.
+ * Domain value for a mark: explicit `value` or linear default from step.
  *
- * @param step - Track-percent step from `rangeLabelSteps`.
- * @returns Formatted label string.
+ * @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 declare function getMarkValue(mark: SliderMark, minimumValue: number, maximumValue: number): number;
+/**
+ * Track-percent thresholds that trigger onMark while dragging.
+ *
+ * @param marks - Mark entries.
+ * @returns Haptic threshold positions.
+ */
+export declare function getMarkHapticThresholds(marks: readonly SliderMark[]): number[];
+/**
+ * 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 declare function resolveMarkColor(color: SliderMarkColor | string, palette: Record<string, string>, fallback: string): string;
+/**
+ * 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 declare function buildColorStops(marks: readonly SliderMark[], palette: Record<string, string>, fallbackToken: string): SliderColorStop[];
+/**
+ * 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 declare function interpolateMarkColor(trackPercent: number, stops: readonly SliderColorStop[]): string;
+/**
+ * Whether any mark defines a theme color.
+ *
+ * @param marks - Mark entries.
+ * @returns True when at least one mark has a color.
  */
-export declare function defaultFormatStepLabel(step: number): string;
+export declare function hasThemedMarkColors(marks: readonly SliderMark[]): boolean;
 /**
  * Marker `left` percent for range dots and labels; edge steps inset to stay on track.
  *
- * @param step - Track-percent step from `rangeLabelSteps`.
+ * @param step - Track-percent step from a mark entry.
  * @returns CSS `left` percentage string.
  */
 export declare function getDotLeftPercent(step: number): string;

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.utilities.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.utilities.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AASH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAI9D;AAID;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,GACnB,MAAM,CAUR;AAED;;;;;;;;GAQG;AACH,wBAAgB,6BAA6B,CAC3C,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,MAAM,GACX,MAAM,CAYR;AAED;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,MAAM,EACZ,sBAAsB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,GACxD,MAAM,CAaR;AAED;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GACjD,MAAM,CAQR;AAID,wBAAgB,sBAAsB,CACpC,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CAQR;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,GACZ,MAAM,CAQR;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAI5E;AAID;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GACjD,MAAM,CAMR;AAID;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,GACnB,MAAM,CAER;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3D;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAStD;AAID;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,MAAM,GACX,MAAM,CAQR"}
+{"version":3,"file":"Slider.utilities.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.utilities.ts"],"names":[],"mappings":"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"}

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

@@ -4,12 +4,13 @@
  * 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 `tickThresholds`; may be non-linear via `map*` hooks).
+ *   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) {
@@ -131,9 +132,9 @@ export function getTrackPercentFromValue(value, minimumValue, maximumValue, mapV
 }
 // --- Range label / dot defaults (Slider.tsx) ---
 /**
- * Default `stepToValue`: linear track-percent → domain value.
+ * Default linear track-percent → domain value for a mark.
  *
- * @param step - Track-percent step from `rangeLabelSteps`.
+ * @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.
@@ -142,18 +143,97 @@ export function defaultStepToValue(step, minimumValue, maximumValue) {
     return (step / 100) * (maximumValue - minimumValue) + minimumValue;
 }
 /**
- * Default `formatStepLabel`: display track percent as a percent string.
+ * Domain value for a mark: explicit `value` or linear default from step.
  *
- * @param step - Track-percent step from `rangeLabelSteps`.
- * @returns Formatted label string.
+ * @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 defaultFormatStepLabel(step) {
-    return `${step}%`;
+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 `rangeLabelSteps`.
+ * @param step - Track-percent step from a mark entry.
  * @returns CSS `left` percentage string.
  */
 export function getDotLeftPercent(step) {

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

@@ -1 +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 `tickThresholds`; 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 {\n  DOT_EDGE_INSET_PERCENT,\n  DOT_EDGE_MAX_PERCENT,\n} from './Slider.constants';\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 `stepToValue`: linear track-percent → domain value.\n *\n * @param step - Track-percent step from `rangeLabelSteps`.\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 * Default `formatStepLabel`: display track percent as a percent string.\n *\n * @param step - Track-percent step from `rangeLabelSteps`.\n * @returns Formatted label string.\n */\nexport function defaultFormatStepLabel(step: number): string {\n  return `${step}%`;\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 `rangeLabelSteps`.\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"]}
+{"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

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_TICK_THRESHOLDS = exports.DEFAULT_RANGE_LABEL_STEPS = exports.Slider = void 0;
+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_RANGE_LABEL_STEPS", { enumerable: true, get: function () { return Slider_constants_1.DEFAULT_RANGE_LABEL_STEPS; } });
-Object.defineProperty(exports, "DEFAULT_TICK_THRESHOLDS", { enumerable: true, get: function () { return Slider_constants_1.DEFAULT_TICK_THRESHOLDS; } });
+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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":";;;AAAA,uCAAkC;AAAzB,gGAAA,MAAM,OAAA;AAEf,2DAG4B;AAF1B,6HAAA,yBAAyB,OAAA;AACzB,2HAAA,uBAAuB,OAAA","sourcesContent":["export { Slider } from './Slider';\nexport type { SliderProps } from './Slider.types';\nexport {\n  DEFAULT_RANGE_LABEL_STEPS,\n  DEFAULT_TICK_THRESHOLDS,\n} from './Slider.constants';\n"]}
+{"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

@@ -1,4 +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 { DEFAULT_RANGE_LABEL_STEPS, DEFAULT_TICK_THRESHOLDS, } from "./Slider.constants.cjs";
+export type { SliderMark } from "@metamask/design-system-shared";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAuB;AAClD,OAAO,EACL,yBAAyB,EACzB,uBAAuB,GACxB,+BAA2B"}
+{"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

@@ -1,4 +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 { DEFAULT_RANGE_LABEL_STEPS, DEFAULT_TICK_THRESHOLDS, } from "./Slider.constants.mjs";
+export type { SliderMark } from "@metamask/design-system-shared";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAuB;AAClD,OAAO,EACL,yBAAyB,EACzB,uBAAuB,GACxB,+BAA2B"}
+{"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

@@ -1,3 +1,4 @@
 export { Slider } from "./Slider.mjs";
-export { DEFAULT_RANGE_LABEL_STEPS, DEFAULT_TICK_THRESHOLDS } from "./Slider.constants.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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAElC,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACxB,+BAA2B","sourcesContent":["export { Slider } from './Slider';\nexport type { SliderProps } from './Slider.types';\nexport {\n  DEFAULT_RANGE_LABEL_STEPS,\n  DEFAULT_TICK_THRESHOLDS,\n} from './Slider.constants';\n"]}
+{"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

@@ -12,8 +12,8 @@ const Slider_utilities_1 = require("./Slider.utilities.cjs");
  * Flow during drag (UI thread):
  *   touch X → clamp to track width → trackPercent → domain value → callbacks
  *
- * Flow when `value` prop changes (JS thread):
- *   domain value → trackPercent → translateX (thumb + progress fill)
+ * 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.
  *
@@ -21,13 +21,14 @@ const Slider_utilities_1 = require("./Slider.utilities.cjs");
  * @returns Gesture state and handlers for Slider.
  */
 function useSliderGesture(params) {
-    const { value, minimumValue = 0, maximumValue = 100, step = 1, isDisabled = false, onValueChange, onDragEnd, onGrip, onTick, tickThresholds = Slider_constants_1.DEFAULT_TICK_THRESHOLDS, mapValueToTrackPercent, mapTrackPercentToValue, stepToValue: stepToValueProp, } = params;
-    const stepToValue = (0, react_1.useMemo)(() => stepToValueProp ??
-        ((rangeStep) => (0, Slider_utilities_1.defaultStepToValue)(rangeStep, minimumValue, maximumValue)), [maximumValue, minimumValue, stepToValueProp]);
+    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) ---
@@ -47,17 +48,21 @@ function useSliderGesture(params) {
         syncPositionFromValue(value, width);
     }, [sliderWidth, syncPositionFromValue, value]);
     (0, react_1.useEffect)(() => {
-        syncPositionFromValue(value);
+        propValue.value = value;
         if (!isDraggingRef.current) {
             previousTrackPercentRef.current = (0, Slider_utilities_1.getTrackPercentFromValue)(value, minimumValue, maximumValue, mapValueToTrackPercent);
         }
-    }, [
-        mapValueToTrackPercent,
-        maximumValue,
-        minimumValue,
-        syncPositionFromValue,
-        value,
-    ]);
+    }, [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);
@@ -75,22 +80,43 @@ function useSliderGesture(params) {
     }, []);
     const checkThresholdCrossing = (0, react_1.useCallback)((newTrackPercent) => {
         const prevTrackPercent = previousTrackPercentRef.current;
-        for (const threshold of tickThresholds) {
+        for (const threshold of hapticThresholds) {
             if ((prevTrackPercent < threshold && newTrackPercent >= threshold) ||
                 (prevTrackPercent > threshold && newTrackPercent <= threshold)) {
-                onTick?.();
+                onMark?.();
                 break;
             }
         }
         previousTrackPercentRef.current = newTrackPercent;
-    }, [onTick, tickThresholds]);
+    }, [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 }],
-    }));
+        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
@@ -127,6 +153,7 @@ function useSliderGesture(params) {
             .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,
@@ -152,6 +179,7 @@ function useSliderGesture(params) {
         })
             .onFinalize(() => {
             'worklet';
+            isDragging.value = false;
             thumbScale.value = (0, react_native_reanimated_1.withTiming)(1, {
                 duration: Slider_constants_1.THUMB_GRIP_ANIMATION_DURATION,
                 easing: gripEasing,
@@ -174,6 +202,7 @@ function useSliderGesture(params) {
         emitDragEnd,
         emitValueChange,
         isDisabled,
+        isDragging,
         mapTrackPercentToValue,
         mapValueToTrackPercent,
         maximumValue,
@@ -185,12 +214,16 @@ function useSliderGesture(params) {
         translateX,
         triggerGrip,
     ]);
-    // --- Range label tap (JS thread; uses stepToValue from Slider.tsx) ---
+    // --- Range label tap (JS thread) ---
     const handlePressStep = (0, react_1.useCallback)((rangeStep) => {
         if (isDisabled) {
             return;
         }
-        const newValue = stepToValue(rangeStep);
+        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);
@@ -204,8 +237,8 @@ function useSliderGesture(params) {
         minimumValue,
         onDragEnd,
         onValueChange,
-        stepToValue,
         syncPositionFromValue,
+        marks,
     ]);
     return {
         handleLayout,