@toss/tds-react-native 1.2.1 → 1.3.1

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;

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

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

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

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

@@ -1,5 +1,5 @@
-import { StyleProp, TextInput, TextStyle } from 'react-native';
-import { TDSTextFieldProps } from './TDSTextField';
+import type { StyleProp, TextInput, TextStyle } from 'react-native';
+import type { TDSTextFieldProps } from './TDSTextField.js';
 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";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;
+"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;

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

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

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

@@ -1,7 +1,7 @@
-import { TDSTextFieldItem } from './TDSTextFieldItem';
-import { TextFieldSelectButton } from './TDSTextFieldSelectButton';
+import { TDSTextFieldItem } from './TDSTextFieldItem.js';
+import { TextFieldSelectButton } from './TDSTextFieldSelectButton.js';
 /** @deprecated */
-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"> & {
+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"> & {
     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";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};
+"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};

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

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

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

@@ -1 +1 @@
-export declare function getState({ disabled, error, focus }: Record<'disabled' | 'error' | 'focus', boolean | undefined>): "default" | "error" | "disabled" | "focused";
+export declare function getState({ disabled, error, focus }: Record<'disabled' | 'error' | 'focus', boolean | undefined>): "disabled" | "default" | "error" | "focused";

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

@@ -1,5 +1,5 @@
-import { StyleProp, TextInput, TextStyle } from 'react-native';
-import { type TextFieldProps } from '../TextField';
+import type { StyleProp, TextInput, TextStyle } from 'react-native';
+import { type TextFieldProps } from '../TextField/index.js';
 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";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})});
+"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})});

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

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

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

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

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

