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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { SliderProps } from "./Slider.types.cjs";
+export declare const Slider: {
+    ({ value, onValueChange, onDragEnd, minimumValue, maximumValue, step, isDisabled, testID, marks, showRangeLabels, showRangeDots, onGrip, onMark, mapValueToTrackPercent, mapTrackPercentToValue, trackInset, twClassName, style, ...props }: SliderProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Slider.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA+B,cAAc;AAmBpD,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;AAUlD,eAAO,MAAM,MAAM;iPAoBhB,WAAW;;CAwMb,CAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { SliderProps } from "./Slider.types.mjs";
+export declare const Slider: {
+    ({ value, onValueChange, onDragEnd, minimumValue, maximumValue, step, isDisabled, testID, marks, showRangeLabels, showRangeDots, onGrip, onMark, mapValueToTrackPercent, mapTrackPercentToValue, trackInset, twClassName, style, ...props }: SliderProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Slider.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA+B,cAAc;AAmBpD,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;AAUlD,eAAO,MAAM,MAAM;iPAoBhB,WAAW;;CAwMb,CAAC"}

package/dist/components/Slider/Slider.mjs

@@ -0,0 +1,129 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { FontWeight, TextColor, TextVariant, SliderMarkColor } from "@metamask/design-system-shared";
+import { getThemeColors, usePureBlack, useTailwind, useTheme } from "@metamask/design-system-twrnc-preset";
+import $React, { useCallback, useMemo } from "react";
+const React = $importDefault($React);
+import { Pressable } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated from "react-native-reanimated";
+import { Box } from "../Box/index.mjs";
+import { Text } from "../Text/index.mjs";
+import { DEFAULT_MARKS, RANGE_LABEL_TOP, SLIDER_BOTTOM_PADDING, SLIDER_TRACK_INSET, THUMB_BOTTOM_OFFSET, THUMB_LEFT_OFFSET, THUMB_SIZE, THUMB_TOP_OFFSET } from "./Slider.constants.mjs";
+import { buildColorStops, clampValueToRange, getDotLeftPercent, getTrackPercentFromValue, hasThemedMarkColors } from "./Slider.utilities.mjs";
+import { useSliderGesture } from "./useSliderGesture.mjs";
+export const Slider = ({ value, onValueChange, onDragEnd, minimumValue = 0, maximumValue = 100, step = 1, isDisabled = false, testID, marks = DEFAULT_MARKS, showRangeLabels = false, showRangeDots = false, onGrip, onMark, mapValueToTrackPercent, mapTrackPercentToValue, trackInset = SLIDER_TRACK_INSET, twClassName, style, ...props }) => {
+    const tw = useTailwind();
+    const theme = useTheme();
+    const isPureBlack = usePureBlack();
+    const palette = useMemo(() => getThemeColors(theme, isPureBlack), [isPureBlack, theme]);
+    const themedColors = useMemo(() => {
+        const hasThemedColors = hasThemedMarkColors(marks);
+        return {
+            hasThemedColors,
+            fillColorStops: buildColorStops(marks, palette, SliderMarkColor.IconAlternative),
+            thumbColorStops: buildColorStops(marks, palette, SliderMarkColor.IconDefault),
+        };
+    }, [palette, marks]);
+    const labeledMarks = useMemo(() => marks.filter((mark) => mark.label !== undefined), [marks]);
+    const { handleLayout, progressStyle, thumbStyle, gesture, handlePressStep } = useSliderGesture({
+        value,
+        minimumValue,
+        maximumValue,
+        step,
+        isDisabled,
+        onValueChange,
+        onDragEnd,
+        onGrip,
+        onMark,
+        marks,
+        fillColorStops: themedColors.fillColorStops,
+        thumbColorStops: themedColors.thumbColorStops,
+        hasThemedColors: themedColors.hasThemedColors,
+        mapValueToTrackPercent,
+        mapTrackPercentToValue,
+    });
+    const getAccessibilityText = useCallback(() => {
+        const trackPercent = Math.round(getTrackPercentFromValue(value, minimumValue, maximumValue, mapValueToTrackPercent));
+        return `${trackPercent}%`;
+    }, [mapValueToTrackPercent, maximumValue, minimumValue, value]);
+    const handleAccessibilityAction = useCallback((event) => {
+        if (isDisabled) {
+            return;
+        }
+        const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
+        const nextValue = clampValueToRange(value + delta, minimumValue, maximumValue, step);
+        if (nextValue !== value) {
+            onValueChange(nextValue);
+            onDragEnd?.(nextValue);
+        }
+    }, [
+        isDisabled,
+        maximumValue,
+        minimumValue,
+        onDragEnd,
+        onValueChange,
+        step,
+        value,
+    ]);
+    return (<Box {...props} testID={testID} accessibilityRole="adjustable" accessibilityState={{ disabled: isDisabled }} accessibilityValue={{
+            min: minimumValue,
+            max: maximumValue,
+            now: value,
+            text: getAccessibilityText(),
+        }} accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]} onAccessibilityAction={handleAccessibilityAction} onLayout={handleLayout} style={[
+            tw.style('relative self-stretch', isDisabled ? 'py-2 opacity-40' : 'py-2'),
+            {
+                marginHorizontal: trackInset,
+                ...(showRangeLabels && { paddingBottom: SLIDER_BOTTOM_PADDING }),
+            },
+            style,
+        ]} twClassName={twClassName}>
+      <GestureDetector gesture={gesture}>
+        <Animated.View style={[tw.style('relative'), { height: THUMB_BOTTOM_OFFSET }]}>
+          <Animated.View style={tw.style('absolute left-0 top-0 h-2 w-full rounded-full bg-border-muted')}/>
+          <Animated.View style={[
+            tw.style('absolute left-0 top-0 h-2 rounded-full', !themedColors.hasThemedColors && 'bg-icon-alternative'),
+            progressStyle,
+        ]}/>
+          {showRangeDots &&
+            marks.map((mark) => (<Box key={`dot-${mark.step}`} pointerEvents="none" twClassName="absolute top-0.5 h-1 w-1 rounded-full bg-text-muted" style={{
+                    left: getDotLeftPercent(mark.step),
+                    transform: [{ translateX: -2 }],
+                    zIndex: -2,
+                }}/>))}
+          <Animated.View style={[
+            tw.style('absolute rounded-full', !themedColors.hasThemedColors && 'bg-icon-default'),
+            {
+                width: THUMB_SIZE,
+                height: THUMB_SIZE,
+                top: THUMB_TOP_OFFSET,
+                left: THUMB_LEFT_OFFSET,
+                elevation: 4,
+            },
+            thumbStyle,
+        ]} hitSlop={{ top: 25, bottom: 25, left: 25, right: 25 }}/>
+        </Animated.View>
+      </GestureDetector>
+
+      {showRangeLabels &&
+            labeledMarks.map((mark) => (<Pressable key={`label-${mark.step}`} style={[
+                    tw.style('absolute items-center'),
+                    {
+                        top: RANGE_LABEL_TOP,
+                        left: getDotLeftPercent(mark.step),
+                        transform: [{ translateX: '-50%' }],
+                    },
+                ]} onPress={() => handlePressStep(mark.step)} disabled={isDisabled} accessibilityRole="button">
+            <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium} color={TextColor.TextAlternative}>
+              {mark.label}
+            </Text>
+          </Pressable>))}
+    </Box>);
+};
+Slider.displayName = 'Slider';
+//# sourceMappingURL=Slider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.mjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FontWeight,\n  TextColor,\n  TextVariant,\n  SliderMarkColor,\n} from '@metamask/design-system-shared';\nimport {\n  getThemeColors,\n  usePureBlack,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback, useMemo } from 'react';\nimport { AccessibilityActionEvent, Pressable } from 'react-native';\nimport type { ViewStyle } from 'react-native';\nimport { GestureDetector } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\n\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\nimport {\n  DEFAULT_MARKS,\n  RANGE_LABEL_TOP,\n  SLIDER_BOTTOM_PADDING,\n  SLIDER_TRACK_INSET,\n  THUMB_BOTTOM_OFFSET,\n  THUMB_LEFT_OFFSET,\n  THUMB_SIZE,\n  THUMB_TOP_OFFSET,\n} from './Slider.constants';\nimport type { SliderProps } from './Slider.types';\nimport {\n  buildColorStops,\n  clampValueToRange,\n  getDotLeftPercent,\n  getTrackPercentFromValue,\n  hasThemedMarkColors,\n} from './Slider.utilities';\nimport { useSliderGesture } from './useSliderGesture';\n\nexport const Slider = ({\n  value,\n  onValueChange,\n  onDragEnd,\n  minimumValue = 0,\n  maximumValue = 100,\n  step = 1,\n  isDisabled = false,\n  testID,\n  marks = DEFAULT_MARKS,\n  showRangeLabels = false,\n  showRangeDots = false,\n  onGrip,\n  onMark,\n  mapValueToTrackPercent,\n  mapTrackPercentToValue,\n  trackInset = SLIDER_TRACK_INSET,\n  twClassName,\n  style,\n  ...props\n}: SliderProps) => {\n  const tw = useTailwind();\n  const theme = useTheme();\n  const isPureBlack = usePureBlack();\n\n  const palette = useMemo(\n    () => getThemeColors(theme, isPureBlack),\n    [isPureBlack, theme],\n  );\n\n  const themedColors = useMemo(() => {\n    const hasThemedColors = hasThemedMarkColors(marks);\n\n    return {\n      hasThemedColors,\n      fillColorStops: buildColorStops(\n        marks,\n        palette,\n        SliderMarkColor.IconAlternative,\n      ),\n      thumbColorStops: buildColorStops(\n        marks,\n        palette,\n        SliderMarkColor.IconDefault,\n      ),\n    };\n  }, [palette, marks]);\n\n  const labeledMarks = useMemo(\n    () => marks.filter((mark) => mark.label !== undefined),\n    [marks],\n  );\n\n  const { handleLayout, progressStyle, thumbStyle, gesture, handlePressStep } =\n    useSliderGesture({\n      value,\n      minimumValue,\n      maximumValue,\n      step,\n      isDisabled,\n      onValueChange,\n      onDragEnd,\n      onGrip,\n      onMark,\n      marks,\n      fillColorStops: themedColors.fillColorStops,\n      thumbColorStops: themedColors.thumbColorStops,\n      hasThemedColors: themedColors.hasThemedColors,\n      mapValueToTrackPercent,\n      mapTrackPercentToValue,\n    });\n\n  const getAccessibilityText = useCallback(() => {\n    const trackPercent = Math.round(\n      getTrackPercentFromValue(\n        value,\n        minimumValue,\n        maximumValue,\n        mapValueToTrackPercent,\n      ),\n    );\n    return `${trackPercent}%`;\n  }, [mapValueToTrackPercent, maximumValue, minimumValue, value]);\n\n  const handleAccessibilityAction = useCallback(\n    (event: AccessibilityActionEvent) => {\n      if (isDisabled) {\n        return;\n      }\n\n      const delta = event.nativeEvent.actionName === 'increment' ? step : -step;\n      const nextValue = clampValueToRange(\n        value + delta,\n        minimumValue,\n        maximumValue,\n        step,\n      );\n\n      if (nextValue !== value) {\n        onValueChange(nextValue);\n        onDragEnd?.(nextValue);\n      }\n    },\n    [\n      isDisabled,\n      maximumValue,\n      minimumValue,\n      onDragEnd,\n      onValueChange,\n      step,\n      value,\n    ],\n  );\n\n  return (\n    <Box\n      {...props}\n      testID={testID}\n      accessibilityRole=\"adjustable\"\n      accessibilityState={{ disabled: isDisabled }}\n      accessibilityValue={{\n        min: minimumValue,\n        max: maximumValue,\n        now: value,\n        text: getAccessibilityText(),\n      }}\n      accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}\n      onAccessibilityAction={handleAccessibilityAction}\n      onLayout={handleLayout}\n      style={[\n        tw.style(\n          'relative self-stretch',\n          isDisabled ? 'py-2 opacity-40' : 'py-2',\n        ),\n        {\n          marginHorizontal: trackInset,\n          ...(showRangeLabels && { paddingBottom: SLIDER_BOTTOM_PADDING }),\n        },\n        style,\n      ]}\n      twClassName={twClassName}\n    >\n      <GestureDetector gesture={gesture}>\n        <Animated.View\n          style={[tw.style('relative'), { height: THUMB_BOTTOM_OFFSET }]}\n        >\n          <Animated.View\n            style={tw.style(\n              'absolute left-0 top-0 h-2 w-full rounded-full bg-border-muted',\n            )}\n          />\n          <Animated.View\n            style={[\n              tw.style(\n                'absolute left-0 top-0 h-2 rounded-full',\n                !themedColors.hasThemedColors && 'bg-icon-alternative',\n              ),\n              progressStyle,\n            ]}\n          />\n          {showRangeDots &&\n            marks.map((mark) => (\n              <Box\n                key={`dot-${mark.step}`}\n                pointerEvents=\"none\"\n                twClassName=\"absolute top-0.5 h-1 w-1 rounded-full bg-text-muted\"\n                style={{\n                  left: getDotLeftPercent(mark.step) as ViewStyle['left'],\n                  transform: [{ translateX: -2 }],\n                  zIndex: -2,\n                }}\n              />\n            ))}\n          <Animated.View\n            style={[\n              tw.style(\n                'absolute rounded-full',\n                !themedColors.hasThemedColors && 'bg-icon-default',\n              ),\n              {\n                width: THUMB_SIZE,\n                height: THUMB_SIZE,\n                top: THUMB_TOP_OFFSET,\n                left: THUMB_LEFT_OFFSET,\n                elevation: 4,\n              },\n              thumbStyle,\n            ]}\n            hitSlop={{ top: 25, bottom: 25, left: 25, right: 25 }}\n          />\n        </Animated.View>\n      </GestureDetector>\n\n      {showRangeLabels &&\n        labeledMarks.map((mark) => (\n          <Pressable\n            key={`label-${mark.step}`}\n            style={[\n              tw.style('absolute items-center'),\n              {\n                top: RANGE_LABEL_TOP,\n                left: getDotLeftPercent(mark.step) as ViewStyle['left'],\n                transform: [{ translateX: '-50%' }],\n              },\n            ]}\n            onPress={() => handlePressStep(mark.step)}\n            disabled={isDisabled}\n            accessibilityRole=\"button\"\n          >\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              color={TextColor.TextAlternative}\n            >\n              {mark.label}\n            </Text>\n          </Pressable>\n        ))}\n    </Box>\n  );\n};\n\nSlider.displayName = 'Slider';\n"]}

package/dist/components/Slider/Slider.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Slider.types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.types.cjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  SliderPropsShared,\n  SliderMark,\n  SliderMarkColor,\n} from '@metamask/design-system-shared';\nimport type { ViewProps } from 'react-native';\nimport type { Gesture } from 'react-native-gesture-handler';\nimport type { useAnimatedStyle } from 'react-native-reanimated';\n\nimport type { SliderColorStop } from './Slider.utilities';\n\nexport type { SliderMark, SliderMarkColor };\n\n/**\n * React Native Slider props.\n *\n * Extends {@link SliderPropsShared} for cross-platform API (value, range, labels,\n * custom scale hooks) and `ViewProps` for root container passthrough (e.g.\n * `testID`, `accessibilityLabel`). See README for consumer-facing prop docs.\n */\nexport type SliderProps = SliderPropsShared &\n  ViewProps & {\n    /**\n     * Horizontal inset on the root container so the thumb can overhang the track\n     * at min/max without clipping. Defaults to {@link SLIDER_TRACK_INSET} (16);\n     * override when the parent already provides edge padding.\n     *\n     * @default 16\n     */\n    trackInset?: number;\n\n    /**\n     * Optional twrnc classes merged into the root container after component defaults.\n     * Use for layout spacing the Box API does not cover (e.g. `mt-4`).\n     */\n    twClassName?: string;\n  };\n\n/**\n * Inputs for `useSliderGesture` — gesture handling and animated thumb/fill sync.\n *\n * Only `value` and `onValueChange` are required. Remaining fields default to the\n * same values as {@link SliderPropsShared} when omitted.\n */\nexport type UseSliderGestureParams = {\n  /** Controlled domain value (`minimumValue`…`maximumValue`). */\n  value: number;\n\n  /**\n   * Lower bound of the domain range.\n   *\n   * @default 0\n   */\n  minimumValue?: number;\n\n  /**\n   * Upper bound of the domain range.\n   *\n   * @default 100\n   */\n  maximumValue?: number;\n\n  /**\n   * Step increment applied by the default `mapTrackPercentToValue` mapper.\n   * Custom mappers handle stepping inside `mapTrackPercentToValue`.\n   *\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * When true, pan/tap gestures and range-label presses are disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Called on every value change during pan drag, track tap, or range-label press.\n   * Bridged from UI-thread worklets via `runOnJS`.\n   */\n  onValueChange: (value: number) => void;\n\n  /**\n   * Called when a gesture completes (finger lift, tap, or label press).\n   * Omitted when the parent does not pass `onDragEnd`.\n   */\n  onDragEnd?: (value: number) => void;\n\n  /**\n   * Fires once when pan begins and once when pan ends; not fired on tap or\n   * range-label press. Use for haptic feedback (e.g. ImpactMoment.SliderGrip).\n   */\n  onGrip?: () => void;\n\n  /**\n   * Called when track percent crosses a haptic mark threshold while dragging.\n   * Evaluated on each pan `onUpdate` and on range-label press.\n   */\n  onMark?: () => void;\n\n  /** Mark entries for label press value resolution and haptic thresholds. */\n  marks: readonly SliderMark[];\n\n  /** Resolved fill color stops for themed interpolation. */\n  fillColorStops: readonly SliderColorStop[];\n\n  /** Resolved thumb color stops for themed interpolation. */\n  thumbColorStops: readonly SliderColorStop[];\n\n  /** When true, thumb and fill use interpolated theme colors. */\n  hasThemedColors: boolean;\n\n  /**\n   * Maps domain value → 0–100 track position for thumb/fill sync.\n   * Must be a Reanimated worklet when provided (`'worklet';` in the function body).\n   */\n  mapValueToTrackPercent?: (value: number) => number;\n\n  /**\n   * Maps 0–100 track position → domain value during gestures.\n   * Apply step rounding and snapping here for non-linear scales.\n   * Must be a Reanimated worklet when provided (`'worklet';` in the function body).\n   */\n  mapTrackPercentToValue?: (trackPercent: number) => number;\n};\n\n/**\n * Return value of `useSliderGesture`.\n *\n * Wire `handleLayout`, animated styles, and `gesture` into `Slider.tsx`;\n * `handlePressStep` is bound to range-label `Pressable` targets.\n */\nexport type UseSliderGestureResult = {\n  /**\n   * Root `onLayout` handler. Stores track width and re-syncs thumb position\n   * from the current `value` prop.\n   */\n  handleLayout: (event: { nativeEvent: { layout: { width: number } } }) => void;\n\n  /** Animated width for the filled portion of the track (follows thumb). */\n  progressStyle: ReturnType<typeof useAnimatedStyle>;\n\n  /** Animated `translateX` for the thumb relative to the track start. */\n  thumbStyle: ReturnType<typeof useAnimatedStyle>;\n\n  /** Combined pan + tap gesture for the track/thumb hit area. */\n  gesture: ReturnType<typeof Gesture.Simultaneous>;\n\n  /**\n   * Sets value from a tapped mark label: mark value → callbacks → thumb sync.\n   * No-op when `isDisabled` is true.\n   */\n  handlePressStep: (rangeStep: number) => void;\n};\n"]}

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

