@toss/tds-react-native 1.0.0

package/dist/esm/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("../..").IconProps & import("react").RefAttributes<View>, "accessibilityLabel" | "type" | "name"> & import("react-native").TouchableOpacityProps & import("react").RefAttributes<TouchableOpacity>, "ref"> & import("react").RefAttributes<TouchableOpacity>>;
+export {};

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

@@ -0,0 +1 @@
+"use strict";import{Fragment as d,jsx as o}from"react/jsx-runtime";import{useNavigation as s}from"@granite-js/native/@react-navigation/native";import{closeView as x}from"@granite-js/react-native";import{colors as v}from"@toss-design-system/colors";import{Children as C,forwardRef as b,useCallback as k,useLayoutEffect as c}from"react";import{Dimensions as I,Image as O,Platform as B,TouchableOpacity as N,View as f}from"react-native";import{Asset as T}from"../../components/asset";import{ReactNavigationNavbar as p}from"../../components/navbar";import{Txt as w}from"../../components/txt";import{getTypographyMap as L}from"../../constants";import{useAdaptive as m,useColorPreference as R}from"../../core";import{useTypographyLevel as S}from"../../core/hooks/useTypographyLevel";import{PreventFontScaling as D}from"../../extensions/prevent-font-scaling";import{COLOR_PALETTE as g}from"../top-navigation";function u(t){return C.toArray(t).length>0}export function Navigation({children:t}){const e=s(),n=m(),{colorPreference:i}=R(),l=u(t);return c(()=>{function r(){e.setOptions({headerStyle:null,statusBarStyle:"auto"})}if(!l){r();return}return e.setOptions({headerStyle:{backgroundColor:n.background},statusBarStyle:i==="dark"?"light":"dark"}),()=>{r()}},[n.background,i,l,e]),o(d,{children:t})}export function useBackOrCloseNavigation(){const t=s();return k(()=>{t.canGoBack()?t.goBack():x()},[t])}export function NavigationLeft({children:t,visible:e=!0}){const n=s();return c(()=>{if(!u(t)||!e){n.setOptions({headerLeft:null});return}n.setOptions({headerLeft:()=>o(d,{children:t})})},[t,n,e]),null}export function NavigationRight({children:t,visible:e=!0}){const n=s();return c(()=>{if(!u(t)||!e){n.setOptions({headerRight:null});return}n.setOptions({headerRight:()=>o(NavigationRightWrapper,{children:t})})},[t,n,e]),null}export function NavigationRightWrapper({children:t}){return o(f,{style:{marginRight:10,flexDirection:"row",justifyContent:"center",alignItems:"center",gap:4,marginLeft:4},children:t})}const h=I.get("window").width;export function NavigationContent({children:t,visible:e=!0,onPressTitle:n,horizontalSafeMargin:i=0,theme:l="light",withHome:r=!1}){const a=s(),y=m();return c(()=>{if(!u(t)||!e){a.setOptions({headerBackVisible:!1,headerTitle:null});return}a.setOptions({headerTitleAlign:"center",headerBackVisible:!1,headerTitle:()=>o(f,{style:{flexDirection:"row",justifyContent:"flex-start",alignItems:"center",flex:1,marginLeft:B.OS==="ios"?-4:0,alignSelf:"flex-start"},children:o(f,{style:{flexDirection:"row",alignItems:"center",gap:5,maxWidth:h-i},children:n?o(N,{onPress:n,style:{flexDirection:"row",alignItems:"center",gap:5,height:34,paddingLeft:12,paddingRight:10,maxWidth:h-i,backgroundColor:l==="dark"&&!r?void 0:g[l].backgroundColor,borderRadius:99},children:t}):t})}),headerTintColor:v.grey900})},[y.greyOpacity50,t,i,a,n,l,e,r]),null}export function NavigationTitleIcon(t){const e=S(),i=L(e).t6.fontSize,r=Math.min(i,20),a={width:r,height:r,radius:5};return i>=22&&t.name!=="icon-home-mono"?null:t.name!==void 0?o(T.Icon,{name:t.name,frameShape:a}):o(O,{source:t.source,style:{overflow:"hidden",borderRadius:a.radius,width:a.width,height:a.height}})}export function NavigationTitleText({style:t,theme:e="light",...n}){return o(D,{limit:135,children:o(w,{typography:"t6",fontWeight:"semibold",color:g[e].titleTextColor,numberOfLines:1,ellipsizeMode:"tail",...n})})}export function NavigationBackButton({onPress:t,canGoBack:e=!0,theme:n="light"}){const i=useBackOrCloseNavigation();return o(p.BackButton,{tintColor:g[n].titleTextColor,accessibilityRole:"button",accessible:!0,accessibilityLabel:e?"\uB4A4\uB85C\uAC00\uAE30":"\uB2EB\uAE30",onPress:()=>{t?.(),e&&i()}})}export const NavigationIconButton=b(function(e,n){return o(p.RightIconButton,{ref:n,...e})});

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

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

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