@@ -1,15 +1,15 @@
-import { TextInput, View } from 'react-native';
-import { TextFieldProps } from './types';
-import { format } from './utils/format';
-declare const _TextField: import("react").ForwardRefExoticComponent<import("./types").TextFieldContainerPublicProps & import("./types").TextFieldPublicProps & Omit<import("react-native").TextInputProps, "value" | keyof import("./types").TextFieldPublicProps | keyof import("./types").TextFieldContainerPublicProps> & {
-    value?: import("./types").TextFieldValue;
+import type { TextInput, View } from 'react-native';
+import type { TextFieldProps } from './types.js';
+import { format } from './utils/format.js';
+declare const _TextField: import("react").ForwardRefExoticComponent<import("./types.js").TextFieldContainerPublicProps & import("./types.js").TextFieldPublicProps & Omit<import("react-native").TextInputProps, "value" | keyof import("./types.js").TextFieldPublicProps | keyof import("./types.js").TextFieldContainerPublicProps> & {
+    value?: import("./types.js").TextFieldValue;
     defaultValue?: string;
 } & import("react").RefAttributes<TextInput>>;
 declare const _ClearableTextField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "right"> & {
     onClear?: () => void;
 } & import("react").RefAttributes<TextInput>>;
-declare const _TextFieldButton: import("react").ForwardRefExoticComponent<import("./types").TextFieldContainerPublicProps & import("./types").TextFieldPublicProps & Omit<Omit<import("react-native").PressableProps & import("react").RefAttributes<View>, "ref">, "value" | keyof import("./types").TextFieldPublicProps | keyof import("./types").TextFieldContainerPublicProps> & {
-    value?: import("./types").TextFieldValue;
+declare const _TextFieldButton: import("react").ForwardRefExoticComponent<import("./types.js").TextFieldContainerPublicProps & import("./types.js").TextFieldPublicProps & Omit<Omit<import("react-native").PressableProps & import("react").RefAttributes<View>, "ref">, "value" | keyof import("./types.js").TextFieldPublicProps | keyof import("./types.js").TextFieldContainerPublicProps> & {
+    value?: import("./types.js").TextFieldValue;
     defaultValue?: string;
     focused?: boolean;
     placeholder?: string;

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

@@ -1 +1 @@
-"use strict";import{jsx as r}from"react/jsx-runtime";import{forwardRef as i}from"react";import{format as a}from"./utils/format";import{TextFieldBig as l,TextFieldBigButton as o,TextFieldBigClearable as x}from"./variants/TextFieldBig";import{TextFieldBox as c,TextFieldBoxButton as u,TextFieldBoxClearable as d}from"./variants/TextFieldBox";import{TextFieldHero as F,TextFieldHeroButton as T,TextFieldHeroClearable as f}from"./variants/TextFieldHero";import{TextFieldLine as m,TextFieldLineButton as b,TextFieldLineClearable as B}from"./variants/TextFieldLine";const s=i(function(e,t){switch(e.variant){case"big":return r(l,{...e,ref:t});case"box":return r(c,{...e,ref:t});case"hero":return r(F,{...e,ref:t});case"line":return r(m,{...e,ref:t})}}),C=i(function(e,t){switch(e.variant){case"big":return r(x,{...e,ref:t});case"box":return r(d,{...e,ref:t});case"hero":return r(f,{...e,ref:t});case"line":return r(B,{...e,ref:t})}}),g=i(function(e,t){switch(e.variant){case"big":return r(o,{...e,ref:t});case"box":return r(u,{...e,ref:t});case"hero":return r(T,{...e,ref:t});case"line":return r(b,{...e,ref:t})}});export const TextField=s;TextField.Clearable=C,TextField.format=a,TextField.Button=g;
+"use strict";import{jsx as r}from"react/jsx-runtime";import{forwardRef as i}from"react";import{format as a}from"./utils/format.js";import{TextFieldBig as l,TextFieldBigButton as o,TextFieldBigClearable as x}from"./variants/TextFieldBig/index.js";import{TextFieldBox as c,TextFieldBoxButton as u,TextFieldBoxClearable as d}from"./variants/TextFieldBox/index.js";import{TextFieldHero as F,TextFieldHeroButton as T,TextFieldHeroClearable as f}from"./variants/TextFieldHero/index.js";import{TextFieldLine as m,TextFieldLineButton as b,TextFieldLineClearable as B}from"./variants/TextFieldLine/index.js";const s=i(function(e,t){switch(e.variant){case"big":return r(l,{...e,ref:t});case"box":return r(c,{...e,ref:t});case"hero":return r(F,{...e,ref:t});case"line":return r(m,{...e,ref:t})}}),C=i(function(e,t){switch(e.variant){case"big":return r(x,{...e,ref:t});case"box":return r(d,{...e,ref:t});case"hero":return r(f,{...e,ref:t});case"line":return r(B,{...e,ref:t})}}),g=i(function(e,t){switch(e.variant){case"big":return r(o,{...e,ref:t});case"box":return r(u,{...e,ref:t});case"hero":return r(T,{...e,ref:t});case"line":return r(b,{...e,ref:t})}});export const TextField=s;TextField.Clearable=C,TextField.format=a,TextField.Button=g;

package/dist/esm/components/text-field/TextField/components/TextFieldButtonArrow.js

@@ -1 +1 @@
-"use strict";import{jsx as r}from"react/jsx-runtime";import{useAdaptive as t}from"../../../../core/index";import{Icon as e}from"../../../icon/index";export function TextFieldButtonArrow(){const o=t();return r(e,{name:"icon-arrow-down-mono",color:o.grey400,size:24})}
+"use strict";import{jsx as r}from"react/jsx-runtime";import{useAdaptive as t}from"../../../../core/index.js";import{Icon as e}from"../../../icon/index.js";export function TextFieldButtonArrow(){const o=t();return r(e,{name:"icon-arrow-down-mono",color:o.grey400,size:24})}

package/dist/esm/components/text-field/TextField/components/TextFieldButtonText.d.ts

@@ -1,5 +1,5 @@
-import { Txt } from '../../../txt/index';
-import { ComponentProps } from 'react';
+import { Txt } from '../../../txt/index.js';
+import type { ComponentProps } from 'react';
 type TxtProps = ComponentProps<typeof Txt>;
 type Props = TxtProps & {
     placeholder?: string;

package/dist/esm/components/text-field/TextField/components/TextFieldButtonText.js

@@ -1 +1 @@
-"use strict";import{jsx as l}from"react/jsx-runtime";import{Txt as s}from"../../../txt/index";export function TextFieldButtonText({color:o,placeholder:r,placeholderColor:n=o,children:t,...x}){const e=t==null||t.length===0;return l(s,{color:e?n:o,...x,children:e?r:t})}
+"use strict";import{jsx as l}from"react/jsx-runtime";import{Txt as s}from"../../../txt/index.js";export function TextFieldButtonText({color:o,placeholder:r,placeholderColor:n=o,children:t,...x}){const e=t==null||t.length===0;return l(s,{color:e?n:o,...x,children:e?r:t})}

package/dist/esm/components/text-field/TextField/components/TextFieldClearButton.js

@@ -1 +1 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import{useAdaptive as i}from"../../../../core/index";import{Icon as n}from"../../../icon/index";import{Pressable as m}from"react-native";export function TextFieldClearButton({size:r,onPress:e}){const t=i();return o(m,{onPress:e,children:o(n,{size:r,name:"icon-x-circle-mono",color:t.grey400})})}
+"use strict";import{jsx as o}from"react/jsx-runtime";import{useAdaptive as i}from"../../../../core/index.js";import{Icon as n}from"../../../icon/index.js";import{Pressable as m}from"react-native";export function TextFieldClearButton({size:r,onPress:e}){const t=i();return o(m,{onPress:e,children:o(n,{size:r,name:"icon-x-circle-mono",color:t.grey400})})}

package/dist/esm/components/text-field/TextField/components/TextFieldContainer.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 interface Props {
     paddingTop?: number;
     paddingBottom?: number;

package/dist/esm/components/text-field/TextField/components/TextFieldHelp.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface Props {
     color: string;
     children: ReactNode;

package/dist/esm/components/text-field/TextField/components/TextFieldHelp.js

@@ -1 +1 @@
-"use strict";import{jsx as e}from"react/jsx-runtime";import{Txt as r}from"../../../txt/index";import{StyleSheet as n}from"react-native";export function TextFieldHelp({color:t,children:o}){return e(r,{color:t,typography:"t7",style:[i.container],children:o})}const i=n.create({container:{paddingTop:6,paddingBottom:0}});
+"use strict";import{jsx as e}from"react/jsx-runtime";import{Txt as r}from"../../../txt/index.js";import{StyleSheet as n}from"react-native";export function TextFieldHelp({color:t,children:o}){return e(r,{color:t,typography:"t7",style:[i.container],children:o})}const i=n.create({container:{paddingTop:6,paddingBottom:0}});

package/dist/esm/components/text-field/TextField/components/TextFieldLabel.d.ts

@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 interface Props {
     color: string;
     opacity: number;

package/dist/esm/components/text-field/TextField/components/TextFieldLabel.js

@@ -1 +1 @@
-"use strict";import{jsx as n}from"react/jsx-runtime";import{StyleSheet as i}from"react-native";import{Txt as l}from"../../../txt/index";export function TextFieldLabel({color:e,opacity:r,children:t,style:o}){return t==null?null:n(l,{typography:"t7",style:[a.container,{color:e,opacity:r},o],children:t})}const a=i.create({container:{paddingBottom:6}});
+"use strict";import{jsx as n}from"react/jsx-runtime";import{StyleSheet as i}from"react-native";import{Txt as l}from"../../../txt/index.js";export function TextFieldLabel({color:e,opacity:r,children:t,style:o}){return t==null?null:n(l,{typography:"t7",style:[a.container,{color:e,opacity:r},o],children:t})}const a=i.create({container:{paddingBottom:6}});

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

@@ -1,4 +1,4 @@
-import { TextFieldControlProps } from '../types';
+import type { TextFieldControlProps } from '../types.js';
 export declare function useTextFieldLabelControls(props: TextFieldControlProps, focused: boolean): {
     color: string;
     opacity: number;

package/dist/esm/components/text-field/TextField/hooks/useLabelControls.js

@@ -1 +1 @@
-"use strict";import{colors as o}from"@toss/tds-colors";import{useMemo as a}from"react";import{useAdaptive as n}from"../../../../core/index";import{getTextFieldStatus as s}from"../utils/getTextFieldStatus";import{hasValue as c}from"../utils/hasValue";export function useTextFieldLabelControls(e,l){const t=n(),r=s(e,l),u=a(()=>{switch(r){case"normal":return t.grey800;case"focused":return o.blue600;case"error":return o.red600;case"disabled":return t.grey800}},[r,t.grey800]),i=a(()=>c(e.value)||e.labelOption==="sustain"?1:0,[e.value,e.labelOption]);return{color:u,opacity:i}}
+"use strict";import{colors as o}from"@toss/tds-colors";import{useMemo as a}from"react";import{useAdaptive as n}from"../../../../core/index.js";import{getTextFieldStatus as s}from"../utils/getTextFieldStatus.js";import{hasValue as c}from"../utils/hasValue.js";export function useTextFieldLabelControls(e,l){const t=n(),r=s(e,l),u=a(()=>{switch(r){case"normal":return t.grey800;case"focused":return o.blue600;case"error":return o.red600;case"disabled":return t.grey800}},[r,t.grey800]),i=a(()=>c(e.value)||e.labelOption==="sustain"?1:0,[e.value,e.labelOption]);return{color:u,opacity:i}}

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

@@ -1,4 +1,4 @@
-import { ClearableTextFieldProps } from '../types';
+import type { ClearableTextFieldProps } from '../types.js';
 export declare function useTextFieldClearButtonControls(props: ClearableTextFieldProps): {
     isVisible: boolean;
     onInputFocus: () => void;

package/dist/esm/components/text-field/TextField/hooks/useTextFieldClearButtonControls.js

@@ -1 +1 @@
-"use strict";import{useCallback as s,useRef as l,useState as c}from"react";import{hasValue as a}from"../utils/hasValue";import{useIsMountedRef as f}from"./useIsMountedRef";export function useTextFieldClearButtonControls(o){const[n,t]=c(!1),u=f(),e=l(),r=s(()=>{t(!0)},[]),i=s(()=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{u.mounted&&t(!1)},100)},[u]);return{isVisible:n&&a(o.value),onInputFocus:r,onInputBlur:i}}
+"use strict";import{useCallback as s,useRef as l,useState as c}from"react";import{hasValue as a}from"../utils/hasValue.js";import{useIsMountedRef as f}from"./useIsMountedRef.js";export function useTextFieldClearButtonControls(o){const[n,t]=c(!1),u=f(),e=l(),r=s(()=>{t(!0)},[]),i=s(()=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{u.mounted&&t(!1)},100)},[u]);return{isVisible:n&&a(o.value),onInputFocus:r,onInputBlur:i}}

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

@@ -1,2 +1,2 @@
-import { TextFieldControlProps } from '../types';
+import type { TextFieldControlProps } from '../types.js';
 export declare function useTextFieldDefaultLineBorderColor(props: TextFieldControlProps, focused: boolean): string;

package/dist/esm/components/text-field/TextField/hooks/useTextFieldDefaultLineBorderColor.js

@@ -1 +1 @@
-"use strict";import{useAdaptive as s}from"../../../../core/index";import{useMemo as u}from"react";import{getTextFieldStatus as a}from"../utils/getTextFieldStatus";export function useTextFieldDefaultLineBorderColor(t,o){const e=s(),r=a(t,o);return u(()=>{switch(r){case"normal":return e.grey100;case"focused":return e.blue400;case"error":return e.red600;case"disabled":return e.grey100}},[e.grey100,e.blue400,e.red600,r])}
+"use strict";import{useAdaptive as s}from"../../../../core/index.js";import{useMemo as u}from"react";import{getTextFieldStatus as a}from"../utils/getTextFieldStatus.js";export function useTextFieldDefaultLineBorderColor(t,o){const e=s(),r=a(t,o);return u(()=>{switch(r){case"normal":return e.grey100;case"focused":return e.blue400;case"error":return e.red600;case"disabled":return e.grey100}},[e.grey100,e.blue400,e.red600,r])}

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

@@ -1,2 +1,2 @@
-import { TextFieldControlProps } from '../types';
+import type { TextFieldControlProps } from '../types.js';
 export declare function useTextFieldDefaultPlaceholderColor(props: TextFieldControlProps, focused: boolean): string;

package/dist/esm/components/text-field/TextField/hooks/useTextFieldDefaultPlaceholderColor.js

@@ -1 +1 @@
-"use strict";import{useAdaptive as s}from"../../../../core/index";import{useMemo as a}from"react";import{getTextFieldStatus as u}from"../utils/getTextFieldStatus";export function useTextFieldDefaultPlaceholderColor(t,o){const e=s(),r=u(t,o);return a(()=>{switch(r){case"normal":case"focused":case"error":return e.grey500;case"disabled":return e.grey400}},[e.grey400,e.grey500,r])}
+"use strict";import{useAdaptive as s}from"../../../../core/index.js";import{useMemo as a}from"react";import{getTextFieldStatus as u}from"../utils/getTextFieldStatus.js";export function useTextFieldDefaultPlaceholderColor(t,o){const e=s(),r=u(t,o);return a(()=>{switch(r){case"normal":case"focused":case"error":return e.grey500;case"disabled":return e.grey400}},[e.grey400,e.grey500,r])}

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

@@ -1,2 +1,2 @@
-import { TextFieldControlProps } from '../types';
+import type { TextFieldControlProps } from '../types.js';
 export declare function useTextFieldDefaultTextColor(props: TextFieldControlProps, focused: boolean): string;

package/dist/esm/components/text-field/TextField/hooks/useTextFieldDefaultTextColor.js

@@ -1 +1 @@
-"use strict";import{useAdaptive as s}from"../../../../core/index";import{useMemo as a}from"react";import{getTextFieldStatus as u}from"../utils/getTextFieldStatus";export function useTextFieldDefaultTextColor(t,o){const e=s(),r=u(t,o);return a(()=>{switch(r){case"normal":case"focused":case"error":return e.grey800;case"disabled":return e.grey400}},[e.grey400,e.grey800,r])}
+"use strict";import{useAdaptive as s}from"../../../../core/index.js";import{useMemo as a}from"react";import{getTextFieldStatus as u}from"../utils/getTextFieldStatus.js";export function useTextFieldDefaultTextColor(t,o){const e=s(),r=u(t,o);return a(()=>{switch(r){case"normal":case"focused":case"error":return e.grey800;case"disabled":return e.grey400}},[e.grey400,e.grey800,r])}

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

@@ -1,4 +1,4 @@
-import { TextFieldControlProps } from '../types';
+import type { TextFieldControlProps } from '../types.js';
 export declare function useTextFieldHelpControls(props: TextFieldControlProps, focused: boolean): {
     color: string;
 };

package/dist/esm/components/text-field/TextField/hooks/useTextFieldHelpControls.js

@@ -1 +1 @@
-"use strict";import{colors as s}from"@toss/tds-colors";import{useMemo as c}from"react";import{useAdaptive as l}from"../../../../core/index";import{getTextFieldStatus as a}from"../utils/getTextFieldStatus";export function useTextFieldHelpControls(r,t){const e=l(),o=a(r,t);return{color:c(()=>{switch(o){case"normal":case"focused":case"disabled":return e.grey600;case"error":return s.red600}},[o,e.grey600])}}
+"use strict";import{colors as s}from"@toss/tds-colors";import{useMemo as c}from"react";import{useAdaptive as l}from"../../../../core/index.js";import{getTextFieldStatus as a}from"../utils/getTextFieldStatus.js";export function useTextFieldHelpControls(r,t){const e=l(),o=a(r,t);return{color:c(()=>{switch(o){case"normal":case"focused":case"disabled":return e.grey600;case"error":return s.red600}},[o,e.grey600])}}

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

@@ -1,4 +1,4 @@
-import { TextFieldControlProps } from '../types';
+import type { TextFieldControlProps } from '../types.js';
 export declare function useTextFieldValueControls(props: TextFieldControlProps): {
     value: string;
     onChangeText: (text: string) => void;

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

@@ -1,2 +1,2 @@
-export { TextField } from './TextField';
-export type { TextFieldProps } from './types';
+export { TextField } from './TextField.js';
+export type { TextFieldProps } from './types.js';

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

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

package/dist/esm/components/text-field/TextField/types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { Pressable, StyleProp, TextInput, TextStyle, ViewProps } from 'react-native';
+import type { ComponentProps, ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+import type { Pressable, StyleProp, TextInput, TextStyle, ViewProps } from 'react-native';
 export type TextFieldProps = TextFieldContainerPublicProps & TextFieldPublicProps & InputComponentProps;
 export type TextFieldValue = string | number;
 export type TextFieldControlProps = Pick<TextFieldProps, 'value' | 'onChangeText' | 'format' | 'hasError' | 'disabled' | 'labelOption'> & {

package/dist/esm/components/text-field/TextField/utils/format.d.ts

@@ -1,4 +1,4 @@
-import { TextFieldValue } from '../types';
+import type { TextFieldValue } from '../types.js';
 export declare const format: {
     phoneNumber: {
         transform: typeof transformToPhoneNumber;

package/dist/esm/components/text-field/TextField/utils/getTextFieldStatus.d.ts

@@ -1,3 +1,3 @@
-import { TextFieldControlProps } from '../types';
+import type { TextFieldControlProps } from '../types.js';
 export type TextFieldStatus = 'disabled' | 'error' | 'focused' | 'normal';
 export declare function getTextFieldStatus(props: TextFieldControlProps, focused: boolean): TextFieldStatus;

package/dist/esm/components/text-field/TextField/utils/hasValue.d.ts

@@ -1,2 +1,2 @@
-import { TextFieldValue } from '../types';
+import type { TextFieldValue } from '../types.js';
 export declare function hasValue(value: TextFieldValue | undefined): boolean;

package/dist/esm/components/text-field/TextField/variants/TextFieldBig/TextFieldBig.Button.d.ts

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
-export declare const TextFieldBigButton: import("react").ForwardRefExoticComponent<import("../../types").TextFieldContainerPublicProps & import("../../types").TextFieldPublicProps & Omit<Omit<import("react-native").PressableProps & import("react").RefAttributes<View>, "ref">, "value" | keyof import("../../types").TextFieldPublicProps | keyof import("../../types").TextFieldContainerPublicProps> & {
-    value?: import("../../types").TextFieldValue;
+export declare const TextFieldBigButton: import("react").ForwardRefExoticComponent<import("../../types.js").TextFieldContainerPublicProps & import("../../types.js").TextFieldPublicProps & Omit<Omit<import("react-native").PressableProps & import("react").RefAttributes<View>, "ref">, "value" | keyof import("../../types.js").TextFieldPublicProps | keyof import("../../types.js").TextFieldContainerPublicProps> & {
+    value?: import("../../types.js").TextFieldValue;
     defaultValue?: string;
     focused?: boolean;
     placeholder?: string;