@metamask-previews/design-system-react-native 0.9.0-preview.694a8ed → 0.11.0-preview.23cc337

package/dist/components/BottomSheet/BottomSheet.cjs

@@ -0,0 +1,109 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
+exports.BottomSheet = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native/index.js");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const BottomSheetDialog_1 = __importDefault(require("../BottomSheetDialog/index.cjs"));
+const BottomSheetOverlay_1 = require("../BottomSheetOverlay/BottomSheetOverlay.cjs");
+exports.BottomSheet = (0, react_1.forwardRef)(({ children, onClose, onOpen, goBack, style, twClassName, isInteractable = true, shouldNavigateBack = true, isFullscreen = false, keyboardAvoidingViewEnabled = true, ...props }, ref) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const { bottom: screenBottomPadding } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const { y: frameY } = (0, react_native_safe_area_context_1.useSafeAreaFrame)();
+    const postCallback = (0, react_1.useRef)();
+    const bottomSheetDialogRef = (0, react_1.useRef)(null);
+    const didNavigateBackRef = (0, react_1.useRef)(false);
+    const closeRequestedRef = (0, react_1.useRef)(false);
+    const didRunPostCallbackRef = (0, react_1.useRef)(false);
+    const onOpenCB = (0, react_1.useCallback)(() => {
+        // Reset when the sheet is opened again.
+        didNavigateBackRef.current = false;
+        closeRequestedRef.current = false;
+        didRunPostCallbackRef.current = false;
+        onOpen?.(Boolean(postCallback.current));
+        const callback = postCallback.current;
+        postCallback.current = undefined;
+        callback?.();
+    }, [onOpen]);
+    const onCloseCB = (0, react_1.useCallback)(() => {
+        if (shouldNavigateBack && !didNavigateBackRef.current) {
+            didNavigateBackRef.current = true;
+            goBack();
+        }
+        const callback = postCallback.current;
+        const hasCallback = Boolean(callback);
+        onClose?.(hasCallback);
+        if (!didRunPostCallbackRef.current && hasCallback) {
+            didRunPostCallbackRef.current = true;
+            postCallback.current = undefined;
+            callback?.();
+        }
+    }, [goBack, onClose, shouldNavigateBack]);
+    // Dismiss the sheet when Android back button is pressed.
+    (0, react_1.useEffect)(() => {
+        const hardwareBackPress = () => {
+            if (isInteractable) {
+                bottomSheetDialogRef.current?.onCloseDialog();
+            }
+            return true;
+        };
+        react_native_1.BackHandler.addEventListener('hardwareBackPress', hardwareBackPress);
+        return () => {
+            react_native_1.BackHandler.removeEventListener('hardwareBackPress', hardwareBackPress);
+        };
+    }, [isInteractable]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        onCloseBottomSheet: (callback) => {
+            if (closeRequestedRef.current) {
+                return;
+            }
+            closeRequestedRef.current = true;
+            postCallback.current = callback;
+            bottomSheetDialogRef.current?.onCloseDialog();
+        },
+        onOpenBottomSheet: (callback) => {
+            didNavigateBackRef.current = false;
+            closeRequestedRef.current = false;
+            didRunPostCallbackRef.current = false;
+            postCallback.current = callback;
+            bottomSheetDialogRef.current?.onOpenDialog();
+        },
+    }));
+    return (<react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={react_native_1.Platform.OS === 'ios' ? -screenBottomPadding : frameY} style={[tw.style('absolute inset-0 justify-end'), style]} enabled={keyboardAvoidingViewEnabled} {...props}>
+        <BottomSheetOverlay_1.BottomSheetOverlay onPress={isInteractable
+            ? () => bottomSheetDialogRef.current?.onCloseDialog()
+            : undefined}/>
+        <BottomSheetDialog_1.default isInteractable={isInteractable} onClose={onCloseCB} onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} twClassName={twClassName} keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}>
+          {children}
+        </BottomSheetDialog_1.default>
+      </react_native_1.KeyboardAvoidingView>);
+});
+exports.BottomSheet.displayName = 'BottomSheet';
+//# sourceMappingURL=BottomSheet.cjs.map