@@ -0,0 +1 @@
+"use strict";export*from"./Navigation";

package/dist/esm/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/esm/extensions/overlay-extension/components/CapturePress.js

@@ -0,0 +1 @@
+"use strict";import{Children as e,cloneElement as p}from"react";export function CapturePress({children:r,onPress:n}){const o=e.only(r);return p(o,{...o.props,onPress:(...s)=>{n(),o.props&&typeof o.props.onPress=="function"&&o.props.onPress(...s)}})}

package/dist/esm/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/esm/extensions/overlay-extension/hooks/index.js

@@ -0,0 +1 @@
+"use strict";export{useDialog}from"./useDialog";export{useBottomSheet}from"./useBottomSheet";export{useToast}from"./useToast";

package/dist/esm/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/esm/extensions/overlay-extension/hooks/useBottomSheet.js

@@ -0,0 +1 @@
+"use strict";import{jsx as s}from"react/jsx-runtime";import{useOverlay as C}from"../../../core";import{BottomSheet as P}from"../../../components/bottom-sheet";import{isValidElement as y,useCallback as c,useEffect as E,useMemo as b}from"react";import{CapturePress as j}from"../components/CapturePress";import{Pressable as v}from"react-native";export function useBottomSheet(i={}){const e=C(),n=c(()=>e.close(),[e]),l=c(({header:u,cta:r,onExited:p,onClose:f,...a})=>e.open(({isOpen:d,exit:h,close:x})=>{const t=()=>{f?.(),x()};return s(P.Root,{...a,header:u,open:d,cta:y(r)?s(j,{onPress:t,children:r}):s(v,{onPress:t,children:r}),onClose:t,onExited:()=>{p?.(),h()}})}),[e]),o=b(()=>({close:n,open:l}),[n,l]),{closeOnDestroy:m=!0}=i;return E(()=>()=>{m&&o?.close()},[m,o]),o}

package/dist/esm/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/esm/extensions/overlay-extension/hooks/useDialog.js

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

package/dist/esm/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/esm/extensions/overlay-extension/hooks/useToast.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{useOverlay as E}from"../../../core";import{useCallback as f,useEffect as I,useMemo as O}from"react";import{Toast as n}from"../../../components/toast";export function useToast(a={}){const e=E(),s=f(()=>e.close(),[e]),c=f((m,{duration:P,button:t,type:p="bottom",lottie:l,icon:u,iconType:d,onExited:x,onClose:y,...h}={})=>e.open(({isOpen:v,exit:C,close:b})=>{const j=()=>{y?.(),b()};return o(n,{...h,text:m,open:v,position:p,button:t?o(n.Button,{onPress:t.onPress,children:t.text}):void 0,icon:l?o(n.LottieIcon,{src:l,style:{borderRadius:d==="circle"?9999:void 0,overflow:"hidden"}}):u?o(n.Icon,{name:u,type:d==="circle"?"circle":"default"}):void 0,onClose:j,onExited:()=>{x?.(),C()}})}),[e]),r=O(()=>({close:s,open:c}),[s,c]),{closeOnDestroy:i=!0}=a;return I(()=>()=>{i&&r?.close()},[i,r]),r}

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

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

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

