@0610studio/zs-ui 0.3.3 → 0.5.0

package/README.md

@@ -25,6 +25,11 @@ npx expo install @0610studio/zs-ui
 
 사용법은 [문서](https://0610studio.github.io/zs-ui/docs/intro)를 확인해주세요.
 
+<br />
+
+### TODO
+
+- [ ] 폴더블 폰에서 접힘/펼침 상태 변경으로 인해 액티비티가 재시작되었을 때, `Dimensions.get('window')`가 이전 값을 반환하고 onChange가 호출되지 않는 문제
 
 <br />
 

package/build/index.d.ts

@@ -1,8 +1,8 @@
 import { useTheme, OverlayProvider, ThemeProvider } from './model';
-import { ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton } from './ui';
+import { ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton } from './ui';
 import ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';
 import { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu } from './overlay';
-export { useTheme, OverlayProvider, ThemeProvider, ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, ErrorComponent, AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu, };
+export { useTheme, OverlayProvider, ThemeProvider, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, ErrorComponent, AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu, };
 import type { ThemeProviderProps, ThemeProps, Palette } from "./model/useThemeProvider";
 import { ZSTextProps } from "./ui/ZSText";
 import { BoxStyle } from "./ui/ZSTextField";

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACd,MAAM,SAAS,CAAA;AAEhB,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,MAAM,CAAC;AAEd,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,EACZ,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc,EAEd,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,CAAC;AAIF,OAAO,KAAK,EACV,kBAAkB,EAClB,UAAU,EACV,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,WAAW,EACX,cAAc,EACf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACd,MAAM,SAAS,CAAA;AAEhB,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,MAAM,CAAC;AAEd,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,EACZ,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc,EAEd,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,CAAC;AAIF,OAAO,KAAK,EACV,kBAAkB,EAClB,UAAU,EACV,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,WAAW,EACX,cAAc,EACf,CAAC"}

package/build/index.js

@@ -1,10 +1,10 @@
 import { useTheme, OverlayProvider, ThemeProvider, } from './model';
-import { ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, } from './ui';
+import { ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, } from './ui';
 import ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';
 import { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu, } from './overlay';
 export { useTheme, OverlayProvider, ThemeProvider, 
 // ---
-ZSView, AnimatedWrapper, TextAtom, ScrollViewAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, ErrorComponent, 
+ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomButton, ErrorComponent, 
 // ---
 AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu, };
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,GACd,MAAM,SAAS,CAAA;AAEhB,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,GACf,MAAM,MAAM,CAAC;AAEd,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa;AACb,MAAM;AACN,MAAM,EACN,eAAe,EACf,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc;AACd,MAAM;AACN,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,CAAC","sourcesContent":["import {\n  useTheme,\n  OverlayProvider,\n  ThemeProvider,\n} from './model'\n\nimport {\n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ScrollViewAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n} from './ui';\n\nimport ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';\n\nimport {\n  AlertOverlay,\n  BottomSheetOverlay,\n  SnackbarNotify,\n  useOverlayProvider,\n  useOverlay,\n  PopOverButton,\n  PopOverMenu,\n} from './overlay';\n\nexport {\n  useTheme,\n  OverlayProvider,\n  ThemeProvider,\n  // ---\n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ScrollViewAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n  ErrorComponent,\n  // ---\n  AlertOverlay,\n  BottomSheetOverlay,\n  SnackbarNotify,\n  useOverlayProvider,\n  useOverlay,\n  PopOverButton,\n  PopOverMenu,\n};\n\n// ------------------------------------------------------\n\nimport type {\n  ThemeProviderProps,\n  ThemeProps,\n  Palette,\n} from \"./model/useThemeProvider\";\nimport { ZSTextProps } from \"./ui/ZSText\";\nimport { BoxStyle } from \"./ui/ZSTextField\";\nimport {\n  ColorPalette,\n  ColorPaletteExtend,\n  ThemeTextType,\n  ThemeBorderType,\n  ThemeBackground,\n  MainColors,\n  Theme,\n  TypographyVariants,\n  ThemeFonts,\n  TypoNumber,\n  TypographyVariantsProps,\n  TypoStyle,\n  TypoOptions,\n  TypoSubStyle,\n  TypoColorOptions\n} from \"./theme/types\";\nimport {\n  SnackItem,\n  ShowAlertProps,\n  ShowSnackBarProps,\n  ShowBottomSheetProps,\n  PopOverMenuProps,\n  CustomSnackbarProps,\n  OverlayProviderProps,\n  AlertAction,\n  AlertActions,\n  SnackType,\n  HideOption,\n  BottomSheetOptions\n} from \"./model/types\";\nimport {\n  RadioOption,\n  ShadowLevel,\n  ShadowStyle,\n} from \"./ui/types\";\nimport { ZSContainerRef } from \"./ui/ZSContainer\";\n\nexport type {\n  ThemeProviderProps,\n  ThemeProps,\n  Palette,\n  ZSTextProps,\n  BoxStyle,\n  ColorPalette,\n  ColorPaletteExtend,\n  ThemeTextType,\n  ThemeBorderType,\n  ThemeBackground,\n  MainColors,\n  Theme,\n  TypographyVariants,\n  ThemeFonts,\n  TypoNumber,\n  TypographyVariantsProps,\n  TypoStyle,\n  TypoOptions,\n  TypoSubStyle,\n  TypoColorOptions,\n  SnackItem,\n  ShowAlertProps,\n  ShowSnackBarProps,\n  ShowBottomSheetProps,\n  PopOverMenuProps,\n  CustomSnackbarProps,\n  OverlayProviderProps,\n  AlertAction,\n  AlertActions,\n  SnackType,\n  HideOption,\n  BottomSheetOptions,\n  RadioOption,\n  ShadowLevel,\n  ShadowStyle,\n  ZSContainerRef\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,GACd,MAAM,SAAS,CAAA;AAEhB,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,GACf,MAAM,MAAM,CAAC;AAEd,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa;AACb,MAAM;AACN,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc;AACd,MAAM;AACN,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,CAAC","sourcesContent":["import {\n  useTheme,\n  OverlayProvider,\n  ThemeProvider,\n} from './model'\n\nimport {\n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n} from './ui';\n\nimport ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';\n\nimport {\n  AlertOverlay,\n  BottomSheetOverlay,\n  SnackbarNotify,\n  useOverlayProvider,\n  useOverlay,\n  PopOverButton,\n  PopOverMenu,\n} from './overlay';\n\nexport {\n  useTheme,\n  OverlayProvider,\n  ThemeProvider,\n  // ---\n  ZSView,\n  AnimatedWrapper,\n  TextAtom,\n  ZSContainer,\n  ZSPressable,\n  ZSText,\n  ThrottleButton,\n  ZSTextField,\n  ZSRadioGroup,\n  ZSBottomButton,\n  ErrorComponent,\n  // ---\n  AlertOverlay,\n  BottomSheetOverlay,\n  SnackbarNotify,\n  useOverlayProvider,\n  useOverlay,\n  PopOverButton,\n  PopOverMenu,\n};\n\n// ------------------------------------------------------\n\nimport type {\n  ThemeProviderProps,\n  ThemeProps,\n  Palette,\n} from \"./model/useThemeProvider\";\nimport { ZSTextProps } from \"./ui/ZSText\";\nimport { BoxStyle } from \"./ui/ZSTextField\";\nimport {\n  ColorPalette,\n  ColorPaletteExtend,\n  ThemeTextType,\n  ThemeBorderType,\n  ThemeBackground,\n  MainColors,\n  Theme,\n  TypographyVariants,\n  ThemeFonts,\n  TypoNumber,\n  TypographyVariantsProps,\n  TypoStyle,\n  TypoOptions,\n  TypoSubStyle,\n  TypoColorOptions\n} from \"./theme/types\";\nimport {\n  SnackItem,\n  ShowAlertProps,\n  ShowSnackBarProps,\n  ShowBottomSheetProps,\n  PopOverMenuProps,\n  CustomSnackbarProps,\n  OverlayProviderProps,\n  AlertAction,\n  AlertActions,\n  SnackType,\n  HideOption,\n  BottomSheetOptions\n} from \"./model/types\";\nimport {\n  RadioOption,\n  ShadowLevel,\n  ShadowStyle,\n} from \"./ui/types\";\nimport { ZSContainerRef } from \"./ui/ZSContainer\";\n\nexport type {\n  ThemeProviderProps,\n  ThemeProps,\n  Palette,\n  ZSTextProps,\n  BoxStyle,\n  ColorPalette,\n  ColorPaletteExtend,\n  ThemeTextType,\n  ThemeBorderType,\n  ThemeBackground,\n  MainColors,\n  Theme,\n  TypographyVariants,\n  ThemeFonts,\n  TypoNumber,\n  TypographyVariantsProps,\n  TypoStyle,\n  TypoOptions,\n  TypoSubStyle,\n  TypoColorOptions,\n  SnackItem,\n  ShowAlertProps,\n  ShowSnackBarProps,\n  ShowBottomSheetProps,\n  PopOverMenuProps,\n  CustomSnackbarProps,\n  OverlayProviderProps,\n  AlertAction,\n  AlertActions,\n  SnackType,\n  HideOption,\n  BottomSheetOptions,\n  RadioOption,\n  ShadowLevel,\n  ShadowStyle,\n  ZSContainerRef\n};\n"]}

package/build/model/index.d.ts

@@ -1,4 +1,5 @@
 import { OverlayProvider } from "./useOverlayProvider";
 import { ThemeProvider, useTheme } from "./useThemeProvider";
-export { useTheme, OverlayProvider, ThemeProvider, };
+import { useStyleSheetCreate } from "./useStyleSheetCreate";
+export { useTheme, OverlayProvider, ThemeProvider, useStyleSheetCreate };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,GACd,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,mBAAmB,EACpB,CAAA"}

package/build/model/index.js

@@ -1,4 +1,5 @@
 import { OverlayProvider } from "./useOverlayProvider";
 import { ThemeProvider, useTheme } from "./useThemeProvider";
-export { useTheme, OverlayProvider, ThemeProvider, };
+import { useStyleSheetCreate } from "./useStyleSheetCreate";
+export { useTheme, OverlayProvider, ThemeProvider, useStyleSheetCreate };
 //# sourceMappingURL=index.js.map

package/build/model/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,GACd,CAAA","sourcesContent":["import { OverlayProvider } from \"./useOverlayProvider\"; \nimport { ThemeProvider, useTheme } from \"./useThemeProvider\";\n\nexport {\n  useTheme,\n  OverlayProvider,\n  ThemeProvider,\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,mBAAmB,EACpB,CAAA","sourcesContent":["import { OverlayProvider } from \"./useOverlayProvider\"; \nimport { ThemeProvider, useTheme } from \"./useThemeProvider\";\nimport { useStyleSheetCreate } from \"./useStyleSheetCreate\";\n\nexport {\n  useTheme,\n  OverlayProvider,\n  ThemeProvider,\n  useStyleSheetCreate\n}\n"]}

package/build/model/useStyleSheetCreate.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from "../theme/types";
+export declare const useStyleSheetCreate: (createStyles: (palette: Theme) => any) => any;
+//# sourceMappingURL=useStyleSheetCreate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleSheetCreate.d.ts","sourceRoot":"","sources":["../../src/model/useStyleSheetCreate.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,eAAO,MAAM,mBAAmB,GAAI,cAAc,CAAC,OAAO,EAAE,KAAK,KAAK,GAAG,QAGxE,CAAC"}

package/build/model/useStyleSheetCreate.js

@@ -0,0 +1,7 @@
+import { useMemo } from "react";
+import { useTheme } from "./useThemeProvider";
+export const useStyleSheetCreate = (createStyles) => {
+    const { palette } = useTheme();
+    return useMemo(() => createStyles(palette), [palette]);
+};
+//# sourceMappingURL=useStyleSheetCreate.js.map

package/build/model/useStyleSheetCreate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleSheetCreate.js","sourceRoot":"","sources":["../../src/model/useStyleSheetCreate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAqC,EAAE,EAAE;IAC3E,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC/B,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import { useMemo } from \"react\";\nimport { Theme } from \"../theme/types\";\nimport { useTheme } from \"./useThemeProvider\";\n\nexport const useStyleSheetCreate = (createStyles: (palette: Theme) => any) => {\n  const { palette } = useTheme();\n  return useMemo(() => createStyles(palette), [palette]);\n};"]}

