@webority-technologies/mobile 0.0.23 → 0.0.25

package/lib/commonjs/components/Modal/Modal.js

@@ -18,7 +18,6 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     visible,
     onRequestClose,
     presentation = 'centered',
-    backdropOpacity = 0.5,
     backdropPressClose = true,
     animationDuration,
     accessibilityLabel,
@@ -27,6 +26,7 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     contentStyle,
     backdropStyle,
     restoreFocusRef,
+    haptic,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -35,7 +35,6 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const screenHeight = _reactNative.Dimensions.get('window').height;
   const modalTokens = theme.components.modal;
   const scaleStartValue = modalTokens?.scaleStartValue ?? 0.9;
-  const backdropHaptic = modalTokens?.backdropHaptic ?? false;
   const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const scaleAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(scaleStartValue)).current;
   const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
@@ -131,9 +130,10 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   }, [visible, duration, restoreFocusRef]);
   const handleBackdropPress = (0, _react.useCallback)(() => {
     if (!backdropPressClose) return;
-    if (backdropHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     onRequestClose();
-  }, [backdropPressClose, onRequestClose, backdropHaptic]);
+  }, [backdropPressClose, onRequestClose, haptic]);
   const handleHardwareBack = (0, _react.useCallback)(() => {
     if (hardwareBackPress) {
       onRequestClose();

package/lib/commonjs/components/NumberInput/NumberInput.js

@@ -63,6 +63,7 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     size = 'md',
     variant = 'inline',
     unit,
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -86,7 +87,6 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const longPressDelay = theme.components.numberInput?.longPressDelayMs ?? DEFAULT_LONG_PRESS_DELAY;
   const longPressInterval = theme.components.numberInput?.longPressIntervalMs ?? DEFAULT_LONG_PRESS_INTERVAL;
-  const pressHaptic = theme.components.numberInput?.pressHaptic ?? false;
   const inputRef = (0, _react.useRef)(null);
   const [draft, setDraft] = (0, _react.useState)(formatValue(current, allowDecimal, precision));
   const [editing, setEditing] = (0, _react.useState)(false);
@@ -121,14 +121,16 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [allowDecimal, max, min, setCurrent, precision, current]);
   const decrement = (0, _react.useCallback)(() => {
     if (!interactive || atMin) return;
-    if (pressHaptic) (0, _index3.triggerHaptic)('impactLight');
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index3.triggerHaptic)(h);
     setExternal(current - step);
-  }, [atMin, interactive, pressHaptic, setExternal, step, current]);
+  }, [atMin, interactive, haptic, setExternal, step, current]);
   const increment = (0, _react.useCallback)(() => {
     if (!interactive || atMax) return;
-    if (pressHaptic) (0, _index3.triggerHaptic)('impactLight');
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index3.triggerHaptic)(h);
     setExternal(current + step);
-  }, [atMax, interactive, pressHaptic, setExternal, step, current]);
+  }, [atMax, interactive, haptic, setExternal, step, current]);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -52,6 +52,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     error,
     size = 'md',
     secure = false,
+    haptic,
     accessibilityLabel,
     style,
     cellStyle,
@@ -94,8 +95,6 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   const previousFocusedIndexRef = (0, _react.useRef)(-1);
   const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
   const reduceMotion = (0, _index2.useReducedMotion)();
-  const errorHaptic = theme.components.otpInput?.errorHaptic ?? false;
-  const selectionHaptic = theme.components.otpInput?.selectionHaptic ?? false;
   const hasError = Boolean(error);
   const errorMessage = typeof error === 'string' ? error : undefined;
 
