@toss/tds-react-native 1.3.0 → 1.3.1

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

@@ -1,4 +1,4 @@
-export { calculateElevation } from './calculateElevation';
-export { ShadowBackground, type ShadowBackgroundProps } from './ShadowBackground';
-export { shadow } from './tokens';
-export { useShadow, type UseShadowProps } from './useShadow';
+export { calculateElevation } from './calculateElevation.js';
+export { ShadowBackground, type ShadowBackgroundProps } from './ShadowBackground.js';
+export { shadow } from './tokens.js';
+export { useShadow, type UseShadowProps } from './useShadow.js';

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

@@ -1 +1 @@
-"use strict";export{calculateElevation}from"./calculateElevation";export{ShadowBackground}from"./ShadowBackground";export{shadow}from"./tokens";export{useShadow}from"./useShadow";
+"use strict";export{calculateElevation}from"./calculateElevation.js";export{ShadowBackground}from"./ShadowBackground.js";export{shadow}from"./tokens.js";export{useShadow}from"./useShadow.js";

package/dist/esm/components/shadow/tokens.d.ts

@@ -1,4 +1,4 @@
-import type { TokenShadowProps } from './types';
+import type { TokenShadowProps } from './types.js';
 export type ShadowTokenStrength = 'tiny' | 'weak' | 'medium';
 export type ShadowTokenDirection = 'up' | 'down';
 type ShadowToken = (direction: ShadowTokenDirection) => TokenShadowProps;

package/dist/esm/components/shadow/useShadow.d.ts

