@toss/tds-react-native 1.0.0

package/dist/cjs/extensions/bridge/components/NestedShadow.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NestedShadow=NestedShadow;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),generateShadowStyle_1=require("../../../components/shadow/generateShadowStyle");function NestedShadow({shadows:e,children:t,...r}){if(e.length===0)return(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:t});const n=e.reduceRight((s,i)=>(0,jsx_runtime_1.jsx)(react_native_1.View,{style:(0,generateShadowStyle_1.generateShadowStyle)(i),children:s}),t);return(0,jsx_runtime_1.jsx)(react_native_1.View,{...r,children:n})}

package/dist/cjs/extensions/bridge/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Icon';
+export * from './NestedShadow';

package/dist/cjs/extensions/bridge/components/index.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,t,e,r){r===void 0&&(r=e);var n=Object.getOwnPropertyDescriptor(t,e);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(i,r,n)}:function(i,t,e,r){r===void 0&&(r=e),i[r]=t[e]},__exportStar=function(i,t){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&__createBinding(t,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./Icon"),exports),__exportStar(require("./NestedShadow"),exports);

package/dist/cjs/extensions/bridge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Bridge';
+export * from './useBridge';

package/dist/cjs/extensions/bridge/index.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,r,e,t){t===void 0&&(t=e);var n=Object.getOwnPropertyDescriptor(r,e);(!n||("get"in n?!r.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return r[e]}}),Object.defineProperty(i,t,n)}:function(i,r,e,t){t===void 0&&(t=e),i[t]=r[e]},__exportStar=function(i,r){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(r,e)&&__createBinding(r,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./Bridge"),exports),__exportStar(require("./useBridge"),exports);

package/dist/cjs/extensions/bridge/useBridge.d.ts

@@ -0,0 +1,19 @@
+import { BridgeProps } from './Bridge';
+interface UseBridgeOptions {
+    /** @default true */
+    closeOnDestroy?: boolean;
+}
+/**
+ *
+ * `Bridge` 컴포넌트를 띄우는 훅이에요.
+ * - `open` 이 호출되고 200ms 후에 `Bridge` 컴포넌트가 노출돼요
+ * - `open` 이후에 `variant` 가 `basic` 일 때는 2.0s, `point` 일 때는 2.3s 후에 제거돼요
+ * - `close` 가 호출되면 `Bridge` 컴포넌트가 즉시 제거돼요
+ */
+export declare function useBridge({ closeOnDestroy }?: UseBridgeOptions): {
+    close: () => void;
+    open: ({ onExited, onClose, color, ...options }: BridgeProps & {
+        color?: string;
+    }) => void;
+};
+export {};

package/dist/cjs/extensions/bridge/useBridge.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useBridge=useBridge;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),index_1=require("../../core/index"),Bridge_1=require("./Bridge");function useBridge({closeOnDestroy:o=!0}={}){const e=(0,react_1.useRef)(),r=(0,index_1.useOverlay)(),t=(0,react_1.useCallback)(()=>r.close(),[r]),s=(0,react_1.useCallback)(({onExited:u,onClose:i,color:l,...c})=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{r.open(({isOpen:d,exit:m,close:x})=>{const _=()=>{i?.(),x()};return(0,jsx_runtime_1.jsx)(index_1.ThemeProvider,{token:{color:{primary:l}},children:(0,jsx_runtime_1.jsx)(Bridge_1.Bridge,{open:d,onClose:_,onExited:()=>{u?.(),m()},...c})})});const a=c.variant==="basic"?2e3:2300;e.current=setTimeout(()=>{t()},a)},200)},[t,r]),n=(0,react_1.useMemo)(()=>({close:t,open:s}),[t,s]);return(0,react_1.useEffect)(()=>()=>{o&&n?.close()},[o,n]),n}

package/dist/cjs/extensions/bridge/utils/getCenterOffset.d.ts

@@ -0,0 +1,5 @@
+import { LayoutRectangle } from 'react-native';
+export declare function getCenterOffset(layout: LayoutRectangle): {
+    x: number;
+    y: number;
+};

package/dist/cjs/extensions/bridge/utils/getCenterOffset.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getCenterOffset=getCenterOffset;function getCenterOffset(e){return{x:e.x+e.width/2,y:e.y+e.height/2}}

package/dist/cjs/extensions/bridge/utils/getThemeColorCodeFromOklch.d.ts

@@ -0,0 +1,6 @@
+import { Oklch } from '../../../utils/ColorManager';
+export type ThemeColorCode = 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'grey';
+/**
+ * OKLCH 색상 값에서 ThemeColorCode 추출
+ */
+export declare const getThemeColorCodeFromOklch: ({ c, h }: Oklch) => ThemeColorCode;

package/dist/cjs/extensions/bridge/utils/getThemeColorCodeFromOklch.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getThemeColorCodeFromOklch=void 0;const THEME_COLOR_RANGES=[{name:"red",min:0,max:30},{name:"orange",min:30,max:70},{name:"yellow",min:70,max:110},{name:"green",min:110,max:180},{name:"teal",min:180,max:220},{name:"blue",min:220,max:290},{name:"purple",min:290,max:340},{name:"red",min:340,max:360}],getThemeColorCodeFromOklch=({c:m,h:e})=>{if(m<=.05)return"grey";for(const{name:n,min:r,max:o}of THEME_COLOR_RANGES)if(e>r&&e<=o)return n;return"grey"};exports.getThemeColorCodeFromOklch=getThemeColorCodeFromOklch;

package/dist/cjs/extensions/bridge/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './getCenterOffset';

