@toss/tds-react-native 1.0.0

package/dist/cjs/components/stepper-row/StepperRowNumberIcon.d.ts

@@ -0,0 +1,8 @@
+interface StepperRowNumberIconProps {
+    /**
+     * `StepperRow` 컴포넌트 왼쪽에 순서를 나타내는 숫자를 설정해요.
+     */
+    number: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+}
+export declare function StepperRowNumberIcon({ number }: StepperRowNumberIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/stepper-row/StepperRowNumberIcon.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StepperRowNumberIcon=StepperRowNumberIcon;const jsx_runtime_1=require("react/jsx-runtime"),asset_1=require("../asset"),core_1=require("../../core"),a11yCondition_1=require("./constants/a11yCondition"),StepperRowContext_1=require("./StepperRowContext"),frameShape=asset_1.Asset.frameShape.CleanW32,a11yFrameShape=asset_1.Asset.frameShape.CleanW40;function StepperRowNumberIcon({number:e}){(0,StepperRowContext_1.useUpdateStepperRowLeft)({type:"numberIcon"});const t=(0,core_1.useFontScaleCondition)(a11yCondition_1.a11yCondition.leftAsset),{colorPreference:o}=(0,core_1.useColorPreference)();return(0,jsx_runtime_1.jsx)(asset_1.Asset.Icon,{frameShape:t?a11yFrameShape:frameShape,name:`icon-step${e}-rounded-${o}`,accessibilityLabel:`${e}\uBC88`})}

package/dist/cjs/components/stepper-row/StepperRowRightArrow.d.ts

@@ -0,0 +1,20 @@
+import { FrameShapeType } from '../asset/types';
+export interface StepperRowRightArrowProps {
+    /**
+     * 아이콘의 이름을 지정해요.
+     * @default 'icon-arrow-right-mono'
+     */
+    name?: string;
+    /**
+     * 아이콘의 색상을 지정해요.
+     * @default adaptive.grey400
+     */
+    color?: string;
+    /**
+     * 프레임의 모양을 설정해요.
+     * 더 큰 텍스트 스케일이 160보다 크거나 같으면, `Asset.frameShape.CleanW32` 로 자동 변경돼요.
+     * @default Asset.frameShape.CleanW24
+     */
+    frameShape?: FrameShapeType;
+}
+export declare function StepperRowRightArrow({ name, color, frameShape }: StepperRowRightArrowProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/stepper-row/StepperRowRightArrow.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StepperRowRightArrow=StepperRowRightArrow;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),asset_1=require("../asset"),StepperRowContext_1=require("./StepperRowContext");function StepperRowRightArrow({name:e,color:r,frameShape:t}){const o=(0,core_1.useAdaptive)();return(0,StepperRowContext_1.useUpdateStepperRowRight)({type:"arrow"}),(0,jsx_runtime_1.jsx)(asset_1.Asset.Icon,{name:e??"icon-arrow-right-mono",color:r??o.grey400,style:{marginRight:-8},frameShape:t})}

package/dist/cjs/components/stepper-row/StepperRowRightButton.d.ts

@@ -0,0 +1,5 @@
+import { Button } from '../button';
+import { ComponentProps } from 'react';
+type StepperRowRightButtonProps = ComponentProps<typeof Button>;
+export declare function StepperRowRightButton({ size, type, ...restProps }: StepperRowRightButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/stepper-row/StepperRowRightButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StepperRowRightButton=StepperRowRightButton;const jsx_runtime_1=require("react/jsx-runtime"),button_1=require("../button"),StepperRowContext_1=require("./StepperRowContext");function StepperRowRightButton({size:t="tiny",type:e="primary",...r}){return(0,StepperRowContext_1.useUpdateStepperRowRight)({type:"button"}),(0,jsx_runtime_1.jsx)(button_1.Button,{size:t,type:e,...r})}

package/dist/cjs/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/cjs/components/stepper-row/StepperRowTexts.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StepperRowTexts=StepperRowTexts;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../core"),paragraph_1=require("../paragraph"),StepperRowContext_1=require("./StepperRowContext"),isReactText=e=>typeof e=="string"||typeof e=="number",isParagraphText=e=>(0,react_1.isValidElement)(e)&&(e.type===paragraph_1.Text||e.type===paragraph_1.Text),typeVariants={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"}}};function StepperRowTexts({type:e,title:i,description:t,titleProps:p,descriptionProps:l}){const r=(0,core_1.useAdaptive)();(0,StepperRowContext_1.useUpdateStepperRowCenter)({type:e,hasDescription:t!=null});const o=react_1.Children.only(isReactText(i)?(0,jsx_runtime_1.jsx)(paragraph_1.Text,{color:r.grey800,children:i}):i),n=t?react_1.Children.only(isReactText(t)?(0,jsx_runtime_1.jsx)(paragraph_1.Text,{style:{color:r.grey600,paddingTop:2},children:t}):t):void 0,s=typeVariants[e],c=isParagraphText(o)?(0,react_1.cloneElement)(o,{...s.title,color:r.grey800,...o.props,...p}):o,a=isParagraphText(n)?(0,react_1.cloneElement)(n,{...s.description,color:r.grey600,...n.props,...l}):n;return(0,jsx_runtime_1.jsxs)(react_native_1.View,{children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{flexDirection:"row"},children:c}),t&&(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{flexDirection:"row"},children:a})]})}