package/build/model/useThemeProvider.d.ts

@@ -1,15 +1,27 @@
 import React from 'react';
+import { ScaledSize } from 'react-native';
 import { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';
 import { ElevationStyles } from '../theme/elevation';
 export interface ThemeProviderProps {
     themeFonts?: ThemeFonts;
     children: React.ReactNode;
     isDarkModeEnabled?: boolean;
+    splitBreakpoint?: number;
+    splitRatio?: number;
+    isSplitView?: boolean;
 }
+/**
+ * ThemeProvider
+ * @property splitRatio 분할 레이아웃의 화면 분할 비율 (기본값: 0.5)
+ */
 export interface ThemeProps {
     palette: Palette;
     typography: TypographyVariantsProps;
     elevation: ElevationStyles;
+    splitBreakpoint: number;
+    splitRatio: number;
+    dimensions: ScaledSize;
+    isSplitView: boolean;
 }
 export interface Palette extends Theme {
     mode: 'light' | 'dark';

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

@@ -1 +1 @@
-{"version":3,"file":"useThemeProvider.d.ts","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AAKpG,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,uBAAuB,CAAC;IACpC,SAAS,EAAE,eAAe,CAAC;CAC5B;AAED,MAAM,WAAW,OAAQ,SAAQ,KAAK;IACpC,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;CACzB;AAID,eAAO,MAAM,QAAQ,kBAMpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsFtD,CAAA"}
+{"version":3,"file":"useThemeProvider.d.ts","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AACpG,OAAO,EAAwB,UAAU,EAAkB,MAAM,cAAc,CAAC;AAIhF,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,uBAAuB,CAAC;IACpC,SAAS,EAAE,eAAe,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,OAAQ,SAAQ,KAAK;IACpC,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;CACzB;AAID,eAAO,MAAM,QAAQ,kBAMpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoGtD,CAAA"}

package/build/model/useThemeProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo, useState, useEffect, useCallback } from 'react';
-import { Platform, useColorScheme } from 'react-native';
+import { Dimensions, Platform, useColorScheme } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as NavigationBar from 'expo-navigation-bar';
 import palette from '../theme/palette';
@@ -13,10 +13,19 @@ export const useTheme = () => {
     }
     return context;
 };
