@0610studio/zs-ui 0.0.1

package/build/model/useNotifyProvider.js

@@ -0,0 +1,165 @@
+import { useCallback, useRef, useState } from 'react';
+import { Dimensions, Keyboard } from 'react-native';
+import NotifyContext from './useNotify';
+import AlertNotify from '../notify/AlertNotify';
+import SnackbarNotify from '../notify/SnackbarNotify';
+import BottomSheetNotify from '../notify/BottomSheetNotify';
+import LoadingNotify from '../notify/LoadingNotify';
+import PopOverMenu from '../notify/PopOver/PopOverMenu';
+const BS_MAX_HEIGHT = Dimensions.get('window').height - 120;
+export function NotifyProvider({ customSnackbar, loaderComponent, children }) {
+    // Alert
+    const [title, setTitle] = useState('');
+    const [informative, setInformative] = useState('');
+    const [alertVisible, setAlertVisible] = useState(false);
+    const [actions, setActions] = useState();
+    const [isBackgroundTouchClose, setIsBackgroundTouchClose] = useState(true);
+    const [titleStyle, setTitleStyle] = useState();
+    const [informativeStyle, setInformativeStyle] = useState();
+    const [secondaryButtonStyle, setSecondaryButtonStyle] = useState();
+    const [primaryButtonStyle, setPrimaryButtonStyle] = useState();
+    const [secondaryButtonTextStyle, setSecondaryButtonTextStyle] = useState();
+    const [primaryButtonTextStyle, setPrimaryButtonTextStyle] = useState();
+    const [singleButtonTextStyle, setSingleButtonTextStyle] = useState();
+    // Snackbar
+    const [snackItemStack, setSnackItemStack] = useState([]);
+    // BottomSheet
+    const [contentsGestureEnable, setContentsGestureEnable] = useState(false);
+    const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
+    const [bottomSheetBackgroundColor, setBottomSheetBackgroundColor] = useState();
+    const [bottomSheetComponent, setBottomSheetComponent] = useState(false);
+    const [bottomSheetPadding, setBottomSheetPadding] = useState(undefined);
+    const [bottomSheetMarginX, setBottomSheetMarginX] = useState(undefined);
+    const [bottomSheetMaxHeight, setBottomSheetMaxHeight] = useState(BS_MAX_HEIGHT);
+    const [bottomSheetScrollView, setBottomSheetScrollView] = useState(true);
+    const [isBottomRadius, setIsBottomRadius] = useState(true);
+    const [handleVisible, setHandleVisible] = useState(true);
+    const [marginBottomBS, setMarginBottomBs] = useState(undefined);
+    const bottomSheetRef = useRef(null);
+    // Loading
+    const [loaderVisible, setLoaderVisible] = useState(false);
+    // PopOver
+    const [popOverVisible, setPopOverVisible] = useState(false);
+    const [popOverLocation, setPopOverLocation] = useState({ px: 0, py: 0 });
+    const [popOverComponent, setPopOverComponent] = useState(false);
+    // ---
+    const [fontFamily, setFontFamily] = useState(undefined);
+    const showAlert = ({ title, informative, actions, isBackgroundTouchClose = true, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle, }) => {
+        Keyboard.dismiss();
+        setTitle(title);
+        setInformative(informative);
+        setActions(actions || {});
+        setIsBackgroundTouchClose(isBackgroundTouchClose);
+        setAlertVisible(true);
+        setTitleStyle(titleStyle);
+        setInformativeStyle(informativeStyle);
+        setSecondaryButtonStyle(secondaryButtonStyle);
+        setPrimaryButtonStyle(primaryButtonStyle);
+        setSecondaryButtonTextStyle(secondaryButtonTextStyle);
+        setPrimaryButtonTextStyle(primaryButtonTextStyle);
+        setSingleButtonTextStyle(singleButtonTextStyle);
+        setFontFamily(fontFamily);
+    };
+    const showBottomSheet = ({ isHandleVisible = true, component, contentsGestureEnable = true, marginHorizontal, padding, marginBottom, backgroundColor, isBottomRadius = true, maxHeight, isScrollView = true }) => {
+        Keyboard.dismiss();
+        padding && setBottomSheetPadding(padding);
+        marginBottom && setMarginBottomBs(marginBottom);
+        marginHorizontal && setBottomSheetMarginX(marginHorizontal);
+        backgroundColor && setBottomSheetBackgroundColor(backgroundColor);
+        maxHeight && setBottomSheetMaxHeight(maxHeight);
+        setContentsGestureEnable(contentsGestureEnable);
+        setHandleVisible(isHandleVisible);
+        setBottomSheetScrollView(isScrollView);
+        setIsBottomRadius(isBottomRadius);
+        setBottomSheetComponent(component);
+        bottomSheetRef.current?.handleVisible(true);
+    };
+    const showLoader = () => {
+        setLoaderVisible(true);
+    };
+    const showPopOverMenu = ({ px, py, component }) => {
+        setPopOverLocation({ px, py });
+        setPopOverComponent(component);
+        setPopOverVisible(true);
+    };
+    const showSnackBar = ({ message, type = 'success', index = Date.now(), snackbarDuration = 3000 }) => {
+        // TODO: 스택 쌓고싶은데 삭제될 때 참조를 잃어서 삭제가 안되는 문제가 있음.
+        setSnackItemStack((prev) => {
+            if (prev.length === 0) {
+                return [...prev, { message, type, index: index, snackbarDuration: snackbarDuration }];
+            }
+            else {
+                return prev;
+            }
+            ;
+        });
+    };
+    const hideSnackBar = (index) => {
+        setSnackItemStack((prev) => prev.filter((item) => item.index !== index));
+    };
+    const hideNotify = useCallback((option) => {
+        switch (option) {
+            case 'alert':
+                setAlertVisible(false);
+                break;
+            case 'snack':
+                setSnackItemStack([]);
+                break;
+            case 'bottomSheet':
+                bottomSheetRef.current?.handleVisible(false);
+                break;
+            case 'loader':
+                setLoaderVisible(false);
+                break;
+            case 'popOver':
+                setPopOverVisible(false);
+                break;
+            case 'all':
+                setAlertVisible(false);
+                setSnackItemStack([]);
+                setLoaderVisible(false);
+                setPopOverVisible(false);
+                bottomSheetRef.current?.handleVisible(false);
+                break;
+            default:
+                break;
+        }
+        ;
+    }, []);
+    return (<NotifyContext.Provider value={{
+            alertVisible,
+            setAlertVisible,
+            // ---
+            snackItemStack,
+            hideSnackBar,
+            // ---
+            bottomSheetVisible,
+            setBottomSheetVisible,
+            // ---
+            loaderVisible,
+            // ---
+            popOverVisible,
+            setPopOverVisible,
+            // ---
+            showAlert,
+            showSnackBar,
+            showBottomSheet,
+            showLoader,
+            showPopOverMenu,
+            // ---
+            hideNotify,
+        }}>
+            {children}
+
+            <BottomSheetNotify ref={bottomSheetRef} bottomSheetComponent={bottomSheetComponent} contentsGestureEnable={contentsGestureEnable} bottomSheetPadding={bottomSheetPadding} marginBottomBS={marginBottomBS} isHandleVisible={handleVisible} bottomSheetMarginX={bottomSheetMarginX} isBottomRadius={isBottomRadius} bottomSheetBackgroundColor={bottomSheetBackgroundColor} maxHeight={bottomSheetMaxHeight} isScrollView={bottomSheetScrollView}/>
+
+            <PopOverMenu px={popOverLocation?.px} py={popOverLocation?.py} component={popOverComponent}/>
+
+            <SnackbarNotify customSnackbar={customSnackbar}/>
+
+            <AlertNotify title={title} informative={informative} actions={actions || {}} isBackgroundTouchClose={isBackgroundTouchClose} titleStyle={titleStyle} informativeStyle={informativeStyle} secondaryButtonStyle={secondaryButtonStyle} primaryButtonStyle={primaryButtonStyle} secondaryButtonTextStyle={secondaryButtonTextStyle} primaryButtonTextStyle={primaryButtonTextStyle} singleButtonTextStyle={singleButtonTextStyle}/>
+
+            <LoadingNotify loaderComponent={loaderComponent}/>
+        </NotifyContext.Provider>);
+}
+//# sourceMappingURL=useNotifyProvider.js.map

