@fountain-ui/core 3.0.0-alpha.24 → 3.0.0-alpha.25

package/build/commonjs/TextField/TextField.js

@@ -37,6 +37,12 @@ const styles = _reactNative.StyleSheet.create({
   input: {
     flexGrow: 1
   },
+  inputWrapper: {
+    flexGrow: 1
+  },
+  placeholderWrapper: { ..._reactNative.StyleSheet.absoluteFillObject,
+    justifyContent: 'center'
+  },
   secureToggleButton: {
     alignItems: 'flex-end',
     padding: 0
@@ -67,6 +73,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
+    placeholder: placeholderProp,
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
@@ -111,10 +118,12 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     selector: typography => typography.caption1['semiBold'],
     color: theme.palette.text.strong
   });
-  const inputStyle = (0, _styles.css)([styles.input, variantStyles.inputStyle, _reactNative.Platform.OS === 'web' ? {
+  const inputStyle = (0, _styles.css)([styles.input, variantStyles.inputStyle, variantStyles.inputFontStyle, _reactNative.Platform.OS === 'web' ? {
     outlineWidth: 0
   } : {}, styleProp]);
-  const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+  const placeholderFontStyle = (0, _styles.css)([variantStyles.inputFontStyle, {
+    color: placeholderTextColorProp ?? theme.palette.status.disabledLabel
+  }]);
   const containerStyle = (0, _styles.css)([styles.root, variantStyles.containerStyle, {
     opacity: disabled ? 0.3 : 1
   }, containerStyleProp]);
@@ -131,18 +140,26 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     color: 'base',
     height: 19,
     width: 19
-  })) : null, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
+  })) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.inputWrapper
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    pointerEvents: 'none',
+    style: styles.placeholderWrapper
+  }, placeholderProp && !value ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: placeholderProp,
+    numberOfLines: 1,
+    style: placeholderFontStyle
+  }) : null), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
     autoFocus: autoFocus,
     editable: !disabled,
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
-    placeholderTextColor: placeholderTextColor,
     ref: ref,
     secureTextEntry: secureTextEntry,
     style: inputStyle,
     value: value
