@toss/tds-react-native 1.3.4 → 1.3.6

package/dist/esm/components/slider/utils.test.js

@@ -1 +1 @@
-"use strict";import{describe as a,it as m,expect as e}from"@jest/globals";import{clamp as o,getNearestSteppedValue as t}from"./utils.js";a("clamp \uD14C\uC2A4\uD2B8",()=>{m("min, max \uC774\uB0B4\uC758 \uAC12\uC774\uB77C\uBA74 \uB0B4\uBD80 \uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(o(12,10,100)).toBe(12)}),m("min\uBCF4\uB2E4 \uC791\uC73C\uBA74 min\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(o(5,10,100)).toBe(10)}),m("max\uBCF4\uB2E4 \uD06C\uBA74 max\uB97C \uBC18\uD658\uD55C\uB2E4",()=>{e(o(120,10,100)).toBe(100)})}),a("getNearestSteppedValue",()=>{m("min, max \uB0B4\uC5D0 \uC788\uB2E4\uBA74 \uCD08\uAE30\uAC12\uC5D0\uC11C step\uB9CC\uD07C \uC6C0\uC9C1\uC778 \uAC12\uC744 \uAD6C\uD55C\uB2E4",()=>{e(t(2,-.5,100,3)).toBe(2.5),e(t(-8,-100,100,5)).toBe(-10),e(t(-6,-100,100,5)).toBe(-5),e(t(3,-100,100,5)).toBe(5),e(t(2,-100,100,5)).toBe(0),e(t(-30+3.5781601728019066,-100,100,10)).toBe(-30)}),m("min, max\uAC12\uC744 \uBC97\uC5B4\uB098\uBA74 min, max\uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(t(-6.2,-2.5,100,3)).toBe(-2.5),e(t(106.2,-2.5,100,3)).toBe(100)})});
+"use strict";import{describe as a,it as m,expect as e}from"@jest/globals";import{clamp as o,getNearestSteppedValue as t}from"./utils";a("clamp \uD14C\uC2A4\uD2B8",()=>{m("min, max \uC774\uB0B4\uC758 \uAC12\uC774\uB77C\uBA74 \uB0B4\uBD80 \uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(o(12,10,100)).toBe(12)}),m("min\uBCF4\uB2E4 \uC791\uC73C\uBA74 min\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(o(5,10,100)).toBe(10)}),m("max\uBCF4\uB2E4 \uD06C\uBA74 max\uB97C \uBC18\uD658\uD55C\uB2E4",()=>{e(o(120,10,100)).toBe(100)})}),a("getNearestSteppedValue",()=>{m("min, max \uB0B4\uC5D0 \uC788\uB2E4\uBA74 \uCD08\uAE30\uAC12\uC5D0\uC11C step\uB9CC\uD07C \uC6C0\uC9C1\uC778 \uAC12\uC744 \uAD6C\uD55C\uB2E4",()=>{e(t(2,-.5,100,3)).toBe(2.5),e(t(-8,-100,100,5)).toBe(-10),e(t(-6,-100,100,5)).toBe(-5),e(t(3,-100,100,5)).toBe(5),e(t(2,-100,100,5)).toBe(0),e(t(-30+3.5781601728019066,-100,100,10)).toBe(-30)}),m("min, max\uAC12\uC744 \uBC97\uC5B4\uB098\uBA74 min, max\uAC12\uC744 \uBC18\uD658\uD55C\uB2E4",()=>{e(t(-6.2,-2.5,100,3)).toBe(-2.5),e(t(106.2,-2.5,100,3)).toBe(100)})});

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

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
-import { StepperRowAssetFrame } from './StepperRowAssetFrame.js';
-import { StepperRowNumberIcon } from './StepperRowNumberIcon.js';
-import { StepperRowRightArrow } from './StepperRowRightArrow.js';
-import { StepperRowRightButton } from './StepperRowRightButton.js';
-import { StepperRowTexts } from './StepperRowTexts.js';
+import { StepperRowAssetFrame } from './StepperRowAssetFrame';
+import { StepperRowNumberIcon } from './StepperRowNumberIcon';
+import { StepperRowRightArrow } from './StepperRowRightArrow';
+import { StepperRowRightButton } from './StepperRowRightButton';
+import { StepperRowTexts } from './StepperRowTexts';
 interface StepperRowProps {
     /**
      * `StepperRow` 컴포넌트의 왼쪽 영역에 표시될 컴포넌트를 지정해요. 주로 `StepperRow.NumberIcon`나 `StepperRow.AssetFrame` 컴포넌트가 사용돼요.

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

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useFontScaleCondition as s,useAdaptive as x}from"../../core/index.js";import{StyleSheet as C,View as e}from"react-native";import{a11yCondition as p}from"./constants/a11yCondition.js";import{StepperRowAssetFrame as y}from"./StepperRowAssetFrame.js";import{StepperRowContextProvider as w,useStepperRowContext as T}from"./StepperRowContext.js";import{StepperRowNumberIcon as A}from"./StepperRowNumberIcon.js";import{StepperRowRightArrow as B}from"./StepperRowRightArrow.js";import{StepperRowRightButton as S}from"./StepperRowRightButton.js";import{StepperRowTexts as D}from"./StepperRowTexts.js";import{getCenterPaddingTop as P,getRightPaddingTop as b}from"./utils/padding.js";export function StepperRow(n){return o(w,{children:o(j,{...n})})}function j({left:n,center:c,right:g,hideLine:a=!1}){const i=T(),d=i.right?.type==="button",m=s(p.center),l=s(p.rightButtonAlign)&&d,f=s(p.rightButtonPaddingTop)&&d,h=P(i.left,i.center),u=b(i.left,i.right),R=x();return r(e,{style:t.rootCss,children:[r(e,{style:t.leftCss,children:[o(e,{children:n}),!a&&o(e,{style:[t.lineCss,{backgroundColor:R.grey200}]})]}),r(e,{style:[t.centerRightCss,l&&t.a11yCenterRightButtonAlign],children:[o(e,{style:[t.centerCss,m&&t.a11yCenter,{paddingTop:h}],children:c}),g&&o(e,{style:[t.rightCss,{paddingTop:f?0:u},l&&t.a11yRightButtonAlign],children:g})]})]})}StepperRow.Texts=D,StepperRow.NumberIcon=A,StepperRow.AssetFrame=y,StepperRow.RightArrow=B,StepperRow.RightButton=S;const t=C.create({rootCss:{flexDirection:"row",paddingVertical:3,paddingHorizontal:24},leftCss:{flexDirection:"column",alignItems:"center",paddingRight:14},lineCss:{flexDirection:"row",width:2,minHeight:16,flex:1,borderRadius:1,marginTop:6},centerRightCss:{flex:1,flexDirection:"row",paddingBottom:16},centerCss:{flexDirection:"column",flex:1},rightCss:{flexDirection:"row",paddingLeft:12},a11yCenter:{flexDirection:"row",paddingTop:0},a11yCenterRightButtonAlign:{flexDirection:"column"},a11yRightButtonAlign:{flexDirection:"row",paddingTop:12,paddingLeft:0,paddingRight:0,paddingBottom:0}});
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useFontScaleCondition as s,useAdaptive as x}from"../../core";import{StyleSheet as C,View as e}from"react-native";import{a11yCondition as p}from"./constants/a11yCondition";import{StepperRowAssetFrame as y}from"./StepperRowAssetFrame";import{StepperRowContextProvider as w,useStepperRowContext as T}from"./StepperRowContext";import{StepperRowNumberIcon as A}from"./StepperRowNumberIcon";import{StepperRowRightArrow as B}from"./StepperRowRightArrow";import{StepperRowRightButton as S}from"./StepperRowRightButton";import{StepperRowTexts as D}from"./StepperRowTexts";import{getCenterPaddingTop as P,getRightPaddingTop as b}from"./utils/padding";export function StepperRow(n){return o(w,{children:o(j,{...n})})}function j({left:n,center:c,right:g,hideLine:a=!1}){const i=T(),d=i.right?.type==="button",m=s(p.center),l=s(p.rightButtonAlign)&&d,f=s(p.rightButtonPaddingTop)&&d,h=P(i.left,i.center),u=b(i.left,i.right),R=x();return r(e,{style:t.rootCss,children:[r(e,{style:t.leftCss,children:[o(e,{children:n}),!a&&o(e,{style:[t.lineCss,{backgroundColor:R.grey200}]})]}),r(e,{style:[t.centerRightCss,l&&t.a11yCenterRightButtonAlign],children:[o(e,{style:[t.centerCss,m&&t.a11yCenter,{paddingTop:h}],children:c}),g&&o(e,{style:[t.rightCss,{paddingTop:f?0:u},l&&t.a11yRightButtonAlign],children:g})]})]})}StepperRow.Texts=D,StepperRow.NumberIcon=A,StepperRow.AssetFrame=y,StepperRow.RightArrow=B,StepperRow.RightButton=S;const t=C.create({rootCss:{flexDirection:"row",paddingVertical:3,paddingHorizontal:24},leftCss:{flexDirection:"column",alignItems:"center",paddingRight:14},lineCss:{flexDirection:"row",width:2,minHeight:16,flex:1,borderRadius:1,marginTop:6},centerRightCss:{flex:1,flexDirection:"row",paddingBottom:16},centerCss:{flexDirection:"column",flex:1},rightCss:{flexDirection:"row",paddingLeft:12},a11yCenter:{flexDirection:"row",paddingTop:0},a11yCenterRightButtonAlign:{flexDirection:"column"},a11yRightButtonAlign:{flexDirection:"row",paddingTop:12,paddingLeft:0,paddingRight:0,paddingBottom:0}});

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

@@ -1,5 +1,5 @@
-import { Asset } from '../asset/index.js';
 import type { ComponentProps } from 'react';
-type StepperRowAssetFrameProps = ComponentProps<typeof Asset['Frame']>;
+import { Asset } from '../asset';
+type StepperRowAssetFrameProps = ComponentProps<(typeof Asset)['Frame']>;
 export declare function StepperRowAssetFrame({ shape, ...props }: StepperRowAssetFrameProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1 @@
-"use strict";import{jsx as f}from"react/jsx-runtime";import{Asset as p,frameShape as o}from"../asset/index.js";import{useFontScaleCondition as c}from"../../core/index.js";import{useMemo as u}from"react";import{a11yCondition as l}from"./constants/a11yCondition.js";import{useUpdateStepperRowLeft as C}from"./StepperRowContext.js";export function StepperRowAssetFrame({shape:t,...i}){const e=t.width===32;C({type:e?"asset32":"asset40"});const s=c(l.leftAsset),n=u(()=>{const r=t.radius===9999,m=e&&!r,a=e&&r;return m?o.CleanW40:a?o.CircleMedium:t},[e,t]);return f(p.Frame,{shape:s?n:t,...i})}
+"use strict";import{jsx as f}from"react/jsx-runtime";import{useMemo as p}from"react";import{useFontScaleCondition as c}from"../../core";import{Asset as u,frameShape as o}from"../asset";import{a11yCondition as l}from"./constants/a11yCondition";import{useUpdateStepperRowLeft as C}from"./StepperRowContext";export function StepperRowAssetFrame({shape:t,...i}){const e=t.width===32;C({type:e?"asset32":"asset40"});const s=c(l.leftAsset),n=p(()=>{const r=t.radius===9999,m=e&&!r,a=e&&r;return m?o.CleanW40:a?o.CircleMedium:t},[e,t]);return f(u.Frame,{shape:s?n:t,...i})}

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

@@ -1 +1 @@
-"use strict";import{jsx as n}from"react/jsx-runtime";import{Asset as e}from"../asset/index.js";import{useFontScaleCondition as a,useColorPreference as p}from"../../core/index.js";import{a11yCondition as s}from"./constants/a11yCondition.js";import{useUpdateStepperRowLeft as m}from"./StepperRowContext.js";const c=e.frameShape.CleanW32,i=e.frameShape.CleanW40;export function StepperRowNumberIcon({number:o}){m({type:"numberIcon"});const r=a(s.leftAsset),{colorPreference:t}=p();return n(e.Icon,{frameShape:r?i:c,name:`icon-step${o}-rounded-${t}`,accessibilityLabel:`${o}\uBC88`})}
+"use strict";import{jsx as n}from"react/jsx-runtime";import{Asset as e}from"../asset";import{useFontScaleCondition as a,useColorPreference as p}from"../../core";import{a11yCondition as s}from"./constants/a11yCondition";import{useUpdateStepperRowLeft as m}from"./StepperRowContext";const c=e.frameShape.CleanW32,i=e.frameShape.CleanW40;export function StepperRowNumberIcon({number:o}){m({type:"numberIcon"});const r=a(s.leftAsset),{colorPreference:t}=p();return n(e.Icon,{frameShape:r?i:c,name:`icon-step${o}-rounded-${t}`,accessibilityLabel:`${o}\uBC88`})}

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

@@ -1,4 +1,4 @@
-import type { FrameShapeType } from '../asset/types.js';
+import type { FrameShapeType } from '../asset/types';
 export interface StepperRowRightArrowProps {
     /**
      * 아이콘의 이름을 지정해요.

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

@@ -1 +1 @@
-"use strict";import{jsx as p}from"react/jsx-runtime";import{useAdaptive as i}from"../../core/index.js";import{Asset as m}from"../asset/index.js";import{useUpdateStepperRowRight as a}from"./StepperRowContext.js";export function StepperRowRightArrow({name:r,color:o,frameShape:t}){const e=i();return a({type:"arrow"}),p(m.Icon,{name:r??"icon-arrow-right-mono",color:o??e.grey400,style:{marginRight:-8},frameShape:t})}
+"use strict";import{jsx as p}from"react/jsx-runtime";import{useAdaptive as i}from"../../core";import{Asset as m}from"../asset";import{useUpdateStepperRowRight as a}from"./StepperRowContext";export function StepperRowRightArrow({name:r,color:o,frameShape:t}){const e=i();return a({type:"arrow"}),p(m.Icon,{name:r??"icon-arrow-right-mono",color:o??e.grey400,style:{marginRight:-8},frameShape:t})}

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

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

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

@@ -1 +1 @@
-"use strict";import{jsx as p}from"react/jsx-runtime";import{Button as e}from"../button/index.js";import{useUpdateStepperRowRight as i}from"./StepperRowContext.js";export function StepperRowRightButton({size:t="tiny",type:o="primary",...r}){return i({type:"button"}),p(e,{size:t,type:o,...r})}
+"use strict";import{jsx as p}from"react/jsx-runtime";import{Button as e}from"../button";import{useUpdateStepperRowRight as i}from"./StepperRowContext";export function StepperRowRightButton({size:t="tiny",type:o="primary",...r}){return i({type:"button"}),p(e,{size:t,type:o,...r})}

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

@@ -1,5 +1,5 @@
 import type { ComponentProps, ReactNode } from 'react';
-import { Text } from '../paragraph/index.js';
+import { Text } from '../paragraph';
 interface StepperRowTextsProps {
     /**
      * `StepperRow.Texts` 컴포넌트의 텍스트의 타입을 설정해요. 타이틀과 설명의 스타일이 타입에 따라 달라져요.

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

@@ -1 +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/index.js";import{Text as p}from"../paragraph/index.js";import{useUpdateStepperRowCenter as W}from"./StepperRowContext.js";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})]})}
+"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

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

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

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

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

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

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

@@ -1,3 +1,3 @@
-import type { Center, Left, Right } from '../StepperRowContext.js';
+import type { 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/switch/Switch.js

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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{colors as m}from"@toss/tds-colors";import g from"hex-to-rgba";import{useCallback as p,useMemo as b,useRef as u}from"react";import{Animated as e,Platform as d}from"react-native";import{useAdaptive as S}from"../../core/index.js";export function useSwitchAnimation({animationState:s,disabled:i}){const c=S(),f=b(()=>({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};
+"use strict";import{colors as m}from"@toss/tds-colors";import g from"hex-to-rgba";import{useCallback as p,useMemo as b,useRef as u}from"react";import{Animated as e,Platform as d}from"react-native";import{useAdaptive as S}from"../../core";export function useSwitchAnimation({animationState:s,disabled:i}){const c=S(),f=b(()=>({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

@@ -1,3 +1,3 @@
-import type { BaseTabProps } from './type.js';
+import type { 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

@@ -1 +1 @@
-"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{spring as T}from"@toss/tds-easings";import{useCallback as X,useEffect as p,useRef as d,useState as b}from"react";import{ScrollView as k,StyleSheet as w,View as r}from"react-native";import{useAdaptive as A}from"../../core/index.js";import{Animated as c}from"../../interactions/animated/index.js";import{useControlled as L}from"../../utils/index.js";import{IndicatorContext as z}from"./IndicatorContext.js";import{TabContext as D}from"./TabContext.js";export function FluidTab({defaultValue:y,value:g,children:v,onChange:u,style:V,size:x="large",...C}){const m=A(),[S,f]=L({controlledValue:g,defaultValue:y}),B=X(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(k,{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}});
+"use strict";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{spring as T}from"@toss/tds-easings";import{useCallback as X,useEffect as p,useRef as d,useState as b}from"react";import{ScrollView as k,StyleSheet as w,View as r}from"react-native";import{useAdaptive as A}from"../../core";import{Animated as c}from"../../interactions/animated";import{useControlled as L}from"../../utils";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=A(),[S,f]=L({controlledValue:g,defaultValue:y}),B=X(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(k,{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

@@ -1,3 +1,3 @@
-import type { BaseTabProps } from './type.js';
+import type { 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

@@ -1 +1 @@
-"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{spring as X}from"@toss/tds-easings";import{useCallback as k,useEffect as A,useRef as B,useState as u}from"react";import{ScrollView as R,StyleSheet as h,View as e}from"react-native";import{useAdaptive as T}from"../../core/index.js";import{Animated as a}from"../../interactions/animated/index.js";import{useControlled as W}from"../../utils/index.js";import{IndicatorContext as z}from"./IndicatorContext.js";import{TabContext as D}from"./TabContext.js";export function FullTab({defaultValue:f,value:p,children:b,onChange:l,style:y,size:g="large",...w}){const s=T(),[v,n]=W({controlledValue:p,defaultValue:f}),V=k(c=>{l?.(c),n(c)},[l,n]),[o,x]=u(0),i=B(new a.Value(o)).current,[d,C]=u(0),S={width:d,transform:[{translateX:i}]};A(()=>{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(R,{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}});
+"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{spring as X}from"@toss/tds-easings";import{useCallback as k,useEffect as A,useRef as B,useState as u}from"react";import{ScrollView as R,StyleSheet as h,View as e}from"react-native";import{useAdaptive as T}from"../../core";import{Animated as a}from"../../interactions/animated";import{useControlled as W}from"../../utils";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=T(),[v,n]=W({controlledValue:p,defaultValue:f}),V=k(c=>{l?.(c),n(c)},[l,n]),[o,x]=u(0),i=B(new a.Value(o)).current,[d,C]=u(0),S={width:d,transform:[{translateX:i}]};A(()=>{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(R,{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.js

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{Svg as 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/tds-colors";import{useAdaptive as p}from"../../core/index.js";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;
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{Svg as 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/tds-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/Tab.d.ts

@@ -1,5 +1,5 @@
-import { TabItem } from './TabItem.js';
-import type { BaseTabProps } from './type.js';
+import { TabItem } from './TabItem';
+import type { BaseTabProps } from './type';
 export type TabProps = {
     /**
      * 이 값이 `true`일 때 각 아이템의 너비가 글자 수에 맞춰져요. 아이템의 전체 크기가 `Tab`의 컨테이너를 넘어가면 가로 스크롤이 생겨요. `false`라면 최대 4개의 아이템 사용을 권장해요.

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

@@ -1 +1 @@
-"use strict";import{jsx as m}from"react/jsx-runtime";import{FullTab as t}from"./FullTab.js";import{FluidTab as i}from"./FluidTab.js";import{TabItem as f}from"./TabItem.js";export function Tab({fluid:o,...r}){return o?m(i,{...r}):m(t,{...r})}Tab.Item=f;
+"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/TabItem.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
-import type { TabValue } from './TabContext.js';
+import type { TabValue } from './TabContext';
 export interface TabItemProps {
     /**
      * 이 값이 `true`일 때 `Tab.Item`의 우측 상단에 빨간 동그라미가 표시돼요. 중요한 알림이나 새로운 업데이트가 있음을 사용자에게 시각적으로 전달할 수 있어요.

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

@@ -1 +1 @@
-"use strict";import{jsx as d,jsxs as j}from"react/jsx-runtime";import{spring as x}from"@toss/tds-easings";import{useCallback as w,useContext as C,useEffect as T,useMemo as B,useRef as I,useState as P}from"react";import{Pressable as k,StyleSheet as L,View as M}from"react-native";import{useAdaptive as R}from"../../core/index.js";import{Animated as s}from"../../interactions/animated/index.js";import{Txt as W}from"../txt/index.js";import{IndicatorContext as z}from"./IndicatorContext.js";import{TabContext as A}from"./TabContext.js";export function TabItem({redBean:o=!1,value:e,children:r,style:S,onPress:m}){const{size:f,fluid:g,value:h,onChange:y}=C(A),a=I(new s.Value(1)).current,n=B(()=>e===h,[e,h]),b=R(),v=w(u=>{m?.(u),y?.(e)},[m,y,e]),t=D({size:f,fluid:g}),[i,V]=P(),{setWidth:l,setTranslateX:c}=C(z);return T(()=>{!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(k,{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,...x.rapid}).start()},onPressOut:()=>{s.spring(a,{toValue:1,useNativeDriver:!0,...x.quick}).start()},children:[d(s.View,{style:[p.innerContainer,{transform:[{scale:a}]}],children:d(W,{numberOfLines:1,ellipsizeMode:"clip",typography:f==="large"?"t5":"t6",fontWeight:n?"bold":"semiBold",color:n?b.grey800:b.grey600,children:r})}),o?d(M,{style:p.redBean}):null]})}const p=L.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}};
+"use strict";import{jsx as d,jsxs as j}from"react/jsx-runtime";import{spring as x}from"@toss/tds-easings";import{useCallback as w,useContext as C,useEffect as T,useMemo as B,useRef as I,useState as P}from"react";import{Pressable as k,StyleSheet as L,View as M}from"react-native";import{useAdaptive as R}from"../../core";import{Animated as s}from"../../interactions/animated";import{Txt as W}from"../txt";import{IndicatorContext as z}from"./IndicatorContext";import{TabContext as A}from"./TabContext";export function TabItem({redBean:o=!1,value:e,children:r,style:S,onPress:m}){const{size:f,fluid:g,value:h,onChange:y}=C(A),a=I(new s.Value(1)).current,n=B(()=>e===h,[e,h]),b=R(),v=w(u=>{m?.(u),y?.(e)},[m,y,e]),t=D({size:f,fluid:g}),[i,V]=P(),{setWidth:l,setTranslateX:c}=C(z);return T(()=>{!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(k,{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,...x.rapid}).start()},onPressOut:()=>{s.spring(a,{toValue:1,useNativeDriver:!0,...x.quick}).start()},children:[d(s.View,{style:[p.innerContainer,{transform:[{scale:a}]}],children:d(W,{numberOfLines:1,ellipsizeMode:"clip",typography:f==="large"?"t5":"t6",fontWeight:n?"bold":"semiBold",color:n?b.grey800:b.grey600,children:r})}),o?d(M,{style:p.redBean}):null]})}const p=L.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

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

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

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

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
-import type { TabValue } from './TabContext.js';
+import type { TabValue } from './TabContext';
 export interface BaseTabProps extends ViewProps {
     /**
      * 사이즈에 따라 `Tab` 컴포넌트의 높이와 텍스트 크기가 변경돼요.

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { TableRowLeftText, TableRowRightText } from './TableRowText.js';
-import type { TableRowAlign } from './types.js';
+import { TableRowLeftText, TableRowRightText } from './TableRowText';
+import type { TableRowAlign } from './types';
 interface TableRowProps {
     align: TableRowAlign;
     /**

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

@@ -1 +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.js";import{TableRowLeftText as s,TableRowRightText as a}from"./TableRowText.js";import{isReactText as c}from"../../utils/index.js";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;
+"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

@@ -1,4 +1,4 @@
-import type { TableRowAlign } from './types.js';
+import type { TableRowAlign } from './types';
 export interface TableRowContext {
     align: TableRowAlign;
 }

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

@@ -1,4 +1,4 @@
-import { Txt } from '../txt/index.js';
+import { Txt } from '../txt';
 import type { ComponentProps } from 'react';
 interface TableRowTextProps extends ComponentProps<typeof Txt> {
 }

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

@@ -1 +1 @@
-"use strict";import{jsx as p}from"react/jsx-runtime";import{useAdaptive as i}from"../../core/index.js";import{Txt as n}from"../txt/index.js";import{useContext as m}from"react";import{TableRowContext as x}from"./TableRowContext.js";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})}
+"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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { TypographyKeys } from '../txt/index.js';
+import type { TypographyKeys } from '../txt';
 import type { ReactNode } from 'react';
 import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
 type TDSTextButtonType = 'arrow' | 'underline' | 'clear';

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

@@ -1 +1 @@
-"use strict";import{jsx as l,jsxs as b}from"react/jsx-runtime";import{getLinkTypography as m}from"../../constants/index.js";import{useAdaptive as f,useTypographyTheme as v}from"../../core/index.js";import{Icon as y}from"../icon/index.js";import*as w from"../paragraph/index.js";import{PressableEffect as d}from"../../interactions/pressable-effect/index.js";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;
+"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

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

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

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

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

@@ -1,8 +1,8 @@
 import type { ComponentProps } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { TextInput } from 'react-native';
-import type { TDSTextFieldContainerProps } from './TDSTextFieldContainer.js';
-import type { TDSTextFieldContentProps } from './TDSTextFieldContent.js';
+import type { TDSTextFieldContainerProps } from './TDSTextFieldContainer';
+import type { 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'> & {

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

@@ -1 +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/index.js";import{Icon as M}from"../../icon/index.js";import{useElementStyle as N}from"./hooks.js";import{TDSTextFieldContainer as P}from"./TDSTextFieldContainer.js";import{TDSTextFieldContent as v}from"./TDSTextFieldContent.js";import{getState as L}from"./utils.js";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]})})});
+"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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { TDSTextFieldSize } from './TDSTextField.js';
+import type { TDSTextFieldSize } from './TDSTextField';
 export interface TDSTextFieldContainerProps {
     label?: string;
     placeholder?: string;

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

@@ -1 +1 @@
-"use strict";import{jsx as r,jsxs as y}from"react/jsx-runtime";import{useTypographyTheme as h}from"../../../core/index.js";import{Txt as l}from"../../txt/index.js";import{View as u}from"react-native";import{useElementStyle as g}from"./hooks.js";import{getState as x}from"./utils.js";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})]})}
+"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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { TDSTextFieldSize } from './TDSTextField.js';
+import type { TDSTextFieldSize } from './TDSTextField';
 export interface TDSTextFieldContentProps {
     disabled?: boolean;
     focus?: boolean;

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

@@ -1 +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.js";import{getState as u}from"./utils.js";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})]})}
+"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

@@ -1,5 +1,5 @@
 import type { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
-import type { TDSTextFieldSize } from './TDSTextField.js';
+import type { TDSTextFieldSize } from './TDSTextField';
 export declare function TDSTextFieldItem({ style, children }: {
     style?: StyleProp<ViewStyle>;
     children?: React.ReactNode;

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

@@ -1 +1 @@
-"use strict";import{jsx as t}from"react/jsx-runtime";import{colors as l}from"@toss/tds-colors";import{useMemo as m}from"react";import{TouchableOpacity as c,View as s}from"react-native";import{useAdaptive as a}from"../../../core/index.js";import{Icon as p}from"../../icon/index.js";import{Txt as u}from"../../txt/index.js";export function TDSTextFieldItem({style:e,children:o}){return t(s,{style:[{alignItems:"center",justifyContent:"center"},e],children:o})}function y({label:e,style:o,textfieldSize:i}){const r=a(),n=m(()=>d({grey900:r.grey900}),[r.grey900]);return t(TDSTextFieldItem,{style:o,children:t(u,{...n[i??"medium"],children:e})})}function f({style:e,name:o,size:i,color:r=l.grey400,onPress:n}){return t(c,{onPress:n,children:t(TDSTextFieldItem,{style:e,children:t(p,{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}});
+"use strict";import{jsx as t}from"react/jsx-runtime";import{colors as l}from"@toss/tds-colors";import{useMemo as m}from"react";import{TouchableOpacity as c,View as s}from"react-native";import{useAdaptive as a}from"../../../core";import{Icon as p}from"../../icon";import{Txt as u}from"../../txt";export function TDSTextFieldItem({style:e,children:o}){return t(s,{style:[{alignItems:"center",justifyContent:"center"},e],children:o})}function y({label:e,style:o,textfieldSize:i}){const r=a(),n=m(()=>d({grey900:r.grey900}),[r.grey900]);return t(TDSTextFieldItem,{style:o,children:t(u,{...n[i??"medium"],children:e})})}function f({style:e,name:o,size:i,color:r=l.grey400,onPress:n}){return t(c,{onPress:n,children:t(TDSTextFieldItem,{style:e,children:t(p,{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

@@ -1,4 +1,4 @@
-import type { TDSTextFieldContainerProps } from './TDSTextFieldContainer.js';
+import type { TDSTextFieldContainerProps } from './TDSTextFieldContainer';
 interface TextFieldSelectButtonProps extends Omit<TDSTextFieldContainerProps, 'children' | 'rightItem'> {
     placeholder: string;
     value: string | undefined;

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

@@ -1 +1 @@
-"use strict";import{jsx as r}from"react/jsx-runtime";import{useAdaptive as d}from"../../../core/index.js";import{PressableEffect as c}from"../../../interactions/pressable-effect/index.js";import{Pressable as f,Text as a}from"react-native";import{useMemo as p}from"react";import{getInputStyle as g}from"./styles.js";import{TDSTextFieldContainer as y}from"./TDSTextFieldContainer.js";import{TDSTextFieldItem as h}from"./TDSTextFieldItem.js";import{TDSTextFieldContent as x}from"./TDSTextFieldContent.js";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})})})})}
+"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

@@ -1,5 +1,5 @@
 import type { StyleProp, TextInput, TextStyle } from 'react-native';
-import type { TDSTextFieldProps } from './TDSTextField.js';
+import type { TDSTextFieldProps } from './TDSTextField';
 interface TextAreaProps extends Omit<TDSTextFieldProps, 'size' | 'multiline' | 'textInputStyle'> {
     /**
      *

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

@@ -1 +1 @@
-"use strict";import{jsx as n}from"react/jsx-runtime";import{useTypographyTheme as s}from"../../../core/index.js";import{forwardRef as f}from"react";import{TDSTextField as p}from"./TDSTextField.js";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;
+"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

@@ -1,16 +1,16 @@
-import type { TDSTextFieldSize, TDSTextFieldState } from './TDSTextField.js';
+import type { TDSTextFieldSize, TDSTextFieldState } from './TDSTextField';
 export declare function useElementStyle(size: TDSTextFieldSize, state: TDSTextFieldState): {
     label: Omit<import("react-native").TextStyle, "color"> & {
-        color: import("../../txt/Txt.js").TxtStyleProps["color"];
+        color: import("../../txt").TxtStyleProps["color"];
     };
     input: Omit<import("react-native").TextStyle, "color"> & {
-        color: import("../../txt/Txt.js").TxtStyleProps["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/Txt.js").TxtStyleProps["color"];
+        color: import("../../txt").TxtStyleProps["color"];
     };
 };

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

@@ -1 +1 @@
-"use strict";import{useMemo as p}from"react";import{StyleSheet as y}from"react-native";import{useAdaptive as u}from"../../../core/index.js";import{getHelpTextStyle as a,getInputContainerStyle as f,getInputStyle as $,getLabelStyle as S}from"./styles.js";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])}
+"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])}

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

@@ -1,7 +1,7 @@
-import { TDSTextFieldItem } from './TDSTextFieldItem.js';
-import { TextFieldSelectButton } from './TDSTextFieldSelectButton.js';
+import { TDSTextFieldItem } from './TDSTextFieldItem';
+import { TextFieldSelectButton } from './TDSTextFieldSelectButton';
 /** @deprecated */
-declare const OldTextField: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "clearButtonMode"> & Omit<import("./TDSTextFieldContainer.js").TDSTextFieldContainerProps, "children" | "focus" | "onPress"> & Pick<import("./TDSTextFieldContent.js").TDSTextFieldContentProps, "leftItem" | "rightItem"> & {
+declare const OldTextField: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "clearButtonMode"> & Omit<import("./TDSTextFieldContainer").TDSTextFieldContainerProps, "children" | "focus" | "onPress"> & Pick<import("./TDSTextFieldContent").TDSTextFieldContentProps, "leftItem" | "rightItem"> & {
     contentStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
 } & import("react").RefAttributes<import("react-native").TextInput>>;
 /** @deprecated */

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

@@ -1 +1 @@
-"use strict";import{TDSTextField as t}from"./TDSTextField.js";import{TDSTextFieldItem as e}from"./TDSTextFieldItem.js";import{TextFieldSelectButton as o}from"./TDSTextFieldSelectButton.js";const l=t,d=e,i=o;export{l as OldTextField,d as OldTextFieldItem,i as OldTextFieldSelectButton};
+"use strict";import{TDSTextField as t}from"./TDSTextField";import{TDSTextFieldItem as e}from"./TDSTextFieldItem";import{TextFieldSelectButton as o}from"./TDSTextFieldSelectButton";const l=t,d=e,i=o;export{l as OldTextField,d as OldTextFieldItem,i as OldTextFieldSelectButton};

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

@@ -1,6 +1,6 @@
 import type { TextStyle, ViewStyle } from 'react-native';
-import type { TxtStyleProps } from '../../txt/index.js';
-import type { TDSTextFieldSize, TDSTextFieldState } from './TDSTextField.js';
+import type { TxtStyleProps } from '../../txt';
+import type { TDSTextFieldSize, TDSTextFieldState } from './TDSTextField';
 type TextStyleByVariant = Record<`${TDSTextFieldSize}-${TDSTextFieldState}`, Omit<TextStyle, 'color'> & {
     color: TxtStyleProps['color'];
 }>;

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

@@ -1 +1 @@
-"use strict";import{colors as o}from"@toss/tds-colors";import a from"hex-to-rgba";import{Platform as c,StyleSheet as l}from"react-native";import{defaultTypographyMap as t,fontFamilyByFontWeightMap as s,fontWeightMap as i}from"../../txt/index.js";export const getLabelStyle=({grey700:r,grey800:e})=>l.create({"big-default":{fontSize:t.st10.fontSize,fontWeight:i.regular,color:e},"big-focused":{color:o.blue700},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:r},"medium-focused":{color:o.blue700},"medium-error":{color:o.red600},"medium-disabled":{},"classic-default":{fontSize:t.t7.fontSize,fontWeight:i.semiBold,color:r},"classic-focused":{color:o.blue700},"classic-error":{color:o.red600},"classic-disabled":{}}),getHelpTextStyle=({grey500:r,grey600:e,grey700:d})=>l.create({"big-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:e},"big-focused":{},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:r},"medium-focused":{color:e},"medium-error":{color:o.red500},"medium-disabled":{color:r},"classic-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:d},"classic-focused":{color:o.blue700},"classic-error":{color:o.red600},"classic-disabled":{}}),getInputContainerStyle=({grey50:r,grey100:e,grey200:d})=>l.create({"big-default":{borderBottomWidth:2,borderBottomColor:d,paddingBottom:8,paddingTop:8},"big-focused":{borderBottomColor:o.blue400},"big-error":{borderBottomColor:o.red600},"big-disabled":{},"medium-default":{borderBottomWidth:2,borderBottomColor:e,paddingBottom:6,paddingTop:6},"medium-focused":{borderBottomColor:o.blue400},"medium-error":{borderBottomColor:o.red600},"medium-disabled":{borderBottomColor:"transparent"},"classic-default":{paddingBottom:15,paddingTop:14,borderRadius:14,backgroundColor:r,paddingHorizontal:16},"classic-focused":{backgroundColor:a(o.blue900,.05)},"classic-error":{backgroundColor:a(o.red900,.05)},"classic-disabled":{backgroundColor:d}}),fontFamilyMap=s[c.OS==="android"?"android":"ios"],getInputStyle=({grey400:r,grey900:e})=>l.create({"big-default":{fontSize:t.t1.fontSize,fontWeight:i.medium,fontFamily:fontFamilyMap.medium,color:e},"big-focused":{},"big-error":{},"big-disabled":{},"medium-default":{fontSize:t.t3.fontSize,fontWeight:i.regular,fontFamily:fontFamilyMap.regular,color:e},"medium-focused":{},"medium-error":{},"medium-disabled":{},"classic-default":{fontSize:t.t4.fontSize,fontWeight:i.regular,fontFamily:fontFamilyMap.regular,color:e},"classic-focused":{},"classic-error":{},"classic-disabled":{color:r}});
+"use strict";import{colors as o}from"@toss/tds-colors";import a from"hex-to-rgba";import{Platform as c,StyleSheet as l}from"react-native";import{defaultTypographyMap as t,fontFamilyByFontWeightMap as s,fontWeightMap as i}from"../../txt";export const getLabelStyle=({grey700:r,grey800:e})=>l.create({"big-default":{fontSize:t.st10.fontSize,fontWeight:i.regular,color:e},"big-focused":{color:o.blue700},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:r},"medium-focused":{color:o.blue700},"medium-error":{color:o.red600},"medium-disabled":{},"classic-default":{fontSize:t.t7.fontSize,fontWeight:i.semiBold,color:r},"classic-focused":{color:o.blue700},"classic-error":{color:o.red600},"classic-disabled":{}}),getHelpTextStyle=({grey500:r,grey600:e,grey700:d})=>l.create({"big-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:e},"big-focused":{},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:r},"medium-focused":{color:e},"medium-error":{color:o.red500},"medium-disabled":{color:r},"classic-default":{fontSize:t.t7.fontSize,fontWeight:i.regular,color:d},"classic-focused":{color:o.blue700},"classic-error":{color:o.red600},"classic-disabled":{}}),getInputContainerStyle=({grey50:r,grey100:e,grey200:d})=>l.create({"big-default":{borderBottomWidth:2,borderBottomColor:d,paddingBottom:8,paddingTop:8},"big-focused":{borderBottomColor:o.blue400},"big-error":{borderBottomColor:o.red600},"big-disabled":{},"medium-default":{borderBottomWidth:2,borderBottomColor:e,paddingBottom:6,paddingTop:6},"medium-focused":{borderBottomColor:o.blue400},"medium-error":{borderBottomColor:o.red600},"medium-disabled":{borderBottomColor:"transparent"},"classic-default":{paddingBottom:15,paddingTop:14,borderRadius:14,backgroundColor:r,paddingHorizontal:16},"classic-focused":{backgroundColor:a(o.blue900,.05)},"classic-error":{backgroundColor:a(o.red900,.05)},"classic-disabled":{backgroundColor:d}}),fontFamilyMap=s[c.OS==="android"?"android":"ios"],getInputStyle=({grey400:r,grey900:e})=>l.create({"big-default":{fontSize:t.t1.fontSize,fontWeight:i.medium,fontFamily:fontFamilyMap.medium,color:e},"big-focused":{},"big-error":{},"big-disabled":{},"medium-default":{fontSize:t.t3.fontSize,fontWeight:i.regular,fontFamily:fontFamilyMap.regular,color:e},"medium-focused":{},"medium-error":{},"medium-disabled":{},"classic-default":{fontSize:t.t4.fontSize,fontWeight:i.regular,fontFamily:fontFamilyMap.regular,color:e},"classic-focused":{},"classic-error":{},"classic-disabled":{color:r}});

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

@@ -1,5 +1,5 @@
 import type { StyleProp, TextInput, TextStyle } from 'react-native';
-import { type TextFieldProps } from '../TextField/index.js';
+import { type TextFieldProps } from '../TextField';
 export interface TextAreaProps extends Omit<TextFieldProps, 'variant' | 'multiline'> {
     /**
      *

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

@@ -1 +1 @@
-"use strict";import{jsx as m}from"react/jsx-runtime";import{forwardRef as p}from"react";import{useTypographyTheme as a}from"../../../core/index.js";import{TextField as f}from"../TextField/index.js";export const TextArea=p(function({textAreaStyle:t,...e},r){const{typography:o}=a(),{fontSize:i,lineHeight:n}=o.st10;return m(f,{ref:r,variant:"box",style:[{minHeight:n*2+5,fontSize:i,textAlignVertical:"top"},t],multiline:!0,...e})});
+"use strict";import{jsx as m}from"react/jsx-runtime";import{forwardRef as p}from"react";import{useTypographyTheme as a}from"../../../core";import{TextField as f}from"../TextField";export const TextArea=p(function({textAreaStyle:t,...e},r){const{typography:o}=a(),{fontSize:i,lineHeight:n}=o.st10;return m(f,{ref:r,variant:"box",style:[{minHeight:n*2+5,fontSize:i,textAlignVertical:"top"},t],multiline:!0,...e})});

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

@@ -1,2 +1,2 @@
-export { TextArea } from './TextArea.js';
-export type { TextAreaProps } from './TextArea.js';
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea';

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

@@ -1 +1 @@
-"use strict";export{TextArea}from"./TextArea.js";
+"use strict";export{TextArea}from"./TextArea";