@@ -0,0 +1 @@
+"use strict";export*from"./hooks";

package/dist/esm/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/esm/extensions/page-navbar/CompatAccessoryButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e}from"react/jsx-runtime";import{ReactNavigationNavbar as n}from"../../components/navbar";export function CompatAccessoryButton(t){return t.type==="text"?e(n.RightTextButton,{onPress:t.onClick,children:t.title}):e(n.RightIconButton,{onPress:t.onClick,type:t.iconType,name:t.name,accessibilityLabel:t.alt})}

package/dist/esm/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/esm/extensions/page-navbar/PageAccessoryButtons.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{useNavigation as a}from"@granite-js/native/@react-navigation/native";import{ReactNavigationNavbar as e}from"../../components/navbar";import{useLayoutEffect as i}from"react";export function PageAccessoryButtons({children:t}){const o=a();return i(()=>{o.setOptions({headerRight:()=>r(e.HeaderRight,{children:t})})},[t,o]),null}

package/dist/esm/extensions/page-navbar/PageNavbar.d.ts

@@ -0,0 +1,112 @@
+import { ReactNode } from 'react';
+import { CompatAccessoryButton } from './CompatAccessoryButton';
+import { PageAccessoryButtons } from './PageAccessoryButtons';
+import { PageTitle } from './PageTitle';
+type PageNavbarPreference = {
+    type: 'showAlways';
+} | {
+    type: 'transparent';
+} | {
+    type: 'none';
+};
+interface Props {
+    /**
+     * @desciription
+     * showAlways 는 항상 상단에 navbar 가 존재합니다.
+     * transparent 는 투명내비바를 적용합니다.
+     * none 은 헤더를 없앱니다.
+     * 투명내비바를 쓰는 경우 PageNavbar.TransparentScrollView 를 사용해야합니다.
+     *
+     * @default type=showAlways
+     */
+    preference?: PageNavbarPreference;
+    children?: ReactNode;
+}
+/**
+ * @public
+ * @category Components
+ * @kind component
+ * @name PageNavbar
+ * @description
+ * `PageNavbar` 컴포넌트를 사용해서 페이지 상단에 내비게이션 바의 스타일을 설정할 수 있어요. 내비게이션 바의 타입은 `showAlways`, `transparent`, `none` 중에서 선택할 수 있어요.
+ *
+ * - `showAlways`: 항상 상단에 내비게이션 바를 표시해요.
+ * - `transparent`: 투명한 내비게이션 바를 사용해요. 투명 내비게이션 바를 사용할 때는 `PageNavbar.TransparentScrollView`와 함께 사용해야 해요.
+ * - `none`: 옵션을 사용하면 내비게이션 바가 완전히 숨겨져 헤더가 없는 페이지를 만들 수 있어요. 예를 들어, Safe Area를 포함한 전체 화면을 만들고 싶을 때 사용해요.
+ *
+ *
+ * @param {Props} props `PageNavbar`에 전달할 속성들이에요.
+ * @param {PageNavbarPreference} [props.preference={type: 'showAlways'}] 내비게이션 바의 유형을 설정하는 옵션이에요. `showAlways`, `transparent`, `none` 중 하나를 선택할 수 있어요. 기본값은 `{ type: 'showAlways' }` 에요.
+ * @param {ReactNode} [props.children] 내비게이션 바 안에 들어갈 콘텐츠를 정의할 수 있어요. 주로 타이틀과 액세서리 버튼을 포함해요.
+ * `PageNavbar.AccessoryTextButton`과 `PageNavbar.AccessoryIconButton`을 사용해 내비게이션 바에 액세서리 버튼을 쉽게 추가할 수 있어요.
+ *
+ * @returns {JSX.Element} 설정된 내비게이션 바를 포함하는 JSX 엘리먼트를 반환해요.
+ *
+ * @example
+ * ## `showAlways`를 사용해서 항상 상단에 내비게이션 바를 보여주는 예시
+
+ * ```tsx
+ * import { PageNavbar } from '@toss/tds-react-native';
+ *
+ * function Page() {
+ *   return (
+ *     <PageNavbar>
+ *       <PageNavbar.Title>Title</PageNavbar.Title>
+ *       <PageNavbar.AccessoryButtons>
+ *         <PageNavbar.AccessoryTextButton>설정</PageNavbar.AccessoryTextButton>
+ *         <PageNavbar.AccessoryIconButton name="icon-share-dots-mono" />
+ *       </PageNavbar.AccessoryButtons>
+ *     </PageNavbar>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ## `transparent`를 사용해서 투명한 내비게이션 바를 만드는 예시
+ * ```tsx
+ * import { PageNavbar } from '@toss/tds-react-native';
+ *
+ * function Page() {
+ *   return (
+ *     <PageNavbar preference={{ type: "transparent" }}>
+ *       <PageNavbar.Title>Title</PageNavbar.Title>
+ *       <PageNavbar.AccessoryButtons>
+ *         <PageNavbar.AccessoryTextButton>설정</PageNavbar.AccessoryTextButton>
+ *         <PageNavbar.AccessoryIconButton name="icon-share-dots-mono" />
+ *       </PageNavbar.AccessoryButtons>
+ *
+ *       <PageNavbar.TransparentScrollView>
+ *         <SomeScrollableContents />
+ *       </PageNavbar.TransparentScrollView>
+ *     </PageNavbar>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ## `none`을 사용해서 내비게이션 바를 숨기고 SerivceWebView를 전체화면으로 그리는 예시
+ * ```tsx
+ * import { PageNavbar } from '@toss/tds-react-native';
+ *
+ * function Page() {
+ *   return (
+ *     <>
+ *       <PageNavbar preference={{ type: "none" }}>
+ *       <ServiceWebView {...} />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see [React Navigation Header Options](https://reactnavigation.org/docs/stack-navigator/#headertransparent)
+ */
+export declare function PageNavbar({ children, preference }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageNavbar {
+    var Title: typeof PageTitle;
+    var AccessoryButtons: typeof PageAccessoryButtons;
+    var AccessoryTextButton: typeof import("../../components/navbar/ReactNavigationHelper/Right").RightTextButton;
+    var AccessoryIconButton: import("react").ForwardRefExoticComponent<Pick<import("../..").IconProps & import("react").RefAttributes<import("react-native").View>, "accessibilityLabel" | "type" | "name"> & import("react-native").TouchableOpacityProps & import("react").RefAttributes<import("react-native").TouchableOpacity>>;
+    var TransparentScrollView: import("react").ForwardRefExoticComponent<Omit<import("@granite-js/react-native").IOComponentProps & import("react-native").ScrollViewProps & import("react").RefAttributes<import("react-native").ScrollView>, "ref"> & import("react").RefAttributes<import("react-native").ScrollView>>;
+    var AccessoryButton: typeof CompatAccessoryButton;
+}
+export {};

package/dist/esm/extensions/page-navbar/PageNavbar.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r,Fragment as e}from"react/jsx-runtime";import{useNavigation as n}from"@granite-js/native/@react-navigation/native";import{colors as s}from"@toss-design-system/colors";import{useLayoutEffect as a}from"react";import{ReactNavigationNavbar as c}from"../../components/navbar";import{CompatAccessoryButton as l}from"./CompatAccessoryButton";import{TransparentNavigation as u}from"./components/TransparentNavigationBar/index";import{PageAccessoryButtons as m}from"./PageAccessoryButtons";import{PageTitle as p}from"./PageTitle";export function PageNavbar({children:o,preference:t={type:"showAlways"}}){const i=n();return a(()=>{i.setOptions({headerStyle:{backgroundColor:s.background},statusBarStyle:"dark",headerTintColor:s.grey900})},[i]),t.type==="transparent"?r(f,{children:o}):t.type==="none"?r(g,{children:o}):r(e,{children:o})}function g({children:o}){const t=n();return a(()=>{t.setOptions({headerShown:!1,headerLeft:()=>null,headerRight:()=>null,header:()=>null})},[t]),r(e,{children:o})}function f({children:o}){const t=n();return a(()=>{t.setOptions(u.screenOptions)},[t]),r(e,{children:o})}PageNavbar.Title=p,PageNavbar.AccessoryButtons=m,PageNavbar.AccessoryTextButton=c.RightTextButton,PageNavbar.AccessoryIconButton=c.RightIconButton,PageNavbar.TransparentScrollView=u.ScrollView,PageNavbar.AccessoryButton=l;

