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

package/dist/components/Slider/Slider.cjs

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+const Box_1 = require("../Box/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+const Slider_constants_1 = require("./Slider.constants.cjs");
+const Slider_utilities_1 = require("./Slider.utilities.cjs");
+const useSliderGesture_1 = require("./useSliderGesture.cjs");
+const Slider = ({ value, onValueChange, onDragEnd, minimumValue = 0, maximumValue = 100, step = 1, isDisabled = false, testID, rangeLabelSteps = Slider_constants_1.DEFAULT_RANGE_LABEL_STEPS, showRangeLabels = false, showRangeDots = false, onGrip, onTick, tickThresholds = Slider_constants_1.DEFAULT_TICK_THRESHOLDS, mapValueToTrackPercent, mapTrackPercentToValue, formatStepLabel, stepToValue: stepToValueProp, trackInset = Slider_constants_1.SLIDER_TRACK_INSET, twClassName, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const formatLabel = formatStepLabel ?? Slider_utilities_1.defaultFormatStepLabel;
+    const { handleLayout, progressStyle, thumbStyle, gesture, handlePressStep } = (0, useSliderGesture_1.useSliderGesture)({
+        value,
+        minimumValue,
+        maximumValue,
+        step,
+        isDisabled,
+        onValueChange,
+        onDragEnd,
+        onGrip,
+        onTick,
+        tickThresholds,
+        mapValueToTrackPercent,
+        mapTrackPercentToValue,
+        stepToValue: stepToValueProp,
+    });
+    const getAccessibilityText = (0, react_1.useCallback)(() => {
+        const trackPercent = Math.round((0, Slider_utilities_1.getTrackPercentFromValue)(value, minimumValue, maximumValue, mapValueToTrackPercent));
+        return `${trackPercent}%`;
+    }, [mapValueToTrackPercent, maximumValue, minimumValue, value]);
+    const handleAccessibilityAction = (0, react_1.useCallback)((event) => {
+        if (isDisabled) {
+            return;
+        }
+        const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
+        const nextValue = (0, Slider_utilities_1.clampValueToRange)(value + delta, minimumValue, maximumValue, step);
+        if (nextValue !== value) {
+            onValueChange(nextValue);
+            onDragEnd?.(nextValue);
+        }
+    }, [
+        isDisabled,
+        maximumValue,
+        minimumValue,
+        onDragEnd,
+        onValueChange,
+        step,
+        value,
+    ]);
+    return (<Box_1.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_constants_1.SLIDER_BOTTOM_PADDING }),
+            },
+            style,
+        ]} twClassName={twClassName}>
+      <react_native_gesture_handler_1.GestureDetector gesture={gesture}>
+        <react_native_reanimated_1.default.View style={[tw.style('relative'), { height: Slider_constants_1.THUMB_BOTTOM_OFFSET }]}>
+          <react_native_reanimated_1.default.View style={tw.style('absolute left-0 top-0 h-2 w-full rounded-full bg-border-muted')}/>
+          <react_native_reanimated_1.default.View style={[
+            tw.style('absolute left-0 top-0 h-2 rounded-full bg-icon-alternative'),
+            progressStyle,
+        ]}/>
+          {showRangeDots &&
+            rangeLabelSteps.map((rangeStep) => (<Box_1.Box key={`dot-${rangeStep}`} pointerEvents="none" twClassName="absolute top-0.5 h-1 w-1 rounded-full bg-text-muted" style={{
+                    left: (0, Slider_utilities_1.getDotLeftPercent)(rangeStep),
+                    transform: [{ translateX: -2 }],
+                    zIndex: -2,
+                }}/>))}
+          <react_native_reanimated_1.default.View style={[
+            tw.style('absolute rounded-full bg-icon-default'),
+            {
+                width: Slider_constants_1.THUMB_SIZE,
+                height: Slider_constants_1.THUMB_SIZE,
+                top: Slider_constants_1.THUMB_TOP_OFFSET,
+                left: Slider_constants_1.THUMB_LEFT_OFFSET,
+                elevation: 4,
+            },
+            thumbStyle,
+        ]} hitSlop={{ top: 25, bottom: 25, left: 25, right: 25 }}/>
+        </react_native_reanimated_1.default.View>
+      </react_native_gesture_handler_1.GestureDetector>
+
+      {showRangeLabels &&
+            rangeLabelSteps.map((rangeStep) => (<react_native_1.Pressable key={`label-${rangeStep}`} style={[
+                    tw.style('absolute items-center'),
+                    {
+                        top: Slider_constants_1.RANGE_LABEL_TOP,
+                        left: (0, Slider_utilities_1.getDotLeftPercent)(rangeStep),
+                        transform: [{ translateX: '-50%' }],
+                    },
+                ]} onPress={() => handlePressStep(rangeStep)} disabled={isDisabled} accessibilityRole="button">
+            <Text_1.Text variant={design_system_shared_1.TextVariant.BodyMd} fontWeight={design_system_shared_1.FontWeight.Medium} color={design_system_shared_1.TextColor.TextAlternative}>
+              {formatLabel(rangeStep)}
+            </Text_1.Text>
+          </react_native_1.Pressable>))}
+    </Box_1.Box>);
+};
+exports.Slider = Slider;
+exports.Slider.displayName = 'Slider';
+//# sourceMappingURL=Slider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.cjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAIwC;AACxC,qFAAmE;AACnE,+CAA2C;AAC3C,+CAAmE;AAEnE,+EAA+D;AAC/D,sFAA+C;AAE/C,0CAA6B;AAC7B,4CAA+B;AAE/B,6DAU4B;AAE5B,6DAK4B;AAC5B,6DAAsD;AAE/C,MAAM,MAAM,GAAG,CAAC,EACrB,KAAK,EACL,aAAa,EACb,SAAS,EACT,YAAY,GAAG,CAAC,EAChB,YAAY,GAAG,GAAG,EAClB,IAAI,GAAG,CAAC,EACR,UAAU,GAAG,KAAK,EAClB,MAAM,EACN,eAAe,GAAG,4CAAyB,EAC3C,eAAe,GAAG,KAAK,EACvB,aAAa,GAAG,KAAK,EACrB,MAAM,EACN,MAAM,EACN,cAAc,GAAG,0CAAuB,EACxC,sBAAsB,EACtB,sBAAsB,EACtB,eAAe,EACf,WAAW,EAAE,eAAe,EAC5B,UAAU,GAAG,qCAAkB,EAC/B,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACI,EAAE,EAAE;IAChB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,WAAW,GAAG,eAAe,IAAI,yCAAsB,CAAC;IAE9D,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,GACzE,IAAA,mCAAgB,EAAC;QACf,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,IAAI;QACJ,UAAU;QACV,aAAa;QACb,SAAS;QACT,MAAM;QACN,MAAM;QACN,cAAc;QACd,sBAAsB;QACtB,sBAAsB;QACtB,WAAW,EAAE,eAAe;KAC7B,CAAC,CAAC;IAEL,MAAM,oBAAoB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC5C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAC7B,IAAA,2CAAwB,EACtB,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,CACvB,CACF,CAAC;QACF,OAAO,GAAG,YAAY,GAAG,CAAC;IAC5B,CAAC,EAAE,CAAC,sBAAsB,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhE,MAAM,yBAAyB,GAAG,IAAA,mBAAW,EAC3C,CAAC,KAA+B,EAAE,EAAE;QAClC,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC1E,MAAM,SAAS,GAAG,IAAA,oCAAiB,EACjC,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,YAAY,EACZ,IAAI,CACL,CAAC;QAEF,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,aAAa,CAAC,SAAS,CAAC,CAAC;YACzB,SAAS,EAAE,CAAC,SAAS,CAAC,CAAC;SACxB;IACH,CAAC,EACD;QACE,UAAU;QACV,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,aAAa;QACb,IAAI;QACJ,KAAK;KACN,CACF,CAAC;IAEF,OAAO,CACL,CAAC,SAAG,CACF,IAAI,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,iBAAiB,CAAC,YAAY,CAC9B,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAC7C,kBAAkB,CAAC,CAAC;YAClB,GAAG,EAAE,YAAY;YACjB,GAAG,EAAE,YAAY;YACjB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,oBAAoB,EAAE;SAC7B,CAAC,CACF,oBAAoB,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CACrE,qBAAqB,CAAC,CAAC,yBAAyB,CAAC,CACjD,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uBAAuB,EACvB,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CACxC;YACD;gBACE,gBAAgB,EAAE,UAAU;gBAC5B,GAAG,CAAC,eAAe,IAAI,EAAE,aAAa,EAAE,wCAAqB,EAAE,CAAC;aACjE;YACD,KAAK;SACN,CAAC,CACF,WAAW,CAAC,CAAC,WAAW,CAAC,CAEzB;MAAA,CAAC,8CAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAChC;QAAA,CAAC,iCAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,sCAAmB,EAAE,CAAC,CAAC,CAE/D;UAAA,CAAC,iCAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CACb,+DAA+D,CAChE,CAAC,EAEJ;UAAA,CAAC,iCAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,4DAA4D,CAC7D;YACD,aAAa;SACd,CAAC,EAEJ;UAAA,CAAC,aAAa;YACZ,eAAe,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACjC,CAAC,SAAG,CACF,GAAG,CAAC,CAAC,OAAO,SAAS,EAAE,CAAC,CACxB,aAAa,CAAC,MAAM,CACpB,WAAW,CAAC,qDAAqD,CACjE,KAAK,CAAC,CAAC;oBACL,IAAI,EAAE,IAAA,oCAAiB,EAAC,SAAS,CAAsB;oBACvD,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC;oBAC/B,MAAM,EAAE,CAAC,CAAC;iBACX,CAAC,EACF,CACH,CAAC,CACJ;UAAA,CAAC,iCAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;YACjD;gBACE,KAAK,EAAE,6BAAU;gBACjB,MAAM,EAAE,6BAAU;gBAClB,GAAG,EAAE,mCAAgB;gBACrB,IAAI,EAAE,oCAAiB;gBACvB,SAAS,EAAE,CAAC;aACb;YACD,UAAU;SACX,CAAC,CACF,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAE1D;QAAA,EAAE,iCAAQ,CAAC,IAAI,CACjB;MAAA,EAAE,8CAAe,CAEjB;;MAAA,CAAC,eAAe;YACd,eAAe,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACjC,CAAC,wBAAS,CACR,GAAG,CAAC,CAAC,SAAS,SAAS,EAAE,CAAC,CAC1B,KAAK,CAAC,CAAC;oBACL,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC;oBACjC;wBACE,GAAG,EAAE,kCAAe;wBACpB,IAAI,EAAE,IAAA,oCAAiB,EAAC,SAAS,CAAsB;wBACvD,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC;qBACpC;iBACF,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAC1C,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,iBAAiB,CAAC,QAAQ,CAE1B;YAAA,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,kCAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iCAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,gCAAS,CAAC,eAAe,CAAC,CAEjC;cAAA,CAAC,WAAW,CAAC,SAAS,CAAC,CACzB;YAAA,EAAE,WAAI,CACR;UAAA,EAAE,wBAAS,CAAC,CACb,CAAC,CACN;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AA7LW,QAAA,MAAM,UA6LjB;AAEF,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","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.constants.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TICK_THRESHOLDS = exports.DEFAULT_RANGE_LABEL_STEPS = exports.DOT_EDGE_MAX_PERCENT = exports.DOT_EDGE_INSET_PERCENT = exports.SLIDER_TRACK_INSET = exports.SLIDER_BOTTOM_PADDING = exports.SLIDER_LABEL_LINE_HEIGHT = exports.RANGE_LABEL_TOP = exports.SLIDER_VERTICAL_PADDING = exports.THUMB_GRIP_ANIMATION_DURATION = exports.THUMB_GRIP_SCALE = exports.THUMB_TO_LABEL_GAP = exports.THUMB_BOTTOM_OFFSET = exports.THUMB_LEFT_OFFSET = exports.THUMB_TOP_OFFSET = exports.THUMB_SIZE = void 0;
+/** Slider geometry and behavior defaults — not typography or spacing tokens. */
+exports.THUMB_SIZE = 32;
+exports.THUMB_TOP_OFFSET = -13;
+/** Negative offset so the thumb center aligns with the track start at 0%. */
+exports.THUMB_LEFT_OFFSET = -16;
+exports.THUMB_BOTTOM_OFFSET = exports.THUMB_TOP_OFFSET + exports.THUMB_SIZE;
+exports.THUMB_TO_LABEL_GAP = 8;
+/** Scale applied to the thumb while the user is dragging. */
+exports.THUMB_GRIP_SCALE = 1.12;
+/** Duration (ms) for thumb grip scale in/out. */
+exports.THUMB_GRIP_ANIMATION_DURATION = 100;
+/** Matches root `py-2` vertical padding on the slider container. */
+exports.SLIDER_VERTICAL_PADDING = 8;
+exports.RANGE_LABEL_TOP = exports.SLIDER_VERTICAL_PADDING + exports.THUMB_BOTTOM_OFFSET + exports.THUMB_TO_LABEL_GAP;
+/** Approximate line height for BodyMd range labels below the track. */
+exports.SLIDER_LABEL_LINE_HEIGHT = 20;
+/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */
+exports.SLIDER_BOTTOM_PADDING = exports.RANGE_LABEL_TOP + exports.SLIDER_LABEL_LINE_HEIGHT;
+/**
+ * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so
+ * the thumb can overhang at min/max without clipping.
+ */
+exports.SLIDER_TRACK_INSET = Math.abs(exports.THUMB_LEFT_OFFSET);
+/**
+ * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.
+ * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;
+ * a small inset keeps edge markers from sitting under the thumb center.
+ */
+exports.DOT_EDGE_INSET_PERCENT = '2%';
+exports.DOT_EDGE_MAX_PERCENT = '98%';
+exports.DEFAULT_RANGE_LABEL_STEPS = [0, 25, 50, 75, 100];
+exports.DEFAULT_TICK_THRESHOLDS = [25, 50, 75];
+//# sourceMappingURL=Slider.constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.cjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":";;;AAAA,gFAAgF;AACnE,QAAA,UAAU,GAAG,EAAE,CAAC;AAChB,QAAA,gBAAgB,GAAG,CAAC,EAAE,CAAC;AACpC,6EAA6E;AAChE,QAAA,iBAAiB,GAAG,CAAC,EAAE,CAAC;AACxB,QAAA,mBAAmB,GAAG,wBAAgB,GAAG,kBAAU,CAAC;AACpD,QAAA,kBAAkB,GAAG,CAAC,CAAC;AACpC,6DAA6D;AAChD,QAAA,gBAAgB,GAAG,IAAI,CAAC;AACrC,iDAAiD;AACpC,QAAA,6BAA6B,GAAG,GAAG,CAAC;AACjD,oEAAoE;AACvD,QAAA,uBAAuB,GAAG,CAAC,CAAC;AAC5B,QAAA,eAAe,GAC1B,+BAAuB,GAAG,2BAAmB,GAAG,0BAAkB,CAAC;AACrE,uEAAuE;AAC1D,QAAA,wBAAwB,GAAG,EAAE,CAAC;AAC3C,oFAAoF;AACvE,QAAA,qBAAqB,GAAG,uBAAe,GAAG,gCAAwB,CAAC;AAChF;;;GAGG;AACU,QAAA,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,yBAAiB,CAAC,CAAC;AAC9D;;;;GAIG;AACU,QAAA,sBAAsB,GAAG,IAAI,CAAC;AAC9B,QAAA,oBAAoB,GAAG,KAAK,CAAC;AAE7B,QAAA,yBAAyB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAU,CAAC;AAC1D,QAAA,uBAAuB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAC","sourcesContent":["/** Slider geometry and behavior defaults — not typography or spacing tokens. */\nexport const THUMB_SIZE = 32;\nexport const THUMB_TOP_OFFSET = -13;\n/** Negative offset so the thumb center aligns with the track start at 0%. */\nexport const THUMB_LEFT_OFFSET = -16;\nexport const THUMB_BOTTOM_OFFSET = THUMB_TOP_OFFSET + THUMB_SIZE;\nexport const THUMB_TO_LABEL_GAP = 8;\n/** Scale applied to the thumb while the user is dragging. */\nexport const THUMB_GRIP_SCALE = 1.12;\n/** Duration (ms) for thumb grip scale in/out. */\nexport const THUMB_GRIP_ANIMATION_DURATION = 100;\n/** Matches root `py-2` vertical padding on the slider container. */\nexport const SLIDER_VERTICAL_PADDING = 8;\nexport const RANGE_LABEL_TOP =\n  SLIDER_VERTICAL_PADDING + THUMB_BOTTOM_OFFSET + THUMB_TO_LABEL_GAP;\n/** Approximate line height for BodyMd range labels below the track. */\nexport const SLIDER_LABEL_LINE_HEIGHT = 20;\n/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */\nexport const SLIDER_BOTTOM_PADDING = RANGE_LABEL_TOP + SLIDER_LABEL_LINE_HEIGHT;\n/**\n * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so\n * the thumb can overhang at min/max without clipping.\n */\nexport const SLIDER_TRACK_INSET = Math.abs(THUMB_LEFT_OFFSET);\n/**\n * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.\n * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;\n * a small inset keeps edge markers from sitting under the thumb center.\n */\nexport const DOT_EDGE_INSET_PERCENT = '2%';\nexport const DOT_EDGE_MAX_PERCENT = '98%';\n\nexport const DEFAULT_RANGE_LABEL_STEPS = [0, 25, 50, 75, 100] as const;\nexport const DEFAULT_TICK_THRESHOLDS = [25, 50, 75] as const;\n"]}

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