package/dist/cjs/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/cjs/components/stepper-row/constants/a11yCondition.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.a11yCondition=void 0,exports.a11yCondition={leftAsset:{biggerThanOrEqualTo:160},center:{biggerThanOrEqualTo:140},rightArrow:{biggerThanOrEqualTo:160},rightButtonAlign:{biggerThanOrEqualTo:200},rightButtonPaddingTop:{biggerThanOrEqualTo:120,smallerThan:200}};

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StepperRow=void 0;var StepperRow_1=require("./StepperRow");Object.defineProperty(exports,"StepperRow",{enumerable:!0,get:function(){return StepperRow_1.StepperRow}});

package/dist/cjs/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/cjs/components/stepper-row/utils/padding.js

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

package/dist/cjs/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/cjs/components/switch/Switch.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),colors_1=require("@toss-design-system/colors"),animation_1=require("../../interactions/animation"),pressable_effect_1=require("../../interactions/pressable-effect"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),useSwitchAnimation_1=require("./useSwitchAnimation");function Switch({checked:r,defaultChecked:c=!1,disabled:e,style:a,onPress:n,onCheckedChange:i,accessibilityState:l,...u}){const[t,o]=(0,utils_1.useControlled)({controlledValue:r,defaultValue:c}),{reduceMotionEnabled:f}=(0,utils_1.useAccessibilityInfo)(),s=(0,react_1.useMemo)(()=>t===!0?"on":"off",[t]),{backgroundStyle:m,animatedKnobStyle:d,startSwitchOnAnimation:y,startSwitchOffAnoimation:h}=(0,useSwitchAnimation_1.useSwitchAnimation)({animationState:s,disabled:e}),{startPressInAnim:S,startPressOutAnim:A,scaleAnim:w}=(0,pressable_effect_1.usePressAnim)({pressIn:{scale:.96,opacity:1},pressOut:{scale:1,opacity:1}}),{startWiggle:p,style:_}=(0,animation_1.useWiggleAnimation)({direction:"x",type:"small"}),b=(0,react_1.useCallback)(g=>{e||(n?.(g),i?.(!t),o(!t))},[t,e,n,i,o]);return(0,react_1.useEffect)(()=>{s==="on"?y():h()},[s]),(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{onPress:b,onPressIn:e?p:S,onPressOut:e?void 0:A,style:[styles.container,a],accessibilityRole:"switch",accessible:!0,accessibilityState:{checked:t,disabled:e,...l},...u,children:(0,jsx_runtime_1.jsxs)(react_native_1.Animated.View,{style:[react_native_1.Platform.OS==="ios"?{opacity:e?.3:1}:void 0,f?void 0:w,e?_:void 0],children:[(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[m,{width:WIDTH,height:HEIGHT,borderRadius:RADIUS}]}),(0,jsx_runtime_1.jsx)(react_native_1.Animated.View,{style:[styles.knob,d]})]})})}const WIDTH=50,HEIGHT=30,RADIUS=15,styles=react_native_1.StyleSheet.create({container:{alignSelf:"flex-start"},knob:{width:16,height:16,backgroundColor:colors_1.colors.white,borderRadius:8,position:"absolute",left:7,top:7}});exports.default=Switch;

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

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

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

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Switch=void 0;var Switch_1=require("./Switch");Object.defineProperty(exports,"Switch",{enumerable:!0,get:function(){return __importDefault(Switch_1).default}});