package/dist/cjs/extensions/bridge/utils/index.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,t,e,r){r===void 0&&(r=e);var n=Object.getOwnPropertyDescriptor(t,e);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(i,r,n)}:function(i,t,e,r){r===void 0&&(r=e),i[r]=t[e]},__exportStar=function(i,t){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&__createBinding(t,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./getCenterOffset"),exports);

package/dist/cjs/extensions/external-web-view-screen/ExternalWebViewScreen.d.ts

@@ -0,0 +1,23 @@
+import { WebView, WebViewProps } from '@granite-js/native/react-native-webview';
+import { Icon } from '../../components/icon';
+type Icon = {
+    source: {
+        uri: string;
+    };
+    name?: never;
+} | {
+    name: string;
+    source?: never;
+};
+type Header = {
+    title?: string;
+    icon?: Icon;
+    withBackButton?: boolean;
+};
+export type ExternalWebViewScreenProps = WebViewProps & {
+    header?: Header;
+};
+export declare const ExternalWebViewScreen: import("react").ForwardRefExoticComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & {
+    header?: Header;
+} & import("react").RefAttributes<WebView<{}>>>;
+export {};

package/dist/cjs/extensions/external-web-view-screen/ExternalWebViewScreen.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExternalWebViewScreen=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_webview_1=require("@granite-js/native/react-native-webview"),react_1=require("react"),react_native_1=require("react-native"),mergeRefs_1=require("../../utils/mergeRefs"),Navigation_1=require("./Navigation");exports.ExternalWebViewScreen=(0,react_1.forwardRef)(function({header:s={},onNavigationStateChange:c,...o},l){const{title:n,icon:i,withBackButton:u=!1}=s,a=(0,react_1.useRef)(!1),e=(0,react_1.useRef)(null),x=(0,mergeRefs_1.mergeRefs)(l,e),r=(0,Navigation_1.useBackOrCloseNavigation)(),v=(0,react_1.useCallback)(function(){if(e.current!=null&&a.current){e.current?.goBack();return}r()},[r]);return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(Navigation_1.Navigation,{children:[(0,jsx_runtime_1.jsx)(Navigation_1.NavigationLeft,{visible:u,children:(0,jsx_runtime_1.jsx)(Navigation_1.NavigationBackButton,{onPress:v,canGoBack:!1})}),(0,jsx_runtime_1.jsxs)(Navigation_1.NavigationCenter,{children:[i!=null&&(0,jsx_runtime_1.jsx)(Navigation_1.NavigationTitleIcon,{...i}),n!=null&&(0,jsx_runtime_1.jsx)(Navigation_1.NavigationTitleText,{children:n})]}),(0,jsx_runtime_1.jsx)(Navigation_1.NavigationRight,{children:(0,jsx_runtime_1.jsx)(Navigation_1.NavigationCloseButton,{})})]}),(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:{display:"flex",flexDirection:"column",flex:1,position:"relative"},children:[(0,jsx_runtime_1.jsx)(Navigation_1.NavigationBackdrop,{}),(0,jsx_runtime_1.jsx)(react_native_webview_1.WebView,{ref:x,...o,onNavigationStateChange:t=>{a.current=t.canGoBack,c?.(t)},style:{flex:1}})]})]})});

