@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/module/components/Tabs/Tabs.js

@@ -25,12 +25,28 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
     scrollable = false,
     align = 'left',
     style,
+    containerStyle,
     tabStyle,
+    tabLabelStyle,
+    tabIconStyle,
+    tabBadgeStyle,
+    dividerStyle,
+    indicatorStyle,
+    progress,
     accessibilityLabel,
     testID
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
+  const tabsTokens = theme.components.tabs;
+  const tabPaddingHorizontal = tabsTokens?.tabPaddingHorizontal ?? theme.spacing.lg;
+  const tabPaddingVertical = tabsTokens?.tabPaddingVertical ?? theme.spacing.md;
+  const tabIconSpacing = tabsTokens?.tabIconSpacing ?? 6;
+  const underlineHeight = tabsTokens?.underlineHeight ?? 2;
+  const pillInset = tabsTokens?.pillInset ?? 4;
+  const disabledOpacity = tabsTokens?.disabledOpacity ?? 0.45;
+  const badgeGap = tabsTokens?.badgeGap ?? 6;
+  const hapticOnPress = tabsTokens?.hapticOnPress ?? false;
 
   // Per-tab measured layouts (key → {x, width}).
   const [layouts, setLayouts] = useState({});
@@ -38,9 +54,33 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   const indicatorWidth = useRef(createAnimatedValue(0)).current;
   const activeLayout = layouts[activeKey];
 
+  // Progress-driven mode: when the caller supplies a fractional-index signal
+  // and every tab has reported its layout, the indicator's translateX/width
+  // are interpolated from that signal — the press-spring is suppressed so the
+  // two drivers don't fight for the same view.
+  const allMeasured = tabs.every(t => layouts[t.key] !== undefined);
+  const useProgress = progress !== undefined && allMeasured && tabs.length > 1;
+  const progressTranslateX = useMemo(() => {
+    if (!useProgress || !progress) return null;
+    return progress.interpolate({
+      inputRange: tabs.map((_, i) => i),
+      outputRange: tabs.map(t => layouts[t.key].x),
+      extrapolate: 'clamp'
+    });
+  }, [useProgress, progress, tabs, layouts]);
+  const progressWidth = useMemo(() => {
+    if (!useProgress || !progress) return null;
+    return progress.interpolate({
+      inputRange: tabs.map((_, i) => i),
+      outputRange: tabs.map(t => layouts[t.key].width),
+      extrapolate: 'clamp'
+    });
+  }, [useProgress, progress, tabs, layouts]);
+
   // Animate indicator whenever activeKey or its layout changes.
   useEffect(() => {
     if (!activeLayout) return;
+    if (useProgress) return;
     const spring = theme.motion.spring.snappy;
     Animated.parallel([
     // Both must use the JS driver: width can't run on native, and mixing
@@ -59,7 +99,7 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
       mass: spring.mass,
       useNativeDriver: false
     })]).start();