-export const ThemeProvider = ({ themeFonts, children, isDarkModeEnabled = true }) => {
+export const ThemeProvider = ({ themeFonts, children, isDarkModeEnabled = true, splitBreakpoint = 700, splitRatio = 0.5, isSplitView = false }) => {
     const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지
     const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(isDarkModeEnabled ? true : false);
     const [mode, setMode] = useState(isDarkModeEnabled ? (systemColorScheme === 'dark' ? 'dark' : 'light') : 'light');
+    const [dimensions, setDimensions] = useState(Dimensions.get('window'));
+    // 화면 크기 변경 감지
+    useEffect(() => {
+        const onChange = ({ window }) => {
+            setDimensions(window);
+        };
+        const subscription = Dimensions.addEventListener('change', onChange);
+        return () => subscription.remove();
+    }, []);
     // AsyncStorage에서 시스템 모드 사용 설정 값 로드
     useEffect(() => {
         const loadSettings = async () => {
@@ -78,6 +87,10 @@ export const ThemeProvider = ({ themeFonts, children, isDarkModeEnabled = true }
         await AsyncStorage.setItem('useSystemColorScheme', useSystem.toString());
     }, []);
     const themeValue = useMemo(() => ({
+        isSplitView,
+        dimensions,
+        splitBreakpoint,
+        splitRatio,
         palette: {
             isUsingSystemColorScheme,
             setUseSystemColorScheme: handleSetUseSystemColorScheme,

package/build/model/useThemeProvider.js.map

@@ -1 +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, useCallback } from 'react';\nimport { Platform, useColorScheme } from 'react-native';\nimport AsyncStorage from '@react-native-async-storage/async-storage';\nimport * as NavigationBar from 'expo-navigation-bar';\nimport palette from '../theme/palette';\nimport { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';\nimport typography from '../theme/typography';\nimport elevation, { ElevationStyles } from '../theme/elevation';\n\nexport interface ThemeProviderProps {\n  themeFonts?: ThemeFonts;\n  children: React.ReactNode;\n  isDarkModeEnabled?: boolean;\n}\n\nexport interface ThemeProps {\n  palette: Palette;\n  typography: TypographyVariantsProps;\n  elevation: ElevationStyles;\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, isDarkModeEnabled = true }) => {\n  const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지\n  const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(isDarkModeEnabled ? true : false);\n  const [mode, setMode] = useState<'light' | 'dark'>(isDarkModeEnabled ? (systemColorScheme === 'dark' ? 'dark' : 'light') : 'light');\n\n  // AsyncStorage에서 시스템 모드 사용 설정 값 로드\n  useEffect(() => {\n    const loadSettings = async () => {\n      let isMounted = true;\n      try {\n        if (isMounted) {\n          if (isDarkModeEnabled) {\n            const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');\n            const storedMode = await AsyncStorage.getItem('themeMode');\n\n            if (storedUseSystemColorScheme !== null) {\n              setUseSystemColorScheme(storedUseSystemColorScheme === 'true');\n            }\n            if (storedMode) {\n              setMode(storedMode === 'dark' ? 'dark' : 'light');\n            } else {\n              setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n            }\n          } else {\n            setMode('light');\n          }\n        }\n      } catch (error) {\n        console.error('Failed to load theme settings', error);\n      }\n\n      return () => {\n        isMounted = false;\n      };\n    };\n\n    loadSettings();\n  }, []);\n\n  // 시스템 다크 모드 변경에 따른 효과 적용\n  useEffect(() => {\n    if (isUsingSystemColorScheme) {\n      setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n    }\n  }, [isUsingSystemColorScheme]);\n\n  // 안드로이드 하단 제스쳐 영역 스타일\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      NavigationBar.setButtonStyleAsync(mode);\n      NavigationBar.setBackgroundColorAsync(palette({ mode }).background.base)\n    }\n  }, [mode])\n\n  // 테마 토글 함수\n  const toggleTheme = useCallback(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 = useCallback(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    elevation: elevation(palette({ mode }))\n  }), [mode, isUsingSystemColorScheme, typography, themeFonts]);\n\n  return (\n    <ThemeContext.Provider value={themeValue}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"useThemeProvider.js","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAc,cAAc,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,YAAY,MAAM,2CAA2C,CAAC;AACrE,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AACrD,OAAO,OAAO,MAAM,kBAAkB,CAAC;AAEvC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,SAA8B,MAAM,oBAAoB,CAAC;AAgChE,MAAM,YAAY,GAAG,aAAa,CAAoB,IAAI,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAiB,GAAG,IAAI,EAAE,eAAe,GAAG,GAAG,EAAE,UAAU,GAAG,GAAG,EAAE,WAAW,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9K,MAAM,iBAAiB,GAAG,cAAc,EAAE,CAAC,CAAC,eAAe;IAC3D,MAAM,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACvG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,iBAAiB,CAAC,CAAC,CAAC,CAAC,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACpI,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvE,cAAc;IACd,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;YAC9B,aAAa,CAAC,MAAM,CAAC,CAAC;QACxB,CAAC,CAAC;QACF,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACrE,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,mCAAmC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,KAAK,IAAI,EAAE;YAC9B,IAAI,SAAS,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC;gBACH,IAAI,SAAS,EAAE,CAAC;oBACd,IAAI,iBAAiB,EAAE,CAAC;wBACtB,MAAM,0BAA0B,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;wBACtF,MAAM,UAAU,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;wBAE3D,IAAI,0BAA0B,KAAK,IAAI,EAAE,CAAC;4BACxC,uBAAuB,CAAC,0BAA0B,KAAK,MAAM,CAAC,CAAC;wBACjE,CAAC;wBACD,IAAI,UAAU,EAAE,CAAC;4BACf,OAAO,CAAC,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;wBACpD,CAAC;6BAAM,CAAC;4BACN,OAAO,CAAC,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;wBAC3D,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,OAAO,CAAC,OAAO,CAAC,CAAC;oBACnB,CAAC;gBACH,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,CAAC;YACxD,CAAC;YAED,OAAO,GAAG,EAAE;gBACV,SAAS,GAAG,KAAK,CAAC;YACpB,CAAC,CAAC;QACJ,CAAC,CAAC;QAEF,YAAY,EAAE,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yBAAyB;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,wBAAwB,EAAE,CAAC;YAC7B,OAAO,CAAC,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAE/B,sBAAsB;IACtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;YAC9B,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;YACxC,aAAa,CAAC,uBAAuB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;QAC1E,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,WAAW;IACX,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACzC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB;QAChD,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YACnB,MAAM,OAAO,GAAG,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACxD,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa;YACzD,OAAO,OAAO,CAAC;QACjB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,qBAAqB;IACrB,MAAM,6BAA6B,GAAG,WAAW,CAAC,KAAK,EAAE,SAAkB,EAAE,EAAE;QAC7E,uBAAuB,CAAC,SAAS,CAAC,CAAC;QACnC,MAAM,YAAY,CAAC,OAAO,CAAC,sBAAsB,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC3E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAChC,WAAW;QACX,UAAU;QACV,eAAe;QACf,UAAU;QACV,OAAO,EAAE;YACP,wBAAwB;YACxB,uBAAuB,EAAE,6BAA6B;YACtD,WAAW;YACX,GAAG,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,oBAAoB;SAC3C;QACD,UAAU,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;QACtC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;KACxC,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CACvC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,YAAY,CAAC,QAAQ,CAAC,CACzB,CAAC;AACJ,CAAC,CAAA","sourcesContent":["import React, { createContext, useContext, useMemo, useState, useEffect, useCallback } from 'react';\nimport { Dimensions, Platform, ScaledSize, useColorScheme } from 'react-native';\nimport AsyncStorage from '@react-native-async-storage/async-storage';\nimport * as NavigationBar from 'expo-navigation-bar';\nimport palette from '../theme/palette';\nimport { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';\nimport typography from '../theme/typography';\nimport elevation, { ElevationStyles } from '../theme/elevation';\n\nexport interface ThemeProviderProps {\n  themeFonts?: ThemeFonts;\n  children: React.ReactNode;\n  isDarkModeEnabled?: boolean;\n  splitBreakpoint?: number;\n  splitRatio?: number;\n  isSplitView?: boolean;\n}\n\n/**\n * ThemeProvider\n * @property splitRatio 분할 레이아웃의 화면 분할 비율 (기본값: 0.5)\n */\nexport interface ThemeProps {\n  palette: Palette;\n  typography: TypographyVariantsProps;\n  elevation: ElevationStyles;\n  splitBreakpoint: number;\n  splitRatio: number;\n  dimensions: ScaledSize;\n  isSplitView: boolean;\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, isDarkModeEnabled = true, splitBreakpoint = 700, splitRatio = 0.5, isSplitView = false }) => {\n  const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지\n  const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(isDarkModeEnabled ? true : false);\n  const [mode, setMode] = useState<'light' | 'dark'>(isDarkModeEnabled ? (systemColorScheme === 'dark' ? 'dark' : 'light') : 'light');\n  const [dimensions, setDimensions] = useState(Dimensions.get('window'));\n\n  // 화면 크기 변경 감지\n  useEffect(() => {\n    const onChange = ({ window }) => {\n      setDimensions(window);\n    };\n    const subscription = Dimensions.addEventListener('change', onChange);\n    return () => subscription.remove();\n  }, []);\n\n  // AsyncStorage에서 시스템 모드 사용 설정 값 로드\n  useEffect(() => {\n    const loadSettings = async () => {\n      let isMounted = true;\n      try {\n        if (isMounted) {\n          if (isDarkModeEnabled) {\n            const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');\n            const storedMode = await AsyncStorage.getItem('themeMode');\n\n            if (storedUseSystemColorScheme !== null) {\n              setUseSystemColorScheme(storedUseSystemColorScheme === 'true');\n            }\n            if (storedMode) {\n              setMode(storedMode === 'dark' ? 'dark' : 'light');\n            } else {\n              setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n            }\n          } else {\n            setMode('light');\n          }\n        }\n      } catch (error) {\n        console.error('Failed to load theme settings', error);\n      }\n\n      return () => {\n        isMounted = false;\n      };\n    };\n\n    loadSettings();\n  }, []);\n\n  // 시스템 다크 모드 변경에 따른 효과 적용\n  useEffect(() => {\n    if (isUsingSystemColorScheme) {\n      setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n    }\n  }, [isUsingSystemColorScheme]);\n\n  // 안드로이드 하단 제스쳐 영역 스타일\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      NavigationBar.setButtonStyleAsync(mode);\n      NavigationBar.setBackgroundColorAsync(palette({ mode }).background.base)\n    }\n  }, [mode])\n\n  // 테마 토글 함수\n  const toggleTheme = useCallback(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 = useCallback(async (useSystem: boolean) => {\n    setUseSystemColorScheme(useSystem);\n    await AsyncStorage.setItem('useSystemColorScheme', useSystem.toString());\n  }, []);\n\n  const themeValue = useMemo(() => ({\n    isSplitView,\n    dimensions,\n    splitBreakpoint,\n    splitRatio,\n    palette: {\n      isUsingSystemColorScheme,\n      setUseSystemColorScheme: handleSetUseSystemColorScheme,\n      toggleTheme,\n      ...palette({ mode }), // 선택된 모드에 따른 팔레트 적용\n    },\n    typography: typography({ themeFonts }),\n    elevation: elevation(palette({ mode }))\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

@@ -14,4 +14,5 @@ export declare const Z_INDEX_VALUE: {
     SNACKBAR: number;
     LOADING: number;
 };
+export declare const MAX_OVERLAY_WIDTH = 500;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +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,eAAO,MAAM,YAAY,GACrB,OAAO,SAAS,CAAC,SAAS,CAAC,EAC3B,WAAW,MAAM,SAAS,KAC3B,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG,SAQ/B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;CAazB,CAAC"}
+{"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,eAAO,MAAM,YAAY,GACrB,OAAO,SAAS,CAAC,SAAS,CAAC,EAC3B,WAAW,MAAM,SAAS,KAC3B,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG,SAQ/B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;CAazB,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAM,CAAC"}

package/build/model/utils.js

@@ -22,4 +22,5 @@ export const Z_INDEX_VALUE = {
     SNACKBAR: 8500,
     LOADING: 8999,
 };
+export const MAX_OVERLAY_WIDTH = 500;
 //# sourceMappingURL=utils.js.map

package/build/model/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAEA,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;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;IACX,cAAc,EAAE,IAAI;IACpB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,IAAI;CAChB,CAAC","sourcesContent":["import { StyleProp, TextStyle } from \"react-native\";\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\nexport const Z_INDEX_VALUE = {\n    DEFAULT: 8000,\n    MODAL1: 8001,\n    MODAL2: 8002,\n    MODAL3: 8003,\n    MODAL4: 8004,\n    BOTTOM_SHEET1: 8101,\n    BOTTOM_SHEET2: 8102,\n    POPOVER: 8200,\n    ALERT: 8300,\n    ABOVE_KEYBOARD: 8400,\n    SNACKBAR: 8500,\n    LOADING: 8999,\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAEA,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;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;IACX,cAAc,EAAE,IAAI;IACpB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,IAAI;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC","sourcesContent":["import { StyleProp, TextStyle } from \"react-native\";\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\nexport const Z_INDEX_VALUE = {\n    DEFAULT: 8000,\n    MODAL1: 8001,\n    MODAL2: 8002,\n    MODAL3: 8003,\n    MODAL4: 8004,\n    BOTTOM_SHEET1: 8101,\n    BOTTOM_SHEET2: 8102,\n    POPOVER: 8200,\n    ALERT: 8300,\n    ABOVE_KEYBOARD: 8400,\n    SNACKBAR: 8500,\n    LOADING: 8999,\n};\n\nexport const MAX_OVERLAY_WIDTH = 500;"]}