-  }, otherProps)), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  }, otherProps))), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     color: 'base',
     children: /*#__PURE__*/_react.default.createElement(_icons.Clear, {
       height: 17.31,

package/build/commonjs/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","alignItems","flexGrow","input","secureToggleButton","padding","searchIconContainer","left","position","loadingSinner","height","width","clearButton","right","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","Platform","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        editable = true,\n        hint,\n        isLoading,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                {isSearch ? (\n                    <View style={styles.searchIconContainer}>\n                        {isLoading ? (\n                            <LoadingSpinner style={styles.loadingSinner}/>\n                        ) : (\n                            <Search\n                                color={'base'}\n                                height={19}\n                                width={19}\n                            />\n                        )}\n                    </View>\n                ) : null}\n\n                <TextInput\n                    autoFocus={autoFocus}\n                    editable={!disabled}\n                    onBlur={handleBlur}\n                    onChangeText={handleChangeText}\n                    onFocus={handleFocus}\n                    placeholderTextColor={placeholderTextColor}\n                    ref={ref}\n                    secureTextEntry={secureTextEntry}\n                    style={inputStyle}\n                    value={value}\n                    {...otherProps}\n                />\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <IconButton\n                        color={'base'}\n                        onPress={handleSecureTogglePress}\n                        style={styles.secureToggleButton}\n                    >\n                        {secureTextEntry ? (\n                            <EyeOff\n                                height={19}\n                                width={17.42}\n                            />\n                        ) : (\n                            <EyeOn\n                                height={19}\n                                width={17.42}\n                            />\n                        )}\n                    </IconButton>\n                ) : null}\n            </Row>\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,QAAQ,EAAE;EAFR,CADuB;EAK7BC,KAAK,EAAE;IACHD,QAAQ,EAAE;EADP,CALsB;EAQ7BE,kBAAkB,EAAE;IAChBH,UAAU,EAAE,UADI;IAEhBI,OAAO,EAAE;EAFO,CARS;EAY7BC,mBAAmB,EAAE;IACjBC,IAAI,EAAE,EADW;IAEjBC,QAAQ,EAAE;EAFO,CAZQ;EAgB7BC,aAAa,EAAE;IACXC,MAAM,EAAE,EADG;IAEXC,KAAK,EAAE;EAFI,CAhBc;EAoB7BC,WAAW,EAAE;IACTF,MAAM,EAAE,EADC;IAETF,QAAQ,EAAE,UAFD;IAGTK,KAAK,EAAE,CAHE;IAITF,KAAK,EAAE;EAJE;AApBgB,CAAlB,CAAf;;AA4BA,MAAMG,SAAS,gBAAGC,cAAA,CAAMC,UAAN,CAA4C,SAASF,SAAT,CAAmBG,KAAnB,EAA0BC,GAA1B,EAA+B;EACzF,MAAM;IACFC,SADE;IAEFC,cAAc,EAAEC,kBAFd;IAGFC,QAAQ,GAAG,IAHT;IAIFC,IAJE;IAKFC,SALE;IAMFC,MANE;IAOFC,YAAY,EAAEC,gBAPZ;IAQFC,OARE;IASFC,oBAAoB,EAAEC,wBATpB;IAUFC,eAAe,EAAEC,mBAVf;IAWFC,eAAe,EAAEC,mBAXf;IAYFC,MAAM,GAAG,SAZP;IAaFC,KAAK,EAAEC,SAbL;IAcFC,KAdE;IAeFC,KAfE;IAgBFC,OAAO,GAAG,SAhBR;IAiBF,GAAGC;EAjBD,IAkBFxB,KAlBJ;EAoBA,MAAMyB,QAAQ,GAAGF,OAAO,KAAK,QAA7B;EAEA,MAAMG,QAAQ,GAAG,CAACrB,QAAD,IAAaE,SAA9B;EAEA,MAAMoB,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4B,IAAAC,eAAA,EAAkB7B,SAAS,IAAI,KAA/B,CAAlC;EACA,MAAM,CAACY,eAAD,EAAkBkB,kBAAlB,IAAwC,IAAAD,eAAA,EAAkBhB,mBAAmB,IAAI,KAAzC,CAA9C;EAEA,MAAMkB,aAAa,GAAG,IAAAC,2BAAA,EAAmBX,OAAnB,EAA4BL,MAA5B,EAAoCW,SAApC,CAAtB;;EAEA,MAAMM,UAAU,GAAIC,KAAD,IAA0D;IACzEN,YAAY,CAAC,KAAD,CAAZ;IACAtB,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAG4B,KAAH,CAAN;EACH,CAHD;;EAKA,MAAMC,WAAW,GAAID,KAAD,IAA0D;IAC1EN,YAAY,CAAC,IAAD,CAAZ;IACAnB,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGyB,KAAH,CAAP;EACH,CAHD;;EAKA,MAAME,uBAAuB,GAAG,MAAM;IAClCN,kBAAkB,CAAEO,OAAD,IAAa,CAACA,OAAf,CAAlB;EACH,CAFD;;EAIA,MAAMC,gBAAgB,GAAIC,IAAD,IAAkB;IACvC/B,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,YAAAA,gBAAgB,CAAG+B,IAAH,CAAhB;EACH,CAFD;;EAIA,MAAMC,WAAW,GAAG,MAAM;IACtBF,gBAAgB,CAAC,EAAD,CAAhB;EACH,CAFD;;EAIA,MAAMxB,eAAe,GAAGC,mBAAmB,IAAIQ,QAA/C;EAEA,MAAMkB,cAAc,GAAG,IAAAC,wBAAA,EAAgBjB,KAAhB,EAAuB;IAC1CkB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoB,UAApB,CADgB;IAE1CC,KAAK,EAAErB,KAAK,CAACsB,OAAN,CAAcR,IAAd,CAAmBS;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnBxE,MAAM,CAACM,KADY,EAEnB+C,aAAa,CAACkB,UAFK,EAGnBE,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;IAAEC,YAAY,EAAE;EAAhB,CAAxB,GAAiE,EAH9C,EAInBnC,SAJmB,CAAJ,CAAnB;EAOA,MAAMR,oBAAoB,GAAGC,wBAAwB,IAAIc,KAAK,CAACsB,OAAN,CAAc/B,MAAd,CAAqBsC,aAA9E;EAEA,MAAMrD,cAAc,GAAG,IAAAiD,WAAA,EAAI,CACvBxE,MAAM,CAACG,IADgB,EAEvBkD,aAAa,CAAC9B,cAFS,EAGvB;IAAEsD,OAAO,EAAE/B,QAAQ,GAAG,GAAH,GAAS;EAA5B,CAHuB,EAIvBtB,kBAJuB,CAAJ,CAAvB;EAOA,oBACI,6BAAC,iBAAD,QACKiB,KAAK,IAAI,CAACI,QAAV,gBACG,6BAAC,iBAAD;IACI,QAAQ,EAAEJ,KADd;IAEI,KAAK,EAAEsB;EAFX,EADH,GAKG,IANR,eAQI,6BAAC,YAAD;IAAK,KAAK,EAAExC;EAAZ,GACKsB,QAAQ,gBACL,6BAAC,iBAAD;IAAM,KAAK,EAAE7C,MAAM,CAACS;EAApB,GACKkB,SAAS,gBACN,6BAAC,qBAAD;IAAgB,KAAK,EAAE3B,MAAM,CAACY;EAA9B,EADM,gBAGN,6BAAC,aAAD;IACI,KAAK,EAAE,MADX;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EAJR,CADK,GAYL,IAbR,eAeI,6BAAC,sBAAD;IACI,SAAS,EAAEU,SADf;IAEI,QAAQ,EAAE,CAACwB,QAFf;IAGI,MAAM,EAAES,UAHZ;IAII,YAAY,EAAEK,gBAJlB;IAKI,OAAO,EAAEH,WALb;IAMI,oBAAoB,EAAEzB,oBAN1B;IAOI,GAAG,EAAEX,GAPT;IAQI,eAAe,EAAEa,eARrB;IASI,KAAK,EAAEqC,UATX;IAUI,KAAK,EAAE7B;EAVX,GAWQE,UAXR,EAfJ,EA6BKR,eAAe,IAAIM,KAAJ,aAAIA,KAAJ,eAAIA,KAAK,CAAEoC,MAA1B,IAAoCpC,KAAK,CAACoC,MAAN,GAAe,CAAnD,gBACG,6BAAC,mBAAD;IACI,KAAK,EAAE,MADX;IAEI,QAAQ,eACJ,6BAAC,YAAD;MACI,MAAM,EAAE,KADZ;MAEI,KAAK,EAAE;IAFX,EAHR;IAQI,OAAO,EAAEhB,WARb;IASI,KAAK,EAAE9D,MAAM,CAACe;EATlB,EADH,GAYG,IAzCR,EA2CKoB,mBAAmB,IAAI,CAACU,QAAxB,gBACG,6BAAC,mBAAD;IACI,KAAK,EAAE,MADX;IAEI,OAAO,EAAEa,uBAFb;IAGI,KAAK,EAAE1D,MAAM,CAACO;EAHlB,GAKK2B,eAAe,gBACZ,6BAAC,aAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EADY,gBAMZ,6BAAC,YAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EAXR,CADH,GAkBG,IA7DR,CARJ,EAwEKR,IAAI,IAAI,CAACmB,QAAT,gBACG,6BAAC,iBAAD;IACI,QAAQ,EAAEnB,IADd;IAEI,KAAK,EAAE2B,aAAa,CAAC0B;EAFzB,EADH,GAKG,IA7ER,CADJ;AAiFH,CA9JiB,CAAlB;;eAgKe9D,S"}
+{"version":3,"names":["styles","StyleSheet","create","root","alignItems","flexGrow","input","inputWrapper","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","searchIconContainer","left","position","loadingSinner","height","width","clearButton","right","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","inputFontStyle","Platform","OS","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    inputWrapper: {\n        flexGrow: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        editable = true,\n        hint,\n        isLoading,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        variantStyles.inputFontStyle,\n        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderFontStyle = css([\n        variantStyles.inputFontStyle,\n        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },\n    ]);\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                {isSearch ? (\n                    <View style={styles.searchIconContainer}>\n                        {isLoading ? (\n                            <LoadingSpinner style={styles.loadingSinner}/>\n                        ) : (\n                            <Search\n                                color={'base'}\n                                height={19}\n                                width={19}\n                            />\n                        )}\n                    </View>\n                ) : null}\n\n                <View style={styles.inputWrapper}>\n                    <View\n                        pointerEvents={'none'}\n                        style={styles.placeholderWrapper}\n                    >\n                        {placeholderProp && !value ? (\n                            <Text\n                                children={placeholderProp}\n                                numberOfLines={1}\n                                style={placeholderFontStyle}\n                            />\n                        ) : null}\n                    </View>\n\n                    <TextInput\n                        autoFocus={autoFocus}\n                        editable={!disabled}\n                        onBlur={handleBlur}\n                        onChangeText={handleChangeText}\n                        onFocus={handleFocus}\n                        ref={ref}\n                        secureTextEntry={secureTextEntry}\n                        style={inputStyle}\n                        value={value}\n                        {...otherProps}\n                    />\n                </View>\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <IconButton\n                        color={'base'}\n                        onPress={handleSecureTogglePress}\n                        style={styles.secureToggleButton}\n                    >\n                        {secureTextEntry ? (\n                            <EyeOff\n                                height={19}\n                                width={17.42}\n                            />\n                        ) : (\n                            <EyeOn\n                                height={19}\n                                width={17.42}\n                            />\n                        )}\n                    </IconButton>\n                ) : null}\n            </Row>\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/build/commonjs/TextField/useVariantStyleMap.js

@@ -53,17 +53,17 @@ function useVariantStyleMap(variant, status, isFocused) {
           },
           inputStyle: {
             padding: 0,
-            paddingRight: 16,
-            ...(0, _styles2.createFontStyle)(theme, {
-              selector: _ => (0, _styles.typographyOf)({
-                fontSize: 18,
-                lineHeight: 27,
-                fontFamily: 'PretendardStd-SemiBold',
-                letterSpacing: 0
-              }),
-              color: theme.palette.text.strong
-            })
+            paddingRight: 16
           },
+          inputFontStyle: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 18,
+              lineHeight: 27,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: 0
+            }),
+            color: theme.palette.text.strong
+          }),
           hintStyle: {
             marginTop: theme.spacing(2),
             ...(0, _styles2.createFontStyle)(theme, {
@@ -85,17 +85,17 @@ function useVariantStyleMap(variant, status, isFocused) {
             paddingTop: 11
           },
           inputStyle: {
-            padding: 0,
-            ...(0, _styles2.createFontStyle)(theme, {
-              selector: _ => (0, _styles.typographyOf)({
-                fontSize: 16,
-                lineHeight: 19.2,
-                fontFamily: 'PretendardStd-SemiBold',
-                letterSpacing: -0.16
-              }),
-              color: theme.palette.text.strong
-            })
-          }
+            padding: 0
+          },
+          inputFontStyle: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 16,
+              lineHeight: 19.2,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: -0.16
+            }),
+            color: theme.palette.text.strong
+          })
         };
     }
   }, [theme, borderColor, hintColor, variant, isFocused]);

