@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/BottomSheet.js

@@ -0,0 +1,374 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const useThemeColors_1 = require("../hooks/useThemeColors");
+// Keyboard handler — only on native platforms. On web, keyboard events are handled by the browser.
+const noopKeyboardHandler = (_handlers, _deps) => { };
+let useKeyboardHandler = noopKeyboardHandler;
+if (react_native_1.Platform.OS !== 'web') {
+    try {
+        useKeyboardHandler = require('react-native-keyboard-controller').useKeyboardHandler;
+    }
+    catch {
+        // Keyboard controller not available
+    }
+}
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+const SPRING_CONFIG = {
+    damping: 25,
+    stiffness: 300,
+    mass: 0.8,
+};
+const BottomSheet = (0, react_1.forwardRef)((props, ref) => {
+    const { children, onDismiss, enablePanDownToClose = true, backgroundComponent, backdropComponent, style, enableHandlePanningGesture = true, onDismissAttempt, detached = false, } = props;
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const colors = (0, useThemeColors_1.useThemeColors)();
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [rendered, setRendered] = (0, react_1.useState)(false); // keep mounted for exit animation
+    const closeTimeoutRef = (0, react_1.useRef)(null);
+    const hasClosedRef = (0, react_1.useRef)(false);
+    const scrollViewRef = (0, react_1.useRef)(null);
+    const translateY = (0, react_native_reanimated_1.useSharedValue)(SCREEN_HEIGHT);
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(0);
+    const scrollOffsetY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const isScrollAtTop = (0, react_native_reanimated_1.useSharedValue)(true);
+    const allowPanClose = (0, react_native_reanimated_1.useSharedValue)(true);
+    const keyboardHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    const context = (0, react_native_reanimated_1.useSharedValue)({ y: 0 });
+    useKeyboardHandler({
+        onMove: (e) => {
+            'worklet';
+            keyboardHeight.value = e.height;
+        },
+        onEnd: (e) => {
+            'worklet';
+            keyboardHeight.value = e.height;
+        },
+    }, []);
+    // Dismiss callbacks
+    const safeClose = (0, react_1.useCallback)(() => {
+        if (onDismissAttempt?.()) {
+            onDismiss?.();
+        }
+        else if (!onDismissAttempt) {
+            onDismiss?.();
+        }
+    }, [onDismiss, onDismissAttempt]);
+    const finishClose = (0, react_1.useCallback)(() => {
+        if (hasClosedRef.current)
+            return;
+        hasClosedRef.current = true;
+        safeClose();
+        setRendered(false);
+    }, [safeClose]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: opacity and translateY are Reanimated SharedValues (stable refs) that should not be listed as dependencies
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            if (closeTimeoutRef.current) {
+                clearTimeout(closeTimeoutRef.current);
+                closeTimeoutRef.current = null;
+            }
+            hasClosedRef.current = false;
+            opacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 250 });
+            translateY.value = (0, react_native_reanimated_1.withSpring)(0, SPRING_CONFIG);
+        }
+        else if (rendered) {
+            opacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 250 }, (finished) => {
+                if (finished) {
+                    (0, react_native_reanimated_1.runOnJS)(finishClose)();
+                }
+            });
+            translateY.value = (0, react_native_reanimated_1.withSpring)(SCREEN_HEIGHT, { ...SPRING_CONFIG, stiffness: 250 });
+            // Fallback timer to ensure close completes (especially on web)
+            if (closeTimeoutRef.current) {
+                clearTimeout(closeTimeoutRef.current);
+            }
+            closeTimeoutRef.current = setTimeout(() => {
+                finishClose();
+                closeTimeoutRef.current = null;
+            }, 300);
+        }
+    }, [visible, rendered, finishClose]);
+    // Clear pending timeout on unmount
+    (0, react_1.useEffect)(() => () => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    // Apply web scrollbar styles when colors change
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS === 'web') {
+            createWebScrollbarStyle(colors.border);
+        }
+    }, [colors.border]);
+    const present = (0, react_1.useCallback)(() => {
+        setRendered(true);
+        setVisible(true);
+    }, []);
+    const dismiss = (0, react_1.useCallback)(() => {
+        setVisible(false);
+    }, []);
+    const scrollTo = (0, react_1.useCallback)((y, animated = true) => {
+        scrollViewRef.current?.scrollTo({ y, animated });
+    }, []);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        present,
+        dismiss,
+        close: dismiss,
+        expand: present,
+        collapse: dismiss,
+        scrollTo,
+    }), [present, dismiss, scrollTo]);
+    const nativeGesture = (0, react_1.useMemo)(() => react_native_gesture_handler_1.Gesture.Native(), []);
+    const panGesture = react_native_gesture_handler_1.Gesture.Pan()
+        .enabled(enablePanDownToClose)
+        .simultaneousWithExternalGesture(nativeGesture)
+        .onStart(() => {
+        'worklet';
+        context.value = { y: translateY.value };
+        allowPanClose.value = scrollOffsetY.value <= 8;
+    })
+        .onUpdate((event) => {
+        'worklet';
+        if (!allowPanClose.value) {
+            return;
+        }
+        const newTranslateY = context.value.y + event.translationY;
+        // If user is scrolling down while content isn't at (or near) the top, let ScrollView handle it
+        const atTopOrNearTop = scrollOffsetY.value <= 8; // slightly larger tolerance for smoother handoff
+        if (event.translationY > 0 && !atTopOrNearTop) {
+            return;
+        }
+        if (newTranslateY >= 0) {
+            translateY.value = newTranslateY;
+        }
+        else if (detached) {
+            // Only allow overdrag (pulling up beyond top) when detached
+            translateY.value = newTranslateY * 0.3;
+        }
+        else {
+            // In normal mode, prevent overdrag - clamp to 0
+            translateY.value = 0;
+        }
+    })
+        .onEnd((event) => {
+        'worklet';
+        if (!allowPanClose.value) {
+            return;
+        }
+        const velocity = event.velocityY;
+        const distance = translateY.value;
+        // Require a deeper pull to close (more like native bottom sheets)
+        const closeThreshold = Math.max(140, SCREEN_HEIGHT * 0.25);
+        const fastSwipeThreshold = 900;
+        const shouldClose = velocity > fastSwipeThreshold ||
+            (distance > closeThreshold && velocity > -300);
+        if (shouldClose) {
+            translateY.value = (0, react_native_reanimated_1.withSpring)(SCREEN_HEIGHT, {
+                ...SPRING_CONFIG,
+                velocity: velocity,
+            });
+            opacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 250 }, (finished) => {
+                if (finished) {
+                    (0, react_native_reanimated_1.runOnJS)(finishClose)();
+                }
+            });
+        }
+        else {
+            translateY.value = (0, react_native_reanimated_1.withSpring)(0, {
+                ...SPRING_CONFIG,
+                velocity: velocity,
+            });
+        }
+    });
+    const backdropStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: opacity.value,
+    }));
+    const sheetStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const scale = (0, react_native_reanimated_1.interpolate)(translateY.value, [0, SCREEN_HEIGHT], [1, 0.95]);
+        return {
+            transform: [
+                { translateY: translateY.value - keyboardHeight.value },
+                { scale },
+            ],
+        };
+    });
+    const sheetHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        maxHeight: SCREEN_HEIGHT - keyboardHeight.value - insets.top - (detached ? insets.bottom + 16 : 0),
+    }), [insets.top, insets.bottom, detached]);
+    const sheetMarginStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        // Only add margin when detached, otherwise extend behind safe area
+        if (detached) {
+            return {
+                marginBottom: keyboardHeight.value > 0 ? 16 : insets.bottom + 16,
+            };
+        }
+        return {
+            marginBottom: 0,
+        };
+    }, [insets.bottom, detached]);
+    const handleBackdropPress = (0, react_1.useCallback)(() => {
+        // Always animate close on backdrop press
+        if (onDismissAttempt && !onDismissAttempt()) {
+            return;
+        }
+        dismiss();
+    }, [onDismissAttempt, dismiss]);
+    const scrollHandler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
+        onScroll: (event) => {
+            scrollOffsetY.value = event.contentOffset.y;
+            isScrollAtTop.value = event.contentOffset.y <= 0;
+        },
+    });
+    const dynamicStyles = (0, react_1.useMemo)(() => {
+        const isDark = colors.background === '#000000';
+        return react_native_1.StyleSheet.create({
+            handle: {
+                ...styles.handle,
+                backgroundColor: isDark ? '#444' : '#C7C7CC',
+            },
+            sheet: {
+                ...styles.sheet,
+                backgroundColor: colors.background,
+                ...(detached ? styles.sheetDetached : styles.sheetNormal),
+            },
+            scrollContent: {
+                ...styles.scrollContent,
+                // In normal mode, don't add padding here - screens handle their own padding
+                // The sheet extends behind safe area, and screens add padding as needed
+            },
+        });
+    }, [colors.background, detached]);
+    if (!rendered)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: rendered, transparent: true, animationType: "none", statusBarTranslucent: true, onRequestClose: dismiss, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.backdrop, backdropStyle], children: backdropComponent ? (backdropComponent({ onPress: handleBackdropPress })) : ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.backdropTouchable, onPress: handleBackdropPress, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill }) })) }), (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [dynamicStyles.sheet, sheetMarginStyle, sheetStyle, sheetHeightStyle], children: [backgroundComponent?.({ style: styles.background }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: dynamicStyles.handle }), (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: nativeGesture, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.ScrollView, { ref: scrollViewRef, style: [
+                                        styles.scrollView,
+                                        react_native_1.Platform.OS === 'web' && {
+                                            scrollbarWidth: 'thin',
+                                            scrollbarColor: `${colors.border} transparent`,
+                                        },
+                                    ], contentContainerStyle: dynamicStyles.scrollContent, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", onScroll: scrollHandler, scrollEventThrottle: 16, ...(react_native_1.Platform.OS === 'web' ? { className: 'bottom-sheet-scrollview' } : undefined), onLayout: () => {
+                                        if (react_native_1.Platform.OS === 'web') {
+                                            createWebScrollbarStyle(colors.border);
+                                        }
+                                    }, children: children }) })] }) })] }) }));
+});
+BottomSheet.displayName = 'BottomSheet';
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    backdropTouchable: {
+        flex: 1,
+    },
+    sheet: {
+        position: 'absolute',
+        bottom: 0,
+        overflow: 'hidden',
+        maxWidth: 800,
+        alignSelf: 'center',
+        marginHorizontal: 'auto',
+    },
+    sheetDetached: {
+        left: 16,
+        right: 16,
+        borderRadius: 24,
+    },
+    sheetNormal: {
+        left: 0,
+        right: 0,
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    handle: {
+        position: 'absolute',
+        top: 10,
+        left: '50%',
+        marginLeft: -18,
+        width: 36,
+        height: 5,
+        borderRadius: 3,
+        zIndex: 100,
+    },
+    background: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+});
+// Create web scrollbar styles dynamically based on theme
+const createWebScrollbarStyle = (borderColor) => {
+    if (react_native_1.Platform.OS !== 'web' || typeof document === 'undefined')
+        return;
+    const styleId = 'bottom-sheet-scrollbar-style';
+    let styleElement = document.getElementById(styleId);
+    if (!styleElement) {
+        styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        document.head.appendChild(styleElement);
+    }
+    // Use theme border color for scrollbar
+    const scrollbarColor = borderColor;
+    const scrollbarHoverColor = borderColor === '#E5E5EA' ? '#C7C7CC' : '#555';
+    styleElement.textContent = `
+        .bottom-sheet-scrollview::-webkit-scrollbar {
+            width: 6px;
+        }
+        .bottom-sheet-scrollview::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 10px;
+        }
+        .bottom-sheet-scrollview::-webkit-scrollbar-thumb {
+            background: ${scrollbarColor};
+            border-radius: 10px;
+        }
+        .bottom-sheet-scrollview::-webkit-scrollbar-thumb:hover {
+            background: ${scrollbarHoverColor};
+        }
+    `;
+};
+exports.default = BottomSheet;