-  }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy]);
+  }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy, useProgress]);
   const handleLayout = useCallback(key => e => {
     const {
       x,
@@ -80,22 +120,27 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   const handlePress = useCallback(tab => {
     if (tab.disabled) return;
     if (tab.key === activeKey) return;
-    triggerHaptic('selection');
+    if (hapticOnPress) triggerHaptic('selection');
     onChange(tab.key);
-  }, [activeKey, onChange]);
+  }, [activeKey, onChange, hapticOnPress]);
   const indicatorIsPill = variant === 'pills';
 
   // Indicator visual.
   const indicator = /*#__PURE__*/_jsx(Animated.View, {
     pointerEvents: "none",
-    style: [indicatorIsPill ? styles.indicatorPill : styles.indicatorUnderline, {
-      width: indicatorWidth,
+    style: [indicatorIsPill ? styles.indicatorPill : styles.indicatorUnderline, indicatorIsPill ? {
+      top: pillInset,
+      bottom: pillInset
+    } : {
+      height: underlineHeight
+    }, {
+      width: progressWidth ?? indicatorWidth,
       transform: [{
-        translateX: indicatorTranslateX
+        translateX: progressTranslateX ?? indicatorTranslateX
       }],
       backgroundColor: indicatorIsPill ? theme.colors.primaryMuted : theme.colors.primary,
       borderRadius: indicatorIsPill ? theme.radius.full : 0
-    }]
+    }, indicatorStyle]
   });
   const renderTabs = () => tabs.map(tab => {
     const isActive = tab.key === activeKey;
@@ -117,23 +162,41 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
       style: ({
         pressed
       }) => [styles.tab, scrollable ? null : styles.tabFlex, {
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md,
-        opacity: isDisabled ? 0.45 : 1,
+        paddingHorizontal: tabPaddingHorizontal,
+        paddingVertical: tabPaddingVertical,
+        opacity: isDisabled ? disabledOpacity : 1,
         backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
       }, tabStyle],
       children: [tab.icon ? /*#__PURE__*/_jsx(View, {
-        style: styles.tabIcon,
+        style: [styles.tabIcon, {
+          marginRight: tabIconSpacing
+        }, tabIconStyle],
         children: tab.icon
       }) : null, /*#__PURE__*/_jsx(Text, {
         style: [styles.tabLabel, {
           color: isActive ? theme.colors.primary : theme.colors.text.tertiary,
           fontSize: theme.typography.fontSize.base,
           fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
-        }],
+        }, tabLabelStyle],
         numberOfLines: 1,
         children: tab.label
-      })]
+      }), tab.badge !== undefined && tab.badge !== null ? /*#__PURE__*/_jsx(View, {
+        style: [styles.tabBadge, {
+          marginLeft: badgeGap,
+          backgroundColor: theme.colors.primaryMuted,
+          borderRadius: theme.radius.full,
+          paddingHorizontal: theme.spacing.xs
+        }, tabBadgeStyle],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.primary,
+            fontSize: theme.typography.fontSize.xs,
+            fontWeight: theme.typography.fontWeight.semibold
+          },
+          numberOfLines: 1,
+          children: String(tab.badge)
+        })
+      }) : null]
     }, tab.key);
   });
   const baseRowStyle = {
@@ -147,7 +210,7 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
     style: [styles.container, {
       borderBottomColor: theme.colors.border.secondary,
       borderBottomWidth: variant === 'underline' ? StyleSheet.hairlineWidth : 0
-    }, style],
+    }, variant === 'underline' ? dividerStyle : null, style, containerStyle],
     accessibilityRole: "tablist",
     accessibilityLabel: accessibilityLabel,
     testID: testID,
@@ -177,23 +240,23 @@ const buildStyles = _theme => StyleSheet.create({
   tabFlex: {
     flex: 1
   },
-  tabIcon: {
-    marginRight: 6
-  },
+  tabIcon: {},
   tabLabel: {
     includeFontPadding: false
   },
+  tabBadge: {
+    minWidth: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   indicatorUnderline: {
     position: 'absolute',
     left: 0,
-    bottom: 0,
-    height: 2
+    bottom: 0
   },
   indicatorPill: {
     position: 'absolute',
     left: 0,
-    top: 4,
-    bottom: 4,
     zIndex: -1
   }
 });

package/lib/module/components/TimePicker/TimePicker.js

@@ -2,9 +2,23 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Animated, Easing, FlatList, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import Button from "../Button/Button.js";
+import { PickerTrigger } from "../PickerTrigger/PickerTrigger.js";
+
+/**
+ * TimePicker supports two modes:
+ *
+ * 1. Controlled-modal mode — pass `visible`, `onSelect`, `onClose`. The
+ *    component renders only the modal sheet and the caller owns open/close
+ *    state plus its own trigger UI.
+ * 2. Trigger mode — omit `visible`. The component renders a PickerTrigger
+ *    field (label / value / placeholder / chevron / clear / helper / error)
+ *    and manages its own modal open state. `onSelect` is still called on
+ *    confirm.
+ */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ITEM_HEIGHT = 40;
 const VISIBLE_ITEMS = 5;
@@ -78,6 +92,8 @@ const Wheel = ({
       });
     }
   }, [selectedIndex, scrollY]);