package/build/commonjs/TextField/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","paddingVertical","inputStyle","padding","paddingRight","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                        paddingRight: 16,\n                        ...createFontStyle(theme, {\n                            selector: (_) => typographyOf({\n                                fontSize: 18,\n                                lineHeight: 27,\n                                fontFamily: 'PretendardStd-SemiBold',\n                                letterSpacing: 0,\n                            }),\n                            color: theme.palette.text.strong,\n                        }),\n                    },\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                        ...createFontStyle(theme, {\n                            selector: (_) => typographyOf({\n                                fontSize: 16,\n                                lineHeight: 19.2,\n                                fontFamily: 'PretendardStd-SemiBold',\n                                letterSpacing: -0.16,\n                            }),\n                            color: theme.palette.text.strong,\n                        }),\n                    },\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","paddingVertical","inputStyle","padding","paddingRight","inputFontStyle","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputFontStyle?: TextStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                        paddingRight: 16,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 18,\n                            lineHeight: 27,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 19.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: -0.16,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}

package/build/module/TextField/TextField.js

@@ -16,6 +16,12 @@ const styles = StyleSheet.create({
   input: {
     flexGrow: 1
   },
+  inputWrapper: {
+    flexGrow: 1
+  },
+  placeholderWrapper: { ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center'
+  },
   secureToggleButton: {
     alignItems: 'flex-end',
     padding: 0
@@ -45,6 +51,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
+    placeholder: placeholderProp,
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
@@ -89,10 +96,12 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     selector: typography => typography.caption1['semiBold'],
     color: theme.palette.text.strong
   });
-  const inputStyle = css([styles.input, variantStyles.inputStyle, Platform.OS === 'web' ? {
+  const inputStyle = css([styles.input, variantStyles.inputStyle, variantStyles.inputFontStyle, Platform.OS === 'web' ? {
     outlineWidth: 0
   } : {}, styleProp]);
-  const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+  const placeholderFontStyle = css([variantStyles.inputFontStyle, {
+    color: placeholderTextColorProp ?? theme.palette.status.disabledLabel
+  }]);
   const containerStyle = css([styles.root, variantStyles.containerStyle, {
     opacity: disabled ? 0.3 : 1
   }, containerStyleProp]);
@@ -109,18 +118,26 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     color: 'base',
     height: 19,
     width: 19
-  })) : null, /*#__PURE__*/React.createElement(TextInput, _extends({
+  })) : null, /*#__PURE__*/React.createElement(View, {
+    style: styles.inputWrapper
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: 'none',
+    style: styles.placeholderWrapper
+  }, placeholderProp && !value ? /*#__PURE__*/React.createElement(Text, {
+    children: placeholderProp,
+    numberOfLines: 1,
+    style: placeholderFontStyle
+  }) : null), /*#__PURE__*/React.createElement(TextInput, _extends({
     autoFocus: autoFocus,
     editable: !disabled,
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
-    placeholderTextColor: placeholderTextColor,
     ref: ref,
     secureTextEntry: secureTextEntry,
     style: inputStyle,
     value: value
-  }, otherProps)), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/React.createElement(IconButton, {
+  }, otherProps))), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/React.createElement(IconButton, {
     color: 'base',
     children: /*#__PURE__*/React.createElement(Clear, {
       height: 17.31,

package/build/module/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","styles","create","root","alignItems","flexGrow","input","secureToggleButton","padding","searchIconContainer","left","position","loadingSinner","height","width","clearButton","right","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        editable = true,\n        hint,\n        isLoading,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                {isSearch ? (\n                    <View style={styles.searchIconContainer}>\n                        {isLoading ? (\n                            <LoadingSpinner style={styles.loadingSinner}/>\n                        ) : (\n                            <Search\n                                color={'base'}\n                                height={19}\n                                width={19}\n                            />\n                        )}\n                    </View>\n                ) : null}\n\n                <TextInput\n                    autoFocus={autoFocus}\n                    editable={!disabled}\n                    onBlur={handleBlur}\n                    onChangeText={handleChangeText}\n                    onFocus={handleFocus}\n                    placeholderTextColor={placeholderTextColor}\n                    ref={ref}\n                    secureTextEntry={secureTextEntry}\n                    style={inputStyle}\n                    value={value}\n                    {...otherProps}\n                />\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <IconButton\n                        color={'base'}\n                        onPress={handleSecureTogglePress}\n                        style={styles.secureToggleButton}\n                    >\n                        {secureTextEntry ? (\n                            <EyeOff\n                                height={19}\n                                width={17.42}\n                            />\n                        ) : (\n                            <EyeOn\n                                height={19}\n                                width={17.42}\n                            />\n                        )}\n                    </IconButton>\n                ) : null}\n            </Row>\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"names":["React","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","styles","create","root","alignItems","flexGrow","input","inputWrapper","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","searchIconContainer","left","position","loadingSinner","height","width","clearButton","right","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","inputFontStyle","OS","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    inputWrapper: {\n        flexGrow: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        editable = true,\n        hint,\n        isLoading,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        variantStyles.inputFontStyle,\n        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderFontStyle = css([\n        variantStyles.inputFontStyle,\n        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },\n    ]);\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                {isSearch ? (\n                    <View style={styles.searchIconContainer}>\n                        {isLoading ? (\n                            <LoadingSpinner style={styles.loadingSinner}/>\n                        ) : (\n                            <Search\n                                color={'base'}\n                                height={19}\n                                width={19}\n                            />\n                        )}\n                    </View>\n                ) : null}\n\n                <View style={styles.inputWrapper}>\n                    <View\n                        pointerEvents={'none'}\n                        style={styles.placeholderWrapper}\n                    >\n                        {placeholderProp && !value ? (\n                            <Text\n                                children={placeholderProp}\n                                numberOfLines={1}\n                                style={placeholderFontStyle}\n                            />\n                        ) : null}\n                    </View>\n\n                    <TextInput\n                        autoFocus={autoFocus}\n                        editable={!disabled}\n                        onBlur={handleBlur}\n                        onChangeText={handleChangeText}\n                        onFocus={handleFocus}\n                        ref={ref}\n                        secureTextEntry={secureTextEntry}\n                        style={inputStyle}\n                        value={value}\n                        {...otherProps}\n                    />\n                </View>\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <IconButton\n                        color={'base'}\n                        onPress={handleSecureTogglePress}\n                        style={styles.secureToggleButton}\n                    >\n                        {secureTextEntry ? (\n                            <EyeOff\n                                height={19}\n                                width={17.42}\n                            />\n                        ) : (\n                            <EyeOn\n                                height={19}\n                                width={17.42}\n                            />\n                        )}\n                    </IconButton>\n                ) : null}\n            </Row>\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/build/module/TextField/useVariantStyleMap.js

@@ -44,17 +44,17 @@ export default function useVariantStyleMap(variant, status, isFocused) {
           },
           inputStyle: {
             padding: 0,
-            paddingRight: 16,
-            ...createFontStyle(theme, {
-              selector: _ => typographyOf({
-                fontSize: 18,
-                lineHeight: 27,
-                fontFamily: 'PretendardStd-SemiBold',
-                letterSpacing: 0
-              }),
-              color: theme.palette.text.strong
-            })
+            paddingRight: 16
           },
+          inputFontStyle: createFontStyle(theme, {
+            selector: _ => typographyOf({
+              fontSize: 18,
+              lineHeight: 27,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: 0
+            }),
+            color: theme.palette.text.strong
+          }),
           hintStyle: {
             marginTop: theme.spacing(2),
             ...createFontStyle(theme, {
@@ -76,17 +76,17 @@ export default function useVariantStyleMap(variant, status, isFocused) {
             paddingTop: 11
           },
           inputStyle: {
-            padding: 0,
-            ...createFontStyle(theme, {
-              selector: _ => typographyOf({
-                fontSize: 16,
-                lineHeight: 19.2,
-                fontFamily: 'PretendardStd-SemiBold',
-                letterSpacing: -0.16
-              }),
-              color: theme.palette.text.strong
-            })
-          }
+            padding: 0
+          },
+          inputFontStyle: createFontStyle(theme, {
+            selector: _ => typographyOf({
+              fontSize: 16,
+              lineHeight: 19.2,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: -0.16
+            }),
+            color: theme.palette.text.strong
+          })
         };
     }
   }, [theme, borderColor, hintColor, variant, isFocused]);

package/build/module/TextField/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","paddingVertical","inputStyle","padding","paddingRight","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                        paddingRight: 16,\n                        ...createFontStyle(theme, {\n                            selector: (_) => typographyOf({\n                                fontSize: 18,\n                                lineHeight: 27,\n                                fontFamily: 'PretendardStd-SemiBold',\n                                letterSpacing: 0,\n                            }),\n                            color: theme.palette.text.strong,\n                        }),\n                    },\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                        ...createFontStyle(theme, {\n                            selector: (_) => typographyOf({\n                                fontSize: 16,\n                                lineHeight: 19.2,\n                                fontFamily: 'PretendardStd-SemiBold',\n                                letterSpacing: -0.16,\n                            }),\n                            color: theme.palette.text.strong,\n                        }),\n                    },\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","paddingVertical","inputStyle","padding","paddingRight","inputFontStyle","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputFontStyle?: TextStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                        paddingRight: 16,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 18,\n                            lineHeight: 27,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 19.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: -0.16,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}

