related-ui-components 4.0.3 → 4.0.4

package/lib/module/contexts/UniversalModalProvider.js

@@ -0,0 +1,218 @@
+"use strict";
+
+import { Portal, PortalHost, PortalProvider } from "@gorhom/portal";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { BackHandler, Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import { KeyboardAvoidingView } from "react-native-keyboard-controller";
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// --- Types ---
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// --- Context ---
+
+const ModalContext = /*#__PURE__*/createContext(undefined);
+export const DEFAULT_MODAL_HOST = "UniversalModalHost";
+
+// --- Default Modal UI Component ---
+const DefaultModalUI = ({
+  isVisible,
+  children,
+  options,
+  onClose
+}) => {
+  const insets = useSafeAreaInsets();
+  const [isRendered, setIsRendered] = useState(isVisible);
+  const opacity = useSharedValue(0);
+  const {
+    closeOnBackdropPress = true,
+    closeOnBackButton = true,
+    animationConfig = {
+      duration: 300,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1)
+    },
+    position = "center",
+    avoidKeyboard = true,
+    backdropStyle,
+    containerStyle
+  } = options;
+  useEffect(() => {
+    if (isVisible) setIsRendered(true);
+    opacity.value = withTiming(isVisible ? 1 : 0, animationConfig, finished => {
+      if (finished && !isVisible) {
+        runOnJS(setIsRendered)(false);
+      }
+    });
+  }, [isVisible, animationConfig]);
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (isVisible && closeOnBackButton) {
+        onClose();
+        return true;
+      }
+      return false;
+    });
+    return () => backHandler.remove();
+  }, [isVisible, closeOnBackButton, onClose]);
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
+  const contentAnimatedStyle = useAnimatedStyle(() => {
+    // Simple slide/fade effect based on position
+    let transform = [];
+    if (position === "bottom") {
+      transform.push({
+        translateY: (1 - opacity.value) * 100
+      });
+    } else if (position === "top") {
+      transform.push({
+        translateY: (1 - opacity.value) * -100
+      });
+    } else {
+      transform.push({
+        scale: 0.9 + opacity.value * 0.1
+      });
+    }
+    return {
+      opacity: opacity.value,
+      transform
+    };
+  });
+  if (!isRendered) return null;
+  const justifyContent = position === "bottom" ? "flex-end" : position === "top" ? "flex-start" : "center";
+  const paddingBottom = position === "bottom" ? insets.bottom : 0;
+  const paddingTop = position === "top" ? insets.top : 0;
+  const ContentWrapper = avoidKeyboard ? KeyboardAvoidingView : View;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [StyleSheet.absoluteFill, styles.overlayWrapper, {
+      justifyContent
+    }],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, styles.backdrop, backdropStyle, backdropAnimatedStyle],
+      children: /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: StyleSheet.absoluteFill,
+        activeOpacity: 1,
+        onPress: closeOnBackdropPress ? onClose : undefined
+      })
+    }), /*#__PURE__*/_jsx(ContentWrapper, {
+      behavior: Platform.OS === "ios" ? "padding" : undefined,
+      style: [styles.keyboardView, {
+        paddingBottom,
+        paddingTop
+      }],
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.baseContainer, containerStyle, contentAnimatedStyle],
+        children: children
+      })
+    })]
+  });
+};
+
+// --- Provider ---
+
+export const UniversalModalProvider = ({
+  children,
+  defaultOptions = {},
+  portalHostName = DEFAULT_MODAL_HOST,
+  CustomModalComponent
+}) => {
+  const [state, setState] = useState({
+    isVisible: false,
+    content: null,
+    options: defaultOptions
+  });
+  const showModal = useCallback((content, options) => {
+    setState({
+      isVisible: true,
+      content,
+      options: {
+        ...defaultOptions,
+        ...options
+      }
+    });
+  }, [defaultOptions]);
+  const hideModal = useCallback(() => {
+    setState(prev => ({
+      ...prev,
+      isVisible: false
+    }));
+    // Clear content after animation normally finishes to avoid flicker
+    setTimeout(() => {
+      setState(prev => {
+        // Only clear if still hidden (prevent race condition if immediately reshown)
+        return !prev.isVisible ? {
+          ...prev,
+          content: null
+        } : prev;
+      });
+    }, 350);
+  }, []);
+  const ModalUI = CustomModalComponent || DefaultModalUI;
+  const value = useMemo(() => ({
+    showModal,
+    hideModal,
+    isVisible: state.isVisible
+  }), [showModal, hideModal, state.isVisible]);
+  return /*#__PURE__*/_jsx(ModalContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsxs(PortalProvider, {
+      children: [children, /*#__PURE__*/_jsx(PortalHost, {
+        name: portalHostName
+      }), /*#__PURE__*/_jsx(Portal, {
+        hostName: portalHostName,
+        children: /*#__PURE__*/_jsx(ModalUI, {
+          isVisible: state.isVisible,
+          options: state.options,
+          onClose: hideModal,
+          children: state.content
+        })
+      })]
+    })
+  });
+};
+
+// --- Hook ---
+
+export const useModal = () => {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("useModal must be used within a UniversalModalProvider");
+  }
+  return context;
+};
+
+// --- Default Styles ---
+
+const styles = StyleSheet.create({
+  overlayWrapper: {
+    zIndex: 1000,
+    elevation: 1000
+  },
+  backdrop: {
+    backgroundColor: "rgba(0, 0, 0, 0.6)"
+  },
+  keyboardView: {
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  baseContainer: {
+    backgroundColor: "white",
+    // Default, allows override
+    borderRadius: 16,
+    padding: 20,
+    width: "90%",
+    maxWidth: 500,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
+  }
+});
+//# sourceMappingURL=UniversalModalProvider.js.map

package/lib/module/contexts/UniversalModalProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Portal","PortalHost","PortalProvider","React","createContext","useCallback","useContext","useEffect","useMemo","useState","BackHandler","Platform","StyleSheet","TouchableOpacity","View","KeyboardAvoidingView","Animated","Easing","runOnJS","useAnimatedStyle","useSharedValue","withTiming","useSafeAreaInsets","jsx","_jsx","jsxs","_jsxs","ModalContext","undefined","DEFAULT_MODAL_HOST","DefaultModalUI","isVisible","children","options","onClose","insets","isRendered","setIsRendered","opacity","closeOnBackdropPress","closeOnBackButton","animationConfig","duration","easing","bezier","position","avoidKeyboard","backdropStyle","containerStyle","value","finished","backHandler","addEventListener","remove","backdropAnimatedStyle","contentAnimatedStyle","transform","push","translateY","scale","justifyContent","paddingBottom","bottom","paddingTop","top","ContentWrapper","style","absoluteFill","styles","overlayWrapper","backdrop","activeOpacity","onPress","behavior","OS","keyboardView","pointerEvents","baseContainer","UniversalModalProvider","defaultOptions","portalHostName","CustomModalComponent","state","setState","content","showModal","hideModal","prev","setTimeout","ModalUI","Provider","name","hostName","useModal","context","Error","create","zIndex","elevation","backgroundColor","flexGrow","alignItems","borderRadius","padding","width","maxWidth","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/UniversalModalProvider.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/contexts/index.js

@@ -2,4 +2,5 @@
 
 export * from "./BottomSheetStackContext.js";
 export * from "./BottomSheetStackProvider.js";
+export * from "./UniversalModalProvider.js";
 //# sourceMappingURL=index.js.map

package/lib/module/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["contexts/index.ts"],"mappings":";;AAAA,cAAc,8BAA2B;AACzC,cAAc,+BAA4B","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["contexts/index.ts"],"mappings":";;AAAA,cAAc,8BAA2B;AACzC,cAAc,+BAA4B;AAC1C,cAAc,6BAA0B","ignoreList":[]}

package/lib/typescript/src/contexts/UniversalModalProvider.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { WithTimingConfig } from "react-native-reanimated";
+export interface ModalOptions {
+    /** Should the modal close when tapping the backdrop? Default: true */
+    closeOnBackdropPress?: boolean;
+    /** Should the hardware back button close the modal? Default: true */
+    closeOnBackButton?: boolean;
+    /** Animation configuration for entry/exit */
+    animationConfig?: WithTimingConfig;
+    /** Custom styles for the backdrop */
+    backdropStyle?: StyleProp<ViewStyle>;
+    /** Custom styles for the modal container (the white box) */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Position of the modal. Default: 'center' */
+    position?: "center" | "bottom" | "top";
+    /** If true, avoids keyboard view. Default: true */
+    avoidKeyboard?: boolean;
+}
+interface ModalContextType {
+    showModal: (content: ReactNode, options?: ModalOptions) => void;
+    hideModal: () => void;
+    isVisible: boolean;
+}
+interface ModalProviderProps {
+    children: ReactNode;
+    /** Global default options for all modals */
+    defaultOptions?: ModalOptions;
+    /** Optional: Provide a specific Portal Host name if nesting providers */
+    portalHostName?: string;
+    /** Optional: Override the internal Modal UI component completely */
+    CustomModalComponent?: React.FC<{
+        isVisible: boolean;
+        children: ReactNode;
+        options: ModalOptions;
+        onClose: () => void;
+    }>;
+}
+export declare const DEFAULT_MODAL_HOST = "UniversalModalHost";
+export declare const UniversalModalProvider: React.FC<ModalProviderProps>;
+export declare const useModal: () => ModalContextType;
+export {};
+//# sourceMappingURL=UniversalModalProvider.d.ts.map

package/lib/typescript/src/contexts/UniversalModalProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalModalProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/UniversalModalProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAiB,EAQf,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,6CAA6C;IAC7C,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,qCAAqC;IACrC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,4DAA4D;IAC5D,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,gBAAgB;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAChE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAC9B,SAAS,EAAE,OAAO,CAAC;QACnB,QAAQ,EAAE,SAAS,CAAC;QACpB,OAAO,EAAE,YAAY,CAAC;QACtB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC,CAAC;CACJ;AAMD,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AAgHvD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiE/D,CAAC;AAIF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}

