@toss/tds-react-native 1.0.0

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

@@ -0,0 +1,11 @@
+import { TDSTextFieldItem } from './TDSTextFieldItem';
+import { TextFieldSelectButton } from './TDSTextFieldSelectButton';
+/** @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"> & {
+    contentStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & import("react").RefAttributes<import("react-native").TextInput>>;
+/** @deprecated */
+declare const OldTextFieldItem: typeof TDSTextFieldItem;
+/** @deprecated */
+declare const OldTextFieldSelectButton: typeof TextFieldSelectButton;
+export { OldTextField, OldTextFieldItem, OldTextFieldSelectButton };

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

@@ -0,0 +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};

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

@@ -0,0 +1,30 @@
+import { TxtStyleProps } from '../../txt';
+import { TextStyle, ViewStyle } from 'react-native';
+import { TDSTextFieldSize, TDSTextFieldState } from './TDSTextField';
+type TextStyleByVariant = Record<`${TDSTextFieldSize}-${TDSTextFieldState}`, Omit<TextStyle, 'color'> & {
+    color: TxtStyleProps['color'];
+}>;
+export declare const getLabelStyle: ({ grey700, grey800 }: {
+    grey700: string;
+    grey800: string;
+}) => TextStyleByVariant;
+export declare const getHelpTextStyle: ({ grey500, grey600, grey700, }: {
+    grey500: string;
+    grey600: string;
+    grey700: string;
+}) => TextStyleByVariant;
+type ViewStyleByVariant = Record<`${TDSTextFieldSize}-${TDSTextFieldState}`, Omit<ViewStyle, 'borderBottomColor' | 'backgroundColor'> & {
+    borderBottomColor: string | undefined;
+    backgroundColor: string | undefined;
+}>;
+export declare const getInputContainerStyle: ({ grey50, grey100, grey200, }: {
+    grey50: string;
+    grey100: string;
+    grey200: string;
+}) => ViewStyleByVariant;
+export declare const fontFamilyMap: Record<"bold" | "thin" | "extraLight" | "light" | "normal" | "regular" | "medium" | "semiBold" | "extraBold" | "heavy" | "black" | "extralight" | "semibold" | "extrabold", string>;
+export declare const getInputStyle: ({ grey400, grey900 }: {
+    grey400: string;
+    grey900: string;
+}) => TextStyleByVariant;
+export {};

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

@@ -0,0 +1 @@
+"use strict";import{colors as o}from"@toss-design-system/colors";import{fontFamilyByFontWeightMap as c,fontWeightMap as t,defaultTypographyMap as i}from"../../txt";import a from"hex-to-rgba";import{Platform as s,StyleSheet as l}from"react-native";export const getLabelStyle=({grey700:r,grey800:e})=>l.create({"big-default":{fontSize:i.st10.fontSize,fontWeight:t.regular,color:e},"big-focused":{color:o.blue700},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:i.t7.fontSize,fontWeight:t.regular,color:r},"medium-focused":{color:o.blue700},"medium-error":{color:o.red600},"medium-disabled":{},"classic-default":{fontSize:i.t7.fontSize,fontWeight:t.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:i.t7.fontSize,fontWeight:t.regular,color:e},"big-focused":{},"big-error":{color:o.red600},"big-disabled":{},"medium-default":{fontSize:i.t7.fontSize,fontWeight:t.regular,color:r},"medium-focused":{color:e},"medium-error":{color:o.red500},"medium-disabled":{color:r},"classic-default":{fontSize:i.t7.fontSize,fontWeight:t.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=c[s.OS==="android"?"android":"ios"],getInputStyle=({grey400:r,grey900:e})=>l.create({"big-default":{fontSize:i.t1.fontSize,fontWeight:t.medium,fontFamily:fontFamilyMap.medium,color:e},"big-focused":{},"big-error":{},"big-disabled":{},"medium-default":{fontSize:i.t3.fontSize,fontWeight:t.regular,fontFamily:fontFamilyMap.regular,color:e},"medium-focused":{},"medium-error":{},"medium-disabled":{},"classic-default":{fontSize:i.t4.fontSize,fontWeight:t.regular,fontFamily:fontFamilyMap.regular,color:e},"classic-focused":{},"classic-error":{},"classic-disabled":{color:r}});

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

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

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

@@ -0,0 +1 @@
+"use strict";export function getState({disabled:r,error:e,focus:t}){return r?"disabled":e?"error":t?"focused":"default"}

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

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

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

@@ -0,0 +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})});

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

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

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

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

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

