@toss/tds-react-native 1.0.0

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PageNavbar=PageNavbar;const jsx_runtime_1=require("react/jsx-runtime"),native_1=require("@granite-js/native/@react-navigation/native"),colors_1=require("@toss-design-system/colors"),react_1=require("react"),navbar_1=require("../../components/navbar"),CompatAccessoryButton_1=require("./CompatAccessoryButton"),index_1=require("./components/TransparentNavigationBar/index"),PageAccessoryButtons_1=require("./PageAccessoryButtons"),PageTitle_1=require("./PageTitle");function PageNavbar({children:t,preference:e={type:"showAlways"}}){const n=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{n.setOptions({headerStyle:{backgroundColor:colors_1.colors.background},statusBarStyle:"dark",headerTintColor:colors_1.colors.grey900})},[n]),e.type==="transparent"?(0,jsx_runtime_1.jsx)(TransparentPage,{children:t}):e.type==="none"?(0,jsx_runtime_1.jsx)(NoneHeaderPage,{children:t}):(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:t})}function NoneHeaderPage({children:t}){const e=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{e.setOptions({headerShown:!1,headerLeft:()=>null,headerRight:()=>null,header:()=>null})},[e]),(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:t})}function TransparentPage({children:t}){const e=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{e.setOptions(index_1.TransparentNavigation.screenOptions)},[e]),(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:t})}PageNavbar.Title=PageTitle_1.PageTitle,PageNavbar.AccessoryButtons=PageAccessoryButtons_1.PageAccessoryButtons,PageNavbar.AccessoryTextButton=navbar_1.ReactNavigationNavbar.RightTextButton,PageNavbar.AccessoryIconButton=navbar_1.ReactNavigationNavbar.RightIconButton,PageNavbar.TransparentScrollView=index_1.TransparentNavigation.ScrollView,PageNavbar.AccessoryButton=CompatAccessoryButton_1.CompatAccessoryButton;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PageTitle=PageTitle;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 PageTitle({children:e,withHeaderLeft:t=!1,style:a,...r}){const i=(0,native_1.useNavigation)();return(0,react_1.useLayoutEffect)(()=>{i.setOptions({headerBackVisible:!1,headerTitle:()=>(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.HeaderTitle,{withHeaderLeft:t,style:a,children:typeof e=="string"?(0,jsx_runtime_1.jsx)(navbar_1.ReactNavigationNavbar.TitleTxt,{...r,children:e}):e})})},[e,i,a,r,t]),null}

package/dist/cjs/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/cjs/extensions/page-navbar/components/TransparentNavigationBar/TransparentNavigation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TransparentNavigation=void 0;const TransparentNavigationScreenOptions_1=require("./TransparentNavigationScreenOptions"),TransparentNavigationScrollView_1=require("./TransparentNavigationScrollView");exports.TransparentNavigation={ScrollView:TransparentNavigationScrollView_1.TransparentNavigationScrollView,screenOptions:TransparentNavigationScreenOptions_1.TransparentNavigationScreenOptions};

package/dist/cjs/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/cjs/extensions/page-navbar/components/TransparentNavigationBar/TransparentNavigationScreenOptions.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TransparentNavigationScreenOptions=void 0,exports.TransparentNavigationScreenOptions={headerTransparent:!0,headerStyle:{backgroundColor:"transparent"}};

package/dist/cjs/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>>;