package/build/model/useNotifyProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotifyProvider.js","sourceRoot":"","sources":["../../src/model/useNotifyProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { Dimensions, Keyboard, TextProps, TouchableOpacityProps } from 'react-native';\nimport NotifyContext from './useNotify';\nimport { AlertActions, BottomSheetRef, HideOption, NotifyProviderProps, PopOverMenuProps, ShowAlertProps, ShowBottomSheetProps, ShowSnackBarProps, SnackItem } from './types';\nimport AlertNotify from '../notify/AlertNotify';\nimport SnackbarNotify from '../notify/SnackbarNotify';\nimport BottomSheetNotify from '../notify/BottomSheetNotify';\nimport LoadingNotify from '../notify/LoadingNotify';\nimport PopOverMenu from '../notify/PopOver/PopOverMenu';\n\nconst BS_MAX_HEIGHT = Dimensions.get('window').height - 120;\n\nexport function NotifyProvider({\n    customSnackbar,\n    loaderComponent,\n    children\n}: NotifyProviderProps) {\n    // Alert\n    const [title, setTitle] = useState<string>('');\n    const [informative, setInformative] = useState<string>('');\n    const [alertVisible, setAlertVisible] = useState<boolean>(false);\n    const [actions, setActions] = useState<AlertActions>();\n    const [isBackgroundTouchClose, setIsBackgroundTouchClose] = useState<boolean>(true);\n    const [titleStyle, setTitleStyle] = useState<TextProps['style']>();\n    const [informativeStyle, setInformativeStyle] = useState<TextProps['style']>();\n    const [secondaryButtonStyle, setSecondaryButtonStyle] = useState<TouchableOpacityProps['style']>();\n    const [primaryButtonStyle, setPrimaryButtonStyle] = useState<TouchableOpacityProps['style']>();\n    const [secondaryButtonTextStyle, setSecondaryButtonTextStyle] = useState<TextProps['style']>();\n    const [primaryButtonTextStyle, setPrimaryButtonTextStyle] = useState<TextProps['style']>();\n    const [singleButtonTextStyle, setSingleButtonTextStyle] = useState<TextProps['style']>();\n\n    // Snackbar\n    const [snackItemStack, setSnackItemStack] = useState<SnackItem[]>([]);\n\n    // BottomSheet\n    const [contentsGestureEnable, setContentsGestureEnable] = useState<boolean>(false);\n    const [bottomSheetVisible, setBottomSheetVisible] = useState<boolean>(false);\n    const [bottomSheetBackgroundColor, setBottomSheetBackgroundColor] = useState<string>();\n    const [bottomSheetComponent, setBottomSheetComponent] = useState<React.ReactNode>(false);\n    const [bottomSheetPadding, setBottomSheetPadding] = useState<number | undefined>(undefined);\n    const [bottomSheetMarginX, setBottomSheetMarginX] = useState<number | undefined>(undefined);\n    const [bottomSheetMaxHeight, setBottomSheetMaxHeight] = useState<number>(BS_MAX_HEIGHT);\n    const [bottomSheetScrollView, setBottomSheetScrollView] = useState<boolean>(true);\n    const [isBottomRadius, setIsBottomRadius] = useState<boolean>(true);\n    const [handleVisible, setHandleVisible] = useState<boolean>(true);\n    const [marginBottomBS, setMarginBottomBs] = useState<number | undefined>(undefined);\n    const bottomSheetRef = useRef<BottomSheetRef | null>(null);\n\n    // Loading\n    const [loaderVisible, setLoaderVisible] = useState<boolean>(false);\n\n    // PopOver\n    const [popOverVisible, setPopOverVisible] = useState<boolean>(false);\n    const [popOverLocation, setPopOverLocation] = useState<{ px: PopOverMenuProps['px'], py: PopOverMenuProps['py'] }>({ px: 0, py: 0 });\n    const [popOverComponent, setPopOverComponent] = useState<React.ReactNode>(false);\n\n    // ---\n    const [fontFamily, setFontFamily] = useState<string | undefined | { title?: string; info?: string; label?: string; }>(undefined);\n\n\n    const showAlert = ({\n        title,\n        informative,\n        actions,\n        isBackgroundTouchClose = true,\n        titleStyle,\n        informativeStyle,\n        secondaryButtonStyle,\n        primaryButtonStyle,\n        secondaryButtonTextStyle,\n        primaryButtonTextStyle,\n        singleButtonTextStyle,\n    }: ShowAlertProps) => {\n        Keyboard.dismiss();\n        setTitle(title);\n        setInformative(informative);\n        setActions(actions || {} as AlertActions);\n        setIsBackgroundTouchClose(isBackgroundTouchClose);\n        setAlertVisible(true);\n\n        setTitleStyle(titleStyle);\n        setInformativeStyle(informativeStyle);\n        setSecondaryButtonStyle(secondaryButtonStyle);\n        setPrimaryButtonStyle(primaryButtonStyle);\n        setSecondaryButtonTextStyle(secondaryButtonTextStyle);\n        setPrimaryButtonTextStyle(primaryButtonTextStyle);\n        setSingleButtonTextStyle(singleButtonTextStyle);\n\n        setFontFamily(fontFamily);\n    };\n\n    const showBottomSheet = ({\n        isHandleVisible = true,\n        component,\n        contentsGestureEnable = true,\n        marginHorizontal,\n        padding,\n        marginBottom,\n        backgroundColor,\n        isBottomRadius = true,\n        maxHeight,\n        isScrollView = true\n    }: ShowBottomSheetProps) => {\n        Keyboard.dismiss();\n        padding && setBottomSheetPadding(padding);\n        marginBottom && setMarginBottomBs(marginBottom);\n        marginHorizontal && setBottomSheetMarginX(marginHorizontal);\n        backgroundColor && setBottomSheetBackgroundColor(backgroundColor);\n        maxHeight && setBottomSheetMaxHeight(maxHeight);\n        setContentsGestureEnable(contentsGestureEnable);\n        setHandleVisible(isHandleVisible);\n        setBottomSheetScrollView(isScrollView);\n        setIsBottomRadius(isBottomRadius);\n        setBottomSheetComponent(component);\n        bottomSheetRef.current?.handleVisible(true);\n    };\n\n    const showLoader = () => {\n        setLoaderVisible(true);\n    };\n\n    const showPopOverMenu = ({\n        px,\n        py,\n        component\n    }: PopOverMenuProps) => {\n        setPopOverLocation({ px, py });\n        setPopOverComponent(component);\n        setPopOverVisible(true);\n    }\n\n    const showSnackBar = ({\n        message,\n        type = 'success',\n        index = Date.now(),\n        snackbarDuration = 3000\n    }: ShowSnackBarProps) => {\n        // TODO: 스택 쌓고싶은데 삭제될 때 참조를 잃어서 삭제가 안되는 문제가 있음.\n        setSnackItemStack((prev) => {\n            if (prev.length === 0) {\n                return [...prev, { message, type, index: index, snackbarDuration: snackbarDuration }];\n            } else {\n                return prev;\n            };\n        });\n    };\n\n    const hideSnackBar = (index: number) => {\n        setSnackItemStack((prev) => prev.filter((item) => item.index !== index));\n    };\n\n    const hideNotify = useCallback((option: HideOption) => {\n        switch (option) {\n            case 'alert':\n                setAlertVisible(false);\n                break;\n            case 'snack':\n                setSnackItemStack([]);\n                break;\n            case 'bottomSheet':\n                bottomSheetRef.current?.handleVisible(false);\n                break;\n            case 'loader':\n                setLoaderVisible(false);\n                break;\n            case 'popOver':\n                setPopOverVisible(false);\n                break;\n            case 'all':\n                setAlertVisible(false);\n                setSnackItemStack([]);\n                setLoaderVisible(false);\n                setPopOverVisible(false);\n                bottomSheetRef.current?.handleVisible(false);\n                break;\n            default:\n                break;\n        };\n    }, []);\n\n\n    return (\n        <NotifyContext.Provider value={{\n            alertVisible,\n            setAlertVisible,\n            // ---\n            snackItemStack,\n            hideSnackBar,\n            // ---\n            bottomSheetVisible,\n            setBottomSheetVisible,\n            // ---\n            loaderVisible,\n            // ---\n            popOverVisible,\n            setPopOverVisible,\n            // ---\n            showAlert,\n            showSnackBar,\n            showBottomSheet,\n            showLoader,\n            showPopOverMenu,\n            // ---\n            hideNotify,\n        }}>\n            {children}\n\n            <BottomSheetNotify\n                ref={bottomSheetRef}\n                bottomSheetComponent={bottomSheetComponent}\n                contentsGestureEnable={contentsGestureEnable}\n                bottomSheetPadding={bottomSheetPadding}\n                marginBottomBS={marginBottomBS}\n                isHandleVisible={handleVisible}\n                bottomSheetMarginX={bottomSheetMarginX}\n                isBottomRadius={isBottomRadius}\n                bottomSheetBackgroundColor={bottomSheetBackgroundColor}\n                maxHeight={bottomSheetMaxHeight}\n                isScrollView={bottomSheetScrollView}\n            />\n\n            <PopOverMenu\n                px={popOverLocation?.px}\n                py={popOverLocation?.py}\n                component={popOverComponent}\n            />\n\n            <SnackbarNotify\n                customSnackbar={customSnackbar}\n            />\n\n            <AlertNotify\n                title={title}\n                informative={informative}\n                actions={actions || {} as AlertActions}\n                isBackgroundTouchClose={isBackgroundTouchClose}\n                titleStyle={titleStyle}\n                informativeStyle={informativeStyle}\n                secondaryButtonStyle={secondaryButtonStyle}\n                primaryButtonStyle={primaryButtonStyle}\n                secondaryButtonTextStyle={secondaryButtonTextStyle}\n                primaryButtonTextStyle={primaryButtonTextStyle}\n                singleButtonTextStyle={singleButtonTextStyle}\n            />\n\n            <LoadingNotify\n                loaderComponent={loaderComponent}\n            />\n        </NotifyContext.Provider>\n    );\n}\n"]}

package/build/model/useThemeProvider.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';
+export interface ThemeProviderProps {
+    themeFonts?: ThemeFonts;
+    children: React.ReactNode;
+}
+export interface ThemeProps {
+    palette: Palette;
+    typography: TypographyVariantsProps;
+}
+export interface Palette extends Theme {
+    mode: 'light' | 'dark';
+    isUsingSystemColorScheme: boolean;
+    setUseSystemColorScheme: (useSystem: boolean) => void;
+    toggleTheme: () => void;
+}
+export declare const useTheme: () => ThemeProps;
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+//# sourceMappingURL=useThemeProvider.d.ts.map

package/build/model/useThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeProvider.d.ts","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAG5E,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,uBAAuB,CAAC;CACvC;AAED,MAAM,WAAW,OAAQ,SAAQ,KAAK;IAClC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,wBAAwB,EAAE,OAAO,CAAC;IAClC,uBAAuB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;CAC3B;AAID,eAAO,MAAM,QAAQ,kBAMpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAA"}

package/build/model/useThemeProvider.js

@@ -0,0 +1,73 @@
+import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';
+import { useColorScheme } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import palette from '../theme/palette';
+import typography from '../theme/typography';
+const ThemeContext = createContext(null);
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};
+export const ThemeProvider = ({ themeFonts, children }) => {
+    const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지
+    const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(true);
+    const [mode, setMode] = useState(systemColorScheme === 'dark' ? 'dark' : 'light');
+    // AsyncStorage에서 시스템 모드 사용 설정 값 로드
+    useEffect(() => {
+        const loadSettings = async () => {
+            try {
+                const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');
+                if (storedUseSystemColorScheme !== null) {
+                    setUseSystemColorScheme(storedUseSystemColorScheme === 'true');
+                }
+                const storedMode = await AsyncStorage.getItem('themeMode');
+                if (storedMode) {
+                    setMode(storedMode === 'dark' ? 'dark' : 'light');
+                }
+                else {
+                    setMode(systemColorScheme === 'dark' ? 'dark' : 'light');
+                }
+            }
+            catch (error) {
+                console.error('Failed to load theme settings', error);
+            }
+        };
+        loadSettings();
+    }, [systemColorScheme]);
+    // 시스템 다크 모드 변경에 따른 효과 적용
+    useEffect(() => {
+        if (isUsingSystemColorScheme) {
+            setMode(systemColorScheme === 'dark' ? 'dark' : 'light');
+        }
+    }, [systemColorScheme, isUsingSystemColorScheme]);
+    // 테마 토글 함수
+    const toggleTheme = async () => {
+        setUseSystemColorScheme(false); // 사용자 지정 모드로 전환
+        setMode((prevMode) => {
+            const newMode = prevMode === 'light' ? 'dark' : 'light';
+            AsyncStorage.setItem('themeMode', newMode); // 로컬스토리지에 저장
+            return newMode;
+        });
+    };
+    // 시스템 모드 사용 설정 변경 함수
+    const handleSetUseSystemColorScheme = async (useSystem) => {
+        setUseSystemColorScheme(useSystem);
+        await AsyncStorage.setItem('useSystemColorScheme', useSystem.toString());
+    };
+    const themeValue = useMemo(() => ({
+        palette: {
+            isUsingSystemColorScheme,
+            setUseSystemColorScheme: handleSetUseSystemColorScheme,
+            toggleTheme,
+            ...palette({ mode }), // 선택된 모드에 따른 팔레트 적용
+        },
+        typography: typography({ themeFonts }),
+    }), [mode, isUsingSystemColorScheme, typography, themeFonts]);
+    return (<ThemeContext.Provider value={themeValue}>
+            {children}
+        </ThemeContext.Provider>);
+};
+//# sourceMappingURL=useThemeProvider.js.map