package/build/overlay/AlertOverlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAgB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAWjE,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,WAAW,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,GACtB,EAAE,cAAc,4BAwEhB;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAgB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASjE,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,WAAW,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,GACtB,EAAE,cAAc,4BAyEhB;AAED,eAAe,YAAY,CAAC"}

package/build/overlay/AlertOverlay/index.js

@@ -1,17 +1,17 @@
 import React, { useCallback, useMemo } from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
 import { useAlert } from '../../model/useOverlay';
 import { useTheme } from '../../model/useThemeProvider';
 import { ZSText } from '../../ui';
 import ModalBackground from '../ui/ModalBackground';
 import ViewAtom from '../../ui/atoms/ViewAtom';
-import { Z_INDEX_VALUE } from '../../model/utils';
-const modalWidth = Dimensions.get('window').width - 60;
+import { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';
 function AlertOverlay({ actions, title, informative, isBackgroundTouchClose, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle, }) {
     const { alertVisible, setAlertVisible } = useAlert();
-    const { palette: { background, primary: primaryColor, modalBgColor } } = useTheme();
+    const { palette: { background, primary: primaryColor, modalBgColor }, dimensions: { width: windowWidth } } = useTheme();
     const styles = useMemo(() => createStyles({ background }), [background]);
+    const modalWidth = windowWidth - 60;
     const handleButtonPress = useCallback((onPressFunction) => () => {
         if (onPressFunction)
             onPressFunction();
@@ -84,7 +84,7 @@ const createStyles = ({ background }) => StyleSheet.create({
         paddingBottom: 18,
         paddingTop: 24,
         paddingHorizontal: 20,
-        maxWidth: 500,
+        maxWidth: MAX_OVERLAY_WIDTH,
     },
 });
 //# sourceMappingURL=index.js.map

package/build/overlay/AlertOverlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;AAEvD,SAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,WAAW,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,GACN;IACf,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrD,MAAM,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC;IACpF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEzE,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,eAA4B,EAAE,EAAE,CAAC,GAAG,EAAE;QAC3E,IAAI,eAAe;YAAE,eAAe,EAAE,CAAC;QACvC,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,OAAO,IAAI,EAAkB,CAAC;QAE7D,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,QAAQ,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CACnC,OAAO,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CACnC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAExD;QAAA,CAAC,KAAK,IAAI,CACR,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAC9E,CACD;QAAA,CAAC,WAAW,IAAI,CACd,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAC5F,CACD;QAAA,CAAC,OAAO,IAAI,CACV,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CACtC;YAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,EACE;gBAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC;wBACL,MAAM,CAAC,MAAM;wBACb,EAAE,eAAe,EAAE,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE;wBACvD,oBAAoB;qBACrB,CAAC,CACF,OAAO,CAAC,CAAC,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAE/C;kBAAA,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CACrF;gBAAA,EAAE,gBAAgB,CAElB;;gBAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,IAAI,EAAE,EAAE,kBAAkB,CAAC,CAAC,CACnF,OAAO,CAAC,CAAC,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAE7C;kBAAA,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,EAAE,MAAM,CAC1G;gBAAA,EAAE,gBAAgB,CACpB;cAAA,GAAG,CACJ,CAAC,CAAC,CAAC,CACF,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,IAAI,EAAE,EAAE,kBAAkB,CAAC,CAAC,CACnF,OAAO,CAAC,CAAC,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAE7C;gBAAA,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,EAAE,MAAM,CAC1G;cAAA,EAAE,gBAAgB,CAAC,CACpB,CACH;UAAA,EAAE,QAAQ,CAAC,CACZ,CACH;MAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEtM,OAAO,CACL,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,eAAe,CACd,MAAM,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAC5B,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAC7C,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,sBAAsB;YAAE,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAEvE;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,eAAe,CAAC,CACrB,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAC;AAE5B,MAAM,YAAY,GAAG,CAAC,EAAE,UAAU,EAAoC,EAAE,EAAE,CACxE,UAAU,CAAC,MAAM,CAAC;IAChB,KAAK,EAAE;QACL,YAAY,EAAE,CAAC;QACf,KAAK,EAAE,MAAM;QACb,iBAAiB,EAAE,CAAC;KACrB;IACD,WAAW,EAAE;QACX,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,MAAM;QACb,iBAAiB,EAAE,CAAC;KACrB;IACD,eAAe,EAAE;QACf,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,UAAU;KAC3B;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,EAAE;QACnB,YAAY,EAAE,EAAE;KACjB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;KACzB;IACD,gBAAgB,EAAE;QAChB,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,UAAU,CAAC,IAAI;QAChC,YAAY,EAAE,EAAE;QAChB,aAAa,EAAE,EAAE;QACjB,UAAU,EAAE,EAAE;QACd,iBAAiB,EAAE,EAAE;QACrB,QAAQ,EAAE,GAAG;KACd;CACF,CAAC,CAAC","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useAlert } from '../../model/useOverlay';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ThemeBackground } from '../../theme';\nimport { ZSText } from '../../ui';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\nconst modalWidth = Dimensions.get('window').width - 60;\n\nfunction AlertOverlay({\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 } = useAlert();\n  const { palette: { background, primary: primaryColor, modalBgColor } } = useTheme();\n  const styles = useMemo(() => createStyles({ background }), [background]);\n\n  const handleButtonPress = useCallback((onPressFunction?: () => void) => () => {\n    if (onPressFunction) onPressFunction();\n    setAlertVisible(false);\n  }, [setAlertVisible]);\n\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        style={[styles.contentContainer, { width: modalWidth }]}\n      >\n        {title && (\n          <ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>\n        )}\n        {informative && (\n          <ZSText typo='body.2' 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='label.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='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n                </TouchableOpacity>\n              </>\n            ) : (\n              <TouchableOpacity\n                style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n                onPress={handleButtonPress(primary?.onPress)}\n              >\n                <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n              </TouchableOpacity>\n            )}\n          </ViewAtom>\n        )}\n      </Animated.View>\n    );\n  }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);\n\n  return (\n    !alertVisible ? null :\n      <ModalBackground\n        zIndex={Z_INDEX_VALUE.ALERT}\n        key={alertVisible ? 'visibleao' : 'hiddenao'}\n        modalBgColor={modalBgColor}\n        onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}\n      >\n        {content}\n      </ModalBackground>\n  )\n}\n\nexport default AlertOverlay;\n\nconst createStyles = ({ background }: { background: ThemeBackground; }) =>\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      maxWidth: 500,\n    },\n  });\n\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { StyleSheet, TouchableOpacity } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useAlert } from '../../model/useOverlay';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ThemeBackground } from '../../theme';\nimport { ZSText } from '../../ui';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\nimport { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\n\nfunction AlertOverlay({\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 } = useAlert();\n  const { palette: { background, primary: primaryColor, modalBgColor }, dimensions: { width: windowWidth } } = useTheme();\n  const styles = useMemo(() => createStyles({ background }), [background]);\n  const modalWidth = windowWidth - 60;\n\n  const handleButtonPress = useCallback((onPressFunction?: () => void) => () => {\n    if (onPressFunction) onPressFunction();\n    setAlertVisible(false);\n  }, [setAlertVisible]);\n\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        style={[styles.contentContainer, { width: modalWidth }]}\n      >\n        {title && (\n          <ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>\n        )}\n        {informative && (\n          <ZSText typo='body.2' 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='label.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='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n                </TouchableOpacity>\n              </>\n            ) : (\n              <TouchableOpacity\n                style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n                onPress={handleButtonPress(primary?.onPress)}\n              >\n                <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n              </TouchableOpacity>\n            )}\n          </ViewAtom>\n        )}\n      </Animated.View>\n    );\n  }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);\n\n  return (\n    !alertVisible ? null :\n      <ModalBackground\n        zIndex={Z_INDEX_VALUE.ALERT}\n        key={alertVisible ? 'visibleao' : 'hiddenao'}\n        modalBgColor={modalBgColor}\n        onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}\n      >\n        {content}\n      </ModalBackground>\n  )\n}\n\nexport default AlertOverlay;\n\nconst createStyles = ({ background }: { background: ThemeBackground; }) =>\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      maxWidth: MAX_OVERLAY_WIDTH,\n    },\n  });\n\n"]}