package/lib/typescript/src/contexts/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./BottomSheetStackContext";
 export * from "./BottomSheetStackProvider";
+export * from "./UniversalModalProvider";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/contexts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -34,7 +34,8 @@
     "react-native-reanimated": ">=3.0.0",
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.11.2",
-    "react-native-toast-message": ">=2.3.3"
+    "react-native-toast-message": ">=2.3.3",
+    "react-native-keyboard-controller": "^1.18.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/src/contexts/UniversalModalProvider.tsx

@@ -0,0 +1,293 @@
+import { Portal, PortalHost, PortalProvider } from "@gorhom/portal";
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  BackHandler,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+import { KeyboardProvider as RNKeyboardProvider, KeyboardAvoidingView } from "react-native-keyboard-controller";
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeOut,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  WithTimingConfig,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// --- Types ---
+export interface ModalOptions {
+  /** Should the modal close when tapping the backdrop? Default: true */
+  closeOnBackdropPress?: boolean;
+  /** Should the hardware back button close the modal? Default: true */
+  closeOnBackButton?: boolean;
+  /** Animation configuration for entry/exit */
+  animationConfig?: WithTimingConfig;
+  /** Custom styles for the backdrop */
+  backdropStyle?: StyleProp<ViewStyle>;
+  /** Custom styles for the modal container (the white box) */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Position of the modal. Default: 'center' */
+  position?: "center" | "bottom" | "top";
+  /** If true, avoids keyboard view. Default: true */
+  avoidKeyboard?: boolean;
+}
+
+interface ModalContextType {
+  showModal: (content: ReactNode, options?: ModalOptions) => void;
+  hideModal: () => void;
+  isVisible: boolean;
+}
+
+interface ModalProviderProps {
+  children: ReactNode;
+  /** Global default options for all modals */
+  defaultOptions?: ModalOptions;
+  /** Optional: Provide a specific Portal Host name if nesting providers */
+  portalHostName?: string;
+  /** Optional: Override the internal Modal UI component completely */
+  CustomModalComponent?: React.FC<{
+    isVisible: boolean;
+    children: ReactNode;
+    options: ModalOptions;
+    onClose: () => void;
+  }>;
+}
+
+// --- Context ---
+
+const ModalContext = createContext<ModalContextType | undefined>(undefined);
+
+export const DEFAULT_MODAL_HOST = "UniversalModalHost";
+
+// --- Default Modal UI Component ---
+const DefaultModalUI: React.FC<{
+  isVisible: boolean;
+  children: ReactNode;
+  options: ModalOptions;
+  onClose: () => void;
+}> = ({ isVisible, children, options, onClose }) => {
+  const insets = useSafeAreaInsets();
+  const [isRendered, setIsRendered] = useState(isVisible);
+  const opacity = useSharedValue(0);
+
+  const {
+    closeOnBackdropPress = true,
+    closeOnBackButton = true,
+    animationConfig = { duration: 300, easing: Easing.bezier(0.25, 0.1, 0.25, 1) },
+    position = "center",
+    avoidKeyboard = true,
+    backdropStyle,
+    containerStyle,
+  } = options;
+
+  useEffect(() => {
+    if (isVisible) setIsRendered(true);
+
+    opacity.value = withTiming(
+      isVisible ? 1 : 0,
+      animationConfig,
+      (finished) => {
+        if (finished && !isVisible) {
+          runOnJS(setIsRendered)(false);
+        }
+      }
+    );
+  }, [isVisible, animationConfig]);
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (isVisible && closeOnBackButton) {
+        onClose();
+        return true;
+      }
+      return false;
+    });
+    return () => backHandler.remove();
+  }, [isVisible, closeOnBackButton, onClose]);
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const contentAnimatedStyle = useAnimatedStyle(() => {
+    // Simple slide/fade effect based on position
+    let transform = [];
+    if (position === "bottom") {
+      transform.push({ translateY: (1 - opacity.value) * 100 });
+    } else if (position === "top") {
+      transform.push({ translateY: (1 - opacity.value) * -100 });
+    } else {
+      transform.push({ scale: 0.9 + opacity.value * 0.1 });
+    }
+    
+    return {
+      opacity: opacity.value,
+      transform,
+    };
+  });
+
+  if (!isRendered) return null;
+
+  const justifyContent =
+    position === "bottom" ? "flex-end" : position === "top" ? "flex-start" : "center";
+
+  const paddingBottom = position === "bottom" ? insets.bottom : 0;
+  const paddingTop = position === "top" ? insets.top : 0;
+
+  const ContentWrapper = avoidKeyboard ? KeyboardAvoidingView : View;
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.overlayWrapper, { justifyContent }]}>
+      {/* Backdrop */}
+      <Animated.View style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle, backdropAnimatedStyle]}>
+        <TouchableOpacity
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={closeOnBackdropPress ? onClose : undefined}
+        />
+      </Animated.View>
+
+      {/* Content */}
+      <ContentWrapper
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={[styles.keyboardView, { paddingBottom, paddingTop }]}
+        pointerEvents="box-none"
+      >
+        <Animated.View
+          style={[
+            styles.baseContainer,
+            containerStyle,
+            contentAnimatedStyle,
+          ]}
+        >
+          {children}
+        </Animated.View>
+      </ContentWrapper>
+    </View>
+  );
+};
+
+// --- Provider ---
+
+export const UniversalModalProvider: React.FC<ModalProviderProps> = ({
+  children,
+  defaultOptions = {},
+  portalHostName = DEFAULT_MODAL_HOST,
+  CustomModalComponent,
+}) => {
+  const [state, setState] = useState<{
+    isVisible: boolean;
+    content: ReactNode | null;
+    options: ModalOptions;
+  }>({
+    isVisible: false,
+    content: null,
+    options: defaultOptions,
+  });
+
+  const showModal = useCallback(
+    (content: ReactNode, options?: ModalOptions) => {
+      setState({
+        isVisible: true,
+        content,
+        options: { ...defaultOptions, ...options },
+      });
+    },
+    [defaultOptions]
+  );
+
+  const hideModal = useCallback(() => {
+    setState((prev) => ({ ...prev, isVisible: false }));
+    // Clear content after animation normally finishes to avoid flicker
+    setTimeout(() => {
+        setState((prev) => { 
+            // Only clear if still hidden (prevent race condition if immediately reshown)
+            return !prev.isVisible ? { ...prev, content: null } : prev 
+        });
+    }, 350); 
+  }, []);
+
+  const ModalUI = CustomModalComponent || DefaultModalUI;
+
+  const value = useMemo(
+    () => ({ showModal, hideModal, isVisible: state.isVisible }),
+    [showModal, hideModal, state.isVisible]
+  );
+
+  return (
+    <ModalContext.Provider value={value}>
+       {/* Ensure PortalProvider exists if not wrapped at root */}
+       {/* Note: If you already have PortalProvider at root, this nested one might not be strictly necessary depending on usage, 
+           but wrapping the host ensures the modal renders here. */}
+      <PortalProvider>
+        {children}
+        <PortalHost name={portalHostName} />
+        <Portal hostName={portalHostName}>
+          <ModalUI
+            isVisible={state.isVisible}
+            options={state.options}
+            onClose={hideModal}
+          >
+            {state.content}
+          </ModalUI>
+        </Portal>
+      </PortalProvider>
+    </ModalContext.Provider>
+  );
+};
+
+// --- Hook ---
+
+export const useModal = () => {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("useModal must be used within a UniversalModalProvider");
+  }
+  return context;
+};
+
+// --- Default Styles ---
+
+const styles = StyleSheet.create({
+  overlayWrapper: {
+    zIndex: 1000,
+    elevation: 1000,
+  },
+  backdrop: {
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+  },
+  keyboardView: {
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  baseContainer: {
+    backgroundColor: "white", // Default, allows override
+    borderRadius: 16,
+    padding: 20,
+    width: "90%",
+    maxWidth: 500,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+});

package/src/contexts/index.ts

@@ -1,2 +1,3 @@
 export * from "./BottomSheetStackContext"
-export * from "./BottomSheetStackProvider"
+export * from "./BottomSheetStackProvider"
+export * from "./UniversalModalProvider";