@@ -0,0 +1,33 @@
+/** Slider geometry and behavior defaults — not typography or spacing tokens. */
+export declare const THUMB_SIZE = 32;
+export declare const THUMB_TOP_OFFSET = -13;
+/** Negative offset so the thumb center aligns with the track start at 0%. */
+export declare const THUMB_LEFT_OFFSET = -16;
+export declare const THUMB_BOTTOM_OFFSET: number;
+export declare const THUMB_TO_LABEL_GAP = 8;
+/** Scale applied to the thumb while the user is dragging. */
+export declare const THUMB_GRIP_SCALE = 1.12;
+/** Duration (ms) for thumb grip scale in/out. */
+export declare const THUMB_GRIP_ANIMATION_DURATION = 100;
+/** Matches root `py-2` vertical padding on the slider container. */
+export declare const SLIDER_VERTICAL_PADDING = 8;
+export declare const RANGE_LABEL_TOP: number;
+/** Approximate line height for BodyMd range labels below the track. */
+export declare const SLIDER_LABEL_LINE_HEIGHT = 20;
+/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */
+export declare const SLIDER_BOTTOM_PADDING: number;
+/**
+ * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so
+ * the thumb can overhang at min/max without clipping.
+ */
+export declare const SLIDER_TRACK_INSET: number;
+/**
+ * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.
+ * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;
+ * a small inset keeps edge markers from sitting under the thumb center.
+ */
+export declare const DOT_EDGE_INSET_PERCENT = "2%";
+export declare const DOT_EDGE_MAX_PERCENT = "98%";
+export declare const DEFAULT_RANGE_LABEL_STEPS: readonly [0, 25, 50, 75, 100];
+export declare const DEFAULT_TICK_THRESHOLDS: readonly [25, 50, 75];
+//# sourceMappingURL=Slider.constants.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,mBAAmB,QAAgC,CAAC;AACjE,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,iDAAiD;AACjD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AACjD,oEAAoE;AACpE,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,eAAe,QACwC,CAAC;AACrE,uEAAuE;AACvE,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,oFAAoF;AACpF,eAAO,MAAM,qBAAqB,QAA6C,CAAC;AAChF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAA8B,CAAC;AAC9D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C,eAAO,MAAM,yBAAyB,+BAAgC,CAAC;AACvE,eAAO,MAAM,uBAAuB,uBAAwB,CAAC"}

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