package/build/overlay/BottomSheetOverlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAKzD,iBAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAY,GACb,EAAE,oBAAoB,4BAsJtB;AA2BD,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGzD,iBAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAY,GACb,EAAE,oBAAoB,4BAsJtB;AA2BD,eAAe,kBAAkB,CAAC"}

package/build/overlay/BottomSheetOverlay/index.js

@@ -1,21 +1,20 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Dimensions, StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';
+import { StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';
 import { useBottomSheet } from '../../model/useOverlay';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import ModalBackground from '../ui/ModalBackground';
 import { useTheme } from '../../model';
 import { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';
-import { Z_INDEX_VALUE } from '../../model/utils';
-const { width, height: windowHeight } = Dimensions.get('window');
+import { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';
 function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
     const { isBackgroundTouchClose = true, marginHorizontal = 10, marginBottom = 10, padding = 14, } = options;
+    const { palette, dimensions: { width: windowWidth, height: windowHeight } } = useTheme();
     const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();
     // 화면의 크기보다 높이가 높으면 화면의 크기로 제한
     const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);
     const translateY = useSharedValue(maxHeight);
     const translateX = useSharedValue(0);
     const scale = useSharedValue(1);
-    const { palette } = useTheme();
     const { bottom } = useSafeAreaInsets();
     const startX = useRef(0);
     const startY = useRef(0);
@@ -108,7 +107,7 @@ function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
         <Animated.View style={[
                 styles.container,
                 {
-                    width: width - marginHorizontal * 2,
+                    width: windowWidth - marginHorizontal * 2,
                     height: maxHeight,
                     marginHorizontal,
                     bottom: marginBottom + bottom,
@@ -138,7 +137,7 @@ const styles = StyleSheet.create({
         borderRadius: 26,
         overflow: 'hidden',
         zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,
-        maxWidth: 600,
+        maxWidth: MAX_OVERLAY_WIDTH,
     },
     pressableView: {
         width: '100%',

package/build/overlay/BottomSheetOverlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport { Dimensions, StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\nconst { width, height: windowHeight } = Dimensions.get('window');\n\nfunction BottomSheetOverlay({\n  headerComponent,\n  component,\n  options = {},\n}: ShowBottomSheetProps) {\n  const {\n    isBackgroundTouchClose = true,\n    marginHorizontal = 10,\n    marginBottom = 10,\n    padding = 14,\n  } = options;\n  const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n  // 화면의 크기보다 높이가 높으면 화면의 크기로 제한\n  const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);\n  const translateY = useSharedValue(maxHeight);\n  const translateX = useSharedValue(0);\n  const scale = useSharedValue(1);\n  const { palette } = useTheme();\n  const { bottom } = useSafeAreaInsets();\n  const startX = useRef(0);\n  const startY = useRef(0);\n  const [localVisible, setLocalVisible] = useState(false);\n\n  // ** 소프트 키보드 핸들링\n  useEffect(() => {\n    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n    const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n      translateY.value = withTiming(Platform.OS === 'ios' ? (-event.endCoordinates.height + bottom) : 0, { duration: 300 });\n    });\n\n    const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n      translateY.value = withTiming(0, { duration: 200 });\n    });\n\n    return () => {\n      keyboardShowSubscription.remove();\n      keyboardHideSubscription.remove();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (bottomSheetVisible) {\n      Keyboard.dismiss();\n      setLocalVisible(true);\n      translateY.value = withSpring(0, {\n        damping: 50,\n        stiffness: 300,\n        mass: 0.7,\n        velocity: 100,\n        restDisplacementThreshold: 0.2,\n      });\n    } else {\n      translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n      setTimeout(() => {\n        setLocalVisible(false);\n      }, 200);\n    }\n  }, [bottomSheetVisible]);\n\n  const animatedStyles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateY: translateY.value },\n        { translateX: translateX.value },\n        { scale: scale.value }\n      ],\n    };\n  });\n\n  const panResponder = useRef(\n    PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderGrant: () => {\n        Keyboard.dismiss();\n        startX.current = translateX.value;\n        startY.current = translateY.value;\n        scale.value = withTiming(0.985, { duration: 200 });\n\n      },\n      onPanResponderMove: (_, gestureState) => {\n        const newTranslateX = (startX.current + gestureState.dx) / 18;\n        translateX.value = newTranslateX;\n\n        const newTranslateY = startY.current + gestureState.dy;\n        if (newTranslateY < 0) {\n          translateY.value = newTranslateY / 18;\n        } else {\n          translateY.value = newTranslateY / 1.5;\n        }\n      },\n      onPanResponderRelease: (_, gestureState) => {\n        translateX.value = withTiming(0, { duration: 100 });\n\n        // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n        if (gestureState.vy > 0.5 || translateY.value > maxHeight / 3) {\n          translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n          setBottomSheetVisible(false);\n        } else {\n          translateY.value = withTiming(0, { duration: 150 });\n        }\n\n        // 사이즈 원래대로 복귀\n        scale.value = withSpring(1, {\n          damping: 15,\n          stiffness: 300\n        });\n      },\n    })\n  ).current;\n\n  return (\n    !localVisible ? null :\n      <ModalBackground\n        zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n        key={localVisible ? 'visiblebs' : 'hiddenbs'}\n        modalBgColor={palette.modalBgColor}\n        onPress={() => {\n          if (isBackgroundTouchClose) setBottomSheetVisible(false);\n        }}\n      >\n        <Animated.View\n          style={[\n            styles.container,\n            {\n              width: width - marginHorizontal * 2,\n              height: maxHeight,\n              marginHorizontal,\n              bottom: marginBottom + bottom,\n              backgroundColor: palette.background.base,\n            },\n            animatedStyles,\n          ]}\n        >\n          <View\n            style={[\n              styles.pressableView,\n              { paddingHorizontal: padding, paddingBottom: padding },\n            ]}\n          >\n            <View {...panResponder.panHandlers}>\n              <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>\n                <View style={[styles.gestureBar, { backgroundColor: palette.divider }]} />\n              </View>\n              {headerComponent}\n            </View>\n\n            {component}\n          </View>\n        </Animated.View>\n      </ModalBackground>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    borderRadius: 26,\n    overflow: 'hidden',\n    zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n    maxWidth: 600,\n  },\n  pressableView: {\n    width: '100%',\n    height: '100%',\n  },\n  gestureBarContainer: {\n    width: '100%',\n    paddingTop: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  gestureBar: {\n    width: 45,\n    height: 3,\n    borderRadius: 2,\n  },\n});\n\nexport default BottomSheetOverlay;"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport { StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\n\nfunction BottomSheetOverlay({\n  headerComponent,\n  component,\n  options = {},\n}: ShowBottomSheetProps) {\n  const {\n    isBackgroundTouchClose = true,\n    marginHorizontal = 10,\n    marginBottom = 10,\n    padding = 14,\n  } = options;\n  const { palette, dimensions: { width: windowWidth, height: windowHeight } } = useTheme();\n  const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n  // 화면의 크기보다 높이가 높으면 화면의 크기로 제한\n  const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);\n  const translateY = useSharedValue(maxHeight);\n  const translateX = useSharedValue(0);\n  const scale = useSharedValue(1);\n  const { bottom } = useSafeAreaInsets();\n  const startX = useRef(0);\n  const startY = useRef(0);\n  const [localVisible, setLocalVisible] = useState(false);\n\n  // ** 소프트 키보드 핸들링\n  useEffect(() => {\n    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n    const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n      translateY.value = withTiming(Platform.OS === 'ios' ? (-event.endCoordinates.height + bottom) : 0, { duration: 300 });\n    });\n\n    const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n      translateY.value = withTiming(0, { duration: 200 });\n    });\n\n    return () => {\n      keyboardShowSubscription.remove();\n      keyboardHideSubscription.remove();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (bottomSheetVisible) {\n      Keyboard.dismiss();\n      setLocalVisible(true);\n      translateY.value = withSpring(0, {\n        damping: 50,\n        stiffness: 300,\n        mass: 0.7,\n        velocity: 100,\n        restDisplacementThreshold: 0.2,\n      });\n    } else {\n      translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n      setTimeout(() => {\n        setLocalVisible(false);\n      }, 200);\n    }\n  }, [bottomSheetVisible]);\n\n  const animatedStyles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateY: translateY.value },\n        { translateX: translateX.value },\n        { scale: scale.value }\n      ],\n    };\n  });\n\n  const panResponder = useRef(\n    PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderGrant: () => {\n        Keyboard.dismiss();\n        startX.current = translateX.value;\n        startY.current = translateY.value;\n        scale.value = withTiming(0.985, { duration: 200 });\n\n      },\n      onPanResponderMove: (_, gestureState) => {\n        const newTranslateX = (startX.current + gestureState.dx) / 18;\n        translateX.value = newTranslateX;\n\n        const newTranslateY = startY.current + gestureState.dy;\n        if (newTranslateY < 0) {\n          translateY.value = newTranslateY / 18;\n        } else {\n          translateY.value = newTranslateY / 1.5;\n        }\n      },\n      onPanResponderRelease: (_, gestureState) => {\n        translateX.value = withTiming(0, { duration: 100 });\n\n        // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n        if (gestureState.vy > 0.5 || translateY.value > maxHeight / 3) {\n          translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n          setBottomSheetVisible(false);\n        } else {\n          translateY.value = withTiming(0, { duration: 150 });\n        }\n\n        // 사이즈 원래대로 복귀\n        scale.value = withSpring(1, {\n          damping: 15,\n          stiffness: 300\n        });\n      },\n    })\n  ).current;\n\n  return (\n    !localVisible ? null :\n      <ModalBackground\n        zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n        key={localVisible ? 'visiblebs' : 'hiddenbs'}\n        modalBgColor={palette.modalBgColor}\n        onPress={() => {\n          if (isBackgroundTouchClose) setBottomSheetVisible(false);\n        }}\n      >\n        <Animated.View\n          style={[\n            styles.container,\n            {\n              width: windowWidth - marginHorizontal * 2,\n              height: maxHeight,\n              marginHorizontal,\n              bottom: marginBottom + bottom,\n              backgroundColor: palette.background.base,\n            },\n            animatedStyles,\n          ]}\n        >\n          <View\n            style={[\n              styles.pressableView,\n              { paddingHorizontal: padding, paddingBottom: padding },\n            ]}\n          >\n            <View {...panResponder.panHandlers}>\n              <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>\n                <View style={[styles.gestureBar, { backgroundColor: palette.divider }]} />\n              </View>\n              {headerComponent}\n            </View>\n\n            {component}\n          </View>\n        </Animated.View>\n      </ModalBackground>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    borderRadius: 26,\n    overflow: 'hidden',\n    zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n    maxWidth: MAX_OVERLAY_WIDTH,\n  },\n  pressableView: {\n    width: '100%',\n    height: '100%',\n  },\n  gestureBarContainer: {\n    width: '100%',\n    paddingTop: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  gestureBar: {\n    width: 45,\n    height: 3,\n    borderRadius: 2,\n  },\n});\n\nexport default BottomSheetOverlay;"]}

package/build/overlay/Modality/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,iBAAS,QAAQ,CAAC,EAChB,iBAAiB,GAClB,EAAE;IACD,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,4BAuGA;AA+BD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AASnD,iBAAS,QAAQ,CAAC,EAChB,iBAAiB,GAClB,EAAE;IACD,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,4BAwGA;AA2BD,eAAe,QAAQ,CAAC"}

package/build/overlay/Modality/index.js

@@ -1,21 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import { Dimensions, StatusBar, StyleSheet } from 'react-native';
+import { StatusBar, StyleSheet } from 'react-native';
 import { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';
 import Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';
 import { useModality } from '../../model/useOverlay';
 import { ZSView } from '../../ui';
 import { useTheme } from '../../model';
 import { Z_INDEX_VALUE } from '../../model/utils';
-const { width, height } = Dimensions.get('window');
 function Modality({ modalityComponent, }) {
-    const { palette } = useTheme();
+    const { palette, dimensions: { height: windowHeight } } = useTheme();
     const [localVisible, setLocalVisible] = useState(false);
     const { modalityVisible } = useModality();
     const insets = useSafeAreaInsets();
     const backScale = useSharedValue(1);
     const backTranslateY = useSharedValue(0);
     const backBorderRadius = useSharedValue(0);
-    const mainTranslateY = useSharedValue(height);
+    const mainTranslateY = useSharedValue(windowHeight);
     const backgroundOpacity = useSharedValue(1);
     const overrideMargin = 10;
     const mainScreenMargin = insets.top;
@@ -36,7 +35,7 @@ function Modality({ modalityComponent, }) {
             backScale.value = withTiming(1, { duration: 100 });
             backTranslateY.value = withTiming(0, { duration: 100 });
             backBorderRadius.value = withTiming(0, { duration: 100 });
-            mainTranslateY.value = withTiming(height, { duration: 200 });
+            mainTranslateY.value = withTiming(windowHeight, { duration: 200 });
             backgroundOpacity.value = withTiming(0, { duration: 300 });
             setTimeout(() => {
                 setLocalVisible(false);
@@ -78,20 +77,21 @@ function Modality({ modalityComponent, }) {
 
         <Animated.View exiting={FadeOut.duration(300)} style={[
                 styles.backScreen,
-                { backgroundColor: palette.background.layer2 },
+                { backgroundColor: palette.background.layer2, width: '100%', height: windowHeight },
                 backScreenAnimatedStyle
             ]}/>
 
         <Animated.View style={[
                 {
-                    height: height - mainScreenMargin,
+                    height: windowHeight - mainScreenMargin,
                     paddingBottom: mainScrrenPadding,
-                    backgroundColor: palette.background.base
+                    backgroundColor: palette.background.base,
+                    width: '100%'
                 },
                 styles.mainScreen,
                 mainScreenAnimatedStyle
             ]}>
-          <ZSView style={styles.contents}>
+          <ZSView style={[styles.contents, { width: '100%' }]}>
             {modalityComponent}
           </ZSView>
         </Animated.View>
@@ -100,7 +100,6 @@ function Modality({ modalityComponent, }) {
 const styles = StyleSheet.create({
     contents: {
         flex: 1,
-        width: width,
         paddingTop: 10,
         zIndex: Z_INDEX_VALUE.MODAL4,
     },
@@ -110,14 +109,11 @@ const styles = StyleSheet.create({
     },
     backScreen: {
         position: 'absolute',
-        width,
-        height,
         justifyContent: 'center',
         alignItems: 'center',
         zIndex: Z_INDEX_VALUE.MODAL2,
     },
     mainScreen: {
-        width,
         position: 'absolute',
         borderTopLeftRadius: 16,
         borderTopRightRadius: 16,