package/build/typescript/TextField/useVariantStyleMap.d.ts

@@ -1,7 +1,9 @@
+import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
+    inputFontStyle?: TextStyle;
     inputStyle?: FountainUiStyle;
     hintStyle?: FountainUiStyle;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.24",
+  "version": "3.0.0-alpha.25",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0476888c17d395e280cec48f558280c9816189ea"
+  "gitHead": "da862bce56ed40d7366136f83c7eebc79cf83474"
 }

package/src/TextField/TextField.tsx

@@ -19,6 +19,13 @@ const styles = StyleSheet.create({
     input: {
         flexGrow: 1,
     },
+    inputWrapper: {
+        flexGrow: 1,
+    },
+    placeholderWrapper: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+    },
     secureToggleButton: {
         alignItems: 'flex-end',
         padding: 0,
@@ -49,6 +56,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         onBlur,
         onChangeText: onChangeTextProp,
         onFocus,
+        placeholder: placeholderProp,
         placeholderTextColor: placeholderTextColorProp,
         secureTextEntry: secureTextEntryProp,
         showClearButton: showClearButtonProp,
@@ -103,11 +111,15 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const inputStyle = css([
         styles.input,
         variantStyles.inputStyle,
+        variantStyles.inputFontStyle,
         Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
         styleProp,
     ]);
 
-    const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+    const placeholderFontStyle = css([
+        variantStyles.inputFontStyle,
+        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },
+    ]);
 
     const containerStyle = css([
         styles.root,
@@ -140,19 +152,33 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                     </View>
                 ) : null}
 
-                <TextInput
-                    autoFocus={autoFocus}
-                    editable={!disabled}
-                    onBlur={handleBlur}
-                    onChangeText={handleChangeText}
-                    onFocus={handleFocus}
-                    placeholderTextColor={placeholderTextColor}
-                    ref={ref}
-                    secureTextEntry={secureTextEntry}
-                    style={inputStyle}
-                    value={value}
-                    {...otherProps}
-                />
+                <View style={styles.inputWrapper}>
+                    <View
+                        pointerEvents={'none'}
+                        style={styles.placeholderWrapper}
+                    >
+                        {placeholderProp && !value ? (
+                            <Text
+                                children={placeholderProp}
+                                numberOfLines={1}
+                                style={placeholderFontStyle}
+                            />
+                        ) : null}
+                    </View>
+
+                    <TextInput
+                        autoFocus={autoFocus}
+                        editable={!disabled}
+                        onBlur={handleBlur}
+                        onChangeText={handleChangeText}
+                        onFocus={handleFocus}
+                        ref={ref}
+                        secureTextEntry={secureTextEntry}
+                        style={inputStyle}
+                        value={value}
+                        {...otherProps}
+                    />
+                </View>
 
                 {showClearButton && value?.length && value.length > 0 ? (
                     <IconButton

package/src/TextField/useVariantStyleMap.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
 import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
@@ -6,6 +7,7 @@ import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
+    inputFontStyle?: TextStyle;
     inputStyle?: FountainUiStyle;
     hintStyle?: FountainUiStyle;
 }
@@ -53,16 +55,16 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     inputStyle: {
                         padding: 0,
                         paddingRight: 16,
-                        ...createFontStyle(theme, {
-                            selector: (_) => typographyOf({
-                                fontSize: 18,
-                                lineHeight: 27,
-                                fontFamily: 'PretendardStd-SemiBold',
-                                letterSpacing: 0,
-                            }),
-                            color: theme.palette.text.strong,
-                        }),
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 18,
+                            lineHeight: 27,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
                     hintStyle: {
                         marginTop: theme.spacing(2),
                         ...createFontStyle(theme, {
@@ -84,16 +86,16 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     },
                     inputStyle: {
                         padding: 0,
-                        ...createFontStyle(theme, {
-                            selector: (_) => typographyOf({
-                                fontSize: 16,
-                                lineHeight: 19.2,
-                                fontFamily: 'PretendardStd-SemiBold',
-                                letterSpacing: -0.16,
-                            }),
-                            color: theme.palette.text.strong,
-                        }),
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 16,
+                            lineHeight: 19.2,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: -0.16,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
                 };
         }
     }, [theme, borderColor, hintColor, variant, isFocused]);