@toss/tds-react-native 1.0.0

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

@@ -0,0 +1 @@
+"use strict";import{jsx as t,Fragment as g,jsxs as v}from"react/jsx-runtime";import{IOScrollView as y,BlurView as i}from"@granite-js/react-native";import{useHeaderHeight as S}from"@granite-js/native/@react-navigation/elements";import{spring as b}from"@toss-design-system/easings";import{useAdaptive as h,useColorPreference as w}from"../../../../core/index";import{forwardRef as V,useCallback as x,useRef as j}from"react";import{Animated as o,StyleSheet as k}from"react-native";export const TransparentNavigationScrollView=V(function({scrollEventThrottle:a,onScroll:s,...l},c){const n=S(),u=h(),{colorPreference:m}=w(),r=j(new o.Value(0)).current,f={opacity:r},p=x(({isBlur:e})=>{o.spring(r,{toValue:e?1:0,useNativeDriver:!0,...b.quick}).start()},[r]);return v(g,{children:[t(y,{...l,ref:c,scrollEventThrottle:a??300,onScroll:e=>{const d=e.nativeEvent.contentOffset.y>0;p({isBlur:d}),s?.(e)}}),t(o.View,{style:[k.absoluteFill,{height:n},f],children:t(i,{blurType:m,blurAmount:10,vibrancyEffect:!0,style:[{height:n,backgroundColor:i.isSupported?void 0:u.background}]})})]})});

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

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

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

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

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

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

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

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

package/dist/esm/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/esm/extensions/partner-navigation/event.js

@@ -0,0 +1 @@
+"use strict";import{GraniteEvent as e,GraniteEventDefinition as n}from"@granite-js/react-native";class t extends n{name="navigationAccessoryEvent";remove(){}listener(i,s){}}export const tdsEvent=new e([new t]);

package/dist/esm/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/esm/extensions/partner-web-view-screen/PartnerWebViewScreen.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,Fragment as v,jsxs as h}from"react/jsx-runtime";import{WebView as w}from"@granite-js/native/react-native-webview";import{useBackEventContext as b}from"@granite-js/react-native";import{forwardRef as d,useCallback as x,useRef as s}from"react";import{mergeRefs as C}from"../../utils/mergeRefs";import{NavigationBackButton as N,NavigationLeft as j,useBackOrCloseNavigation as G}from"../navigation/index";import{TopNavigation as P}from"../top-navigation/TopNavigation";export const PartnerWebViewScreen=d(function({header:f,onNavigationStateChange:u,...B},l){const{withBackButton:k=!0,...m}=f,o=s(!1),r=b(),n=s(null),g=C(l,n),a=!r.hasBackEvent,c=r.onBack,i=G(),p=x(function(){if(!a){c();return}if(n.current!=null&&o.current){n.current?.goBack();return}i()},[a,c,i]);return h(v,{children:[e(P,{...m,children:e(j,{visible:k,children:e(N,{onPress:p,canGoBack:!1})})}),e(w,{ref:g,...B,onNavigationStateChange:t=>{o.current=t.canGoBack,u?.(t)},style:{flex:1}})]})});

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

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

package/dist/esm/extensions/partner-web-view-screen/index.js

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

package/dist/esm/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/esm/extensions/prevent-font-scaling/PreventFontScaling.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{Platform as t}from"react-native";import{PreventFontScalingAndroid as i}from"./PreventFontScalingAndroid";import{PreventFontScalingIos as m}from"./PreventFontScalingIos";export function PreventFontScaling({limit:r,children:o}){return t.OS==="android"?n(i,{limit:r,children:o}):n(m,{limit:r,children:o})}

package/dist/esm/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/esm/extensions/prevent-font-scaling/PreventFontScalingAndroid.js

@@ -0,0 +1 @@
+"use strict";import{jsx as p}from"react/jsx-runtime";import{TypographyThemeProvider as t,useTypographyTheme as y}from"../../core";export function PreventFontScalingAndroid({limit:r,children:o}){const{typographyLevel:e}=y();return p(t,{typographyLevel:Math.min(typeof e=="number"?e:100,r),children:o})}

package/dist/esm/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/esm/extensions/prevent-font-scaling/PreventFontScalingIos.js