package/src/ui/components/BottomSheetRouter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RouteName } from '../navigation/routes';
+export interface BottomSheetRouterProps {
+    onScreenChange?: (screen: RouteName | null) => void;
+    onDismiss?: () => void;
+}
+declare const _default: React.NamedExoticComponent<BottomSheetRouterProps>;
+export default _default;

package/src/ui/components/BottomSheetRouter.js

@@ -0,0 +1,211 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const zustand_1 = require("zustand");
+const routes_1 = require("../navigation/routes");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const theme_1 = require("../constants/theme");
+const BottomSheet_1 = __importDefault(require("./BottomSheet"));
+const bottomSheetManager_1 = require("../navigation/bottomSheetManager");
+class ScreenErrorBoundary extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        if (__DEV__) {
+            console.error(`[BottomSheetRouter] Screen "${this.props.screenName}" crashed:`, error, info.componentStack);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.screenName !== this.props.screenName && this.state.error) {
+            this.setState({ error: null });
+        }
+    }
+    render() {
+        if (this.state.error) {
+            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: errorStyles.container, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: errorStyles.title, children: "Something went wrong" }), __DEV__ && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: errorStyles.message, children: this.state.error.message }))] }));
+        }
+        return this.props.children;
+    }
+}
+const errorStyles = react_native_1.StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
+    title: { fontSize: 16, fontWeight: '600', marginBottom: 8 },
+    message: { fontSize: 13, color: '#888', textAlign: 'center' },
+});
+/**
+ * BottomSheetRouter - Navigation container for bottom sheet screens
+ */
+const BottomSheetRouter = ({ onScreenChange, onDismiss }) => {
+    const sheetRef = (0, react_1.useRef)(null);
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const colors = theme_1.Colors[colorScheme ?? 'light'];
+    const prevScreenRef = (0, react_1.useRef)(null);
+    const { currentScreen, screenProps, currentStep, isOpen } = (0, zustand_1.useStore)(bottomSheetManager_1.bottomSheetStore);
+    const ScreenComponent = (0, react_1.useMemo)(() => {
+        if (!currentScreen)
+            return null;
+        const component = (0, routes_1.getScreenComponent)(currentScreen);
+        if (__DEV__ && !component) {
+            console.error(`[BottomSheetRouter] getScreenComponent("${currentScreen}") returned undefined — the screen's lazy require() likely failed.`);
+        }
+        return component ?? null;
+    }, [currentScreen]);
+    // Notify screen changes
+    (0, react_1.useEffect)(() => {
+        if (prevScreenRef.current !== currentScreen) {
+            onScreenChange?.(currentScreen);
+            prevScreenRef.current = currentScreen;
+        }
+    }, [currentScreen, onScreenChange]);
+    // Control visibility
+    (0, react_1.useEffect)(() => {
+        if (!sheetRef.current)
+            return;
+        if (isOpen) {
+            sheetRef.current.present();
+        }
+        else {
+            sheetRef.current.dismiss();
+        }
+    }, [isOpen]);
+    // Android back button
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const handler = react_native_1.BackHandler.addEventListener('hardwareBackPress', () => {
+            handleGoBack();
+            return true;
+        });
+        return () => handler.remove();
+    }, [isOpen]);
+    const navigate = (0, react_1.useCallback)((screen, props) => {
+        if (!(0, routes_1.isValidRoute)(screen)) {
+            if (__DEV__)
+                console.warn(`[BottomSheetRouter] Invalid route: ${screen}`);
+            return;
+        }
+        (0, bottomSheetManager_1.showBottomSheet)({ screen, props });
+    }, []);
+    const handleGoBack = (0, react_1.useCallback)(() => {
+        const state = (0, bottomSheetManager_1.getState)();
+        // Try history first
+        if (state.history.length > 0) {
+            (0, bottomSheetManager_1.goBack)();
+            return true;
+        }
+        // Try step back
+        const step = state.currentStep ?? 0;
+        if (step > 0) {
+            (0, bottomSheetManager_1.updateState)({
+                currentStep: step - 1,
+                screenProps: { ...state.screenProps, initialStep: step - 1 },
+            });
+            return true;
+        }
+        // Close
+        (0, bottomSheetManager_1.closeBottomSheet)();
+        return true;
+    }, []);
+    const canDismiss = (0, react_1.useCallback)(() => {
+        const state = (0, bottomSheetManager_1.getState)();
+        if (state.history.length > 0)
+            return false;
+        const step = state.currentStep ?? 0;
+        return step <= 0;
+    }, []);
+    const handleDismissAttempt = (0, react_1.useCallback)(() => {
+        if (!canDismiss()) {
+            handleGoBack();
+            return false;
+        }
+        return true;
+    }, [canDismiss, handleGoBack]);
+    const handleDismiss = (0, react_1.useCallback)(() => {
+        (0, bottomSheetManager_1.closeBottomSheet)();
+        onDismiss?.();
+    }, [onDismiss]);
+    const handleStepChange = (0, react_1.useCallback)((step) => {
+        const state = (0, bottomSheetManager_1.getState)();
+        (0, bottomSheetManager_1.updateState)({
+            currentStep: step,
+            screenProps: { ...state.screenProps, initialStep: step },
+        });
+    }, []);
+    const scrollTo = (0, react_1.useCallback)((y, animated) => {
+        sheetRef.current?.scrollTo(y, animated);
+    }, []);
+    const renderBackground = (0, react_1.useCallback)((props) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.background, { backgroundColor: colors.background }, props.style] })), [colors.background]);
+    const screenPropsValue = (0, react_1.useMemo)(() => {
+        const { initialStep: _, ...rest } = screenProps;
+        return {
+            navigate,
+            goBack: handleGoBack,
+            onClose: bottomSheetManager_1.closeBottomSheet,
+            onAuthenticated: bottomSheetManager_1.closeBottomSheet,
+            theme: colorScheme ?? 'light',
+            currentScreen: currentScreen ?? undefined,
+            initialStep: currentStep ?? screenProps?.initialStep,
+            onStepChange: handleStepChange,
+            scrollTo,
+            ...rest,
+        };
+    }, [navigate, handleGoBack, colorScheme, currentScreen, currentStep, screenProps, handleStepChange, scrollTo]);
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.default, { ref: sheetRef, enablePanDownToClose: true, enableHandlePanningGesture: true, backgroundComponent: renderBackground, style: styles.container, onDismiss: handleDismiss, onDismissAttempt: handleDismissAttempt, children: ScreenComponent && currentScreen && ((0, jsx_runtime_1.jsx)(ScreenErrorBoundary, { screenName: currentScreen, children: (0, jsx_runtime_1.jsx)(ScreenComponent, { ...screenPropsValue }) })) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        maxWidth: 800,
+        width: '100%',
+        alignSelf: 'center',
+        marginHorizontal: 'auto',
+    },
+    background: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        overflow: 'hidden',
+    },
+});
+exports.default = react_1.default.memo(BottomSheetRouter);

package/src/ui/components/CrossFadeIcon.d.ts

@@ -0,0 +1,26 @@
+import { type IconSource } from './Icon';
+import type { ThemeProp } from './types';
+type Props = {
+    /**
+     * Icon to display for the `CrossFadeIcon`.
+     */
+    source: IconSource;
+    /**
+     * Color of the icon.
+     */
+    color: string;
+    /**
+     * Size of the icon.
+     */
+    size: number;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+declare const CrossFadeIcon: ({ color, size, source, theme: themeOverrides, testID, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CrossFadeIcon;