@@ -0,0 +1,24 @@
+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;
+    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;
+    defaultValue?: string;
+    focused?: boolean;
+    placeholder?: string;
+    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+} & import("react").RefAttributes<View>>;
+type ExportedTextField = typeof _TextField & {
+    Clearable: typeof _ClearableTextField;
+    format: typeof format;
+    Button: typeof _TextFieldButton;
+};
+export declare const TextField: ExportedTextField;
+export {};

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

@@ -0,0 +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;

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

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

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

@@ -0,0 +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})}

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

@@ -0,0 +1,10 @@
+import { Txt } from '../../../txt/index';
+import { ComponentProps } from 'react';
+type TxtProps = ComponentProps<typeof Txt>;
+type Props = TxtProps & {
+    placeholder?: string;
+    placeholderColor?: string;
+    children: string;
+};
+export declare function TextFieldButtonText({ color, placeholder, placeholderColor, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +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})}

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

@@ -0,0 +1,6 @@
+interface Props {
+    size: number;
+    onPress: () => void;
+}
+export declare function TextFieldClearButton({ size, onPress }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +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})})}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface Props {
+    paddingTop?: number;
+    paddingBottom?: number;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+export declare function TextFieldContainer({ paddingTop, paddingBottom, style, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+"use strict";import{jsx as i}from"react/jsx-runtime";import{StyleSheet as o,View as a}from"react-native";export function TextFieldContainer({paddingTop:e,paddingBottom:t,style:n,children:r}){return i(a,{style:[c.container,{paddingTop:e,paddingBottom:t},n],children:r})}const c=o.create({container:{paddingVertical:16,paddingHorizontal:24}});

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface Props {
+    color: string;
+    children: ReactNode;
+}
+export declare function TextFieldHelp({ color, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +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}});

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

@@ -0,0 +1,9 @@
+import { StyleProp, ViewStyle } from 'react-native';
+interface Props {
+    color: string;
+    opacity: number;
+    children?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function TextFieldLabel({ color, opacity, children, style }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +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}});

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

@@ -0,0 +1,3 @@
+export declare function useIsMountedRef(): {
+    mounted: boolean;
+};

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

@@ -0,0 +1 @@
+"use strict";import{useLayoutEffect as t,useRef as u}from"react";export function useIsMountedRef(){const e=u({mounted:!1}).current;return t(()=>(e.mounted=!0,()=>{e.mounted=!1}),[e]),e}

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

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

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

@@ -0,0 +1 @@
+"use strict";import{colors as o}from"@toss-design-system/colors";import{useAdaptive as n}from"../../../../core/index";import{useMemo as a}from"react";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}}

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

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

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

@@ -0,0 +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}}

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

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

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

@@ -0,0 +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])}

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

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

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

@@ -0,0 +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])}

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

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

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

@@ -0,0 +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])}

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

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

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