@@ -0,0 +1,133 @@
+import type { SliderPropsShared, SliderMark, SliderMarkColor } from "@metamask/design-system-shared";
+import type { ViewProps } from "react-native";
+import type { Gesture } from "react-native-gesture-handler";
+import type { useAnimatedStyle } from "react-native-reanimated";
+import type { SliderColorStop } from "./Slider.utilities.cjs";
+export type { SliderMark, SliderMarkColor };
+/**
+ * React Native Slider props.
+ *
+ * Extends {@link SliderPropsShared} for cross-platform API (value, range, labels,
+ * custom scale hooks) and `ViewProps` for root container passthrough (e.g.
+ * `testID`, `accessibilityLabel`). See README for consumer-facing prop docs.
+ */
+export type SliderProps = SliderPropsShared & ViewProps & {
+    /**
+     * Horizontal inset on the root container so the thumb can overhang the track
+     * at min/max without clipping. Defaults to {@link SLIDER_TRACK_INSET} (16);
+     * override when the parent already provides edge padding.
+     *
+     * @default 16
+     */
+    trackInset?: number;
+    /**
+     * Optional twrnc classes merged into the root container after component defaults.
+     * Use for layout spacing the Box API does not cover (e.g. `mt-4`).
+     */
+    twClassName?: string;
+};
+/**
+ * Inputs for `useSliderGesture` — gesture handling and animated thumb/fill sync.
+ *
+ * Only `value` and `onValueChange` are required. Remaining fields default to the
+ * same values as {@link SliderPropsShared} when omitted.
+ */
+export type UseSliderGestureParams = {
+    /** Controlled domain value (`minimumValue`…`maximumValue`). */
+    value: number;
+    /**
+     * Lower bound of the domain range.
+     *
+     * @default 0
+     */
+    minimumValue?: number;
+    /**
+     * Upper bound of the domain range.
+     *
+     * @default 100
+     */
+    maximumValue?: number;
+    /**
+     * Step increment applied by the default `mapTrackPercentToValue` mapper.
+     * Custom mappers handle stepping inside `mapTrackPercentToValue`.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * When true, pan/tap gestures and range-label presses are disabled.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Called on every value change during pan drag, track tap, or range-label press.
+     * Bridged from UI-thread worklets via `runOnJS`.
+     */
+    onValueChange: (value: number) => void;
+    /**
+     * Called when a gesture completes (finger lift, tap, or label press).
+     * Omitted when the parent does not pass `onDragEnd`.
+     */
+    onDragEnd?: (value: number) => void;
+    /**
+     * Fires once when pan begins and once when pan ends; not fired on tap or
+     * range-label press. Use for haptic feedback (e.g. ImpactMoment.SliderGrip).
+     */
+    onGrip?: () => void;
+    /**
+     * Called when track percent crosses a haptic mark threshold while dragging.
+     * Evaluated on each pan `onUpdate` and on range-label press.
+     */
+    onMark?: () => void;
+    /** Mark entries for label press value resolution and haptic thresholds. */
+    marks: readonly SliderMark[];
+    /** Resolved fill color stops for themed interpolation. */
+    fillColorStops: readonly SliderColorStop[];
+    /** Resolved thumb color stops for themed interpolation. */
+    thumbColorStops: readonly SliderColorStop[];
+    /** When true, thumb and fill use interpolated theme colors. */
+    hasThemedColors: boolean;
+    /**
+     * Maps domain value → 0–100 track position for thumb/fill sync.
+     * Must be a Reanimated worklet when provided (`'worklet';` in the function body).
+     */
+    mapValueToTrackPercent?: (value: number) => number;
+    /**
+     * Maps 0–100 track position → domain value during gestures.
+     * Apply step rounding and snapping here for non-linear scales.
+     * Must be a Reanimated worklet when provided (`'worklet';` in the function body).
+     */
+    mapTrackPercentToValue?: (trackPercent: number) => number;
+};
+/**
+ * Return value of `useSliderGesture`.
+ *
+ * Wire `handleLayout`, animated styles, and `gesture` into `Slider.tsx`;
+ * `handlePressStep` is bound to range-label `Pressable` targets.
+ */
+export type UseSliderGestureResult = {
+    /**
+     * Root `onLayout` handler. Stores track width and re-syncs thumb position
+     * from the current `value` prop.
+     */
+    handleLayout: (event: {
+        nativeEvent: {
+            layout: {
+                width: number;
+            };
+        };
+    }) => void;
+    /** Animated width for the filled portion of the track (follows thumb). */
+    progressStyle: ReturnType<typeof useAnimatedStyle>;
+    /** Animated `translateX` for the thumb relative to the track start. */
+    thumbStyle: ReturnType<typeof useAnimatedStyle>;
+    /** Combined pan + tap gesture for the track/thumb hit area. */
+    gesture: ReturnType<typeof Gesture.Simultaneous>;
+    /**
+     * Sets value from a tapped mark label: mark value → callbacks → thumb sync.
+     * No-op when `isDisabled` is true.
+     */
+    handlePressStep: (rangeStep: number) => void;
+};
+//# sourceMappingURL=Slider.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.types.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,eAAe,EAChB,uCAAuC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,qCAAqC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAAgC;AAEhE,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,SAAS,GAAG;IACV;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEJ;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,2EAA2E;IAC3E,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAE7B,0DAA0D;IAC1D,cAAc,EAAE,SAAS,eAAe,EAAE,CAAC;IAE3C,2DAA2D;IAC3D,eAAe,EAAE,SAAS,eAAe,EAAE,CAAC;IAE5C,+DAA+D;IAC/D,eAAe,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEnD;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3D,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,MAAM,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9E,0EAA0E;IAC1E,aAAa,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IAEnD,uEAAuE;IACvE,UAAU,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IAEhD,+DAA+D;IAC/D,OAAO,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,YAAY,CAAC,CAAC;IAEjD;;;OAGG;IACH,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC"}

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