@@ -0,0 +1,33 @@
+/** Slider geometry and behavior defaults — not typography or spacing tokens. */
+export declare const THUMB_SIZE = 32;
+export declare const THUMB_TOP_OFFSET = -13;
+/** Negative offset so the thumb center aligns with the track start at 0%. */
+export declare const THUMB_LEFT_OFFSET = -16;
+export declare const THUMB_BOTTOM_OFFSET: number;
+export declare const THUMB_TO_LABEL_GAP = 8;
+/** Scale applied to the thumb while the user is dragging. */
+export declare const THUMB_GRIP_SCALE = 1.12;
+/** Duration (ms) for thumb grip scale in/out. */
+export declare const THUMB_GRIP_ANIMATION_DURATION = 100;
+/** Matches root `py-2` vertical padding on the slider container. */
+export declare const SLIDER_VERTICAL_PADDING = 8;
+export declare const RANGE_LABEL_TOP: number;
+/** Approximate line height for BodyMd range labels below the track. */
+export declare const SLIDER_LABEL_LINE_HEIGHT = 20;
+/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */
+export declare const SLIDER_BOTTOM_PADDING: number;
+/**
+ * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so
+ * the thumb can overhang at min/max without clipping.
+ */
+export declare const SLIDER_TRACK_INSET: number;
+/**
+ * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.
+ * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;
+ * a small inset keeps edge markers from sitting under the thumb center.
+ */
+export declare const DOT_EDGE_INSET_PERCENT = "2%";
+export declare const DOT_EDGE_MAX_PERCENT = "98%";
+export declare const DEFAULT_RANGE_LABEL_STEPS: readonly [0, 25, 50, 75, 100];
+export declare const DEFAULT_TICK_THRESHOLDS: readonly [25, 50, 75];
+//# sourceMappingURL=Slider.constants.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,mBAAmB,QAAgC,CAAC;AACjE,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,iDAAiD;AACjD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AACjD,oEAAoE;AACpE,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,eAAe,QACwC,CAAC;AACrE,uEAAuE;AACvE,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,oFAAoF;AACpF,eAAO,MAAM,qBAAqB,QAA6C,CAAC;AAChF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAA8B,CAAC;AAC9D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C,eAAO,MAAM,yBAAyB,+BAAgC,CAAC;AACvE,eAAO,MAAM,uBAAuB,uBAAwB,CAAC"}