package/dist/cjs/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/cjs/components/switch/useSwitchAnimation.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSwitchAnimation=useSwitchAnimation;const colors_1=require("@toss-design-system/colors"),core_1=require("../../core"),hex_to_rgba_1=__importDefault(require("hex-to-rgba")),react_1=require("react"),react_native_1=require("react-native");function useSwitchAnimation({animationState:e,disabled:s}){const o=(0,core_1.useAdaptive)(),i=(0,react_1.useMemo)(()=>({grey200:(0,hex_to_rgba_1.default)(o.grey200??colors_1.colors.grey200,react_native_1.Platform.OS==="android"&&s?.3:1),blue500:(0,hex_to_rgba_1.default)(colors_1.colors.blue500,react_native_1.Platform.OS==="android"&&s?.3:1)}),[o.grey200,s]),a=(0,react_1.useRef)(new react_native_1.Animated.Value(e==="on"?1:0)).current,r=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.handler[e].translateX)).current,n=(0,react_1.useRef)(new react_native_1.Animated.Value(animationConfig.handler[e].scale)).current,t=!1,l=(0,react_1.useCallback)(()=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(r,{toValue:animationConfig.handler.on.translateX,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(n,{toValue:animationConfig.handler.on.scale,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(a,{toValue:1,useNativeDriver:t,...SPRING_CONFIG})]).start()},[n,r,a,t]),u=(0,react_1.useCallback)(()=>{react_native_1.Animated.parallel([react_native_1.Animated.spring(r,{toValue:animationConfig.handler.off.translateX,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(n,{toValue:animationConfig.handler.off.scale,useNativeDriver:t,...SPRING_CONFIG}),react_native_1.Animated.spring(a,{toValue:0,useNativeDriver:t,...SPRING_CONFIG})]).start()},[n,r,a,t]);return{backgroundStyle:{backgroundColor:a.interpolate({inputRange:[0,1],outputRange:[i.grey200,i.blue500]})},animatedKnobStyle:{transform:[{translateX:r},{scale:n}]},startSwitchOnAnimation:l,startSwitchOffAnoimation:u}}const animationConfig={handler:{on:{scale:1.5,translateX:20},off:{scale:1,translateX:0}}},SPRING_CONFIG={stiffness:1e3,damping:52};

package/dist/cjs/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/cjs/components/tab/FluidTab.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FluidTab=FluidTab;const jsx_runtime_1=require("react/jsx-runtime"),easings_1=require("@toss-design-system/easings"),core_1=require("../../core"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),animated_1=require("../../interactions/animated"),IndicatorContext_1=require("./IndicatorContext"),TabContext_1=require("./TabContext");function FluidTab({defaultValue:c,value:u,children:d,onChange:o,style:h,size:f="large",...x}){const n=(0,core_1.useAdaptive)(),[b,a]=(0,utils_1.useControlled)({controlledValue:u,defaultValue:c}),w=(0,react_1.useCallback)(r=>{o?.(r),a(r)},[o,a]),[e,m]=(0,react_1.useState)(0),i=(0,react_1.useRef)(new animated_1.Animated.Value(e)).current,[t,y]=(0,react_1.useState)(0),V={width:t,transform:[{translateX:i}]};(0,react_1.useEffect)(()=>{animated_1.Animated.spring(i,{toValue:e,useNativeDriver:!0,...easings_1.spring.quick}).start()},[e,i]);const s=(0,react_1.useRef)(null),l=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{s.current!=null&&l.current?.scrollTo({x:Math.max(0,e-(s.current-t)/2)})},[e,t]);const g={...styles.border,borderBottomColor:n.grey200};return(0,jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider,{value:{fluid:!0,value:b,onChange:w,size:f},children:(0,jsx_runtime_1.jsx)(IndicatorContext_1.IndicatorContext.Provider,{value:{width:t,translateX:e,setWidth:y,setTranslateX:m},children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{onLayout:r=>{s.current=r.nativeEvent.layout.width},children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[g,styles.fluidBorder]}),(0,jsx_runtime_1.jsx)(react_native_1.ScrollView,{ref:l,horizontal:!0,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,h],accessibilityRole:"tablist",...x,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.fluidPadding]}),d]}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:[{backgroundColor:n.grey800},styles.indicator,V]})]})})]})})})}const styles=react_native_1.StyleSheet.create({fluidPadding:{width:14,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth},fluidBorder:{position:"absolute",bottom:2},indicator:{height:2,borderRadius:10,bottom:1}});