package/dist/esm/extensions/page-navbar/PageTitle.d.ts

@@ -0,0 +1,19 @@
+import { ReactNavigationNavbar } from '../../components/navbar';
+import { ComponentProps, ReactElement } from 'react';
+type TitleTxtProps = ComponentProps<typeof ReactNavigationNavbar.TitleTxt>;
+type HeaderTitleProps = Partial<ComponentProps<typeof ReactNavigationNavbar.HeaderTitle>>;
+interface BaseProps extends HeaderTitleProps {
+    withHeaderLeft?: boolean;
+}
+interface PageTitleProps extends BaseProps {
+    children: ReactElement;
+    color?: never;
+    fontWeight?: never;
+    preventFontScalingA11y?: never;
+}
+interface PageTitleStringProps extends BaseProps, TitleTxtProps {
+    children: string;
+}
+type Props = PageTitleProps | PageTitleStringProps;
+export declare function PageTitle({ children, withHeaderLeft, style, ...titleTxtProps }: Props): null;
+export {};

package/dist/esm/extensions/page-navbar/PageTitle.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{useNavigation as s}from"@granite-js/native/@react-navigation/native";import{ReactNavigationNavbar as n}from"../../components/navbar";import{useLayoutEffect as f}from"react";export function PageTitle({children:e,withHeaderLeft:t=!1,style:a,...i}){const o=s();return f(()=>{o.setOptions({headerBackVisible:!1,headerTitle:()=>r(n.HeaderTitle,{withHeaderLeft:t,style:a,children:typeof e=="string"?r(n.TitleTxt,{...i,children:e}):e})})},[e,o,a,i,t]),null}