@@ -105,7 +104,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     const isFirstRun = previousErrorRef.current === null;
     let anim;
     if (!isFirstRun && hasError && !previousErrorRef.current) {
-      if (errorHaptic) (0, _index3.triggerHaptic)('notificationError');
+      if (haptic !== false) (0, _index3.triggerHaptic)('notificationError');
       if (shakeOnError && !reduceMotion) {
         (0, _index.setNativeValue)(shake, 0);
         anim = _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
@@ -134,7 +133,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     }
     previousErrorRef.current = hasError;
     return () => anim?.stop();
-  }, [hasError, shake, shakeOnError, errorHaptic]);
+  }, [hasError, shake, shakeOnError, haptic]);
 
   // Animate underline opacity for the focused cell. Skip on first mount
   // (no prior focus state) — values are already at 0 and there's nothing to animate.
@@ -230,8 +229,9 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     const next = chars.join('').slice(0, length);
     const previousLength = current.length;
     updateValue(next);
-    if (next.length !== previousLength && selectionHaptic) {
-      (0, _index3.triggerHaptic)('selection');
+    if (next.length !== previousLength) {
+      const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+      if (h) (0, _index3.triggerHaptic)(h);
     }
 
     // Move focus to the next empty cell or last cell.
@@ -241,7 +241,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     } else {
       focusCell(nextFocus);
     }
-  }, [cells, focusCell, keyboardType, length, selectionHaptic, updateValue, current]);
+  }, [cells, focusCell, keyboardType, length, haptic, updateValue, current]);
   const handleKeyPress = (0, _react.useCallback)((index, e) => {
     const key = e.nativeEvent.key;
     if (key !== 'Backspace') return;

package/lib/commonjs/components/ProgressBar/ProgressBar.js

@@ -38,6 +38,8 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
     tone = 'primary',
     trackColor,
     barColor,
+    gradient,
+    segments,
     animated = true,
     style,
     containerStyle,
@@ -58,6 +60,12 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
   const resolvedRadius = radius ?? theme.radius.full;
   const resolvedTrack = trackColor ?? theme.colors.surface.disabled;
   const resolvedBar = barColor ?? toneColor(theme, tone);
+  const resolvedGradient = (0, _react.useMemo)(() => {
+    if (!gradient) return null;
+    if (typeof gradient === 'string') return theme.gradients[gradient] ?? null;
+    return gradient;
+  }, [gradient, theme.gradients]);
+  const hasSegments = Array.isArray(segments) && segments.length > 0;
   (0, _react.useEffect)(() => {
     if (isIndeterminate) return;
     if (!animated) {
@@ -116,7 +124,18 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
       borderRadius: resolvedRadius,
       backgroundColor: resolvedTrack
     }, style, containerStyle],
-    children: isIndeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    children: hasSegments ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.segments, {
+        height
+      }],
+      children: (segments ?? []).map((s, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: `${clampProgress(s.value) * 100}%`,
+          height,
+          backgroundColor: s.color ?? toneColor(theme, s.tone ?? 'primary')
+        }
+      }, i))
+    }) : isIndeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: [styles.indeterminateBar, {
         height,
         borderRadius: resolvedRadius,
@@ -130,9 +149,14 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
       style: [styles.determinateBar, {
         height,
         borderRadius: resolvedRadius,
-        backgroundColor: resolvedBar,
-        width: determinateWidth
-      }, barStyle]
+        backgroundColor: resolvedGradient ? 'transparent' : resolvedBar,
+        width: determinateWidth,
+        overflow: resolvedGradient ? 'hidden' : undefined
+      }, barStyle],
+      children: resolvedGradient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Gradient, {
+        gradient: resolvedGradient,
+        style: _reactNative.StyleSheet.absoluteFill
+      }) : null
     })
   });
 });
@@ -151,6 +175,10 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0
+  },
+  segments: {
+    flexDirection: 'row',
+    width: '100%'
   }
 });
 var _default = exports.default = ProgressBar;

package/lib/commonjs/components/Radio/Radio.js

@@ -70,8 +70,6 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const inner = sizeOverrides?.inner ?? sizeMap[size].inner;
   const radioBorderWidth = theme.colors.border.width;
   const radioLabelGap = theme.components.radio?.labelGap ?? 10;