package/dist/cjs/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/cjs/components/tab/FullTab.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FullTab=FullTab;const jsx_runtime_1=require("react/jsx-runtime"),easings_1=require("@toss-design-system/easings"),core_1=require("../../core"),utils_1=require("../../utils"),react_1=require("react"),react_native_1=require("react-native"),animated_1=require("../../interactions/animated"),IndicatorContext_1=require("./IndicatorContext"),TabContext_1=require("./TabContext");function FullTab({defaultValue:o,value:l,children:c,onChange:r,style:d,size:u="large",...h}){const i=(0,core_1.useAdaptive)(),[x,s]=(0,utils_1.useControlled)({controlledValue:l,defaultValue:o}),b=(0,react_1.useCallback)(a=>{r?.(a),s(a)},[r,s]),[e,w]=(0,react_1.useState)(0),t=(0,react_1.useRef)(new animated_1.Animated.Value(e)).current,[n,y]=(0,react_1.useState)(0),g={width:n,transform:[{translateX:t}]};(0,react_1.useEffect)(()=>{animated_1.Animated.spring(t,{toValue:e,useNativeDriver:!0,...easings_1.spring.quick}).start()},[e,t]);const m={...styles.border,borderBottomColor:i.grey200};return(0,jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider,{value:{fluid:!1,value:x,onChange:b,size:u},children:(0,jsx_runtime_1.jsx)(IndicatorContext_1.IndicatorContext.Provider,{value:{width:n,translateX:e,setWidth:y,setTranslateX:w},children:(0,jsx_runtime_1.jsx)(react_native_1.View,{children:(0,jsx_runtime_1.jsx)(react_native_1.ScrollView,{horizontal:!1,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,d],accessibilityRole:"tablist",...h,children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.padding]}),c,(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.padding})]}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:m}),(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:[{backgroundColor:i.grey800},styles.indicator,g]})]})})})})})}const styles=react_native_1.StyleSheet.create({padding:{width:20,height:1},itemList:{flexDirection:"row",width:"100%"},border:{width:"100%",borderBottomWidth:react_native_1.StyleSheet.hairlineWidth},indicator:{height:2,borderRadius:10,bottom:1}});

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

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