@@ -0,0 +1 @@
+"use strict";import{jsx as x}from"react/jsx-runtime";import{useWindowDimensions as g}from"react-native";import{iosTypographyLevelToNormalizeFontScale as e,iosWindowFontScaleToNormalizeFontScale as L}from"../../constants";import{TypographyThemeProvider as i}from"../../core";export function PreventFontScalingIos({limit:r,children:o}){const n=g().fontScale,a=L[n],t=y(Math.min(a,r));return x(i,{typographyLevel:t,children:o})}function y(r){return r<e.xLarge?"Large":r<e.xxLarge?"xLarge":r<e.xxxLarge?"xxLarge":r<e.A11y_Medium?"xxxLarge":r<e.A11y_Large?"A11y_Medium":r<e.A11y_xLarge?"A11y_Large":r<e.A11y_xxLarge?"A11y_xLarge":r<e.A11y_xxxLarge?"A11y_xxLarge":"A11y_xxxLarge"}

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

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

package/dist/esm/extensions/prevent-font-scaling/index.js

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

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

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

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

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import e,{Defs as n,LinearGradient as a,Rect as c,Stop as s}from"@granite-js/native/react-native-svg";import{colors as d}from"@toss-design-system/colors";import{useAdaptive as p}from"../../core";export function Gradient(){const t=p().background??d.background;return r(e,{width:l,height:f,pointerEvents:"none",children:[o(n,{children:r(a,{id:i,children:[o(s,{offset:0,stopColor:t,stopOpacity:0}),o(s,{offset:1,stopColor:t})]})}),o(c,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${i})`})]})}const i="tds-rn-bottom-cta-gradient",f=52,l=17;

package/dist/esm/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/esm/extensions/tab-view/Indicator.js

@@ -0,0 +1 @@
+"use strict";import{jsx as c}from"react/jsx-runtime";import{useAdaptive as m}from"../../core";import{Animated as t,StyleSheet as p}from"react-native";import{FLUID_INDICATOR_PADDING as f,INDICATOR_PADDING as I}from"./const";import{useIndicatorOpacityAnimation as l}from"./hooks/useIndicatorOpacityAnimation";import{useIndicator as u}from"./IndicatorContext";export function Indicator({fluid:i}){l();const r=m(),{translateX:a,width:n,opacity:e}=u(),o=i?f:I,d=t.add(a,o),s=t.add(n,-o*2);return c(t.View,{style:[{backgroundColor:r.grey800},A.indicator,{width:s,transform:[{translateX:d}],opacity:e}]})}const A=p.create({indicator:{height:2,borderRadius:1,bottom:1}});

package/dist/esm/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/esm/extensions/tab-view/IndicatorContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as n,useContext as e}from"react";import{Animated as r}from"react-native";const t=new r.Value(0);export const IndicatorContext=n({width:t,translateX:t,opacity:t,scrollHandler:()=>{},scrollStateChangedHandler:()=>{}});export function useIndicator(){const o=e(IndicatorContext);if(o==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 o}

package/dist/esm/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/esm/extensions/tab-view/IndicatorProvider.js

@@ -0,0 +1 @@
+"use strict";import{jsx as g}from"react/jsx-runtime";import{useRef as R}from"react";import{Animated as o}from"react-native";import{useIndicatorInterpolationRanges as x}from"./hooks/useIndicatorInterpolationRanges";import{useScrollHandler as S}from"./hooks/usePagerViewScrollHandler";import{useScrollStateChangedHandler as h}from"./hooks/useScrollStateChangedHandler";import{IndicatorContext as w}from"./IndicatorContext";import{useTabs as I}from"./TabsContext";export function IndicatorProvider({children:n}){const{initialTabIndex:r}=I(),{isGestureSwipingRef:a,scrollStateChangedHandler:i}=h(),s=R(new o.Value(0)).current,{position:p,offset:l,scrollHandler:u}=S({initialPosition:r}),{inputRange:t,widthOutputRange:c,translateXOutputRange:m}=x(),e=o.add(p,l),d=e.interpolate({inputRange:t,outputRange:c,extrapolate:"clamp"}),f=e.interpolate({inputRange:t,outputRange:m,extrapolate:"clamp"});return g(w.Provider,{value:{width:d,translateX:f,opacity:s,isGestureSwiping:a,scrollHandler:u,scrollStateChangedHandler:i},children:n})}

package/dist/esm/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/esm/extensions/tab-view/TabItem.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i,jsxs as b}from"react/jsx-runtime";import{useAdaptive as C}from"../../core";import{Txt as M}from"../../components/txt";import{useCallback as A,useMemo as R}from"react";import{Pressable as I,StyleSheet as j,View as p}from"react-native";import{FLUID_TAB_ITEM_HORIZONTAL_MARGIN as B,TAB_ITEM_HORIZONTAL_MARGIN as H}from"./const";import{Gradient as L}from"./Gradient";import{useTabs as N}from"./TabsContext";function O({redBean:f=!1,value:t,children:g,style:h,onPress:l,tabIndex:e}){const{fluid:a,value:c,onChange:u,pagerViewRef:r,setTabWidthMap:m}=N(),n=R(()=>t===c,[t,c]),d=C(),y=A(s=>{l?.(s),u?.(t,e),e!=null&&r?.current!=null&&r.current.setPage(e)},[u,l,r,e,t]);return b(I,{accessibilityRole:"tab",accessibilityState:{selected:n},onPress:y,style:[o.container,a?o.fluidContainer:{},h],onLayout:s=>{const T=s.nativeEvent.layout;m!=null&&e!=null&&m(_=>({..._,[e]:T}))},children:[i(M,{numberOfLines:1,ellipsizeMode:"clip",typography:"st9",fontWeight:n?"bold":"semiBold",color:n?d.grey800:d.grey600,children:g}),a?null:i(p,{style:o.gradientContainer,children:i(L,{})}),f?i(p,{style:o.redBean}):null]})}const V=40,o=j.create({container:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:12,minWidth:V,marginHorizontal:H},fluidContainer:{marginHorizontal:B},gradientContainer:{position:"absolute",top:0,right:-1,height:"100%"},redBean:{position:"absolute",top:4,right:0,width:6,height:6,borderRadius:3,backgroundColor:"#f44336"}});export{O as TabItem};

package/dist/esm/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/esm/extensions/tab-view/TabView.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{View as i}from"react-native";export function TabView(r){return o(i,{...r})}

package/dist/esm/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/esm/extensions/tab-view/Tabs.js

@@ -0,0 +1 @@
+"use strict";import{jsx as d}from"react/jsx-runtime";import{useControlled as C}from"../../utils";import{useCallback as f,useMemo as h,useRef as D,useState as p}from"react";import{IndicatorProvider as M}from"./IndicatorProvider";import{TabItem as P}from"./TabItem";import{TabsContext as j}from"./TabsContext";import{TabsList as R}from"./TabsList";import{TabsViewList as S}from"./TabsViews";import{TabView as k}from"./TabView";import{getTabData as y}from"./utils/getTabData";function e({fluid:u,defaultValue:s,value:c,children:a,onChange:m}){const[T,l]=C({controlledValue:c,defaultValue:s}),x=D(null),[I,v]=p({}),n=h(()=>y(a),[a]),b=n.findIndex(t=>t.value===s),[V,g]=p(b),i=f((t,o)=>{m?.(t,o),l(t),g(o)},[m,l]),w=f(t=>{const o=t.nativeEvent.position,r=n.find(L=>L.tabIndex===o);r!=null&&i(r.value,r.tabIndex)},[i,n]);return d(j.Provider,{value:{fluid:u,value:T,tabLayoutMap:I,setTabWidthMap:v,onChange:i,onPageSelected:w,initialTabIndex:b,pagerViewRef:x,tabIndex:V},children:d(M,{children:a})})}e.TabList=R,e.TabItem=P,e.ViewList=S,e.View=k;export{e as Tabs};

package/dist/esm/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/esm/extensions/tab-view/TabsContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as t,useContext as n}from"react";export const TabsContext=t({fluid:!1,value:void 0,tabLayoutMap:{},onChange:()=>{},initialTabIndex:void 0,onPageSelected:()=>{},pagerViewRef:null});export function useTabs(){const e=n(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/esm/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/esm/extensions/tab-view/TabsList.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useAdaptive as h}from"../../core";import{Children as p,cloneElement as u,isValidElement as b}from"react";import{ScrollView as y,StyleSheet as s,View as t}from"react-native";import{TAB_LIST_CONTAINER_PADDING as I,TAB_LIST_FLUID_CONTAINER_PADDING as w}from"./const";import{Indicator as _}from"./Indicator";import{useTabs as g}from"./TabsContext";export function TabsList({children:n,style:a,...m}){const{fluid:i}=g(),c=h(),d={...r.border,borderBottomColor:c.grey200};return l(t,{children:[i?e(t,{style:[d,r.fluidBorder]}):null,e(y,{horizontal:i,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:l(t,{children:[l(t,{style:[r.itemList,a],accessibilityRole:"tablist",...m,children:[e(t,{style:[r.padding,i?r.fluidPadding:{}]}),p.map(n,(o,f)=>{if(b(o))return u(o,{...o.props,tabIndex:f})}),i?null:e(t,{style:r.padding})]}),i?null:e(t,{style:d}),e(_,{fluid:i})]})})]})}const r=s.create({padding:{width:I,height:1},fluidPadding:{width:w,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:s.hairlineWidth},fluidBorder:{position:"absolute",bottom:2}});

package/dist/esm/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/esm/extensions/tab-view/TabsViews.js

@@ -0,0 +1 @@
+"use strict";import{StyleSheet as e}from"react-native";export function TabsViewList({children:t}){return null}const i=e.create({pagerView:{flex:1}});

package/dist/esm/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/esm/extensions/tab-view/const.js

@@ -0,0 +1 @@
+"use strict";export const TAB_ITEM_HORIZONTAL_MARGIN=0,FLUID_TAB_ITEM_HORIZONTAL_MARGIN=10,TAB_LIST_CONTAINER_PADDING=20,TAB_LIST_FLUID_CONTAINER_PADDING=4,INDICATOR_PADDING=10,FLUID_INDICATOR_PADDING=0;

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

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

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

@@ -0,0 +1 @@
+"use strict";import{useMemo as r}from"react";import{useTabs as p}from"../TabsContext";import{getIndicatorInterpolateOutput as c}from"../utils/getIndicatorInterpolateOutput";export function useIndicatorInterpolationRanges(){const{fluid:t,tabLayoutMap:u}=p(),n=r(()=>{const e=Object.values(u??{}).map(o=>o.width);return a(e)},[u]),s=r(()=>a(n.map((e,o)=>o)),[n]),i=r(()=>{const e=c(n,t);return a(e)},[t,n]);return{inputRange:s,widthOutputRange:n,translateXOutputRange:i}}function a(t){return t.length<2?[0,1]:t}

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

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

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

@@ -0,0 +1 @@
+"use strict";import{spring as e}from"@toss-design-system/easings";import{useEffect as o}from"react";import{Animated as i}from"react-native";import{useIndicator as n}from"../IndicatorContext";export function useIndicatorOpacityAnimation(){const{opacity:r,isGestureSwiping:t}=n();o(()=>{t?.current!==!0&&i.sequence([i.spring(r,{toValue:1,...e.slow,useNativeDriver:!1})]).start()},[t,r])}

package/dist/esm/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/esm/extensions/tab-view/hooks/usePagerViewScrollHandler.js

@@ -0,0 +1 @@
+"use strict";import{useMemo as u,useRef as t}from"react";import{Animated as r}from"react-native";export function useScrollHandler({initialPosition:o=0}={}){const e=t(new r.Value(0)).current,n=t(new r.Value(o)).current,s=u(()=>r.event([{nativeEvent:{offset:e,position:n}}],{useNativeDriver:!1}),[e,n]);return{position:n,offset:e,scrollHandler:s}}

package/dist/esm/extensions/tab-view/hooks/useScrollStateChangedHandler.d.ts

@@ -0,0 +1,6 @@
+import { PageScrollStateChangedNativeEventData } from '@granite-js/native/react-native-pager-view';
+import { NativeSyntheticEvent } from 'react-native';
+export declare function useScrollStateChangedHandler(): {
+    isGestureSwipingRef: import("react").MutableRefObject<boolean>;
+    scrollStateChangedHandler: (e: NativeSyntheticEvent<PageScrollStateChangedNativeEventData>) => void;
+};

package/dist/esm/extensions/tab-view/hooks/useScrollStateChangedHandler.js

@@ -0,0 +1 @@
+"use strict";import{useCallback as a,useRef as n}from"react";export function useScrollStateChangedHandler(){const e=n(!1),r=a(t=>{t.nativeEvent.pageScrollState==="dragging"?e.current=!0:t.nativeEvent.pageScrollState==="idle"&&(e.current=!1)},[e]);return{isGestureSwipingRef:e,scrollStateChangedHandler:r}}

package/dist/esm/extensions/tab-view/index.d.ts

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

package/dist/esm/extensions/tab-view/index.js

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

package/dist/esm/extensions/tab-view/utils/getIndicatorInterpolateOutput.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 탭의 길이들을 이용해 indicator 의 변화량을 구합니다.
+ * - 첫번째 탭은 TAB_LIST_PADDING 을 왼쪽에 한 개 갖습니다.
+ * - 첫번째와 두번째 탭 사이에는 TAB_ITEM_MARGIN 두 개 갖습니다.
+ *
+ * ```plaintext
+ * `|`: 탭 구분
+ * `^`: tabListPadding
+ * `o`: tabItemMargin
+ *
+ * |o^TAB1^|^TAB2^|
+ *
+ * - TAB1의 indciator 위치: `o` + `^`
+ * - TAB2의 indciator 위치: <TAB1의 indicator 위치> + `<TAB1의 width>` + `^` + `^`
+ * - ...
+ *
+ * ```
+ */
+export declare function getIndicatorInterpolateOutput(tabWidths: number[], fluid: boolean): number[];

package/dist/esm/extensions/tab-view/utils/getIndicatorInterpolateOutput.js

@@ -0,0 +1 @@
+"use strict";import{FLUID_TAB_ITEM_HORIZONTAL_MARGIN as n,TAB_ITEM_HORIZONTAL_MARGIN as o,TAB_LIST_CONTAINER_PADDING as e,TAB_LIST_FLUID_CONTAINER_PADDING as D}from"../const";export function getIndicatorInterpolateOutput(I,T){const t=T?D:e,A=T?n:o;return I.reduce((r,L,_)=>{if(_===0)return[t+A];const N=r[_-1]+I[_-1]+A*2;return[...r,N]},[])}

package/dist/esm/extensions/tab-view/utils/getTabData.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type TabData = {
+    value: string;
+    tabIndex: number;
+};
+export declare function getTabData(_children: ReactNode): TabData[];
+export {};

package/dist/esm/extensions/tab-view/utils/getTabData.js

@@ -0,0 +1 @@
+"use strict";import{Children as e,isValidElement as n}from"react";import{TabsList as p}from"../TabsList";export function getTabData(t){return(e.map(t,r=>r)??[]).filter(r=>n(r)).filter(r=>r.type===p).map(r=>e.map(r.props.children,(a,i)=>({value:a.props.value,tabIndex:i}))).flatMap(r=>r)}

package/dist/esm/extensions/top-navigation/IconButton.d.ts

@@ -0,0 +1,5 @@
+import { TouchableOpacityProps } from 'react-native';
+export declare const IconButton: ({ name, accessibilityLabel, onPress, color, ...restProps }: {
+    name: string;
+    color?: string;
+} & TouchableOpacityProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/extensions/top-navigation/IconButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{TouchableOpacity as a}from"react-native";import{Icon as n}from"../../components/icon/index";import{useAdaptive as p}from"../../core";const m={left:8,right:8};export const IconButton=({name:t,accessibilityLabel:r,onPress:i,color:e,...c})=>{const s=p();return o(a,{hitSlop:m,onPress:i,...c,children:o(n,{color:e??s.greyOpacity600,size:20,name:t,accessibilityLabel:r})})};

package/dist/esm/extensions/top-navigation/TopNavigation.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { Icon } from '../../components/icon/index';
+type Icon = {
+    source: {
+        uri: string;
+    };
+    name?: never;
+} | {
+    name: string;
+    source?: never;
+};
+export interface TopNavigationProps {
+    title: string;
+    icon: Icon;
+    withHome?: boolean;
+    onPressTitle?: () => void;
+    onPressDots?: () => void;
+    onPressClose?: () => void;
+    fixedRightButton?: {
+        title: string;
+        icon: Icon;
+        id: string;
+        onPress?: () => void;
+        disabled?: boolean;
+    };
+    contentVisible?: boolean;
+    children?: ReactNode;
+    theme?: NavigationTheme;
+}
+export declare function TopNavigation({ title, icon, onPressTitle, onPressDots, onPressClose, fixedRightButton, children, withHome, contentVisible, theme, }: TopNavigationProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationTheme = 'light' | 'dark';
+export interface NavigationRightContentProps extends ViewProps {
+    fixedRightButton: TopNavigationProps['fixedRightButton'];
+    onPressDots?: () => void;
+    onPressClose?: () => void;
+    theme?: NavigationTheme;
+}
+export declare const COLOR_PALETTE: {
+    light: {
+        titleTextColor: string;
+        backgroundColor: string;
+        iconTintColor: string;
+        dividerColor: string;
+    };
+    dark: {
+        titleTextColor: string;
+        backgroundColor: string;
+        iconTintColor: string;
+        dividerColor: string;
+    };
+};
+export declare function NavigationRightContent({ fixedRightButton, onPressDots, onPressClose, theme, ...viewProps }: NavigationRightContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function CloseWithDotsMono({ onPressDots, onPressClose, theme, }: Pick<TopNavigationProps, 'onPressDots' | 'onPressClose'> & {
+    theme?: NavigationTheme;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/extensions/top-navigation/TopNavigation.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as t,Fragment as v}from"react/jsx-runtime";import{useNavigation as b}from"@granite-js/native/@react-navigation/native";import{closeView as T}from"@granite-js/react-native";import{colors as c}from"@toss-design-system/colors";import{useLayoutEffect as k}from"react";import{View as a}from"react-native";import{Navigation as F,NavigationBackButton as N,NavigationContent as P,NavigationLeft as w,NavigationRight as _,NavigationTitleIcon as y,NavigationTitleText as x}from"../navigation/index";import{tdsEvent as E}from"../partner-navigation/event";import{IconButton as C}from"./IconButton";const h=157,I=h+44+4;export function TopNavigation({title:r,icon:n,onPressTitle:i,onPressDots:e,onPressClose:d,fixedRightButton:l,children:g,withHome:u=!1,contentVisible:m=!0,theme:s="light"}){const p=b(),f=p.canGoBack();return k(()=>{if(!m){p.setOptions({headerBackVisible:!1,headerTitle:()=>null,headerLeft:()=>null});return}},[m,p]),t(F,{children:[m&&t(v,{children:[o(w,{children:o(N,{theme:s,canGoBack:f})}),t(P,{onPressTitle:i,horizontalSafeMargin:l!=null?I:h,withHome:u,theme:s,children:[o(y,{...n}),r!=null&&o(x,{theme:s,children:r}),u&&o(y,{name:"icon-home-mono"})]})]}),o(_,{children:o(NavigationRightContent,{fixedRightButton:l,onPressDots:e,onPressClose:d,theme:s})}),g]})}export const COLOR_PALETTE={light:{titleTextColor:"#191F28",backgroundColor:c.greyOpacity50,iconTintColor:c.greyOpacity600,dividerColor:c.greyOpacity200},dark:{titleTextColor:"#FFFFFF",backgroundColor:"rgba(2, 3, 7, 0.58)",iconTintColor:"rgba(253, 253, 255, 0.75))",dividerColor:c.greyOpacity200}};export function NavigationRightContent({fixedRightButton:r,onPressDots:n,onPressClose:i,theme:e="light",...d}){const{style:l,...g}=d;return t(a,{style:[{flexDirection:"row",gap:4},l],...g,children:[r!=null&&o(a,{style:{borderRadius:99,overflow:"hidden"},children:o(C,{name:r.icon.name??"",accessibilityLabel:r.title,onPress:()=>{r.onPress?.(),E.emit("navigationAccessoryEvent",{id:r.id})},style:{paddingVertical:7,paddingHorizontal:12,backgroundColor:COLOR_PALETTE[e].backgroundColor},color:COLOR_PALETTE[e].iconTintColor,disabled:r.disabled})}),o(CloseWithDotsMono,{onPressDots:n,onPressClose:i,theme:e})]})}export function CloseWithDotsMono({onPressDots:r,onPressClose:n=T,theme:i="light"}){return o(a,{style:{borderRadius:99,overflow:"hidden"},children:t(a,{style:{flexDirection:"row",justifyContent:"center",alignItems:"center",gap:12,height:34,paddingHorizontal:12,backgroundColor:COLOR_PALETTE[i].backgroundColor},children:[o(C,{name:"icon-dots-mono",accessibilityLabel:"\uB354\uBCF4\uAE30",onPress:r,color:COLOR_PALETTE[i].iconTintColor}),o(a,{style:{width:1,height:16,backgroundColor:COLOR_PALETTE[i].dividerColor}}),o(C,{name:"icon-appsintoss-close-mono",accessibilityLabel:"\uB2EB\uAE30",color:COLOR_PALETTE[i].iconTintColor,onPress:()=>{n()}})]})})}

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

@@ -0,0 +1,2 @@
+export * from './TopNavigation';
+export * from './useTopNavigation';

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

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

package/dist/esm/extensions/top-navigation/useTopNavigation.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+import { TopNavigation } from './TopNavigation';
+type AddAccessoryButtonParams = ComponentProps<typeof TopNavigation>['fixedRightButton'];
+type AddAccessoryButton = (params: AddAccessoryButtonParams) => void;
+type RemoveAccessoryButton = () => void;
+export declare function useTopNavigation(): {
+    addAccessoryButton: AddAccessoryButton;
+    removeAccessoryButton: RemoveAccessoryButton;
+};
+export {};

package/dist/esm/extensions/top-navigation/useTopNavigation.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useNavigation as c}from"@granite-js/native/@react-navigation/native";import{useCallback as i}from"react";import{NavigationRightWrapper as m}from"../navigation/index";import{tdsEvent as d}from"../partner-navigation/event";import{IconButton as l}from"./IconButton";import{CloseWithDotsMono as u}from"./TopNavigation";export function useTopNavigation(){const t=c(),r=i(o=>{t.setOptions({headerRight:()=>e(s,{children:e(l,{disabled:o?.disabled,name:o?.icon.name??"",accessibilityLabel:o?.title,onPress:()=>{o?.onPress?.(),d.emit("navigationAccessoryEvent",{id:o?.id??""})}})})})},[t]),n=i(()=>{t.setOptions({headerRight:()=>e(s,{})})},[t]);return{addAccessoryButton:r,removeAccessoryButton:n}}function s({children:t}){return a(m,{children:[t,e(u,{})]})}

package/dist/esm/index.d.ts

@@ -0,0 +1,65 @@
+/** TDS 컴포넌트 */
+export * from './components/agreement';
+export * from './components/amount-top';
+export * from './components/asset';
+export * from './components/badge';
+export * from './components/board-row';
+export * from './components/border';
+export * from './components/bottom-cta';
+export * from './components/bottom-info';
+export * from './components/bottom-sheet';
+export * from './components/button';
+export * from './components/checkbox';
+export * from './components/dialog';
+export * from './components/dropdown';
+export * from './components/grid-list';
+export * from './components/icon';
+export * from './components/list';
+export * from './components/list-footer';
+export * from './components/list-header';
+export * from './components/list-row';
+export * from './components/loader';
+export * from './components/post';
+export * from './components/progress-bar';
+export * from './components/radio';
+export * from './components/result';
+export * from './components/search-field';
+export * from './components/skeleton';
+export * from './components/slider';
+export * from './components/switch';
+export * from './components/tab';
+export * from './components/table-row';
+export * from './components/text-button';
+export * from './components/text-field';
+export * from './components/toast';
+export * from './components/tooltip';
+export * from './components/top';
+export * from './components/txt';
+export * from './components/segmented-control';
+export * from './components/stepper-row';
+export * from './components/keypad';
+export * from './components/chart';
+export * from './components/rating';
+export * from './components/icon-button';
+export * from './components/numeric-spinner';
+export * from './components/gradient';
+export * from './components/fixed-bottom-cta';
+export * from './components/shadow';
+export * from './components/gradient';
+export * from './components/highlight';
+export * from './components/error-page';
+/** 확장 컴포넌트 */
+export * from './extensions/overlay-extension';
+export * from './extensions/tab-view';
+export * from './extensions/page-navbar';
+export * from './extensions/external-web-view-screen';
+export * from './extensions/partner-web-view-screen';
+export * from './extensions/bridge';
+export { tdsEvent } from './extensions/partner-navigation/event';
+/** util 컴포넌트 */
+export * from './interactions/pressable-effect';
+/** 기타 컴포넌트 */
+export * from './components/carousel';
+/** 단일 Provider */
+export { TDSProvider } from './core';
+export { colors } from '@toss-design-system/colors';

package/dist/esm/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./components/agreement";export*from"./components/amount-top";export*from"./components/asset";export*from"./components/badge";export*from"./components/board-row";export*from"./components/border";export*from"./components/bottom-cta";export*from"./components/bottom-info";export*from"./components/bottom-sheet";export*from"./components/button";export*from"./components/checkbox";export*from"./components/dialog";export*from"./components/dropdown";export*from"./components/grid-list";export*from"./components/icon";export*from"./components/list";export*from"./components/list-footer";export*from"./components/list-header";export*from"./components/list-row";export*from"./components/loader";export*from"./components/post";export*from"./components/progress-bar";export*from"./components/radio";export*from"./components/result";export*from"./components/search-field";export*from"./components/skeleton";export*from"./components/slider";export*from"./components/switch";export*from"./components/tab";export*from"./components/table-row";export*from"./components/text-button";export*from"./components/text-field";export*from"./components/toast";export*from"./components/tooltip";export*from"./components/top";export*from"./components/txt";export*from"./components/segmented-control";export*from"./components/stepper-row";export*from"./components/keypad";export*from"./components/chart";export*from"./components/rating";export*from"./components/icon-button";export*from"./components/numeric-spinner";export*from"./components/gradient";export*from"./components/fixed-bottom-cta";export*from"./components/shadow";export*from"./components/gradient";export*from"./components/highlight";export*from"./components/error-page";export*from"./extensions/overlay-extension";export*from"./extensions/tab-view";export*from"./extensions/page-navbar";export*from"./extensions/external-web-view-screen";export*from"./extensions/partner-web-view-screen";export*from"./extensions/bridge";export{tdsEvent}from"./extensions/partner-navigation/event";export*from"./interactions/pressable-effect";export*from"./components/carousel";export{TDSProvider}from"./core";export{colors}from"@toss-design-system/colors";

package/dist/esm/interactions/animated/Animated.d.ts

@@ -0,0 +1,38 @@
+import { Animated as ReactNativeAnimated } from 'react-native';
+export declare const Animated: {
+    spring: (value: ReactNativeAnimated.Value | ReactNativeAnimated.ValueXY, config: import("./spring").SpringAnimationConfig) => ReactNativeAnimated.CompositeAnimation;
+    decay(value: ReactNativeAnimated.AnimatedValue | ReactNativeAnimated.AnimatedValueXY, config: ReactNativeAnimated.DecayAnimationConfig): ReactNativeAnimated.CompositeAnimation;
+    add<OutputT extends number | string>(a: ReactNativeAnimated.Animated, b: ReactNativeAnimated.Animated): ReactNativeAnimated.AnimatedAddition<OutputT>;
+    subtract<OutputT extends number | string>(a: ReactNativeAnimated.Animated, b: ReactNativeAnimated.Animated): ReactNativeAnimated.AnimatedSubtraction<OutputT>;
+    divide<OutputT extends number | string>(a: ReactNativeAnimated.Animated, b: ReactNativeAnimated.Animated): ReactNativeAnimated.AnimatedDivision<OutputT>;
+    multiply<OutputT extends number | string>(a: ReactNativeAnimated.Animated, b: ReactNativeAnimated.Animated): ReactNativeAnimated.AnimatedMultiplication<OutputT>;
+    modulo<OutputT extends number | string>(a: ReactNativeAnimated.Animated, modulus: number): ReactNativeAnimated.AnimatedModulo<OutputT>;
+    diffClamp<OutputT extends number | string>(a: ReactNativeAnimated.Animated, min: number, max: number): ReactNativeAnimated.AnimatedDiffClamp<OutputT>;
+    delay(time: number): ReactNativeAnimated.CompositeAnimation;
+    sequence(animations: Array<ReactNativeAnimated.CompositeAnimation>): ReactNativeAnimated.CompositeAnimation;
+    stagger(time: number, animations: Array<ReactNativeAnimated.CompositeAnimation>): ReactNativeAnimated.CompositeAnimation;
+    loop(animation: ReactNativeAnimated.CompositeAnimation, config?: ReactNativeAnimated.LoopAnimationConfig): ReactNativeAnimated.CompositeAnimation;
+    parallel(animations: Array<ReactNativeAnimated.CompositeAnimation>, config?: ReactNativeAnimated.ParallelConfig): ReactNativeAnimated.CompositeAnimation;
+    event<T>(argMapping: Array<ReactNativeAnimated.Mapping | null>, config?: ReactNativeAnimated.EventConfig<T>): (...args: any[]) => void;
+    createAnimatedComponent<T extends React.ComponentType<any>>(component: T, options?: ReactNativeAnimated.AnimatedComponentOptions): ReactNativeAnimated.AnimatedComponent<T>;
+    Animated: typeof ReactNativeAnimated.Animated;
+    AnimatedNode: typeof ReactNativeAnimated.AnimatedNode;
+    AnimatedWithChildren: typeof ReactNativeAnimated.AnimatedWithChildren;
+    AnimatedColor: typeof ReactNativeAnimated.AnimatedColor;
+    AnimatedInterpolation: typeof ReactNativeAnimated.AnimatedInterpolation;
+    Value: typeof ReactNativeAnimated.Value;
+    ValueXY: typeof ReactNativeAnimated.ValueXY;
+    timing: (value: ReactNativeAnimated.AnimatedValue | ReactNativeAnimated.AnimatedValueXY, config: ReactNativeAnimated.TimingAnimationConfig) => ReactNativeAnimated.CompositeAnimation;
+    AnimatedAddition: typeof ReactNativeAnimated.AnimatedAddition;
+    AnimatedSubtraction: typeof ReactNativeAnimated.AnimatedSubtraction;
+    AnimatedDivision: typeof ReactNativeAnimated.AnimatedDivision;
+    AnimatedMultiplication: typeof ReactNativeAnimated.AnimatedMultiplication;
+    AnimatedModulo: typeof ReactNativeAnimated.AnimatedModulo;
+    AnimatedDiffClamp: typeof ReactNativeAnimated.AnimatedDiffClamp;
+    View: ReactNativeAnimated.AnimatedComponent<typeof import("react-native")._View>;
+    Image: ReactNativeAnimated.AnimatedComponent<typeof import("react-native")._Image>;
+    Text: ReactNativeAnimated.AnimatedComponent<typeof import("react-native")._Text>;
+    ScrollView: ReactNativeAnimated.AnimatedComponent<typeof import("react-native")._ScrollView>;
+    FlatList: typeof ReactNativeAnimated.FlatList;
+    SectionList: typeof ReactNativeAnimated.SectionList;
+};

package/dist/esm/interactions/animated/Animated.js

@@ -0,0 +1 @@
+"use strict";import{Animated as t}from"react-native";import{spring as i}from"./spring";export const Animated={...t,spring:i};