package/dist/cjs/extensions/page-navbar/components/TransparentNavigationBar/TransparentNavigationScrollView.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TransparentNavigationScrollView=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("@granite-js/react-native"),elements_1=require("@granite-js/native/@react-navigation/elements"),easings_1=require("@toss-design-system/easings"),index_1=require("../../../../core/index"),react_1=require("react"),react_native_2=require("react-native");exports.TransparentNavigationScrollView=(0,react_1.forwardRef)(function({scrollEventThrottle:n,onScroll:i,...s},a){const r=(0,elements_1.useHeaderHeight)(),o=(0,index_1.useAdaptive)(),{colorPreference:c}=(0,index_1.useColorPreference)(),t=(0,react_1.useRef)(new react_native_2.Animated.Value(0)).current,u={opacity:t},l=(0,react_1.useCallback)(({isBlur:e})=>{react_native_2.Animated.spring(t,{toValue:e?1:0,useNativeDriver:!0,...easings_1.spring.quick}).start()},[t]);return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(react_native_1.IOScrollView,{...s,ref:a,scrollEventThrottle:n??300,onScroll:e=>{const d=e.nativeEvent.contentOffset.y>0;l({isBlur:d}),i?.(e)}}),(0,jsx_runtime_1.jsx)(react_native_2.Animated.View,{style:[react_native_2.StyleSheet.absoluteFill,{height:r},u],children:(0,jsx_runtime_1.jsx)(react_native_1.BlurView,{blurType:c,blurAmount:10,vibrancyEffect:!0,style:[{height:r,backgroundColor:react_native_1.BlurView.isSupported?void 0:o.background}]})})]})});

package/dist/cjs/extensions/page-navbar/components/TransparentNavigationBar/index.d.ts

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

package/dist/cjs/extensions/page-navbar/components/TransparentNavigationBar/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("./TransparentNavigation"),exports);

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

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

package/dist/cjs/extensions/page-navbar/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("./PageNavbar"),exports);

package/dist/cjs/extensions/partner-navigation/event.d.ts

@@ -0,0 +1,11 @@
+import { GraniteEvent, GraniteEventDefinition } from '@granite-js/react-native';
+type NavigationAccessoryEventResponse = {
+    id: string;
+};
+declare class NavigationAccessoryEvent extends GraniteEventDefinition<undefined, NavigationAccessoryEventResponse> {
+    name: "navigationAccessoryEvent";
+    remove(): void;
+    listener(options: undefined, onEvent: (response: NavigationAccessoryEventResponse) => void): void;
+}
+export declare const tdsEvent: GraniteEvent<NavigationAccessoryEvent>;
+export {};

package/dist/cjs/extensions/partner-navigation/event.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.tdsEvent=void 0;const react_native_1=require("@granite-js/react-native");class NavigationAccessoryEvent extends react_native_1.GraniteEventDefinition{name="navigationAccessoryEvent";remove(){}listener(t,n){}}exports.tdsEvent=new react_native_1.GraniteEvent([new NavigationAccessoryEvent]);

package/dist/cjs/extensions/partner-web-view-screen/PartnerWebViewScreen.d.ts

@@ -0,0 +1,12 @@
+import { WebView, WebViewProps } from '@granite-js/native/react-native-webview';
+import { TopNavigationProps } from '../top-navigation/TopNavigation';
+export type PartnerWebViewScreenProps = WebViewProps & {
+    header: TopNavigationProps & {
+        withBackButton?: boolean;
+    };
+};
+export declare const PartnerWebViewScreen: 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: TopNavigationProps & {
+        withBackButton?: boolean;
+    };
+} & import("react").RefAttributes<WebView<{}>>>;

package/dist/cjs/extensions/partner-web-view-screen/PartnerWebViewScreen.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PartnerWebViewScreen=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_native_webview_1=require("@granite-js/native/react-native-webview"),react_native_1=require("@granite-js/react-native"),react_1=require("react"),mergeRefs_1=require("../../utils/mergeRefs"),index_1=require("../navigation/index"),TopNavigation_1=require("../top-navigation/TopNavigation");exports.PartnerWebViewScreen=(0,react_1.forwardRef)(function({header:c,onNavigationStateChange:s,...u},v){const{withBackButton:l=!0,...f}=c,n=(0,react_1.useRef)(!1),r=(0,react_native_1.useBackEventContext)(),e=(0,react_1.useRef)(null),B=(0,mergeRefs_1.mergeRefs)(v,e),a=!r.hasBackEvent,i=r.onBack,o=(0,index_1.useBackOrCloseNavigation)(),g=(0,react_1.useCallback)(function(){if(!a){i();return}if(e.current!=null&&n.current){e.current?.goBack();return}o()},[a,i,o]);return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(TopNavigation_1.TopNavigation,{...f,children:(0,jsx_runtime_1.jsx)(index_1.NavigationLeft,{visible:l,children:(0,jsx_runtime_1.jsx)(index_1.NavigationBackButton,{onPress:g,canGoBack:!1})})}),(0,jsx_runtime_1.jsx)(react_native_webview_1.WebView,{ref:B,...u,onNavigationStateChange:t=>{n.current=t.canGoBack,s?.(t)},style:{flex:1}})]})});

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

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