package/dist/cjs/components/tab/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/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/cjs/components/tab/IndicatorContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.IndicatorContext=void 0;const react_1=require("react");exports.IndicatorContext=(0,react_1.createContext)({width:0,translateX:0,setWidth:()=>{},setTranslateX:()=>{}});

package/dist/cjs/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/cjs/components/tab/Tab.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tab=Tab;const jsx_runtime_1=require("react/jsx-runtime"),FullTab_1=require("./FullTab"),FluidTab_1=require("./FluidTab"),TabItem_1=require("./TabItem");function Tab({fluid:r,...e}){return r?(0,jsx_runtime_1.jsx)(FluidTab_1.FluidTab,{...e}):(0,jsx_runtime_1.jsx)(FullTab_1.FullTab,{...e})}Tab.Item=TabItem_1.TabItem;

package/dist/cjs/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/cjs/components/tab/TabContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TabContext=void 0;const react_1=require("react");exports.TabContext=(0,react_1.createContext)({fluid:!1,value:void 0,onChange:()=>{},size:"large"});

package/dist/cjs/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/cjs/components/tab/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("../txt"),react_1=require("react"),react_native_1=require("react-native"),animated_1=require("../../interactions/animated"),IndicatorContext_1=require("./IndicatorContext"),TabContext_1=require("./TabContext"),easings_1=require("@toss-design-system/easings");function TabItem({redBean:n=!1,value:t,children:s,style:m,onPress:u}){const{size:d,fluid:g,value:p,onChange:x}=(0,react_1.useContext)(TabContext_1.TabContext),o=(0,react_1.useRef)(new animated_1.Animated.Value(1)).current,r=(0,react_1.useMemo)(()=>t===p,[t,p]),f=(0,core_1.useAdaptive)(),h=(0,react_1.useCallback)(l=>{u?.(l),x?.(t)},[u,x,t]),e=getSpacingStyles({size:d,fluid:g}),[i,y]=(0,react_1.useState)(),{setWidth:a,setTranslateX:c}=(0,react_1.useContext)(IndicatorContext_1.IndicatorContext);return(0,react_1.useEffect)(()=>{!r||i==null||c==null||a==null||(c(i.x+e.left),a(i.width-(e.left+e.right)))},[r,i,c,a,e.left,e.right]),(0,jsx_runtime_1.jsxs)(react_native_1.Pressable,{accessibilityRole:"tab",accessibilityState:{selected:r},onPress:h,style:[styles.container,{paddingTop:e.top,paddingBottom:e.bottom,paddingHorizontal:e.left,minWidth:g?64:void 0},m],onLayout:l=>{y(l.nativeEvent.layout)},onPressIn:()=>{animated_1.Animated.spring(o,{toValue:.96,useNativeDriver:!0,...easings_1.spring.rapid}).start()},onPressOut:()=>{animated_1.Animated.spring(o,{toValue:1,useNativeDriver:!0,...easings_1.spring.quick}).start()},children:[(0,jsx_runtime_1.jsx)(animated_1.Animated.View,{style:[styles.innerContainer,{transform:[{scale:o}]}],children:(0,jsx_runtime_1.jsx)(txt_1.Txt,{numberOfLines:1,ellipsizeMode:"clip",typography:d==="large"?"t5":"t6",fontWeight:r?"bold":"semiBold",color:r?f.grey800:f.grey600,children:s})}),n?(0,jsx_runtime_1.jsx)(react_native_1.View,{style:styles.redBean}):null]})}const styles=react_native_1.StyleSheet.create({container:{flex:1},innerContainer:{alignItems:"center",justifyContent:"center"},redBean:{position:"absolute",top:4,right:0,width:6,height:6,borderRadius:3,backgroundColor:"#f44336"}}),getSpacingStyles=({size:n,fluid:t})=>{const s=n==="large"&&t?12:8;return{top:n==="large"?12:8,bottom:n==="large"?14:8,left:s,right:s}};

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tab=void 0;var Tab_1=require("./Tab");Object.defineProperty(exports,"Tab",{enumerable:!0,get:function(){return Tab_1.Tab}});