@@ -0,0 +1,133 @@
+import type { SliderPropsShared, SliderMark, SliderMarkColor } from "@metamask/design-system-shared";
+import type { ViewProps } from "react-native";
+import type { Gesture } from "react-native-gesture-handler";
+import type { useAnimatedStyle } from "react-native-reanimated";
+import type { SliderColorStop } from "./Slider.utilities.mjs";
+export type { SliderMark, SliderMarkColor };
+/**
+ * React Native Slider props.
+ *
+ * Extends {@link SliderPropsShared} for cross-platform API (value, range, labels,
+ * custom scale hooks) and `ViewProps` for root container passthrough (e.g.
+ * `testID`, `accessibilityLabel`). See README for consumer-facing prop docs.
+ */
+export type SliderProps = SliderPropsShared & ViewProps & {
+    /**
+     * Horizontal inset on the root container so the thumb can overhang the track
+     * at min/max without clipping. Defaults to {@link SLIDER_TRACK_INSET} (16);
+     * override when the parent already provides edge padding.
+     *
+     * @default 16
+     */
+    trackInset?: number;
+    /**
+     * Optional twrnc classes merged into the root container after component defaults.
+     * Use for layout spacing the Box API does not cover (e.g. `mt-4`).
+     */
+    twClassName?: string;
+};
+/**
+ * Inputs for `useSliderGesture` — gesture handling and animated thumb/fill sync.
+ *
+ * Only `value` and `onValueChange` are required. Remaining fields default to the
+ * same values as {@link SliderPropsShared} when omitted.
+ */
+export type UseSliderGestureParams = {
+    /** Controlled domain value (`minimumValue`…`maximumValue`). */
+    value: number;
+    /**
+     * Lower bound of the domain range.
+     *
+     * @default 0
+     */
+    minimumValue?: number;
+    /**
+     * Upper bound of the domain range.
+     *
+     * @default 100
+     */
+    maximumValue?: number;
+    /**
+     * Step increment applied by the default `mapTrackPercentToValue` mapper.
+     * Custom mappers handle stepping inside `mapTrackPercentToValue`.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * When true, pan/tap gestures and range-label presses are disabled.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Called on every value change during pan drag, track tap, or range-label press.
+     * Bridged from UI-thread worklets via `runOnJS`.
+     */
+    onValueChange: (value: number) => void;
+    /**
+     * Called when a gesture completes (finger lift, tap, or label press).
+     * Omitted when the parent does not pass `onDragEnd`.
+     */
+    onDragEnd?: (value: number) => void;
+    /**
+     * Fires once when pan begins and once when pan ends; not fired on tap or
+     * range-label press. Use for haptic feedback (e.g. ImpactMoment.SliderGrip).
+     */
+    onGrip?: () => void;
+    /**
+     * Called when track percent crosses a haptic mark threshold while dragging.
+     * Evaluated on each pan `onUpdate` and on range-label press.
+     */
+    onMark?: () => void;
+    /** Mark entries for label press value resolution and haptic thresholds. */
+    marks: readonly SliderMark[];
+    /** Resolved fill color stops for themed interpolation. */
+    fillColorStops: readonly SliderColorStop[];
+    /** Resolved thumb color stops for themed interpolation. */
+    thumbColorStops: readonly SliderColorStop[];
+    /** When true, thumb and fill use interpolated theme colors. */
+    hasThemedColors: boolean;
+    /**
+     * Maps domain value → 0–100 track position for thumb/fill sync.
+     * Must be a Reanimated worklet when provided (`'worklet';` in the function body).
+     */
+    mapValueToTrackPercent?: (value: number) => number;
+    /**
+     * Maps 0–100 track position → domain value during gestures.
+     * Apply step rounding and snapping here for non-linear scales.
+     * Must be a Reanimated worklet when provided (`'worklet';` in the function body).
+     */
+    mapTrackPercentToValue?: (trackPercent: number) => number;
+};
+/**
+ * Return value of `useSliderGesture`.
+ *
+ * Wire `handleLayout`, animated styles, and `gesture` into `Slider.tsx`;
+ * `handlePressStep` is bound to range-label `Pressable` targets.
+ */
+export type UseSliderGestureResult = {
+    /**
+     * Root `onLayout` handler. Stores track width and re-syncs thumb position
+     * from the current `value` prop.
+     */
+    handleLayout: (event: {
+        nativeEvent: {
+            layout: {
+                width: number;
+            };
+        };
+    }) => void;
+    /** Animated width for the filled portion of the track (follows thumb). */
+    progressStyle: ReturnType<typeof useAnimatedStyle>;
+    /** Animated `translateX` for the thumb relative to the track start. */
+    thumbStyle: ReturnType<typeof useAnimatedStyle>;
+    /** Combined pan + tap gesture for the track/thumb hit area. */
+    gesture: ReturnType<typeof Gesture.Simultaneous>;
+    /**
+     * Sets value from a tapped mark label: mark value → callbacks → thumb sync.
+     * No-op when `isDisabled` is true.
+     */
+    handlePressStep: (rangeStep: number) => void;
+};
+//# sourceMappingURL=Slider.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.types.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,eAAe,EAChB,uCAAuC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,qCAAqC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAAgC;AAEhE,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,SAAS,GAAG;IACV;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEJ;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,2EAA2E;IAC3E,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAE7B,0DAA0D;IAC1D,cAAc,EAAE,SAAS,eAAe,EAAE,CAAC;IAE3C,2DAA2D;IAC3D,eAAe,EAAE,SAAS,eAAe,EAAE,CAAC;IAE5C,+DAA+D;IAC/D,eAAe,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEnD;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3D,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,MAAM,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9E,0EAA0E;IAC1E,aAAa,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IAEnD,uEAAuE;IACvE,UAAU,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IAEhD,+DAA+D;IAC/D,OAAO,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,YAAY,CAAC,CAAC;IAEjD;;;OAGG;IACH,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC"}

