@webority/mobile-ui 0.0.0-stage → 0.0.33

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TimePicker", {
+  enumerable: true,
+  get: function () {
+    return _TimePicker.TimePicker;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TimePicker.default;
+  }
+});
+var _TimePicker = _interopRequireWildcard(require("./TimePicker.js"));
+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); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Timeline/Timeline.js

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Timeline = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _color = require("../../utils/color.js");
+var _corners = require("../../utils/corners.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); }
+/**
+ * The status vocabulary is shared with the web library's AppTimeline so a
+ * sign-off history reads identically on both surfaces.
+ *
+ *   upcoming  — not started yet        (muted disc)
+ *   current   — in progress now        (warning)
+ *   done      — completed              (success)
+ *   onHold    — blocked / waiting      (info)
+ *   rejected  — declined / failed      (error)
+ *   cancelled — aborted                (muted)
+ *   skipped   — intentionally bypassed (muted)
+ *
+ * Every dot sits inside a soft halo of its own colour (the accent at 16
+ * percent), the web timeline's glow. The halo is a layout wrapper, not a
+ * platform shadow: a shadow cannot be coloured on Android and sits outside
+ * layout, while a wrapper keeps the connector spacing exact.
+ */
+
+/** Same two names as the web library's AppTimeline; orthogonal to `variant`. */
+
+const DOT = 12;
+const HALO = 6;
+const RAIL = 2;
+const GAP = 4;
+const GUTTER = 28;
+const HALO_OPACITY = 0.16;
+
+/**
+ * A chronological activity feed OR a status-progress tracker. Stepper covers a
+ * linear "which step am I on" flow; this covers "what has happened to this
+ * record", where entries carry their own status and can end in a terminal one.
+ */
+const Timeline = ({
+  items,
+  variant = 'feed',
+  orientation = 'vertical',
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const tokens = theme.components.timeline;
+  const dotSize = tokens?.dotSize ?? DOT;
+  const haloWidth = tokens?.haloWidth ?? HALO;
+  const gap = tokens?.connectorGap ?? GAP;
+  const discSize = dotSize + haloWidth * 2;
+  const styles = (0, _react.useMemo)(() => buildStyles(theme, dotSize, discSize, gap), [theme, dotSize, discSize, gap]);
+  const horizontal = orientation === 'horizontal';
+  const railColor = theme.colors.border.primary;
+
+  // Horizontal columns get an explicit equal width from the measured row.
+  // `flex: 1` alone let a column with a long unbreakable word or a wide meta
+  // line take more than its share, so the dots drifted apart unevenly. Until
+  // the first layout the columns flex, so nothing jumps on mount.
+  const [rowWidth, setRowWidth] = (0, _react.useState)(0);
+  const onRowLayout = (0, _react.useCallback)(event => {
+    const {
+      width
+    } = event.nativeEvent.layout;
+    setRowWidth(prev => prev === width ? prev : width);
+  }, []);
+  const columnWidth = horizontal && rowWidth > 0 && items.length > 0 ? rowWidth / items.length : 0;
+  const colourFor = status => {
+    switch (status) {
+      case 'done':
+        return theme.colors.success;
+      case 'current':
+        return theme.colors.warning;
+      case 'onHold':
+        return theme.colors.info;
+      case 'rejected':
+        return theme.colors.error;
+      case 'cancelled':
+      case 'skipped':
+        return theme.colors.text.tertiary;
+      default:
+        return theme.colors.text.disabled;
+    }
+  };
+  const renderDisc = (item, accent) => item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.disc,
+    children: item.icon
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.disc, {
+      backgroundColor: (0, _color.tintOf)(accent, HALO_OPACITY, theme.colors.background.tertiary)
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.dot, {
+        backgroundColor: accent
+      }]
+    })
+  });
+  const renderText = (item, status) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.title, {
+        fontSize: horizontal ? theme.typography.fontSize.sm : theme.typography.fontSize.base,
+        color: status === 'upcoming' ? theme.colors.text.secondary : theme.colors.text.primary
+      }, horizontal ? styles.centred : null],
+      children: item.title
+    }), item.meta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.meta, {
+        fontSize: theme.typography.fontSize.xs,
+        color: theme.colors.text.tertiary
+      }, horizontal ? styles.centred : null],
+      children: item.meta
+    }) : null, item.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.description, {
+        fontSize: theme.typography.fontSize.sm,
+        color: theme.colors.text.secondary
+      }, horizontal ? styles.centred : null],
+      children: item.description
+    }) : null, item.children]
+  });
+  const entries = items.map((item, index) => {
+    const status = item.status ?? (variant === 'feed' ? 'done' : 'upcoming');
+    const accent = item.color ?? colourFor(status);
+    const isFirst = index === 0;
+    const isLast = index === items.length - 1;
+    const key = item.key ?? `${item.title}-${index}`;
+    if (horizontal) {
+      // The connector is two half segments, this column's right and the next
+      // column's left, so it runs from one halo's edge to the next with the
+      // gap either side and nothing ever passes under a translucent halo.
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.hColumn, columnWidth > 0 ? {
+          width: columnWidth,
+          flex: 0
+        } : null],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.hDotRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.hSegment, {
+              marginRight: gap,
+              backgroundColor: isFirst ? 'transparent' : railColor
+            }]
+          }), renderDisc(item, accent), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.hSegment, {
+              marginLeft: gap,
+              backgroundColor: isLast ? 'transparent' : railColor
+            }]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.hBody,
+          children: renderText(item, status)
+        })]
+      }, key);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.gutter,
+        children: [renderDisc(item, accent), isLast ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.rail, {
+            backgroundColor: railColor
+          }]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.body, {
+          paddingBottom: isLast ? 0 : theme.spacing.lg
+        }],
+        children: renderText(item, status)
+      })]
+    }, key);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [horizontal ? styles.hRow : null, style],
+    onLayout: horizontal ? onRowLayout : undefined,
+    testID: testID,
+    children: entries
+  });
+};
+exports.Timeline = Timeline;
+const buildStyles = (theme, dotSize, discSize, gap) => _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row'
+  },
+  gutter: {
+    width: Math.max(GUTTER, discSize + 4),
+    alignItems: 'center'
+  },
+  disc: {
+    width: discSize,
+    height: discSize,
+    borderRadius: discSize / 2,
+    ..._corners.smoothCorners,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  dot: {
+    width: dotSize,
+    height: dotSize,
+    borderRadius: dotSize / 2,
+    ..._corners.smoothCorners
+  },
+  rail: {
+    width: RAIL,
+    flex: 1,
+    marginTop: gap,
+    borderRadius: RAIL / 2,
+    ..._corners.smoothCorners
+  },
+  body: {
+    flex: 1,
+    gap: 2,
+    // The disc fills most of the gutter, so the text needs its own inset
+    // from the halo's edge; without it the title sits against the tint.
+    paddingLeft: theme.spacing.sm
+  },
+  hRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  hColumn: {
+    flex: 1,
+    minWidth: 0,
+    alignItems: 'center'
+  },
+  hDotRow: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  hSegment: {
+    flex: 1,
+    height: RAIL,
+    borderRadius: RAIL / 2,
+    ..._corners.smoothCorners
+  },
+  hBody: {
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing.xs,
+    marginTop: theme.spacing.sm,
+    gap: 2
+  },
+  centred: {
+    textAlign: 'center'
+  },
+  title: {
+    ...(0, _index.fontFor)(theme, 'semibold'),
+    fontWeight: '600'
+  },
+  meta: {
+    ...(0, _index.fontFor)(theme, 'normal')
+  },
+  description: {
+    ...(0, _index.fontFor)(theme, 'normal')
+  }
+});
+var _default = exports.default = Timeline;
+//# sourceMappingURL=Timeline.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function () {
+    return _Timeline.Timeline;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Timeline.default;
+  }
+});
+var _Timeline = _interopRequireWildcard(require("./Timeline.js"));
+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); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Toast/Toast.js