package/dist/cjs/extensions/partner-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("./PartnerWebViewScreen"),exports);

package/dist/cjs/extensions/prevent-font-scaling/PreventFontScaling.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+interface Props {
+    /**
+     * @description 제한하고싶은 fontScale 값
+     */
+    limit: number;
+    children: ReactNode;
+}
+/**
+ * @name PreventFontScaling
+ * @description FontScale이 커지는것을 {limit} 이상 제한합니다.
+ * @example
+ * ```tsx
+ * // 160% 이상 커지지 않습니다.
+ * <PreventFontScaling limit={160}>
+ *  <Txt>Typography</Txt>
+ * </PreventFontScaling>
+ * ```
+ */
+export declare function PreventFontScaling({ limit, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/extensions/prevent-font-scaling/PreventFontScaling.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PreventFontScaling=PreventFontScaling;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),PreventFontScalingAndroid_1=require("./PreventFontScalingAndroid"),PreventFontScalingIos_1=require("./PreventFontScalingIos");function PreventFontScaling({limit:e,children:n}){return react_native_1.Platform.OS==="android"?(0,jsx_runtime_1.jsx)(PreventFontScalingAndroid_1.PreventFontScalingAndroid,{limit:e,children:n}):(0,jsx_runtime_1.jsx)(PreventFontScalingIos_1.PreventFontScalingIos,{limit:e,children:n})}

package/dist/cjs/extensions/prevent-font-scaling/PreventFontScalingAndroid.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface Props {
+    limit: number;
+    children: ReactNode;
+}
+export declare function PreventFontScalingAndroid({ limit, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/extensions/prevent-font-scaling/PreventFontScalingAndroid.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PreventFontScalingAndroid=PreventFontScalingAndroid;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core");function PreventFontScalingAndroid({limit:r,children:t}){const{typographyLevel:e}=(0,core_1.useTypographyTheme)(),o=typeof e=="number"?e:100;return(0,jsx_runtime_1.jsx)(core_1.TypographyThemeProvider,{typographyLevel:Math.min(o,r),children:t})}

package/dist/cjs/extensions/prevent-font-scaling/PreventFontScalingIos.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+interface Props {
+    limit: number;
+    children: ReactNode;
+}
+/**
+ * @name PreventFontScaling
+ * @desciption 더 큰텍스트의 최대 값을 지정합니다.
+ */
+export declare function PreventFontScalingIos({ limit, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/extensions/prevent-font-scaling/PreventFontScalingIos.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PreventFontScalingIos=PreventFontScalingIos;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),constants_1=require("../../constants"),core_1=require("../../core");function PreventFontScalingIos({limit:e,children:r}){const o=(0,react_native_1.useWindowDimensions)().fontScale,a=constants_1.iosWindowFontScaleToNormalizeFontScale[o],n=getLimitedNormalizeFontScale(Math.min(a,e));return(0,jsx_runtime_1.jsx)(core_1.TypographyThemeProvider,{typographyLevel:n,children:r})}function getLimitedNormalizeFontScale(e){return e<constants_1.iosTypographyLevelToNormalizeFontScale.xLarge?"Large":e<constants_1.iosTypographyLevelToNormalizeFontScale.xxLarge?"xLarge":e<constants_1.iosTypographyLevelToNormalizeFontScale.xxxLarge?"xxLarge":e<constants_1.iosTypographyLevelToNormalizeFontScale.A11y_Medium?"xxxLarge":e<constants_1.iosTypographyLevelToNormalizeFontScale.A11y_Large?"A11y_Medium":e<constants_1.iosTypographyLevelToNormalizeFontScale.A11y_xLarge?"A11y_Large":e<constants_1.iosTypographyLevelToNormalizeFontScale.A11y_xxLarge?"A11y_xLarge":e<constants_1.iosTypographyLevelToNormalizeFontScale.A11y_xxxLarge?"A11y_xxLarge":"A11y_xxxLarge"}

package/dist/cjs/extensions/prevent-font-scaling/index.d.ts

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

package/dist/cjs/extensions/prevent-font-scaling/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("./PreventFontScaling"),exports);

package/dist/cjs/extensions/tab-view/Gradient.d.ts

@@ -0,0 +1 @@
+export declare function Gradient(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/extensions/tab-view/Gradient.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(i,e,n,t){t===void 0&&(t=n);var r=Object.getOwnPropertyDescriptor(e,n);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(i,t,r)}:function(i,e,n,t){t===void 0&&(t=n),i[t]=e[n]},__setModuleDefault=Object.create?function(i,e){Object.defineProperty(i,"default",{enumerable:!0,value:e})}:function(i,e){i.default=e},__importStar=function(){var i=function(e){return i=Object.getOwnPropertyNames||function(n){var t=[];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[t.length]=r);return t},i(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var t=i(e),r=0;r<t.length;r++)t[r]!=="default"&&__createBinding(n,e,t[r]);return __setModuleDefault(n,e),n}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.Gradient=Gradient;const jsx_runtime_1=require("react/jsx-runtime"),react_native_svg_1=__importStar(require("@granite-js/native/react-native-svg")),colors_1=require("@toss-design-system/colors"),core_1=require("../../core");function Gradient(){const e=(0,core_1.useAdaptive)().background??colors_1.colors.background;return(0,jsx_runtime_1.jsxs)(react_native_svg_1.default,{width:WIDTH,height:HEIGHT,pointerEvents:"none",children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Defs,{children:(0,jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient,{id:GRADIENT_ID,children:[(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:0,stopColor:e,stopOpacity:0}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Stop,{offset:1,stopColor:e})]})}),(0,jsx_runtime_1.jsx)(react_native_svg_1.Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${GRADIENT_ID})`})]})}const GRADIENT_ID="tds-rn-bottom-cta-gradient",HEIGHT=52,WIDTH=17;

package/dist/cjs/extensions/tab-view/Indicator.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    fluid: boolean;
+}
+export declare function Indicator({ fluid }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/extensions/tab-view/Indicator.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Indicator=Indicator;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),react_native_1=require("react-native"),const_1=require("./const"),useIndicatorOpacityAnimation_1=require("./hooks/useIndicatorOpacityAnimation"),IndicatorContext_1=require("./IndicatorContext");function Indicator({fluid:e}){(0,useIndicatorOpacityAnimation_1.useIndicatorOpacityAnimation)();const n=(0,core_1.useAdaptive)(),{translateX:i,width:r,opacity:o}=(0,IndicatorContext_1.useIndicator)(),t=e?const_1.FLUID_INDICATOR_PADDING:const_1.INDICATOR_PADDING,a=react_native_1.Animated.add(i,t),c=react_native_1.Animated.add(r,-t*2);return(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[{backgroundColor:n.grey800},styles.indicator,{width:c,transform:[{translateX:a}],opacity:o}]})}const styles=react_native_1.StyleSheet.create({indicator:{height:2,borderRadius:1,bottom:1}});

package/dist/cjs/extensions/tab-view/IndicatorContext.d.ts

@@ -0,0 +1,13 @@
+import { PagerViewOnPageScrollEventData, PageScrollStateChangedNativeEventData } from '@granite-js/native/react-native-pager-view';
+import { MutableRefObject } from 'react';
+import { Animated, NativeSyntheticEvent } from 'react-native';
+export interface IndicatorContext {
+    width: Animated.AnimatedInterpolation<number>;
+    translateX: Animated.AnimatedInterpolation<number>;
+    opacity: Animated.Value;
+    isGestureSwiping?: MutableRefObject<boolean>;
+    scrollHandler: (e: NativeSyntheticEvent<PagerViewOnPageScrollEventData>) => void;
+    scrollStateChangedHandler: (e: NativeSyntheticEvent<PageScrollStateChangedNativeEventData>) => void;
+}
+export declare const IndicatorContext: import("react").Context<IndicatorContext>;
+export declare function useIndicator(): IndicatorContext;

package/dist/cjs/extensions/tab-view/IndicatorContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.IndicatorContext=void 0,exports.useIndicator=useIndicator;const react_1=require("react"),react_native_1=require("react-native"),noopAnimatedValue=new react_native_1.Animated.Value(0);exports.IndicatorContext=(0,react_1.createContext)({width:noopAnimatedValue,translateX:noopAnimatedValue,opacity:noopAnimatedValue,scrollHandler:()=>{},scrollStateChangedHandler:()=>{}});function useIndicator(){const t=(0,react_1.useContext)(exports.IndicatorContext);if(t==null)throw new Error("useIndicator \uB294 IndicatorContext \uC548\uC5D0\uC11C \uC0AC\uC6A9\uAC00\uB2A5\uD569\uB2C8\uB2E4. IndicatorContext \uB97C \uCD94\uAC00\uD574\uC8FC\uC138\uC694.");return t}

package/dist/cjs/extensions/tab-view/IndicatorProvider.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function IndicatorProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/extensions/tab-view/IndicatorProvider.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.IndicatorProvider=IndicatorProvider;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),useIndicatorInterpolationRanges_1=require("./hooks/useIndicatorInterpolationRanges"),usePagerViewScrollHandler_1=require("./hooks/usePagerViewScrollHandler"),useScrollStateChangedHandler_1=require("./hooks/useScrollStateChangedHandler"),IndicatorContext_1=require("./IndicatorContext"),TabsContext_1=require("./TabsContext");function IndicatorProvider({children:n}){const{initialTabIndex:r}=(0,TabsContext_1.useTabs)(),{isGestureSwipingRef:a,scrollStateChangedHandler:o}=(0,useScrollStateChangedHandler_1.useScrollStateChangedHandler)(),i=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,{position:s,offset:c,scrollHandler:u}=(0,usePagerViewScrollHandler_1.useScrollHandler)({initialPosition:r}),{inputRange:e,widthOutputRange:l,translateXOutputRange:d}=(0,useIndicatorInterpolationRanges_1.useIndicatorInterpolationRanges)(),t=react_native_1.Animated.add(s,c),p=t.interpolate({inputRange:e,outputRange:l,extrapolate:"clamp"}),g=t.interpolate({inputRange:e,outputRange:d,extrapolate:"clamp"});return(0,jsx_runtime_1.jsx)(IndicatorContext_1.IndicatorContext.Provider,{value:{width:p,translateX:g,opacity:i,isGestureSwiping:a,scrollHandler:u,scrollStateChangedHandler:o},children:n})}

package/dist/cjs/extensions/tab-view/TabItem.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import { TabValue } from './TabsContext';
+interface TabItemProps {
+    redBean?: boolean;
+    value: TabValue;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    tabIndex?: number;
+    onPress?: PressableProps['onPress'];
+}
+declare function TabItem({ redBean, value, children, style, onPress, tabIndex }: TabItemProps): import("react/jsx-runtime").JSX.Element;
+export { TabItem };

package/dist/cjs/extensions/tab-view/TabItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TabItem=TabItem;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../../components/txt"),react_1=require("react"),react_native_1=require("react-native"),const_1=require("./const"),Gradient_1=require("./Gradient"),TabsContext_1=require("./TabsContext");function TabItem({redBean:d=!1,value:t,children:_,style:g,onPress:s,tabIndex:e}){const{fluid:o,value:a,onChange:l,pagerViewRef:n,setTabWidthMap:c}=(0,TabsContext_1.useTabs)(),r=(0,react_1.useMemo)(()=>t===a,[t,a]),u=(0,core_1.useAdaptive)(),h=(0,react_1.useCallback)(i=>{s?.(i),l?.(t,e),e!=null&&n?.current!=null&&n.current.setPage(e)},[l,s,n,e,t]);return(0,jsx_runtime_1.jsxs)(react_native_1.Pressable,{accessibilityRole:"tab",accessibilityState:{selected:r},onPress:h,style:[styles.container,o?styles.fluidContainer:{},g],onLayout:i=>{const p=i.nativeEvent.layout;c!=null&&e!=null&&c(y=>({...y,[e]:p}))},children:[(0,jsx_runtime_1.jsx)(txt_1.Txt,{numberOfLines:1,ellipsizeMode:"clip",typography:"st9",fontWeight:r?"bold":"semiBold",color:r?u.grey800:u.grey600,children:_}),o?null:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.gradientContainer,children:(0,jsx_runtime_1.jsx)(Gradient_1.Gradient,{})}),d?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.redBean}):null]})}const MIN_WIDTH=40,styles=react_native_1.StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:12,minWidth:MIN_WIDTH,marginHorizontal:const_1.TAB_ITEM_HORIZONTAL_MARGIN},fluidContainer:{marginHorizontal:const_1.FLUID_TAB_ITEM_HORIZONTAL_MARGIN},gradientContainer:{position:"absolute",top:0,right:-1,height:"100%"},redBean:{position:"absolute",top:4,right:0,width:6,height:6,borderRadius:3,backgroundColor:"#f44336"}});

package/dist/cjs/extensions/tab-view/TabView.d.ts

@@ -0,0 +1,2 @@
+import { ViewProps } from 'react-native';
+export declare function TabView(props: ViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/extensions/tab-view/TabView.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TabView=TabView;const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native");function TabView(e){return(0,jsx_runtime_1.jsx)(react_native_1.View,{...e})}

package/dist/cjs/extensions/tab-view/Tabs.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { TabsList } from './TabsList';
+import { TabsViewList } from './TabsViews';
+import { TabView } from './TabView';
+interface Props {
+    fluid: boolean;
+    defaultValue: string;
+    value?: string;
+    children: ReactNode;
+    onChange?: (value: string, tabIndex: number) => void;
+}
+declare function Tabs({ fluid, defaultValue, value: _value, children, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace Tabs {
+    var TabList: typeof TabsList;
+    var TabItem: typeof import("./TabItem").TabItem;
+    var ViewList: typeof TabsViewList;
+    var View: typeof TabView;
+}
+export { Tabs };

package/dist/cjs/extensions/tab-view/Tabs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tabs=Tabs;const jsx_runtime_1=require("react/jsx-runtime"),utils_1=require("../../utils"),react_1=require("react"),IndicatorProvider_1=require("./IndicatorProvider"),TabItem_1=require("./TabItem"),TabsContext_1=require("./TabsContext"),TabsList_1=require("./TabsList"),TabsViews_1=require("./TabsViews"),TabView_1=require("./TabView"),getTabData_1=require("./utils/getTabData");function Tabs({fluid:b,defaultValue:r,value:l,children:a,onChange:o}){const[T,u]=(0,utils_1.useControlled)({controlledValue:l,defaultValue:r}),d=(0,react_1.useRef)(null),[x,I]=(0,react_1.useState)({}),s=(0,react_1.useMemo)(()=>(0,getTabData_1.getTabData)(a),[a]),c=s.findIndex(e=>e.value===r),[_,v]=(0,react_1.useState)(c),n=(0,react_1.useCallback)((e,t)=>{o?.(e,t),u(e),v(t)},[o,u]),V=(0,react_1.useCallback)(e=>{const t=e.nativeEvent.position,i=s.find(q=>q.tabIndex===t);i!=null&&n(i.value,i.tabIndex)},[n,s]);return(0,jsx_runtime_1.jsx)(TabsContext_1.TabsContext.Provider,{value:{fluid:b,value:T,tabLayoutMap:x,setTabWidthMap:I,onChange:n,onPageSelected:V,initialTabIndex:c,pagerViewRef:d,tabIndex:_},children:(0,jsx_runtime_1.jsx)(IndicatorProvider_1.IndicatorProvider,{children:a})})}Tabs.TabList=TabsList_1.TabsList,Tabs.TabItem=TabItem_1.TabItem,Tabs.ViewList=TabsViews_1.TabsViewList,Tabs.View=TabView_1.TabView;

package/dist/cjs/extensions/tab-view/TabsContext.d.ts

@@ -0,0 +1,24 @@
+import PagerView from '@granite-js/native/react-native-pager-view';
+import { Dispatch, RefObject, SetStateAction } from 'react';
+import { LayoutRectangle } from 'react-native/types';
+export type TabValue = string;
+export type TabIndex = number;
+export type TabWidthMap = Record<TabIndex, LayoutRectangle>;
+export interface TabsContext {
+    fluid: boolean;
+    value?: TabValue;
+    /**
+     * tabWidth 를 tabIndex 로 관리합니다.
+     * 탭들의 각각 width 를 저장하고, 이를 이용해 indicator 에서 활용합니다.
+     */
+    tabLayoutMap?: TabWidthMap;
+    tabContainerWidth?: number;
+    setTabWidthMap?: Dispatch<SetStateAction<TabWidthMap>>;
+    onChange?: (value: TabValue, tabIndex: TabIndex) => void;
+    pagerViewRef?: RefObject<PagerView> | null;
+    initialTabIndex?: number;
+    tabIndex?: number;
+    onPageSelected?: (event: any) => void;
+}
+export declare const TabsContext: import("react").Context<TabsContext>;
+export declare function useTabs(): TabsContext;

package/dist/cjs/extensions/tab-view/TabsContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TabsContext=void 0,exports.useTabs=useTabs;const react_1=require("react");exports.TabsContext=(0,react_1.createContext)({fluid:!1,value:void 0,tabLayoutMap:{},onChange:()=>{},initialTabIndex:void 0,onPageSelected:()=>{},pagerViewRef:null});function useTabs(){const e=(0,react_1.useContext)(exports.TabsContext);if(e==null)throw new Error("useTabs \uB294 TabsContext \uC548\uC5D0\uC11C \uC0AC\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4. TabsContext \uB97C \uCD94\uAC00\uD574\uC8FC\uC138\uC694.");return e}

package/dist/cjs/extensions/tab-view/TabsList.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+interface Props extends ViewProps {
+    children: ReactNode;
+}
+export declare function TabsList({ children, style, ...viewProps }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/extensions/tab-view/TabsList.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TabsList=TabsList;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),react_1=require("react"),react_native_1=require("react-native"),const_1=require("./const"),Indicator_1=require("./Indicator"),TabsContext_1=require("./TabsContext");function TabsList({children:r,style:s,...o}){const{fluid:e}=(0,TabsContext_1.useTabs)(),n=(0,core_1.useAdaptive)(),i={...styles.border,borderBottomColor:n.grey200};return(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[e?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[i,styles.fluidBorder]}):null,(0,jsx_runtime_1.jsx)(react_native_1.ScrollView,{horizontal:e,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.itemList,s],accessibilityRole:"tablist",...o,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.padding,e?styles.fluidPadding:{}]}),react_1.Children.map(r,(t,l)=>{if((0,react_1.isValidElement)(t))return(0,react_1.cloneElement)(t,{...t.props,tabIndex:l})}),e?null:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.padding})]}),e?null:(0,jsx_runtime_1.jsx)(react_native_1.View,{style:i}),(0,jsx_runtime_1.jsx)(Indicator_1.Indicator,{fluid:e})]})})]})}const styles=react_native_1.StyleSheet.create({padding:{width:const_1.TAB_LIST_CONTAINER_PADDING,height:1},fluidPadding:{width:const_1.TAB_LIST_FLUID_CONTAINER_PADDING,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth},fluidBorder:{position:"absolute",bottom:2}});

package/dist/cjs/extensions/tab-view/TabsViews.d.ts

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

package/dist/cjs/extensions/tab-view/TabsViews.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TabsViewList=TabsViewList;const react_native_1=require("react-native");function TabsViewList({children:e}){return null}const styles=react_native_1.StyleSheet.create({pagerView:{flex:1}});

package/dist/cjs/extensions/tab-view/const.d.ts

@@ -0,0 +1,6 @@
+export declare const TAB_ITEM_HORIZONTAL_MARGIN = 0;
+export declare const FLUID_TAB_ITEM_HORIZONTAL_MARGIN = 10;
+export declare const TAB_LIST_CONTAINER_PADDING: number;
+export declare const TAB_LIST_FLUID_CONTAINER_PADDING: number;
+export declare const INDICATOR_PADDING = 10;
+export declare const FLUID_INDICATOR_PADDING = 0;

package/dist/cjs/extensions/tab-view/const.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FLUID_INDICATOR_PADDING=exports.INDICATOR_PADDING=exports.TAB_LIST_FLUID_CONTAINER_PADDING=exports.TAB_LIST_CONTAINER_PADDING=exports.FLUID_TAB_ITEM_HORIZONTAL_MARGIN=exports.TAB_ITEM_HORIZONTAL_MARGIN=void 0,exports.TAB_ITEM_HORIZONTAL_MARGIN=0,exports.FLUID_TAB_ITEM_HORIZONTAL_MARGIN=10,exports.TAB_LIST_CONTAINER_PADDING=20-exports.TAB_ITEM_HORIZONTAL_MARGIN,exports.TAB_LIST_FLUID_CONTAINER_PADDING=14-exports.FLUID_TAB_ITEM_HORIZONTAL_MARGIN,exports.INDICATOR_PADDING=10,exports.FLUID_INDICATOR_PADDING=0;

package/dist/cjs/extensions/tab-view/hooks/useIndicatorInterpolationRanges.d.ts

@@ -0,0 +1,5 @@
+export declare function useIndicatorInterpolationRanges(): {
+    inputRange: number[];
+    widthOutputRange: number[];
+    translateXOutputRange: number[];
+};

package/dist/cjs/extensions/tab-view/hooks/useIndicatorInterpolationRanges.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useIndicatorInterpolationRanges=useIndicatorInterpolationRanges;const react_1=require("react"),TabsContext_1=require("../TabsContext"),getIndicatorInterpolateOutput_1=require("../utils/getIndicatorInterpolateOutput");function useIndicatorInterpolationRanges(){const{fluid:t,tabLayoutMap:u}=(0,TabsContext_1.useTabs)(),e=(0,react_1.useMemo)(()=>{const n=Object.values(u??{}).map(r=>r.width);return withDefaultRange(n)},[u]),o=(0,react_1.useMemo)(()=>withDefaultRange(e.map((n,r)=>r)),[e]),a=(0,react_1.useMemo)(()=>{const n=(0,getIndicatorInterpolateOutput_1.getIndicatorInterpolateOutput)(e,t);return withDefaultRange(n)},[t,e]);return{inputRange:o,widthOutputRange:e,translateXOutputRange:a}}function withDefaultRange(t){return t.length<2?[0,1]:t}

package/dist/cjs/extensions/tab-view/hooks/useIndicatorOpacityAnimation.d.ts

@@ -0,0 +1 @@
+export declare function useIndicatorOpacityAnimation(): void;

package/dist/cjs/extensions/tab-view/hooks/useIndicatorOpacityAnimation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useIndicatorOpacityAnimation=useIndicatorOpacityAnimation;const easings_1=require("@toss-design-system/easings"),react_1=require("react"),react_native_1=require("react-native"),IndicatorContext_1=require("../IndicatorContext");function useIndicatorOpacityAnimation(){const{opacity:e,isGestureSwiping:t}=(0,IndicatorContext_1.useIndicator)();(0,react_1.useEffect)(()=>{t?.current!==!0&&react_native_1.Animated.sequence([react_native_1.Animated.spring(e,{toValue:1,...easings_1.spring.slow,useNativeDriver:!1})]).start()},[t,e])}

package/dist/cjs/extensions/tab-view/hooks/usePagerViewScrollHandler.d.ts

@@ -0,0 +1,8 @@
+import { Animated } from 'react-native';
+export declare function useScrollHandler({ initialPosition }?: {
+    initialPosition?: number;
+}): {
+    position: Animated.Value;
+    offset: Animated.Value;
+    scrollHandler: (...args: any[]) => void;
+};

package/dist/cjs/extensions/tab-view/hooks/usePagerViewScrollHandler.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useScrollHandler=useScrollHandler;const react_1=require("react"),react_native_1=require("react-native");function useScrollHandler({initialPosition:r=0}={}){const e=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,t=(0,react_1.useRef)(new react_native_1.Animated.Value(r)).current,n=(0,react_1.useMemo)(()=>react_native_1.Animated.event([{nativeEvent:{offset:e,position:t}}],{useNativeDriver:!1}),[e,t]);return{position:t,offset:e,scrollHandler:n}}