package/build/model/useThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeProvider.js","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';\nimport { useColorScheme } from 'react-native';\nimport AsyncStorage from '@react-native-async-storage/async-storage';\nimport palette from '../theme/palette';\nimport { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';\nimport typography from '../theme/typography';\n\nexport interface ThemeProviderProps {\n    themeFonts?: ThemeFonts;\n    children: React.ReactNode;\n}\n\nexport interface ThemeProps {\n    palette: Palette;\n    typography: TypographyVariantsProps;\n}\n\nexport interface Palette extends Theme {\n    mode: 'light' | 'dark';\n    isUsingSystemColorScheme: boolean;\n    setUseSystemColorScheme: (useSystem: boolean) => void;\n    toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext<ThemeProps | null>(null);\n\nexport const useTheme = () => {\n    const context = useContext(ThemeContext);\n    if (!context) {\n        throw new Error('useTheme must be used within a ThemeProvider');\n    }\n    return context;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ themeFonts, children }) => {\n    const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지\n    const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(true);\n    const [mode, setMode] = useState<'light' | 'dark'>(systemColorScheme === 'dark' ? 'dark' : 'light');\n\n    // AsyncStorage에서 시스템 모드 사용 설정 값 로드\n    useEffect(() => {\n        const loadSettings = async () => {\n            try {\n                const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');\n                if (storedUseSystemColorScheme !== null) {\n                    setUseSystemColorScheme(storedUseSystemColorScheme === 'true');\n                }\n                const storedMode = await AsyncStorage.getItem('themeMode');\n                if (storedMode) {\n                    setMode(storedMode === 'dark' ? 'dark' : 'light');\n                } else {\n                    setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n                }\n            } catch (error) {\n                console.error('Failed to load theme settings', error);\n            }\n        };\n        loadSettings();\n    }, [systemColorScheme]);\n\n    // 시스템 다크 모드 변경에 따른 효과 적용\n    useEffect(() => {\n        if (isUsingSystemColorScheme) {\n            setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n        }\n    }, [systemColorScheme, isUsingSystemColorScheme]);\n\n    // 테마 토글 함수\n    const toggleTheme = async () => {\n        setUseSystemColorScheme(false); // 사용자 지정 모드로 전환\n        setMode((prevMode) => {\n            const newMode = prevMode === 'light' ? 'dark' : 'light';\n            AsyncStorage.setItem('themeMode', newMode); // 로컬스토리지에 저장\n            return newMode;\n        });\n    };\n\n    // 시스템 모드 사용 설정 변경 함수\n    const handleSetUseSystemColorScheme = async (useSystem: boolean) => {\n        setUseSystemColorScheme(useSystem);\n        await AsyncStorage.setItem('useSystemColorScheme', useSystem.toString());\n    };\n\n    const themeValue = useMemo(() => ({\n        palette: {\n            isUsingSystemColorScheme,\n            setUseSystemColorScheme: handleSetUseSystemColorScheme,\n            toggleTheme,\n            ...palette({ mode }), // 선택된 모드에 따른 팔레트 적용\n        },\n        typography: typography({ themeFonts }),\n    }), [mode, isUsingSystemColorScheme, typography, themeFonts]);\n\n    return (\n        <ThemeContext.Provider value={themeValue}>\n            {children}\n        </ThemeContext.Provider>\n    );\n}\n"]}

package/build/model/utils.d.ts

@@ -0,0 +1,12 @@
+import { StyleProp, TextStyle } from "react-native";
+/**
+ * 사각형의 너비와 높이에 따라 비슷한 비율의 테두리 반지름을 계산합니다.
+ * @param width 사각형의 너비입니다.
+ * @param height 사각형의 높이입니다.
+ * @param borderRadius 기본 테두리 반지름입니다.
+ * @returns 계산된 테두리 반지름입니다.
+ */
+export declare const calculateRadius: (width: number, height: number, borderRadius: number) => number;
+export declare const withPromise: <T extends unknown[]>(fn: (...args: T) => Promise<unknown>) => ((...args: T) => void);
+export declare const extractStyle: (style: StyleProp<TextStyle>, attribute: keyof TextStyle) => TextStyle[keyof TextStyle] | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/build/model/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,UAAU,MAAM,gBAAgB,MAAM,WAIlF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,OAAO,EAAE,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,KAAG,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAE5G,CAAC;AAEF,eAAO,MAAM,YAAY,UACd,SAAS,CAAC,SAAS,CAAC,aAChB,MAAM,SAAS,KAC3B,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG,SAQ/B,CAAC"}

package/build/model/utils.js

@@ -0,0 +1,26 @@
+/**
+ * 사각형의 너비와 높이에 따라 비슷한 비율의 테두리 반지름을 계산합니다.
+ * @param width 사각형의 너비입니다.
+ * @param height 사각형의 높이입니다.
+ * @param borderRadius 기본 테두리 반지름입니다.
+ * @returns 계산된 테두리 반지름입니다.
+ */
+export const calculateRadius = (width, height, borderRadius) => {
+    const radiusRatio = Math.max((width / height), (height / width));
+    const calc = borderRadius * (radiusRatio > 1 ? radiusRatio / 2 : radiusRatio);
+    return calc;
+};
+export const withPromise = (fn) => {
+    return (...args) => { void fn(...args); };
+};
+export const extractStyle = (style, attribute) => {
+    if (Array.isArray(style)) {
+        const foundStyle = style.find(item => typeof item === 'object' && item !== null && attribute in item);
+        return foundStyle?.[attribute];
+    }
+    else if (typeof style === 'object' && style !== null && attribute in style) {
+        return style[attribute];
+    }
+    return undefined;
+};
+//# sourceMappingURL=utils.js.map

package/build/model/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,MAAc,EAAE,YAAoB,EAAE,EAAE;IACnF,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;IACjE,MAAM,IAAI,GAAG,YAAY,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC9E,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAsB,EAAoC,EAA0B,EAAE;IAC7G,OAAO,CAAC,GAAG,IAAI,EAAE,EAAE,GAAG,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC,CAAA,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CACxB,KAA2B,EAC3B,SAA0B,EACY,EAAE;IACxC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,IAAI,IAAI,SAAS,IAAI,IAAI,CAAC,CAAC;QACtG,OAAO,UAAU,EAAE,CAAC,SAAoC,CAAC,CAAC;IAC9D,CAAC;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,SAAS,IAAI,KAAK,EAAE,CAAC;QAC3E,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC;IACD,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { StyleProp, TextStyle } from \"react-native\";\n\n/**\n * 사각형의 너비와 높이에 따라 비슷한 비율의 테두리 반지름을 계산합니다.\n * @param width 사각형의 너비입니다.\n * @param height 사각형의 높이입니다.\n * @param borderRadius 기본 테두리 반지름입니다.\n * @returns 계산된 테두리 반지름입니다.\n */\nexport const calculateRadius = (width: number, height: number, borderRadius: number) => {\n    const radiusRatio = Math.max((width / height), (height / width));\n    const calc = borderRadius * (radiusRatio > 1 ? radiusRatio / 2 : radiusRatio);\n    return calc;\n};\n\nexport const withPromise = <T extends unknown[]>(fn: (...args: T) => Promise<unknown>): ((...args: T) => void) => {\n    return (...args) => { void fn(...args) };\n};\n\nexport const extractStyle = (\n    style: StyleProp<TextStyle>,\n    attribute: keyof TextStyle\n): TextStyle[keyof TextStyle] | undefined => {\n    if (Array.isArray(style)) {\n        const foundStyle = style.find(item => typeof item === 'object' && item !== null && attribute in item);\n        return foundStyle?.[attribute as keyof typeof foundStyle];\n    } else if (typeof style === 'object' && style !== null && attribute in style) {\n        return style[attribute];\n    }\n    return undefined;\n};\n"]}

