zkit-ui 1.0.0

package/dist/ui/Sheet/nativeBottom.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { type TrueSheetProps } from '@lodev09/react-native-true-sheet';
+import type { SheetBackdropConfig, SheetCloseOptions, SheetCloseReason, SheetDetent, SheetDetentChangePayload, SheetHandleConfig, SheetNativeProps, SheetOpenChangeReason, SheetOpenOptions, SheetSlot, SheetState } from './types';
+export type NativeBottomSheetOpenChangeDetails = {
+    reason: SheetOpenChangeReason;
+    detentIndex: number;
+};
+export type NativeBottomSheetCloseCompleteDetails = {
+    reason: SheetCloseReason;
+    detentIndex: number;
+};
+export type NativeBottomSheetRef = {
+    open: (options?: SheetOpenOptions) => Promise<void>;
+    close: (options?: SheetCloseOptions) => Promise<void>;
+    snapTo: (detentIndex: number) => Promise<void>;
+    getState: () => SheetState;
+};
+export type NativeBottomSheetProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: NativeBottomSheetOpenChangeDetails) => void;
+    onOpenComplete?: (payload: SheetDetentChangePayload) => void;
+    onCloseComplete?: (details: NativeBottomSheetCloseCompleteDetails) => void;
+    detents?: readonly SheetDetent[];
+    detentIndex?: number;
+    defaultDetentIndex?: number;
+    onDetentChange?: (index: number, payload: SheetDetentChangePayload) => void;
+    disabled?: boolean;
+    dismissible?: boolean;
+    draggable?: boolean;
+    backdrop?: boolean | SheetBackdropConfig;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    header?: SheetSlot;
+    footer?: SheetSlot;
+    children?: SheetSlot;
+    backgroundColor?: TrueSheetProps['backgroundColor'];
+    cornerRadius?: number;
+    maxHeight?: number;
+    maxWidth?: number;
+    handle?: boolean | SheetHandleConfig;
+    style?: StyleProp<ViewStyle>;
+    headerStyle?: StyleProp<ViewStyle>;
+    footerStyle?: StyleProp<ViewStyle>;
+    testID?: ViewProps['testID'];
+    accessibilityLabel?: ViewProps['accessibilityLabel'];
+    backdropAccessibilityLabel?: string;
+    nativeProps?: SheetNativeProps;
+};
+export declare const NativeBottomSheet: React.ForwardRefExoticComponent<NativeBottomSheetProps & React.RefAttributes<NativeBottomSheetRef>>;
+//# sourceMappingURL=nativeBottom.d.ts.map

package/dist/ui/Sheet/nativeBottom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeBottom.d.ts","sourceRoot":"","sources":["../../../src/ui/Sheet/nativeBottom.tsx"],"names":[],"mappings":"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"}

package/dist/ui/Sheet/nativeBottom.js