package/dist/components/Slider/Slider.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Slider.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.types.mjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  SliderPropsShared,\n  SliderMark,\n  SliderMarkColor,\n} from '@metamask/design-system-shared';\nimport type { ViewProps } from 'react-native';\nimport type { Gesture } from 'react-native-gesture-handler';\nimport type { useAnimatedStyle } from 'react-native-reanimated';\n\nimport type { SliderColorStop } from './Slider.utilities';\n\nexport type { SliderMark, SliderMarkColor };\n\n/**\n * React Native Slider props.\n *\n * Extends {@link SliderPropsShared} for cross-platform API (value, range, labels,\n * custom scale hooks) and `ViewProps` for root container passthrough (e.g.\n * `testID`, `accessibilityLabel`). See README for consumer-facing prop docs.\n */\nexport type SliderProps = SliderPropsShared &\n  ViewProps & {\n    /**\n     * Horizontal inset on the root container so the thumb can overhang the track\n     * at min/max without clipping. Defaults to {@link SLIDER_TRACK_INSET} (16);\n     * override when the parent already provides edge padding.\n     *\n     * @default 16\n     */\n    trackInset?: number;\n\n    /**\n     * Optional twrnc classes merged into the root container after component defaults.\n     * Use for layout spacing the Box API does not cover (e.g. `mt-4`).\n     */\n    twClassName?: string;\n  };\n\n/**\n * Inputs for `useSliderGesture` — gesture handling and animated thumb/fill sync.\n *\n * Only `value` and `onValueChange` are required. Remaining fields default to the\n * same values as {@link SliderPropsShared} when omitted.\n */\nexport type UseSliderGestureParams = {\n  /** Controlled domain value (`minimumValue`…`maximumValue`). */\n  value: number;\n\n  /**\n   * Lower bound of the domain range.\n   *\n   * @default 0\n   */\n  minimumValue?: number;\n\n  /**\n   * Upper bound of the domain range.\n   *\n   * @default 100\n   */\n  maximumValue?: number;\n\n  /**\n   * Step increment applied by the default `mapTrackPercentToValue` mapper.\n   * Custom mappers handle stepping inside `mapTrackPercentToValue`.\n   *\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * When true, pan/tap gestures and range-label presses are disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Called on every value change during pan drag, track tap, or range-label press.\n   * Bridged from UI-thread worklets via `runOnJS`.\n   */\n  onValueChange: (value: number) => void;\n\n  /**\n   * Called when a gesture completes (finger lift, tap, or label press).\n   * Omitted when the parent does not pass `onDragEnd`.\n   */\n  onDragEnd?: (value: number) => void;\n\n  /**\n   * Fires once when pan begins and once when pan ends; not fired on tap or\n   * range-label press. Use for haptic feedback (e.g. ImpactMoment.SliderGrip).\n   */\n  onGrip?: () => void;\n\n  /**\n   * Called when track percent crosses a haptic mark threshold while dragging.\n   * Evaluated on each pan `onUpdate` and on range-label press.\n   */\n  onMark?: () => void;\n\n  /** Mark entries for label press value resolution and haptic thresholds. */\n  marks: readonly SliderMark[];\n\n  /** Resolved fill color stops for themed interpolation. */\n  fillColorStops: readonly SliderColorStop[];\n\n  /** Resolved thumb color stops for themed interpolation. */\n  thumbColorStops: readonly SliderColorStop[];\n\n  /** When true, thumb and fill use interpolated theme colors. */\n  hasThemedColors: boolean;\n\n  /**\n   * Maps domain value → 0–100 track position for thumb/fill sync.\n   * Must be a Reanimated worklet when provided (`'worklet';` in the function body).\n   */\n  mapValueToTrackPercent?: (value: number) => number;\n\n  /**\n   * Maps 0–100 track position → domain value during gestures.\n   * Apply step rounding and snapping here for non-linear scales.\n   * Must be a Reanimated worklet when provided (`'worklet';` in the function body).\n   */\n  mapTrackPercentToValue?: (trackPercent: number) => number;\n};\n\n/**\n * Return value of `useSliderGesture`.\n *\n * Wire `handleLayout`, animated styles, and `gesture` into `Slider.tsx`;\n * `handlePressStep` is bound to range-label `Pressable` targets.\n */\nexport type UseSliderGestureResult = {\n  /**\n   * Root `onLayout` handler. Stores track width and re-syncs thumb position\n   * from the current `value` prop.\n   */\n  handleLayout: (event: { nativeEvent: { layout: { width: number } } }) => void;\n\n  /** Animated width for the filled portion of the track (follows thumb). */\n  progressStyle: ReturnType<typeof useAnimatedStyle>;\n\n  /** Animated `translateX` for the thumb relative to the track start. */\n  thumbStyle: ReturnType<typeof useAnimatedStyle>;\n\n  /** Combined pan + tap gesture for the track/thumb hit area. */\n  gesture: ReturnType<typeof Gesture.Simultaneous>;\n\n  /**\n   * Sets value from a tapped mark label: mark value → callbacks → thumb sync.\n   * No-op when `isDisabled` is true.\n   */\n  handlePressStep: (rangeStep: number) => void;\n};\n"]}