@@ -0,0 +1 @@
+"use strict";import{colors as s}from"@toss-design-system/colors";import{useAdaptive as c}from"../../../../core/index";import{useMemo as l}from"react";import{getTextFieldStatus as a}from"../utils/getTextFieldStatus";export function useTextFieldHelpControls(r,t){const e=c(),o=a(r,t);return{color:l(()=>{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

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

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

@@ -0,0 +1 @@
+"use strict";import{useCallback as l}from"react";export function useTextFieldValueControls(t){const e=t.value??"",o=(t.format?.transform(e)??e).toString(),a=l(n=>{const r=t.format?.reset?.(n)??n;t.onChangeText?.(r.toString())},[t]);return{value:o,onChangeText:a}}

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

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

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

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

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

@@ -0,0 +1,142 @@
+import { ComponentProps, ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+import { 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'> & {
+    editable?: boolean;
+};
+export type InputComponentProps = Omit<ComponentPropsWithoutRef<typeof TextInput>, keyof TextFieldPublicProps | keyof TextFieldContainerPublicProps | 'value'> & {
+    value?: TextFieldValue;
+    defaultValue?: string;
+};
+export type ButtonComponentProps = Omit<ComponentPropsWithoutRef<typeof Pressable>, keyof TextFieldPublicProps | keyof TextFieldContainerPublicProps | 'value'> & {
+    value?: TextFieldValue;
+    defaultValue?: string;
+    /**
+     * @type {boolean}
+     * @description 텍스트 필드의 포커스 여부
+     * @default false
+     */
+    focused?: boolean;
+    placeholder?: string;
+    style?: StyleProp<TextStyle>;
+};
+export type TextAreaComponentProps = Omit<ComponentPropsWithoutRef<'textarea'>, keyof TextFieldPublicProps | keyof TextFieldContainerPublicProps | 'value'> & {
+    value?: TextFieldValue;
+    defaultValue?: string;
+    minHeight?: number | string;
+    height?: number | string;
+};
+export interface TextFieldPublicProps {
+    /**
+     * @type {boolean}
+     * @description 텍스트 필드의 비활성화 여부
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @type {string}
+     */
+    prefix?: string;
+    /**
+     * @type {string}
+     */
+    suffix?: string;
+    /**
+     * @type {ReactNode}
+     * @description 텍스트 필드의 오른쪽에 위치할 컴포넌트
+     */
+    right?: ReactNode;
+    /**
+     * @type {string}
+     */
+    placeholder?: string;
+    /**
+     * @type {string}
+     * @description 텍스트 필드 컨테이너의 props
+     */
+    containerProps?: ComponentProps<'div'>;
+    containerRef?: Ref<HTMLDivElement>;
+    /**
+     * @type {{
+     *   transform: (value: string) => string;
+     *   reset: (formattedValue: string) => string;
+     * }}
+     *
+     * @description 금액, 휴대폰번호 등 특정 형식으로 변환해야 하는 경우 사용합니다.
+     * transform: 입력값(value) => 변환된 값
+     * reset: 변환된 값 => 입력값(value)
+     *
+     * @example 금액
+     * format={{
+     *  transform: value => commaizeNumber(value)
+     *  reset: formattedValue => decommaizeNumber(formattedValue)
+     * }}
+     */
+    format?: {
+        transform: (value: TextFieldValue) => TextFieldValue;
+        reset?: (formattedValue: TextFieldValue) => TextFieldValue;
+    };
+}
+export interface TextFieldPrivateProps {
+    focused: boolean;
+    hasError: boolean;
+    disabled: boolean;
+}
+export type BaseTextFieldUIProps = Pick<TextFieldPublicProps, 'suffix' | 'prefix' | 'right'> & {
+    hasValue: boolean;
+    status: 'normal' | 'error' | 'disabled' | 'focused';
+};
+type BaseTextFieldCommonProps = TextFieldPublicProps & TextFieldPrivateProps & Pick<TextFieldContainerPublicProps, 'variant'>;
+export type BaseTextFieldProps = BaseTextFieldCommonProps & Omit<InputComponentProps, 'defaultValue'> & {
+    value: TextFieldValue;
+};
+export type BaseTextFieldButtonProps = Omit<BaseTextFieldCommonProps, 'containerProps' | 'containerRef'> & Omit<ButtonComponentProps, 'defaultValue'>;
+export type BaseTextAreaProps = Omit<BaseTextFieldCommonProps, 'prefix' | 'suffix' | 'right'> & Omit<TextAreaComponentProps, 'defaultValue'> & {
+    value: TextFieldValue;
+};
+export type TDSTextFieldVariant = 'box' | 'line' | 'big' | 'hero';
+export interface TextFieldContainerPublicProps {
+    /**
+     * @type {'box' | 'line' | 'big' | 'hero'}
+     * @description 텍스트 필드의 모양
+     */
+    variant: TDSTextFieldVariant;
+    /**
+     * @type {string}
+     * @description 텍스트 필드의 상단의 라벨
+     */
+    label?: string;
+    /**
+     * @type {'appear' | 'sustain'}
+     * appear: value가 있을 때만 label이 보입니다.
+     * sustain: 항상 label이 보입니다.
+     * @default appear
+     */
+    labelOption?: 'appear' | 'sustain';
+    /**
+     * @type {ReactNode}
+     * @description 텍스트 필드의 하단의 도움말
+     */
+    help?: ReactNode;
+    /**
+     * @type {boolean}
+     * @description 텍스트 필드의 에러 여부
+     * @default false
+     */
+    hasError?: boolean;
+    paddingTop?: number;
+    paddingBottom?: number;
+    containerStyle?: ViewProps['style'];
+}
+interface TextFieldContainerPrivateProps {
+    children: ReactNode;
+    focused: boolean;
+    hasValue: boolean;
+}
+export type TextFieldContainerProps = TextFieldContainerPublicProps & TextFieldContainerPrivateProps;
+export type ClearableTextFieldProps = Omit<TextFieldProps, 'right'> & {
+    onClear?: () => void;
+};
+export type TextFieldButtonProps = TextFieldContainerPublicProps & TextFieldPublicProps & ButtonComponentProps;
+export {};

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

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

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

@@ -0,0 +1,16 @@
+import { TextFieldValue } from '../types';
+export declare const format: {
+    phoneNumber: {
+        transform: typeof transformToPhoneNumber;
+        reset: typeof resetFromPhoneNumber;
+    };
+    price: {
+        transform: typeof transformToPrice;
+        reset: typeof resetFromPrice;
+    };
+};
+declare function resetFromPhoneNumber(value: TextFieldValue): string;
+declare function transformToPhoneNumber(value: TextFieldValue): string;
+declare function resetFromPrice(value: TextFieldValue): string;
+declare function transformToPrice(value: TextFieldValue): string;
+export {};

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

@@ -0,0 +1 @@
+"use strict";export const format={phoneNumber:{transform:a,reset:u},price:{transform:l,reset:f}};function u(r){return String(r).replace(/\D/g,"")}function a(r){const e=String(r),s=e.slice(0,2)==="02"?e.slice(0,10):e.slice(0,11),d=(t,c)=>{for(const n of c){const o=i(t,n);if(o)return o}return t},i=(t,c)=>{const n=t.match(c);if(n)return n.slice(1,4).filter(o=>o.length>0).join("-")};return d(s,[/^(010)(\d{1,4})(\d{0,4})$/,/^(02)(\d{1,3})(\d{0,4})$/,/^(02)(\d{1,4})(\d{0,4})$/,/^(\d{3})(\d{1,3})(\d{0,4})$/,/^(\d{3})(\d{1,4})(\d{0,4})$/,/(\d*)/])}function f(r){const e=String(r);return String(e.replace(/,/g,""))}function l(r){return String(r).replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,")}

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

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

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

@@ -0,0 +1 @@
+"use strict";export function getTextFieldStatus(e,r){return e.disabled||e?.editable===!1?"disabled":e.hasError?"error":r?"focused":"normal"}

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

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

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

@@ -0,0 +1 @@
+"use strict";export function hasValue(t){return(t||"").toString().length>0}

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

@@ -0,0 +1,8 @@
+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;
+    defaultValue?: string;
+    focused?: boolean;
+    placeholder?: string;
+    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+} & import("react").RefAttributes<View>>;

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

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{useAdaptive as b}from"../../../../../core/index";import{Txt as f}from"../../../../txt/index";import{forwardRef as w,useState as S}from"react";import{Pressable as v,StyleSheet as W,View as h}from"react-native";import{TextFieldButtonArrow as j}from"../../components/TextFieldButtonArrow";import{TextFieldButtonText as D}from"../../components/TextFieldButtonText";import{TextFieldContainer as L}from"../../components/TextFieldContainer";import{TextFieldHelp as V}from"../../components/TextFieldHelp";import{TextFieldLabel as H}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as R}from"../../hooks/useLabelControls";import{useTextFieldDefaultLineBorderColor as k}from"../../hooks/useTextFieldDefaultLineBorderColor";import{useTextFieldDefaultPlaceholderColor as A}from"../../hooks/useTextFieldDefaultPlaceholderColor";import{useTextFieldDefaultTextColor as G}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as I}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as P}from"../../hooks/useTextFieldValueControls";export const TextFieldBigButton=w(function({prefix:n,right:u,suffix:d,placeholder:g,style:z,containerStyle:x,...e},p){const l=b(),[o,a]=S(!1),{value:c}=P(e),y=c!=="",s=R(e,o),B=I(e,o),C=k(e,o),T=A(e,o),F=G(e,o);return m(L,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:x,children:[t(H,{color:s.color,opacity:s.opacity,children:e.label}),t(v,{ref:p,accessibilityState:{disabled:e.disabled},accessibilityRole:"button",onFocus:i=>{e.onFocus?.(i),a(!0)},onBlur:i=>{e.onBlur?.(i),a(!1)},...e,children:m(h,{style:[r.inputContainer,{borderBottomWidth:2,borderBottomColor:C}],children:[n?t(f,{typography:"t1",fontWeight:"semiBold",color:l.grey800,style:r.prefix,children:n}):null,t(D,{typography:"t1",fontWeight:"semiBold",placeholder:g,placeholderColor:T,color:F,style:{flexGrow:1},children:c}),d?t(f,{typography:"t1",fontWeight:"semiBold",color:y?l.grey800:l.grey500,children:d}):null,t(h,{style:r.rightContainer,children:u??t(j,{})})]})}),e.help!=null?t(V,{color:B.color,children:e.help}):null]})});const r=W.create({labelContainer:{paddingBottom:6},prefix:{paddingRight:8},inputContainer:{display:"flex",flexDirection:"row",alignItems:"center",border:"none",backgroundColor:"transparent",paddingBottom:4,paddingVertical:0,position:"relative",overflow:"hidden",fontSize:"inherit",lineHeight:"inherit",fontWeight:600,width:"100%"},rightContainer:{display:"flex",alignItems:"center",marginLeft:8,flexGrow:0,flexShrink:0}});

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

@@ -0,0 +1,4 @@
+import { TextInput } from 'react-native';
+export declare const TextFieldBigClearable: import("react").ForwardRefExoticComponent<Omit<import("../..").TextFieldProps, "right"> & {
+    onClear?: () => void;
+} & import("react").RefAttributes<TextInput>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldBig/TextFieldBig.Clearable.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{forwardRef as i}from"react";import{TextFieldClearButton as l}from"../../components/TextFieldClearButton";import{useTextFieldClearButtonControls as u}from"../../hooks/useTextFieldClearButtonControls";import{TextFieldBig as a}from"./TextFieldBig";export const TextFieldBigClearable=i(function(e,r){const o=u(e);return n(a,{...e,ref:r,right:o.isVisible?n(l,{size:24,onPress:()=>{e.onChangeText?.(""),e.onClear?.()}}):void 0,onFocus:t=>{o.onInputFocus?.(),e.onFocus?.(t)},onBlur:t=>{o.onInputBlur?.(),e.onBlur?.(t)}})});

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

@@ -0,0 +1,5 @@
+import { TextInput } from 'react-native';
+export declare const TextFieldBig: 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;
+    defaultValue?: string;
+} & import("react").RefAttributes<TextInput>>;

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

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as f}from"react/jsx-runtime";import{forwardRef as S,useState as v}from"react";import{StyleSheet as W,TextInput as j,View as h}from"react-native";import{useAdaptive as D,useTypographyTheme as L}from"../../../../../core/index";import{Txt as u}from"../../../../txt/index";import{TextFieldContainer as V}from"../../components/TextFieldContainer";import{TextFieldHelp as z}from"../../components/TextFieldHelp";import{TextFieldLabel as H}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as I}from"../../hooks/useLabelControls";import{useTextFieldDefaultLineBorderColor as k}from"../../hooks/useTextFieldDefaultLineBorderColor";import{useTextFieldDefaultPlaceholderColor as G}from"../../hooks/useTextFieldDefaultPlaceholderColor";import{useTextFieldDefaultTextColor as R}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as _}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as A}from"../../hooks/useTextFieldValueControls";export const TextFieldBig=S(function({prefix:n,right:a,suffix:d,style:g,containerStyle:x,...e},p){const l=D(),{typography:y}=L(),[t,c]=v(!1),{value:s,onChangeText:T}=A(e),C=s!=="",m=I(e,t),F=_(e,t),B=k(e,t),b=G(e,t),w=R(e,t);return f(V,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:x,children:[o(H,{color:m.color,opacity:m.opacity,children:e.label}),f(h,{style:[r.inputContainer,{borderBottomWidth:2,borderBottomColor:B}],children:[n?o(u,{typography:"t1",fontWeight:"semiBold",color:l.grey800,style:r.prefix,children:n}):null,o(j,{...e,ref:p,value:s,editable:e.editable??!e.disabled,placeholderTextColor:b,onChangeText:T,onFocus:i=>{e.onFocus?.(i),c(!0)},onBlur:i=>{e.onFocus?.(i),c(!1)},style:[{flexGrow:1,flexBasis:0,fontWeight:"600",fontSize:y.t1.fontSize,color:w,padding:0},g]}),d?o(u,{typography:"t1",fontWeight:"semiBold",color:C?l.grey800:l.grey500,children:d}):null,a?o(h,{style:r.rightContainer,children:a}):null]}),e.help!=null?o(z,{color:F.color,children:e.help}):null]})});const r=W.create({labelContainer:{paddingBottom:6},prefix:{paddingRight:8},inputContainer:{display:"flex",flexDirection:"row",alignItems:"center",border:"none",backgroundColor:"transparent",paddingBottom:4,paddingVertical:0,position:"relative",overflow:"hidden",fontSize:"inherit",lineHeight:"inherit",fontWeight:600,width:"100%"},rightContainer:{display:"flex",alignItems:"center",marginLeft:8,flexGrow:0,flexShrink:0}});

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

