zkit-ui 1.0.0

package/dist/ui/Sheet/index.js

@@ -0,0 +1,832 @@
+"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.Sheet = exports.SheetHeader = exports.SheetFooter = exports.SheetContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(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 react_native_worklets_1 = require("react-native-worklets");
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const nativeBottom_1 = require("./nativeBottom");
+const slots_1 = require("./slots");
+var slots_2 = require("./slots");
+Object.defineProperty(exports, "SheetContent", { enumerable: true, get: function () { return slots_2.SheetContent; } });
+Object.defineProperty(exports, "SheetFooter", { enumerable: true, get: function () { return slots_2.SheetFooter; } });
+Object.defineProperty(exports, "SheetHeader", { enumerable: true, get: function () { return slots_2.SheetHeader; } });
+const DEFAULT_BACKDROP_OPACITY = 0.42;
+const DEFAULT_DISMISSIBLE = true;
+const DEFAULT_DRAGGABLE = true;
+const DEFAULT_HANDLE_VISIBLE = true;
+const DEFAULT_OPEN_DURATION = 260;
+const DEFAULT_CLOSE_DURATION = 210;
+const DEFAULT_EASING = react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic);
+const DEFAULT_SIDE_SIZE_RATIO = 0.86;
+const DEFAULT_TOP_MAX_RATIO = 0.82;
+const DEFAULT_DRAG_VELOCITY = 900;
+const BOTTOM_HANDLE_RESERVE = (0, zkit_tools_1.wp)(36);
+const TOP_HANDLE_RESERVE = (0, zkit_tools_1.wp)(20);
+const SIDE_HANDLE_RESERVE = (0, zkit_tools_1.wp)(24);
+const SIDE_HANDLE_INSET = (0, zkit_tools_1.wp)(4);
+const SIDE_HANDLE_WIDTH = (0, zkit_tools_1.wp)(16);
+function clampNumber(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.max(min, Math.min(max, value));
+}
+function resolveDuration(duration, fallback) {
+    if (duration == null || !Number.isFinite(duration))
+        return fallback;
+    return Math.max(0, duration);
+}
+function resolveAnimation(animation) {
+    var _a, _b, _c, _d;
+    if (animation === false) {
+        return {
+            openTiming: {
+                duration: 0,
+                easing: DEFAULT_EASING,
+                reduceMotion: react_native_reanimated_1.ReduceMotion.Always,
+            },
+            closeTiming: {
+                duration: 0,
+                easing: DEFAULT_EASING,
+                reduceMotion: react_native_reanimated_1.ReduceMotion.Always,
+            },
+        };
+    }
+    const easing = (_a = animation === null || animation === void 0 ? void 0 : animation.easing) !== null && _a !== void 0 ? _a : DEFAULT_EASING;
+    const reduceMotion = (_b = animation === null || animation === void 0 ? void 0 : animation.reduceMotion) !== null && _b !== void 0 ? _b : react_native_reanimated_1.ReduceMotion.System;
+    const duration = animation === null || animation === void 0 ? void 0 : animation.duration;
+    return {
+        openTiming: {
+            duration: resolveDuration((_c = animation === null || animation === void 0 ? void 0 : animation.openDuration) !== null && _c !== void 0 ? _c : duration, DEFAULT_OPEN_DURATION),
+            easing,
+            reduceMotion,
+        },
+        closeTiming: {
+            duration: resolveDuration((_d = animation === null || animation === void 0 ? void 0 : animation.closeDuration) !== null && _d !== void 0 ? _d : duration, DEFAULT_CLOSE_DURATION),
+            easing,
+            reduceMotion,
+        },
+    };
+}
+function resolveBackdrop(backdrop) {
+    var _a, _b;
+    if (backdrop === false) {
+        return {
+            visible: false,
+            dismissOnPress: false,
+            color: '#000000',
+            opacity: 0,
+        };
+    }
+    if (backdrop && typeof backdrop === 'object') {
+        return {
+            visible: backdrop.visible !== false,
+            dismissOnPress: backdrop.dismissOnPress !== false,
+            color: (_a = backdrop.color) !== null && _a !== void 0 ? _a : '#000000',
+            opacity: (_b = backdrop.opacity) !== null && _b !== void 0 ? _b : DEFAULT_BACKDROP_OPACITY,
+        };
+    }
+    return {
+        visible: true,
+        dismissOnPress: true,
+        color: '#000000',
+        opacity: DEFAULT_BACKDROP_OPACITY,
+    };
+}
+function renderSlot(slot, context) {
+    if (typeof slot === 'function') {
+        return slot(context);
+    }
+    return slot;
+}
+function normalizeDetentIndex(index, length) {
+    if (!Number.isFinite(index))
+        return 0;
+    return clampNumber(Math.round(index !== null && index !== void 0 ? index : 0), 0, Math.max(0, length - 1));
+}
+function detentsFromSize(size) {
+    if (size == null || size === 'auto' || typeof size === 'number')
+        return undefined;
+    if (size === 'sm')
+        return ['content'];
+    if (size === 'md')
+        return ['medium'];
+    if (size === 'lg')
+        return ['large'];
+    if (size === 'full')
+        return ['full'];
+    return [size];
+}
+function parsePercent(input) {
+    if (!input.endsWith('%'))
+        return undefined;
+    const percent = Number.parseFloat(input.slice(0, -1));
+    if (!Number.isFinite(percent) || percent <= 0)
+        return undefined;
+    return clampNumber(percent / 100, 0.1, 1);
+}
+function resolveAxisSize(size, axisLength, fallback, maxSize) {
+    const resolvedMax = Math.max((0, zkit_tools_1.wp)(64), maxSize !== null && maxSize !== void 0 ? maxSize : axisLength);
+    if (typeof size === 'number')
+        return clampNumber(size, (0, zkit_tools_1.wp)(64), resolvedMax);
+    if (typeof size === 'string') {
+        const percent = parsePercent(size);
+        if (percent != null)
+            return clampNumber(axisLength * percent, (0, zkit_tools_1.wp)(64), resolvedMax);
+        if (size === 'sm')
+            return clampNumber((0, zkit_tools_1.wp)(280), (0, zkit_tools_1.wp)(64), resolvedMax);
+        if (size === 'md')
+            return clampNumber((0, zkit_tools_1.wp)(320), (0, zkit_tools_1.wp)(64), resolvedMax);
+        if (size === 'lg')
+            return clampNumber((0, zkit_tools_1.wp)(380), (0, zkit_tools_1.wp)(64), resolvedMax);
+        if (size === 'full')
+            return resolvedMax;
+    }
+    return clampNumber(fallback, (0, zkit_tools_1.wp)(64), resolvedMax);
+}
+function resolveTopHeight(size, windowHeight, maxHeight) {
+    if (size == null || size === 'auto')
+        return undefined;
+    return resolveAxisSize(size, windowHeight, windowHeight * DEFAULT_TOP_MAX_RATIO, maxHeight);
+}
+function resolveBottomHeight(detents, detentIndex, windowHeight, maxHeight) {
+    var _a;
+    const detent = (_a = detents === null || detents === void 0 ? void 0 : detents[normalizeDetentIndex(detentIndex, detents.length)]) !== null && _a !== void 0 ? _a : 'auto';
+    if (detent === 'content' || detent === 'auto')
+        return undefined;
+    const resolvedMax = Math.max((0, zkit_tools_1.wp)(64), maxHeight !== null && maxHeight !== void 0 ? maxHeight : windowHeight);
+    if (detent === 'medium')
+        return clampNumber(windowHeight * 0.5, (0, zkit_tools_1.wp)(64), resolvedMax);
+    if (detent === 'large')
+        return clampNumber(windowHeight * 0.9, (0, zkit_tools_1.wp)(64), resolvedMax);
+    if (detent === 'full')
+        return resolvedMax;
+    if (typeof detent === 'string') {
+        const percent = parsePercent(detent);
+        if (percent != null)
+            return clampNumber(windowHeight * percent, (0, zkit_tools_1.wp)(64), resolvedMax);
+    }
+    if (typeof detent === 'number' && Number.isFinite(detent) && detent > 0) {
+        return clampNumber(windowHeight * clampNumber(detent, 0.1, 1), (0, zkit_tools_1.wp)(64), resolvedMax);
+    }
+    return undefined;
+}
+function getCloseDirection(placement) {
+    if (placement === 'left' || placement === 'top')
+        return -1;
+    return 1;
+}
+function getClosedOffset(placement, width, height) {
+    if (placement === 'left')
+        return -width;
+    if (placement === 'right')
+        return width;
+    if (placement === 'top')
+        return -height;
+    return height;
+}
+function resolveSafeAreaEdges(safeArea, placement) {
+    if (safeArea === false)
+        return {};
+    if (safeArea && typeof safeArea === 'object')
+        return safeArea;
+    if (placement === 'top')
+        return { top: true, left: true, right: true };
+    if (placement === 'left')
+        return { top: true, left: true, bottom: true };
+    if (placement === 'right')
+        return { top: true, right: true, bottom: true };
+    return { left: true, right: true, bottom: true };
+}
+function toCloseReason(reason) {
+    return reason === 'api' ? 'api' : reason;
+}
+function resolveDetentIndexForDetails(placement, detentIndex) {
+    return placement === 'bottom' ? detentIndex : null;
+}
+function getDocument() {
+    return globalThis.document;
+}
+const SheetRoot = React.forwardRef(function Sheet({ placement = 'bottom', open: openProp, defaultOpen = false, onOpenChange, onOpenComplete, onCloseComplete, disabled = false, dismissible = DEFAULT_DISMISSIBLE, draggable = DEFAULT_DRAGGABLE, backdrop, title, description, header, footer, children, size, safeArea = true, detents, detentIndex, defaultDetentIndex, onDetentChange, nativeProps, backgroundColor, cornerRadius, maxHeight, maxWidth, handle = DEFAULT_HANDLE_VISIBLE, animation, dragCloseThreshold, dragVelocityThreshold = DEFAULT_DRAG_VELOCITY, style, headerStyle, footerStyle, testID, accessibilityLabel, backdropAccessibilityLabel = 'Close sheet', }, ref) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = (0, useTheme_1.useTheme)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const windowSize = (0, react_native_1.useWindowDimensions)();
+    const isBottomPlacement = placement === 'bottom';
+    const usesNativeBottom = isBottomPlacement && react_native_1.Platform.OS !== 'web';
+    const nativeBottomRef = React.useRef(null);
+    const isOpenControlled = openProp !== undefined;
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+    const isOpen = isOpenControlled ? !!openProp : innerOpen;
+    const [sheetState, setSheetState] = React.useState(isOpen ? 'opening' : 'closed');
+    const [shellMounted, setShellMounted] = React.useState(isOpen);
+    const [surfaceReady, setSurfaceReady] = React.useState(false);
+    const [layoutSize, setLayoutSize] = React.useState({ width: 0, height: 0 });
+    const bottomDetents = React.useMemo(() => detents !== null && detents !== void 0 ? detents : detentsFromSize(size), [detents, size]);
+    const bottomDetentCount = (_a = bottomDetents === null || bottomDetents === void 0 ? void 0 : bottomDetents.length) !== null && _a !== void 0 ? _a : 1;
+    const initialDetentIndex = normalizeDetentIndex(detentIndex !== null && detentIndex !== void 0 ? detentIndex : defaultDetentIndex, bottomDetentCount);
+    const [customDetentIndex, setCustomDetentIndex] = React.useState(initialDetentIndex);
+    const progress = (0, react_native_reanimated_1.useSharedValue)(0);
+    const gestureClosePending = (0, react_native_reanimated_1.useSharedValue)(false);
+    const isOpenRef = React.useRef(isOpen);
+    const previousOpenRef = React.useRef(isOpen);
+    const closeIntentRef = React.useRef(false);
+    const activeLifecycleRef = React.useRef(isOpen);
+    const stateRef = React.useRef(sheetState);
+    const requestedDetentIndexRef = React.useRef(initialDetentIndex);
+    const animationRef = React.useRef(resolveAnimation(animation));
+    const closeReasonRef = React.useRef('system');
+    const presentAnimatedRef = React.useRef(true);
+    const dismissAnimatedRef = React.useRef(true);
+    const openAnimationFrameRef = React.useRef(null);
+    const openAnimationStartedRef = React.useRef(false);
+    const controlledGestureResetFrameRef = React.useRef(null);
+    const backdropConfig = React.useMemo(() => resolveBackdrop(backdrop), [backdrop]);
+    const resolvedAnimation = React.useMemo(() => resolveAnimation(animation), [animation]);
+    const cancelOpenAnimationFrame = React.useCallback(() => {
+        if (openAnimationFrameRef.current == null)
+            return;
+        cancelAnimationFrame(openAnimationFrameRef.current);
+        openAnimationFrameRef.current = null;
+    }, []);
+    React.useEffect(() => {
+        animationRef.current = resolvedAnimation;
+    }, [resolvedAnimation]);
+    React.useEffect(() => {
+        isOpenRef.current = isOpen;
+    }, [isOpen]);
+    React.useEffect(() => {
+        stateRef.current = sheetState;
+    }, [sheetState]);
+    React.useEffect(() => {
+        const wasOpen = previousOpenRef.current;
+        if (wasOpen && !isOpen) {
+            if (!closeIntentRef.current) {
+                closeReasonRef.current = 'system';
+            }
+            closeIntentRef.current = false;
+        }
+        if (!wasOpen && isOpen) {
+            closeIntentRef.current = false;
+        }
+        previousOpenRef.current = isOpen;
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (detentIndex == null)
+            return;
+        const nextIndex = normalizeDetentIndex(detentIndex, bottomDetentCount);
+        requestedDetentIndexRef.current = nextIndex;
+        setCustomDetentIndex(nextIndex);
+    }, [bottomDetentCount, detentIndex]);
+    React.useEffect(() => {
+        setCustomDetentIndex((currentIndex) => {
+            const nextIndex = normalizeDetentIndex(currentIndex, bottomDetentCount);
+            requestedDetentIndexRef.current = nextIndex;
+            return nextIndex;
+        });
+    }, [bottomDetentCount]);
+    React.useEffect(() => () => {
+        cancelOpenAnimationFrame();
+        if (controlledGestureResetFrameRef.current != null) {
+            cancelAnimationFrame(controlledGestureResetFrameRef.current);
+            controlledGestureResetFrameRef.current = null;
+        }
+    }, [cancelOpenAnimationFrame]);
+    const emitOpenChange = React.useCallback((nextOpen, reason, detentIndex) => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, {
+            reason,
+            placement,
+            detentIndex: resolveDetentIndexForDetails(placement, normalizeDetentIndex(detentIndex !== null && detentIndex !== void 0 ? detentIndex : requestedDetentIndexRef.current, bottomDetentCount)),
+        });
+    }, [bottomDetentCount, onOpenChange, placement]);
+    const requestOpenChange = React.useCallback((nextOpen, reason, detentIndex) => {
+        if (disabled && nextOpen)
+            return;
+        if (detentIndex != null) {
+            const nextIndex = normalizeDetentIndex(detentIndex, bottomDetentCount);
+            requestedDetentIndexRef.current = nextIndex;
+            if (!usesNativeBottom)
+                setCustomDetentIndex(nextIndex);
+        }
+        if (nextOpen === isOpenRef.current)
+            return;
+        if (nextOpen) {
+            activeLifecycleRef.current = true;
+            presentAnimatedRef.current = true;
+        }
+        else {
+            closeReasonRef.current = toCloseReason(reason);
+            closeIntentRef.current = true;
+            dismissAnimatedRef.current = true;
+        }
+        if (!isOpenControlled) {
+            setInnerOpen(nextOpen);
+        }
+        emitOpenChange(nextOpen, reason, requestedDetentIndexRef.current);
+    }, [bottomDetentCount, disabled, emitOpenChange, isOpenControlled, usesNativeBottom]);
+    const finishClosedLifecycle = React.useCallback(() => {
+        if (isOpenRef.current)
+            return;
+        setSheetState('closed');
+        progress.value = 0;
+        gestureClosePending.value = false;
+        presentAnimatedRef.current = true;
+        dismissAnimatedRef.current = true;
+        openAnimationStartedRef.current = false;
+        setSurfaceReady(false);
+        setShellMounted(false);
+        if (activeLifecycleRef.current) {
+            activeLifecycleRef.current = false;
+            onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete({
+                reason: closeReasonRef.current,
+                placement,
+                detentIndex: resolveDetentIndexForDetails(placement, requestedDetentIndexRef.current),
+            });
+        }
+    }, [gestureClosePending, onCloseComplete, placement, progress]);
+    const finishOpenLifecycle = React.useCallback(() => {
+        if (!isOpenRef.current)
+            return;
+        setSheetState('open');
+        gestureClosePending.value = false;
+        onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete({
+            placement,
+            detentIndex: resolveDetentIndexForDetails(placement, requestedDetentIndexRef.current),
+        });
+    }, [gestureClosePending, onOpenComplete, placement]);
+    const openSheet = React.useCallback(async (options) => {
+        var _a;
+        const targetIndex = normalizeDetentIndex((_a = options === null || options === void 0 ? void 0 : options.detentIndex) !== null && _a !== void 0 ? _a : requestedDetentIndexRef.current, bottomDetentCount);
+        requestedDetentIndexRef.current = targetIndex;
+        presentAnimatedRef.current = (options === null || options === void 0 ? void 0 : options.animated) !== false;
+        if (usesNativeBottom) {
+            const bottomRef = nativeBottomRef.current;
+            if (bottomRef) {
+                await bottomRef.open({ detentIndex: targetIndex, animated: options === null || options === void 0 ? void 0 : options.animated });
+                return;
+            }
+        }
+        setCustomDetentIndex(targetIndex);
+        requestOpenChange(true, 'api', targetIndex);
+    }, [bottomDetentCount, requestOpenChange, usesNativeBottom]);
+    const closeSheet = React.useCallback(async (options) => {
+        dismissAnimatedRef.current = (options === null || options === void 0 ? void 0 : options.animated) !== false;
+        if (usesNativeBottom) {
+            const bottomRef = nativeBottomRef.current;
+            if (bottomRef) {
+                await bottomRef.close({ animated: options === null || options === void 0 ? void 0 : options.animated });
+                return;
+            }
+        }
+        requestOpenChange(false, 'api', requestedDetentIndexRef.current);
+    }, [requestOpenChange, usesNativeBottom]);
+    const snapTo = React.useCallback(async (detentIndex) => {
+        var _a;
+        const targetIndex = normalizeDetentIndex(detentIndex, bottomDetentCount);
+        requestedDetentIndexRef.current = targetIndex;
+        setCustomDetentIndex(targetIndex);
+        if (usesNativeBottom) {
+            await ((_a = nativeBottomRef.current) === null || _a === void 0 ? void 0 : _a.snapTo(targetIndex));
+        }
+    }, [bottomDetentCount, usesNativeBottom]);
+    React.useImperativeHandle(ref, () => ({
+        open: openSheet,
+        close: closeSheet,
+        snapTo,
+        getState: () => { var _a, _b; return (usesNativeBottom ? (_b = (_a = nativeBottomRef.current) === null || _a === void 0 ? void 0 : _a.getState()) !== null && _b !== void 0 ? _b : stateRef.current : stateRef.current); },
+    }), [closeSheet, openSheet, snapTo, usesNativeBottom]);
+    React.useEffect(() => {
+        if (usesNativeBottom || !isOpen)
+            return undefined;
+        activeLifecycleRef.current = true;
+        openAnimationStartedRef.current = false;
+        cancelOpenAnimationFrame();
+        progress.value = 0;
+        gestureClosePending.value = false;
+        setLayoutSize({ width: 0, height: 0 });
+        setSurfaceReady(false);
+        setShellMounted(true);
+        setSheetState('opening');
+        return undefined;
+    }, [cancelOpenAnimationFrame, gestureClosePending, isOpen, progress, usesNativeBottom]);
+    React.useEffect(() => {
+        if (usesNativeBottom || !isOpen || !shellMounted || !surfaceReady || openAnimationStartedRef.current) {
+            return undefined;
+        }
+        const frame = requestAnimationFrame(() => {
+            openAnimationFrameRef.current = null;
+            if (!isOpenRef.current)
+                return;
+            openAnimationStartedRef.current = true;
+            progress.value = (0, react_native_reanimated_1.withTiming)(1, presentAnimatedRef.current ? animationRef.current.openTiming : { ...animationRef.current.openTiming, duration: 0 }, (finished) => {
+                if (finished)
+                    (0, react_native_worklets_1.scheduleOnRN)(finishOpenLifecycle);
+            });
+        });
+        openAnimationFrameRef.current = frame;
+        return () => {
+            if (openAnimationFrameRef.current !== frame)
+                return;
+            cancelAnimationFrame(frame);
+            openAnimationFrameRef.current = null;
+        };
+    }, [finishOpenLifecycle, isOpen, progress, shellMounted, surfaceReady, usesNativeBottom]);
+    React.useEffect(() => {
+        if (usesNativeBottom || isOpen)
+            return undefined;
+        if (!shellMounted || stateRef.current === 'closed')
+            return undefined;
+        cancelOpenAnimationFrame();
+        openAnimationStartedRef.current = false;
+        setSurfaceReady(false);
+        setSheetState('closing');
+        progress.value = (0, react_native_reanimated_1.withTiming)(0, dismissAnimatedRef.current ? animationRef.current.closeTiming : { ...animationRef.current.closeTiming, duration: 0 }, (finished) => {
+            if (finished)
+                (0, react_native_worklets_1.scheduleOnRN)(finishClosedLifecycle);
+        });
+        return undefined;
+    }, [cancelOpenAnimationFrame, finishClosedLifecycle, isOpen, progress, shellMounted, usesNativeBottom]);
+    const requestBackdropClose = React.useCallback(() => {
+        if (disabled || !dismissible || !backdropConfig.dismissOnPress || !isOpenRef.current)
+            return;
+        requestOpenChange(false, 'backdrop', requestedDetentIndexRef.current);
+    }, [backdropConfig.dismissOnPress, disabled, dismissible, requestOpenChange]);
+    const requestBackClose = React.useCallback(() => {
+        if (disabled || !dismissible || !isOpenRef.current)
+            return;
+        requestOpenChange(false, 'back', requestedDetentIndexRef.current);
+    }, [disabled, dismissible, requestOpenChange]);
+    const requestGestureClose = React.useCallback(() => {
+        if (disabled || !dismissible || !draggable || !isOpenRef.current)
+            return;
+        requestOpenChange(false, 'gesture', requestedDetentIndexRef.current);
+        if (!isOpenControlled)
+            return;
+        if (controlledGestureResetFrameRef.current != null) {
+            cancelAnimationFrame(controlledGestureResetFrameRef.current);
+        }
+        controlledGestureResetFrameRef.current = requestAnimationFrame(() => {
+            controlledGestureResetFrameRef.current = null;
+            if (!isOpenRef.current)
+                return;
+            gestureClosePending.value = false;
+            progress.value = (0, react_native_reanimated_1.withTiming)(1, animationRef.current.openTiming);
+        });
+    }, [disabled, dismissible, draggable, gestureClosePending, isOpenControlled, progress, requestOpenChange]);
+    React.useEffect(() => {
+        if (usesNativeBottom || react_native_1.Platform.OS !== 'web' || !isOpen || disabled || !dismissible)
+            return undefined;
+        const documentRef = getDocument();
+        if (!documentRef)
+            return undefined;
+        const handleKeyDown = (event) => {
+            var _a;
+            if (event.key !== 'Escape')
+                return;
+            (_a = event.preventDefault) === null || _a === void 0 ? void 0 : _a.call(event);
+            requestBackClose();
+        };
+        documentRef.addEventListener('keydown', handleKeyDown);
+        return () => documentRef.removeEventListener('keydown', handleKeyDown);
+    }, [disabled, dismissible, isOpen, requestBackClose, usesNativeBottom]);
+    const context = React.useMemo(() => ({
+        isOpen,
+        state: sheetState,
+        placement,
+        detentIndex: resolveDetentIndexForDetails(placement, customDetentIndex),
+        open: openSheet,
+        close: closeSheet,
+        snapTo,
+    }), [closeSheet, customDetentIndex, isOpen, openSheet, placement, sheetState, snapTo]);
+    const handleBottomOpenChange = React.useCallback((nextOpen, meta) => {
+        const reason = meta.reason;
+        requestedDetentIndexRef.current = normalizeDetentIndex(meta.detentIndex, bottomDetentCount);
+        if (!nextOpen) {
+            closeReasonRef.current = toCloseReason(reason);
+            closeIntentRef.current = true;
+        }
+        else {
+            activeLifecycleRef.current = true;
+        }
+        if (!isOpenControlled) {
+            setInnerOpen(nextOpen);
+        }
+        emitOpenChange(nextOpen, reason, requestedDetentIndexRef.current);
+    }, [bottomDetentCount, emitOpenChange, isOpenControlled]);
+    const horizontal = placement === 'left' || placement === 'right';
+    const fallbackWidth = resolveAxisSize(size, windowSize.width, Math.min((0, zkit_tools_1.wp)(360), windowSize.width * DEFAULT_SIDE_SIZE_RATIO), maxWidth);
+    const resolvedHeight = isBottomPlacement
+        ? resolveBottomHeight(bottomDetents, customDetentIndex, windowSize.height, maxHeight)
+        : resolveTopHeight(size, windowSize.height, maxHeight);
+    const fallbackHeight = resolvedHeight !== null && resolvedHeight !== void 0 ? resolvedHeight : (isBottomPlacement
+        ? Math.min(windowSize.height, maxHeight !== null && maxHeight !== void 0 ? maxHeight : windowSize.height)
+        : Math.min(windowSize.height * DEFAULT_TOP_MAX_RATIO, maxHeight !== null && maxHeight !== void 0 ? maxHeight : windowSize.height));
+    const animatedWidth = horizontal ? fallbackWidth : windowSize.width;
+    const animatedHeight = horizontal ? windowSize.height : layoutSize.height || fallbackHeight;
+    const closedOffset = getClosedOffset(placement, animatedWidth, animatedHeight);
+    const closedDistance = Math.abs(closedOffset);
+    const closeDirection = getCloseDirection(placement);
+    const closeThreshold = dragCloseThreshold !== null && dragCloseThreshold !== void 0 ? dragCloseThreshold : Math.min(closedDistance * 0.36, (0, zkit_tools_1.wp)(156));
+    const safeAreaEdges = resolveSafeAreaEdges(safeArea, placement);
+    const handleConfig = handle && typeof handle === 'object' ? handle : {};
+    const handleVisible = handle !== false;
+    const handleCanDrag = handleVisible && draggable && dismissible && !disabled;
+    const usesBottomInlineHandle = handleVisible && isBottomPlacement;
+    const usesTopInlineHandle = handleVisible && placement === 'top';
+    const usesOverlayHandle = handleVisible && horizontal;
+    const topHandleReserve = usesTopInlineHandle ? TOP_HANDLE_RESERVE : 0;
+    const dragResetTiming = resolvedAnimation.openTiming;
+    const dragCloseTiming = resolvedAnimation.closeTiming;
+    const surfaceColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.surface;
+    const resolvedCornerRadius = cornerRadius !== null && cornerRadius !== void 0 ? cornerRadius : (0, zkit_tools_1.wp)(22);
+    const topMaxHeight = Math.min(windowSize.height, (maxHeight !== null && maxHeight !== void 0 ? maxHeight : windowSize.height * DEFAULT_TOP_MAX_RATIO) + topHandleReserve);
+    const surfaceLayoutStyle = horizontal
+        ? {
+            bottom: 0,
+            top: 0,
+            width: fallbackWidth,
+            maxWidth,
+            [placement]: -animatedWidth,
+        }
+        : isBottomPlacement
+            ? {
+                bottom: -animatedHeight,
+                left: 0,
+                right: 0,
+                height: resolvedHeight,
+                maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : windowSize.height,
+            }
+            : {
+                left: 0,
+                right: 0,
+                top: -animatedHeight,
+                height: resolvedHeight,
+                maxHeight: topMaxHeight,
+            };
+    const surfaceInsetStyle = {
+        paddingTop: (safeAreaEdges.top ? insets.top : 0) ||
+            undefined,
+        paddingRight: (safeAreaEdges.right ? insets.right : 0) +
+            (placement === 'left' && usesOverlayHandle ? SIDE_HANDLE_RESERVE : 0) ||
+            undefined,
+        paddingBottom: (safeAreaEdges.bottom ? insets.bottom : 0) ||
+            undefined,
+        paddingLeft: (safeAreaEdges.left ? insets.left : 0) +
+            (placement === 'right' && usesOverlayHandle ? SIDE_HANDLE_RESERVE : 0) ||
+            undefined,
+    };
+    const cornerStyle = placement === 'left'
+        ? {
+            borderTopRightRadius: resolvedCornerRadius,
+            borderBottomRightRadius: resolvedCornerRadius,
+        }
+        : placement === 'right'
+            ? {
+                borderTopLeftRadius: resolvedCornerRadius,
+                borderBottomLeftRadius: resolvedCornerRadius,
+            }
+            : placement === 'bottom'
+                ? {
+                    borderTopLeftRadius: resolvedCornerRadius,
+                    borderTopRightRadius: resolvedCornerRadius,
+                }
+                : {
+                    borderBottomLeftRadius: resolvedCornerRadius,
+                    borderBottomRightRadius: resolvedCornerRadius,
+                };
+    const animatedSurfaceStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const translate = -closedOffset * progress.value;
+        if (horizontal)
+            return { transform: [{ translateX: translate }] };
+        return { transform: [{ translateY: translate }] };
+    }, [closedOffset, horizontal]);
+    const animatedBackdropStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: backdropConfig.opacity * progress.value,
+    }), [backdropConfig.opacity]);
+    const panGesture = React.useMemo(() => {
+        if (!handleCanDrag)
+            return react_native_gesture_handler_1.Gesture.Pan().enabled(false);
+        const baseGesture = react_native_gesture_handler_1.Gesture.Pan().enabled(handleCanDrag);
+        const directionalGesture = horizontal
+            ? baseGesture.activeOffsetX([-(0, zkit_tools_1.wp)(8), (0, zkit_tools_1.wp)(8)])
+            : baseGesture.activeOffsetY([-(0, zkit_tools_1.wp)(8), (0, zkit_tools_1.wp)(8)]);
+        return directionalGesture
+            .onBegin(() => {
+            'worklet';
+            gestureClosePending.value = false;
+        })
+            .onUpdate((event) => {
+            'worklet';
+            const rawDrag = placement === 'left'
+                ? Math.min(event.translationX, 0)
+                : placement === 'right'
+                    ? Math.max(event.translationX, 0)
+                    : placement === 'top'
+                        ? Math.min(event.translationY, 0)
+                        : Math.max(event.translationY, 0);
+            const boundedDrag = closeDirection > 0
+                ? Math.min(rawDrag, closedDistance)
+                : Math.max(rawDrag, -closedDistance);
+            progress.value = closedDistance <= 0 ? 1 : 1 - Math.abs(boundedDrag) / closedDistance;
+        })
+            .onEnd((event) => {
+            'worklet';
+            const velocity = horizontal ? event.velocityX : event.velocityY;
+            const distance = closedDistance * (1 - progress.value);
+            const shouldClose = distance >= closeThreshold ||
+                velocity * closeDirection >= dragVelocityThreshold;
+            if (shouldClose) {
+                gestureClosePending.value = true;
+                progress.value = (0, react_native_reanimated_1.withTiming)(0, dragCloseTiming);
+                (0, react_native_worklets_1.scheduleOnRN)(requestGestureClose);
+            }
+        })
+            .onFinalize(() => {
+            'worklet';
+            if (gestureClosePending.value)
+                return;
+            progress.value = (0, react_native_reanimated_1.withTiming)(1, dragResetTiming);
+        });
+    }, [
+        closeDirection,
+        closedDistance,
+        closeThreshold,
+        dragCloseTiming,
+        dragResetTiming,
+        dragVelocityThreshold,
+        gestureClosePending,
+        handleCanDrag,
+        horizontal,
+        placement,
+        progress,
+        requestGestureClose,
+    ]);
+    const handleIndicator = handleVisible ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            horizontal ? styles.verticalHandle : styles.horizontalHandle,
+            {
+                backgroundColor: (_b = handleConfig.color) !== null && _b !== void 0 ? _b : theme.colors.border,
+                borderRadius: (_c = handleConfig.radius) !== null && _c !== void 0 ? _c : (0, zkit_tools_1.wp)(2),
+                height: horizontal ? (_d = handleConfig.width) !== null && _d !== void 0 ? _d : (0, zkit_tools_1.wp)(36) : (_e = handleConfig.height) !== null && _e !== void 0 ? _e : (0, zkit_tools_1.wp)(4),
+                width: horizontal ? (_f = handleConfig.height) !== null && _f !== void 0 ? _f : (0, zkit_tools_1.wp)(4) : (_g = handleConfig.width) !== null && _g !== void 0 ? _g : (0, zkit_tools_1.wp)(36),
+            },
+        ] })) : null;
+    const inlineHandle = usesBottomInlineHandle ? ((0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: handleCanDrag ? 'adjustable' : undefined, style: styles.inlineHandleHost, children: handleIndicator }) })) : null;
+    const topInlineHandle = usesTopInlineHandle ? ((0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: handleCanDrag ? 'adjustable' : undefined, style: styles.topHandleHost, children: handleIndicator }) })) : null;
+    const overlayHandle = usesOverlayHandle ? ((0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: handleCanDrag ? 'adjustable' : undefined, style: [
+                styles.handleHost,
+                placement === 'left' ? styles.handleHostRight : styles.handleHostLeft,
+            ], children: handleIndicator }) })) : null;
+    if (usesNativeBottom) {
+        return ((0, jsx_runtime_1.jsx)(nativeBottom_1.NativeBottomSheet, { ref: nativeBottomRef, open: isOpen, onOpenChange: handleBottomOpenChange, onOpenComplete: (payload) => {
+                requestedDetentIndexRef.current = payload.index;
+                onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete({
+                    placement: 'bottom',
+                    detentIndex: payload.index,
+                });
+            }, onCloseComplete: (details) => {
+                closeReasonRef.current = details.reason;
+                requestedDetentIndexRef.current = details.detentIndex;
+                onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete({
+                    reason: details.reason,
+                    placement: 'bottom',
+                    detentIndex: details.detentIndex,
+                });
+            }, detents: bottomDetents, detentIndex: detentIndex, defaultDetentIndex: defaultDetentIndex, onDetentChange: (index, payload) => {
+                requestedDetentIndexRef.current = index;
+                onDetentChange === null || onDetentChange === void 0 ? void 0 : onDetentChange(index, payload);
+            }, disabled: disabled, dismissible: dismissible, draggable: draggable, backdrop: backdrop, title: title, description: description, header: header === undefined
+                ? undefined
+                : (bottomContext) => renderSlot(header, bottomContext), footer: footer === undefined
+                ? undefined
+                : (bottomContext) => renderSlot(footer, bottomContext), backgroundColor: backgroundColor, cornerRadius: cornerRadius, maxHeight: maxHeight, maxWidth: maxWidth, handle: handle, style: style, headerStyle: headerStyle, footerStyle: footerStyle, testID: testID, accessibilityLabel: accessibilityLabel, backdropAccessibilityLabel: backdropAccessibilityLabel, nativeProps: nativeProps, children: children === undefined
+                ? undefined
+                : (bottomContext) => renderSlot(children, bottomContext) }));
+    }
+    if (!shellMounted)
+        return null;
+    const resolvedHeader = header !== undefined || title != null || description != null ? (header !== undefined ? (renderSlot(header, context)) : ((0, jsx_runtime_1.jsx)(slots_1.SheetHeader, { title: title, description: description, style: headerStyle }))) : null;
+    const resolvedFooter = footer !== undefined ? renderSlot(footer, context) : null;
+    const resolvedChildren = renderSlot(children, context);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: true, transparent: true, animationType: "none", statusBarTranslucent: true, presentationStyle: "overFullScreen", onRequestClose: requestBackClose, children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureHandlerRootView, { style: styles.modalRoot, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modalRoot, pointerEvents: "box-none", children: [backdropConfig.visible ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: backdropAccessibilityLabel, disabled: disabled || !dismissible || !backdropConfig.dismissOnPress, onPress: requestBackdropClose, style: react_native_1.StyleSheet.absoluteFill, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+                                react_native_1.StyleSheet.absoluteFill,
+                                { backgroundColor: backdropConfig.color },
+                                styles.closedBackdrop,
+                                animatedBackdropStyle,
+                            ] }) })) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { testID: testID, accessibilityLabel: accessibilityLabel, accessibilityViewIsModal: true, importantForAccessibility: "yes", onLayout: (event) => {
+                            const { width, height } = event.nativeEvent.layout;
+                            const sizeChanged = width !== layoutSize.width || height !== layoutSize.height;
+                            if (sizeChanged)
+                                setLayoutSize({ width, height });
+                            if (!surfaceReady)
+                                setSurfaceReady(true);
+                        }, style: [
+                            styles.surface,
+                            surfaceLayoutStyle,
+                            cornerStyle,
+                            surfaceInsetStyle,
+                            { backgroundColor: surfaceColor, borderColor: theme.colors.border },
+                            style,
+                            animatedSurfaceStyle,
+                        ], children: usesTopInlineHandle ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.topContentHost, children: [resolvedHeader, resolvedChildren, resolvedFooter != null ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: footerStyle, children: resolvedFooter }) : null] }), topInlineHandle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [inlineHandle, overlayHandle, resolvedHeader, resolvedChildren, resolvedFooter != null ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: footerStyle, children: resolvedFooter }) : null] })) })] }) }) }));
+});
+exports.Sheet = Object.assign(SheetRoot, {
+    Header: slots_1.SheetHeader,
+    Content: slots_1.SheetContent,
+    Footer: slots_1.SheetFooter,
+});
+const styles = react_native_1.StyleSheet.create({
+    modalRoot: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+    surface: {
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        overflow: 'hidden',
+        position: 'absolute',
+    },
+    closedBackdrop: {
+        opacity: 0,
+    },
+    handleHost: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        zIndex: 2,
+    },
+    handleHostLeft: {
+        bottom: 0,
+        left: SIDE_HANDLE_INSET,
+        top: 0,
+        width: SIDE_HANDLE_WIDTH,
+    },
+    handleHostRight: {
+        bottom: 0,
+        right: SIDE_HANDLE_INSET,
+        top: 0,
+        width: SIDE_HANDLE_WIDTH,
+    },
+    inlineHandleHost: {
+        alignItems: 'center',
+        flexShrink: 0,
+        height: BOTTOM_HANDLE_RESERVE,
+        justifyContent: 'center',
+    },
+    topContentHost: {
+        flexShrink: 1,
+        marginBottom: TOP_HANDLE_RESERVE,
+        overflow: 'hidden',
+    },
+    topHandleHost: {
+        alignItems: 'center',
+        bottom: 0,
+        height: TOP_HANDLE_RESERVE,
+        justifyContent: 'center',
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        zIndex: 2,
+    },
+    horizontalHandle: {
+        flexShrink: 0,
+    },
+    verticalHandle: {
+        flexShrink: 0,
+    },
+});