+  const hapticEnabled = theme.components.timePicker?.haptic ?? false;
+  const hapticDebounceMs = theme.components.timePicker?.hapticDebounceMs ?? HAPTIC_DEBOUNCE_MS;
   const onScroll = useMemo(() => Animated.event([{
     nativeEvent: {
       contentOffset: {
@@ -91,14 +107,14 @@ const Wheel = ({
       const idx = Math.round(y / ITEM_HEIGHT);
       if (idx !== lastIndexRef.current && idx >= 0 && idx < data.length) {
         const now = Date.now();
-        if (now - lastHapticAtRef.current >= HAPTIC_DEBOUNCE_MS) {
+        if (hapticEnabled && now - lastHapticAtRef.current >= hapticDebounceMs) {
           triggerHaptic('selection');
           lastHapticAtRef.current = now;
         }
         lastIndexRef.current = idx;
       }
     }
-  }), [scrollY, data.length]);
+  }), [scrollY, data.length, hapticEnabled, hapticDebounceMs]);
   const onMomentumScrollEnd = useCallback(event => {
     const y = event.nativeEvent.contentOffset.y;
     const idx = Math.max(0, Math.min(data.length - 1, Math.round(y / ITEM_HEIGHT)));
@@ -197,21 +213,48 @@ const Wheel = ({
     })]
   });
 };