package/dist/cjs/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/cjs/components/tab/type.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/cjs/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/cjs/components/table-row/TableRow.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_native_1=require("react-native"),TableRowContext_1=require("./TableRowContext"),TableRowText_1=require("./TableRowText"),utils_1=require("../../utils");function TableRow({align:i,leftRatio:e,left:t,right:r,horizontalPadding:n=24,style:l}){const s=e!=null?100-e:void 0;return(0,jsx_runtime_1.jsx)(TableRowContext_1.TableRowContext.Provider,{value:{align:i},children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{justifyContent:i==="left"?"flex-start":"space-between",paddingHorizontal:n},styles.container,l],children:[(0,jsx_runtime_1.jsx)(react_native_1.View,{style:[styles.left,{flex:e}],children:(0,utils_1.isReactText)(t)?(0,jsx_runtime_1.jsx)(TableRowText_1.TableRowLeftText,{children:t}):t}),(0,jsx_runtime_1.jsx)(react_native_1.View,{style:{flex:s},children:(0,utils_1.isReactText)(r)?(0,jsx_runtime_1.jsx)(TableRowText_1.TableRowRightText,{children:r}):r})]})})}const styles=react_native_1.StyleSheet.create({container:{flexDirection:"row",flex:1,paddingVertical:16},left:{marginRight:16}});TableRow.LeftText=TableRowText_1.TableRowLeftText,TableRow.RightText=TableRowText_1.TableRowRightText,exports.default=TableRow;

package/dist/cjs/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/cjs/components/table-row/TableRowContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TableRowContext=void 0;const react_1=require("react");exports.TableRowContext=(0,react_1.createContext)({align:"left"});