package/dist/esm/extensions/page-navbar/components/TransparentNavigationBar/TransparentNavigation.d.ts

@@ -0,0 +1,4 @@
+export declare const TransparentNavigation: {
+    ScrollView: import("react").ForwardRefExoticComponent<Omit<import("@granite-js/react-native").IOComponentProps & import("react-native").ScrollViewProps & import("react").RefAttributes<import("react-native").ScrollView>, "ref"> & import("react").RefAttributes<import("react-native").ScrollView>>;
+    screenOptions: import("@react-navigation/native-stack").NativeStackNavigationOptions;
+};

package/dist/esm/extensions/page-navbar/components/TransparentNavigationBar/TransparentNavigation.js

@@ -0,0 +1 @@
+"use strict";import{TransparentNavigationScreenOptions as r}from"./TransparentNavigationScreenOptions";import{TransparentNavigationScrollView as n}from"./TransparentNavigationScrollView";export const TransparentNavigation={ScrollView:n,screenOptions:r};

package/dist/esm/extensions/page-navbar/components/TransparentNavigationBar/TransparentNavigationScreenOptions.d.ts

@@ -0,0 +1,46 @@
+import type { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
+/**
+ * @public
+ * @category Navigation
+ * @kind constant
+ * @name TransparentNavigationScreenOptions
+ * @description
+ * `TransparentNavigationScreenOptions`는 `react-navigation`의 `NativeStackNavigationOptions`을 사용하여 투명한 네비게이션 헤더를 쉽게 설정할 수 있도록 도와주는 옵션 객체예요. 이 옵션을 사용하면 네비게이션 헤더가 투명하게 설정되어, 배경 콘텐츠와 자연스럽게 어우러지는 UI를 구현할 수 있어요.
+ *
+ * 헤더의 스타일을 투명하게 만들기 위해 `headerTransparent: true` 속성과 `backgroundColor: 'transparent'` 스타일이 적용되어 있어, 헤더가 배경과 어우러지면서도 터치 영역과 같은 기본 기능은 유지돼요.
+ *
+ * 이 옵션은 `@react-navigation/native-stack`의 `NativeStackNavigationOptions` 타입을 기반으로 하며, 네비게이션 화면의 헤더를 투명하게 설정할 때 유용해요.
+ *
+ * @type {NativeStackNavigationOptions}
+ *
+ * @property {boolean} headerTransparent 네비게이션 헤더를 투명하게 설정하는 속성이에요. `true`로 설정되어 헤더가 투명하게 보이도록 해요.
+ * @property {object} headerStyle 네비게이션 헤더의 스타일을 정의해요. 여기서는 `backgroundColor: 'transparent'`로 설정되어, 배경색이 투명하게 적용돼요.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { createNativeStackNavigator } from '@react-navigation/native-stack';
+ * import { TransparentNavigationScreenOptions } from '@granite/tuba';
+ * import MyScreen from './MyScreen';
+ *
+ * const Stack = createNativeStackNavigator();
+ *
+ * function MyNavigator() {
+ *   return (
+ *     <Stack.Navigator screenOptions={TransparentNavigationScreenOptions}>
+ *       <Stack.Screen name="MyScreen" component={MyScreen} />
+ *     </Stack.Navigator>
+ *   );
+ * }
+ *
+ * export default MyNavigator;
+ * ```
+ *
+ * @remarks
+ * - 이 옵션은 `NativeStackNavigator`에 사용되어야 하며, 투명한 헤더를 적용해 네비게이션 바를 자연스럽게 보이도록 만들어요.
+ * - `headerTransparent: true`로 설정하면 헤더가 투명해지지만, 네비게이션 바는 그대로 유지되어 터치 가능하고, 뒤로 가기 버튼 같은 기본 기능도 유지돼요.
+ * - 배경과 헤더가 자연스럽게 어우러지는 화면을 만들고 싶을 때 유용하게 사용할 수 있어요.
+ *
+ * @see [react-navigation NativeStackNavigationOptions](https://reactnavigation.org/docs/native-stack-navigator/#options)
+ */
+export declare const TransparentNavigationScreenOptions: NativeStackNavigationOptions;

package/dist/esm/extensions/page-navbar/components/TransparentNavigationBar/TransparentNavigationScreenOptions.js

@@ -0,0 +1 @@
+"use strict";export const TransparentNavigationScreenOptions={headerTransparent:!0,headerStyle:{backgroundColor:"transparent"}};

package/dist/esm/extensions/page-navbar/components/TransparentNavigationBar/TransparentNavigationScrollView.d.ts

@@ -0,0 +1,55 @@
+import { ScrollView } from 'react-native';
+/**
+ * @private
+ * @category Components
+ * @kind component
+ * @name TransparentNavigationScrollView
+ * @description
+ * `TransparentNavigationScrollView`는 스크롤을 감지하여 네비게이션 헤더의 배경에 블러 효과를 적용하는 컴포넌트예요. 이 컴포넌트는 스크롤에 따라 헤더의 투명도를 애니메이션으로 조절하고, iOS의 `BlurView`를 활용하여 시각적으로 부드럽고 매끄러운 네비게이션 경험을 제공합니다.
+ *
+ * 이 컴포넌트는 `IOScrollView`를 기반으로 하며, 스크롤 이벤트를 감지해 헤더의 블러 효과를 동적으로 제어합니다. `scrollEventThrottle`을 통해 스크롤 이벤트 빈도를 설정할 수 있고, 블러 효과가 적용되지 않을 경우, 배경색을 `adaptive.background`로 설정할 수 있어요.
+ *
+ * `react-navigation`의 `headerBackground` 옵션에서 발생하는 블러 렌더링 문제를 우회하기 위해 스크롤 뷰 뒤에 `BlurView`를 추가해서 정상적으로 블러가 적용되도록 설계되었어요.
+ *
+ * @param {ComponentProps<typeof IOScrollView>} props `TransparentNavigationScrollView`에 전달할 속성들이에요. `IOScrollView`의 속성을 그대로 사용할 수 있어요.
+ * @param {number} [props.scrollEventThrottle=300] 스크롤 이벤트를 얼마나 자주 발생시킬지 설정하는 속성이에요. 단위는 milliseconds 이고 기본값은 `300ms`예요.
+ * @param {(e: NativeSyntheticEvent<NativeScrollEvent>) => void} [props.onScroll] 스크롤이 발생할 때 호출되는 콜백 함수예요. 스크롤의 위치에 따라 블러 효과를 동적으로 적용해요.
+ * @param {Ref<ScrollView>} ref `ScrollView` 인스턴스에 접근하기 위한 ref 객체에요. 이를 통해 `ScrollView`의 메서드에 접근할 수 있어요.
+ *
+ * @returns {JSX.Element} 스크롤 이벤트와 블러 효과를 포함한 `ScrollView`를 렌더링하는 JSX 엘리먼트를 반환해요. 헤더의 투명도가 스크롤에 따라 부드럽게 애니메이션 처리되며, 배경에 블러 효과가 추가됩니다.
+ *
+ * @example
+ * ```tsx
+ * import { TransparentNavigationScrollView } from '@granite/core';
+ * import { Text, View, StyleSheet } from 'react-native';
+ *
+ * function MyScrollViewComponent() {
+ *   return (
+ *     <TransparentNavigationScrollView>
+ *       <View style={styles.content}>
+ *         <Text>Scroll to see the Blur effect on the header!</Text>
+ *       </View>
+ *     </TransparentNavigationScrollView>
+ *   );
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   content: {
+ *     height: 1000,
+ *     justifyContent: 'center',
+ *     alignItems: 'center',
+ *   },
+ * });
+ *
+ * export default MyScrollViewComponent;
+ * ```
+ *
+ * @remarks
+ * - 이 컴포넌트는 `react-navigation`과 함께 사용될 때 헤더의 배경에 블러 효과를 자연스럽게 적용해요. 스크롤 시 헤더가 블러 처리되어 더욱 세련된 UI를 만들 수 있어요.
+ * - iOS에서만 블러 효과가 제대로 동작하며, Android에서는 블러가 적용되지 않을 수 있어요. 이 경우 배경색이 자동으로 `adaptive.background`로 설정돼요.
+ * - `scrollEventThrottle`을 통해 스크롤 이벤트 빈도를 제어할 수 있어요. 기본값은 300ms로, 적절한 이벤트 빈도를 설정해 성능을 조절할 수 있어요.
+ * - `BlurView`가 `ScrollView`보다 나중에 렌더링되어야 블러가 제대로 적용되므로, 컴포넌트 내에서 순서를 조정하여 이 문제를 해결했어요.
+ *
+ * @see [react-native BlurView Issue](https://github.com/Kureev/react-native-blur/issues/189)
+ */
+export declare const TransparentNavigationScrollView: import("react").ForwardRefExoticComponent<Omit<import("@granite-js/react-native").IOComponentProps & import("react-native").ScrollViewProps & import("react").RefAttributes<ScrollView>, "ref"> & import("react").RefAttributes<ScrollView>>;