package/build/notify/AlertNotify/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ShowAlertProps } from '../../model/types';
+declare function AlertNotify({ actions, title, informative, isBackgroundTouchClose, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle, }: ShowAlertProps): React.JSX.Element | null;
+export default AlertNotify;
+//# sourceMappingURL=index.d.ts.map

package/build/notify/AlertNotify/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/notify/AlertNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAgB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAUjE,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,WAAW,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,GACtB,EAAE,cAAc,4BAwGhB;AAED,eAAe,WAAW,CAAC"}

package/build/notify/AlertNotify/index.js

@@ -0,0 +1,109 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Dimensions, KeyboardAvoidingView, Platform, Pressable, StyleSheet, TouchableOpacity, BackHandler } from 'react-native';
+import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
+import { useNotify } from '../../model/useNotify';
+import { useTheme } from '../../model/useThemeProvider';
+import { ZSText } from '../../ui';
+import ModalBackground from '../ui/ModalBackground';
+import ViewAtom from '../../ui/atoms/ViewAtom';
+const modalWidth = Dimensions.get('window').width - 60;
+function AlertNotify({ actions, title, informative, isBackgroundTouchClose, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle, }) {
+    const { alertVisible, setAlertVisible } = useNotify();
+    const { palette: { background, text, primary: primaryColor } } = useTheme();
+    const styles = useMemo(() => createStyles({ background }), [background, text, primaryColor]);
+    // 버튼 클릭 핸들러 함수, 콜백 메모이제이션으로 성능 최적화
+    const handleButtonPress = useCallback((onPressFunction) => () => {
+        if (onPressFunction) {
+            onPressFunction();
+        }
+        setAlertVisible(false);
+    }, [setAlertVisible]);
+    // 뒤로가기 버튼 핸들러 함수
+    const backPressHandler = useCallback(() => {
+        if (alertVisible) {
+            setAlertVisible(false);
+            return true;
+        }
+        return false;
+    }, [alertVisible, setAlertVisible]);
+    // 뒤로가기 버튼 리스너 설정
+    useEffect(() => {
+        const backHandler = BackHandler.addEventListener('hardwareBackPress', backPressHandler);
+        return () => backHandler.remove();
+    }, [backPressHandler]);
+    // content를 useMemo로 감싸서 불필요한 재렌더링 방지
+    const content = useMemo(() => {
+        const { primary, secondary } = actions || {};
+        return (<Animated.View entering={FadeInDown.duration(300)} exiting={FadeOutDown.duration(100)}>
+        <Pressable style={[styles.contentContainer, { width: modalWidth }]}>
+          {title && (<ZSText typo='title.2' style={[styles.title, titleStyle]}>{title}</ZSText>)}
+          {informative && (<ZSText typo='body.3' style={[styles.informative, informativeStyle]}>{informative}</ZSText>)}
+          {actions && (<ViewAtom style={styles.buttonContainer}>
+              {secondary ? (<>
+                  <TouchableOpacity style={[
+                        styles.button,
+                        { backgroundColor: background.neutral, marginRight: 8 },
+                        secondaryButtonStyle
+                    ]} onPress={handleButtonPress(secondary?.onPress)}>
+                    <ZSText typo='subTitle.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>
+                  </TouchableOpacity>
+
+                  <TouchableOpacity style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]} onPress={handleButtonPress(primary?.onPress)}>
+                    <ZSText typo='subTitle.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label}</ZSText>
+                  </TouchableOpacity>
+                </>) : (<TouchableOpacity onPress={handleButtonPress(primary?.onPress)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+                  <TouchableOpacity style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]} onPress={handleButtonPress(primary?.onPress)}>
+                    <ZSText typo='subTitle.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>
+                  </TouchableOpacity>
+                </TouchableOpacity>)}
+            </ViewAtom>)}
+        </Pressable>
+      </Animated.View>);
+    }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);
+    return alertVisible ? (<ModalBackground onPress={() => { if (isBackgroundTouchClose)
+        setAlertVisible(false); }}>
+      <KeyboardAvoidingView style={styles.avoidingView} behavior={Platform.OS === 'ios' ? 'padding' : undefined} enabled>
+        {content}
+      </KeyboardAvoidingView>
+    </ModalBackground>) : null;
+}
+export default AlertNotify;
+const createStyles = ({ background, }) => StyleSheet.create({
+    title: {
+        marginBottom: 8,
+        width: '100%',
+        paddingHorizontal: 4
+    },
+    informative: {
+        marginTop: 8,
+        width: '100%',
+        paddingHorizontal: 4
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        width: '100%',
+        marginTop: 24,
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    button: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 14,
+        borderRadius: 12,
+    },
+    avoidingView: {
+        flex: 1,
+        justifyContent: 'center'
+    },
+    contentContainer: {
+        alignItems: 'center',
+        backgroundColor: background.base,
+        borderRadius: 22,
+        paddingBottom: 18,
+        paddingTop: 24,
+        paddingHorizontal: 20
+    },
+});
+//# sourceMappingURL=index.js.map