@@ -0,0 +1,442 @@
+"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.NativeBottomSheet = 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_true_sheet_1 = require("@lodev09/react-native-true-sheet");
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const slots_1 = require("./slots");
+const DEFAULT_DETENTS = ['content'];
+const DEFAULT_BACKDROP_OPACITY = 0.42;
+const DEFAULT_DISMISSIBLE = true;
+const DEFAULT_DRAGGABLE = true;
+const DEFAULT_HANDLE_VISIBLE = true;
+const IOS_SYSTEM_CORNER_RADIUS_MAJOR_VERSION = 26;
+function clampNumber(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.max(min, Math.min(max, value));
+}
+function silentlyCatchPromise(value) {
+    const maybePromise = value;
+    if (typeof (maybePromise === null || maybePromise === void 0 ? void 0 : maybePromise.catch) === 'function') {
+        maybePromise.catch(() => { });
+    }
+}
+function normalizeDetent(detent) {
+    if (detent === 'content' || detent === 'auto')
+        return 'auto';
+    if (detent === 'medium')
+        return 0.5;
+    if (detent === 'large')
+        return 0.9;
+    if (detent === 'full')
+        return 1;
+    if (typeof detent === 'string' && detent.endsWith('%')) {
+        const percent = Number.parseFloat(detent.slice(0, -1));
+        if (Number.isFinite(percent) && percent > 0) {
+            return clampNumber(percent / 100, 0.1, 1);
+        }
+        return 'auto';
+    }
+    if (typeof detent === 'number' && Number.isFinite(detent) && detent > 0) {
+        return clampNumber(detent, 0.1, 1);
+    }
+    return 'auto';
+}
+function normalizeDetents(detents) {
+    const source = (detents === null || detents === void 0 ? void 0 : detents.length) ? detents : DEFAULT_DETENTS;
+    const semantic = source.slice(0, 3);
+    return {
+        semantic,
+        native: semantic.map(normalizeDetent),
+    };
+}
+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 getIOSMajorVersion() {
+    var _a;
+    if (react_native_1.Platform.OS !== 'ios')
+        return undefined;
+    const version = react_native_1.Platform.Version;
+    const major = typeof version === 'number' ? version : Number.parseInt((_a = String(version).split('.')[0]) !== null && _a !== void 0 ? _a : '', 10);
+    return Number.isFinite(major) ? major : undefined;
+}
+function getDefaultCornerRadius() {
+    const iosMajorVersion = getIOSMajorVersion();
+    if (iosMajorVersion != null && iosMajorVersion >= IOS_SYSTEM_CORNER_RADIUS_MAJOR_VERSION) {
+        return undefined;
+    }
+    return (0, zkit_tools_1.wp)(22);
+}
+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 toNativeSlot(slot) {
+    if (slot == null || typeof slot === 'boolean')
+        return undefined;
+    if (React.isValidElement(slot))
+        return slot;
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { children: slot });
+}
+function createDetentPayload(event, semanticDetents, nativeDetents) {
+    var _a, _b;
+    const index = normalizeDetentIndex(event.index, semanticDetents.length);
+    return {
+        index,
+        detent: (_a = semanticDetents[index]) !== null && _a !== void 0 ? _a : DEFAULT_DETENTS[0],
+        nativeDetent: (_b = nativeDetents[index]) !== null && _b !== void 0 ? _b : 'auto',
+        position: event.position,
+        placement: 'bottom',
+    };
+}
+exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet({ open: openProp, defaultOpen = false, onOpenChange, onOpenComplete, onCloseComplete, detents, detentIndex: detentIndexProp, defaultDetentIndex = 0, onDetentChange, disabled = false, dismissible = DEFAULT_DISMISSIBLE, draggable = DEFAULT_DRAGGABLE, backdrop, title, description, header, footer, children, backgroundColor, cornerRadius, maxHeight, maxWidth, handle = DEFAULT_HANDLE_VISIBLE, style, headerStyle, footerStyle, testID, accessibilityLabel, backdropAccessibilityLabel = 'Close sheet', nativeProps, }, ref) {
+    var _a, _b, _c, _d, _e;
+    const theme = (0, useTheme_1.useTheme)();
+    const isOpenControlled = openProp !== undefined;
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+    const isOpen = isOpenControlled ? !!openProp : innerOpen;
+    const { semantic: semanticDetents, native: nativeDetents } = React.useMemo(() => normalizeDetents(detents), [detents]);
+    const defaultIndex = normalizeDetentIndex(defaultDetentIndex, nativeDetents.length);
+    const controlledDetentIndex = detentIndexProp == null ? undefined : normalizeDetentIndex(detentIndexProp, nativeDetents.length);
+    const initialDetentIndex = controlledDetentIndex !== null && controlledDetentIndex !== void 0 ? controlledDetentIndex : defaultIndex;
+    const [currentDetentIndex, setCurrentDetentIndex] = React.useState(initialDetentIndex);
+    const [sheetState, setSheetState] = React.useState(isOpen ? 'opening' : 'closed');
+    const [shellMounted, setShellMounted] = React.useState(isOpen);
+    const nativeRef = React.useRef(null);
+    const phaseRef = React.useRef(isOpen ? 'presenting' : 'idle');
+    const pendingDismissRef = React.useRef(false);
+    const activeLifecycleRef = React.useRef(isOpen);
+    const isOpenRef = React.useRef(isOpen);
+    const stateRef = React.useRef(sheetState);
+    const currentDetentIndexRef = React.useRef(currentDetentIndex);
+    const requestedOpenIndexRef = React.useRef(initialDetentIndex);
+    const presentAnimatedRef = React.useRef(true);
+    const dismissAnimatedRef = React.useRef(true);
+    const closeReasonRef = React.useRef('system');
+    const backdropConfig = React.useMemo(() => resolveBackdrop(backdrop), [backdrop]);
+    const usesManualBackdrop = react_native_1.Platform.OS === 'ios' && backdropConfig.visible;
+    const backdropOpacity = React.useRef(new react_native_1.Animated.Value(usesManualBackdrop && isOpen ? backdropConfig.opacity : 0)).current;
+    const [manualBackdropMounted, setManualBackdropMounted] = React.useState(usesManualBackdrop && isOpen);
+    React.useEffect(() => {
+        isOpenRef.current = isOpen;
+    }, [isOpen]);
+    React.useEffect(() => {
+        stateRef.current = sheetState;
+    }, [sheetState]);
+    React.useEffect(() => {
+        currentDetentIndexRef.current = currentDetentIndex;
+    }, [currentDetentIndex]);
+    React.useEffect(() => {
+        if (isOpen) {
+            activeLifecycleRef.current = true;
+            requestedOpenIndexRef.current = controlledDetentIndex !== null && controlledDetentIndex !== void 0 ? controlledDetentIndex : requestedOpenIndexRef.current;
+            if (!shellMounted)
+                setShellMounted(true);
+            return;
+        }
+        if (shellMounted) {
+            requestDismiss('system');
+        }
+    }, [controlledDetentIndex, isOpen, shellMounted]);
+    React.useEffect(() => {
+        if (!isOpen || !shellMounted)
+            return undefined;
+        const rafId = requestAnimationFrame(() => {
+            if (!isOpenRef.current)
+                return;
+            if (phaseRef.current !== 'idle' && phaseRef.current !== 'presenting')
+                return;
+            const sheet = nativeRef.current;
+            if (!sheet)
+                return;
+            const targetIndex = normalizeDetentIndex(controlledDetentIndex !== null && controlledDetentIndex !== void 0 ? controlledDetentIndex : requestedOpenIndexRef.current, nativeDetents.length);
+            pendingDismissRef.current = false;
+            phaseRef.current = 'presenting';
+            setSheetState('opening');
+            setCurrentDetentIndex(targetIndex);
+            silentlyCatchPromise(sheet.present(targetIndex, presentAnimatedRef.current));
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [controlledDetentIndex, isOpen, nativeDetents.length, shellMounted]);
+    React.useEffect(() => {
+        var _a;
+        if (controlledDetentIndex == null)
+            return;
+        requestedOpenIndexRef.current = controlledDetentIndex;
+        if (!isOpen || phaseRef.current !== 'presented')
+            return;
+        if (controlledDetentIndex === currentDetentIndexRef.current)
+            return;
+        silentlyCatchPromise((_a = nativeRef.current) === null || _a === void 0 ? void 0 : _a.resize(controlledDetentIndex));
+    }, [controlledDetentIndex, isOpen]);
+    React.useEffect(() => {
+        if (!usesManualBackdrop)
+            return;
+        backdropOpacity.stopAnimation();
+        if (isOpen) {
+            setManualBackdropMounted(true);
+            react_native_1.Animated.timing(backdropOpacity, {
+                toValue: backdropConfig.opacity,
+                duration: 180,
+                easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
+                useNativeDriver: true,
+            }).start();
+            return;
+        }
+        react_native_1.Animated.timing(backdropOpacity, {
+            toValue: 0,
+            duration: 120,
+            easing: react_native_1.Easing.in(react_native_1.Easing.quad),
+            useNativeDriver: true,
+        }).start(({ finished }) => {
+            if (finished && !isOpenRef.current) {
+                setManualBackdropMounted(false);
+            }
+        });
+    }, [backdropConfig.opacity, backdropOpacity, isOpen, usesManualBackdrop]);
+    const emitOpenChange = React.useCallback((nextOpen, reason, detentIndex) => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, {
+            reason,
+            detentIndex: normalizeDetentIndex(detentIndex !== null && detentIndex !== void 0 ? detentIndex : currentDetentIndexRef.current, nativeDetents.length),
+        });
+    }, [nativeDetents.length, onOpenChange]);
+    const setOpen = React.useCallback((nextOpen, reason, detentIndex) => {
+        if (disabled && nextOpen)
+            return;
+        if (nextOpen) {
+            requestedOpenIndexRef.current = normalizeDetentIndex(detentIndex !== null && detentIndex !== void 0 ? detentIndex : requestedOpenIndexRef.current, nativeDetents.length);
+            presentAnimatedRef.current = true;
+            activeLifecycleRef.current = true;
+            pendingDismissRef.current = false;
+            if (!isOpenControlled)
+                setInnerOpen(true);
+            emitOpenChange(true, 'api', requestedOpenIndexRef.current);
+            return;
+        }
+        closeReasonRef.current = reason === 'api' ? 'api' : reason;
+        if (!isOpenControlled)
+            setInnerOpen(false);
+        emitOpenChange(false, reason, currentDetentIndexRef.current);
+    }, [disabled, emitOpenChange, isOpenControlled, nativeDetents.length]);
+    const finishClosedLifecycle = React.useCallback((shouldSyncOpenState) => {
+        phaseRef.current = 'idle';
+        pendingDismissRef.current = false;
+        presentAnimatedRef.current = true;
+        dismissAnimatedRef.current = true;
+        setSheetState('closed');
+        if (shouldSyncOpenState) {
+            if (!isOpenControlled)
+                setInnerOpen(false);
+            emitOpenChange(false, closeReasonRef.current, currentDetentIndexRef.current);
+        }
+        setShellMounted(false);
+        if (activeLifecycleRef.current) {
+            activeLifecycleRef.current = false;
+            onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete({
+                reason: closeReasonRef.current,
+                detentIndex: currentDetentIndexRef.current,
+            });
+        }
+    }, [emitOpenChange, isOpenControlled, onCloseComplete]);
+    function requestDismiss(reason) {
+        const phase = phaseRef.current;
+        closeReasonRef.current = reason;
+        if (phase === 'dismissing')
+            return;
+        if (phase === 'presenting') {
+            pendingDismissRef.current = true;
+            return;
+        }
+        if (phase === 'presented') {
+            const sheet = nativeRef.current;
+            if (!sheet) {
+                finishClosedLifecycle(false);
+                return;
+            }
+            pendingDismissRef.current = false;
+            phaseRef.current = 'dismissing';
+            setSheetState('closing');
+            silentlyCatchPromise(sheet.dismiss(dismissAnimatedRef.current));
+            return;
+        }
+        if (activeLifecycleRef.current) {
+            finishClosedLifecycle(false);
+        }
+    }
+    const openSheet = React.useCallback(async (options) => {
+        var _a, _b;
+        const targetIndex = normalizeDetentIndex((_a = options === null || options === void 0 ? void 0 : options.detentIndex) !== null && _a !== void 0 ? _a : requestedOpenIndexRef.current, nativeDetents.length);
+        requestedOpenIndexRef.current = targetIndex;
+        presentAnimatedRef.current = (options === null || options === void 0 ? void 0 : options.animated) !== false;
+        if (isOpenRef.current && phaseRef.current === 'presented') {
+            await ((_b = nativeRef.current) === null || _b === void 0 ? void 0 : _b.resize(targetIndex));
+            return;
+        }
+        setOpen(true, 'api', targetIndex);
+    }, [nativeDetents.length, setOpen]);
+    const closeSheet = React.useCallback(async (options) => {
+        dismissAnimatedRef.current = (options === null || options === void 0 ? void 0 : options.animated) !== false;
+        setOpen(false, 'api', currentDetentIndexRef.current);
+    }, [setOpen]);
+    const snapTo = React.useCallback(async (detentIndex) => {
+        var _a;
+        const targetIndex = normalizeDetentIndex(detentIndex, nativeDetents.length);
+        requestedOpenIndexRef.current = targetIndex;
+        if (!isOpenRef.current || phaseRef.current !== 'presented')
+            return;
+        await ((_a = nativeRef.current) === null || _a === void 0 ? void 0 : _a.resize(targetIndex));
+    }, [nativeDetents.length]);
+    React.useImperativeHandle(ref, () => ({
+        open: openSheet,
+        close: closeSheet,
+        snapTo,
+        getState: () => stateRef.current,
+    }), [closeSheet, openSheet, snapTo]);
+    const context = React.useMemo(() => ({
+        isOpen,
+        state: sheetState,
+        placement: 'bottom',
+        detentIndex: currentDetentIndex,
+        open: openSheet,
+        close: closeSheet,
+        snapTo,
+    }), [closeSheet, currentDetentIndex, isOpen, openSheet, sheetState, snapTo]);
+    const handleDidPresent = React.useCallback((event) => {
+        const payload = createDetentPayload(event.nativeEvent, semanticDetents, nativeDetents);
+        phaseRef.current = 'presented';
+        setSheetState('open');
+        setCurrentDetentIndex(payload.index);
+        currentDetentIndexRef.current = payload.index;
+        onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(payload);
+        if (pendingDismissRef.current || !isOpenRef.current) {
+            requestDismiss(closeReasonRef.current);
+        }
+    }, [nativeDetents, onOpenComplete, semanticDetents]);
+    const handleDidDismiss = React.useCallback(() => {
+        const wasRequestedDismiss = phaseRef.current === 'dismissing' || pendingDismissRef.current;
+        const shouldSyncOpenState = isOpenRef.current && !wasRequestedDismiss;
+        if (shouldSyncOpenState) {
+            closeReasonRef.current = closeReasonRef.current === 'system' ? 'gesture' : closeReasonRef.current;
+        }
+        finishClosedLifecycle(shouldSyncOpenState);
+    }, [finishClosedLifecycle]);
+    const handleDetentChange = React.useCallback((event) => {
+        const payload = createDetentPayload(event.nativeEvent, semanticDetents, nativeDetents);
+        if (detentIndexProp == null) {
+            setCurrentDetentIndex(payload.index);
+        }
+        currentDetentIndexRef.current = payload.index;
+        onDetentChange === null || onDetentChange === void 0 ? void 0 : onDetentChange(payload.index, payload);
+    }, [detentIndexProp, nativeDetents, onDetentChange, semanticDetents]);
+    const handleBackPress = React.useCallback(() => {
+        var _a, _b;
+        closeReasonRef.current = 'back';
+        return (_b = (_a = nativeProps === null || nativeProps === void 0 ? void 0 : nativeProps.onBackPress) === null || _a === void 0 ? void 0 : _a.call(nativeProps)) !== null && _b !== void 0 ? _b : true;
+    }, [nativeProps]);
+    const handleBackdropPress = React.useCallback(() => {
+        if (disabled || !dismissible || !backdropConfig.dismissOnPress || !isOpenRef.current)
+            return;
+        closeReasonRef.current = 'backdrop';
+        setOpen(false, 'backdrop', currentDetentIndexRef.current);
+    }, [backdropConfig.dismissOnPress, disabled, dismissible, setOpen]);
+    const resolvedHeader = toNativeSlot(header !== undefined || title != null || description != null ? (header !== undefined ? (renderSlot(header, context)) : ((0, jsx_runtime_1.jsx)(slots_1.SheetHeader, { title: title, description: description }))) : undefined);
+    const resolvedFooter = toNativeSlot(footer !== undefined ? renderSlot(footer, context) : undefined);
+    const resolvedChildren = renderSlot(children, context);
+    const handleConfig = handle && typeof handle === 'object' ? handle : {};
+    const handleVisible = handle !== false;
+    const surfaceColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.surface;
+    const resolvedCornerRadius = cornerRadius !== null && cornerRadius !== void 0 ? cornerRadius : getDefaultCornerRadius();
+    const sheetNode = ((0, jsx_runtime_1.jsx)(react_native_true_sheet_1.TrueSheet, { ...nativeProps, ref: nativeRef, testID: testID, accessibilityLabel: accessibilityLabel, detents: nativeDetents, dimmed: backdropConfig.visible && !usesManualBackdrop, dimmedDetentIndex: 0, dismissible: !disabled && dismissible, draggable: !disabled && draggable, backgroundColor: surfaceColor, cornerRadius: resolvedCornerRadius, grabber: handleVisible, grabberOptions: handleVisible
+            ? {
+                width: (_a = handleConfig.width) !== null && _a !== void 0 ? _a : (0, zkit_tools_1.wp)(36),
+                height: (_b = handleConfig.height) !== null && _b !== void 0 ? _b : (0, zkit_tools_1.wp)(4),
+                topMargin: (_c = handleConfig.topMargin) !== null && _c !== void 0 ? _c : (0, zkit_tools_1.wp)(10),
+                cornerRadius: (_d = handleConfig.radius) !== null && _d !== void 0 ? _d : (0, zkit_tools_1.wp)(2),
+                color: (_e = handleConfig.color) !== null && _e !== void 0 ? _e : theme.colors.border,
+            }
+            : undefined, maxContentHeight: maxHeight, maxContentWidth: maxWidth, header: resolvedHeader, headerStyle: headerStyle, footer: resolvedFooter, footerStyle: footerStyle, style: style, onDidPresent: handleDidPresent, onDidDismiss: handleDidDismiss, onDetentChange: handleDetentChange, onBackPress: handleBackPress, children: resolvedChildren }));
+    if (!shellMounted)
+        return null;
+    if (usesManualBackdrop) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: true, transparent: true, animationType: "none", statusBarTranslucent: true, presentationStyle: "overFullScreen", onRequestClose: handleBackdropPress, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modalRoot, pointerEvents: "box-none", children: [manualBackdropMounted ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: backdropAccessibilityLabel, disabled: disabled || !dismissible || !backdropConfig.dismissOnPress, onPress: handleBackdropPress, style: react_native_1.StyleSheet.absoluteFill, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
+                                react_native_1.StyleSheet.absoluteFill,
+                                {
+                                    backgroundColor: backdropConfig.color,
+                                    opacity: backdropOpacity,
+                                },
+                            ] }) })) : null, sheetNode] }) }));
+    }
+    return sheetNode;
+});
+const styles = react_native_1.StyleSheet.create({
+    modalRoot: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+});