@@ -0,0 +1,3 @@
+export * from './TextFieldBig';
+export * from './TextFieldBig.Clearable';
+export * from './TextFieldBig.Button';

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

@@ -0,0 +1 @@
+"use strict";export*from"./TextFieldBig";export*from"./TextFieldBig.Clearable";export*from"./TextFieldBig.Button";

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

@@ -0,0 +1,8 @@
+import { View } from 'react-native';
+export declare const TextFieldBoxButton: 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;
+    defaultValue?: string;
+    focused?: boolean;
+    placeholder?: string;
+    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+} & import("react").RefAttributes<View>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldBox/TextFieldBox.Button.js

@@ -0,0 +1 @@
+"use strict";import{jsx as t,jsxs as c}from"react/jsx-runtime";import{colors as B}from"@toss-design-system/colors";import{useAdaptive as C}from"../../../../../core/index";import{Txt as m}from"../../../../txt/index";import{forwardRef as w,useState as v}from"react";import{Pressable as S,StyleSheet as j,View as u}from"react-native";import{TextFieldButtonArrow as L}from"../../components/TextFieldButtonArrow";import{TextFieldButtonText as R}from"../../components/TextFieldButtonText";import{TextFieldContainer as V}from"../../components/TextFieldContainer";import{TextFieldHelp as H}from"../../components/TextFieldHelp";import{TextFieldLabel as A}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as D}from"../../hooks/useLabelControls";import{useTextFieldDefaultTextColor as I}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as O}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as _}from"../../hooks/useTextFieldValueControls";import{getTextFieldStatus as k}from"../../utils/getTextFieldStatus";import{TextFieldBoxOverlay as z}from"./TextFieldBoxOverlay";export const TextFieldBoxButton=w(function({prefix:n,right:f,suffix:d,placeholder:x,containerStyle:y,style:g,...e},h){const o=C(),[l,a]=v(!1),{value:r}=_(e),T=O(e,l),s=D(e,l),p=k(e,l),b=I(e,l),F=r!=null&&r!=="";return c(V,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:y,children:[t(A,{color:s.color,opacity:s.opacity,children:e.label}),t(S,{ref:h,accessibilityState:{disabled:e.disabled},accessibilityRole:"button",onFocus:i=>{e.onFocus?.(i),a(!0)},onBlur:i=>{e.onBlur?.(i),a(!1)},...e,children:c(u,{style:[G.boxContainer,{backgroundColor:o.grey50}],children:[n?t(m,{color:o.grey800,style:[{paddingRight:8},g],children:n}):null,t(R,{typography:"t5",placeholder:x,placeholderColor:o.grey500,color:b,style:{flexGrow:1},children:r}),d?t(m,{color:F?o.grey800:o.grey500,style:{paddingLeft:8},children:d}):null,t(u,{style:{display:"flex",alignItems:"center",marginLeft:8},children:f??t(L,{})}),t(z,{status:p})]})}),e.help!=null?t(H,{color:T.color,children:e.help}):null]})});const G=j.create({boxContainer:{overflow:"hidden",borderRadius:14,display:"flex",flexDirection:"row",alignItems:"center",borderColor:B.greyOpacity100,borderWidth:1,paddingVertical:14,paddingHorizontal:16,width:"100%"}});

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

