zkit-ui 1.0.0

package/dist/services/CardToastService/index.js

@@ -0,0 +1,899 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
+exports.ToastProvider = ToastProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file CardToastService
+ * @description A service-driven toast viewport for lightweight global feedback.
+ */
+const React = __importStar(require("react"));
+const vector_icons_1 = require("@expo/vector-icons");
+const expo_image_1 = require("expo-image");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const react_native_worklets_1 = require("react-native-worklets");
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const Text_1 = require("../../ui/Text");
+// ============================================================================
+// Defaults
+// ============================================================================
+const DEFAULT_DURATION = 2400;
+const DEFAULT_OFFSET = 35;
+const DEFAULT_PLACEMENT = 'top';
+const DEFAULT_STRATEGY = 'replace';
+const DEFAULT_MAX_VISIBLE = 3;
+const DEFAULT_CLOSE_BUTTON = false;
+const DEFAULT_LIVE_REGION = 'polite';
+const MAX_VISIBLE_TOASTS = 5;
+const MAX_PENDING_TOASTS = 20;
+const TOAST_HOST_Z_INDEX = 9200;
+const DEFAULT_TOAST_ID_PREFIX = 'toast';
+const EMPTY_SNAPSHOT = { items: [] };
+const TOAST_ICON_SUCCESS = require('../../assets/icons/toast/success.webp');
+const TOAST_ICON_ERROR = require('../../assets/icons/toast/error.webp');
+const TOAST_ICON_WARNING = require('../../assets/icons/toast/warning.webp');
+const IOS_TOAST_ENTER_OFFSET = (0, zkit_tools_1.wp)(22);
+const IOS_TOAST_EXIT_OFFSET = (0, zkit_tools_1.wp)(14);
+const IOS_TOAST_CONTENT_OFFSET = (0, zkit_tools_1.wp)(6);
+const IOS_TOAST_SHADOW_RADIUS = (0, zkit_tools_1.wp)(18);
+const IOS_TOAST_ENTER_EASING = react_native_reanimated_1.Easing.bezier(0.22, 1, 0.36, 1);
+const IOS_TOAST_EXIT_EASING = react_native_reanimated_1.Easing.bezier(0.4, 0, 1, 1);
+const IOS_TOAST_ENTER_SPRING = {
+    damping: 18,
+    stiffness: 260,
+    mass: 0.78,
+};
+const IOS_TOAST_SCALE_SPRING = {
+    damping: 16,
+    stiffness: 280,
+    mass: 0.72,
+};
+const IOS_TOAST_SQUASH_SPRING = {
+    damping: 15,
+    stiffness: 240,
+    mass: 0.68,
+};
+const DEFAULTS = {
+    duration: DEFAULT_DURATION,
+    placement: DEFAULT_PLACEMENT,
+    offset: DEFAULT_OFFSET,
+    strategy: DEFAULT_STRATEGY,
+    maxVisible: DEFAULT_MAX_VISIBLE,
+    closeButton: DEFAULT_CLOSE_BUTTON,
+    accessibilityLiveRegion: DEFAULT_LIVE_REGION,
+};
+// ============================================================================
+// Normalizers
+// ============================================================================
+function isPromiseLike(value) {
+    return Boolean(value && typeof value.then === 'function');
+}
+function normalizeId(value) {
+    if (typeof value !== 'string')
+        return undefined;
+    const id = value.trim();
+    return id || undefined;
+}
+function normalizeTone(value) {
+    if (value === 'success' || value === 'error' || value === 'warning' || value === 'info' || value === 'neutral') {
+        return value;
+    }
+    return undefined;
+}
+function normalizePlacement(value) {
+    if (value === 'top' || value === 'bottom')
+        return value;
+    return undefined;
+}
+function normalizeStrategy(value) {
+    if (value === 'replace' || value === 'queue' || value === 'stack')
+        return value;
+    return undefined;
+}
+function normalizeDuration(value, fallback) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return fallback;
+    return Math.max(0, Math.round(value));
+}
+function normalizeOffset(value, fallback) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return fallback;
+    return Math.max(0, value);
+}
+function normalizeMaxVisible(value, fallback) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return fallback;
+    return Math.max(1, Math.min(MAX_VISIBLE_TOASTS, Math.round(value)));
+}
+function normalizeLiveRegion(value, fallback) {
+    if (value === 'none' || value === 'polite' || value === 'assertive')
+        return value;
+    return fallback;
+}
+function normalizeNode(value) {
+    if (value == null || value === false || value === true)
+        return undefined;
+    if (value instanceof Error)
+        return value.message || String(value);
+    return value;
+}
+function getTextFromNode(value) {
+    if (value == null || typeof value === 'boolean')
+        return '';
+    if (typeof value === 'string')
+        return value.trim();
+    if (typeof value === 'number')
+        return String(value);
+    if (Array.isArray(value))
+        return value.map(getTextFromNode).filter(Boolean).join(' ').trim();
+    if (React.isValidElement(value))
+        return getTextFromNode(value.props.children);
+    return '';
+}
+function createAccessibilityLabel(title, description) {
+    const titleText = getTextFromNode(title);
+    const descriptionText = getTextFromNode(description);
+    if (titleText && descriptionText)
+        return `${titleText}，${descriptionText}`;
+    return titleText || descriptionText || 'Notification';
+}
+function getHandleId(idOrHandle) {
+    if (!idOrHandle)
+        return undefined;
+    if (typeof idOrHandle === 'string')
+        return normalizeId(idOrHandle);
+    return normalizeId(idOrHandle.id);
+}
+function warnInvalidToast() {
+    if (typeof console === 'undefined')
+        return;
+    console.warn('[toast] show() requires title, description, or render.');
+}
+// ============================================================================
+// Store
+// ============================================================================
+class ToastStore {
+    constructor() {
+        this.defaults = { ...DEFAULTS };
+        this.snapshot = EMPTY_SNAPSHOT;
+        this.pending = [];
+        this.listeners = new Set();
+        this.timers = new Map();
+        this.idSeed = 0;
+        this.hostCount = 0;
+        this.subscribe = (listener) => {
+            this.listeners.add(listener);
+            this.hostCount += 1;
+            this.scheduleVisibleToasts();
+            return () => {
+                this.listeners.delete(listener);
+                this.hostCount = Math.max(0, this.hostCount - 1);
+                if (this.hostCount === 0)
+                    this.clearAll('provider-unmount');
+            };
+        };
+        this.getSnapshot = () => this.snapshot;
+    }
+    configure(defaults) {
+        var _a, _b, _c;
+        if (!defaults)
+            return;
+        this.defaults = {
+            duration: normalizeDuration(defaults.duration, this.defaults.duration),
+            placement: (_a = normalizePlacement(defaults.placement)) !== null && _a !== void 0 ? _a : this.defaults.placement,
+            offset: normalizeOffset(defaults.offset, this.defaults.offset),
+            strategy: (_b = normalizeStrategy(defaults.strategy)) !== null && _b !== void 0 ? _b : this.defaults.strategy,
+            maxVisible: normalizeMaxVisible(defaults.maxVisible, this.defaults.maxVisible),
+            closeButton: (_c = defaults.closeButton) !== null && _c !== void 0 ? _c : this.defaults.closeButton,
+            accessibilityLiveRegion: normalizeLiveRegion(defaults.accessibilityLiveRegion, this.defaults.accessibilityLiveRegion),
+        };
+    }
+    getDefaults() {
+        return { ...this.defaults };
+    }
+    show(options) {
+        const item = this.resolveToast(options);
+        if (!item)
+            return this.createHandle('');
+        this.enqueue(item);
+        return this.createHandle(item.id);
+    }
+    custom(render, options = {}) {
+        return this.show({ ...options, render });
+    }
+    success(title, options) {
+        return this.showShortcut('success', title, options);
+    }
+    error(title, options) {
+        return this.showShortcut('error', title, options);
+    }
+    warning(title, options) {
+        return this.showShortcut('warning', title, options);
+    }
+    info(title, options) {
+        return this.showShortcut('info', title, options);
+    }
+    neutral(title, options) {
+        return this.showShortcut('neutral', title, options);
+    }
+    update(idOrHandle, patch) {
+        const id = getHandleId(idOrHandle);
+        if (!id)
+            return false;
+        const pendingIndex = this.pending.findIndex((item) => item.id === id);
+        if (pendingIndex >= 0) {
+            this.pending[pendingIndex] = this.applyPatch(this.pending[pendingIndex], patch);
+            return true;
+        }
+        const index = this.snapshot.items.findIndex((item) => item.id === id);
+        if (index < 0)
+            return false;
+        const nextItems = [...this.snapshot.items];
+        const nextItem = this.applyPatch(nextItems[index], patch);
+        nextItems[index] = nextItem;
+        this.setItems(nextItems);
+        if (nextItem.open)
+            this.schedule(nextItem);
+        this.callOpenChange(nextItem, true, 'update');
+        return true;
+    }
+    dismiss(idOrHandle, reason = 'api') {
+        var _a;
+        const id = (_a = getHandleId(idOrHandle)) !== null && _a !== void 0 ? _a : this.getLatestOpenId();
+        if (!id)
+            return;
+        this.dismissByIds([id], reason);
+    }
+    dismissAll(reason = 'api') {
+        const openIds = this.snapshot.items.filter((item) => item.open).map((item) => item.id);
+        this.pending.forEach((item) => this.callDismiss(item, reason));
+        this.pending = [];
+        this.dismissByIds(openIds, reason);
+    }
+    isActive(idOrHandle) {
+        const id = getHandleId(idOrHandle);
+        if (!id)
+            return false;
+        return this.snapshot.items.some((item) => item.id === id && item.open) || this.pending.some((item) => item.id === id);
+    }
+    completeExit(id) {
+        if (!this.snapshot.items.some((item) => item.id === id && !item.open))
+            return;
+        this.setItems(this.snapshot.items.filter((item) => item.id !== id));
+        this.promoteQueuedToast();
+    }
+    showShortcut(tone, title, options = {}) {
+        return this.show({ ...options, title, tone });
+    }
+    resolveToast(options) {
+        var _a, _b, _c, _d, _e, _f;
+        const title = normalizeNode(options.title);
+        const description = normalizeNode(options.description);
+        if (!title && !description && !options.render) {
+            warnInvalidToast();
+            return null;
+        }
+        const now = Date.now();
+        const tone = (_a = normalizeTone(options.tone)) !== null && _a !== void 0 ? _a : 'info';
+        const duration = normalizeDuration(options.duration, this.defaults.duration);
+        const closeButton = ((_b = options.closeButton) !== null && _b !== void 0 ? _b : this.defaults.closeButton) || duration <= 0;
+        return {
+            id: (_c = normalizeId(options.id)) !== null && _c !== void 0 ? _c : this.createId(),
+            tone,
+            title,
+            description,
+            duration,
+            placement: (_d = normalizePlacement(options.placement)) !== null && _d !== void 0 ? _d : this.defaults.placement,
+            offset: normalizeOffset(options.offset, this.defaults.offset),
+            strategy: (_e = normalizeStrategy(options.strategy)) !== null && _e !== void 0 ? _e : this.defaults.strategy,
+            maxVisible: normalizeMaxVisible(options.maxVisible, this.defaults.maxVisible),
+            action: options.action,
+            closeButton,
+            icon: options.icon,
+            render: options.render,
+            accessibilityLabel: (_f = options.accessibilityLabel) !== null && _f !== void 0 ? _f : createAccessibilityLabel(title, description),
+            accessibilityLiveRegion: normalizeLiveRegion(options.accessibilityLiveRegion, tone === 'error' ? 'assertive' : this.defaults.accessibilityLiveRegion),
+            testID: options.testID,
+            style: options.style,
+            open: true,
+            createdAt: now,
+            updatedAt: now,
+            onDismiss: options.onDismiss,
+            onOpenChange: options.onOpenChange,
+        };
+    }
+    applyPatch(item, patch) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const title = 'title' in patch ? normalizeNode(patch.title) : item.title;
+        const description = 'description' in patch ? normalizeNode(patch.description) : item.description;
+        const tone = (_a = normalizeTone(patch.tone)) !== null && _a !== void 0 ? _a : item.tone;
+        const duration = 'duration' in patch ? normalizeDuration(patch.duration, item.duration) : item.duration;
+        const closeButton = 'closeButton' in patch ? (_b = patch.closeButton) !== null && _b !== void 0 ? _b : item.closeButton : item.closeButton || duration <= 0;
+        return {
+            ...item,
+            tone,
+            title,
+            description,
+            duration,
+            placement: (_c = normalizePlacement(patch.placement)) !== null && _c !== void 0 ? _c : item.placement,
+            offset: normalizeOffset(patch.offset, item.offset),
+            action: 'action' in patch ? patch.action : item.action,
+            closeButton,
+            icon: 'icon' in patch ? patch.icon : item.icon,
+            render: 'render' in patch ? patch.render : item.render,
+            accessibilityLabel: (_e = (_d = patch.accessibilityLabel) !== null && _d !== void 0 ? _d : item.accessibilityLabel) !== null && _e !== void 0 ? _e : createAccessibilityLabel(title, description),
+            accessibilityLiveRegion: normalizeLiveRegion(patch.accessibilityLiveRegion, item.accessibilityLiveRegion),
+            testID: (_f = patch.testID) !== null && _f !== void 0 ? _f : item.testID,
+            style: 'style' in patch ? patch.style : item.style,
+            onDismiss: (_g = patch.onDismiss) !== null && _g !== void 0 ? _g : item.onDismiss,
+            onOpenChange: (_h = patch.onOpenChange) !== null && _h !== void 0 ? _h : item.onOpenChange,
+            updatedAt: Date.now(),
+        };
+    }
+    enqueue(item) {
+        if (item.strategy === 'queue' && this.snapshot.items.length > 0) {
+            this.pending.push(item);
+            this.trimPendingQueue();
+            return;
+        }
+        if (item.strategy === 'replace') {
+            this.pending.forEach((pendingItem) => this.callDismiss(pendingItem, 'replace'));
+            this.pending = [];
+            this.snapshot.items.forEach((currentItem) => {
+                this.clearTimer(currentItem.id);
+                if (currentItem.open) {
+                    this.callDismiss(currentItem, 'replace');
+                    this.callOpenChange(currentItem, false, 'replace');
+                }
+            });
+            this.setItems([item]);
+            this.callOpenChange(item, true, 'show');
+            this.schedule(item);
+            return;
+        }
+        const openInPlacement = this.snapshot.items
+            .filter((toastItem) => toastItem.open && toastItem.placement === item.placement)
+            .sort((a, b) => a.createdAt - b.createdAt);
+        let nextItems = this.snapshot.items;
+        if (openInPlacement.length >= item.maxVisible) {
+            const overflowItem = openInPlacement[0];
+            nextItems = this.closeItems(nextItems, 'overflow', [overflowItem.id]);
+        }
+        this.setItems([...nextItems, item]);
+        this.callOpenChange(item, true, 'show');
+        this.schedule(item);
+    }
+    closeItems(items, reason, ids) {
+        const idSet = ids ? new Set(ids) : undefined;
+        return items.map((item) => {
+            if (!item.open || (idSet && !idSet.has(item.id)))
+                return item;
+            this.clearTimer(item.id);
+            const nextItem = {
+                ...item,
+                open: false,
+                updatedAt: Date.now(),
+                dismissedReason: reason,
+            };
+            this.callDismiss(nextItem, reason);
+            this.callOpenChange(nextItem, false, reason);
+            return nextItem;
+        });
+    }
+    dismissByIds(ids, reason) {
+        if (!ids.length)
+            return;
+        const nextItems = this.closeItems(this.snapshot.items, reason, ids);
+        this.setItems(nextItems);
+        this.promoteQueuedToast();
+    }
+    promoteQueuedToast() {
+        if (this.snapshot.items.length > 0)
+            return;
+        const nextItem = this.pending.shift();
+        if (!nextItem)
+            return;
+        this.setItems([...this.snapshot.items, nextItem]);
+        this.callOpenChange(nextItem, true, 'show');
+        this.schedule(nextItem);
+    }
+    trimPendingQueue() {
+        while (this.pending.length > MAX_PENDING_TOASTS) {
+            const dropped = this.pending.shift();
+            if (dropped)
+                this.callDismiss(dropped, 'overflow');
+        }
+    }
+    scheduleVisibleToasts() {
+        this.snapshot.items.forEach((item) => {
+            if (item.open)
+                this.schedule(item);
+        });
+    }
+    schedule(item) {
+        this.clearTimer(item.id);
+        if (this.hostCount <= 0 || !item.open || item.duration <= 0)
+            return;
+        this.timers.set(item.id, setTimeout(() => {
+            this.dismiss(item.id, 'timeout');
+        }, item.duration));
+    }
+    clearTimer(id) {
+        const timer = this.timers.get(id);
+        if (!timer)
+            return;
+        clearTimeout(timer);
+        this.timers.delete(id);
+    }
+    clearAll(reason) {
+        this.timers.forEach((timer) => clearTimeout(timer));
+        this.timers.clear();
+        [...this.snapshot.items, ...this.pending].forEach((item) => {
+            const internalItem = item;
+            if (internalItem.open || !internalItem.dismissedReason)
+                this.callDismiss(internalItem, reason);
+        });
+        this.pending = [];
+        this.setItems([]);
+    }
+    setItems(items) {
+        this.snapshot = items.length ? { items } : EMPTY_SNAPSHOT;
+        this.listeners.forEach((listener) => listener());
+    }
+    getLatestOpenId() {
+        var _a;
+        const openItems = this.snapshot.items.filter((item) => item.open);
+        return (_a = openItems.sort((a, b) => b.createdAt - a.createdAt)[0]) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    createId() {
+        this.idSeed += 1;
+        return `${DEFAULT_TOAST_ID_PREFIX}_${Date.now()}_${this.idSeed}`;
+    }
+    createHandle(id) {
+        return {
+            id,
+            dismiss: (reason = 'api') => this.dismiss(id, reason),
+            update: (patch) => {
+                this.update(id, patch);
+            },
+        };
+    }
+    callDismiss(item, reason) {
+        var _a;
+        if (item.dismissedReason && item.dismissedReason !== reason)
+            return;
+        try {
+            (_a = item.onDismiss) === null || _a === void 0 ? void 0 : _a.call(item, reason, item.id);
+        }
+        catch (error) {
+            console.error('[toast] onDismiss failed', error);
+        }
+    }
+    callOpenChange(item, open, reason) {
+        var _a;
+        try {
+            (_a = item.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(item, open, { id: item.id, open, reason });
+        }
+        catch (error) {
+            console.error('[toast] onOpenChange failed', error);
+        }
+    }
+}
+const toastStore = new ToastStore();
+exports.toast = toastStore;
+// ============================================================================
+// Provider
+// ============================================================================
+function useToastSnapshot() {
+    return React.useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot, toastStore.getSnapshot);
+}
+function ToastProvider({ children, defaults }) {
+    const snapshot = useToastSnapshot();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    React.useEffect(() => {
+        toastStore.configure(defaults);
+    }, [defaults]);
+    const topItems = React.useMemo(() => snapshot.items
+        .filter((item) => item.placement === 'top')
+        .sort((a, b) => b.createdAt - a.createdAt), [snapshot.items]);
+    const bottomItems = React.useMemo(() => snapshot.items
+        .filter((item) => item.placement === 'bottom')
+        .sort((a, b) => b.createdAt - a.createdAt), [snapshot.items]);
+    const handleExited = React.useCallback((id) => {
+        toastStore.completeExit(id);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)(ToastViewport, { insets: insets, items: topItems, placement: "top", onExited: handleExited }), (0, jsx_runtime_1.jsx)(ToastViewport, { insets: insets, items: bottomItems, placement: "bottom", onExited: handleExited })] }));
+}
+function pickToneConfig(tone) {
+    if (tone === 'success') {
+        return {
+            bgColor: '#EEF7F2',
+            borderColor: '#CFE1D9',
+            accentColor: '#16A34A',
+            iconSource: TOAST_ICON_SUCCESS,
+        };
+    }
+    if (tone === 'error') {
+        return {
+            bgColor: '#FBEEF0',
+            borderColor: '#E7D1D8',
+            accentColor: '#DC2626',
+            iconSource: TOAST_ICON_ERROR,
+        };
+    }
+    return {
+        bgColor: '#FDF7ED',
+        borderColor: '#F7E0B3',
+        accentColor: '#D97706',
+        iconSource: TOAST_ICON_WARNING,
+    };
+}
+function getDisplayContent(item) {
+    if (item.title && item.description) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.title, " ", item.description] }));
+    }
+    return item.title || item.description;
+}
+function useToastActionContext(id) {
+    return React.useMemo(() => ({
+        id,
+        dismiss: (reason = 'api') => toastStore.dismiss(id, reason),
+        update: (patch) => {
+            toastStore.update(id, patch);
+        },
+    }), [id]);
+}
+function ToastViewport({ insets, items, placement, onExited }) {
+    var _a, _b;
+    if (!items.length)
+        return null;
+    const edgeOffset = (_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : DEFAULT_OFFSET;
+    const edgeInset = placement === 'top' ? insets.top : insets.bottom;
+    const viewportStyle = placement === 'top'
+        ? { top: edgeInset + (0, zkit_tools_1.wp)(edgeOffset) }
+        : { bottom: edgeInset + (0, zkit_tools_1.wp)(edgeOffset), flexDirection: 'column-reverse' };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: [styles.viewport, viewportStyle], children: items.map((item, index) => {
+            const stackStyle = index === 0
+                ? undefined
+                : placement === 'top'
+                    ? { marginTop: (0, zkit_tools_1.wp)(8) }
+                    : { marginBottom: (0, zkit_tools_1.wp)(8) };
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: stackStyle, children: (0, jsx_runtime_1.jsx)(ToastCard, { item: item, placement: placement, onExited: onExited }) }, item.id));
+        }) }));
+}
+function ToastCardBody({ item, actionContext, toneConfig, style, children }) {
+    const theme = (0, useTheme_1.useTheme)();
+    const message = getDisplayContent(item);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.toastContent, style, { backgroundColor: toneConfig.bgColor, borderColor: toneConfig.borderColor }], children: [children, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.row, children: [renderToastIcon(item, toneConfig), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.content, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { style: [styles.message, { color: theme.colors.onSurface }], numberOfLines: 3, children: message }), item.action ? ((0, jsx_runtime_1.jsx)(ToastActionButton, { action: item.action, context: actionContext, toneConfig: toneConfig })) : null] }), item.closeButton ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: "Dismiss notification", accessibilityRole: "button", hitSlop: (0, zkit_tools_1.wp)(8), onPress: () => actionContext.dismiss('close-button'), style: ({ pressed }) => [styles.closeButton, { opacity: pressed ? 0.62 : 1 }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { name: "x", size: (0, zkit_tools_1.wp)(15), color: theme.colors.muted }) })) : null] })] }));
+}
+function IOSToastCard({ item, placement, onExited }) {
+    const actionContext = useToastActionContext(item.id);
+    const toneConfig = pickToneConfig(item.tone);
+    const direction = placement === 'top' ? -1 : 1;
+    const enterOffset = direction * IOS_TOAST_ENTER_OFFSET;
+    const exitOffset = direction * IOS_TOAST_EXIT_OFFSET;
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(item.open ? 1 : 0);
+    const translateY = (0, react_native_reanimated_1.useSharedValue)(item.open ? 0 : exitOffset);
+    const scale = (0, react_native_reanimated_1.useSharedValue)(item.open ? 1 : 0.975);
+    const squash = (0, react_native_reanimated_1.useSharedValue)(0);
+    const contentProgress = (0, react_native_reanimated_1.useSharedValue)(item.open ? 1 : 0);
+    const sheenOpacity = (0, react_native_reanimated_1.useSharedValue)(item.open ? 0.08 : 0);
+    const isInteractive = Boolean(item.action || item.closeButton || item.render);
+    React.useEffect(() => {
+        return () => {
+            (0, react_native_reanimated_1.cancelAnimation)(opacity);
+            (0, react_native_reanimated_1.cancelAnimation)(translateY);
+            (0, react_native_reanimated_1.cancelAnimation)(scale);
+            (0, react_native_reanimated_1.cancelAnimation)(squash);
+            (0, react_native_reanimated_1.cancelAnimation)(contentProgress);
+            (0, react_native_reanimated_1.cancelAnimation)(sheenOpacity);
+        };
+    }, [contentProgress, opacity, scale, sheenOpacity, squash, translateY]);
+    React.useEffect(() => {
+        (0, react_native_reanimated_1.cancelAnimation)(opacity);
+        (0, react_native_reanimated_1.cancelAnimation)(translateY);
+        (0, react_native_reanimated_1.cancelAnimation)(scale);
+        (0, react_native_reanimated_1.cancelAnimation)(squash);
+        (0, react_native_reanimated_1.cancelAnimation)(contentProgress);
+        (0, react_native_reanimated_1.cancelAnimation)(sheenOpacity);
+        if (item.open) {
+            opacity.value = 0;
+            translateY.value = enterOffset;
+            scale.value = 0.955;
+            squash.value = 1;
+            contentProgress.value = 0;
+            sheenOpacity.value = 0.14;
+            opacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 220, easing: IOS_TOAST_ENTER_EASING });
+            translateY.value = (0, react_native_reanimated_1.withSpring)(0, IOS_TOAST_ENTER_SPRING);
+            scale.value = (0, react_native_reanimated_1.withSpring)(1, IOS_TOAST_SCALE_SPRING);
+            squash.value = (0, react_native_reanimated_1.withSpring)(0, IOS_TOAST_SQUASH_SPRING);
+            contentProgress.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 260, easing: IOS_TOAST_ENTER_EASING });
+            sheenOpacity.value = (0, react_native_reanimated_1.withTiming)(0.06, { duration: 340, easing: IOS_TOAST_ENTER_EASING });
+            return;
+        }
+        opacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 160, easing: IOS_TOAST_EXIT_EASING }, (finished) => {
+            if (finished)
+                (0, react_native_worklets_1.scheduleOnRN)(onExited, item.id);
+        });
+        translateY.value = (0, react_native_reanimated_1.withTiming)(exitOffset, { duration: 180, easing: IOS_TOAST_EXIT_EASING });
+        scale.value = (0, react_native_reanimated_1.withTiming)(0.975, { duration: 180, easing: IOS_TOAST_EXIT_EASING });
+        squash.value = (0, react_native_reanimated_1.withTiming)(0.32, { duration: 120, easing: IOS_TOAST_EXIT_EASING });
+        contentProgress.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 120, easing: IOS_TOAST_EXIT_EASING });
+        sheenOpacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 110, easing: IOS_TOAST_EXIT_EASING });
+    }, [
+        contentProgress,
+        enterOffset,
+        exitOffset,
+        item.id,
+        item.open,
+        onExited,
+        opacity,
+        scale,
+        sheenOpacity,
+        squash,
+        translateY,
+    ]);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const scaleX = scale.value * (0, react_native_reanimated_1.interpolate)(squash.value, [0, 1], [1, 1.028]);
+        const scaleY = scale.value * (0, react_native_reanimated_1.interpolate)(squash.value, [0, 1], [1, 0.942]);
+        return {
+            opacity: opacity.value,
+            transform: [{ translateY: translateY.value }, { scaleX }, { scaleY }],
+            shadowOpacity: (0, react_native_reanimated_1.interpolate)(opacity.value, [0, 1], [0, 0.16]),
+            shadowRadius: (0, react_native_reanimated_1.interpolate)(opacity.value, [0, 1], [0, IOS_TOAST_SHADOW_RADIUS]),
+        };
+    });
+    const contentAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: (0, react_native_reanimated_1.interpolate)(contentProgress.value, [0, 1], [0.7, 1]),
+        transform: [
+            { translateY: (0, react_native_reanimated_1.interpolate)(contentProgress.value, [0, 1], [direction * IOS_TOAST_CONTENT_OFFSET, 0]) },
+            { scale: (0, react_native_reanimated_1.interpolate)(contentProgress.value, [0, 1], [0.985, 1]) },
+        ],
+    }));
+    const sheenAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: sheenOpacity.value,
+    }));
+    if (item.render) {
+        return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: isInteractive ? 'auto' : 'none', accessible: !isInteractive, accessibilityRole: "alert", accessibilityLabel: item.accessibilityLabel, accessibilityLiveRegion: item.accessibilityLiveRegion, shouldRasterizeIOS: true, style: [styles.toast, styles.toastIOS, animatedStyle, item.style], testID: item.testID, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: contentAnimatedStyle, children: item.render({ ...actionContext, toast: item }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: isInteractive ? 'auto' : 'none', accessible: !isInteractive, accessibilityRole: "alert", accessibilityLabel: item.accessibilityLabel, accessibilityLiveRegion: item.accessibilityLiveRegion, shouldRasterizeIOS: true, style: [
+            styles.toast,
+            styles.toastIOS,
+            styles.toastSurface,
+            { backgroundColor: toneConfig.bgColor },
+            animatedStyle,
+            item.style,
+        ], testID: item.testID, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: contentAnimatedStyle, children: (0, jsx_runtime_1.jsx)(ToastCardBody, { item: item, actionContext: actionContext, toneConfig: toneConfig, style: styles.toastContentIOS, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [styles.toastSheen, sheenAnimatedStyle] }) }) }) }));
+}
+function DefaultToastCard({ item, placement, onExited }) {
+    const actionContext = useToastActionContext(item.id);
+    const toneConfig = pickToneConfig(item.tone);
+    const direction = placement === 'top' ? -1 : 1;
+    const anim = React.useRef(new react_native_1.Animated.Value(0)).current;
+    const lastVisibleRef = React.useRef(false);
+    const isInteractive = Boolean(item.action || item.closeButton || item.render);
+    React.useEffect(() => {
+        return () => {
+            anim.stopAnimation();
+        };
+    }, [anim]);
+    React.useEffect(() => {
+        if (item.open && !lastVisibleRef.current) {
+            anim.stopAnimation();
+            anim.setValue(0);
+            react_native_1.Animated.timing(anim, {
+                toValue: 1,
+                duration: 160,
+                easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
+                useNativeDriver: true,
+            }).start();
+            lastVisibleRef.current = true;
+            return;
+        }
+        if (!item.open && lastVisibleRef.current) {
+            anim.stopAnimation();
+            react_native_1.Animated.timing(anim, {
+                toValue: 0,
+                duration: 140,
+                easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
+                useNativeDriver: true,
+            }).start(() => {
+                lastVisibleRef.current = false;
+                onExited(item.id);
+            });
+        }
+    }, [anim, item.id, item.open, onExited]);
+    const animatedStyle = React.useMemo(() => ({
+        opacity: anim,
+        transform: [
+            {
+                translateY: anim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [direction * (0, zkit_tools_1.wp)(6), 0],
+                }),
+            },
+        ],
+    }), [anim, direction]);
+    if (item.render) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { renderToHardwareTextureAndroid: react_native_1.Platform.OS === 'android', shouldRasterizeIOS: react_native_1.Platform.OS === 'ios', pointerEvents: isInteractive ? 'auto' : 'none', accessible: !isInteractive, accessibilityRole: "alert", accessibilityLabel: item.accessibilityLabel, accessibilityLiveRegion: item.accessibilityLiveRegion, style: [styles.toast, animatedStyle, item.style], testID: item.testID, children: item.render({ ...actionContext, toast: item }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { renderToHardwareTextureAndroid: react_native_1.Platform.OS === 'android', shouldRasterizeIOS: react_native_1.Platform.OS === 'ios', pointerEvents: isInteractive ? 'auto' : 'none', accessible: !isInteractive, accessibilityRole: "alert", accessibilityLabel: item.accessibilityLabel, accessibilityLiveRegion: item.accessibilityLiveRegion, style: [
+            styles.toast,
+            styles.toastSurface,
+            { backgroundColor: toneConfig.bgColor },
+            animatedStyle,
+            item.style,
+        ], testID: item.testID, children: (0, jsx_runtime_1.jsx)(ToastCardBody, { item: item, actionContext: actionContext, toneConfig: toneConfig }) }));
+}
+function ToastCard(props) {
+    if (react_native_1.Platform.OS === 'ios')
+        return (0, jsx_runtime_1.jsx)(IOSToastCard, { ...props });
+    return (0, jsx_runtime_1.jsx)(DefaultToastCard, { ...props });
+}
+function renderToastIcon(item, toneConfig) {
+    if (item.icon === false)
+        return null;
+    const icon = typeof item.icon === 'function'
+        ? item.icon({ toast: item, tone: item.tone, color: toneConfig.accentColor, size: (0, zkit_tools_1.wp)(24) })
+        : item.icon;
+    if (icon)
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.iconSlot, children: icon });
+    return (0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: toneConfig.iconSource, style: styles.iconImage, contentFit: "contain" });
+}
+function ToastActionButton({ action, context, toneConfig }) {
+    const handlePress = React.useCallback(() => {
+        var _a, _b;
+        const closeOnPress = (_a = action.closeOnPress) !== null && _a !== void 0 ? _a : true;
+        const closeIfNeeded = (result) => {
+            if (closeOnPress && result !== false)
+                context.dismiss('action');
+        };
+        try {
+            const result = (_b = action.onPress) === null || _b === void 0 ? void 0 : _b.call(action, context);
+            if (isPromiseLike(result)) {
+                result.then(closeIfNeeded).catch((error) => {
+                    console.error('[toast] action failed', error);
+                    if (closeOnPress)
+                        context.dismiss('action');
+                });
+                return;
+            }
+            closeIfNeeded(result);
+        }
+        catch (error) {
+            console.error('[toast] action failed', error);
+            if (closeOnPress)
+                context.dismiss('action');
+        }
+    }, [action, context]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: action.accessibilityLabel, accessibilityRole: "button", onPress: handlePress, style: ({ pressed }) => [
+            styles.actionButton,
+            {
+                borderColor: toneConfig.borderColor,
+                opacity: pressed ? 0.72 : 1,
+            },
+        ], testID: action.testID, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: toneConfig.accentColor, numberOfLines: 1, size: "xs", weight: "semibold", children: action.label }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    viewport: {
+        position: 'absolute',
+        left: (0, zkit_tools_1.wp)(0),
+        right: (0, zkit_tools_1.wp)(0),
+        alignItems: 'center',
+        zIndex: TOAST_HOST_Z_INDEX,
+        elevation: react_native_1.Platform.OS === 'android' ? TOAST_HOST_Z_INDEX : 0,
+    },
+    toast: {
+        width: (0, zkit_tools_1.wp)(320),
+        maxWidth: '92%',
+        alignSelf: 'center',
+        shadowColor: '#000000',
+        shadowOffset: { width: (0, zkit_tools_1.wp)(0), height: (0, zkit_tools_1.wp)(2) },
+        shadowOpacity: 0.1,
+        shadowRadius: (0, zkit_tools_1.wp)(8),
+        elevation: (0, zkit_tools_1.wp)(3),
+    },
+    toastSurface: {
+        borderRadius: (0, zkit_tools_1.wp)(10),
+    },
+    toastIOS: {
+        borderRadius: (0, zkit_tools_1.wp)(10),
+        shadowOffset: { width: (0, zkit_tools_1.wp)(0), height: (0, zkit_tools_1.wp)(10) },
+        shadowOpacity: 0.16,
+        shadowRadius: (0, zkit_tools_1.wp)(20),
+    },
+    toastContent: {
+        borderRadius: (0, zkit_tools_1.wp)(10),
+        padding: (0, zkit_tools_1.wp)(12),
+        borderWidth: (0, zkit_tools_1.wp)(1),
+    },
+    toastContentIOS: {
+        borderRadius: (0, zkit_tools_1.wp)(10),
+        overflow: 'hidden',
+    },
+    toastSheen: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: '#FFFFFF',
+        borderRadius: (0, zkit_tools_1.wp)(10),
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        columnGap: (0, zkit_tools_1.wp)(10),
+    },
+    iconImage: {
+        width: (0, zkit_tools_1.wp)(24),
+        height: (0, zkit_tools_1.wp)(24),
+        flexShrink: 0,
+    },
+    iconSlot: {
+        width: (0, zkit_tools_1.wp)(24),
+        height: (0, zkit_tools_1.wp)(24),
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+    },
+    content: {
+        flex: 1,
+    },
+    message: {
+        fontSize: (0, zkit_tools_1.wp)(13),
+        lineHeight: (0, zkit_tools_1.wp)(18),
+    },
+    actionButton: {
+        alignSelf: 'flex-start',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: (0, zkit_tools_1.wp)(28),
+        marginTop: (0, zkit_tools_1.wp)(8),
+        paddingHorizontal: (0, zkit_tools_1.wp)(10),
+        borderRadius: (0, zkit_tools_1.wp)(14),
+        borderWidth: (0, zkit_tools_1.wp)(1),
+        backgroundColor: '#FFFFFF66',
+    },
+    closeButton: {
+        width: (0, zkit_tools_1.wp)(28),
+        height: (0, zkit_tools_1.wp)(28),
+        borderRadius: (0, zkit_tools_1.wp)(14),
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        marginLeft: (0, zkit_tools_1.wp)(2),
+    },
+});