package/dist/ui/Sheet/nativeBottom.web.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { SheetCloseOptions, SheetOpenOptions, SheetState } from './types';
+export type NativeBottomSheetOpenChangeDetails = {
+    reason: 'api' | 'backdrop' | 'back' | 'gesture' | 'system';
+    detentIndex: number;
+};
+export type NativeBottomSheetCloseCompleteDetails = {
+    reason: 'api' | 'backdrop' | 'back' | 'gesture' | 'system';
+    detentIndex: number;
+};
+export type NativeBottomSheetRef = {
+    open: (options?: SheetOpenOptions) => Promise<void>;
+    close: (options?: SheetCloseOptions) => Promise<void>;
+    snapTo: (detentIndex: number) => Promise<void>;
+    getState: () => SheetState;
+};
+export declare const NativeBottomSheet: React.ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & React.RefAttributes<NativeBottomSheetRef>>;
+//# sourceMappingURL=nativeBottom.web.d.ts.map

package/dist/ui/Sheet/nativeBottom.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeBottom.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Sheet/nativeBottom.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACX,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,kCAAkC,GAAG;IAC/C,MAAM,EAAE,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qCAAqC,GAAG;IAClD,MAAM,EAAE,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,QAAQ,EAAE,MAAM,UAAU,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mHAe7B,CAAC"}