@@ -0,0 +1,4 @@
+import { TextInput } from 'react-native';
+export declare const TextFieldBoxClearable: import("react").ForwardRefExoticComponent<Omit<import("../..").TextFieldProps, "right"> & {
+    onClear?: () => void;
+} & import("react").RefAttributes<TextInput>>;

package/dist/esm/components/text-field/TextField/variants/TextFieldBox/TextFieldBox.Clearable.js

@@ -0,0 +1 @@
+"use strict";import{jsx as n}from"react/jsx-runtime";import{forwardRef as i}from"react";import{TextFieldClearButton as l}from"../../components/TextFieldClearButton";import{useTextFieldClearButtonControls as u}from"../../hooks/useTextFieldClearButtonControls";import{TextFieldBox as a}from"./TextFieldBox";export const TextFieldBoxClearable=i(function(e,r){const o=u(e);return n(a,{...e,ref:r,right:o.isVisible?n(l,{size:20,onPress:()=>{e.onChangeText?.(""),e.onClear?.()}}):void 0,onFocus:t=>{o.onInputFocus?.(),e.onFocus?.(t)},onBlur:t=>{o.onInputBlur?.(),e.onBlur?.(t)}})});

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

@@ -0,0 +1,5 @@
+import { TextInput } from 'react-native';
+export declare const TextFieldBox: 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;
+    defaultValue?: string;
+} & import("react").RefAttributes<TextInput>>;

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