package/build/notify/AlertNotify/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/notify/AlertNotify/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport { Dimensions, KeyboardAvoidingView, Platform, Pressable, StyleSheet, TouchableOpacity, BackHandler } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useNotify } from '../../model/useNotify';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ThemeBackground } from '../../theme';\nimport { ZSText } from '../../ui';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\n\nconst modalWidth = Dimensions.get('window').width - 60;\n\nfunction AlertNotify({\n  actions,\n  title,\n  informative,\n  isBackgroundTouchClose,\n  titleStyle,\n  informativeStyle,\n  secondaryButtonStyle,\n  primaryButtonStyle,\n  secondaryButtonTextStyle,\n  primaryButtonTextStyle,\n  singleButtonTextStyle,\n}: ShowAlertProps) {\n  const { alertVisible, setAlertVisible } = useNotify();\n  const { palette: { background, text, primary: primaryColor } } = useTheme();\n\n  const styles = useMemo(\n    () => createStyles({ background }),\n    [background, text, primaryColor]\n  );\n\n  // 버튼 클릭 핸들러 함수, 콜백 메모이제이션으로 성능 최적화\n  const handleButtonPress = useCallback(\n    (onPressFunction?: () => void) => () => {\n      if (onPressFunction) {\n        onPressFunction();\n      }\n      setAlertVisible(false);\n    },\n    [setAlertVisible]\n  );\n\n  // 뒤로가기 버튼 핸들러 함수\n  const backPressHandler = useCallback(() => {\n    if (alertVisible) {\n      setAlertVisible(false);\n      return true;\n    }\n    return false;\n  }, [alertVisible, setAlertVisible]);\n\n  // 뒤로가기 버튼 리스너 설정\n  useEffect(() => {\n    const backHandler = BackHandler.addEventListener('hardwareBackPress', backPressHandler);\n    return () => backHandler.remove();\n  }, [backPressHandler]);\n\n  // content를 useMemo로 감싸서 불필요한 재렌더링 방지\n  const content = useMemo(() => {\n    const { primary, secondary } = actions || {} as AlertActions;\n\n    return (\n      <Animated.View\n        entering={FadeInDown.duration(300)}\n        exiting={FadeOutDown.duration(100)}\n      >\n        <Pressable style={[styles.contentContainer, { width: modalWidth }]}>\n          {title && (\n            <ZSText typo='title.2' style={[styles.title, titleStyle]}>{title}</ZSText>\n          )}\n          {informative && (\n            <ZSText typo='body.3' style={[styles.informative, informativeStyle]}>{informative}</ZSText>\n          )}\n          {actions && (\n            <ViewAtom style={styles.buttonContainer}>\n              {secondary ? (\n                <>\n                  <TouchableOpacity\n                    style={[\n                      styles.button,\n                      { backgroundColor: background.neutral, marginRight: 8 },\n                      secondaryButtonStyle\n                    ]}\n                    onPress={handleButtonPress(secondary?.onPress)}\n                  >\n                    <ZSText typo='subTitle.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>\n                  </TouchableOpacity>\n\n                  <TouchableOpacity\n                    style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n                    onPress={handleButtonPress(primary?.onPress)}\n                  >\n                    <ZSText typo='subTitle.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label}</ZSText>\n                  </TouchableOpacity>\n                </>\n              ) : (\n                <TouchableOpacity\n                  onPress={handleButtonPress(primary?.onPress)}\n                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}\n                >\n                  <TouchableOpacity\n                    style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n                    onPress={handleButtonPress(primary?.onPress)}\n                  >\n                    <ZSText typo='subTitle.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n                  </TouchableOpacity>\n                </TouchableOpacity>\n              )}\n            </ViewAtom>\n          )}\n        </Pressable>\n      </Animated.View>\n    );\n  }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);\n\n  return alertVisible ? (\n    <ModalBackground onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}>\n      <KeyboardAvoidingView\n        style={styles.avoidingView}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        enabled\n      >\n        {content}\n      </KeyboardAvoidingView>\n    </ModalBackground>\n  ) : null;\n}\n\nexport default AlertNotify;\n\nconst createStyles = ({\n  background,\n}: {\n  background: ThemeBackground;\n}) =>\n  StyleSheet.create({\n    title: {\n      marginBottom: 8,\n      width: '100%',\n      paddingHorizontal: 4\n    },\n    informative: {\n      marginTop: 8,\n      width: '100%',\n      paddingHorizontal: 4\n    },\n    buttonContainer: {\n      flexDirection: 'row',\n      width: '100%',\n      marginTop: 24,\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n    },\n    button: {\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      paddingVertical: 14,\n      borderRadius: 12,\n    },\n    avoidingView: {\n      flex: 1,\n      justifyContent: 'center'\n    },\n    contentContainer: {\n      alignItems: 'center',\n      backgroundColor: background.base,\n      borderRadius: 22,\n      paddingBottom: 18,\n      paddingTop: 24,\n      paddingHorizontal: 20\n    },\n  });\n\n"]}

package/build/notify/BottomSheetNotify/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { BottomSheetNotifyRef } from './types';
+interface Props extends ViewProps {
+    marginBottomBS?: number;
+    bottomSheetBackgroundColor?: string;
+    bottomSheetPadding?: number;
+    closeOffset?: number;
+    contentsGestureEnable?: boolean;
+    isHandleVisible?: boolean;
+    bottomSheetMarginX?: number;
+    isBottomRadius?: boolean;
+    maxHeight?: number;
+    isScrollView?: boolean;
+    bottomSheetComponent: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<BottomSheetNotifyRef>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build/notify/BottomSheetNotify/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/notify/BottomSheetNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAA0B,SAAS,EAAY,MAAM,cAAc,CAAC;AAI3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAU/C,UAAU,KAAM,SAAQ,SAAS;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC;CACvC;;AAqJD,wBAA6C"}

package/build/notify/BottomSheetNotify/index.js

@@ -0,0 +1,90 @@
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import { StyleSheet, Dimensions, Keyboard } from 'react-native';
+import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import useBottomSheetNotify from './model/useBottomSheetNotify';
+import ContentsComponent from './ui/ContentsComponent';
+import { useTheme } from '../../model/useThemeProvider';
+import ViewAtom from '../../ui/atoms/ViewAtom';
+import { ZSView } from '../../ui';
+const DEFAULT_BORDER_RADIUS = 24;
+const BS_MAX_HEIGHT = Dimensions.get('window').height - 120;
+function BottomSheetNotify(props, ref) {
+    const { marginBottomBS = 15, bottomSheetPadding = 20, bottomSheetBackgroundColor, closeOffset = Dimensions.get('window').height, contentsGestureEnable = true, isHandleVisible = true, bottomSheetMarginX = 10, isBottomRadius = true, isScrollView = true, maxHeight = BS_MAX_HEIGHT, bottomSheetComponent } = props;
+    const { HANDLE_HEIGHT, bottomSheetVisible, bsAnimatedStyle, onGestureEvent, handleVisible, onTapEvent, openPosition, screenWidth, screenHeight, panGestureRef, listScrollPosition, bsModalBgStyle, backgroundPressHandler } = useBottomSheetNotify({
+        bottomSheetPadding,
+        closeOffset,
+        contentsGestureEnable,
+        bottomSheetMarginX,
+        isHandleVisible,
+    });
+    const { palette: { background, text, primary, modalBgColor } } = useTheme();
+    const styles = useMemo(() => createStyles({ background, text, primary, modalBgColor }), [background, text, primary, modalBgColor]);
+    useImperativeHandle(ref, () => ({
+        handleVisible,
+    }));
+    return bottomSheetVisible && bottomSheetComponent ? (<Animated.View style={[styles.modalBg, bsModalBgStyle]} entering={FadeIn.duration(50)} exiting={FadeOut.duration(50)} onTouchEnd={backgroundPressHandler} // 외부 터치 시 시트 닫기
+    >
+      <GestureHandlerRootView style={styles.rootViewWrapper}>
+        <GestureDetector gesture={onGestureEvent}>
+          <Animated.View onTouchEnd={(e) => {
+            e.stopPropagation();
+            Keyboard.dismiss(); // 키보드 숨김
+        }} style={[
+            styles.sheet,
+            {
+                width: screenWidth,
+                height: screenHeight,
+                paddingHorizontal: bottomSheetPadding,
+                left: bottomSheetMarginX,
+                right: bottomSheetMarginX,
+                borderTopLeftRadius: DEFAULT_BORDER_RADIUS,
+                borderTopRightRadius: DEFAULT_BORDER_RADIUS,
+                borderBottomLeftRadius: isBottomRadius ? DEFAULT_BORDER_RADIUS : 0,
+                borderBottomRightRadius: isBottomRadius ? DEFAULT_BORDER_RADIUS : 0,
+                backgroundColor: bottomSheetBackgroundColor || background.base,
+            },
+            bsAnimatedStyle, // 애니메이션 스타일 적용
+        ]}>
+            {isHandleVisible && (<ZSView style={[styles.handleContainer, { height: HANDLE_HEIGHT }]}>
+                <ViewAtom style={styles.handle}/>
+              </ZSView>)}
+
+            <GestureDetector gesture={onTapEvent}>
+              <ContentsComponent HANDLE_HEIGHT={HANDLE_HEIGHT} panGestureRef={panGestureRef} listScrollPosition={listScrollPosition} openPosition={openPosition} marginBottomBS={marginBottomBS} screenHeight={screenHeight} bottomSheetComponent={bottomSheetComponent} bottomSheetPadding={bottomSheetPadding} maxHeight={maxHeight} isScrollView={isScrollView}/>
+            </GestureDetector>
+          </Animated.View>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    </Animated.View>) : null;
+}
+const createStyles = ({ background, text, primary, modalBgColor, }) => StyleSheet.create({
+    modalBg: {
+        position: 'absolute',
+        width: Dimensions.get('window').width,
+        height: Dimensions.get('window').height,
+        bottom: 0,
+    },
+    sheet: {
+        position: 'absolute',
+        zIndex: 9000,
+        overflow: 'hidden',
+    },
+    handleContainer: {
+        width: '100%',
+        alignItems: 'center',
+        paddingTop: 13,
+    },
+    handle: {
+        backgroundColor: background.layer2,
+        width: 50,
+        height: 4,
+        borderRadius: 2,
+    },
+    rootViewWrapper: {
+        width: '100%',
+        height: '100%',
+    },
+});
+export default forwardRef(BottomSheetNotify);
+//# sourceMappingURL=index.js.map