@@ -0,0 +1,326 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toast = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _corners = require("../../utils/corners.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 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,
+  onDismiss
+}) => {
+  const theme = (0, _index.useTheme)();
+  const variant = toast.variant ?? 'default';
+  const position = toast.position ?? 'bottom';
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tint = (0, _react.useMemo)(() => tintFor(theme, variant), [theme, variant]);
+  const toastTokens = theme.components.toast;
+  const iconCircleSize = toastTokens?.iconCircleSize ?? 28;
+  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 = (0, _react.useRef)((0, _index.createAnimatedValue)(enterFrom)).current;
+  const translateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const dismissedRef = (0, _react.useRef)(false);
+  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
+  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+
+  // The stack offset rides on its own value so the enter spring (translateY)
+  // and the layout offset compose once instead of rebuilding a fresh
+  // `new Animated.Value` + `Animated.add` node on every render. setNativeValue
+  // keeps it in sync after the node has moved to the native driver.
+  const stackTranslateY = (0, _react.useRef)((0, _index.createAnimatedValue)(stackTranslate)).current;
+  (0, _react.useEffect)(() => {
+    (0, _index.setNativeValue)(stackTranslateY, stackTranslate);
+  }, [stackTranslate, stackTranslateY]);
+  const composedTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.add(translateY, stackTranslateY), [translateY, stackTranslateY]);
+  const dismiss = () => {
+    if (dismissedRef.current) {
+      return;
+    }
+    dismissedRef.current = true;
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(opacity, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(translateY, {
+      toValue: enterFrom,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]).start(() => onDismiss(toast.id));
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-once: a toast enters and schedules its own auto-dismiss. `dismiss` is re-created per render, so declaring it would restart the timer on every parent render and the toast would never leave
+  (0, _react.useEffect)(() => {
+    const enter = _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
+      toValue: 0,
+      damping: enterSpringDamping,
+      stiffness: enterSpringStiffness,
+      mass: enterSpringMass,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      useNativeDriver: true
+    })]);
+    enter.start();
+    const duration = toast.duration ?? defaultDurationMs;
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(), duration);
+      return () => {
+        enter.stop();
+        clearTimeout(timer);
+      };
+    }
+    return () => enter.stop();
+  }, []);
+  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
+    onMoveShouldSetPanResponder: (_evt, gesture) => Math.abs(gesture.dx) > Math.abs(gesture.dy) && Math.abs(gesture.dx) > 6,
+    onPanResponderMove: (_evt, gesture) => {
+      (0, _index.setNativeValue)(translateX, gesture.dx);
+      const fade = 1 - Math.min(Math.abs(gesture.dx) / 200, 1) * 0.7;
+      (0, _index.setNativeValue)(opacity, fade);
+    },
+    // A stolen responder (parent scroll, system gesture) otherwise leaves the
+    // toast parked mid-swipe at reduced opacity, neither dismissed nor reset.
+    onPanResponderTerminate: () => {
+      _reactNative.Animated.parallel([_reactNative.Animated.spring(translateX, {
+        toValue: 0,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]).start();
+    },
+    onPanResponderRelease: (_evt, gesture) => {
+      if (Math.abs(gesture.dx) > swipeDismissThreshold || Math.abs(gesture.vx) > swipeVelocityThreshold) {
+        const direction = gesture.dx >= 0 ? 1 : -1;
+        _reactNative.Animated.parallel([_reactNative.Animated.timing(translateX, {
+          toValue: direction * 500,
+          duration: theme.motion.duration.fast,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(opacity, {
+          toValue: 0,
+          duration: theme.motion.duration.fast,
+          useNativeDriver: true
+        })]).start(() => {
+          dismissedRef.current = true;
+          onDismiss(toast.id);
+        });
+      } else {
+        _reactNative.Animated.parallel([_reactNative.Animated.spring(translateX, {
+          toValue: 0,
+          useNativeDriver: true
+        }), _reactNative.Animated.spring(opacity, {
+          toValue: 1,
+          useNativeDriver: true
+        })]).start();
+      }
+    }
+  }), [translateX, opacity, swipeDismissThreshold, swipeVelocityThreshold, theme.motion.duration.fast, theme.motion.spring.snappy.damping, theme.motion.spring.snappy.stiffness, theme.motion.spring.snappy.mass, onDismiss, toast.id]);
+  const handleActionPress = () => {
+    toast.action?.onPress();
+    dismiss();
+  };
+  const renderIcon = () => {
+    if (toast.icon) {
+      return toast.icon;
+    }
+    const glyph = defaultGlyph(variant);
+    if (!glyph) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.iconCircle, {
+        width: iconCircleSize,
+        height: iconCircleSize,
+        borderRadius: iconCircleBorderRadius,
+        ..._corners.smoothCorners,
+        backgroundColor: tint + '22'
+      }, toast.iconCircleStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.iconGlyph, {
+          color: tint,
+          fontSize: iconGlyphFontSize
+        }],
+        accessible: false,
+        children: glyph
+      })
+    });
+  };
+  const a11yLabel = toast.description ? `${toast.message}. ${toast.description}` : toast.message;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    ...(enableSwipeDismiss ? panResponder.panHandlers : {}),
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: "assertive",
+    accessibilityLabel: a11yLabel,
+    testID: toast.testID,
+    style: [styles.container, {
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.lg,
+      ..._corners.smoothCorners,
+      padding: theme.spacing.md,
+      ...theme.shadows.md,
+      shadowColor: theme.shadows.md.shadowColor,
+      opacity,
+      transform: [{
+        translateY: composedTranslateY
+      }, {
+        translateX
+      }, {
+        scale: stackScale
+      }]
+    }, toast.style, toast.containerStyle],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.tintBar, {
+        width: tintBarWidth,
+        backgroundColor: tint
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textBlock,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.message, {
+            color: theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.base,
+            ...(0, _index.fontFor)(theme, 'semibold')
+          }, toast.textStyle, toast.messageStyle],
+          numberOfLines: 2,
+          children: toast.message
+        }), toast.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.description, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          numberOfLines: 3,
+          children: toast.description
+        }) : null]
+      }), toast.action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: toast.action.label,
+        onPress: handleActionPress,
+        style: ({
+          pressed
+        }) => [styles.actionBtn, {
+          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+        }, toast.actionButtonStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: tint,
+            fontSize: theme.typography.fontSize.sm,
+            ...(0, _index.fontFor)(theme, 'semibold')
+          },
+          numberOfLines: 1,
+          children: toast.action.label
+        })
+      }) : null]
+    })]
+  });
+};
+exports.Toast = Toast;
+const tintFor = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return theme.colors.success;
+    case 'error':
+      return theme.colors.error;
+    case 'warning':
+      return theme.colors.warning;
+    case 'info':
+      return theme.colors.info;
+    case 'default':
+    default:
+      return theme.colors.text.primary;
+  }
+};
+const defaultGlyph = variant => {
+  switch (variant) {
+    case 'success':
+      return '✓';
+    case 'error':
+      return '×';
+    case 'warning':
+      return '!';
+    case 'info':
+      return 'i';
+    case 'default':
+    default:
+      return '';
+  }
+};
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    marginVertical: 4
+  },
+  tintBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8
+  },
+  iconCircle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  iconGlyph: {
+    fontWeight: '700',
+    lineHeight: 18
+  },
+  textBlock: {
+    flex: 1,
+    paddingRight: 8
+  },
+  message: {
+    lineHeight: 20
+  },
+  description: {
+    marginTop: 2,
+    lineHeight: 18
+  },
+  actionBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    ..._corners.smoothCorners,
+    marginLeft: 8
+  }
+});
+var _default = exports.default = Toast;
+//# sourceMappingURL=Toast.js.map