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

package/dist/components/Slider/Slider.mjs

@@ -0,0 +1,116 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { FontWeight, TextColor, TextVariant } from "@metamask/design-system-shared";
+import { useTailwind } from "@metamask/design-system-twrnc-preset";
+import $React, { useCallback } 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_RANGE_LABEL_STEPS, DEFAULT_TICK_THRESHOLDS, 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 { clampValueToRange, defaultFormatStepLabel, getDotLeftPercent, getTrackPercentFromValue } from "./Slider.utilities.mjs";
+import { useSliderGesture } from "./useSliderGesture.mjs";
+export const Slider = ({ value, onValueChange, onDragEnd, minimumValue = 0, maximumValue = 100, step = 1, isDisabled = false, testID, rangeLabelSteps = DEFAULT_RANGE_LABEL_STEPS, showRangeLabels = false, showRangeDots = false, onGrip, onTick, tickThresholds = DEFAULT_TICK_THRESHOLDS, mapValueToTrackPercent, mapTrackPercentToValue, formatStepLabel, stepToValue: stepToValueProp, trackInset = SLIDER_TRACK_INSET, twClassName, style, ...props }) => {
+    const tw = useTailwind();
+    const formatLabel = formatStepLabel ?? defaultFormatStepLabel;
+    const { handleLayout, progressStyle, thumbStyle, gesture, handlePressStep } = useSliderGesture({
+        value,
+        minimumValue,
+        maximumValue,
+        step,
+        isDisabled,
+        onValueChange,
+        onDragEnd,
+        onGrip,
+        onTick,
+        tickThresholds,
+        mapValueToTrackPercent,
+        mapTrackPercentToValue,
+        stepToValue: stepToValueProp,
+    });
+    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 bg-icon-alternative'),
+            progressStyle,
+        ]}/>
+          {showRangeDots &&
+            rangeLabelSteps.map((rangeStep) => (<Box key={`dot-${rangeStep}`} pointerEvents="none" twClassName="absolute top-0.5 h-1 w-1 rounded-full bg-text-muted" style={{
+                    left: getDotLeftPercent(rangeStep),
+                    transform: [{ translateX: -2 }],
+                    zIndex: -2,
+                }}/>))}
+          <Animated.View style={[
+            tw.style('absolute rounded-full 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 &&
+            rangeLabelSteps.map((rangeStep) => (<Pressable key={`label-${rangeStep}`} style={[
+                    tw.style('absolute items-center'),
+                    {
+                        top: RANGE_LABEL_TOP,
+                        left: getDotLeftPercent(rangeStep),
+                        transform: [{ translateX: '-50%' }],
+                    },
+                ]} onPress={() => handlePressStep(rangeStep)} disabled={isDisabled} accessibilityRole="button">
+            <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium} color={TextColor.TextAlternative}>
+              {formatLabel(rangeStep)}
+            </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} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } 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_RANGE_LABEL_STEPS,\n  DEFAULT_TICK_THRESHOLDS,\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  clampValueToRange,\n  defaultFormatStepLabel,\n  getDotLeftPercent,\n  getTrackPercentFromValue,\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  rangeLabelSteps = DEFAULT_RANGE_LABEL_STEPS,\n  showRangeLabels = false,\n  showRangeDots = false,\n  onGrip,\n  onTick,\n  tickThresholds = DEFAULT_TICK_THRESHOLDS,\n  mapValueToTrackPercent,\n  mapTrackPercentToValue,\n  formatStepLabel,\n  stepToValue: stepToValueProp,\n  trackInset = SLIDER_TRACK_INSET,\n  twClassName,\n  style,\n  ...props\n}: SliderProps) => {\n  const tw = useTailwind();\n\n  const formatLabel = formatStepLabel ?? defaultFormatStepLabel;\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      onTick,\n      tickThresholds,\n      mapValueToTrackPercent,\n      mapTrackPercentToValue,\n      stepToValue: stepToValueProp,\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 bg-icon-alternative',\n              ),\n              progressStyle,\n            ]}\n          />\n          {showRangeDots &&\n            rangeLabelSteps.map((rangeStep) => (\n              <Box\n                key={`dot-${rangeStep}`}\n                pointerEvents=\"none\"\n                twClassName=\"absolute top-0.5 h-1 w-1 rounded-full bg-text-muted\"\n                style={{\n                  left: getDotLeftPercent(rangeStep) as ViewStyle['left'],\n                  transform: [{ translateX: -2 }],\n                  zIndex: -2,\n                }}\n              />\n            ))}\n          <Animated.View\n            style={[\n              tw.style('absolute rounded-full bg-icon-default'),\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        rangeLabelSteps.map((rangeStep) => (\n          <Pressable\n            key={`label-${rangeStep}`}\n            style={[\n              tw.style('absolute items-center'),\n              {\n                top: RANGE_LABEL_TOP,\n                left: getDotLeftPercent(rangeStep) as ViewStyle['left'],\n                transform: [{ translateX: '-50%' }],\n              },\n            ]}\n            onPress={() => handlePressStep(rangeStep)}\n            disabled={isDisabled}\n            accessibilityRole=\"button\"\n          >\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              color={TextColor.TextAlternative}\n            >\n              {formatLabel(rangeStep)}\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 { SliderPropsShared } 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\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 `tickThresholds` entry while dragging.\n   * Evaluated on each pan `onUpdate` and on range-label press.\n   */\n  onTick?: () => void;\n\n  /**\n   * Track-percent positions (0–100) that trigger `onTick` when crossed.\n   * Not domain values — use the same coordinate system as `rangeLabelSteps`.\n   *\n   * @default [25, 50, 75]\n   */\n  tickThresholds?: readonly number[];\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   * Converts a tapped `rangeLabelSteps` entry to a domain value.\n   * Default: `(step / 100) * (max - min) + min`.\n   */\n  stepToValue?: (step: 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 range label: `stepToValue` → 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,135 @@
+import type { SliderPropsShared } 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";
+/**
+ * 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 `tickThresholds` entry while dragging.
+     * Evaluated on each pan `onUpdate` and on range-label press.
+     */
+    onTick?: () => void;
+    /**
+     * Track-percent positions (0–100) that trigger `onTick` when crossed.
+     * Not domain values — use the same coordinate system as `rangeLabelSteps`.
+     *
+     * @default [25, 50, 75]
+     */
+    tickThresholds?: readonly number[];
+    /**
+     * 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;
+    /**
+     * Converts a tapped `rangeLabelSteps` entry to a domain value.
+     * Default: `(step / 100) * (max - min) + min`.
+     */
+    stepToValue?: (step: 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 range label: `stepToValue` → 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,EAAE,iBAAiB,EAAE,uCAAuC;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,qCAAqC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAAgC;AAEhE;;;;;;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;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAEnC;;;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;IAE1D;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC,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,135 @@
+import type { SliderPropsShared } 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";
+/**
+ * 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 `tickThresholds` entry while dragging.
+     * Evaluated on each pan `onUpdate` and on range-label press.
+     */
+    onTick?: () => void;
+    /**
+     * Track-percent positions (0–100) that trigger `onTick` when crossed.
+     * Not domain values — use the same coordinate system as `rangeLabelSteps`.
+     *
+     * @default [25, 50, 75]
+     */
+    tickThresholds?: readonly number[];
+    /**
+     * 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;
+    /**
+     * Converts a tapped `rangeLabelSteps` entry to a domain value.
+     * Default: `(step / 100) * (max - min) + min`.
+     */
+    stepToValue?: (step: 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 range label: `stepToValue` → 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,EAAE,iBAAiB,EAAE,uCAAuC;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,qCAAqC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAAgC;AAEhE;;;;;;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;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAEnC;;;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;IAE1D;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC,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 { SliderPropsShared } 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\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 `tickThresholds` entry while dragging.\n   * Evaluated on each pan `onUpdate` and on range-label press.\n   */\n  onTick?: () => void;\n\n  /**\n   * Track-percent positions (0–100) that trigger `onTick` when crossed.\n   * Not domain values — use the same coordinate system as `rangeLabelSteps`.\n   *\n   * @default [25, 50, 75]\n   */\n  tickThresholds?: readonly number[];\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   * Converts a tapped `rangeLabelSteps` entry to a domain value.\n   * Default: `(step / 100) * (max - min) + min`.\n   */\n  stepToValue?: (step: 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 range label: `stepToValue` → callbacks → thumb sync.\n   * No-op when `isDisabled` is true.\n   */\n  handlePressStep: (rangeStep: number) => void;\n};\n"]}

package/dist/components/Slider/Slider.utilities.cjs

@@ -0,0 +1,202 @@
+"use strict";
+/**
+ * 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 `tickThresholds`; 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.).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clampValueToRange = exports.getDotLeftPercent = exports.defaultFormatStepLabel = exports.defaultStepToValue = exports.getTrackPercentFromValue = exports.clampGesturePosition = exports.positionToTrackPercent = exports.trackPercentToPosition = exports.resolveValueToTrackPercent = exports.resolveTrackPercentToValue = exports.defaultMapTrackPercentToValue = exports.defaultMapValueToTrackPercent = exports.clampTrackPercent = void 0;
+const Slider_constants_1 = require("./Slider.constants.cjs");
+// --- Track-percent primitives (worklet) ---
+function clampTrackPercent(trackPercent) {
+    'worklet';
+    return Math.max(0, Math.min(100, trackPercent));
+}
+exports.clampTrackPercent = clampTrackPercent;
+// --- 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.
+ */
+function defaultMapValueToTrackPercent(value, minimumValue, maximumValue) {
+    'worklet';
+    const range = maximumValue - minimumValue;
+    if (range === 0) {
+        return 0;
+    }
+    const percent = ((value - minimumValue) / range) * 100;
+    return clampTrackPercent(percent);
+}
+exports.defaultMapValueToTrackPercent = defaultMapValueToTrackPercent;
+/**
+ * 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.
+ */
+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));
+}
+exports.defaultMapTrackPercentToValue = defaultMapTrackPercentToValue;
+/**
+ * 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.
+ */
+function resolveTrackPercentToValue(trackPercent, minimumValue, maximumValue, step, mapTrackPercentToValue) {
+    'worklet';
+    if (mapTrackPercentToValue) {
+        return mapTrackPercentToValue(trackPercent);
+    }
+    return defaultMapTrackPercentToValue(trackPercent, minimumValue, maximumValue, step);
+}
+exports.resolveTrackPercentToValue = resolveTrackPercentToValue;
+/**
+ * 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.
+ */
+function resolveValueToTrackPercent(value, minimumValue, maximumValue, mapValueToTrackPercent) {
+    'worklet';
+    if (mapValueToTrackPercent) {
+        return mapValueToTrackPercent(value);
+    }
+    return defaultMapValueToTrackPercent(value, minimumValue, maximumValue);
+}
+exports.resolveValueToTrackPercent = resolveValueToTrackPercent;
+// --- Track-percent ↔ pixel position (worklet) ---
+function trackPercentToPosition(trackPercent, width) {
+    'worklet';
+    if (width === 0) {
+        return 0;
+    }
+    return (clampTrackPercent(trackPercent) / 100) * width;
+}
+exports.trackPercentToPosition = trackPercentToPosition;
+function positionToTrackPercent(position, width) {
+    'worklet';
+    if (width === 0) {
+        return 0;
+    }
+    return clampTrackPercent((position / width) * 100);
+}
+exports.positionToTrackPercent = positionToTrackPercent;
+/**
+ * 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.
+ */
+function clampGesturePosition(position, width) {
+    'worklet';
+    return Math.max(0, Math.min(position, width));
+}
+exports.clampGesturePosition = clampGesturePosition;
+// --- 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.
+ */
+function getTrackPercentFromValue(value, minimumValue, maximumValue, mapValueToTrackPercent) {
+    if (mapValueToTrackPercent) {
+        return mapValueToTrackPercent(value);
+    }
+    return defaultMapValueToTrackPercent(value, minimumValue, maximumValue);
+}
+exports.getTrackPercentFromValue = getTrackPercentFromValue;
+// --- Range label / dot defaults (Slider.tsx) ---
+/**
+ * Default `stepToValue`: linear track-percent → domain value.
+ *
+ * @param step - Track-percent step from `rangeLabelSteps`.
+ * @param minimumValue - Lower bound of the domain range.
+ * @param maximumValue - Upper bound of the domain range.
+ * @returns Domain value for the step.
+ */
+function defaultStepToValue(step, minimumValue, maximumValue) {
+    return (step / 100) * (maximumValue - minimumValue) + minimumValue;
+}
+exports.defaultStepToValue = defaultStepToValue;
+/**
+ * Default `formatStepLabel`: display track percent as a percent string.
+ *
+ * @param step - Track-percent step from `rangeLabelSteps`.
+ * @returns Formatted label string.
+ */
+function defaultFormatStepLabel(step) {
+    return `${step}%`;
+}
+exports.defaultFormatStepLabel = defaultFormatStepLabel;
+/**
+ * Marker `left` percent for range dots and labels; edge steps inset to stay on track.
+ *
+ * @param step - Track-percent step from `rangeLabelSteps`.
+ * @returns CSS `left` percentage string.
+ */
+function getDotLeftPercent(step) {
+    if (step === 0) {
+        return Slider_constants_1.DOT_EDGE_INSET_PERCENT;
+    }
+    if (step === 100) {
+        return Slider_constants_1.DOT_EDGE_MAX_PERCENT;
+    }
+    return `${step}%`;
+}
+exports.getDotLeftPercent = getDotLeftPercent;
+// --- 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.
+ */
+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;
+}
+exports.clampValueToRange = clampValueToRange;
+//# sourceMappingURL=Slider.utilities.cjs.map