@@ -0,0 +1 @@
+"use strict";import{jsx as o,jsxs as m}from"react/jsx-runtime";import{colors as B}from"@toss-design-system/colors";import{forwardRef as v,useState as w}from"react";import{StyleSheet as S,TextInput as j,View as u}from"react-native";import{useAdaptive as L,useTypographyTheme as V}from"../../../../../core";import{Txt as x}from"../../../../txt";import{TextFieldContainer as z}from"../../components/TextFieldContainer";import{TextFieldHelp as H}from"../../components/TextFieldHelp";import{TextFieldLabel as I}from"../../components/TextFieldLabel";import{useTextFieldLabelControls as O}from"../../hooks/useLabelControls";import{useTextFieldDefaultTextColor as R}from"../../hooks/useTextFieldDefaultTextColor";import{useTextFieldHelpControls as D}from"../../hooks/useTextFieldHelpControls";import{useTextFieldValueControls as _}from"../../hooks/useTextFieldValueControls";import{getTextFieldStatus as k}from"../../utils/getTextFieldStatus";import{TextFieldBoxOverlay as A}from"./TextFieldBoxOverlay";export const TextFieldBox=v(function({prefix:i,right:n,suffix:a,containerStyle:f,style:y,...e},g){const t=L(),{typography:h}=V(),[l,d]=w(!1),T=D(e,l),{value:s,onChangeText:p}=_(e),c=O(e,l),F=k(e,l),b=R(e,l),C=s!=="";return m(z,{paddingTop:e.paddingTop,paddingBottom:e.paddingBottom,style:f,children:[o(I,{color:c.color,opacity:c.opacity,children:e.label}),m(u,{style:[G.boxContainer,{backgroundColor:t.greyOpacity50}],children:[i?o(x,{color:t.grey800,style:{paddingRight:8},children:i}):null,o(j,{...e,ref:g,onChangeText:p,editable:e.editable??!e.disabled,onFocus:r=>{e.onFocus?.(r),d(!0)},onBlur:r=>{e.onBlur?.(r),d(!1)},value:s,style:[{flexGrow:1,flexBasis:0,color:b,fontSize:h.t5.fontSize,padding:0},y],placeholderTextColor:t.grey500}),a?o(x,{color:C?t.grey800:t.grey500,style:{paddingLeft:8},children:a}):null,n?o(u,{style:{display:"flex",alignItems:"center",marginLeft:8},children:n}):null,o(A,{status:F})]}),e.help!=null?o(H,{color:T.color,children:e.help}):null]})});const G=S.create({boxContainer:{overflow:"hidden",borderRadius:14,display:"flex",flexDirection:"row",alignItems:"center",borderColor:B.greyOpacity100,borderWidth:1,paddingVertical:14,paddingHorizontal:16,width:"100%"}});

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