@@ -1,4 +1,4 @@
-import { Shadow } from './types';
+import type { Shadow } from './types.js';
 export type UseShadowProps = Shadow;
 /**
  * @description 플랫폼에 따른 shadow style을 생성합니다.

package/dist/esm/components/shadow/useShadow.js

@@ -1 +1 @@
-"use strict";import{useColorPreference as r}from"../../core";import{generateShadowStyle as t}from"./generateShadowStyle";export const useShadow=e=>{const{colorPreference:o}=r();return t({...e,colorPreference:o})};
+"use strict";import{useColorPreference as r}from"../../core/index.js";import{generateShadowStyle as t}from"./generateShadowStyle.js";export const useShadow=e=>{const{colorPreference:o}=r();return t({...e,colorPreference:o})};

package/dist/esm/components/skeleton/AnimateSkeleton.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 interface AnimateSkeletonProps extends PropsWithChildren<{}> {
     /**
      * @description 단위는 ms입니다. 500으로 지정시 스켈레톤을 미노출하여 화면전환을 최소화합니다

package/dist/esm/components/skeleton/AnimateSkeleton.js

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import f,{Defs as y,LinearGradient as h,Rect as v,Stop as l}from"@granite-js/native/react-native-svg";import{colors as g}from"@toss/tds-colors";import{useEffect as A,useRef as u}from"react";import{Animated as e}from"react-native";import{useAdaptive as V}from"../../core";function x({children:n,delay:t,withGradient:d,withShimmer:a}){const s=u(new e.Value(t===500?0:1)).current,i=u(new e.Value(a?.2:1)).current;return A(()=>{const m=e.sequence([e.delay(t),e.timing(s,{toValue:1,duration:100,useNativeDriver:!0})]),p=a?e.sequence([e.delay(t),e.loop(e.sequence([e.timing(i,{toValue:1,duration:650,useNativeDriver:!0}),e.timing(i,{toValue:.2,duration:650,useNativeDriver:!0})]))]):w;e.parallel([m,p]).start()},[]),r(e.View,{style:{opacity:s},children:[o(e.View,{style:{opacity:i},children:n}),d?o(D,{}):null]})}function D(){const t=V().background??g.background;return r(f,{height:"100%",width:"100%",style:{position:"absolute",top:0,left:0},children:[o(y,{children:r(h,{id:c,gradientTransform:"rotate(90)",children:[o(l,{offset:"5%",stopColor:t,stopOpacity:0}),o(l,{offset:"95%",stopColor:t})]})}),o(v,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${c})`})]})}const w=e.delay(0),c="tds-rn-animate-skeleton-gradient";export default x;
+"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{Svg as f,Defs as y,LinearGradient as h,Rect as v,Stop as l}from"@granite-js/native/react-native-svg";import{colors as g}from"@toss/tds-colors";import{useEffect as A,useRef as u}from"react";import{Animated as e}from"react-native";import{useAdaptive as V}from"../../core/index.js";function x({children:n,delay:t,withGradient:d,withShimmer:a}){const s=u(new e.Value(t===500?0:1)).current,i=u(new e.Value(a?.2:1)).current;return A(()=>{const m=e.sequence([e.delay(t),e.timing(s,{toValue:1,duration:100,useNativeDriver:!0})]),p=a?e.sequence([e.delay(t),e.loop(e.sequence([e.timing(i,{toValue:1,duration:650,useNativeDriver:!0}),e.timing(i,{toValue:.2,duration:650,useNativeDriver:!0})]))]):w;e.parallel([m,p]).start()},[]),r(e.View,{style:{opacity:s},children:[o(e.View,{style:{opacity:i},children:n}),d?o(D,{}):null]})}function D(){const t=V().background??g.background;return r(f,{height:"100%",width:"100%",style:{position:"absolute",top:0,left:0},children:[o(y,{children:r(h,{id:c,gradientTransform:"rotate(90)",children:[o(l,{offset:"5%",stopColor:t,stopOpacity:0}),o(l,{offset:"95%",stopColor:t})]})}),o(v,{x:"0",y:"0",width:"100%",height:"100%",fill:`url(#${c})`})]})}const w=e.delay(0),c="tds-rn-animate-skeleton-gradient";export default x;

package/dist/esm/components/skeleton/Skeleton.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { PropsWithChildren } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 export interface SkeletonBaseProps {
     width?: ViewStyle['width'];
     height?: ViewStyle['height'];

package/dist/esm/components/skeleton/Skeleton.js

@@ -1 +1 @@
-"use strict";import{jsx as a}from"react/jsx-runtime";import{useAdaptive as m}from"../../core";import{View as n}from"react-native";function p({width:o,height:r,borderRadius:t=6,style:e}){const i=m();return a(n,{style:[{width:o,height:r,borderRadius:t,backgroundColor:i.grey200},e]})}export default p;
+"use strict";import{jsx as a}from"react/jsx-runtime";import{useAdaptive as m}from"../../core/index.js";import{View as n}from"react-native";function p({width:o,height:r,borderRadius:t=6,style:e}){const i=m();return a(n,{style:[{width:o,height:r,borderRadius:t,backgroundColor:i.grey200},e]})}export default p;

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

@@ -1,2 +1,2 @@
-export { default as Skeleton } from './Skeleton';
-export { default as AnimateSkeleton } from './AnimateSkeleton';
+export { default as Skeleton } from './Skeleton.js';
+export { default as AnimateSkeleton } from './AnimateSkeleton.js';

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

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

package/dist/esm/components/slider/Slider.d.ts

@@ -1,4 +1,5 @@
-import { View, ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
 export interface SliderProps extends ViewProps {
     min?: number;
     max?: number;

package/dist/esm/components/slider/Slider.js

@@ -1 +1 @@
-"use strict";import{jsx as l,jsxs as L}from"react/jsx-runtime";import{Gesture as G,GestureDetector as M}from"@granite-js/native/react-native-gesture-handler";import{colors as N}from"@toss/tds-colors";import{forwardRef as X,useEffect as w,useMemo as x,useRef as F,useState as I}from"react";import{Animated as h,View as R}from"react-native";import{styles as d}from"./styles";import{useScreenReaderMode as _}from"./useA11yMode";import{clamp as E,getNearestSteppedValue as C}from"./utils";export const Slider=X(function({min:r=0,max:o=100,value:i=r+o/2,step:c=1,onChange:f,color:k=N.blue400,style:S,...g},A){if(!Number.isInteger(c)||c<=0)throw new Error("step\uC740 \uC591\uC758 \uC815\uC218\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");const[n,y]=I({container:0,thumb:0}),a=F(new h.Value(0)).current,u=n.container!==0&&n.thumb!==0,W=e=>{const t=n.container,s=n.thumb,b=t-s;return e===void 0||t===0||s===0||e<=s/2?r:e>=t-s/2?o:C(r+(o-r)*((e-s/2)/b),r,o,c)},m=e=>{const t=n.container,s=n.thumb,b=t-s;return(e-r)/(o-r)*b},p=e=>{const t=W(e);f?.(t),a.setValue(m(t))},j=x(()=>G.Pan().onUpdate(e=>{p(e.x)}).onStart(e=>{p(e.x)}),[u]);w(()=>{u&&a.setValue(m(i))},[u]);const V=_();w(()=>{V&&a.setValue(m(i))},[V,i]);const v=e=>{switch(e.nativeEvent.actionName){case"increment":f?.(E(i+c,r,o));break;case"decrement":f?.(E(i-c,r,o));break;default:break}};return l(M,{gesture:j,children:L(R,{ref:A,style:[d.slider,S],onLayout:e=>{const{width:t}=e.nativeEvent.layout;y({...n,container:t})},accessible:!0,accessibilityRole:"adjustable",accessibilityValue:{text:`${i}`},accessibilityActions:[{name:"increment"},{name:"decrement"}],accessibilityLiveRegion:"polite",onAccessibilityAction:v,...g,children:[l(R,{style:d.track,pointerEvents:"none",children:l(h.View,{style:[d.progress,{backgroundColor:k,transform:[{translateX:a}]}]})}),l(h.View,{onLayout:e=>{const{width:t}=e.nativeEvent.layout;y({...n,thumb:t})},style:[d.thumb,{opacity:u?1:0,transform:[{translateX:a}]}],pointerEvents:"none"})]})})});
+"use strict";import{jsx as l,jsxs as L}from"react/jsx-runtime";import{Gesture as G,GestureDetector as M}from"@granite-js/native/react-native-gesture-handler";import{colors as N}from"@toss/tds-colors";import{forwardRef as X,useEffect as w,useMemo as x,useRef as F,useState as I}from"react";import{Animated as h,View as R}from"react-native";import{styles as d}from"./styles.js";import{useScreenReaderMode as _}from"./useA11yMode.js";import{clamp as E,getNearestSteppedValue as C}from"./utils.js";export const Slider=X(function({min:r=0,max:o=100,value:i=r+o/2,step:c=1,onChange:f,color:k=N.blue400,style:S,...g},A){if(!Number.isInteger(c)||c<=0)throw new Error("step\uC740 \uC591\uC758 \uC815\uC218\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");const[n,y]=I({container:0,thumb:0}),a=F(new h.Value(0)).current,u=n.container!==0&&n.thumb!==0,W=e=>{const t=n.container,s=n.thumb,b=t-s;return e===void 0||t===0||s===0||e<=s/2?r:e>=t-s/2?o:C(r+(o-r)*((e-s/2)/b),r,o,c)},m=e=>{const t=n.container,s=n.thumb,b=t-s;return(e-r)/(o-r)*b},p=e=>{const t=W(e);f?.(t),a.setValue(m(t))},j=x(()=>G.Pan().onUpdate(e=>{p(e.x)}).onStart(e=>{p(e.x)}),[u]);w(()=>{u&&a.setValue(m(i))},[u]);const V=_();w(()=>{V&&a.setValue(m(i))},[V,i]);const v=e=>{switch(e.nativeEvent.actionName){case"increment":f?.(E(i+c,r,o));break;case"decrement":f?.(E(i-c,r,o));break;default:break}};return l(M,{gesture:j,children:L(R,{ref:A,style:[d.slider,S],onLayout:e=>{const{width:t}=e.nativeEvent.layout;y({...n,container:t})},accessible:!0,accessibilityRole:"adjustable",accessibilityValue:{text:`${i}`},accessibilityActions:[{name:"increment"},{name:"decrement"}],accessibilityLiveRegion:"polite",onAccessibilityAction:v,...g,children:[l(R,{style:d.track,pointerEvents:"none",children:l(h.View,{style:[d.progress,{backgroundColor:k,transform:[{translateX:a}]}]})}),l(h.View,{onLayout:e=>{const{width:t}=e.nativeEvent.layout;y({...n,thumb:t})},style:[d.thumb,{opacity:u?1:0,transform:[{translateX:a}]}],pointerEvents:"none"})]})})});

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

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

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

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

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";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.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)})});

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

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
-import { StepperRowAssetFrame } from './StepperRowAssetFrame';
-import { StepperRowNumberIcon } from './StepperRowNumberIcon';
-import { StepperRowRightArrow } from './StepperRowRightArrow';
-import { StepperRowRightButton } from './StepperRowRightButton';
-import { StepperRowTexts } from './StepperRowTexts';
+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';
 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";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}});
+"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}});

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

@@ -1,5 +1,5 @@
-import { Asset } from '../asset';
-import { ComponentProps } from 'react';
+import { Asset } from '../asset/index.js';
+import type { ComponentProps } from 'react';
 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";import{useFontScaleCondition as c}from"../../core";import{useMemo as u}from"react";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=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{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})}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export type Left = {
     type: 'asset32' | 'asset40' | 'numberIcon';
 };

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";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`})}
+"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`})}

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

@@ -1,4 +1,4 @@
-import { FrameShapeType } from '../asset/types';
+import type { FrameShapeType } from '../asset/types.js';
 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";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})}
+"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})}

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

@@ -1,5 +1,5 @@
-import { Button } from '../button';
-import { ComponentProps } from 'react';
+import { Button } from '../button/index.js';
+import type { 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/esm/components/stepper-row/StepperRowRightButton.js

@@ -1 +1 @@
-"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})}
+"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})}

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

@@ -1,5 +1,5 @@
-import { ComponentProps, ReactNode } from 'react';
-import { Text } from '../paragraph';
+import type { ComponentProps, ReactNode } from 'react';
+import { Text } from '../paragraph/index.js';
 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";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})]})}
+"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})]})}

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

@@ -1,2 +1,2 @@
-import { A11yCondition } from '../../../core';
+import type { A11yCondition } from '../../../core/index.js';
 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';
+export { StepperRow } from './StepperRow.js';

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

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

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

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

@@ -1,4 +1,4 @@
-import { AccessibilityProps, PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { AccessibilityProps, PressableProps, StyleProp, ViewStyle } from 'react-native';
 interface SwitchProp extends AccessibilityProps {
     /**
      * `Switch` 컴포넌트의 켜짐과 꺼짐 상태를 표현해요.  주로 `Switch` 컴포넌트의 상태를 컴포넌트 외부에서 관리할 때, `onCheckedChange` 속성과 함께 사용해요.

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";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;
+"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;

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

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

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

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

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

@@ -1,4 +1,5 @@
-import { Animated, ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 type AnimationState = 'off' | 'on';
 export declare function useSwitchAnimation({ animationState, disabled, }: {
     animationState: AnimationState;

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";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/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};

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

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

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

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

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

@@ -1 +1 @@
-"use strict";import{jsx as o,jsxs as r}from"react/jsx-runtime";import e,{Defs as n,LinearGradient as a,Rect as c,Stop as s}from"@granite-js/native/react-native-svg";import{colors as d}from"@toss/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;
+"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;

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

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

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { PressableProps, StyleProp, ViewStyle } from 'react-native';
-import { TabValue } from './TabContext';
+import type { ReactNode } from 'react';
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { TabValue } from './TabContext.js';
 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";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}};
+"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}};

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { TableRowLeftText, TableRowRightText } from './TableRowText';
-import { TableRowAlign } from './types';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { TableRowLeftText, TableRowRightText } from './TableRowText.js';
+import type { TableRowAlign } from './types.js';
 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";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;
+"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;

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

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

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

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

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";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})}
+"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})}

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

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

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

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

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

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

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";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;
+"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;

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { TDSTextFieldSize } from './TDSTextField';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { TDSTextFieldSize } from './TDSTextField.js';
 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";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})]})}
+"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})]})}

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import type { TDSTextFieldSize } from './TDSTextField';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { TDSTextFieldSize } from './TDSTextField.js';
 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";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})]})}
+"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})]})}

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

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