package/dist/components/BottomSheet/BottomSheet.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { BackHandler, KeyboardAvoidingView, Platform } from 'react-native';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nimport BottomSheetDialog from '../BottomSheetDialog';\nimport type { BottomSheetDialogRef } from '../BottomSheetDialog';\nimport { BottomSheetOverlay } from '../BottomSheetOverlay/BottomSheetOverlay';\n\nimport type {\n  BottomSheetPostCallback,\n  BottomSheetProps,\n  BottomSheetRef,\n} from './BottomSheet.types';\n\nexport const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(\n  (\n    {\n      children,\n      onClose,\n      onOpen,\n      goBack,\n      style,\n      twClassName,\n      isInteractable = true,\n      shouldNavigateBack = true,\n      isFullscreen = false,\n      keyboardAvoidingViewEnabled = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const { bottom: screenBottomPadding } = useSafeAreaInsets();\n    const { y: frameY } = useSafeAreaFrame();\n    const postCallback = useRef<BottomSheetPostCallback>();\n    const bottomSheetDialogRef = useRef<BottomSheetDialogRef>(null);\n    const didNavigateBackRef = useRef(false);\n    const closeRequestedRef = useRef(false);\n    const didRunPostCallbackRef = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      // Reset when the sheet is opened again.\n      didNavigateBackRef.current = false;\n      closeRequestedRef.current = false;\n      didRunPostCallbackRef.current = false;\n\n      onOpen?.(Boolean(postCallback.current));\n      const callback = postCallback.current;\n      postCallback.current = undefined;\n      callback?.();\n    }, [onOpen]);\n\n    const onCloseCB = useCallback(() => {\n      if (shouldNavigateBack && !didNavigateBackRef.current) {\n        didNavigateBackRef.current = true;\n        goBack();\n      }\n\n      const callback = postCallback.current;\n      const hasCallback = Boolean(callback);\n\n      onClose?.(hasCallback);\n\n      if (!didRunPostCallbackRef.current && hasCallback) {\n        didRunPostCallbackRef.current = true;\n        postCallback.current = undefined;\n        callback?.();\n      }\n    }, [goBack, onClose, shouldNavigateBack]);\n\n    // Dismiss the sheet when Android back button is pressed.\n    useEffect(() => {\n      const hardwareBackPress = () => {\n        if (isInteractable) {\n          bottomSheetDialogRef.current?.onCloseDialog();\n        }\n        return true;\n      };\n      BackHandler.addEventListener('hardwareBackPress', hardwareBackPress);\n      return () => {\n        BackHandler.removeEventListener('hardwareBackPress', hardwareBackPress);\n      };\n    }, [isInteractable]);\n\n    useImperativeHandle(ref, () => ({\n      onCloseBottomSheet: (callback) => {\n        if (closeRequestedRef.current) {\n          return;\n        }\n        closeRequestedRef.current = true;\n        postCallback.current = callback;\n        bottomSheetDialogRef.current?.onCloseDialog();\n      },\n      onOpenBottomSheet: (callback) => {\n        didNavigateBackRef.current = false;\n        closeRequestedRef.current = false;\n        didRunPostCallbackRef.current = false;\n        postCallback.current = callback;\n        bottomSheetDialogRef.current?.onOpenDialog();\n      },\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        style={[tw.style('absolute inset-0 justify-end'), style]}\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <BottomSheetOverlay\n          onPress={\n            isInteractable\n              ? () => bottomSheetDialogRef.current?.onCloseDialog()\n              : undefined\n          }\n        />\n        <BottomSheetDialog\n          isInteractable={isInteractable}\n          onClose={onCloseCB}\n          onOpen={onOpenCB}\n          ref={bottomSheetDialogRef}\n          isFullscreen={isFullscreen}\n          twClassName={twClassName}\n          keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}\n        >\n          {children}\n        </BottomSheetDialog>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n\nBottomSheet.displayName = 'BottomSheet';\n"]}

package/dist/components/BottomSheet/BottomSheet.d.cts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { BottomSheetRef } from "./BottomSheet.types.cjs";
+export declare const BottomSheet: React.ForwardRefExoticComponent<{
+    shouldNavigateBack?: boolean | undefined;
+    goBack: () => void;
+    keyboardAvoidingViewEnabled?: boolean | undefined;
+} & {
+    children?: React.ReactNode;
+    isFullscreen?: boolean | undefined;
+    isInteractable?: boolean | undefined;
+    keyboardAvoidingViewEnabled?: boolean | undefined;
+    onClose?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
+    onOpen?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
+    twClassName?: string | undefined;
+} & import("react-native").ViewProps & React.RefAttributes<BottomSheetRef>>;
+//# sourceMappingURL=BottomSheet.d.cts.map

package/dist/components/BottomSheet/BottomSheet.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAWf,OAAO,KAAK,EAGV,cAAc,EACf,gCAA4B;AAE7B,eAAO,MAAM,WAAW;;;;;;;;;;;;2EAuHvB,CAAC"}

package/dist/components/BottomSheet/BottomSheet.d.mts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { BottomSheetRef } from "./BottomSheet.types.mjs";
+export declare const BottomSheet: React.ForwardRefExoticComponent<{
+    shouldNavigateBack?: boolean | undefined;
+    goBack: () => void;
+    keyboardAvoidingViewEnabled?: boolean | undefined;
+} & {
+    children?: React.ReactNode;
+    isFullscreen?: boolean | undefined;
+    isInteractable?: boolean | undefined;
+    keyboardAvoidingViewEnabled?: boolean | undefined;
+    onClose?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
+    onOpen?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
+    twClassName?: string | undefined;
+} & import("react-native").ViewProps & React.RefAttributes<BottomSheetRef>>;
+//# sourceMappingURL=BottomSheet.d.mts.map

package/dist/components/BottomSheet/BottomSheet.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAWf,OAAO,KAAK,EAGV,cAAc,EACf,gCAA4B;AAE7B,eAAO,MAAM,WAAW;;;;;;;;;;;;2EAuHvB,CAAC"}

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -0,0 +1,87 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
+import $React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
+const React = $importDefault($React);
+import { BackHandler, KeyboardAvoidingView, Platform } from "react-native/index.js";
+import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context";
+import BottomSheetDialog from "../BottomSheetDialog/index.mjs";
+import { BottomSheetOverlay } from "../BottomSheetOverlay/BottomSheetOverlay.mjs";
+export const BottomSheet = forwardRef(({ children, onClose, onOpen, goBack, style, twClassName, isInteractable = true, shouldNavigateBack = true, isFullscreen = false, keyboardAvoidingViewEnabled = true, ...props }, ref) => {
+    const tw = useTailwind();
+    const { bottom: screenBottomPadding } = useSafeAreaInsets();
+    const { y: frameY } = useSafeAreaFrame();
+    const postCallback = useRef();
+    const bottomSheetDialogRef = useRef(null);
+    const didNavigateBackRef = useRef(false);
+    const closeRequestedRef = useRef(false);
+    const didRunPostCallbackRef = useRef(false);
+    const onOpenCB = useCallback(() => {
+        // Reset when the sheet is opened again.
+        didNavigateBackRef.current = false;
+        closeRequestedRef.current = false;
+        didRunPostCallbackRef.current = false;
+        onOpen?.(Boolean(postCallback.current));
+        const callback = postCallback.current;
+        postCallback.current = undefined;
+        callback?.();
+    }, [onOpen]);
+    const onCloseCB = useCallback(() => {
+        if (shouldNavigateBack && !didNavigateBackRef.current) {
+            didNavigateBackRef.current = true;
+            goBack();
+        }
+        const callback = postCallback.current;
+        const hasCallback = Boolean(callback);
+        onClose?.(hasCallback);
+        if (!didRunPostCallbackRef.current && hasCallback) {
+            didRunPostCallbackRef.current = true;
+            postCallback.current = undefined;
+            callback?.();
+        }
+    }, [goBack, onClose, shouldNavigateBack]);
+    // Dismiss the sheet when Android back button is pressed.
+    useEffect(() => {
+        const hardwareBackPress = () => {
+            if (isInteractable) {
+                bottomSheetDialogRef.current?.onCloseDialog();
+            }
+            return true;
+        };
+        BackHandler.addEventListener('hardwareBackPress', hardwareBackPress);
+        return () => {
+            BackHandler.removeEventListener('hardwareBackPress', hardwareBackPress);
+        };
+    }, [isInteractable]);
+    useImperativeHandle(ref, () => ({
+        onCloseBottomSheet: (callback) => {
+            if (closeRequestedRef.current) {
+                return;
+            }
+            closeRequestedRef.current = true;
+            postCallback.current = callback;
+            bottomSheetDialogRef.current?.onCloseDialog();
+        },
+        onOpenBottomSheet: (callback) => {
+            didNavigateBackRef.current = false;
+            closeRequestedRef.current = false;
+            didRunPostCallbackRef.current = false;
+            postCallback.current = callback;
+            bottomSheetDialogRef.current?.onOpenDialog();
+        },
+    }));
+    return (<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={Platform.OS === 'ios' ? -screenBottomPadding : frameY} style={[tw.style('absolute inset-0 justify-end'), style]} enabled={keyboardAvoidingViewEnabled} {...props}>
+        <BottomSheetOverlay onPress={isInteractable
+            ? () => bottomSheetDialogRef.current?.onCloseDialog()
+            : undefined}/>
+        <BottomSheetDialog isInteractable={isInteractable} onClose={onCloseCB} onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} twClassName={twClassName} keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}>
+          {children}
+        </BottomSheetDialog>
+      </KeyboardAvoidingView>);
+});
+BottomSheet.displayName = 'BottomSheet';
+//# sourceMappingURL=BottomSheet.mjs.map

package/dist/components/BottomSheet/BottomSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { BackHandler, KeyboardAvoidingView, Platform } from 'react-native';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nimport BottomSheetDialog from '../BottomSheetDialog';\nimport type { BottomSheetDialogRef } from '../BottomSheetDialog';\nimport { BottomSheetOverlay } from '../BottomSheetOverlay/BottomSheetOverlay';\n\nimport type {\n  BottomSheetPostCallback,\n  BottomSheetProps,\n  BottomSheetRef,\n} from './BottomSheet.types';\n\nexport const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(\n  (\n    {\n      children,\n      onClose,\n      onOpen,\n      goBack,\n      style,\n      twClassName,\n      isInteractable = true,\n      shouldNavigateBack = true,\n      isFullscreen = false,\n      keyboardAvoidingViewEnabled = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const { bottom: screenBottomPadding } = useSafeAreaInsets();\n    const { y: frameY } = useSafeAreaFrame();\n    const postCallback = useRef<BottomSheetPostCallback>();\n    const bottomSheetDialogRef = useRef<BottomSheetDialogRef>(null);\n    const didNavigateBackRef = useRef(false);\n    const closeRequestedRef = useRef(false);\n    const didRunPostCallbackRef = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      // Reset when the sheet is opened again.\n      didNavigateBackRef.current = false;\n      closeRequestedRef.current = false;\n      didRunPostCallbackRef.current = false;\n\n      onOpen?.(Boolean(postCallback.current));\n      const callback = postCallback.current;\n      postCallback.current = undefined;\n      callback?.();\n    }, [onOpen]);\n\n    const onCloseCB = useCallback(() => {\n      if (shouldNavigateBack && !didNavigateBackRef.current) {\n        didNavigateBackRef.current = true;\n        goBack();\n      }\n\n      const callback = postCallback.current;\n      const hasCallback = Boolean(callback);\n\n      onClose?.(hasCallback);\n\n      if (!didRunPostCallbackRef.current && hasCallback) {\n        didRunPostCallbackRef.current = true;\n        postCallback.current = undefined;\n        callback?.();\n      }\n    }, [goBack, onClose, shouldNavigateBack]);\n\n    // Dismiss the sheet when Android back button is pressed.\n    useEffect(() => {\n      const hardwareBackPress = () => {\n        if (isInteractable) {\n          bottomSheetDialogRef.current?.onCloseDialog();\n        }\n        return true;\n      };\n      BackHandler.addEventListener('hardwareBackPress', hardwareBackPress);\n      return () => {\n        BackHandler.removeEventListener('hardwareBackPress', hardwareBackPress);\n      };\n    }, [isInteractable]);\n\n    useImperativeHandle(ref, () => ({\n      onCloseBottomSheet: (callback) => {\n        if (closeRequestedRef.current) {\n          return;\n        }\n        closeRequestedRef.current = true;\n        postCallback.current = callback;\n        bottomSheetDialogRef.current?.onCloseDialog();\n      },\n      onOpenBottomSheet: (callback) => {\n        didNavigateBackRef.current = false;\n        closeRequestedRef.current = false;\n        didRunPostCallbackRef.current = false;\n        postCallback.current = callback;\n        bottomSheetDialogRef.current?.onOpenDialog();\n      },\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        style={[tw.style('absolute inset-0 justify-end'), style]}\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <BottomSheetOverlay\n          onPress={\n            isInteractable\n              ? () => bottomSheetDialogRef.current?.onCloseDialog()\n              : undefined\n          }\n        />\n        <BottomSheetDialog\n          isInteractable={isInteractable}\n          onClose={onCloseCB}\n          onOpen={onOpenCB}\n          ref={bottomSheetDialogRef}\n          isFullscreen={isFullscreen}\n          twClassName={twClassName}\n          keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}\n        >\n          {children}\n        </BottomSheetDialog>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n\nBottomSheet.displayName = 'BottomSheet';\n"]}

package/dist/components/BottomSheet/BottomSheet.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=BottomSheet.types.cjs.map

package/dist/components/BottomSheet/BottomSheet.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.types.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BottomSheetDialogProps } from '../BottomSheetDialog/BottomSheetDialog.types';\n\n/**\n * BottomSheet component props.\n */\nexport type BottomSheetProps = {\n  /**\n   * Optional boolean that indicates if sheet is unmounted from the stack or not when closed.\n   *\n   * @default true\n   */\n  shouldNavigateBack?: boolean;\n\n  /**\n   * Callback invoked to navigate back when shouldNavigateBack is true and the sheet closes.\n   */\n  goBack: () => void;\n\n  /**\n   * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n   *\n   * @default true\n   */\n  keyboardAvoidingViewEnabled?: boolean;\n} & BottomSheetDialogProps;\n\nexport type BottomSheetPostCallback = () => void;\n\nexport type BottomSheetRef = {\n  onOpenBottomSheet: (callback?: BottomSheetPostCallback) => void;\n  onCloseBottomSheet: (callback?: BottomSheetPostCallback) => void;\n};\n"]}

package/dist/components/BottomSheet/BottomSheet.types.d.cts

@@ -0,0 +1,28 @@
+import type { BottomSheetDialogProps } from "../BottomSheetDialog/BottomSheetDialog.types.cjs";
+/**
+ * BottomSheet component props.
+ */
+export type BottomSheetProps = {
+    /**
+     * Optional boolean that indicates if sheet is unmounted from the stack or not when closed.
+     *
+     * @default true
+     */
+    shouldNavigateBack?: boolean;
+    /**
+     * Callback invoked to navigate back when shouldNavigateBack is true and the sheet closes.
+     */
+    goBack: () => void;
+    /**
+     * Optional boolean that indicates if the KeyboardAvoidingView is enabled.
+     *
+     * @default true
+     */
+    keyboardAvoidingViewEnabled?: boolean;
+} & BottomSheetDialogProps;
+export type BottomSheetPostCallback = () => void;
+export type BottomSheetRef = {
+    onOpenBottomSheet: (callback?: BottomSheetPostCallback) => void;
+    onCloseBottomSheet: (callback?: BottomSheetPostCallback) => void;
+};
+//# sourceMappingURL=BottomSheet.types.d.cts.map

package/dist/components/BottomSheet/BottomSheet.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,yDAAqD;AAE3F;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,GAAG,sBAAsB,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG,MAAM,IAAI,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG;IAC3B,iBAAiB,EAAE,CAAC,QAAQ,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAChE,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAClE,CAAC"}

package/dist/components/BottomSheet/BottomSheet.types.d.mts

@@ -0,0 +1,28 @@
+import type { BottomSheetDialogProps } from "../BottomSheetDialog/BottomSheetDialog.types.mjs";
+/**
+ * BottomSheet component props.
+ */
+export type BottomSheetProps = {
+    /**
+     * Optional boolean that indicates if sheet is unmounted from the stack or not when closed.
+     *
+     * @default true
+     */
+    shouldNavigateBack?: boolean;
+    /**
+     * Callback invoked to navigate back when shouldNavigateBack is true and the sheet closes.
+     */
+    goBack: () => void;
+    /**
+     * Optional boolean that indicates if the KeyboardAvoidingView is enabled.
+     *
+     * @default true
+     */
+    keyboardAvoidingViewEnabled?: boolean;
+} & BottomSheetDialogProps;
+export type BottomSheetPostCallback = () => void;
+export type BottomSheetRef = {
+    onOpenBottomSheet: (callback?: BottomSheetPostCallback) => void;
+    onCloseBottomSheet: (callback?: BottomSheetPostCallback) => void;
+};
+//# sourceMappingURL=BottomSheet.types.d.mts.map

package/dist/components/BottomSheet/BottomSheet.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,yDAAqD;AAE3F;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,GAAG,sBAAsB,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG,MAAM,IAAI,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG;IAC3B,iBAAiB,EAAE,CAAC,QAAQ,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAChE,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAClE,CAAC"}

package/dist/components/BottomSheet/BottomSheet.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BottomSheet.types.mjs.map

package/dist/components/BottomSheet/BottomSheet.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BottomSheetDialogProps } from '../BottomSheetDialog/BottomSheetDialog.types';\n\n/**\n * BottomSheet component props.\n */\nexport type BottomSheetProps = {\n  /**\n   * Optional boolean that indicates if sheet is unmounted from the stack or not when closed.\n   *\n   * @default true\n   */\n  shouldNavigateBack?: boolean;\n\n  /**\n   * Callback invoked to navigate back when shouldNavigateBack is true and the sheet closes.\n   */\n  goBack: () => void;\n\n  /**\n   * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n   *\n   * @default true\n   */\n  keyboardAvoidingViewEnabled?: boolean;\n} & BottomSheetDialogProps;\n\nexport type BottomSheetPostCallback = () => void;\n\nexport type BottomSheetRef = {\n  onOpenBottomSheet: (callback?: BottomSheetPostCallback) => void;\n  onCloseBottomSheet: (callback?: BottomSheetPostCallback) => void;\n};\n"]}

package/dist/components/BottomSheet/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheet = void 0;
+var BottomSheet_1 = require("./BottomSheet.cjs");
+Object.defineProperty(exports, "BottomSheet", { enumerable: true, get: function () { return BottomSheet_1.BottomSheet; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/BottomSheet/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheet/index.ts"],"names":[],"mappings":";;;AAAA,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { BottomSheet } from './BottomSheet';\nexport type {\n  BottomSheetProps,\n  BottomSheetRef,\n  BottomSheetPostCallback,\n} from './BottomSheet.types';\n"]}

package/dist/components/BottomSheet/index.d.cts

@@ -0,0 +1,3 @@
+export { BottomSheet } from "./BottomSheet.cjs";
+export type { BottomSheetProps, BottomSheetRef, BottomSheetPostCallback, } from "./BottomSheet.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/BottomSheet/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,uBAAuB,GACxB,gCAA4B"}

package/dist/components/BottomSheet/index.d.mts

@@ -0,0 +1,3 @@
+export { BottomSheet } from "./BottomSheet.mjs";
+export type { BottomSheetProps, BottomSheetRef, BottomSheetPostCallback, } from "./BottomSheet.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/BottomSheet/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,uBAAuB,GACxB,gCAA4B"}

package/dist/components/BottomSheet/index.mjs

@@ -0,0 +1,2 @@
+export { BottomSheet } from "./BottomSheet.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/BottomSheet/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export { BottomSheet } from './BottomSheet';\nexport type {\n  BottomSheetProps,\n  BottomSheetRef,\n  BottomSheetPostCallback,\n} from './BottomSheet.types';\n"]}

package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs

@@ -0,0 +1,207 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const design_tokens_1 = require("@metamask-previews/design-tokens");
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native/index.js");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+// eslint-disable-next-line import-x/default
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+// Internal dependencies.
+const BottomSheetDialog_constants_1 = require("./BottomSheetDialog.constants.cjs");
+const BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true, onClose, onOpen, style, twClassName, ...props }, ref) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const currentTheme = (0, design_system_twrnc_preset_1.useTheme)();
+    const shadowLg = currentTheme === design_system_twrnc_preset_1.Theme.Light
+        ? design_tokens_1.lightTheme.shadows.size.lg
+        : design_tokens_1.darkTheme.shadows.size.lg;
+    const { top: screenTopPadding, bottom: screenBottomPadding } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const { y: frameY, height: screenHeight } = (0, react_native_safe_area_context_1.useSafeAreaFrame)();
+    const maxSheetHeight = screenHeight - screenTopPadding;
+    // X and Y values start on top left of the DIALOG
+    // currentYOffset will be used to animate the Y position of the Dialog
+    const currentYOffset = (0, react_native_reanimated_1.useSharedValue)(screenHeight);
+    const topOfDialogYValue = (0, react_native_reanimated_1.useSharedValue)(0);
+    const bottomOfDialogYValue = (0, react_native_reanimated_1.useSharedValue)(screenHeight);
+    const isMounted = (0, react_1.useRef)(false);
+    const onOpenCB = (0, react_1.useCallback)(() => {
+        onOpen?.();
+    }, [onOpen]);
+    const onCloseCB = (0, react_1.useCallback)(() => {
+        onClose?.();
+    }, [onClose]);
+    const onCloseDialog = (0, react_1.useCallback)((callback) => {
+        currentYOffset.value = (0, react_native_reanimated_1.withTiming)(bottomOfDialogYValue.value, { duration: BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION }, () => {
+            (0, react_native_reanimated_1.runOnJS)(onCloseCB)();
+            if (callback) {
+                (0, react_native_reanimated_1.runOnJS)(callback)();
+            }
+        });
+        // Ref values do not affect deps.
+    }, [onCloseCB]);
+    const gestureHandler = (0, react_native_reanimated_1.useAnimatedGestureHandler)({
+        onStart: (_, ctx) => {
+            // Starts tracking vertical position of gesture
+            ctx.startY = currentYOffset.value;
+        },
+        onActive: (event, ctx) => {
+            const { translationY } = event;
+            currentYOffset.value = ctx.startY + translationY;
+            // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),
+            // which means the gesture is currently below the bottom of the dialog,
+            // sets it to bottom of Dialog Y value
+            if (currentYOffset.value >= bottomOfDialogYValue.value) {
+                currentYOffset.value = bottomOfDialogYValue.value;
+            }
+            // If gesture Y value goes below the top of Dialog Y value(top of dialog),
+            // which means the gesture is currently above the top of the dialog,
+            // sets it to top of Dialog Y value
+            if (currentYOffset.value <= topOfDialogYValue.value) {
+                currentYOffset.value = topOfDialogYValue.value;
+            }
+        },
+        onEnd: (event, ctx) => {
+            const { translationY, velocityY } = event;
+            // finalYOffset is used to animate the Y position of the Dialog after the gesture event
+            let finalYOffset;
+            // Measuring dismissing swipe action
+            const latestOffset = ctx.startY + translationY;
+            // Check if the swipe distance reach the dismiss offset threshold,
+            // which is currently 60% of sheet height
+            const hasReachedDismissOffset = latestOffset >
+                bottomOfDialogYValue.value *
+                    BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;
+            // Check if the gesture's vertical speed has reached the threshold to determine a swipe action
+            const hasReachedSwipeThreshold = Math.abs(velocityY) >
+                BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;
+            const isQuickDismissing = velocityY > 0;
+            // If user is swiping
+            if (hasReachedSwipeThreshold) {
+                // Quick swipe takes priority
+                if (isQuickDismissing) {
+                    finalYOffset = bottomOfDialogYValue.value;
+                }
+                else {
+                    finalYOffset = topOfDialogYValue.value;
+                }
+            }
+            else if (hasReachedDismissOffset) {
+                finalYOffset = bottomOfDialogYValue.value;
+            }
+            else {
+                finalYOffset = topOfDialogYValue.value;
+            }
+            const isDismissed = finalYOffset === bottomOfDialogYValue.value;
+            if (isDismissed) {
+                (0, react_native_reanimated_1.runOnJS)(onCloseDialog)();
+            }
+            else {
+                // Only animate dialog to a certain Y position instead
+                currentYOffset.value = (0, react_native_reanimated_1.withTiming)(finalYOffset, {
+                    duration: BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
+                });
+            }
+        },
+    });
+    // Animate in sheet on initial render.
+    const onOpenDialog = (callback) => {
+        // Starts setting the Y position of the dialog to the bottom of the dialog
+        currentYOffset.value = bottomOfDialogYValue.value;
+        // Animate the Y position to the top of the dialog, then call onOpenCB
+        currentYOffset.value = (0, react_native_reanimated_1.withTiming)(topOfDialogYValue.value, {
+            duration: BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
+        }, () => {
+            (0, react_native_reanimated_1.runOnJS)(onOpenCB)();
+            if (callback) {
+                (0, react_native_reanimated_1.runOnJS)(callback)();
+            }
+        });
+    };
+    const onDebouncedCloseDialog = (0, react_1.useMemo)(
+    // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.
+    () => (0, lodash_1.debounce)(onCloseDialog, 2000, { leading: true }), [onCloseDialog]);
+    (0, react_1.useEffect)(() => 
+    // Automatically handles animation when content changes
+    // Disable for now since network switches causes the screen to hang with this on.
+    // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    onDebouncedCloseDialog.cancel(), [children, onDebouncedCloseDialog]);
+    const updateSheetHeight = (e) => {
+        const { height } = e.nativeEvent.layout;
+        bottomOfDialogYValue.value = height;
+        if (!isMounted.current) {
+            isMounted.current = true;
+            onOpenDialog();
+        }
+    };
+    const animatedSheetStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [
+            {
+                translateY: currentYOffset.value,
+            },
+        ],
+    }));
+    const sheetStyle = (0, react_1.useMemo)(() => [
+        tw.style('bg-default rounded-t-3xl overflow-hidden border border-muted', twClassName),
+        {
+            maxHeight: maxSheetHeight,
+            paddingBottom: react_native_1.Platform.select({
+                ios: screenBottomPadding,
+                macos: screenBottomPadding,
+                default: screenBottomPadding + 16,
+            }),
+            ...(isFullscreen && { height: maxSheetHeight }),
+            ...shadowLg,
+        },
+        style,
+    ], [
+        tw,
+        maxSheetHeight,
+        screenBottomPadding,
+        isFullscreen,
+        shadowLg,
+        style,
+        twClassName,
+    ]);
+    const combinedSheetStyle = (0, react_1.useMemo)(() => [...sheetStyle, animatedSheetStyle], [sheetStyle]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        onOpenDialog,
+        onCloseDialog,
+    }));
+    return (<react_native_1.KeyboardAvoidingView style={tw.style('absolute bottom-0 inset-x-0')} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={react_native_1.Platform.OS === 'ios' ? -screenBottomPadding : frameY} enabled={keyboardAvoidingViewEnabled} {...props}>
+        <react_native_gesture_handler_1.PanGestureHandler enabled={isInteractable} onGestureEvent={gestureHandler}>
+          <react_native_reanimated_1.default.View onLayout={updateSheetHeight} style={combinedSheetStyle}>
+            {isInteractable && (<react_native_1.View style={tw.style('self-stretch items-center p-1')}>
+                <react_native_1.View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')}/>
+              </react_native_1.View>)}
+            {children}
+          </react_native_reanimated_1.default.View>
+        </react_native_gesture_handler_1.PanGestureHandler>
+      </react_native_1.KeyboardAvoidingView>);
+});
+exports.default = BottomSheetDialog;
+//# sourceMappingURL=BottomSheetDialog.cjs.map