@@ -0,0 +1,6 @@
+import { TextFieldStatus } from '../../utils/getTextFieldStatus';
+interface Props {
+    status: TextFieldStatus;
+}
+export declare function TextFieldBoxOverlay({ status }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/text-field/TextField/variants/TextFieldBox/TextFieldBoxOverlay.js

@@ -0,0 +1 @@
+"use strict";import{jsx as c}from"react/jsx-runtime";import{colors as n}from"@toss-design-system/colors";import{useLayoutEffect as p,useRef as m,useState as f}from"react";import{Animated as o,Easing as s,StyleSheet as d}from"react-native";const a={normal:"rgba(0, 0, 0, 0)",error:n.red900,focused:n.blue900,disabled:"rgba(0, 0, 0, 0)"};export function TextFieldBoxOverlay({status:e}){const[i,u]=f(e),t=m(new o.Value(0)).current,r=!1,l=t.interpolate({inputRange:[0,1],outputRange:[a[i],a[e]]});return p(()=>{t.setValue(0),o.timing(t,{toValue:1,easing:s.inOut(s.ease),useNativeDriver:r}).start(()=>{u(e)})},[e,t,r]),c(o.View,{pointerEvents:"none",style:[g.container,{backgroundColor:l}]})}const g=d.create({container:{borderRadius:14,opacity:.05,position:"absolute",top:0,left:0,right:0,bottom:0}});

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

@@ -0,0 +1,3 @@
+export * from './TextFieldBox';
+export * from './TextFieldBox.Clearable';
+export * from './TextFieldBox.Button';

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

@@ -0,0 +1 @@
+"use strict";export*from"./TextFieldBox";export*from"./TextFieldBox.Clearable";export*from"./TextFieldBox.Button";