npm - @metamask/design-system-react-native - Versions diffs - 0.35.0 → 0.37.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useSliderGesture.cjs","sourceRoot":"","sources":["../../../src/components/Slider/useSliderGesture.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Gesture } from 'react-native-gesture-handler';\nimport {\n Easing,\n runOnJS,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\n\nimport {\n DEFAULT_TICK_THRESHOLDS,\n THUMB_GRIP_ANIMATION_DURATION,\n THUMB_GRIP_SCALE,\n} from './Slider.constants';\nimport type {\n UseSliderGestureParams,\n UseSliderGestureResult,\n} from './Slider.types';\nimport {\n clampGesturePosition,\n defaultStepToValue,\n getTrackPercentFromValue,\n positionToTrackPercent,\n resolveTrackPercentToValue,\n resolveValueToTrackPercent,\n trackPercentToPosition,\n} from './Slider.utilities';\n\n/*\n Owns Slider gesture handling, animated thumb/fill position, and range-label taps.\n \n Flow during drag (UI thread):\n * touch X → clamp to track width → trackPercent → domain value → callbacks\n \n Flow when `value` prop changes (JS thread):\n * domain value → trackPercent → translateX (thumb + progress fill)\n \n `mapValueToTrackPercent` / `mapTrackPercentToValue` must be worklets when provided.\n \n @param params - Gesture configuration and callbacks.\n * @returns Gesture state and handlers for Slider.\n */\nexport function useSliderGesture(\n params: UseSliderGestureParams,\n): UseSliderGestureResult {\n const {\n value,\n minimumValue = 0,\n maximumValue = 100,\n step = 1,\n isDisabled = false,\n onValueChange,\n onDragEnd,\n onGrip,\n onTick,\n tickThresholds = DEFAULT_TICK_THRESHOLDS,\n mapValueToTrackPercent,\n mapTrackPercentToValue,\n stepToValue: stepToValueProp,\n } = params;\n const stepToValue = useMemo(\n () =>\n stepToValueProp ??\n ((rangeStep: number) =>\n defaultStepToValue(rangeStep, minimumValue, maximumValue)),\n [maximumValue, minimumValue, stepToValueProp],\n );\n\n // --- Animated state ---\n\n const sliderWidth = useSharedValue(0);\n const translateX = useSharedValue(0);\n const thumbScale = useSharedValue(1);\n const previousTrackPercentRef = useRef(\n getTrackPercentFromValue(\n value,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n ),\n );\n const isDraggingRef = useRef(false);\n\n // --- Position sync (domain value → thumb pixels) ---\n\n const syncPositionFromValue = useCallback(\n (nextValue: number, width = sliderWidth.value) => {\n const trackPercent = getTrackPercentFromValue(\n nextValue,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n translateX.value = trackPercentToPosition(trackPercent, width);\n },\n [\n mapValueToTrackPercent,\n maximumValue,\n minimumValue,\n sliderWidth,\n translateX,\n ],\n );\n\n const handleLayout = useCallback(\n (event: { nativeEvent: { layout: { width: number } } }) => {\n const { width } = event.nativeEvent.layout;\n sliderWidth.value = width;\n syncPositionFromValue(value, width);\n },\n [sliderWidth, syncPositionFromValue, value],\n );\n\n useEffect(() => {\n syncPositionFromValue(value);\n if (!isDraggingRef.current) {\n previousTrackPercentRef.current = getTrackPercentFromValue(\n value,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n }\n }, [\n mapValueToTrackPercent,\n maximumValue,\n minimumValue,\n syncPositionFromValue,\n value,\n ]);\n\n // --- JS-thread bridges (stable refs for runOnJS from worklets) ---\n\n const emitValueChange = useCallback(\n (nextValue: number) => {\n onValueChange(nextValue);\n },\n [onValueChange],\n );\n\n const emitDragEnd = useCallback(\n (nextValue: number) => {\n onDragEnd?.(nextValue);\n },\n [onDragEnd],\n );\n\n const triggerGrip = useCallback(() => {\n if (!isDisabled) {\n onGrip?.();\n }\n }, [isDisabled, onGrip]);\n\n const setDragging = useCallback((dragging: boolean) => {\n isDraggingRef.current = dragging;\n }, []);\n\n const checkThresholdCrossing = useCallback(\n (newTrackPercent: number) => {\n const prevTrackPercent = previousTrackPercentRef.current;\n\n for (const threshold of tickThresholds) {\n if (\n (prevTrackPercent < threshold && newTrackPercent >= threshold) \|\|\n (prevTrackPercent > threshold && newTrackPercent <= threshold)\n ) {\n onTick?.();\n break;\n }\n }\n\n previousTrackPercentRef.current = newTrackPercent;\n },\n [onTick, tickThresholds],\n );\n\n // --- Animated styles (thumb + fill width follow translateX) ---\n\n const progressStyle = useAnimatedStyle(() => ({\n width: translateX.value,\n }));\n\n const thumbStyle = useAnimatedStyle(() => ({\n transform: [{ translateX: translateX.value }, { scale: thumbScale.value }],\n }));\n\n // --- Pan + tap gestures ---\n\n const gesture = useMemo(() => {\n // Gesture callbacks need explicit 'worklet' directives because this package\n // ships pre-built dist compiled by ts-bridge. The consumer's Reanimated Babel\n // plugin does not auto-detect the compiled namespaced Gesture form.\n\n const gripEasing = Easing.bezier(0.3, 0.8, 0.3, 1);\n\n const positionToDomainValue = (position: number) => {\n 'worklet';\n\n const trackPercent = positionToTrackPercent(position, sliderWidth.value);\n const domainValue = resolveTrackPercentToValue(\n trackPercent,\n minimumValue,\n maximumValue,\n step,\n mapTrackPercentToValue,\n );\n\n return { trackPercent, domainValue };\n };\n\n const snapThumbToValue = (domainValue: number) => {\n 'worklet';\n\n const snappedTrackPercent = resolveValueToTrackPercent(\n domainValue,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n translateX.value = trackPercentToPosition(\n snappedTrackPercent,\n sliderWidth.value,\n );\n };\n\n // Finalize a gesture: emit callbacks, then re-sync thumb to stepped value.\n const commitAtPosition = (\n position: number,\n options: { checkThreshold: boolean; triggerGrip: boolean },\n ) => {\n 'worklet';\n\n translateX.value = position;\n const { trackPercent, domainValue } = positionToDomainValue(position);\n\n runOnJS(emitValueChange)(domainValue);\n if (options.checkThreshold) {\n runOnJS(checkThresholdCrossing)(trackPercent);\n }\n runOnJS(emitDragEnd)(domainValue);\n if (options.triggerGrip) {\n runOnJS(triggerGrip)();\n }\n snapThumbToValue(domainValue);\n };\n\n const panGesture = Gesture.Pan()\n .enabled(!isDisabled)\n .onStart(() => {\n 'worklet';\n\n thumbScale.value = withTiming(THUMB_GRIP_SCALE, {\n duration: THUMB_GRIP_ANIMATION_DURATION,\n easing: gripEasing,\n });\n runOnJS(setDragging)(true);\n runOnJS(triggerGrip)();\n })\n .onUpdate((event) => {\n 'worklet';\n\n const position = clampGesturePosition(event.x, sliderWidth.value);\n translateX.value = position;\n const { trackPercent, domainValue } = positionToDomainValue(position);\n\n runOnJS(emitValueChange)(domainValue);\n runOnJS(checkThresholdCrossing)(trackPercent);\n })\n .onEnd(() => {\n 'worklet';\n\n // Thresholds already checked during onUpdate; grip fires again on release.\n commitAtPosition(translateX.value, {\n checkThreshold: false,\n triggerGrip: true,\n });\n })\n .onFinalize(() => {\n 'worklet';\n\n thumbScale.value = withTiming(1, {\n duration: THUMB_GRIP_ANIMATION_DURATION,\n easing: gripEasing,\n });\n runOnJS(setDragging)(false);\n });\n\n const tapGesture = Gesture.Tap()\n .enabled(!isDisabled)\n .onEnd((event) => {\n 'worklet';\n\n const position = clampGesturePosition(event.x, sliderWidth.value);\n commitAtPosition(position, {\n checkThreshold: true,\n triggerGrip: false,\n });\n });\n\n return Gesture.Simultaneous(tapGesture, panGesture);\n }, [\n checkThresholdCrossing,\n emitDragEnd,\n emitValueChange,\n isDisabled,\n mapTrackPercentToValue,\n mapValueToTrackPercent,\n maximumValue,\n minimumValue,\n setDragging,\n sliderWidth,\n step,\n thumbScale,\n translateX,\n triggerGrip,\n ]);\n\n // --- Range label tap (JS thread; uses stepToValue from Slider.tsx) ---\n\n const handlePressStep = useCallback(\n (rangeStep: number) => {\n if (isDisabled) {\n return;\n }\n\n const newValue = stepToValue(rangeStep);\n onValueChange(newValue);\n const trackPercent = getTrackPercentFromValue(\n newValue,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n checkThresholdCrossing(trackPercent);\n onDragEnd?.(newValue);\n syncPositionFromValue(newValue);\n },\n [\n checkThresholdCrossing,\n isDisabled,\n mapValueToTrackPercent,\n maximumValue,\n minimumValue,\n onDragEnd,\n onValueChange,\n stepToValue,\n syncPositionFromValue,\n ],\n );\n\n return {\n handleLayout,\n progressStyle,\n thumbStyle,\n gesture,\n handlePressStep,\n };\n}\n"]}
1	+ {"version":3,"file":"useSliderGesture.cjs","sourceRoot":"","sources":["../../../src/components/Slider/useSliderGesture.ts"],"names":[],"mappings":";;;AAAA,iCAAgE;AAChE,+EAAuD;AACvD,qEAQiC;AAEjC,6DAG4B;AAK5B,6DAU4B;AAE5B;;;;;;;;;;;;;GAaG;AACH,SAAgB,gBAAgB,CAC9B,MAA8B;IAE9B,MAAM,EACJ,KAAK,EACL,YAAY,GAAG,CAAC,EAChB,YAAY,GAAG,GAAG,EAClB,IAAI,GAAG,CAAC,EACR,UAAU,GAAG,KAAK,EAClB,aAAa,EACb,SAAS,EACT,MAAM,EACN,MAAM,EACN,KAAK,EACL,cAAc,EACd,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,GAAG,MAAM,CAAC;IAEX,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAC9B,GAAG,EAAE,CAAC,IAAA,0CAAuB,EAAC,KAAK,CAAC,EACpC,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,yBAAyB;IAEzB,MAAM,WAAW,GAAG,IAAA,wCAAc,EAAC,CAAC,CAAC,CAAC;IACtC,MAAM,UAAU,GAAG,IAAA,wCAAc,EAAC,CAAC,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,IAAA,wCAAc,EAAC,CAAC,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,IAAA,wCAAc,EAAC,KAAK,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,IAAA,wCAAc,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,uBAAuB,GAAG,IAAA,cAAM,EACpC,IAAA,2CAAwB,EACtB,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,CACvB,CACF,CAAC;IACF,MAAM,aAAa,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAEpC,sDAAsD;IAEtD,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EACvC,CAAC,SAAiB,EAAE,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,EAAE;QAC/C,MAAM,YAAY,GAAG,IAAA,2CAAwB,EAC3C,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,sBAAsB,CACvB,CAAC;QACF,UAAU,CAAC,KAAK,GAAG,IAAA,yCAAsB,EAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IACjE,CAAC,EACD;QACE,sBAAsB;QACtB,YAAY;QACZ,YAAY;QACZ,WAAW;QACX,UAAU;KACX,CACF,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,KAAqD,EAAE,EAAE;QACxD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QAC3C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;QAC1B,qBAAqB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACtC,CAAC,EACD,CAAC,WAAW,EAAE,qBAAqB,EAAE,KAAK,CAAC,CAC5C,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;YAC1B,uBAAuB,CAAC,OAAO,GAAG,IAAA,2CAAwB,EACxD,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,CACvB,CAAC;SACH;IACH,CAAC,EAAE,CAAC,sBAAsB,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3E,IAAA,6CAAmB,EACjB,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,EACrB,CAAC,YAAY,EAAE,aAAa,EAAE,EAAE;QAC9B,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,OAAO;SACR;QAED,IAAI,aAAa,KAAK,IAAI,IAAI,YAAY,KAAK,aAAa,EAAE;YAC5D,OAAO;SACR;QAED,MAAM,YAAY,GAAG,IAAA,6CAA0B,EAC7C,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,sBAAsB,CACvB,CAAC;QACF,UAAU,CAAC,KAAK,GAAG,IAAA,yCAAsB,EACvC,YAAY,EACZ,WAAW,CAAC,KAAK,CAClB,CAAC;IACJ,CAAC,EACD,CAAC,sBAAsB,EAAE,YAAY,EAAE,YAAY,CAAC,CACrD,CAAC;IAEF,oEAAoE;IAEpE,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,SAAiB,EAAE,EAAE;QACpB,aAAa,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,SAAiB,EAAE,EAAE;QACpB,SAAS,EAAE,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,IAAI,CAAC,UAAU,EAAE;YACf,MAAM,EAAE,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzB,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,CAAC,QAAiB,EAAE,EAAE;QACpD,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,sBAAsB,GAAG,IAAA,mBAAW,EACxC,CAAC,eAAuB,EAAE,EAAE;QAC1B,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,OAAO,CAAC;QAEzD,KAAK,MAAM,SAAS,IAAI,gBAAgB,EAAE;YACxC,IACE,CAAC,gBAAgB,GAAG,SAAS,IAAI,eAAe,IAAI,SAAS,CAAC;gBAC9D,CAAC,gBAAgB,GAAG,SAAS,IAAI,eAAe,IAAI,SAAS,CAAC,EAC9D;gBACA,MAAM,EAAE,EAAE,CAAC;gBACX,MAAM;aACP;SACF;QAED,uBAAuB,CAAC,OAAO,GAAG,eAAe,CAAC;IACpD,CAAC,EACD,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAC3B,CAAC;IAEF,iEAAiE;IAEjE,MAAM,eAAe,GAAG,IAAA,yCAAe,EAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,IAAA,uCAAoB,EACzB,IAAA,yCAAsB,EAAC,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,EAC3D,cAAc,CACf,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,IAAA,yCAAe,EAAC,GAAG,EAAE;QAC5C,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,IAAA,uCAAoB,EACzB,IAAA,yCAAsB,EAAC,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,EAC3D,eAAe,CAChB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAA,0CAAgB,EACpC,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,GAAG,CAAC,eAAe,IAAI;YACrB,eAAe,EAAE,eAAe,CAAC,KAAK;SACvC,CAAC;KACH,CAAC,EACF,CAAC,cAAc,EAAE,eAAe,CAAC,CAClC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,0CAAgB,EACjC,GAAG,EAAE,CAAC,CAAC;QACL,SAAS,EAAE;YACT,EAAE,UAAU,EAAE,UAAU,CAAC,KAAK,EAAE;YAChC,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE;SAC5B;QACD,GAAG,CAAC,eAAe,IAAI;YACrB,eAAe,EAAE,gBAAgB,CAAC,KAAK;SACxC,CAAC;KACH,CAAC,EACF,CAAC,eAAe,EAAE,eAAe,CAAC,CACnC,CAAC;IAEF,6BAA6B;IAE7B,MAAM,OAAO,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC3B,4EAA4E;QAC5E,8EAA8E;QAC9E,oEAAoE;QAEpE,MAAM,UAAU,GAAG,gCAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QAEnD,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE;YACjD,SAAS,CAAC;YAEV,MAAM,YAAY,GAAG,IAAA,yCAAsB,EAAC,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;YACzE,MAAM,WAAW,GAAG,IAAA,6CAA0B,EAC5C,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,sBAAsB,CACvB,CAAC;YAEF,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;QACvC,CAAC,CAAC;QAEF,MAAM,gBAAgB,GAAG,CAAC,WAAmB,EAAE,EAAE;YAC/C,SAAS,CAAC;YAEV,MAAM,mBAAmB,GAAG,IAAA,6CAA0B,EACpD,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,sBAAsB,CACvB,CAAC;YACF,UAAU,CAAC,KAAK,GAAG,IAAA,yCAAsB,EACvC,mBAAmB,EACnB,WAAW,CAAC,KAAK,CAClB,CAAC;QACJ,CAAC,CAAC;QAEF,2EAA2E;QAC3E,MAAM,gBAAgB,GAAG,CACvB,QAAgB,EAChB,OAA0D,EAC1D,EAAE;YACF,SAAS,CAAC;YAEV,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAC;YAC5B,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAEtE,IAAA,iCAAO,EAAC,eAAe,CAAC,CAAC,WAAW,CAAC,CAAC;YACtC,IAAI,OAAO,CAAC,cAAc,EAAE;gBAC1B,IAAA,iCAAO,EAAC,sBAAsB,CAAC,CAAC,YAAY,CAAC,CAAC;aAC/C;YACD,IAAA,iCAAO,EAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;YAClC,IAAI,OAAO,CAAC,WAAW,EAAE;gBACvB,IAAA,iCAAO,EAAC,WAAW,CAAC,EAAE,CAAC;aACxB;YACD,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,sCAAO,CAAC,GAAG,EAAE;aAC7B,OAAO,CAAC,CAAC,UAAU,CAAC;aACpB,OAAO,CAAC,GAAG,EAAE;YACZ,SAAS,CAAC;YAEV,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC;YACxB,UAAU,CAAC,KAAK,GAAG,IAAA,oCAAU,EAAC,mCAAgB,EAAE;gBAC9C,QAAQ,EAAE,gDAA6B;gBACvC,MAAM,EAAE,UAAU;aACnB,CAAC,CAAC;YACH,IAAA,iCAAO,EAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAA,iCAAO,EAAC,WAAW,CAAC,EAAE,CAAC;QACzB,CAAC,CAAC;aACD,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;YAClB,SAAS,CAAC;YAEV,MAAM,QAAQ,GAAG,IAAA,uCAAoB,EAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;YAClE,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAC;YAC5B,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAEtE,IAAA,iCAAO,EAAC,eAAe,CAAC,CAAC,WAAW,CAAC,CAAC;YACtC,IAAA,iCAAO,EAAC,sBAAsB,CAAC,CAAC,YAAY,CAAC,CAAC;QAChD,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,SAAS,CAAC;YAEV,2EAA2E;YAC3E,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE;gBACjC,cAAc,EAAE,KAAK;gBACrB,WAAW,EAAE,IAAI;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;aACD,UAAU,CAAC,GAAG,EAAE;YACf,SAAS,CAAC;YAEV,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC;YACzB,UAAU,CAAC,KAAK,GAAG,IAAA,oCAAU,EAAC,CAAC,EAAE;gBAC/B,QAAQ,EAAE,gDAA6B;gBACvC,MAAM,EAAE,UAAU;aACnB,CAAC,CAAC;YACH,IAAA,iCAAO,EAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEL,MAAM,UAAU,GAAG,sCAAO,CAAC,GAAG,EAAE;aAC7B,OAAO,CAAC,CAAC,UAAU,CAAC;aACpB,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,SAAS,CAAC;YAEV,MAAM,QAAQ,GAAG,IAAA,uCAAoB,EAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;YAClE,gBAAgB,CAAC,QAAQ,EAAE;gBACzB,cAAc,EAAE,IAAI;gBACpB,WAAW,EAAE,KAAK;aACnB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEL,OAAO,sCAAO,CAAC,YAAY,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IACtD,CAAC,EAAE;QACD,sBAAsB;QACtB,WAAW;QACX,eAAe;QACf,UAAU;QACV,UAAU;QACV,sBAAsB;QACtB,sBAAsB;QACtB,YAAY;QACZ,YAAY;QACZ,WAAW;QACX,WAAW;QACX,IAAI;QACJ,UAAU;QACV,UAAU;QACV,WAAW;KACZ,CAAC,CAAC;IAEH,sCAAsC;IAEtC,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,SAAiB,EAAE,EAAE;QACpB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QAED,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,IAAA,+BAAY,EAAC,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;QAChE,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,MAAM,YAAY,GAAG,IAAA,2CAAwB,EAC3C,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,sBAAsB,CACvB,CAAC;QACF,sBAAsB,CAAC,YAAY,CAAC,CAAC;QACrC,SAAS,EAAE,CAAC,QAAQ,CAAC,CAAC;QACtB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC,EACD;QACE,sBAAsB;QACtB,UAAU;QACV,sBAAsB;QACtB,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,aAAa;QACb,qBAAqB;QACrB,KAAK;KACN,CACF,CAAC;IAEF,OAAO;QACL,YAAY;QACZ,aAAa;QACb,UAAU;QACV,OAAO;QACP,eAAe;KAChB,CAAC;AACJ,CAAC;AA7XD,4CA6XC","sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Gesture } from 'react-native-gesture-handler';\nimport {\n Easing,\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\n\nimport {\n THUMB_GRIP_ANIMATION_DURATION,\n THUMB_GRIP_SCALE,\n} from './Slider.constants';\nimport type {\n UseSliderGestureParams,\n UseSliderGestureResult,\n} from './Slider.types';\nimport {\n clampGesturePosition,\n getMarkHapticThresholds,\n getMarkValue,\n getTrackPercentFromValue,\n interpolateMarkColor,\n positionToTrackPercent,\n resolveTrackPercentToValue,\n resolveValueToTrackPercent,\n trackPercentToPosition,\n} from './Slider.utilities';\n\n/*\n Owns Slider gesture handling, animated thumb/fill position, and range-label taps.\n \n Flow during drag (UI thread):\n * touch X → clamp to track width → trackPercent → domain value → callbacks\n \n Flow when `value` prop changes (JS thread → UI thread via useAnimatedReaction):\n * domain value → trackPercent → translateX (skipped while dragging)\n \n `mapValueToTrackPercent` / `mapTrackPercentToValue` must be worklets when provided.\n \n @param params - Gesture configuration and callbacks.\n * @returns Gesture state and handlers for Slider.\n */\nexport function useSliderGesture(\n params: UseSliderGestureParams,\n): UseSliderGestureResult {\n const {\n value,\n minimumValue = 0,\n maximumValue = 100,\n step = 1,\n isDisabled = false,\n onValueChange,\n onDragEnd,\n onGrip,\n onMark,\n marks,\n fillColorStops,\n thumbColorStops,\n hasThemedColors,\n mapValueToTrackPercent,\n mapTrackPercentToValue,\n } = params;\n\n const hapticThresholds = useMemo(\n () => getMarkHapticThresholds(marks),\n [marks],\n );\n\n // --- Animated state ---\n\n const sliderWidth = useSharedValue(0);\n const translateX = useSharedValue(0);\n const thumbScale = useSharedValue(1);\n const isDragging = useSharedValue(false);\n const propValue = useSharedValue(value);\n const previousTrackPercentRef = useRef(\n getTrackPercentFromValue(\n value,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n ),\n );\n const isDraggingRef = useRef(false);\n\n // --- Position sync (domain value → thumb pixels) ---\n\n const syncPositionFromValue = useCallback(\n (nextValue: number, width = sliderWidth.value) => {\n const trackPercent = getTrackPercentFromValue(\n nextValue,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n translateX.value = trackPercentToPosition(trackPercent, width);\n },\n [\n mapValueToTrackPercent,\n maximumValue,\n minimumValue,\n sliderWidth,\n translateX,\n ],\n );\n\n const handleLayout = useCallback(\n (event: { nativeEvent: { layout: { width: number } } }) => {\n const { width } = event.nativeEvent.layout;\n sliderWidth.value = width;\n syncPositionFromValue(value, width);\n },\n [sliderWidth, syncPositionFromValue, value],\n );\n\n useEffect(() => {\n propValue.value = value;\n if (!isDraggingRef.current) {\n previousTrackPercentRef.current = getTrackPercentFromValue(\n value,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n }\n }, [mapValueToTrackPercent, maximumValue, minimumValue, propValue, value]);\n\n useAnimatedReaction(\n () => propValue.value,\n (currentValue, previousValue) => {\n if (isDragging.value) {\n return;\n }\n\n if (previousValue !== null && currentValue === previousValue) {\n return;\n }\n\n const trackPercent = resolveValueToTrackPercent(\n currentValue,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n translateX.value = trackPercentToPosition(\n trackPercent,\n sliderWidth.value,\n );\n },\n [mapValueToTrackPercent, maximumValue, minimumValue],\n );\n\n // --- JS-thread bridges (stable refs for runOnJS from worklets) ---\n\n const emitValueChange = useCallback(\n (nextValue: number) => {\n onValueChange(nextValue);\n },\n [onValueChange],\n );\n\n const emitDragEnd = useCallback(\n (nextValue: number) => {\n onDragEnd?.(nextValue);\n },\n [onDragEnd],\n );\n\n const triggerGrip = useCallback(() => {\n if (!isDisabled) {\n onGrip?.();\n }\n }, [isDisabled, onGrip]);\n\n const setDragging = useCallback((dragging: boolean) => {\n isDraggingRef.current = dragging;\n }, []);\n\n const checkThresholdCrossing = useCallback(\n (newTrackPercent: number) => {\n const prevTrackPercent = previousTrackPercentRef.current;\n\n for (const threshold of hapticThresholds) {\n if (\n (prevTrackPercent < threshold && newTrackPercent >= threshold) \|\|\n (prevTrackPercent > threshold && newTrackPercent <= threshold)\n ) {\n onMark?.();\n break;\n }\n }\n\n previousTrackPercentRef.current = newTrackPercent;\n },\n [hapticThresholds, onMark],\n );\n\n // --- Animated styles (thumb + fill width follow translateX) ---\n\n const activeFillColor = useDerivedValue(() => {\n if (!hasThemedColors) {\n return undefined;\n }\n\n return interpolateMarkColor(\n positionToTrackPercent(translateX.value, sliderWidth.value),\n fillColorStops,\n );\n });\n\n const activeThumbColor = useDerivedValue(() => {\n if (!hasThemedColors) {\n return undefined;\n }\n\n return interpolateMarkColor(\n positionToTrackPercent(translateX.value, sliderWidth.value),\n thumbColorStops,\n );\n });\n\n const progressStyle = useAnimatedStyle(\n () => ({\n width: translateX.value,\n ...(hasThemedColors && {\n backgroundColor: activeFillColor.value,\n }),\n }),\n [fillColorStops, hasThemedColors],\n );\n\n const thumbStyle = useAnimatedStyle(\n () => ({\n transform: [\n { translateX: translateX.value },\n { scale: thumbScale.value },\n ],\n ...(hasThemedColors && {\n backgroundColor: activeThumbColor.value,\n }),\n }),\n [hasThemedColors, thumbColorStops],\n );\n\n // --- Pan + tap gestures ---\n\n const gesture = useMemo(() => {\n // Gesture callbacks need explicit 'worklet' directives because this package\n // ships pre-built dist compiled by ts-bridge. The consumer's Reanimated Babel\n // plugin does not auto-detect the compiled namespaced Gesture form.\n\n const gripEasing = Easing.bezier(0.3, 0.8, 0.3, 1);\n\n const positionToDomainValue = (position: number) => {\n 'worklet';\n\n const trackPercent = positionToTrackPercent(position, sliderWidth.value);\n const domainValue = resolveTrackPercentToValue(\n trackPercent,\n minimumValue,\n maximumValue,\n step,\n mapTrackPercentToValue,\n );\n\n return { trackPercent, domainValue };\n };\n\n const snapThumbToValue = (domainValue: number) => {\n 'worklet';\n\n const snappedTrackPercent = resolveValueToTrackPercent(\n domainValue,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n translateX.value = trackPercentToPosition(\n snappedTrackPercent,\n sliderWidth.value,\n );\n };\n\n // Finalize a gesture: emit callbacks, then re-sync thumb to stepped value.\n const commitAtPosition = (\n position: number,\n options: { checkThreshold: boolean; triggerGrip: boolean },\n ) => {\n 'worklet';\n\n translateX.value = position;\n const { trackPercent, domainValue } = positionToDomainValue(position);\n\n runOnJS(emitValueChange)(domainValue);\n if (options.checkThreshold) {\n runOnJS(checkThresholdCrossing)(trackPercent);\n }\n runOnJS(emitDragEnd)(domainValue);\n if (options.triggerGrip) {\n runOnJS(triggerGrip)();\n }\n snapThumbToValue(domainValue);\n };\n\n const panGesture = Gesture.Pan()\n .enabled(!isDisabled)\n .onStart(() => {\n 'worklet';\n\n isDragging.value = true;\n thumbScale.value = withTiming(THUMB_GRIP_SCALE, {\n duration: THUMB_GRIP_ANIMATION_DURATION,\n easing: gripEasing,\n });\n runOnJS(setDragging)(true);\n runOnJS(triggerGrip)();\n })\n .onUpdate((event) => {\n 'worklet';\n\n const position = clampGesturePosition(event.x, sliderWidth.value);\n translateX.value = position;\n const { trackPercent, domainValue } = positionToDomainValue(position);\n\n runOnJS(emitValueChange)(domainValue);\n runOnJS(checkThresholdCrossing)(trackPercent);\n })\n .onEnd(() => {\n 'worklet';\n\n // Thresholds already checked during onUpdate; grip fires again on release.\n commitAtPosition(translateX.value, {\n checkThreshold: false,\n triggerGrip: true,\n });\n })\n .onFinalize(() => {\n 'worklet';\n\n isDragging.value = false;\n thumbScale.value = withTiming(1, {\n duration: THUMB_GRIP_ANIMATION_DURATION,\n easing: gripEasing,\n });\n runOnJS(setDragging)(false);\n });\n\n const tapGesture = Gesture.Tap()\n .enabled(!isDisabled)\n .onEnd((event) => {\n 'worklet';\n\n const position = clampGesturePosition(event.x, sliderWidth.value);\n commitAtPosition(position, {\n checkThreshold: true,\n triggerGrip: false,\n });\n });\n\n return Gesture.Simultaneous(tapGesture, panGesture);\n }, [\n checkThresholdCrossing,\n emitDragEnd,\n emitValueChange,\n isDisabled,\n isDragging,\n mapTrackPercentToValue,\n mapValueToTrackPercent,\n maximumValue,\n minimumValue,\n setDragging,\n sliderWidth,\n step,\n thumbScale,\n translateX,\n triggerGrip,\n ]);\n\n // --- Range label tap (JS thread) ---\n\n const handlePressStep = useCallback(\n (rangeStep: number) => {\n if (isDisabled) {\n return;\n }\n\n const mark = marks.find((entry) => entry.step === rangeStep);\n if (!mark) {\n return;\n }\n\n const newValue = getMarkValue(mark, minimumValue, maximumValue);\n onValueChange(newValue);\n const trackPercent = getTrackPercentFromValue(\n newValue,\n minimumValue,\n maximumValue,\n mapValueToTrackPercent,\n );\n checkThresholdCrossing(trackPercent);\n onDragEnd?.(newValue);\n syncPositionFromValue(newValue);\n },\n [\n checkThresholdCrossing,\n isDisabled,\n mapValueToTrackPercent,\n maximumValue,\n minimumValue,\n onDragEnd,\n onValueChange,\n syncPositionFromValue,\n marks,\n ],\n );\n\n return {\n handleLayout,\n progressStyle,\n thumbStyle,\n gesture,\n handlePressStep,\n };\n}\n"]}

package/dist/components/Slider/useSliderGesture.d.cts CHANGED Viewed

@@ -5,8 +5,8 @@ import type { UseSliderGestureParams, UseSliderGestureResult } from "./Slider.ty
  * Flow during drag (UI thread):
  *   touch X → clamp to track width → trackPercent → domain value → callbacks
  *
- * Flow when `value` prop changes (JS thread):
- *   domain value → trackPercent → translateX (thumb + progress fill)
+ * Flow when `value` prop changes (JS thread → UI thread via useAnimatedReaction):
+ *   domain value → trackPercent → translateX (skipped while dragging)
  *
  * `mapValueToTrackPercent` / `mapTrackPercentToValue` must be worklets when provided.
  *

package/dist/components/Slider/useSliderGesture.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSliderGesture.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/useSliderGesture.ts"],"names":[],"mappings":"~~AAeA~~,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EACvB,2BAAuB;~~AAWxB~~;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,sBAAsB,GAC7B,sBAAsB,~~CAyTxB~~"}
1	+ {"version":3,"file":"useSliderGesture.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/useSliderGesture.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EACvB,2BAAuB;AAaxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,sBAAsB,GAC7B,sBAAsB,CA2XxB"}

package/dist/components/Slider/useSliderGesture.d.mts CHANGED Viewed

@@ -5,8 +5,8 @@ import type { UseSliderGestureParams, UseSliderGestureResult } from "./Slider.ty
  * Flow during drag (UI thread):
  *   touch X → clamp to track width → trackPercent → domain value → callbacks
  *
- * Flow when `value` prop changes (JS thread):
- *   domain value → trackPercent → translateX (thumb + progress fill)
+ * Flow when `value` prop changes (JS thread → UI thread via useAnimatedReaction):
+ *   domain value → trackPercent → translateX (skipped while dragging)
  *
  * `mapValueToTrackPercent` / `mapTrackPercentToValue` must be worklets when provided.
  *

package/dist/components/Slider/useSliderGesture.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSliderGesture.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/useSliderGesture.ts"],"names":[],"mappings":"~~AAeA~~,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EACvB,2BAAuB;~~AAWxB~~;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,sBAAsB,GAC7B,sBAAsB,~~CAyTxB~~"}
1	+ {"version":3,"file":"useSliderGesture.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/useSliderGesture.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EACvB,2BAAuB;AAaxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,sBAAsB,GAC7B,sBAAsB,CA2XxB"}

package/dist/components/Slider/useSliderGesture.mjs CHANGED Viewed

@@ -1,16 +1,16 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Gesture } from "react-native-gesture-handler";
-import { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { DEFAULT_TICK_THRESHOLDS, THUMB_GRIP_ANIMATION_DURATION, THUMB_GRIP_SCALE } from "./Slider.constants.mjs";
-import { clampGesturePosition, defaultStepToValue, getTrackPercentFromValue, positionToTrackPercent, resolveTrackPercentToValue, resolveValueToTrackPercent, trackPercentToPosition } from "./Slider.utilities.mjs";
+import { Easing, runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
+import { THUMB_GRIP_ANIMATION_DURATION, THUMB_GRIP_SCALE } from "./Slider.constants.mjs";
+import { clampGesturePosition, getMarkHapticThresholds, getMarkValue, getTrackPercentFromValue, interpolateMarkColor, positionToTrackPercent, resolveTrackPercentToValue, resolveValueToTrackPercent, trackPercentToPosition } from "./Slider.utilities.mjs";
 /**
  * Owns Slider gesture handling, animated thumb/fill position, and range-label taps.
  *
  * Flow during drag (UI thread):
  *   touch X → clamp to track width → trackPercent → domain value → callbacks
  *
- * Flow when `value` prop changes (JS thread):
- *   domain value → trackPercent → translateX (thumb + progress fill)
+ * Flow when `value` prop changes (JS thread → UI thread via useAnimatedReaction):
+ *   domain value → trackPercent → translateX (skipped while dragging)
  *
  * `mapValueToTrackPercent` / `mapTrackPercentToValue` must be worklets when provided.
  *
@@ -18,13 +18,14 @@ import { clampGesturePosition, defaultStepToValue, getTrackPercentFromValue, pos
  * @returns Gesture state and handlers for Slider.
  */
 export function useSliderGesture(params) {
-    const { value, minimumValue = 0, maximumValue = 100, step = 1, isDisabled = false, onValueChange, onDragEnd, onGrip, onTick, tickThresholds = DEFAULT_TICK_THRESHOLDS, mapValueToTrackPercent, mapTrackPercentToValue, stepToValue: stepToValueProp, } = params;
-    const stepToValue = useMemo(() => stepToValueProp ??
-        ((rangeStep) => defaultStepToValue(rangeStep, minimumValue, maximumValue)), [maximumValue, minimumValue, stepToValueProp]);
+    const { value, minimumValue = 0, maximumValue = 100, step = 1, isDisabled = false, onValueChange, onDragEnd, onGrip, onMark, marks, fillColorStops, thumbColorStops, hasThemedColors, mapValueToTrackPercent, mapTrackPercentToValue, } = params;
+    const hapticThresholds = useMemo(() => getMarkHapticThresholds(marks), [marks]);
     // --- Animated state ---
     const sliderWidth = useSharedValue(0);
     const translateX = useSharedValue(0);
     const thumbScale = useSharedValue(1);
+    const isDragging = useSharedValue(false);
+    const propValue = useSharedValue(value);
     const previousTrackPercentRef = useRef(getTrackPercentFromValue(value, minimumValue, maximumValue, mapValueToTrackPercent));
     const isDraggingRef = useRef(false);
     // --- Position sync (domain value → thumb pixels) ---
@@ -44,17 +45,21 @@ export function useSliderGesture(params) {
         syncPositionFromValue(value, width);
     }, [sliderWidth, syncPositionFromValue, value]);
     useEffect(() => {
-        syncPositionFromValue(value);
+        propValue.value = value;
         if (!isDraggingRef.current) {
             previousTrackPercentRef.current = getTrackPercentFromValue(value, minimumValue, maximumValue, mapValueToTrackPercent);
         }
-    }, [
-        mapValueToTrackPercent,
-        maximumValue,
-        minimumValue,
-        syncPositionFromValue,
-        value,
-    ]);
+    }, [mapValueToTrackPercent, maximumValue, minimumValue, propValue, value]);
+    useAnimatedReaction(() => propValue.value, (currentValue, previousValue) => {
+        if (isDragging.value) {
+            return;
+        }
+        if (previousValue !== null && currentValue === previousValue) {
+            return;
+        }
+        const trackPercent = resolveValueToTrackPercent(currentValue, minimumValue, maximumValue, mapValueToTrackPercent);
+        translateX.value = trackPercentToPosition(trackPercent, sliderWidth.value);
+    }, [mapValueToTrackPercent, maximumValue, minimumValue]);
     // --- JS-thread bridges (stable refs for runOnJS from worklets) ---
     const emitValueChange = useCallback((nextValue) => {
         onValueChange(nextValue);
@@ -72,22 +77,43 @@ export function useSliderGesture(params) {
     }, []);
     const checkThresholdCrossing = useCallback((newTrackPercent) => {
         const prevTrackPercent = previousTrackPercentRef.current;
-        for (const threshold of tickThresholds) {
+        for (const threshold of hapticThresholds) {
             if ((prevTrackPercent < threshold && newTrackPercent >= threshold) ||
                 (prevTrackPercent > threshold && newTrackPercent <= threshold)) {
-                onTick?.();
+                onMark?.();
                 break;
             }
         }
         previousTrackPercentRef.current = newTrackPercent;
-    }, [onTick, tickThresholds]);
+    }, [hapticThresholds, onMark]);
     // --- Animated styles (thumb + fill width follow translateX) ---
