@toss/tds-react-native 1.0.0

package/dist/esm/components/stepper-row/StepperRowTexts.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Text } from '../paragraph';
+interface StepperRowTextsProps {
+    /**
+     * `StepperRow.Texts` 컴포넌트의 텍스트의 타입을 설정해요. 타이틀과 설명의 스타일이 타입에 따라 달라져요.
+     * - `A`일 떄 타이틀은 `t5`, 설명은 `t6`에요.
+     * - `B`일 떄 타이틀은 `t4`, 설명은 `t6`에요.
+     * - `C`일 떄 타이틀은 `t5`, 설명은 `t7`에요.
+     */
+    type: 'A' | 'B' | 'C';
+    /**
+     * `StepperRow.Texts` 컴포넌트에 표시될 타이틀을 지정해요.
+     */
+    title: ReactNode;
+    /**
+     * `StepperRow.Texts` 컴포넌트에 표시될 설명을 지정해요.
+     */
+    description?: ReactNode;
+    /**
+     * 타이틀의 스타일링을 할 때 사용해요.
+     */
+    titleProps?: ParagraphTextProps;
+    /**
+     * 설명의 스타일링을 할 때 사용해요.
+     */
+    descriptionProps?: ParagraphTextProps;
+}
+type ParagraphTextProps = ComponentProps<typeof Text>;
+export declare function StepperRowTexts({ type, title, description, titleProps, descriptionProps }: StepperRowTextsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/stepper-row/StepperRowTexts.js

@@ -0,0 +1 @@
+"use strict";import{jsx as i,jsxs as u}from"react/jsx-runtime";import{Children as a,cloneElement as c,isValidElement as E}from"react";import{View as s}from"react-native";import{useAdaptive as T}from"../../core";import{Text as p}from"../paragraph";import{useUpdateStepperRowCenter as W}from"./StepperRowContext";const g=t=>typeof t=="string"||typeof t=="number",m=t=>E(t)&&(t.type===p||t.type===p),w={A:{title:{typography:"t5",fontWeight:"bold"},description:{typography:"t6",fontWeight:"regular"}},B:{title:{typography:"t4",fontWeight:"bold"},description:{typography:"t6",fontWeight:"regular"}},C:{title:{typography:"t5",fontWeight:"bold"},description:{typography:"t7",fontWeight:"medium"}}};export function StepperRowTexts({type:t,title:l,description:e,titleProps:f,descriptionProps:d}){const o=T();W({type:t,hasDescription:e!=null});const r=a.only(g(l)?i(p,{color:o.grey800,children:l}):l),n=e?a.only(g(e)?i(p,{style:{color:o.grey600,paddingTop:2},children:e}):e):void 0,y=w[t],h=m(r)?c(r,{...y.title,color:o.grey800,...r.props,...f}):r,x=m(n)?c(n,{...y.description,color:o.grey600,...n.props,...d}):n;return u(s,{children:[i(s,{style:{flexDirection:"row"},children:h}),e&&i(s,{style:{flexDirection:"row"},children:x})]})}

package/dist/esm/components/stepper-row/constants/a11yCondition.d.ts

@@ -0,0 +1,2 @@
+import { A11yCondition } from '../../../core';
+export declare const a11yCondition: Record<'leftAsset' | 'center' | 'rightArrow' | 'rightButtonAlign' | 'rightButtonPaddingTop', A11yCondition>;

package/dist/esm/components/stepper-row/constants/a11yCondition.js

@@ -0,0 +1 @@
+"use strict";export const a11yCondition={leftAsset:{biggerThanOrEqualTo:160},center:{biggerThanOrEqualTo:140},rightArrow:{biggerThanOrEqualTo:160},rightButtonAlign:{biggerThanOrEqualTo:200},rightButtonPaddingTop:{biggerThanOrEqualTo:120,smallerThan:200}};

package/dist/esm/components/stepper-row/index.d.ts

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

package/dist/esm/components/stepper-row/index.js

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

package/dist/esm/components/stepper-row/utils/padding.d.ts

@@ -0,0 +1,3 @@
+import { Center, Left, Right } from '../StepperRowContext';
+export declare function getCenterPaddingTop(left: Left | undefined, center: Center | undefined): number;
+export declare function getRightPaddingTop(left: Left | undefined, right: Right | undefined): number;

package/dist/esm/components/stepper-row/utils/padding.js

@@ -0,0 +1 @@
+"use strict";const e=0;export function getCenterPaddingTop(n,t){return n==null||t==null||n.type!=="numberIcon"&&t.hasDescription?0:n.type==="asset32"||n.type==="numberIcon"?{A:5,B:2,C:5}[t.type]:n.type==="asset40"?{A:9,B:6,C:9}[t.type]:0}const r=0;export function getRightPaddingTop(n,t){return n==null||t==null?r:n.type==="asset32"||n.type==="numberIcon"?{arrow:4,button:0,none:0}[t.type]:n.type==="asset40"?{arrow:8,button:4,none:0}[t.type]:r}

package/dist/esm/components/switch/Switch.d.ts

@@ -0,0 +1,33 @@
+import { AccessibilityProps, PressableProps, StyleProp, ViewStyle } from 'react-native';
+interface SwitchProp extends AccessibilityProps {
+    /**
+     * `Switch` 컴포넌트의 켜짐과 꺼짐 상태를 표현해요.  주로 `Switch` 컴포넌트의 상태를 컴포넌트 외부에서 관리할 때, `onCheckedChange` 속성과 함께 사용해요.
+     */
+    checked?: boolean;
+    /**
+     * `Switch` 컴포넌트의 선택 상태가 변경될 때 실행되는 함수예요.
+     */
+    onCheckedChange?: (value: boolean) => void;
+    /**
+     * `Switch` 컴포넌트의 상태를 컴포넌트 내부에서 관리할 때, 초기 선택 상태를 지정해요.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * 이 값이 `true`일 때 컴포넌트가 비활성화돼요.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * `Switch` 컴포넌트를 클릭했을 때 실행되는 함수예요.
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * `Switch` 컴포넌트의 스타일을 설정해요.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+declare function Switch({ checked: _checked, defaultChecked, disabled, style, onPress, onCheckedChange, accessibilityState, ...restProps }: SwitchProp): import("react/jsx-runtime").JSX.Element;
+export default Switch;

package/dist/esm/components/switch/Switch.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as O}from"react/jsx-runtime";import{colors as V}from"@toss-design-system/colors";import{useWiggleAnimation as j}from"../../interactions/animation";import{usePressAnim as R}from"../../interactions/pressable-effect";import{useAccessibilityInfo as E,useControlled as H}from"../../utils";import{useCallback as W,useEffect as D,useMemo as M}from"react";import{Animated as i,Platform as T,Pressable as _,StyleSheet as C}from"react-native";import{useSwitchAnimation as G}from"./useSwitchAnimation";function K({checked:l,defaultChecked:u=!1,disabled:t,style:m,onPress:n,onCheckedChange:r,accessibilityState:f,...p}){const[e,c]=H({controlledValue:l,defaultValue:u}),{reduceMotionEnabled:y}=E(),s=M(()=>e===!0?"on":"off",[e]),{backgroundStyle:h,animatedKnobStyle:d,startSwitchOnAnimation:S,startSwitchOffAnoimation:w}=G({animationState:s,disabled:t}),{startPressInAnim:A,startPressOutAnim:g,scaleAnim:b}=R({pressIn:{scale:.96,opacity:1},pressOut:{scale:1,opacity:1}}),{startWiggle:P,style:x}=j({direction:"x",type:"small"}),I=W(k=>{t||(n?.(k),r?.(!e),c(!e))},[e,t,n,r,c]);return D(()=>{s==="on"?S():w()},[s]),o(_,{onPress:I,onPressIn:t?P:A,onPressOut:t?void 0:g,style:[a.container,m],accessibilityRole:"switch",accessible:!0,accessibilityState:{checked:e,disabled:t,...f},...p,children:O(i.View,{style:[T.OS==="ios"?{opacity:t?.3:1}:void 0,y?void 0:b,t?x:void 0],children:[o(i.View,{style:[h,{width:U,height:q,borderRadius:v}]}),o(i.View,{style:[a.knob,d]})]})})}const U=50,q=30,v=15,a=C.create({container:{alignSelf:"flex-start"},knob:{width:16,height:16,backgroundColor:V.white,borderRadius:8,position:"absolute",left:7,top:7}});export default K;

package/dist/esm/components/switch/index.d.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch';

package/dist/esm/components/switch/index.js

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

package/dist/esm/components/switch/useSwitchAnimation.d.ts

@@ -0,0 +1,12 @@
+import { Animated, ViewStyle } from 'react-native';
+type AnimationState = 'off' | 'on';
+export declare function useSwitchAnimation({ animationState, disabled, }: {
+    animationState: AnimationState;
+    disabled?: boolean;
+}): {
+    backgroundStyle: Animated.WithAnimatedObject<ViewStyle>;
+    animatedKnobStyle: Animated.WithAnimatedObject<ViewStyle>;
+    startSwitchOnAnimation: () => void;
+    startSwitchOffAnoimation: () => void;
+};
+export {};

package/dist/esm/components/switch/useSwitchAnimation.js

@@ -0,0 +1 @@
+"use strict";import{colors as m}from"@toss-design-system/colors";import{useAdaptive as b}from"../../core";import g from"hex-to-rgba";import{useCallback as p,useMemo as S,useRef as u}from"react";import{Animated as e,Platform as d}from"react-native";export function useSwitchAnimation({animationState:s,disabled:i}){const c=b(),f=S(()=>({grey200:g(c.grey200??m.grey200,d.OS==="android"&&i?.3:1),blue500:g(m.blue500,d.OS==="android"&&i?.3:1)}),[c.grey200,i]),n=u(new e.Value(s==="on"?1:0)).current,o=u(new e.Value(r.handler[s].translateX)).current,l=u(new e.Value(r.handler[s].scale)).current,t=!1,v=p(()=>{e.parallel([e.spring(o,{toValue:r.handler.on.translateX,useNativeDriver:t,...a}),e.spring(l,{toValue:r.handler.on.scale,useNativeDriver:t,...a}),e.spring(n,{toValue:1,useNativeDriver:t,...a})]).start()},[l,o,n,t]),h=p(()=>{e.parallel([e.spring(o,{toValue:r.handler.off.translateX,useNativeDriver:t,...a}),e.spring(l,{toValue:r.handler.off.scale,useNativeDriver:t,...a}),e.spring(n,{toValue:0,useNativeDriver:t,...a})]).start()},[l,o,n,t]);return{backgroundStyle:{backgroundColor:n.interpolate({inputRange:[0,1],outputRange:[f.grey200,f.blue500]})},animatedKnobStyle:{transform:[{translateX:o},{scale:l}]},startSwitchOnAnimation:v,startSwitchOffAnoimation:h}}const r={handler:{on:{scale:1.5,translateX:20},off:{scale:1,translateX:0}}},a={stiffness:1e3,damping:52};

package/dist/esm/components/tab/FluidTab.d.ts

@@ -0,0 +1,3 @@
+import { BaseTabProps } from './type';
+export type FullTabProps = BaseTabProps;
+export declare function FluidTab({ defaultValue, value: _value, children, onChange: _onChange, style, size, ...viewProps }: FullTabProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tab/FluidTab.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{spring as T}from"@toss-design-system/easings";import{useAdaptive as X}from"../../core";import{useControlled as k}from"../../utils";import{useCallback as A,useEffect as p,useRef as d,useState as b}from"react";import{ScrollView as L,StyleSheet as w,View as r}from"react-native";import{Animated as c}from"../../interactions/animated";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as D}from"./TabContext";export function FluidTab({defaultValue:y,value:g,children:v,onChange:u,style:V,size:x="large",...C}){const m=X(),[S,f]=k({controlledValue:g,defaultValue:y}),B=A(l=>{u?.(l),f(l)},[u,f]),[t,R]=b(0),n=d(new c.Value(t)).current,[i,W]=b(0),j={width:i,transform:[{translateX:n}]};p(()=>{c.spring(n,{toValue:t,useNativeDriver:!0,...T.quick}).start()},[t,n]);const a=d(null),h=d(null);p(()=>{a.current!=null&&h.current?.scrollTo({x:Math.max(0,t-(a.current-i)/2)})},[t,i]);const P={...o.border,borderBottomColor:m.grey200};return e(D.Provider,{value:{fluid:!0,value:S,onChange:B,size:x},children:e(z.Provider,{value:{width:i,translateX:t,setWidth:W,setTranslateX:R},children:s(r,{onLayout:l=>{a.current=l.nativeEvent.layout.width},children:[e(r,{style:[P,o.fluidBorder]}),e(L,{ref:h,horizontal:!0,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:s(r,{children:[s(r,{style:[o.itemList,V],accessibilityRole:"tablist",...C,children:[e(r,{style:[o.fluidPadding]}),v]}),e(c.View,{style:[{backgroundColor:m.grey800},o.indicator,j]})]})})]})})})}const o=w.create({fluidPadding:{width:14,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:w.hairlineWidth},fluidBorder:{position:"absolute",bottom:2},indicator:{height:2,borderRadius:10,bottom:1}});

package/dist/esm/components/tab/FullTab.d.ts

@@ -0,0 +1,3 @@
+import { BaseTabProps } from './type';
+export type FullTabProps = BaseTabProps;
+export declare function FullTab({ defaultValue, value: _value, children, onChange: _onChange, style, size, ...viewProps }: FullTabProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tab/FullTab.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{spring as X}from"@toss-design-system/easings";import{useAdaptive as k}from"../../core";import{useControlled as A}from"../../utils";import{useCallback as B,useEffect as R,useRef as T,useState as u}from"react";import{ScrollView as W,StyleSheet as h,View as e}from"react-native";import{Animated as a}from"../../interactions/animated";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as D}from"./TabContext";export function FullTab({defaultValue:f,value:p,children:b,onChange:l,style:y,size:g="large",...w}){const s=k(),[v,n]=A({controlledValue:p,defaultValue:f}),V=B(c=>{l?.(c),n(c)},[l,n]),[o,x]=u(0),i=T(new a.Value(o)).current,[d,C]=u(0),S={width:d,transform:[{translateX:i}]};R(()=>{a.spring(i,{toValue:o,useNativeDriver:!0,...X.quick}).start()},[o,i]);const j={...r.border,borderBottomColor:s.grey200};return t(D.Provider,{value:{fluid:!1,value:v,onChange:V,size:g},children:t(z.Provider,{value:{width:d,translateX:o,setWidth:C,setTranslateX:x},children:t(e,{children:t(W,{horizontal:!1,showsHorizontalScrollIndicator:!1,alwaysBounceVertical:!1,children:m(e,{children:[m(e,{style:[r.itemList,y],accessibilityRole:"tablist",...w,children:[t(e,{style:[r.padding]}),b,t(e,{style:r.padding})]}),t(e,{style:j}),t(a.View,{style:[{backgroundColor:s.grey800},r.indicator,S]})]})})})})})}const r=h.create({padding:{width:20,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:h.hairlineWidth},indicator:{height:2,borderRadius:10,bottom:1}});

package/dist/esm/components/tab/Gradient.d.ts

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

package/dist/esm/components/tab/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/components/tab/IndicatorContext.d.ts

@@ -0,0 +1,7 @@
+export interface IndicatorContext {
+    width?: number;
+    translateX?: number;
+    setWidth?: (width: number) => void;
+    setTranslateX?: (translateX: number) => void;
+}
+export declare const IndicatorContext: import("react").Context<IndicatorContext>;

package/dist/esm/components/tab/IndicatorContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as t}from"react";export const IndicatorContext=t({width:0,translateX:0,setWidth:()=>{},setTranslateX:()=>{}});

package/dist/esm/components/tab/Tab.d.ts

@@ -0,0 +1,14 @@
+import { TabItem } from './TabItem';
+import { BaseTabProps } from './type';
+export type TabProps = {
+    /**
+     * 이 값이 `true`일 때 각 아이템의 너비가 글자 수에 맞춰져요. 아이템의 전체 크기가 `Tab`의 컨테이너를 넘어가면 가로 스크롤이 생겨요. `false`라면 최대 4개의 아이템 사용을 권장해요.
+     *
+     * @default false
+     */
+    fluid?: boolean;
+} & BaseTabProps;
+export declare function Tab({ fluid, ...tabProps }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tab {
+    var Item: typeof TabItem;
+}

package/dist/esm/components/tab/Tab.js

@@ -0,0 +1 @@
+"use strict";import{jsx as m}from"react/jsx-runtime";import{FullTab as t}from"./FullTab";import{FluidTab as i}from"./FluidTab";import{TabItem as f}from"./TabItem";export function Tab({fluid:o,...r}){return o?m(i,{...r}):m(t,{...r})}Tab.Item=f;

package/dist/esm/components/tab/TabContext.d.ts

@@ -0,0 +1,8 @@
+export type TabValue = string;
+export interface TabContext {
+    fluid?: boolean;
+    value?: TabValue;
+    onChange?: (value: TabValue) => void;
+    size: 'large' | 'small';
+}
+export declare const TabContext: import("react").Context<TabContext>;

package/dist/esm/components/tab/TabContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as e}from"react";export const TabContext=e({fluid:!1,value:void 0,onChange:()=>{},size:"large"});

package/dist/esm/components/tab/TabItem.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import { TabValue } from './TabContext';
+export interface TabItemProps {
+    /**
+     * 이 값이 `true`일 때 `Tab.Item`의 우측 상단에 빨간 동그라미가 표시돼요. 중요한 알림이나 새로운 업데이트가 있음을 사용자에게 시각적으로 전달할 수 있어요.
+     *
+     * @default false
+     */
+    redBean?: boolean;
+    /**
+     * 탭의 값을 설정해요. `Tab` 컴포넌트에서 탭을 구분하는 데 사용돼요.
+     */
+    value: TabValue;
+    /**
+     * `Tab.Item` 컴포넌트 내부에 표시될 내용을 설정해요.
+     */
+    children: ReactNode;
+    /**
+     * `Tab.Item` 컴포넌트의 스타일을 설정해요.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * `Tab.Item` 컴포넌트를 클릭했을 때 실행되는 함수예요.
+     */
+    onPress?: PressableProps['onPress'];
+}
+export declare function TabItem({ redBean, value, children, style, onPress }: TabItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/tab/TabItem.js

@@ -0,0 +1 @@
+"use strict";import{jsx as d,jsxs as j}from"react/jsx-runtime";import{useAdaptive as w}from"../../core";import{Txt as T}from"../txt";import{useCallback as B,useContext as x,useEffect as I,useMemo as P,useRef as k,useState as L}from"react";import{Pressable as M,StyleSheet as R,View as W}from"react-native";import{Animated as s}from"../../interactions/animated";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as A}from"./TabContext";import{spring as C}from"@toss-design-system/easings";export function TabItem({redBean:o=!1,value:e,children:r,style:S,onPress:m}){const{size:f,fluid:g,value:h,onChange:y}=x(A),a=k(new s.Value(1)).current,n=P(()=>e===h,[e,h]),b=w(),v=B(u=>{m?.(u),y?.(e)},[m,y,e]),t=D({size:f,fluid:g}),[i,V]=L(),{setWidth:l,setTranslateX:c}=x(z);return I(()=>{!n||i==null||c==null||l==null||(c(i.x+t.left),l(i.width-(t.left+t.right)))},[n,i,c,l,t.left,t.right]),j(M,{accessibilityRole:"tab",accessibilityState:{selected:n},onPress:v,style:[p.container,{paddingTop:t.top,paddingBottom:t.bottom,paddingHorizontal:t.left,minWidth:g?64:void 0},S],onLayout:u=>{V(u.nativeEvent.layout)},onPressIn:()=>{s.spring(a,{toValue:.96,useNativeDriver:!0,...C.rapid}).start()},onPressOut:()=>{s.spring(a,{toValue:1,useNativeDriver:!0,...C.quick}).start()},children:[d(s.View,{style:[p.innerContainer,{transform:[{scale:a}]}],children:d(T,{numberOfLines:1,ellipsizeMode:"clip",typography:f==="large"?"t5":"t6",fontWeight:n?"bold":"semiBold",color:n?b.grey800:b.grey600,children:r})}),o?d(W,{style:p.redBean}):null]})}const p=R.create({container:{flex:1},innerContainer:{alignItems:"center",justifyContent:"center"},redBean:{position:"absolute",top:4,right:0,width:6,height:6,borderRadius:3,backgroundColor:"#f44336"}}),D=({size:o,fluid:e})=>{const r=o==="large"&&e?12:8;return{top:o==="large"?12:8,bottom:o==="large"?14:8,left:r,right:r}};

package/dist/esm/components/tab/index.d.ts

@@ -0,0 +1,2 @@
+export { Tab } from './Tab';
+export type { TabProps } from './Tab';

package/dist/esm/components/tab/index.js

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

package/dist/esm/components/tab/type.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { TabValue } from './TabContext';
+export interface BaseTabProps extends ViewProps {
+    /**
+     * 사이즈에 따라 `Tab` 컴포넌트의 높이와 텍스트 크기가 변경돼요.
+     * @default 'large'
+     */
+    size?: 'large' | 'small';
+    /**
+     * `Tab` 컴포넌트에서 초기 선택된 탭의 값을 설정해요. 탭의 상태를 컴포넌트 내부에서 관리할 때 사용해요.
+     */
+    defaultValue?: TabValue;
+    /**
+     * `Tab` 컴포넌트에서 선택된 탭을 설정해요. `Tab` 컴포넌트의 상태를 컴포넌트 외부에서 관리할 때, `onChange` 속성과 함께 사용해요.
+     */
+    value?: TabValue;
+    /**
+     * `Tab` 컴포넌트를 구성하는 하나 이상의 `Tab.Item` 컴포넌트를 받아요. `Tab.Item`은 각각의 탭을 나타내요.
+     */
+    children?: ReactNode;
+    /**
+     * 선택된 `Tab.Item` 컴포넌트가 변경될 때 실행되는 함수예요.
+     */
+    onChange?: (value: TabValue) => void;
+}

package/dist/esm/components/tab/type.js

@@ -0,0 +1 @@
+"use strict";export{};

package/dist/esm/components/table-row/TableRow.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { TableRowLeftText, TableRowRightText } from './TableRowText';
+import { TableRowAlign } from './types';
+interface TableRowProps {
+    align: TableRowAlign;
+    /**
+     * @description 0 - 100
+     */
+    leftRatio?: number;
+    /**
+     * @description "string" | <TableRow.LeftText .../>
+     */
+    left: ReactNode;
+    /**
+     * @description "string" | <TableRow.RightText .../>
+     */
+    right: ReactNode;
+    horizontalPadding?: 0 | 24;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ *
+ * @example
+ *
+ * // default
+ * <TableRow align="left" left="받는분" right="김토스" leftRatio={40} />
+ *
+ * // custom text
+ * <TableRow
+ *   align="right"
+ *   left={<TableRow.LeftText color={colors.grey900}>받는분</TableRow.LeftText>}
+ *   right={
+ *     <TableRow.RightText fontWeight="bold">
+ *       김토스
+ *     </TableRow.RightText>
+ *   }
+ *   leftRatio={40}
+ * />
+ */
+declare function TableRow({ align, leftRatio, left, right, horizontalPadding, style }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TableRow {
+    var LeftText: typeof TableRowLeftText;
+    var RightText: typeof TableRowRightText;
+}
+export default TableRow;

package/dist/esm/components/table-row/TableRow.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as h}from"react/jsx-runtime";import{StyleSheet as p,View as n}from"react-native";import{TableRowContext as T}from"./TableRowContext";import{TableRowLeftText as s,TableRowRightText as a}from"./TableRowText";import{isReactText as c}from"../../utils";function o({align:l,leftRatio:t,left:r,right:i,horizontalPadding:f=24,style:d}){const m=t!=null?100-t:void 0;return e(T.Provider,{value:{align:l},children:h(n,{style:[{justifyContent:l==="left"?"flex-start":"space-between",paddingHorizontal:f},x.container,d],children:[e(n,{style:[x.left,{flex:t}],children:c(r)?e(s,{children:r}):r}),e(n,{style:{flex:m},children:c(i)?e(a,{children:i}):i})]})})}const x=p.create({container:{flexDirection:"row",flex:1,paddingVertical:16},left:{marginRight:16}});o.LeftText=s,o.RightText=a;export default o;

package/dist/esm/components/table-row/TableRowContext.d.ts

@@ -0,0 +1,5 @@
+import { TableRowAlign } from './types';
+export interface TableRowContext {
+    align: TableRowAlign;
+}
+export declare const TableRowContext: import("react").Context<TableRowContext>;

package/dist/esm/components/table-row/TableRowContext.js

@@ -0,0 +1 @@
+"use strict";import{createContext as t}from"react";export const TableRowContext=t({align:"left"});

package/dist/esm/components/table-row/TableRowText.d.ts

@@ -0,0 +1,7 @@
+import { Txt } from '../txt';
+import { ComponentProps } from 'react';
+interface TableRowTextProps extends ComponentProps<typeof Txt> {
+}
+export declare function TableRowLeftText({ typography, color, ...props }: TableRowTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableRowRightText({ typography, color, style, ...props }: TableRowTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/table-row/TableRowText.js

@@ -0,0 +1 @@
+"use strict";import{jsx as p}from"react/jsx-runtime";import{useAdaptive as i}from"../../core";import{Txt as n}from"../txt";import{useContext as m}from"react";import{TableRowContext as x}from"./TableRowContext";export function TableRowLeftText({typography:t="st10",color:o,...r}){const e=i();return p(n,{typography:t,color:o??e.grey700,...r})}export function TableRowRightText({typography:t="st10",color:o,style:r,...e}){const{align:a}=m(x),s=i();return p(n,{typography:t,color:o??s.grey900,style:[{textAlign:a},r],...e})}

package/dist/esm/components/table-row/index.d.ts

@@ -0,0 +1 @@
+export { default as TableRow } from './TableRow';

package/dist/esm/components/table-row/index.js

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

package/dist/esm/components/table-row/types.d.ts

@@ -0,0 +1 @@
+export type TableRowAlign = 'left' | 'right';

package/dist/esm/components/table-row/types.js

@@ -0,0 +1 @@
+"use strict";export{};

package/dist/esm/components/text-button/TextButton.d.ts

@@ -0,0 +1,54 @@
+import { TypographyKeys } from '../txt';
+import { ReactNode } from 'react';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+type TDSTextButtonType = 'arrow' | 'underline' | 'clear';
+export interface TextButtonProps {
+    /**
+     * `TextButton` 컴포넌트의 형태를 결정해요.
+     *
+     * @default 'clear'
+     */
+    variant?: TDSTextButtonType;
+    /**
+     * `TextButton` 컴포넌트의 비활성화 여부를 나타내요.
+     */
+    disabled?: boolean;
+    /**
+     * `TextButton` 컴포넌트의 텍스트 스타일을 설정해요.
+     */
+    typography: TypographyKeys;
+    /**
+     * `TextButton` 컴포넌트의 텍스트 굵기를 설정해요.
+     *
+     * @default 'regular'
+     */
+    fontWeight?: 'regular' | 'medium' | 'semibold' | 'semiBold' | 'bold';
+    /**
+     * `TextButton` 컴포넌트의 텍스트 색상을 설정해요.
+     *
+     * @default adaptive.grey900
+     */
+    color?: string;
+    /**
+     * `TextButton` 컴포넌트가 눌렸을 때 실행되는 함수예요.
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * `TextButton` 컴포넌트의 스타일을 변경할 때 사용해요.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * `TextButton` 컴포넌트 내부에 표시될 내용을 설정해요.
+     */
+    children: ReactNode;
+}
+/**
+ * @description tds 최신 TextButton 입니다.
+ * React Native 에서 CSS Selector 가 없습니다.
+ * <TextButton /> (=& + &) 사이의 Gap 은 8 입니다. TextButton.gap 을 이용해 간격을 조정해주세요.
+ */
+export declare function TextButton({ variant, typography, fontWeight, color: _color, style, disabled, onPress, children, }: TextButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TextButton {
+    var gap: number;
+}
+export {};

package/dist/esm/components/text-button/TextButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as l,jsxs as b}from"react/jsx-runtime";import{getLinkTypography as m}from"../../constants";import{useAdaptive as f,useTypographyTheme as v}from"../../core";import{Icon as y}from"../icon";import*as w from"../paragraph";import{PressableEffect as d}from"../../interactions/pressable-effect";import{useMemo as R}from"react";import{StyleSheet as x,View as P}from"react-native";export function TextButton({variant:e="clear",typography:o,fontWeight:c,color:g,style:h,disabled:a=!1,onPress:u,children:p}){const s=f(),{typographyLevel:n}=v(),i=g??s.grey800,r=R(()=>m(n),[n])[o];return l(d,{accessibilityRole:"button",underlay:l(d.Underlay,{style:{position:"absolute",backgroundColor:s.greyOpacity100,...k[o][e]}}),onPress:a?void 0:u,style:{alignSelf:"flex-start"},children:b(P,{style:[z.base,{paddingVertical:r.verticalPadding,paddingHorizontal:r.horizontalPadding,paddingRight:e==="arrow"?0:r.horizontalPadding,marginHorizontal:r.horizontalPadding*-1,marginVertical:r.verticalPadding*-1,marginRight:e==="arrow"?0:r.horizontalPadding*-1,opacity:a?.38:1},h],children:[l(w.Text,{typography:o,fontWeight:c,color:i,style:{textDecorationLine:e==="underline"?"underline":"none",textDecorationColor:i},children:p}),e==="arrow"?l(y,{name:"arrow-rightwards",size:T(o).width,color:i,"data-logging-label":"arrow-rightwards"}):void 0]})})}const z=x.create({base:{alignItems:"center",justifyContent:"center",flexDirection:"row",borderRadius:8}});function T(e){switch(e){case"t1":case"st1":case"st2":return{width:31,height:31};case"st3":case"t2":case"st4":case"st5":case"st6":case"t3":case"st7":case"t4":case"st8":case"st9":case"t5":case"st10":case"t6":return{width:24,height:24};case"st11":case"t7":case"st12":case"st13":return{width:20,height:20};default:return{width:24,height:24}}}const t={level5:{arrow:{top:-9,right:0,bottom:-9,left:-15,borderRadius:15},underline:{top:-9,right:-15,bottom:-9,left:-15,borderRadius:15},clear:{top:-9,right:-15,bottom:-9,left:-15,borderRadius:15}},level4:{arrow:{top:-7,right:0,bottom:-7,left:-13,borderRadius:13},underline:{top:-7,right:-13,bottom:-7,left:-13,borderRadius:13},clear:{top:-7,right:-13,bottom:-7,left:-13,borderRadius:13}},level3:{arrow:{top:-5,right:0,bottom:-5,left:-11,borderRadius:11},underline:{top:-5,right:-11,bottom:-5,left:-11,borderRadius:11},clear:{top:-5,right:-11,bottom:-5,left:-11,borderRadius:11}},level2:{arrow:{top:-4,right:0,bottom:-4,left:-9,borderRadius:9},underline:{top:-4,right:-9,bottom:-4,left:-9,borderRadius:9},clear:{top:-4,right:-9,bottom:-4,left:-9,borderRadius:9}},level1:{arrow:{top:-3,right:0,bottom:-3,left:-7,borderRadius:7},underline:{top:-3,right:-7,bottom:-3,left:-7,borderRadius:7},clear:{top:-3,right:-7,bottom:-3,left:-7,borderRadius:7}}},k={t1:t.level5,st1:t.level5,st2:t.level4,st3:t.level4,t2:t.level4,st4:t.level4,st5:t.level4,st6:t.level4,t3:t.level3,st7:t.level3,t4:t.level3,st8:t.level3,st9:t.level2,t5:t.level2,st10:t.level2,t6:t.level1,st11:t.level1,t7:t.level1,st12:t.level1,st13:t.level1};TextButton.gap=8;

package/dist/esm/components/text-button/index.d.ts

@@ -0,0 +1,2 @@
+export { TextButton } from './TextButton';
+export type { TextButtonProps } from './TextButton';

package/dist/esm/components/text-button/index.js

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

package/dist/esm/components/text-field/OldTextField/TDSTextField.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { StyleProp, TextInput, ViewStyle } from 'react-native';
+import { TDSTextFieldContainerProps } from './TDSTextFieldContainer';
+import { TDSTextFieldContentProps } from './TDSTextFieldContent';
+export type TDSTextFieldSize = 'big' | 'medium' | 'classic';
+export type TDSTextFieldState = 'default' | 'focused' | 'error' | 'disabled';
+export type TDSTextFieldProps = Omit<ComponentProps<typeof TextInput>, 'clearButtonMode'> & Omit<TDSTextFieldContainerProps, 'focus' | 'children' | 'onPress'> & Pick<TDSTextFieldContentProps, 'leftItem' | 'rightItem'> & {
+    contentStyle?: StyleProp<ViewStyle>;
+};
+export declare const TDSTextField: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "clearButtonMode"> & Omit<TDSTextFieldContainerProps, "children" | "focus" | "onPress"> & Pick<TDSTextFieldContentProps, "leftItem" | "rightItem"> & {
+    contentStyle?: StyleProp<ViewStyle>;
+} & import("react").RefAttributes<TextInput>>;

package/dist/esm/components/text-field/OldTextField/TDSTextField.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as b}from"react/jsx-runtime";import{forwardRef as j,useState as B}from"react";import{Pressable as R,TextInput as z}from"react-native";import{useAdaptive as E,useTypographyTheme as O}from"../../../core";import{Icon as M}from"../../icon";import{useElementStyle as N}from"./hooks";import{TDSTextFieldContainer as P}from"./TDSTextFieldContainer";import{TDSTextFieldContent as v}from"./TDSTextFieldContent";import{getState as L}from"./utils";const U="TDSCommonInputAccessoryViewID";export const TDSTextField=j(function({label:d,helpText:y,error:s,size:r,style:S,disabled:e=!1,leftItem:i,rightItem:c,onFocus:h,onBlur:x,placeholder:g,editable:a=!0,clearable:D=!1,textInputStyle:I,value:l,onClear:C,contentStyle:F,...m},_){const[t,f]=B(!1),p=l!=null&&l.length>0,w=L({disabled:e,focus:t,error:s}),u=N(r,w),T=E(),{typography:A}=O(),V=(a?p&&t:p)&&D;return o(P,{label:d,helpText:y,error:s,focus:t,size:r,style:S,disabled:e,children:b(v,{disabled:e,focus:t,error:s,size:r,leftItem:i,rightItem:c,style:F,children:[o(z,{allowFontScaling:!1,style:[{flex:1,marginLeft:i?8:0,marginRight:c?8:0,textAlignVertical:"center",padding:0,fontSize:A.st10.fontSize},u.input,{color:u.input.color},I],ref:_,placeholder:g,placeholderTextColor:T.grey500,editable:!!(a&&!e),onFocus:n=>{f(!0),h?.(n)},onBlur:n=>{f(!1),x?.(n)},value:l,...m,inputAccessoryViewID:m.inputAccessoryViewID??U}),V?o(R,{accessibilityRole:"button",onPress:()=>{C?.()},children:o(M,{color:T.grey400,name:"icn-delete",size:20})}):null]})})});

package/dist/esm/components/text-field/OldTextField/TDSTextFieldContainer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { TDSTextFieldSize } from './TDSTextField';
+export interface TDSTextFieldContainerProps {
+    label?: string;
+    placeholder?: string;
+    helpText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    size: TDSTextFieldSize;
+    textInputStyle?: StyleProp<TextStyle>;
+    focus?: boolean;
+    children: React.ReactNode;
+    clearable?: boolean;
+    onClear?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function TDSTextFieldContainer({ label, helpText, error, focus: isFocused, size, style, disabled, children, }: TDSTextFieldContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/text-field/OldTextField/TDSTextFieldContainer.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r,jsxs as y}from"react/jsx-runtime";import{useTypographyTheme as h}from"../../../core";import{Txt as l}from"../../txt";import{View as u}from"react-native";import{useElementStyle as g}from"./hooks";import{getState as x}from"./utils";export function TDSTextFieldContainer({label:o,helpText:e,error:n,focus:i,size:s,style:m,disabled:p=!1,children:c}){const a=x({disabled:p,focus:i,error:n}),t=g(s,a),{typography:f}=h();return y(u,{style:[{marginTop:o!=null?0:8,marginBottom:e?0:8},m],children:[o!=null&&r(l,{typography:"t5",style:{...t.label,color:t.label.color,minHeight:f.t5.lineHeight},children:o}),c,e!==void 0&&r(l,{style:{...t.helpText,color:t.helpText.color},children:e})]})}

package/dist/esm/components/text-field/OldTextField/TDSTextFieldContent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { TDSTextFieldSize } from './TDSTextField';
+export interface TDSTextFieldContentProps {
+    disabled?: boolean;
+    focus?: boolean;
+    error?: boolean;
+    size: TDSTextFieldSize;
+    leftItem?: React.ReactElement<{
+        textfieldSize: TDSTextFieldSize;
+    }> | null;
+    rightItem?: React.ReactElement<{
+        textfieldSize: TDSTextFieldSize;
+    }> | null;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function TDSTextFieldContent({ disabled, focus, error, size, leftItem, rightItem, children, style, }: TDSTextFieldContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/text-field/OldTextField/TDSTextFieldContent.js

@@ -0,0 +1 @@
+"use strict";import{jsxs as d}from"react/jsx-runtime";import e from"react";import{View as p}from"react-native";import{useElementStyle as f}from"./hooks";import{getState as u}from"./utils";export function TDSTextFieldContent({disabled:i,focus:l,error:m,size:t,leftItem:n,rightItem:r,children:a,style:c}){const s=u({disabled:i,focus:l,error:m}),o=f(t,s);return d(p,{style:[{flexDirection:"row",alignItems:"center"},o.inputContainer,{backgroundColor:o.inputContainer.backgroundColor,borderBottomColor:o.inputContainer.borderBottomColor},c],children:[e.isValidElement(n)&&e.cloneElement(n,{textfieldSize:t}),a,e.isValidElement(r)&&e.cloneElement(r,{textfieldSize:t})]})}

package/dist/esm/components/text-field/OldTextField/TDSTextFieldItem.d.ts

@@ -0,0 +1,23 @@
+import { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
+import type { TDSTextFieldSize } from './TDSTextField';
+export declare function TDSTextFieldItem({ style, children }: {
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace TDSTextFieldItem {
+    var Label: typeof TDSTextFieldLabelItem;
+    var Icon: typeof TDSTextFieldIconItem;
+}
+declare function TDSTextFieldLabelItem({ label, style, textfieldSize, }: {
+    label: string;
+    textfieldSize?: TDSTextFieldSize;
+    style?: StyleProp<ViewStyle>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function TDSTextFieldIconItem({ style, name, size, color, onPress, }: {
+    name: string;
+    onPress?: TouchableOpacityProps['onPress'];
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+    color?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/text-field/OldTextField/TDSTextFieldItem.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t}from"react/jsx-runtime";import{useAdaptive as l}from"../../../core";import{colors as m}from"@toss-design-system/colors";import{Icon as c}from"../../icon";import{Txt as s}from"../../txt";import{TouchableOpacity as a,View as p}from"react-native";import{useMemo as u}from"react";export function TDSTextFieldItem({style:e,children:o}){return t(p,{style:[{alignItems:"center",justifyContent:"center"},e],children:o})}function y({label:e,style:o,textfieldSize:i}){const r=l(),n=u(()=>d({grey900:r.grey900}),[r.grey900]);return t(TDSTextFieldItem,{style:o,children:t(s,{...n[i??"medium"],children:e})})}function f({style:e,name:o,size:i,color:r=m.grey400,onPress:n}){return t(a,{onPress:n,children:t(TDSTextFieldItem,{style:e,children:t(c,{name:o,color:r,size:i})})})}TDSTextFieldItem.Label=y,TDSTextFieldItem.Icon=f;const d=({grey900:e})=>({big:{typography:"t1",fontWeight:"medium",color:e},medium:{typography:"t3",fontWeight:"regular",color:e},classic:{typography:"t4",fontWeight:"regular",color:e}});

package/dist/esm/components/text-field/OldTextField/TDSTextFieldSelectButton.d.ts

@@ -0,0 +1,8 @@
+import { TDSTextFieldContainerProps } from './TDSTextFieldContainer';
+interface TextFieldSelectButtonProps extends Omit<TDSTextFieldContainerProps, 'children' | 'rightItem'> {
+    placeholder: string;
+    value: string | undefined;
+    onPress: () => void;
+}
+export declare function TextFieldSelectButton({ value, placeholder, onPress, ...containerProps }: TextFieldSelectButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/text-field/OldTextField/TDSTextFieldSelectButton.js

@@ -0,0 +1 @@
+"use strict";import{jsx as r}from"react/jsx-runtime";import{useAdaptive as d}from"../../../core";import{PressableEffect as c}from"../../../interactions/pressable-effect";import{Pressable as f,Text as a}from"react-native";import{useMemo as p}from"react";import{getInputStyle as g}from"./styles";import{TDSTextFieldContainer as y}from"./TDSTextFieldContainer";import{TDSTextFieldItem as h}from"./TDSTextFieldItem";import{TDSTextFieldContent as x}from"./TDSTextFieldContent";export function TextFieldSelectButton({value:o,placeholder:s,onPress:l,...t}){const i=!!o,e=d(),m=t.size==="classic"?c:f,n=p(()=>g({grey400:e.grey400,grey900:e.grey900}),[e.grey400,e.grey900]);return r(y,{...t,children:r(m,{onPress:l,children:r(x,{rightItem:r(h.Icon,{name:"arrow-downwards"}),size:t.size,children:r(a,{style:[n["classic-default"],{flex:1,color:i?e.grey500:e.grey900,width:"100%"}],children:i?s:o})})})})}

package/dist/esm/components/text-field/OldTextField/TextArea.d.ts

@@ -0,0 +1,22 @@
+import { StyleProp, TextInput, TextStyle } from 'react-native';
+import { TDSTextFieldProps } from './TDSTextField';
+interface TextAreaProps extends Omit<TDSTextFieldProps, 'size' | 'multiline' | 'textInputStyle'> {
+    /**
+     *
+     * @description fixedHeight를 표현할때 사용합니다
+     * @example <TextArea textAreaStyle={{ height: 200 }} />
+     */
+    textAreaStyle?: StyleProp<TextStyle>;
+}
+/**
+ *
+ * @example
+ * <TextArea
+ *  label="레이블"
+ *  placeholder="플레이스홀더"
+ *  helpText="도움말입니다"
+ *  textAreaStyle={{}}
+ * />
+ */
+declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<TextInput>>;
+export default TextArea;

package/dist/esm/components/text-field/OldTextField/TextArea.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{useTypographyTheme as s}from"../../../core";import{forwardRef as f}from"react";import{TDSTextField as p}from"./TDSTextField";const a=f(function({textAreaStyle:t,...e},r){const{typography:o}=s(),{fontSize:i,lineHeight:m}=o.st10;return n(p,{ref:r,size:"classic",textInputStyle:[{minHeight:m*2+5,fontSize:i},t],multiline:!0,...e})});export default a;

package/dist/esm/components/text-field/OldTextField/hooks.d.ts

@@ -0,0 +1,16 @@
+import { TDSTextFieldSize, TDSTextFieldState } from './TDSTextField';
+export declare function useElementStyle(size: TDSTextFieldSize, state: TDSTextFieldState): {
+    label: Omit<import("react-native").TextStyle, "color"> & {
+        color: import("../../txt").TxtStyleProps["color"];
+    };
+    input: Omit<import("react-native").TextStyle, "color"> & {
+        color: import("../../txt").TxtStyleProps["color"];
+    };
+    inputContainer: Omit<import("react-native").ViewStyle, "borderBottomColor" | "backgroundColor"> & {
+        borderBottomColor: string | undefined;
+        backgroundColor: string | undefined;
+    };
+    helpText: Omit<import("react-native").TextStyle, "color"> & {
+        color: import("../../txt").TxtStyleProps["color"];
+    };
+};

package/dist/esm/components/text-field/OldTextField/hooks.js

@@ -0,0 +1 @@
+"use strict";import{useMemo as p}from"react";import{StyleSheet as y}from"react-native";import{useAdaptive as u}from"../../../core";import{getHelpTextStyle as a,getInputContainerStyle as f,getInputStyle as $,getLabelStyle as S}from"./styles";export function useElementStyle(t,r){const e=u();return p(()=>{const g=$({grey400:e.grey400,grey900:e.grey900}),l=S({grey700:e.grey700,grey800:e.grey800}),n=a({grey500:e.grey500,grey600:e.grey600,grey700:e.grey700}),o=f({grey50:e.grey50,grey100:e.grey100,grey200:e.grey200});return{label:y.flatten([l[`${t}-default`],l[`${t}-${r}`]]),input:y.flatten([g[`${t}-default`],g[`${t}-${r}`]]),inputContainer:y.flatten([o[`${t}-default`],o[`${t}-${r}`]]),helpText:y.flatten([n[`${t}-default`],n[`${t}-${r}`]])}},[e.grey50,e.grey100,e.grey200,e.grey400,e.grey500,e.grey600,e.grey700,e.grey800,e.grey900,t,r])}