package/dist/cjs/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/cjs/components/table-row/TableRowText.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TableRowLeftText=TableRowLeftText,exports.TableRowRightText=TableRowRightText;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../core"),txt_1=require("../txt"),react_1=require("react"),TableRowContext_1=require("./TableRowContext");function TableRowLeftText({typography:e="st10",color:t,...o}){const r=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:e,color:t??r.grey700,...o})}function TableRowRightText({typography:e="st10",color:t,style:o,...r}){const{align:s}=(0,react_1.useContext)(TableRowContext_1.TableRowContext),n=(0,core_1.useAdaptive)();return(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:e,color:t??n.grey900,style:[{textAlign:s},o],...r})}

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

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

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

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TableRow=void 0;var TableRow_1=require("./TableRow");Object.defineProperty(exports,"TableRow",{enumerable:!0,get:function(){return __importDefault(TableRow_1).default}});

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/cjs/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/cjs/components/text-button/TextButton.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=Object.create?function(t,e,i,r){r===void 0&&(r=i);var o=Object.getOwnPropertyDescriptor(e,i);(!o||("get"in o?!e.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(t,r,o)}:function(t,e,i,r){r===void 0&&(r=i),t[r]=e[i]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(){var t=function(e){return t=Object.getOwnPropertyNames||function(i){var r=[];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(r[r.length]=o);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var i={};if(e!=null)for(var r=t(e),o=0;o<r.length;o++)r[o]!=="default"&&__createBinding(i,e,r[o]);return __setModuleDefault(i,e),i}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextButton=TextButton;const jsx_runtime_1=require("react/jsx-runtime"),constants_1=require("../../constants"),core_1=require("../../core"),icon_1=require("../icon"),Paragraph=__importStar(require("../paragraph")),pressable_effect_1=require("../../interactions/pressable-effect"),react_1=require("react"),react_native_1=require("react-native");function TextButton({variant:t="clear",typography:e,fontWeight:i,color:r,style:o,disabled:a=!1,onPress:u,children:d}){const s=(0,core_1.useAdaptive)(),{typographyLevel:c}=(0,core_1.useTypographyTheme)(),l=r??s.grey800,n=(0,react_1.useMemo)(()=>(0,constants_1.getLinkTypography)(c),[c])[e];return(0,jsx_runtime_1.jsx)(pressable_effect_1.PressableEffect,{accessibilityRole:"button",underlay:(0,jsx_runtime_1.jsx)(pressable_effect_1.PressableEffect.Underlay,{style:{position:"absolute",backgroundColor:s.greyOpacity100,...textButtonBackgroundStyleMapper[e][t]}}),onPress:a?void 0:u,style:{alignSelf:"flex-start"},children:(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[styles.base,{paddingVertical:n.verticalPadding,paddingHorizontal:n.horizontalPadding,paddingRight:t==="arrow"?0:n.horizontalPadding,marginHorizontal:n.horizontalPadding*-1,marginVertical:n.verticalPadding*-1,marginRight:t==="arrow"?0:n.horizontalPadding*-1,opacity:a?.38:1},o],children:[(0,jsx_runtime_1.jsx)(Paragraph.Text,{typography:e,fontWeight:i,color:l,style:{textDecorationLine:t==="underline"?"underline":"none",textDecorationColor:l},children:d}),t==="arrow"?(0,jsx_runtime_1.jsx)(icon_1.Icon,{name:"arrow-rightwards",size:getTextButtonIconFrameSize(e).width,color:l,"data-logging-label":"arrow-rightwards"}):void 0]})})}const styles=react_native_1.StyleSheet.create({base:{alignItems:"center",justifyContent:"center",flexDirection:"row",borderRadius:8}});function getTextButtonIconFrameSize(t){switch(t){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 backgroundStyleMapper={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}}},textButtonBackgroundStyleMapper={t1:backgroundStyleMapper.level5,st1:backgroundStyleMapper.level5,st2:backgroundStyleMapper.level4,st3:backgroundStyleMapper.level4,t2:backgroundStyleMapper.level4,st4:backgroundStyleMapper.level4,st5:backgroundStyleMapper.level4,st6:backgroundStyleMapper.level4,t3:backgroundStyleMapper.level3,st7:backgroundStyleMapper.level3,t4:backgroundStyleMapper.level3,st8:backgroundStyleMapper.level3,st9:backgroundStyleMapper.level2,t5:backgroundStyleMapper.level2,st10:backgroundStyleMapper.level2,t6:backgroundStyleMapper.level1,st11:backgroundStyleMapper.level1,t7:backgroundStyleMapper.level1,st12:backgroundStyleMapper.level1,st13:backgroundStyleMapper.level1};TextButton.gap=8;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextButton=void 0;var TextButton_1=require("./TextButton");Object.defineProperty(exports,"TextButton",{enumerable:!0,get:function(){return TextButton_1.TextButton}});

package/dist/cjs/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/cjs/components/text-field/OldTextField/TDSTextField.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TDSTextField=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),react_native_1=require("react-native"),core_1=require("../../../core"),icon_1=require("../../icon"),hooks_1=require("./hooks"),TDSTextFieldContainer_1=require("./TDSTextFieldContainer"),TDSTextFieldContent_1=require("./TDSTextFieldContent"),utils_1=require("./utils"),TDS_COMMON_INPUT_ACCESSORY_VIEW_ID="TDSCommonInputAccessoryViewID";exports.TDSTextField=(0,react_1.forwardRef)(function({label:S,helpText:_,error:o,size:n,style:p,disabled:e=!1,leftItem:i,rightItem:l,onFocus:f,onBlur:y,placeholder:h,editable:c=!0,clearable:D=!1,textInputStyle:F,value:s,onClear:g,contentStyle:C,...a},m){const[t,u]=(0,react_1.useState)(!1),T=s!=null&&s.length>0,q=(0,utils_1.getState)({disabled:e,focus:t,error:o}),d=(0,hooks_1.useElementStyle)(n,q),x=(0,core_1.useAdaptive)(),{typography:I}=(0,core_1.useTypographyTheme)(),j=(c?T&&t:T)&&D;return(0,jsx_runtime_1.jsx)(TDSTextFieldContainer_1.TDSTextFieldContainer,{label:S,helpText:_,error:o,focus:t,size:n,style:p,disabled:e,children:(0,jsx_runtime_1.jsxs)(TDSTextFieldContent_1.TDSTextFieldContent,{disabled:e,focus:t,error:o,size:n,leftItem:i,rightItem:l,style:C,children:[(0,jsx_runtime_1.jsx)(react_native_1.TextInput,{allowFontScaling:!1,style:[{flex:1,marginLeft:i?8:0,marginRight:l?8:0,textAlignVertical:"center",padding:0,fontSize:I.st10.fontSize},d.input,{color:d.input.color},F],ref:m,placeholder:h,placeholderTextColor:x.grey500,editable:!!(c&&!e),onFocus:r=>{u(!0),f?.(r)},onBlur:r=>{u(!1),y?.(r)},value:s,...a,inputAccessoryViewID:a.inputAccessoryViewID??TDS_COMMON_INPUT_ACCESSORY_VIEW_ID}),j?(0,jsx_runtime_1.jsx)(react_native_1.Pressable,{accessibilityRole:"button",onPress:()=>{g?.()},children:(0,jsx_runtime_1.jsx)(icon_1.Icon,{color:x.grey400,name:"icn-delete",size:20})}):null]})})});

package/dist/cjs/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/cjs/components/text-field/OldTextField/TDSTextFieldContainer.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TDSTextFieldContainer=TDSTextFieldContainer;const jsx_runtime_1=require("react/jsx-runtime"),core_1=require("../../../core"),txt_1=require("../../txt"),react_native_1=require("react-native"),hooks_1=require("./hooks"),utils_1=require("./utils");function TDSTextFieldContainer({label:t,helpText:r,error:o,focus:n,size:s,style:i,disabled:c=!1,children:l}){const u=(0,utils_1.getState)({disabled:c,focus:n,error:o}),e=(0,hooks_1.useElementStyle)(s,u),{typography:a}=(0,core_1.useTypographyTheme)();return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{marginTop:t!=null?0:8,marginBottom:r?0:8},i],children:[t!=null&&(0,jsx_runtime_1.jsx)(txt_1.Txt,{typography:"t5",style:{...e.label,color:e.label.color,minHeight:a.t5.lineHeight},children:t}),l,r!==void 0&&(0,jsx_runtime_1.jsx)(txt_1.Txt,{style:{...e.helpText,color:e.helpText.color},children:r})]})}

package/dist/cjs/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/cjs/components/text-field/OldTextField/TDSTextFieldContent.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TDSTextFieldContent=TDSTextFieldContent;const jsx_runtime_1=require("react/jsx-runtime"),react_1=__importDefault(require("react")),react_native_1=require("react-native"),hooks_1=require("./hooks"),utils_1=require("./utils");function TDSTextFieldContent({disabled:e,focus:i,error:l,size:t,leftItem:n,rightItem:o,children:u,style:s}){const a=(0,utils_1.getState)({disabled:e,focus:i,error:l}),r=(0,hooks_1.useElementStyle)(t,a);return(0,jsx_runtime_1.jsxs)(react_native_1.View,{style:[{flexDirection:"row",alignItems:"center"},r.inputContainer,{backgroundColor:r.inputContainer.backgroundColor,borderBottomColor:r.inputContainer.borderBottomColor},s],children:[react_1.default.isValidElement(n)&&react_1.default.cloneElement(n,{textfieldSize:t}),u,react_1.default.isValidElement(o)&&react_1.default.cloneElement(o,{textfieldSize:t})]})}

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