+    const activeFillColor = useDerivedValue(() => {
+        if (!hasThemedColors) {
+            return undefined;
+        }
+        return interpolateMarkColor(positionToTrackPercent(translateX.value, sliderWidth.value), fillColorStops);
+    });
+    const activeThumbColor = useDerivedValue(() => {
+        if (!hasThemedColors) {
+            return undefined;
+        }
+        return interpolateMarkColor(positionToTrackPercent(translateX.value, sliderWidth.value), thumbColorStops);
+    });
     const progressStyle = useAnimatedStyle(() => ({
         width: translateX.value,
-    }));
+        ...(hasThemedColors && {
+            backgroundColor: activeFillColor.value,
+        }),
+    }), [fillColorStops, hasThemedColors]);
     const thumbStyle = useAnimatedStyle(() => ({
-        transform: [{ translateX: translateX.value }, { scale: thumbScale.value }],
-    }));
+        transform: [
+            { translateX: translateX.value },
+            { scale: thumbScale.value },
+        ],
+        ...(hasThemedColors && {
+            backgroundColor: activeThumbColor.value,
+        }),
+    }), [hasThemedColors, thumbColorStops]);
     // --- Pan + tap gestures ---
     const gesture = useMemo(() => {
         // Gesture callbacks need explicit 'worklet' directives because this package
@@ -124,6 +150,7 @@ export function useSliderGesture(params) {
             .enabled(!isDisabled)
             .onStart(() => {
             'worklet';
+            isDragging.value = true;
             thumbScale.value = withTiming(THUMB_GRIP_SCALE, {
                 duration: THUMB_GRIP_ANIMATION_DURATION,
                 easing: gripEasing,
@@ -149,6 +176,7 @@ export function useSliderGesture(params) {
         })
             .onFinalize(() => {
             'worklet';
+            isDragging.value = false;
             thumbScale.value = withTiming(1, {
                 duration: THUMB_GRIP_ANIMATION_DURATION,
                 easing: gripEasing,
@@ -171,6 +199,7 @@ export function useSliderGesture(params) {
         emitDragEnd,
         emitValueChange,
         isDisabled,
+        isDragging,
         mapTrackPercentToValue,
         mapValueToTrackPercent,
         maximumValue,
@@ -182,12 +211,16 @@ export function useSliderGesture(params) {
         translateX,
         triggerGrip,
     ]);
-    // --- Range label tap (JS thread; uses stepToValue from Slider.tsx) ---
+    // --- Range label tap (JS thread) ---
     const handlePressStep = useCallback((rangeStep) => {
         if (isDisabled) {
             return;
         }
-        const newValue = stepToValue(rangeStep);
+        const mark = marks.find((entry) => entry.step === rangeStep);
+        if (!mark) {
+            return;
+        }
+        const newValue = getMarkValue(mark, minimumValue, maximumValue);
         onValueChange(newValue);
         const trackPercent = getTrackPercentFromValue(newValue, minimumValue, maximumValue, mapValueToTrackPercent);
         checkThresholdCrossing(trackPercent);
@@ -201,8 +234,8 @@ export function useSliderGesture(params) {
         minimumValue,
         onDragEnd,
         onValueChange,
-        stepToValue,
         syncPositionFromValue,
+        marks,
     ]);
     return {
         handleLayout,

package/dist/components/Slider/useSliderGesture.mjs.map CHANGED Viewed

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

package/dist/components/Toast/Toast.cjs CHANGED Viewed

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toast = void 0;
 // Third party dependencies.
 const design_system_shared_1 = require("@metamask/design-system-shared");
+const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
+const design_tokens_1 = require("@metamask/design-tokens");
 const react_1 = __importDefault(require("react"));
 // External dependencies.
 const BannerBase_1 = require("../BannerBase/index.cjs");
@@ -23,7 +25,9 @@ const renderSeverityAccessory = ({ iconAlertProps, severity, startAccessory, })
     const iconAlertSeverity = Toast_constants_1.TOAST_SEVERITY_ICON_MAP[severity];
     return (<IconAlert_1.IconAlert severity={iconAlertSeverity} size={design_system_shared_1.IconSize.Lg} {...iconAlertProps}/>);
 };
-const Toast = ({ actionButtonLabel, actionButtonOnPress, actionButtonProps, children, childrenWrapperProps, closeButtonProps, description, descriptionProps, onClose, iconAlertProps, severity = Toast_types_1.ToastSeverity.Default, startAccessory, title, titleProps, twClassName, ...props }) => {
+const Toast = ({ actionButtonLabel, actionButtonOnPress, actionButtonProps, children, childrenWrapperProps, closeButtonProps, description, descriptionProps, onClose, iconAlertProps, severity = Toast_types_1.ToastSeverity.Default, startAccessory, style, title, titleProps, twClassName, ...props }) => {
+    const theme = (0, design_system_twrnc_preset_1.useTheme)();
+    const isLightTheme = theme === design_system_twrnc_preset_1.Theme.Light;
     const actionProps = actionButtonLabel && actionButtonOnPress
         ? {
             actionButtonLabel,
@@ -42,11 +46,16 @@ const Toast = ({ actionButtonLabel, actionButtonOnPress, actionButtonProps, chil
             ...closeButtonProps,
         }
         : undefined;
-    return (<BannerBase_1.BannerBase {...actionProps} {...props} backgroundColor={design_system_shared_1.BoxBackgroundColor.BackgroundSection} borderColor={design_system_shared_1.BoxBorderColor.BorderMuted} borderWidth={1} children={children} childrenWrapperProps={childrenWrapperProps} closeButtonProps={resolvedCloseButtonProps} description={description} descriptionProps={descriptionProps} onClose={onClose} startAccessory={renderSeverityAccessory({
+    return (<BannerBase_1.BannerBase {...actionProps} {...props} backgroundColor={isLightTheme
+            ? design_system_shared_1.BoxBackgroundColor.BackgroundDefault
+            : design_system_shared_1.BoxBackgroundColor.BackgroundSection} borderColor={design_system_shared_1.BoxBorderColor.BorderMuted} borderWidth={1} children={children} childrenWrapperProps={childrenWrapperProps} closeButtonProps={resolvedCloseButtonProps} description={description} descriptionProps={{
+            color: design_system_shared_1.TextColor.TextAlternative,
+            ...descriptionProps,
+        }} onClose={onClose} startAccessory={renderSeverityAccessory({
             iconAlertProps,
             severity,
             startAccessory,
-        })} title={title} titleProps={titleProps} twClassName={(0, design_system_shared_1.mergeTwClassName)('rounded-xl', twClassName)}/>);
+        })} style={[isLightTheme ? design_tokens_1.lightTheme.shadows.size.md : undefined, style]} title={title} titleProps={titleProps} twClassName={(0, design_system_shared_1.mergeTwClassName)('rounded-2xl', twClassName)}/>);
 };
 exports.Toast = Toast;
 //# sourceMappingURL=Toast.cjs.map

package/dist/components/Toast/Toast.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,~~yEAMwC~~;AACxC,kDAA0B;AAE1B,yBAAyB;AACzB,wDAA2C;AAC3C,sDAAyC;AAEzC,yBAAyB;AACzB,2DAA4D;AAC5D,mDAA8C;AAG9C,MAAM,uBAAuB,GAAG,CAAC,EAC/B,cAAc,EACd,QAAQ,EACR,cAAc,GACqD,EAAE,EAAE;IACvE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,2BAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,iBAAiB,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE5D,OAAO,CACL,CAAC,qBAAS,CACR,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAC5B,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,cAAc,CAAC,EACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,KAAK,GAAyB,CAAC,EAC1C,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,QAAQ,GAAG,2BAAa,CAAC,OAAO,EAChC,cAAc,EACd,KAAK,EACL,UAAU,EACV,WAAW,EACX,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GACf,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IACT,4EAA4E;IAC5E,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,kBAAkB,EAAE,aAAa;YACjC,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,WAAW,CAAC,CAChB,IAAI,KAAK,CAAC,CACV,eAAe,CAAC,CAAC,yCAAkB,CAAC,iBAAiB,CAAC,~~CACtD~~,WAAW,CAAC,CAAC,qCAAc,CAAC,WAAW,CAAC,CACxC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,gBAAgB,CAAC,CAAC,wBAAwB,CAAC,CAC3C,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,~~CACnC~~,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,cAAc,CAAC,CAAC,uBAAuB,CAAC;YACtC,cAAc;YACd,QAAQ;YACR,cAAc;SACf,CAAC,CAAC,CACH,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,WAAW,CAAC,CAAC,IAAA,uCAAgB,EAAC,~~YAAY~~,EAAE,WAAW,CAAC,CAAC,~~EACzD~~,CACH,CAAC;AACJ,CAAC,CAAC;~~AA9DW~~,QAAA,KAAK,~~SA8DhB~~","sourcesContent":["// Third party dependencies.\nimport {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n IconSize,\n mergeTwClassName,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\n// External dependencies.\nimport { BannerBase } from '../BannerBase';\nimport { IconAlert } from '../IconAlert';\n\n// Internal dependencies.\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport { ToastSeverity } from './Toast.types';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n iconAlertProps,\n severity,\n startAccessory,\n}: Pick<ToastProps, 'iconAlertProps' \| 'severity' \| 'startAccessory'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity \|\| severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const iconAlertSeverity = TOAST_SEVERITY_ICON_MAP[severity];\n\n return (\n <IconAlert\n severity={iconAlertSeverity}\n size={IconSize.Lg}\n {...iconAlertProps}\n />\n );\n};\n\nexport const Toast: React.FC<ToastProps> = ({\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps,\n children,\n childrenWrapperProps,\n closeButtonProps,\n description,\n descriptionProps,\n onClose,\n iconAlertProps,\n severity = ToastSeverity.Default,\n startAccessory,\n title,\n titleProps,\n twClassName,\n ...props\n}) => {\n const actionProps =\n actionButtonLabel && actionButtonOnPress\n ? {\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n // TODO: Remove this conditional once BannerBase only renders a close button\n // from onClose. At that point Toast can pass closeButtonProps directly.\n const resolvedCloseButtonProps =\n onClose \|\| closeButtonProps\n ? {\n accessibilityLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n return (\n <BannerBase\n {...actionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundSection}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n children={children}\n childrenWrapperProps={childrenWrapperProps}\n closeButtonProps={resolvedCloseButtonProps}\n description={description}\n descriptionProps={descriptionProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n iconAlertProps,\n severity,\n startAccessory,\n })}\n title={title}\n titleProps={titleProps}\n twClassName={mergeTwClassName('rounded-xl', twClassName)}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n IconSize,\n mergeTwClassName,\n TextColor,\n} from '@metamask/design-system-shared';\nimport { Theme, useTheme } from '@metamask/design-system-twrnc-preset';\nimport { lightTheme } from '@metamask/design-tokens';\nimport React from 'react';\n\n// External dependencies.\nimport { BannerBase } from '../BannerBase';\nimport { IconAlert } from '../IconAlert';\n\n// Internal dependencies.\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport { ToastSeverity } from './Toast.types';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n iconAlertProps,\n severity,\n startAccessory,\n}: Pick<ToastProps, 'iconAlertProps' \| 'severity' \| 'startAccessory'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity \|\| severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const iconAlertSeverity = TOAST_SEVERITY_ICON_MAP[severity];\n\n return (\n <IconAlert\n severity={iconAlertSeverity}\n size={IconSize.Lg}\n {...iconAlertProps}\n />\n );\n};\n\nexport const Toast: React.FC<ToastProps> = ({\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps,\n children,\n childrenWrapperProps,\n closeButtonProps,\n description,\n descriptionProps,\n onClose,\n iconAlertProps,\n severity = ToastSeverity.Default,\n startAccessory,\n style,\n title,\n titleProps,\n twClassName,\n ...props\n}) => {\n const theme = useTheme();\n const isLightTheme = theme === Theme.Light;\n const actionProps =\n actionButtonLabel && actionButtonOnPress\n ? {\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n // TODO: Remove this conditional once BannerBase only renders a close button\n // from onClose. At that point Toast can pass closeButtonProps directly.\n const resolvedCloseButtonProps =\n onClose \|\| closeButtonProps\n ? {\n accessibilityLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n return (\n <BannerBase\n {...actionProps}\n {...props}\n backgroundColor={\n isLightTheme\n ? BoxBackgroundColor.BackgroundDefault\n : BoxBackgroundColor.BackgroundSection\n }\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n children={children}\n childrenWrapperProps={childrenWrapperProps}\n closeButtonProps={resolvedCloseButtonProps}\n description={description}\n descriptionProps={{\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n iconAlertProps,\n severity,\n startAccessory,\n })}\n style={[isLightTheme ? lightTheme.shadows.size.md : undefined, style]}\n title={title}\n titleProps={titleProps}\n twClassName={mergeTwClassName('rounded-2xl', twClassName)}\n />\n );\n};\n"]}

package/dist/components/Toast/Toast.constants.cjs CHANGED Viewed

@@ -1,13 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TOAST_SEVERITY_ICON_MAP = exports.TOAST_BOTTOM_PADDING = exports.TOAST_VISIBILITY_DURATION = exports.TOAST_ANIMATION_DURATION = void 0;
+exports.TOAST_SEVERITY_ICON_MAP = exports.TOAST_SPRING_CONFIG = exports.TOAST_TOP_PADDING = exports.TOAST_VISIBILITY_DURATION = exports.TOAST_ANIMATION_DURATION = void 0;
 // External dependencies.
 const design_system_shared_1 = require("@metamask/design-system-shared");
 const Toast_types_1 = require("./Toast.types.cjs");
 var design_system_shared_2 = require("@metamask/design-system-shared");
 Object.defineProperty(exports, "TOAST_ANIMATION_DURATION", { enumerable: true, get: function () { return design_system_shared_2.TOAST_ANIMATION_DURATION; } });
 Object.defineProperty(exports, "TOAST_VISIBILITY_DURATION", { enumerable: true, get: function () { return design_system_shared_2.TOAST_VISIBILITY_DURATION; } });
-exports.TOAST_BOTTOM_PADDING = 36;
+exports.TOAST_TOP_PADDING = 8;
+/**
+ * Spring tuned to approximate iOS system banner motion (inspired by UIKit
+ * spring with dampingRatio ~0.7-0.85 / SwiftUI .snappy).
+ */
+exports.TOAST_SPRING_CONFIG = {
+    dampingRatio: 0.85,
+    duration: 500,
+};
 exports.TOAST_SEVERITY_ICON_MAP = {
     [Toast_types_1.ToastSeverity.Success]: design_system_shared_1.IconAlertSeverity.Success,
     [Toast_types_1.ToastSeverity.Warning]: design_system_shared_1.IconAlertSeverity.Warning,

package/dist/components/Toast/Toast.constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.constants.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACzB,yEAAmE;~~AAEnE~~,mDAA8C;AAE9C,uEAGwC;AAFtC,gIAAA,wBAAwB,OAAA;AACxB,iIAAA,yBAAyB,OAAA;AAGd,QAAA,~~oBAAoB~~,GAAG,EAAE,CAAC;~~AAE1B~~,QAAA,uBAAuB,GAAG;IACrC,CAAC,2BAAa,CAAC,OAAO,CAAC,EAAE,wCAAiB,CAAC,OAAO;IAClD,CAAC,2BAAa,CAAC,OAAO,CAAC,EAAE,wCAAiB,CAAC,OAAO;IAClD,CAAC,2BAAa,CAAC,MAAM,CAAC,EAAE,wCAAiB,CAAC,MAAM;CACxC,CAAC","sourcesContent":["// External dependencies.\nimport { IconAlertSeverity } from '@metamask/design-system-shared';\n\nimport { ToastSeverity } from './Toast.types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask/design-system-shared';\n\nexport const ~~TOAST_BOTTOM_PADDING~~ = 36;\n\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: IconAlertSeverity.Success,\n [ToastSeverity.Warning]: IconAlertSeverity.Warning,\n [ToastSeverity.Danger]: IconAlertSeverity.Danger,\n} as const;\n"]}
1	+ {"version":3,"file":"Toast.constants.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACzB,yEAAmE;AAGnE,mDAA8C;AAE9C,uEAGwC;AAFtC,gIAAA,wBAAwB,OAAA;AACxB,iIAAA,yBAAyB,OAAA;AAGd,QAAA,iBAAiB,GAAG,CAAC,CAAC;AAEnC;;;GAGG;AACU,QAAA,mBAAmB,GAAqB;IACnD,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,GAAG;CACd,CAAC;AAEW,QAAA,uBAAuB,GAAG;IACrC,CAAC,2BAAa,CAAC,OAAO,CAAC,EAAE,wCAAiB,CAAC,OAAO;IAClD,CAAC,2BAAa,CAAC,OAAO,CAAC,EAAE,wCAAiB,CAAC,OAAO;IAClD,CAAC,2BAAa,CAAC,MAAM,CAAC,EAAE,wCAAiB,CAAC,MAAM;CACxC,CAAC","sourcesContent":["// External dependencies.\nimport { IconAlertSeverity } from '@metamask/design-system-shared';\nimport type { WithSpringConfig } from 'react-native-reanimated';\n\nimport { ToastSeverity } from './Toast.types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask/design-system-shared';\n\nexport const TOAST_TOP_PADDING = 8;\n\n/*\n Spring tuned to approximate iOS system banner motion (inspired by UIKit\n * spring with dampingRatio ~0.7-0.85 / SwiftUI .snappy).\n */\nexport const TOAST_SPRING_CONFIG: WithSpringConfig = {\n dampingRatio: 0.85,\n duration: 500,\n};\n\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: IconAlertSeverity.Success,\n [ToastSeverity.Warning]: IconAlertSeverity.Warning,\n [ToastSeverity.Danger]: IconAlertSeverity.Danger,\n} as const;\n"]}

package/dist/components/Toast/Toast.constants.d.cts CHANGED Viewed

@@ -1,5 +1,11 @@
+import type { WithSpringConfig } from "react-native-reanimated";
 export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION, } from "@metamask/design-system-shared";
-export declare const TOAST_BOTTOM_PADDING = 36;
+export declare const TOAST_TOP_PADDING = 8;
+/**
+ * Spring tuned to approximate iOS system banner motion (inspired by UIKit
+ * spring with dampingRatio ~0.7-0.85 / SwiftUI .snappy).
+ */
+export declare const TOAST_SPRING_CONFIG: WithSpringConfig;
 export declare const TOAST_SEVERITY_ICON_MAP: {
     readonly success: "success";
     readonly warning: "warning";

package/dist/components/Toast/Toast.constants.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"~~AAKA~~,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,uCAAuC;AAExC,eAAO,MAAM,~~oBAAoB~~,~~KAAK~~,CAAC;~~AAEvC~~,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}
1	+ {"version":3,"file":"Toast.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAAgC;AAIhE,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,uCAAuC;AAExC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,gBAGjC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}

package/dist/components/Toast/Toast.constants.d.mts CHANGED Viewed

@@ -1,5 +1,11 @@
+import type { WithSpringConfig } from "react-native-reanimated";
 export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION, } from "@metamask/design-system-shared";
-export declare const TOAST_BOTTOM_PADDING = 36;
+export declare const TOAST_TOP_PADDING = 8;
+/**
+ * Spring tuned to approximate iOS system banner motion (inspired by UIKit
+ * spring with dampingRatio ~0.7-0.85 / SwiftUI .snappy).
+ */
+export declare const TOAST_SPRING_CONFIG: WithSpringConfig;
 export declare const TOAST_SEVERITY_ICON_MAP: {
     readonly success: "success";
     readonly warning: "warning";

package/dist/components/Toast/Toast.constants.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"~~AAKA~~,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,uCAAuC;AAExC,eAAO,MAAM,~~oBAAoB~~,~~KAAK~~,CAAC;~~AAEvC~~,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}
1	+ {"version":3,"file":"Toast.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAAgC;AAIhE,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,uCAAuC;AAExC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,gBAGjC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}

package/dist/components/Toast/Toast.constants.mjs CHANGED Viewed

@@ -2,7 +2,15 @@
 import { IconAlertSeverity } from "@metamask/design-system-shared";
 import { ToastSeverity } from "./Toast.types.mjs";
 export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION } from "@metamask/design-system-shared";
-export const TOAST_BOTTOM_PADDING = 36;
+export const TOAST_TOP_PADDING = 8;
+/**
+ * Spring tuned to approximate iOS system banner motion (inspired by UIKit
+ * spring with dampingRatio ~0.7-0.85 / SwiftUI .snappy).
+ */
+export const TOAST_SPRING_CONFIG = {
+    dampingRatio: 0.85,
+    duration: 500,
+};
 export const TOAST_SEVERITY_ICON_MAP = {
     [ToastSeverity.Success]: IconAlertSeverity.Success,
     [ToastSeverity.Warning]: IconAlertSeverity.Warning,

package/dist/components/Toast/Toast.constants.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.constants.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,iBAAiB,EAAE,uCAAuC;~~AAEnE~~,OAAO,EAAE,aAAa,EAAE,0BAAsB;AAE9C,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EAC1B,uCAAuC;AAExC,MAAM,CAAC,MAAM,~~oBAAoB~~,GAAG,EAAE,CAAC;~~AAEvC~~,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO;IAClD,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO;IAClD,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,MAAM;CACxC,CAAC","sourcesContent":["// External dependencies.\nimport { IconAlertSeverity } from '@metamask/design-system-shared';\n\nimport { ToastSeverity } from './Toast.types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask/design-system-shared';\n\nexport const ~~TOAST_BOTTOM_PADDING~~ = 36;\n\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: IconAlertSeverity.Success,\n [ToastSeverity.Warning]: IconAlertSeverity.Warning,\n [ToastSeverity.Danger]: IconAlertSeverity.Danger,\n} as const;\n"]}
1	+ {"version":3,"file":"Toast.constants.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,iBAAiB,EAAE,uCAAuC;AAGnE,OAAO,EAAE,aAAa,EAAE,0BAAsB;AAE9C,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EAC1B,uCAAuC;AAExC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqB;IACnD,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,GAAG;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO;IAClD,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO;IAClD,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,MAAM;CACxC,CAAC","sourcesContent":["// External dependencies.\nimport { IconAlertSeverity } from '@metamask/design-system-shared';\nimport type { WithSpringConfig } from 'react-native-reanimated';\n\nimport { ToastSeverity } from './Toast.types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask/design-system-shared';\n\nexport const TOAST_TOP_PADDING = 8;\n\n/*\n Spring tuned to approximate iOS system banner motion (inspired by UIKit\n * spring with dampingRatio ~0.7-0.85 / SwiftUI .snappy).\n */\nexport const TOAST_SPRING_CONFIG: WithSpringConfig = {\n dampingRatio: 0.85,\n duration: 500,\n};\n\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: IconAlertSeverity.Success,\n [ToastSeverity.Warning]: IconAlertSeverity.Warning,\n [ToastSeverity.Danger]: IconAlertSeverity.Danger,\n} as const;\n"]}

package/dist/components/Toast/Toast.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"~~AAQA~~,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AA0BhD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,~~CA8DtC~~,CAAC"}
1	+ {"version":3,"file":"Toast.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AA0BhD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyEtC,CAAC"}

package/dist/components/Toast/Toast.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"~~AAQA~~,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AA0BhD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,~~CA8DtC~~,CAAC"}
1	+ {"version":3,"file":"Toast.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AA0BhD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyEtC,CAAC"}

package/dist/components/Toast/Toast.mjs CHANGED Viewed

@@ -5,7 +5,9 @@ function $importDefault(module) {
     return module;
 }
 // Third party dependencies.
-import { BoxBackgroundColor, BoxBorderColor, ButtonSize, IconSize, mergeTwClassName } from "@metamask/design-system-shared";
+import { BoxBackgroundColor, BoxBorderColor, ButtonSize, IconSize, mergeTwClassName, TextColor } from "@metamask/design-system-shared";
+import { Theme, useTheme } from "@metamask/design-system-twrnc-preset";
+import { lightTheme } from "@metamask/design-tokens";
 import $React from "react";
 const React = $importDefault($React);
 // External dependencies.
@@ -24,7 +26,9 @@ const renderSeverityAccessory = ({ iconAlertProps, severity, startAccessory, })
     const iconAlertSeverity = TOAST_SEVERITY_ICON_MAP[severity];
     return (<IconAlert severity={iconAlertSeverity} size={IconSize.Lg} {...iconAlertProps}/>);
 };
-export const Toast = ({ actionButtonLabel, actionButtonOnPress, actionButtonProps, children, childrenWrapperProps, closeButtonProps, description, descriptionProps, onClose, iconAlertProps, severity = ToastSeverity.Default, startAccessory, title, titleProps, twClassName, ...props }) => {
+export const Toast = ({ actionButtonLabel, actionButtonOnPress, actionButtonProps, children, childrenWrapperProps, closeButtonProps, description, descriptionProps, onClose, iconAlertProps, severity = ToastSeverity.Default, startAccessory, style, title, titleProps, twClassName, ...props }) => {
+    const theme = useTheme();
+    const isLightTheme = theme === Theme.Light;
     const actionProps = actionButtonLabel && actionButtonOnPress
         ? {
             actionButtonLabel,
@@ -43,10 +47,15 @@ export const Toast = ({ actionButtonLabel, actionButtonOnPress, actionButtonProp
             ...closeButtonProps,
         }
         : undefined;
-    return (<BannerBase {...actionProps} {...props} backgroundColor={BoxBackgroundColor.BackgroundSection} borderColor={BoxBorderColor.BorderMuted} borderWidth={1} children={children} childrenWrapperProps={childrenWrapperProps} closeButtonProps={resolvedCloseButtonProps} description={description} descriptionProps={descriptionProps} onClose={onClose} startAccessory={renderSeverityAccessory({
+    return (<BannerBase {...actionProps} {...props} backgroundColor={isLightTheme
+            ? BoxBackgroundColor.BackgroundDefault
+            : BoxBackgroundColor.BackgroundSection} borderColor={BoxBorderColor.BorderMuted} borderWidth={1} children={children} childrenWrapperProps={childrenWrapperProps} closeButtonProps={resolvedCloseButtonProps} description={description} descriptionProps={{
+            color: TextColor.TextAlternative,
+            ...descriptionProps,
+        }} onClose={onClose} startAccessory={renderSeverityAccessory({
             iconAlertProps,
             severity,
             startAccessory,
-        })} title={title} titleProps={titleProps} twClassName={mergeTwClassName('rounded-xl', twClassName)}/>);
+        })} style={[isLightTheme ? lightTheme.shadows.size.md : undefined, style]} title={title} titleProps={titleProps} twClassName={mergeTwClassName('rounded-2xl', twClassName)}/>);
 };
 //# sourceMappingURL=Toast.mjs.map