-  const pressHapticEnabled = theme.components.radio?.pressHaptic ?? false;
-  const resolvedHaptic = haptic === undefined ? pressHapticEnabled ? 'selection' : false : haptic;
   const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(selected ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     const anim = _reactNative.Animated.spring(progress, {
@@ -90,7 +88,8 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   });
   const handlePress = event => {
     if (disabled) return;
-    if (resolvedHaptic !== false) (0, _hapticUtils.triggerHaptic)(resolvedHaptic);
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (ctx) {
       ctx.onChange(value);
     } else {

package/lib/commonjs/components/Rating/Rating.js

@@ -85,6 +85,7 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     tone = 'warning',
     label,
     loading = false,
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -121,7 +122,6 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   }, [max]);
   const pulseOnPress = theme.components.rating?.pulseOnPress ?? false;
   const pulseScale = theme.components.rating?.pulseScale ?? 1.2;
-  const pressHapticEnabled = theme.components.rating?.pressHaptic ?? false;
   const pulse = (0, _react.useCallback)(idx => {
     const v = scaleRefs[idx];
     if (!v) return;
@@ -141,10 +141,11 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const commit = (0, _react.useCallback)((next, animatedIndex) => {
     if (!interactive || !onChange) return;
     const cleaned = clampToStep(next, max, step);
-    if (pressHapticEnabled) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (pulseOnPress && typeof animatedIndex === 'number') pulse(animatedIndex);
     onChange(cleaned);
-  }, [interactive, onChange, max, step, pulse, pressHapticEnabled, pulseOnPress]);
+  }, [interactive, onChange, max, step, pulse, haptic, pulseOnPress]);
   const handleStarPress = (0, _react.useCallback)(index => e => {
     if (!interactive) return;
     const w = starWidthRef.current || starSize;

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -29,6 +29,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     size = 'md',
     variant: variantProp,
     cancelLabel = 'Cancel',
+    haptic,
     style,
     accessibilityLabel,
     testID,
@@ -97,16 +98,18 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     onChangeText(text);
   }, [debounceMs, onChangeText]);
   const handleClear = (0, _react.useCallback)(() => {
-    (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (debounceMs !== undefined) {
       setInternalValue('');
       lastSentRef.current = '';
     }
     onChangeText('');
     onClear?.();
-  }, [debounceMs, onChangeText, onClear]);
+  }, [haptic, debounceMs, onChangeText, onClear]);
   const handleCancel = (0, _react.useCallback)(() => {
-    (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (debounceMs !== undefined) {
       setInternalValue('');
       lastSentRef.current = '';
@@ -114,7 +117,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     onChangeText('');
     setIsFocused(false);
     onCancel?.();
-  }, [debounceMs, onChangeText, onCancel]);
+  }, [haptic, debounceMs, onChangeText, onCancel]);
   const handleSubmit = (0, _react.useCallback)(() => {
     onSubmit?.(debounceMs !== undefined ? internalValue : value);
   }, [onSubmit, debounceMs, internalValue, value]);

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -42,6 +42,7 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
     fullWidth = true,
     disabled = false,
     tone = 'primary',
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -66,7 +67,6 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
     paddingHorizontal: segTheme?.[size]?.paddingHorizontal ?? baseSize.paddingHorizontal
   };
   const trackPadding = segTheme?.trackPadding ?? TRACK_PADDING;
-  const changeHapticEnabled = segTheme?.changeHaptic ?? false;
 
   // Track width is measured from onLayout. Thumb width is a regular number (not
   // animated) — `width` cannot be driven by the native animated module, and mixing