package/dist/components/Slider/Slider.constants.mjs

@@ -0,0 +1,33 @@
+/** Slider geometry and behavior defaults — not typography or spacing tokens. */
+export const THUMB_SIZE = 32;
+export const THUMB_TOP_OFFSET = -13;
+/** Negative offset so the thumb center aligns with the track start at 0%. */
+export const THUMB_LEFT_OFFSET = -16;
+export const THUMB_BOTTOM_OFFSET = THUMB_TOP_OFFSET + THUMB_SIZE;
+export const THUMB_TO_LABEL_GAP = 8;
+/** Scale applied to the thumb while the user is dragging. */
+export const THUMB_GRIP_SCALE = 1.12;
+/** Duration (ms) for thumb grip scale in/out. */
+export const THUMB_GRIP_ANIMATION_DURATION = 100;
+/** Matches root `py-2` vertical padding on the slider container. */
+export const SLIDER_VERTICAL_PADDING = 8;
+export const RANGE_LABEL_TOP = SLIDER_VERTICAL_PADDING + THUMB_BOTTOM_OFFSET + THUMB_TO_LABEL_GAP;
+/** Approximate line height for BodyMd range labels below the track. */
+export const SLIDER_LABEL_LINE_HEIGHT = 20;
+/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */
+export const SLIDER_BOTTOM_PADDING = RANGE_LABEL_TOP + SLIDER_LABEL_LINE_HEIGHT;
+/**
+ * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so
+ * the thumb can overhang at min/max without clipping.
+ */
+export const SLIDER_TRACK_INSET = Math.abs(THUMB_LEFT_OFFSET);
+/**
+ * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.
+ * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;
+ * a small inset keeps edge markers from sitting under the thumb center.
+ */
+export const DOT_EDGE_INSET_PERCENT = '2%';
+export const DOT_EDGE_MAX_PERCENT = '98%';
+export const DEFAULT_RANGE_LABEL_STEPS = [0, 25, 50, 75, 100];
+export const DEFAULT_TICK_THRESHOLDS = [25, 50, 75];
+//# sourceMappingURL=Slider.constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.mjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;AAC7B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,CAAC;AACpC,6EAA6E;AAC7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,CAAC;AACrC,MAAM,CAAC,MAAM,mBAAmB,GAAG,gBAAgB,GAAG,UAAU,CAAC;AACjE,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AACpC,6DAA6D;AAC7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC;AACrC,iDAAiD;AACjD,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAC;AACjD,oEAAoE;AACpE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,eAAe,GAC1B,uBAAuB,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AACrE,uEAAuE;AACvE,MAAM,CAAC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAC3C,oFAAoF;AACpF,MAAM,CAAC,MAAM,qBAAqB,GAAG,eAAe,GAAG,wBAAwB,CAAC;AAChF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAC9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAU,CAAC;AACvE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAC","sourcesContent":["/** Slider geometry and behavior defaults — not typography or spacing tokens. */\nexport const THUMB_SIZE = 32;\nexport const THUMB_TOP_OFFSET = -13;\n/** Negative offset so the thumb center aligns with the track start at 0%. */\nexport const THUMB_LEFT_OFFSET = -16;\nexport const THUMB_BOTTOM_OFFSET = THUMB_TOP_OFFSET + THUMB_SIZE;\nexport const THUMB_TO_LABEL_GAP = 8;\n/** Scale applied to the thumb while the user is dragging. */\nexport const THUMB_GRIP_SCALE = 1.12;\n/** Duration (ms) for thumb grip scale in/out. */\nexport const THUMB_GRIP_ANIMATION_DURATION = 100;\n/** Matches root `py-2` vertical padding on the slider container. */\nexport const SLIDER_VERTICAL_PADDING = 8;\nexport const RANGE_LABEL_TOP =\n  SLIDER_VERTICAL_PADDING + THUMB_BOTTOM_OFFSET + THUMB_TO_LABEL_GAP;\n/** Approximate line height for BodyMd range labels below the track. */\nexport const SLIDER_LABEL_LINE_HEIGHT = 20;\n/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */\nexport const SLIDER_BOTTOM_PADDING = RANGE_LABEL_TOP + SLIDER_LABEL_LINE_HEIGHT;\n/**\n * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so\n * the thumb can overhang at min/max without clipping.\n */\nexport const SLIDER_TRACK_INSET = Math.abs(THUMB_LEFT_OFFSET);\n/**\n * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.\n * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;\n * a small inset keeps edge markers from sitting under the thumb center.\n */\nexport const DOT_EDGE_INSET_PERCENT = '2%';\nexport const DOT_EDGE_MAX_PERCENT = '98%';\n\nexport const DEFAULT_RANGE_LABEL_STEPS = [0, 25, 50, 75, 100] as const;\nexport const DEFAULT_TICK_THRESHOLDS = [25, 50, 75] as const;\n"]}

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, rangeLabelSteps, showRangeLabels, showRangeDots, onGrip, onTick, tickThresholds, mapValueToTrackPercent, mapTrackPercentToValue, formatStepLabel, stepToValue: stepToValueProp, 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":"AAMA,OAAO,KAAsB,cAAc;AAoB3C,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;AASlD,eAAO,MAAM,MAAM;0TAuBhB,WAAW;;CAsKb,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, rangeLabelSteps, showRangeLabels, showRangeDots, onGrip, onTick, tickThresholds, mapValueToTrackPercent, mapTrackPercentToValue, formatStepLabel, stepToValue: stepToValueProp, 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":"AAMA,OAAO,KAAsB,cAAc;AAoB3C,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;AASlD,eAAO,MAAM,MAAM;0TAuBhB,WAAW;;CAsKb,CAAC"}

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":";;;;;;AAAA,OAAO,EACL,UAAU,EACV,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,QAAO,EAAE,WAAW,EAAE,cAAc;;AAC3C,OAAO,EAA4B,SAAS,EAAE,qBAAqB;AAEnE,OAAO,EAAE,eAAe,EAAE,qCAAqC;AAC/D,OAAO,QAAQ,gCAAgC;AAE/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,eAAe,EACf,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EACjB,+BAA2B;AAE5B,OAAO,EACL,iBAAiB,EACjB,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACzB,+BAA2B;AAC5B,OAAO,EAAE,gBAAgB,EAAE,+BAA2B;AAEtD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,KAAK,EACL,aAAa,EACb,SAAS,EACT,YAAY,GAAG,CAAC,EAChB,YAAY,GAAG,GAAG,EAClB,IAAI,GAAG,CAAC,EACR,UAAU,GAAG,KAAK,EAClB,MAAM,EACN,eAAe,GAAG,yBAAyB,EAC3C,eAAe,GAAG,KAAK,EACvB,aAAa,GAAG,KAAK,EACrB,MAAM,EACN,MAAM,EACN,cAAc,GAAG,uBAAuB,EACxC,sBAAsB,EACtB,sBAAsB,EACtB,eAAe,EACf,WAAW,EAAE,eAAe,EAC5B,UAAU,GAAG,kBAAkB,EAC/B,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACI,EAAE,EAAE;IAChB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,WAAW,GAAG,eAAe,IAAI,sBAAsB,CAAC;IAE9D,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,GACzE,gBAAgB,CAAC;QACf,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,IAAI;QACJ,UAAU;QACV,aAAa;QACb,SAAS;QACT,MAAM;QACN,MAAM;QACN,cAAc;QACd,sBAAsB;QACtB,sBAAsB;QACtB,WAAW,EAAE,eAAe;KAC7B,CAAC,CAAC;IAEL,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAC7B,wBAAwB,CACtB,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,CACvB,CACF,CAAC;QACF,OAAO,GAAG,YAAY,GAAG,CAAC;IAC5B,CAAC,EAAE,CAAC,sBAAsB,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhE,MAAM,yBAAyB,GAAG,WAAW,CAC3C,CAAC,KAA+B,EAAE,EAAE;QAClC,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC1E,MAAM,SAAS,GAAG,iBAAiB,CACjC,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,YAAY,EACZ,IAAI,CACL,CAAC;QAEF,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,aAAa,CAAC,SAAS,CAAC,CAAC;YACzB,SAAS,EAAE,CAAC,SAAS,CAAC,CAAC;SACxB;IACH,CAAC,EACD;QACE,UAAU;QACV,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,aAAa;QACb,IAAI;QACJ,KAAK;KACN,CACF,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CACF,IAAI,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,iBAAiB,CAAC,YAAY,CAC9B,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAC7C,kBAAkB,CAAC,CAAC;YAClB,GAAG,EAAE,YAAY;YACjB,GAAG,EAAE,YAAY;YACjB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,oBAAoB,EAAE;SAC7B,CAAC,CACF,oBAAoB,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CACrE,qBAAqB,CAAC,CAAC,yBAAyB,CAAC,CACjD,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uBAAuB,EACvB,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CACxC;YACD;gBACE,gBAAgB,EAAE,UAAU;gBAC5B,GAAG,CAAC,eAAe,IAAI,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAC;aACjE;YACD,KAAK;SACN,CAAC,CACF,WAAW,CAAC,CAAC,WAAW,CAAC,CAEzB;MAAA,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAChC;QAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAE/D;UAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CACb,+DAA+D,CAChE,CAAC,EAEJ;UAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,4DAA4D,CAC7D;YACD,aAAa;SACd,CAAC,EAEJ;UAAA,CAAC,aAAa;YACZ,eAAe,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACjC,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,OAAO,SAAS,EAAE,CAAC,CACxB,aAAa,CAAC,MAAM,CACpB,WAAW,CAAC,qDAAqD,CACjE,KAAK,CAAC,CAAC;oBACL,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAsB;oBACvD,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC;oBAC/B,MAAM,EAAE,CAAC,CAAC;iBACX,CAAC,EACF,CACH,CAAC,CACJ;UAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,uCAAuC,CAAC;YACjD;gBACE,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,UAAU;gBAClB,GAAG,EAAE,gBAAgB;gBACrB,IAAI,EAAE,iBAAiB;gBACvB,SAAS,EAAE,CAAC;aACb;YACD,UAAU;SACX,CAAC,CACF,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAE1D;QAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;MAAA,EAAE,eAAe,CAEjB;;MAAA,CAAC,eAAe;YACd,eAAe,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACjC,CAAC,SAAS,CACR,GAAG,CAAC,CAAC,SAAS,SAAS,EAAE,CAAC,CAC1B,KAAK,CAAC,CAAC;oBACL,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC;oBACjC;wBACE,GAAG,EAAE,eAAe;wBACpB,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAsB;wBACvD,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC;qBACpC;iBACF,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAC1C,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,iBAAiB,CAAC,QAAQ,CAE1B;YAAA,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAEjC;cAAA,CAAC,WAAW,CAAC,SAAS,CAAC,CACzB;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,SAAS,CAAC,CACb,CAAC,CACN;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","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"]}