-const TimePicker = ({
-  visible,
-  value,
-  onSelect,
-  onClose,
-  format = '12h',
-  minuteStep = 1,
-  title = 'Select Time',
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  testID,
-  style
-}) => {
+const TimePicker = props => {
+  const {
+    visible,
+    value,
+    onSelect,
+    onClose,
+    format = '12h',
+    minuteStep = 1,
+    title = 'Select Time',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    testID,
+    style,
+    containerStyle,
+    headerLabelStyle,
+    footerButtonStyle,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle
+  } = props;
+  const isControlled = props.visible !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = isControlled ? visible : internalOpen;
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
   const styles = useMemo(() => buildStyles(theme), [theme]);
+  const handleCloseModal = useCallback(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onClose]);
   const hours = useMemo(() => format === '24h' ? range(0, 23) : range(1, 12), [format]);
   const minutes = useMemo(() => range(0, 59, minuteStep), [minuteStep]);
   const periods = useMemo(() => ['AM', 'PM'], []);
@@ -240,9 +283,9 @@ const TimePicker = ({
   });
   const [periodIndex, setPeriodIndex] = useState(() => initial.period === 'PM' ? 1 : 0);
 
-  // Re-sync on visible toggle / value change / format / step.
+  // Re-sync on open toggle / value change / format / step.
   useEffect(() => {
-    if (!visible) return;
+    if (!open) return;
     const h24 = value && Number.isFinite(value.hour) ? value.hour : new Date().getHours();
     const m = value && Number.isFinite(value.minute) ? value.minute : new Date().getMinutes();
     const stepped = clampMinuteToStep(m, minuteStep);
@@ -255,18 +298,20 @@ const TimePicker = ({
     const mIdx = minutes.indexOf(stepped);
     setMinuteIndex(mIdx >= 0 ? mIdx : 0);
     setPeriodIndex(period === 'PM' ? 1 : 0);
-  }, [visible, value, format, minuteStep, hours, minutes]);
+  }, [open, value, format, minuteStep, hours, minutes]);
 
   // Sheet animations.
   const opacity = useRef(createAnimatedValue(0)).current;
   const translateY = useRef(createAnimatedValue(40)).current;
   useEffect(() => {
-    if (visible) {
-      Animated.parallel([Animated.timing(opacity, {
+    if (open) {
+      Animated.parallel([
+      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+      Animated.timing(opacity, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: Easing.out(Easing.cubic),
-        useNativeDriver: true
+        useNativeDriver: false
       }), Animated.spring(translateY, {
         toValue: 0,
         damping: theme.motion.spring.snappy.damping,
@@ -275,10 +320,10 @@ const TimePicker = ({
         useNativeDriver: true
       })]).start();
     } else {
-      setNativeValue(opacity, 0);
+      opacity.setValue(0);
       setNativeValue(translateY, 40);
     }
-  }, [visible, opacity, translateY, theme.motion]);
+  }, [open, opacity, translateY, theme.motion]);
   const announce = useCallback(msg => {
     if (Platform.OS === 'ios' || Platform.OS === 'android') {
       AccessibilityInfo.announceForAccessibility(msg);
@@ -297,21 +342,21 @@ const TimePicker = ({
     announce(periods[idx] ?? '');
   }, [periods, announce]);
   const handleCancel = useCallback(() => {
-    triggerHaptic('selection');
-    onClose();
-  }, [onClose]);
+    if (theme.components.timePicker?.haptic) triggerHaptic('selection');
+    handleCloseModal();
+  }, [handleCloseModal, theme.components.timePicker]);
   const handleConfirm = useCallback(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const period = periods[periodIndex] ?? 'AM';
     const hour24 = to24h(displayHour, period, format);
     const minute = minutes[minuteIndex] ?? 0;
-    triggerHaptic('notificationSuccess');
-    onSelect({
+    if (theme.components.timePicker?.haptic) triggerHaptic('notificationSuccess');
+    onSelect?.({
       hour: hour24,
       minute
     });
-    onClose();
-  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, onClose]);
+    handleCloseModal();
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, handleCloseModal, theme.components.timePicker]);
   const summary = useMemo(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const minute = minutes[minuteIndex] ?? 0;
@@ -322,28 +367,43 @@ const TimePicker = ({
   const formatHourItem = useCallback(item => pad2(Number(item)), []);
   const formatMinuteItem = useCallback(item => pad2(Number(item)), []);
   const formatPeriodItem = useCallback(item => String(item), []);
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: visible,
+  const defaultFormatValue = useCallback(t => {
+    if (format === '24h') return `${pad2(t.hour)}:${pad2(t.minute)}`;
+    const {
+      displayHour,
+      period
+    } = from24h(t.hour, '12h');
+    return `${displayHour}:${pad2(t.minute)} ${period}`;
+  }, [format]);
+  const triggerValue = !isControlled && value && Number.isFinite(value.hour) && Number.isFinite(value.minute) ? (formatValue ?? defaultFormatValue)(value) : undefined;
+  const modal = /*#__PURE__*/_jsx(Modal, {
+    visible: open,
     transparent: true,
-    statusBarTranslucent: true,
+    statusBarTranslucent: true
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore — Android-only RN 0.71+; iOS ignores it.
+    ,
+    navigationBarTranslucent: true,
     animationType: "none",
-    onRequestClose: onClose,
+    onRequestClose: handleCloseModal,
     testID: testID,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
-      style: [styles.backdrop, {
-        opacity
-      }],
+    children: /*#__PURE__*/_jsxs(View
+    // Plain View + collapsable={false} — see Modal.tsx backdrop comment.
+    , {
+      collapsable: false,
+      style: styles.backdrop,
       children: [/*#__PURE__*/_jsx(Pressable, {
         style: StyleSheet.absoluteFill,
-        onPress: onClose,
+        onPress: handleCloseModal,
         accessibilityLabel: "Close time picker",
         accessibilityRole: "button"
       }), /*#__PURE__*/_jsxs(Animated.View, {
         style: [styles.sheet, {
+          paddingBottom: insets.bottom + theme.spacing.xl,
           transform: [{
             translateY
           }]
-        }, style],
+        }, style, containerStyle],
         accessibilityViewIsModal: true,
         accessible: true,
         accessibilityRole: "none",
@@ -351,7 +411,7 @@ const TimePicker = ({
         children: [/*#__PURE__*/_jsx(View, {
           style: styles.handle
         }), /*#__PURE__*/_jsx(Text, {
-          style: styles.title,
+          style: [styles.title, headerLabelStyle],
           accessibilityRole: "header",
           children: title
         }), /*#__PURE__*/_jsx(View, {
@@ -414,7 +474,7 @@ const TimePicker = ({
             variant: "ghost",
             tone: "neutral",
             onPress: handleCancel,
-            style: styles.footerBtn,
+            style: [styles.footerBtn, footerButtonStyle],
             accessibilityHint: "Dismiss without changes",
             testID: "time-picker-cancel"
           }), /*#__PURE__*/_jsx(Button, {
@@ -423,7 +483,7 @@ const TimePicker = ({
             tone: "primary",
             haptic: false,
             onPress: handleConfirm,
-            style: styles.footerBtn,
+            style: [styles.footerBtn, footerButtonStyle],
             accessibilityHint: "Confirm selected time",
             testID: "time-picker-confirm"
           })]
@@ -431,6 +491,24 @@ const TimePicker = ({
       })]
     })
   });
+  if (isControlled) return modal;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PickerTrigger, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      error: error,
+      required: required,
+      disabled: disabled,
+      size: size,
+      variant: variant,
+      clearable: clearable,
+      onClear: onClear,
+      value: triggerValue,
+      onPress: () => setInternalOpen(true),
+      triggerStyle: triggerStyle
+    }), modal]
+  });
 };
 const styles = StyleSheet.create({
   wheelColumn: {
@@ -475,8 +553,8 @@ const buildStyles = theme => {
     },
     handle: {
       alignSelf: 'center',
-      width: 36,
-      height: 4,
+      width: theme.components.timePicker?.handleWidth ?? 36,
+      height: theme.components.timePicker?.handleHeight ?? 4,
       borderRadius: theme.radius.full,
       backgroundColor: theme.colors.border.secondary,
       marginBottom: theme.spacing.sm

package/lib/module/components/Toast/Toast.js

@@ -4,10 +4,11 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SWIPE_DISMISS_THRESHOLD = 80;
-const SWIPE_VELOCITY_THRESHOLD = 0.5;
-const STACK_OFFSET = 8;
-const STACK_SCALE_STEP = 0.04;
+const DEFAULT_SWIPE_DISMISS_THRESHOLD = 80;
+const DEFAULT_SWIPE_VELOCITY_THRESHOLD = 0.5;
+const DEFAULT_STACK_OFFSET = 8;
+const DEFAULT_STACK_SCALE_STEP = 0.04;
+const DEFAULT_AUTO_DISMISS_MS = 3000;
 const Toast = ({
   toast,
   index,
@@ -23,6 +24,16 @@ const Toast = ({
   const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
   const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
   const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
+  const swipeDismissThreshold = toastTokens?.swipeDismissThreshold ?? DEFAULT_SWIPE_DISMISS_THRESHOLD;
+  const swipeVelocityThreshold = toastTokens?.swipeVelocityThreshold ?? DEFAULT_SWIPE_VELOCITY_THRESHOLD;
+  const stackOffset = toastTokens?.stackOffset ?? DEFAULT_STACK_OFFSET;
+  const stackScaleStep = toastTokens?.stackScaleStep ?? DEFAULT_STACK_SCALE_STEP;
+  const stackMinScale = toastTokens?.stackMinScale ?? 0.9;
+  const defaultDurationMs = toastTokens?.defaultDurationMs ?? DEFAULT_AUTO_DISMISS_MS;
+  const enableSwipeDismiss = toastTokens?.enableSwipeDismiss ?? true;
+  const enterSpringDamping = toastTokens?.enterSpringDamping ?? 18;
+  const enterSpringStiffness = toastTokens?.enterSpringStiffness ?? 180;
+  const enterSpringMass = toastTokens?.enterSpringMass ?? 1;
   const enterFrom = position === 'top' ? -120 : 120;
   const translateY = useRef(createAnimatedValue(enterFrom)).current;
   const translateX = useRef(createAnimatedValue(0)).current;
@@ -48,16 +59,16 @@ const Toast = ({
   useEffect(() => {
     Animated.parallel([Animated.spring(translateY, {
       toValue: 0,
-      damping: 18,
-      stiffness: 180,
-      mass: 1,
+      damping: enterSpringDamping,
+      stiffness: enterSpringStiffness,
+      mass: enterSpringMass,
       useNativeDriver: true
     }), Animated.timing(opacity, {
       toValue: 1,
       duration: theme.motion.duration.fast,
       useNativeDriver: true
     })]).start();
-    const duration = toast.duration ?? 3000;
+    const duration = toast.duration ?? defaultDurationMs;
     if (duration > 0) {
       const timer = setTimeout(() => dismiss(true), duration);
       return () => clearTimeout(timer);
@@ -73,7 +84,7 @@ const Toast = ({
       setNativeValue(opacity, fade);
     },
     onPanResponderRelease: (_evt, gesture) => {
-      if (Math.abs(gesture.dx) > SWIPE_DISMISS_THRESHOLD || Math.abs(gesture.vx) > SWIPE_VELOCITY_THRESHOLD) {
+      if (Math.abs(gesture.dx) > swipeDismissThreshold || Math.abs(gesture.vx) > swipeVelocityThreshold) {
         const direction = gesture.dx >= 0 ? 1 : -1;
         Animated.parallel([Animated.timing(translateX, {
           toValue: direction * 500,
@@ -100,8 +111,8 @@ const Toast = ({
   }),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
-  const stackTranslate = position === 'top' ? index * STACK_OFFSET : -index * STACK_OFFSET;
-  const stackScale = Math.max(1 - index * STACK_SCALE_STEP, 0.9);
+  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
+  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
   const handleActionPress = () => {
     toast.action?.onPress();
     dismiss(true);
@@ -116,7 +127,7 @@ const Toast = ({
         height: iconCircleSize,
         borderRadius: iconCircleBorderRadius,
         backgroundColor: tint + '22'
-      }],
+      }, toast.iconCircleStyle],
       children: /*#__PURE__*/_jsx(Text, {
         style: [styles.iconGlyph, {
           color: tint,
@@ -129,7 +140,7 @@ const Toast = ({
   };
   const a11yLabel = toast.description ? `${toast.message}. ${toast.description}` : toast.message;
   return /*#__PURE__*/_jsxs(Animated.View, {
-    ...panResponder.panHandlers,
+    ...(enableSwipeDismiss ? panResponder.panHandlers : {}),
     accessibilityRole: "alert",
     accessibilityLiveRegion: "assertive",
     accessibilityLabel: a11yLabel,
@@ -147,7 +158,7 @@ const Toast = ({
       }, {
         scale: stackScale
       }]
-    }, toast.style],
+    }, toast.style, toast.containerStyle],
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.tintBar, {
         width: tintBarWidth,
@@ -162,7 +173,7 @@ const Toast = ({
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
             ...fontFor(theme, 'semibold')
-          }, toast.textStyle],
+          }, toast.textStyle, toast.messageStyle],
           numberOfLines: 2,
           children: toast.message
         }), toast.description ? /*#__PURE__*/_jsx(Text, {
@@ -181,7 +192,7 @@ const Toast = ({
           pressed
         }) => [styles.actionBtn, {
           backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-        }],
+        }, toast.actionButtonStyle],
         children: /*#__PURE__*/_jsx(Text, {
           style: {
             color: tint,