@@ -107,9 +107,10 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   const handlePress = (0, _react.useCallback)(segment => {
     if (disabled) return;
     if (segment.value === current) return;
-    if (changeHapticEnabled) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     setCurrent(segment.value);
-  }, [disabled, setCurrent, current, changeHapticEnabled]);
+  }, [disabled, setCurrent, current, haptic]);
   const thumbBg = tone === 'primary' ? theme.colors.background.elevated : theme.colors.background.elevated;
   const activeTextColor = tone === 'primary' ? theme.colors.text.primary : theme.colors.text.primary;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {

package/lib/commonjs/components/Select/Select.js

@@ -32,6 +32,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     getOptionDescription,
     placeholder,
     searchable = false,
+    haptic,
     label,
     error,
     disabled = false,
@@ -119,9 +120,10 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   }, [searchable, query, options, labelOf, descriptionOf]);
   const handleOpen = (0, _react.useCallback)(() => {
     if (disabled) return;
-    (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     setOpen(true);
-  }, [disabled]);
+  }, [disabled, haptic]);
   const handleClose = (0, _react.useCallback)(() => {
     setOpen(false);
     setQuery('');
@@ -129,7 +131,8 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const handleSelect = (0, _react.useCallback)(option => {
     if (disabledOf(option)) return;
     const optValue = valueOf(option);
-    (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     if (multi) {
       const current = props.value ?? [];
       const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
@@ -138,7 +141,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     }
     props.onChange(optValue);
     handleClose();
-  }, [multi, props, handleClose, disabledOf, valueOf]);
+  }, [multi, props, handleClose, disabledOf, valueOf, haptic]);
 
   // Trigger label / placeholder text.
   const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');

package/lib/commonjs/components/SlideToConfirm/SlideToConfirm.js

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SlideToConfirm = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SIZE_MAP = {
+  sm: {
+    height: 44,
+    pad: 4
+  },
+  md: {
+    height: 56,
+    pad: 5
+  },
+  lg: {
+    height: 64,
+    pad: 6
+  }
+};
+const Chevron = ({
+  color,
+  size
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: {
+    width: 0,
+    height: 0,
+    borderTopWidth: size * 0.4,
+    borderBottomWidth: size * 0.4,
+    borderLeftWidth: size * 0.55,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: color,
+    marginLeft: size * 0.2
+  }
+});
+const SlideToConfirm = exports.SlideToConfirm = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    onConfirm,
+    label = 'Slide to confirm',
+    confirmedLabel = 'Confirmed',
+    tone = 'primary',
+    size = 'md',
+    disabled = false,
+    threshold = 0.9,
+    resetAfter = false,
+    haptic,
+    icon,
+    style,
+    trackStyle,
+    handleStyle,
+    labelStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sizeCfg = SIZE_MAP[size];
+  const handleSize = sizeCfg.height - sizeCfg.pad * 2;
+  const styles = (0, _react.useMemo)(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
+  const toneColor = theme.colors[tone];
+  const [confirmed, setConfirmed] = (0, _react.useState)(false);
+  const x = (0, _reactNativeReanimated.useSharedValue)(0);
+  const maxX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const dragStart = (0, _reactNativeReanimated.useSharedValue)(0);
+  const resetTimer = (0, _react.useRef)(null);
+  const fireHaptic = (0, _react.useCallback)(() => {
+    const h = (0, _index2.resolveHaptic)(haptic, 'notificationSuccess');
+    if (h) (0, _index2.triggerHaptic)(h);
+  }, [haptic]);
+  const reset = (0, _react.useCallback)(() => {
+    setConfirmed(false);
+    x.value = (0, _reactNativeReanimated.withSpring)(0, {
+      damping: 18,
+      stiffness: 160,
+      mass: 1
+    });
+  }, [x]);
+  const handleConfirm = (0, _react.useCallback)(() => {
+    setConfirmed(true);
+    fireHaptic();
+    onConfirm();
+    if (resetAfter !== false) {
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      resetTimer.current = setTimeout(reset, resetAfter);
+    }
+  }, [fireHaptic, onConfirm, resetAfter, reset]);
+  _react.default.useEffect(() => () => {
+    (0, _reactNativeReanimated.cancelAnimation)(x);
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+  }, [x]);
+  const onLayout = (0, _react.useCallback)(e => {
+    maxX.value = Math.max(0, e.nativeEvent.layout.width - handleSize - sizeCfg.pad * 2);
+  }, [maxX, handleSize, sizeCfg.pad]);
+  const pan = (0, _react.useMemo)(() => {
+    const thresholdFrac = threshold;
+    const springCfg = {
+      damping: 18,
+      stiffness: 160,
+      mass: 1
+    };
+    const timingCfg = {
+      duration: theme.motion.duration.fast,
+      easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+    };
+    return _reactNativeGestureHandler.Gesture.Pan().enabled(!disabled && !confirmed).minDistance(0).onStart(() => {
+      'worklet';
+
+      dragStart.value = x.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      x.value = Math.min(Math.max(dragStart.value + event.translationX, 0), maxX.value);
+    }).onEnd(() => {
+      'worklet';
+
+      if (maxX.value > 0 && x.value >= maxX.value * thresholdFrac) {
+        x.value = (0, _reactNativeReanimated.withTiming)(maxX.value, timingCfg);
+        (0, _reactNativeReanimated.runOnJS)(handleConfirm)();
+      } else {
+        x.value = (0, _reactNativeReanimated.withSpring)(0, springCfg);
+      }
+    });
+  }, [disabled, confirmed, threshold, x, maxX, dragStart, handleConfirm, theme.motion.duration.fast]);
+  const handleAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: x.value
+    }]
+  }));
+  const fillAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    width: x.value + handleSize + sizeCfg.pad
+  }));
+  const labelAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const max = maxX.value > 0 ? maxX.value : 1;
+    return {
+      opacity: Math.max(0, 1 - x.value / (max * 0.6))
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
+    style: [styles.track, {
+      backgroundColor: theme.colors.background.secondary
+    }, trackStyle, style],
+    onLayout: onLayout,
+    testID: testID,
+    accessibilityRole: "adjustable",
+    accessibilityLabel: confirmed ? confirmedLabel : label,
+    accessibilityState: {
+      disabled
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.fill, {
+        backgroundColor: toneColor,
+        opacity: disabled ? 0.5 : 1
+      }, fillAnim],
+      pointerEvents: "none"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.labelWrap, labelAnim],
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.base
+        }, labelStyle],
+        numberOfLines: 1,
+        children: confirmed ? confirmedLabel : label
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: pan,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: [styles.handle, {
+          width: handleSize,
+          height: handleSize,
+          borderRadius: handleSize / 2,
+          backgroundColor: theme.colors.background.elevated,
+          opacity: disabled ? 0.5 : 1,
+          ...theme.shadows.sm
+        }, handleStyle, handleAnim],
+        children: icon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
+          color: toneColor,
+          size: handleSize * 0.5
+        })
+      })
+    })]
+  });
+});
+SlideToConfirm.displayName = 'SlideToConfirm';
+const buildStyles = (theme, sizeCfg) => _reactNative.StyleSheet.create({
+  track: {
+    height: sizeCfg.height,
+    borderRadius: sizeCfg.height / 2,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    padding: sizeCfg.pad
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    borderRadius: sizeCfg.height / 2
+  },
+  labelWrap: {
+    position: 'absolute',
+    left: sizeCfg.height,
+    right: sizeCfg.height
+  },
+  label: {
+    textAlign: 'center',
+    includeFontPadding: false
+  },
+  handle: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = SlideToConfirm;
+//# sourceMappingURL=SlideToConfirm.js.map

package/lib/commonjs/components/SlideToConfirm/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SlideToConfirm", {
+  enumerable: true,
+  get: function () {
+    return _SlideToConfirm.SlideToConfirm;
+  }
+});
+var _SlideToConfirm = require("./SlideToConfirm.js");
+//# sourceMappingURL=index.js.map