package/dist/ui/Sheet/nativeBottom.web.js

@@ -0,0 +1,46 @@
+"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.NativeBottomSheet = void 0;
+const React = __importStar(require("react"));
+exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet(_, ref) {
+    React.useImperativeHandle(ref, () => ({
+        open: async () => { },
+        close: async () => { },
+        snapTo: async () => { },
+        getState: () => 'closed',
+    }), []);
+    return null;
+});

package/dist/ui/Sheet/slots.d.ts

@@ -0,0 +1,5 @@
+import type { SheetContentProps, SheetFooterProps, SheetHeaderProps } from './types';
+export declare function SheetHeader({ title, description, children, style, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SheetContent({ style, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SheetFooter({ safeArea, style, ...props }: SheetFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=slots.d.ts.map

package/dist/ui/Sheet/slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../../src/ui/Sheet/slots.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA2BlB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAElE;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAe,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAKjF"}

package/dist/ui/Sheet/slots.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetHeader = SheetHeader;
+exports.SheetContent = SheetContent;
+exports.SheetFooter = SheetFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const Text_1 = require("../Text");
+function SheetHeader({ title, description, children, style, ...props }) {
+    const theme = (0, useTheme_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ...props, style: [styles.header, style], children: children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title != null ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { accessibilityRole: "header", numberOfLines: 2, size: "lg", weight: "semibold", style: { color: theme.colors.onSurface }, children: title })) : null, description != null ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: 3, size: "sm", style: { color: theme.colors.muted }, children: description })) : null] })) }));
+}
+function SheetContent({ style, ...props }) {
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { ...props, style: [styles.content, style] });
+}
+function SheetFooter({ safeArea = true, style, ...props }) {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const paddingBottom = safeArea ? Math.max(insets.bottom, (0, zkit_tools_1.wp)(12)) : undefined;
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { ...props, style: [styles.footer, paddingBottom != null && { paddingBottom }, style] });
+}
+const styles = react_native_1.StyleSheet.create({
+    header: {
+        gap: (0, zkit_tools_1.wp)(4),
+        paddingHorizontal: (0, zkit_tools_1.wp)(20),
+        paddingTop: (0, zkit_tools_1.wp)(20),
+        paddingBottom: (0, zkit_tools_1.wp)(12),
+    },
+    content: {
+        paddingHorizontal: (0, zkit_tools_1.wp)(20),
+        paddingVertical: (0, zkit_tools_1.wp)(16),
+    },
+    footer: {
+        gap: (0, zkit_tools_1.wp)(10),
+        paddingHorizontal: (0, zkit_tools_1.wp)(20),
+        paddingTop: (0, zkit_tools_1.wp)(12),
+    },
+});