package/dist/cjs/extensions/external-web-view-screen/Navigation.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { TxtProps } from '../../components/txt';
+export interface NavigationProps {
+    children?: ReactNode;
+}
+export declare function Navigation({ children }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function useBackOrCloseNavigation(): () => void;
+export declare function NavigationBackdrop(): import("react/jsx-runtime").JSX.Element;
+export type NavigationLeftProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 왼쪽 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+};
+/**
+ * 내비게이션 왼쪽 영역을 설정할 수 있어요.
+ */
+export declare function NavigationLeft({ children, visible }: NavigationLeftProps): null;
+export type NavigationRightProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 오른쪽 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+};
+/**
+ * 내비게이션 오른쪽 영역을 설정할 수 있어요.
+ */
+export declare function NavigationRight({ children, visible }: NavigationRightProps): null;
+export type NavigationCenterProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 가운데 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+};
+/**
+ * 내비게이션 가운데 영역을 설정할 수 있어요.
+ */
+export declare function NavigationCenter({ children, visible }: NavigationCenterProps): null;
+type Icon = {
+    source: {
+        uri: string;
+    };
+    name?: never;
+} | {
+    name: string;
+    source?: never;
+};
+export type NavigationTitleIcon = Icon;
+export declare function NavigationTitleIcon(props: NavigationTitleIcon): import("react/jsx-runtime").JSX.Element;
+export type NavigationTitleTextProps = TxtProps;
+export declare function NavigationTitleText({ style, ...restProps }: NavigationTitleTextProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationBackButtonProps = {
+    onPress?: () => void;
+    canGoBack?: boolean;
+};
+export declare function NavigationBackButton({ onPress, canGoBack }: NavigationBackButtonProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationCloseButtonProps = {
+    onPress?: () => void;
+};
+export declare function NavigationCloseButton({ onPress }: NavigationCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/extensions/external-web-view-screen/Navigation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Navigation=Navigation,exports.useBackOrCloseNavigation=useBackOrCloseNavigation,exports.NavigationBackdrop=NavigationBackdrop,exports.NavigationLeft=NavigationLeft,exports.NavigationRight=NavigationRight,exports.NavigationCenter=NavigationCenter,exports.NavigationTitleIcon=NavigationTitleIcon,exports.NavigationTitleText=NavigationTitleText,exports.NavigationBackButton=NavigationBackButton,exports.NavigationCloseButton=NavigationCloseButton;const jsx_runtime_1=require("react/jsx-runtime"),elements_1=require("@granite-js/native/@react-navigation/elements"),native_1=require("@granite-js/native/@react-navigation/native"),colors_1=require("@toss-design-system/colors"),react_1=require("react"),react_native_1=require("react-native"),react_native_2=require("@granite-js/react-native"),asset_1=require("../../components/asset"),gradient_1=require("../../components/gradient"),navbar_1=require("../../components/navbar"),shadow_1=require("../../components/shadow"),txt_1=require("../../components/txt"),ColorPreferenceProvider_1=require("../../core/contexts/ColorPreferenceProvider"),prevent_font_scaling_1=require("../../extensions/prevent-font-scaling");function useAdaptive(){const{colorPreference:e}=(0,ColorPreferenceProvider_1.useColorPreference)(),{adaptive:t}=(0,react_1.useMemo)(()=>({adaptive:colors_1.colorsByPreference[e]}),[e]);return t}function hasValidChild(e){return react_1.Children.toArray(e).length>0}function Navigation({children:e}){const t=(0,native_1.useNavigation)(),n=useAdaptive(),{colorPreference:o}=(0,ColorPreferenceProvider_1.useColorPreference)(),r=hasValidChild(e);return(0,react_1.useLayoutEffect)(()=>{function i(){t.setOptions({headerStyle:null,statusBarStyle:"auto"})}if(!r){i();return}return t.setOptions({headerStyle:{backgroundColor:n.background},statusBarStyle:"auto"}),()=>{i()}},[t,o,r,n.background]),(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:e})}function useBackOrCloseNavigation(){const e=(0,native_1.useNavigation)();return(0,react_1.useCallback)(()=>{e.canGoBack()?e.goBack():(0,react_native_2.closeView)()},[e])}const BACKDROP_SHADOW_COLOR=react_native_1.Platform.select({android:colors_1.colors.greyOpacity400,ios:colors_1.colors.greyOpacity100,default:colors_1.colors.greyOpacity100});function NavigationBackdrop(){const{colorPreference:e}=(0,ColorPreferenceProvider_1.useColorPreference)(),t=useAdaptive(),n=(0,elements_1.useHeaderHeight)(),o=e==="dark",r=(0,shadow_1.useShadow)({offset:{x:0,y:0},opacity:1,radius:o?50:20,color:o?"rgba(0, 0, 0, 0.1)":BACKDROP_SHADOW_COLOR}),i=o?[t.grey100,t.grey300,t.grey100]:[t.greyOpacity100,t.greyOpacity300,t.greyOpacity100];return(0,jsx_runtime_1.jsxs)(react_native_1.View,{pointerEvents:"none",style:[{position:"absolute",top:-n,left:0,right:0,zIndex:1,width:"100%",height:n+.5}],children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{pointerEvents:"none",style:[{position:"absolute",top:0,left:0,right:0,backgroundColor:t.background,width:"100%",height:n},r]}),(0,jsx_runtime_1.jsx)(gradient_1.LinearGradient,{degree:90,easing:"linear",positions:[0,.5,1],colors:i})]})}function NavigationLeft({children:e,visible:t=!0}){const n=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{if(!hasValidChild(e)||!t){n.setOptions({headerLeft:null});return}n.setOptions({headerLeft:()=>(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:e})})},[e,n,t]),null}function NavigationRight({children:e,visible:t=!0}){const n=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{if(!hasValidChild(e)||!t){n.setOptions({headerRight:null});return}n.setOptions({headerRight:()=>(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{marginRight:4,flexDirection:"row"},children:e})})},[e,n,t]),null}const DEVICE_WIDTH=react_native_1.Dimensions.get("window").width;function NavigationCenter({children:e,visible:t=!0}){const o=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{if(!hasValidChild(e)||!t){o.setOptions({headerBackVisible:!1,headerTitle:null});return}o.setOptions({headerTitleAlign:"center",headerBackVisible:!1,headerTitle:()=>(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[{maxWidth:DEVICE_WIDTH-100,display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",gap:5}],children:e})})},[e,o,t]),null}function NavigationTitleIcon(e){const t={width:16,height:16,radius:5};return e.name!==void 0?(0,jsx_runtime_1.jsx)(asset_1.Asset.Icon,{name:e.name,frameShape:t}):(0,jsx_runtime_1.jsx)(react_native_1.Image,{source:e.source,style:{overflow:"hidden",borderRadius:t.radius,width:t.width,height:t.height}})}function NavigationTitleText({style:e,...t}){const n=useAdaptive();return(0,jsx_runtime_1.jsx)(prevent_font_scaling_1.PreventFontScaling,{limit:100,children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"st10",fontWeight:"semibold",color:n.grey900,numberOfLines:1,ellipsizeMode:"tail",...t})})}function NavigationBackButton({onPress:e,canGoBack:t=!0}){const{colorPreference:n}=(0,ColorPreferenceProvider_1.useColorPreference)(),o=useAdaptive(),r=n==="light"?o.greyOpacity400:o.greyOpacity500,i=useBackOrCloseNavigation();return(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.BackButton,{tintColor:r,onPress:()=>{e?.(),t&&i()}})}function NavigationCloseButton({onPress:e}){const{colorPreference:t}=(0,ColorPreferenceProvider_1.useColorPreference)(),n=useAdaptive(),o=t==="light"?n.greyOpacity400:n.greyOpacity500;return(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.CloseButton,{tintColor:o,onPress:()=>{e?.(),(0,react_native_2.closeView)()}})}

package/dist/cjs/extensions/external-web-view-screen/index.d.ts

@@ -0,0 +1 @@
+export * from './ExternalWebViewScreen';

package/dist/cjs/extensions/external-web-view-screen/index.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,t,e,r){r===void 0&&(r=e);var n=Object.getOwnPropertyDescriptor(t,e);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(i,r,n)}:function(i,t,e,r){r===void 0&&(r=e),i[r]=t[e]},__exportStar=function(i,t){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&__createBinding(t,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./ExternalWebViewScreen"),exports);

package/dist/cjs/extensions/navigation/Navigation.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Icon } from '../../components/icon';
+import { TxtProps } from '../../components/txt';
+import { NavigationTheme } from '../top-navigation';
+interface NavigationProps {
+    children?: ReactNode;
+}
+export declare function Navigation({ children }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function useBackOrCloseNavigation(): () => void;
+type NavigationLeftProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 왼쪽 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+};
+/**
+ * 내비게이션 왼쪽 영역을 설정할 수 있어요.
+ */
+export declare function NavigationLeft({ children, visible }: NavigationLeftProps): null;
+type NavigationRightProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 오른쪽 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+};
+/**
+ * 내비게이션 오른쪽 영역을 설정할 수 있어요.
+ */
+export declare function NavigationRight({ children, visible }: NavigationRightProps): null;
+export declare function NavigationRightWrapper({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+type NavigationContentProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 가운데 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+    background?: boolean;
+    /**
+     * 타이틀이 화면의 너비만큼의 영역을 차지하고 있어요. 양 끝단의 여백을 설정하여 버튼과 겹치지 않게 할 수 있어요.
+     * @default 100
+     */
+    horizontalSafeMargin?: number;
+    onPressTitle?: () => void;
+    theme?: 'light' | 'dark';
+    withHome?: boolean;
+};
+/**
+ * 내비게이션 컨텐츠 영역을 설정할 수 있어요.
+ */
+export declare function NavigationContent({ children, visible, onPressTitle, horizontalSafeMargin, theme, withHome, }: NavigationContentProps): null;
+type Icon = {
+    source: {
+        uri: string;
+    };
+    name?: never;
+} | {
+    name: string;
+    source?: never;
+};
+type NavigationTitleIconProps = Icon;
+export declare function NavigationTitleIcon(props: NavigationTitleIconProps): import("react/jsx-runtime").JSX.Element | null;
+type NavigationTitleTextProps = TxtProps & {
+    theme?: NavigationTheme;
+};
+export declare function NavigationTitleText({ style, theme, ...restProps }: NavigationTitleTextProps): import("react/jsx-runtime").JSX.Element;
+type NavigationBackButtonProps = {
+    onPress?: () => void;
+    canGoBack?: boolean;
+    theme?: NavigationTheme;
+};
+export declare function NavigationBackButton({ onPress, canGoBack, theme }: NavigationBackButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const NavigationIconButton: import("react").ForwardRefExoticComponent<Omit<Pick<import("../../components/icon").IconProps & import("react").RefAttributes<View>, "accessibilityLabel" | "type" | "name"> & import("react-native").TouchableOpacityProps & import("react").RefAttributes<TouchableOpacity>, "ref"> & import("react").RefAttributes<TouchableOpacity>>;
+export {};

package/dist/cjs/extensions/navigation/Navigation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.NavigationIconButton=void 0,exports.Navigation=Navigation,exports.useBackOrCloseNavigation=useBackOrCloseNavigation,exports.NavigationLeft=NavigationLeft,exports.NavigationRight=NavigationRight,exports.NavigationRightWrapper=NavigationRightWrapper,exports.NavigationContent=NavigationContent,exports.NavigationTitleIcon=NavigationTitleIcon,exports.NavigationTitleText=NavigationTitleText,exports.NavigationBackButton=NavigationBackButton;const jsx_runtime_1=require("react/jsx-runtime"),native_1=require("@granite-js/native/@react-navigation/native"),react_native_1=require("@granite-js/react-native"),colors_1=require("@toss-design-system/colors"),react_1=require("react"),react_native_2=require("react-native"),asset_1=require("../../components/asset"),navbar_1=require("../../components/navbar"),txt_1=require("../../components/txt"),constants_1=require("../../constants"),core_1=require("../../core"),useTypographyLevel_1=require("../../core/hooks/useTypographyLevel"),prevent_font_scaling_1=require("../../extensions/prevent-font-scaling"),top_navigation_1=require("../top-navigation");function hasValidChild(t){return react_1.Children.toArray(t).length>0}function Navigation({children:t}){const e=(0,native_1.useNavigation)(),n=(0,core_1.useAdaptive)(),{colorPreference:i}=(0,core_1.useColorPreference)(),r=hasValidChild(t);return(0,react_1.useLayoutEffect)(()=>{function o(){e.setOptions({headerStyle:null,statusBarStyle:"auto"})}if(!r){o();return}return e.setOptions({headerStyle:{backgroundColor:n.background},statusBarStyle:i==="dark"?"light":"dark"}),()=>{o()}},[n.background,i,r,e]),(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:t})}function useBackOrCloseNavigation(){const t=(0,native_1.useNavigation)();return(0,react_1.useCallback)(()=>{t.canGoBack()?t.goBack():(0,react_native_1.closeView)()},[t])}function NavigationLeft({children:t,visible:e=!0}){const n=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{if(!hasValidChild(t)||!e){n.setOptions({headerLeft:null});return}n.setOptions({headerLeft:()=>(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:t})})},[t,n,e]),null}function NavigationRight({children:t,visible:e=!0}){const n=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{if(!hasValidChild(t)||!e){n.setOptions({headerRight:null});return}n.setOptions({headerRight:()=>(0,jsx_runtime_1.jsx)(NavigationRightWrapper,{children:t})})},[t,n,e]),null}function NavigationRightWrapper({children:t}){return(0,jsx_runtime_1.jsx)(react_native_2.View,{style:{marginRight:10,flexDirection:"row",justifyContent:"center",alignItems:"center",gap:4,marginLeft:4},children:t})}const DEVICE_WIDTH=react_native_2.Dimensions.get("window").width;function NavigationContent({children:t,visible:e=!0,onPressTitle:n,horizontalSafeMargin:i=0,theme:r="light",withHome:o=!1}){const a=(0,native_1.useNavigation)(),s=(0,core_1.useAdaptive)();return(0,react_1.useLayoutEffect)(()=>{if(!hasValidChild(t)||!e){a.setOptions({headerBackVisible:!1,headerTitle:null});return}a.setOptions({headerTitleAlign:"center",headerBackVisible:!1,headerTitle:()=>(0,jsx_runtime_1.jsx)(react_native_2.View,{style:{flexDirection:"row",justifyContent:"flex-start",alignItems:"center",flex:1,marginLeft:react_native_2.Platform.OS==="ios"?-4:0,alignSelf:"flex-start"},children:(0,jsx_runtime_1.jsx)(react_native_2.View,{style:{flexDirection:"row",alignItems:"center",gap:5,maxWidth:DEVICE_WIDTH-i},children:n?(0,jsx_runtime_1.jsx)(react_native_2.TouchableOpacity,{onPress:n,style:{flexDirection:"row",alignItems:"center",gap:5,height:34,paddingLeft:12,paddingRight:10,maxWidth:DEVICE_WIDTH-i,backgroundColor:r==="dark"&&!o?void 0:top_navigation_1.COLOR_PALETTE[r].backgroundColor,borderRadius:99},children:t}):t})}),headerTintColor:colors_1.colors.grey900})},[s.greyOpacity50,t,i,a,n,r,e,o]),null}function NavigationTitleIcon(t){const e=(0,useTypographyLevel_1.useTypographyLevel)(),i=(0,constants_1.getTypographyMap)(e).t6.fontSize,o=Math.min(i,20),a={width:o,height:o,radius:5};return i>=22&&t.name!=="icon-home-mono"?null:t.name!==void 0?(0,jsx_runtime_1.jsx)(asset_1.Asset.Icon,{name:t.name,frameShape:a}):(0,jsx_runtime_1.jsx)(react_native_2.Image,{source:t.source,style:{overflow:"hidden",borderRadius:a.radius,width:a.width,height:a.height}})}function NavigationTitleText({style:t,theme:e="light",...n}){return(0,jsx_runtime_1.jsx)(prevent_font_scaling_1.PreventFontScaling,{limit:135,children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t6",fontWeight:"semibold",color:top_navigation_1.COLOR_PALETTE[e].titleTextColor,numberOfLines:1,ellipsizeMode:"tail",...n})})}function NavigationBackButton({onPress:t,canGoBack:e=!0,theme:n="light"}){const i=useBackOrCloseNavigation();return(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.BackButton,{tintColor:top_navigation_1.COLOR_PALETTE[n].titleTextColor,accessibilityRole:"button",accessible:!0,accessibilityLabel:e?"\uB4A4\uB85C\uAC00\uAE30":"\uB2EB\uAE30",onPress:()=>{t?.(),e&&i()}})}exports.NavigationIconButton=(0,react_1.forwardRef)(function(e,n){return(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.RightIconButton,{ref:n,...e})});

package/dist/cjs/extensions/navigation/index.d.ts

@@ -0,0 +1 @@
+export * from './Navigation';

package/dist/cjs/extensions/navigation/index.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,t,e,r){r===void 0&&(r=e);var n=Object.getOwnPropertyDescriptor(t,e);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(i,r,n)}:function(i,t,e,r){r===void 0&&(r=e),i[r]=t[e]},__exportStar=function(i,t){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&__createBinding(t,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./Navigation"),exports);

package/dist/cjs/extensions/overlay-extension/components/CapturePress.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+export declare function CapturePress({ children, onPress }: {
+    children: ReactElement;
+    onPress: () => void;
+}): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/cjs/extensions/overlay-extension/components/CapturePress.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CapturePress=CapturePress;const react_1=require("react");function CapturePress({children:r,onPress:s}){const e=react_1.Children.only(r);return(0,react_1.cloneElement)(e,{...e.props,onPress:(...o)=>{s(),e.props&&typeof e.props.onPress=="function"&&e.props.onPress(...o)}})}

package/dist/cjs/extensions/overlay-extension/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useDialog } from './useDialog';
+export { useBottomSheet } from './useBottomSheet';
+export { useToast } from './useToast';

package/dist/cjs/extensions/overlay-extension/hooks/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useToast=exports.useBottomSheet=exports.useDialog=void 0;var useDialog_1=require("./useDialog");Object.defineProperty(exports,"useDialog",{enumerable:!0,get:function(){return useDialog_1.useDialog}});var useBottomSheet_1=require("./useBottomSheet");Object.defineProperty(exports,"useBottomSheet",{enumerable:!0,get:function(){return useBottomSheet_1.useBottomSheet}});var useToast_1=require("./useToast");Object.defineProperty(exports,"useToast",{enumerable:!0,get:function(){return useToast_1.useToast}});

package/dist/cjs/extensions/overlay-extension/hooks/useBottomSheet.d.ts

@@ -0,0 +1,46 @@
+import { BottomSheet } from '../../../components/bottom-sheet';
+import { ComponentProps } from 'react';
+type BottomSheetPrivateOptions = Omit<ComponentProps<typeof BottomSheet.Root>, 'open'>;
+type BottomSheetPublicOptions = Partial<BottomSheetPrivateOptions>;
+interface UseBottomSheetOptions {
+    /** @default true */
+    closeOnDestroy?: boolean;
+}
+/**
+ * @public
+ * @category Hooks
+ * @kind function
+ * @name useBottomSheet
+ * @description
+ * `useBottomSheet`은 TDS의 `BottomSheet` 컴포넌트를 간편하게 열고 닫을 수 있게 해주는 Hook이에요.
+ *
+ * @param {UseBottomSheetOptions} [options] - `BottomSheet`을 제어하기 위한 옵션 객체에요.
+ * @param {boolean} [options.closeOnDestroy=true] - 컴포넌트가 사라질 때 `BottomSheet`를 자동으로 닫을지 여부를 결정해요.
+ *
+ * @returns {{
+ *   close: () => void;
+ *   open: (options: BottomSheetPublicOptions) => void;
+ * }}
+ * - `close`함수는 현재 열려있는 `BottomSheet`를 닫아요.
+ * - `open`함수는 기본 `BottomSheet`를 열어요.
+ *
+ * @example
+ * ## `open`으로 `BottomSheet`를 여는 예제
+ * ```tsx
+ * import { useBottomSheet } from '../../../overlay-extension';
+ *
+ * const bottomSheet = useBottomSheet();
+ *
+ * const showBasicBottomSheet = () => {
+ *    bottomSheet.open({
+ *     header: <BottomSheet.Header>제목</BottomSheet.Header>,
+ *     children: <Text>내용</Text>,
+ *   });
+ * };
+ * ```
+ */
+export declare function useBottomSheet(options?: UseBottomSheetOptions): {
+    close: () => void;
+    open: ({ header, cta, onExited, onClose, ...options }: BottomSheetPublicOptions) => void;
+};
+export {};

package/dist/cjs/extensions/overlay-extension/hooks/useBottomSheet.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useBottomSheet=useBottomSheet;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../../core"),bottom_sheet_1=require("../../../components/bottom-sheet"),react_1=require("react"),CapturePress_1=require("../components/CapturePress"),react_native_1=require("react-native");function useBottomSheet(u={}){const e=(0,core_1.useOverlay)(),o=(0,react_1.useCallback)(()=>e.close(),[e]),n=(0,react_1.useCallback)(({header:l,cta:r,onExited:a,onClose:i,...m})=>e.open(({isOpen:p,exit:_,close:h})=>{const s=()=>{i?.(),h()};return(0,jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet.Root,{...m,header:l,open:p,cta:(0,react_1.isValidElement)(r)?(0,jsx_runtime_1.jsx)(CapturePress_1.CapturePress,{onPress:s,children:r}):(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:s,children:r}),onClose:s,onExited:()=>{a?.(),_()}})}),[e]),t=(0,react_1.useMemo)(()=>({close:o,open:n}),[o,n]),{closeOnDestroy:c=!0}=u;return(0,react_1.useEffect)(()=>()=>{c&&t?.close()},[c,t]),t}

package/dist/cjs/extensions/overlay-extension/hooks/useDialog.d.ts

@@ -0,0 +1,70 @@
+import { ComponentProps, ReactElement } from 'react';
+import { AlertDialog, ConfirmDialog } from '../../../components/dialog';
+type AlertDialogProps = ComponentProps<typeof AlertDialog>;
+interface AlertOptions extends Omit<AlertDialogProps, 'open' | 'onClose' | 'onExited' | 'content'> {
+}
+type ConfirmDialogProps = ComponentProps<typeof ConfirmDialog>;
+interface ConfirmOptions extends Omit<ConfirmDialogProps, 'open' | 'leftButton' | 'rightButton' | 'onClose' | 'onExited' | 'content'> {
+    rightButton?: ReactElement | string;
+    leftButton?: ReactElement | string;
+}
+interface UseDialogOptions {
+    closeOnDestroy?: boolean;
+}
+/**
+ * @public
+ * @category Hooks
+ * @kind function
+ * @name useDialog
+ * @description
+ * `useDialog`는 `@toss/tds-react-native`의 `AlertDialog`와 `ConfirmDialog`를 쉽게 제어할 수 있도록 도와주는 Hook이에요. `AlertDialog`는 사용자가 닫는 시점을 Promise 로 전달받을 수 있어요. `ConfirmDialog`는 사용자가 어떤 버튼으로 닫았는지 그 결과를 Promise 로 전달받을 수 있어요. 예를 들어, `ConfirmDialog` 에서 "확인" 버튼과 "취소" 버튼에 따라 이후 처리를 다르게 할 수 있어요.
+ *
+ * @param {UseDialogOptions} [options] - Dialog를 제어하기 위한 옵션 객체에요.
+ * @param {boolean} [options.closeOnDestroy=true] - 컴포넌트가 언마운트될 때 Dialog를 자동으로 닫을지 여부를 결정해요.
+ *
+ * @returns {{
+ *   close: () => void;
+ *   openAlert: (options: AlertOptions) => Promise<void>;
+ *   openConfirm: (options: ConfirmOptions) => Promise<boolean>;
+ * }}
+ * - `close` 함수는 현재 열려있는 Dialog를 닫아요.
+ * - `openAlert` 함수는 TDS 의 `AlertDialog`를 열어요. `AlertDialog`가 닫히면 `Promise` 가 `resolve` 돼요.
+ * - `openConfirm` 함수는 `ConfirmDialog`를 열고, 사용자의 선택 결과를 `Promise`로 반환해요.
+ *
+ * @example
+ *
+ * ### `openAlert`으로 `AlertDialog`를 여는 예제
+ * ```tsx
+ * import { useDialog } from '../../../overlay-extension';
+ *
+ * const dialog = useDialog();
+ *
+ * const showAlert = async () => {
+ *   const result = await dialog.openAlert({
+ *     title: '알림',
+ *     message: '이것은 AlertDialog입니다.',
+ *   });
+ * };
+ * ```
+ *
+ * ### `openConfirm`으로 `ConfirmDialog`를 여는 예제
+ * ```tsx
+ * const showConfirm = async () => {
+ *   const result = await dialog.openConfirm({
+ *     title: '확인',
+ *     message: '정말로 진행하시겠습니까?',
+ *   });
+ *   if (result) {
+ *     // 사용자가 "확인"을 눌렀을 때의 처리
+ *   } else {
+ *     // 사용자가 "취소"를 눌렀을 때의 처리
+ *   }
+ * };
+ * ```
+ */
+export declare function useDialog(options?: UseDialogOptions): {
+    close: () => void;
+    openAlert: ({ closeOnDimmerClick, onEntered, onButtonPress, ...otherOptions }: AlertOptions) => Promise<void>;
+    openConfirm: ({ rightButton, leftButton, closeOnDimmerClick, onEntered, ...otherOptions }: ConfirmOptions) => Promise<boolean>;
+};
+export {};

package/dist/cjs/extensions/overlay-extension/hooks/useDialog.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useDialog=useDialog;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),dialog_1=require("../../../components/dialog"),core_1=require("../../../core");function useDialog(g={}){const o=(0,core_1.useOverlay)(),f=(0,react_1.useCallback)(()=>{o.close()},[o]),{closeOnDestroy:m=!0}=g,d=(0,react_1.useCallback)(({closeOnDimmerClick:s=!1,onEntered:r,onButtonPress:c,...u})=>new Promise(i=>{o.open(({isOpen:n,close:e,exit:t})=>(0,jsx_runtime_1.jsx)(dialog_1.AlertDialog,{...u,open:n,onEntered:r,onClose:()=>{i(),e()},onButtonPress:()=>{c?.(),i(),e()},onExited:()=>{t()},closeOnDimmerClick:s}))}),[o]),C=(0,react_1.useCallback)(({rightButton:s="\uD655\uC778",leftButton:r="\uCDE8\uC18C",closeOnDimmerClick:c=!1,onEntered:u,...i})=>{const n=typeof s=="string"?(0,jsx_runtime_1.jsx)(dialog_1.ConfirmDialog.Button,{children:s}):s,e=typeof r=="string"?(0,jsx_runtime_1.jsx)(dialog_1.ConfirmDialog.Button,{children:r}):r;return new Promise(t=>{o.open(({isOpen:x,close:a,exit:P})=>(0,jsx_runtime_1.jsx)(dialog_1.ConfirmDialog,{...i,open:x,onEntered:u,onClose:()=>{t(!1),a()},onExited:()=>{P()},rightButton:(0,react_1.cloneElement)(n,{...n.props,onPress:p=>{t(!0),n.props.onPress===void 0?a():n.props.onPress(p)}}),leftButton:(0,react_1.cloneElement)(e,{...e.props,type:"dark",style:"weak",onPress:p=>{t(!1),e.props.onPress===void 0?a():e.props.onPress(p)}}),closeOnDimmerClick:c}))})},[o]),l=(0,react_1.useMemo)(()=>({close:f,openAlert:d,openConfirm:C}),[f,d,C]);return(0,react_1.useEffect)(()=>()=>{m&&l?.close()},[m,l]),l}

package/dist/cjs/extensions/overlay-extension/hooks/useToast.d.ts

@@ -0,0 +1,89 @@
+type ToastButton = {
+    /**
+     * `Toast` 컴포넌트의 버튼에 표시될 텍스트에요.
+     */
+    text: string;
+    /**
+     * `Toast` 컴포넌트의 버튼을 클릭할 때 실행될 함수에요.
+     */
+    onPress: () => void;
+};
+type ToastPosition = 'top' | 'bottom';
+type ToastIcon = {
+    /**
+     * `Toast` 컴포넌트에 표시될 아이콘의 이름이에요.
+     *
+     * lottie와 함께 사용할 수 없어요.
+     */
+    icon?: string;
+    /**
+     * `Toast` 컴포넌트에 표시될 아이콘의 모양을 설정해요.
+     *
+     * @default undefined
+     */
+    iconType?: 'circle' | 'square';
+};
+type ToastLottie = {
+    /**
+     * `Toast` 컴포넌트에 표시될 로티 애니메이션의 URL이에요.
+     *
+     * icon과 함께 사용할 수 없어요.
+     */
+    lottie?: string;
+};
+type BaseToastOptions = {
+    /**
+     * `Toast` 컴포넌트의 토스트 메시지의 위치를 설정해요.
+     *
+     * @default 'bottom'
+     */
+    type?: ToastPosition;
+    /**
+     * `Toast` 컴포넌트에 표시될 버튼이에요.
+     */
+    button?: ToastButton;
+    /**
+     * `Toast` 컴포넌트가 자동으로 사라질 때까지의 시간(ms)이에요.
+     *
+     * 버튼이 있는 경우 기본값은 5000ms, 없는 경우 3000ms이에요.
+     */
+    duration?: number;
+    /**
+     * `Toast` 컴포넌트가 닫히기 시작할 때 호출되는 콜백 함수에요.
+     *
+     * 아래와 같은 상황에서 사용할 수 있어요:
+     * - `duration` 시간이 지나서 자동으로 닫힐 때
+     * - 사용자가 `Toast` 컴포넌트를 드래그해서 닫을 때
+     * - 수동으로 `open` 값을 `false`로 변경할 때
+     */
+    onClose?: () => void;
+    /**
+     * `Toast` 컴포넌트가 완전히 사라지고 애니메이션이 끝난 후에 호출되는 콜백 함수에요.
+     *
+     * 아래와 같은 상황에서 사용할 수 있어요:
+     * - `Toast` 컴포넌트가 완전히 사라진 후 다음 작업을 진행해야 할 때
+     */
+    onExited?: () => void;
+    /**
+     * `Toast` 컴포넌트가 화면에 나타나고 애니메이션이 끝난 후에 호출되는 콜백 함수에요.
+     *
+     * 아래와 같은 상황에서 사용할 수 있어요:
+     * - `Toast` 컴포넌트가 화면에 나타나고 다음 작업을 진행해야 할 때
+     **/
+    onEntered?: () => void;
+};
+type OpenToastOptions = BaseToastOptions & ((ToastIcon & {
+    lottie?: never;
+}) | (ToastLottie & {
+    icon?: never;
+    iconType?: never;
+}));
+interface UseToastOptions {
+    /** @default true */
+    closeOnDestroy?: boolean;
+}
+export declare function useToast(options?: UseToastOptions): {
+    close: () => void;
+    open: (message: string, { duration, button, type, lottie, icon, iconType, onExited, onClose, ...options }?: OpenToastOptions) => void;
+};
+export {};

package/dist/cjs/extensions/overlay-extension/hooks/useToast.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useToast=useToast;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../../core"),react_1=require("react"),toast_1=require("../../../components/toast");function useToast(i={}){const e=(0,core_1.useOverlay)(),s=(0,react_1.useCallback)(()=>e.close(),[e]),r=(0,react_1.useCallback)((l,{duration:T,button:o,type:d="bottom",lottie:c,icon:u,iconType:a,onExited:x,onClose:f,...p}={})=>e.open(({isOpen:j,exit:_,close:m})=>{const y=()=>{f?.(),m()};return(0,jsx_runtime_1.jsx)(toast_1.Toast,{...p,text:l,open:j,position:d,button:o?(0,jsx_runtime_1.jsx)(toast_1.Toast.Button,{onPress:o.onPress,children:o.text}):void 0,icon:c?(0,jsx_runtime_1.jsx)(toast_1.Toast.LottieIcon,{src:c,style:{borderRadius:a==="circle"?9999:void 0,overflow:"hidden"}}):u?(0,jsx_runtime_1.jsx)(toast_1.Toast.Icon,{name:u,type:a==="circle"?"circle":"default"}):void 0,onClose:y,onExited:()=>{x?.(),_()}})}),[e]),t=(0,react_1.useMemo)(()=>({close:s,open:r}),[s,r]),{closeOnDestroy:n=!0}=i;return(0,react_1.useEffect)(()=>()=>{n&&t?.close()},[n,t]),t}

package/dist/cjs/extensions/overlay-extension/index.d.ts

@@ -0,0 +1 @@
+export * from './hooks';

package/dist/cjs/extensions/overlay-extension/index.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,t,e,r){r===void 0&&(r=e);var n=Object.getOwnPropertyDescriptor(t,e);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(i,r,n)}:function(i,t,e,r){r===void 0&&(r=e),i[r]=t[e]},__exportStar=function(i,t){for(var e in i)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&__createBinding(t,i,e)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./hooks"),exports);

package/dist/cjs/extensions/page-navbar/CompatAccessoryButton.d.ts

@@ -0,0 +1,24 @@
+import { ReactNavigationNavbar } from '../../components/navbar';
+import { ComponentProps } from 'react';
+type IconProps = ComponentProps<typeof ReactNavigationNavbar.RightIconButton>;
+interface TextButtonProps {
+    type: 'text';
+    title: string;
+    onClick: () => void;
+}
+interface IconButtonProps {
+    type: 'icon';
+    name: IconProps['name'];
+    iconType?: IconProps['type'];
+    alt: string;
+    onClick: () => void;
+}
+interface IconButtonProps {
+    type: 'icon';
+}
+type Props = TextButtonProps | IconButtonProps;
+/**
+ * @deprecated `<PageNavbar.AccessoryIconButton />`, `<PageNavbar.AccessoryTextButton />` 을 사용해주세요.
+ */
+export declare function CompatAccessoryButton(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/extensions/page-navbar/CompatAccessoryButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CompatAccessoryButton=CompatAccessoryButton;const jsx_runtime_1=require("react/jsx-runtime"),navbar_1=require("../../components/navbar");function CompatAccessoryButton(t){return t.type==="text"?(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.RightTextButton,{onPress:t.onClick,children:t.title}):(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.RightIconButton,{onPress:t.onClick,type:t.iconType,name:t.name,accessibilityLabel:t.alt})}

package/dist/cjs/extensions/page-navbar/PageAccessoryButtons.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+}
+export declare function PageAccessoryButtons({ children }: Props): null;
+export {};

package/dist/cjs/extensions/page-navbar/PageAccessoryButtons.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PageAccessoryButtons=PageAccessoryButtons;const jsx_runtime_1=require("react/jsx-runtime"),native_1=require("@granite-js/native/@react-navigation/native"),navbar_1=require("../../components/navbar"),react_1=require("react");function PageAccessoryButtons({children:e}){const t=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{t.setOptions({headerRight:()=>(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.HeaderRight,{children:e})})},[e,t]),null}