@fountain-ui/core 3.0.0-alpha.47 → 3.0.0-alpha.48

package/build/commonjs/TextField/TextField.js

@@ -79,7 +79,9 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     multiline,
     editable = true,
     hint,
+    inputFontSize = 'large',
     isLoading,
+    maxLength,
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
@@ -87,6 +89,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
+    showWordCounter = false,
     status = 'default',
     style: styleProp,
     title,
@@ -109,7 +112,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
       ref.current = node;
     }
   }, [ref]);
-  const variantStyles = (0, _useVariantStyleMap.default)(variant, status, isFocused);
+  const variantStyles = (0, _useVariantStyleMap.default)(variant, status, isFocused, inputFontSize);
 
   const handleBlur = event => {
     setIsFocused(false);
@@ -188,6 +191,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
   }) : null), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
     autoFocus: autoFocus,
     editable: !disabled,
+    maxLength: maxLength,
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
@@ -216,7 +220,10 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
   }) : /*#__PURE__*/_react.default.createElement(_icons.EyeOn, {
     height: 19,
     width: 17.42
-  }))) : null), hint && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }))) : null), showWordCounter && maxLength && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: `${(value === null || value === void 0 ? void 0 : value.length) ?? 0}/${maxLength}`,
+    style: variantStyles.hintStyle
+  }) : null, hint && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: hint,
     style: variantStyles.hintStyle
   }) : null);

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

@@ -1 +1 @@
-{"version":3,"names":["isWeb","Platform","OS","styles","StyleSheet","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","multiline","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","internalRef","useRef","mergedRef","useCallback","node","current","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","useLayoutEffect","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","inputFontStyle","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, 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 isWeb = Platform.OS === 'web';\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        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 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    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        multiline,\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 internalRef = useRef<TextInput>(null);\n\n    const mergedRef = useCallback((node: TextInput | null) => {\n        (internalRef as React.MutableRefObject<TextInput | null>).current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<TextInput | null>).current = node;\n        }\n    }, [ref]);\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 resizeHeight = useCallback(() => {\n        const el = internalRef.current as unknown as HTMLTextAreaElement | null;\n        if (el) {\n            el.style.height = 'auto';\n            el.style.height = `${el.scrollHeight}px`;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        const shouldResizeHeight = multiline && isWeb;\n        if (shouldResizeHeight) {\n            resizeHeight();\n        }\n    }, [resizeHeight, multiline, value]);\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        isWeb ? { 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                <React.Fragment>\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={mergedRef}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            multiline={multiline}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\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                    <View style={styles.secureButtonContainer}>\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                    </View>\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":["isWeb","Platform","OS","styles","StyleSheet","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","multiline","editable","hint","inputFontSize","isLoading","maxLength","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","showWordCounter","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","internalRef","useRef","mergedRef","useCallback","node","current","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","useLayoutEffect","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","inputFontStyle","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, 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 isWeb = Platform.OS === 'web';\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        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 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    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        multiline,\n        editable = true,\n        hint,\n        inputFontSize = 'large',\n        isLoading,\n        maxLength,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        showWordCounter = false,\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 internalRef = useRef<TextInput>(null);\n\n    const mergedRef = useCallback((node: TextInput | null) => {\n        (internalRef as React.MutableRefObject<TextInput | null>).current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<TextInput | null>).current = node;\n        }\n    }, [ref]);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused, inputFontSize);\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 resizeHeight = useCallback(() => {\n        const el = internalRef.current as unknown as HTMLTextAreaElement | null;\n        if (el) {\n            el.style.height = 'auto';\n            el.style.height = `${el.scrollHeight}px`;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        const shouldResizeHeight = multiline && isWeb;\n        if (shouldResizeHeight) {\n            resizeHeight();\n        }\n    }, [resizeHeight, multiline, value]);\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        isWeb ? { 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                <React.Fragment>\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                            maxLength={maxLength}\n                            onBlur={handleBlur}\n                            onChangeText={handleChangeText}\n                            onFocus={handleFocus}\n                            ref={mergedRef}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            multiline={multiline}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\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                    <View style={styles.secureButtonContainer}>\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                    </View>\n                ) : null}\n            </Row>\n\n            {showWordCounter && maxLength && !isSearch ? (\n                <Text\n                    children={`${value?.length ?? 0}/${maxLength}`}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\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/TextFieldProps.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textFieldVariants = exports.textFieldStatus = void 0;
+exports.textFieldVariants = exports.textFieldStatus = exports.textFieldInputFontSizes = void 0;
 const textFieldStatus = ['default', 'success', 'error'];
 exports.textFieldStatus = textFieldStatus;
 const textFieldVariants = ['default', 'search'];
 exports.textFieldVariants = textFieldVariants;
+const textFieldInputFontSizes = ['large', 'small'];
+exports.textFieldInputFontSizes = textFieldInputFontSizes;
 //# sourceMappingURL=TextFieldProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["textFieldStatus","textFieldVariants"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;;AAGA,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B"}
+{"version":3,"names":["textFieldStatus","textFieldVariants","textFieldInputFontSizes"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport const textFieldInputFontSizes = ['large', 'small'] as const;\nexport type TextFieldInputFontSize = typeof textFieldInputFontSizes[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n\n    /**\n     * Determines the font size of the input.\n     * @default large\n     */\n    inputFontSize?: TextFieldInputFontSize;\n\n    /**\n     * Determines whether to display the word counter below the input.\n     * Requires maxLength to be set.\n     * @default false\n     */\n    showWordCounter?: boolean;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;;AAGA,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B;;AAGA,MAAMC,uBAAuB,GAAG,CAAC,OAAD,EAAU,OAAV,CAAhC"}

package/build/commonjs/TextField/useVariantStyleMap.js

@@ -11,6 +11,30 @@ var _styles = require("@fountain-ui/styles");
 
 var _styles2 = require("../styles");
 
+const fontSizeStyleMap = {
+  large: {
+    fontSize: 18,
+    lineHeight: 27,
+    fontFamily: 'PretendardStd-SemiBold',
+    letterSpacing: 0
+  },
+  small: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontFamily: 'PretendardStd-Medium',
+    letterSpacing: 0
+  }
+};
+const containerPaddingMap = {
+  large: {
+    paddingVertical: 14
+  },
+  small: {
+    paddingTop: 18,
+    paddingBottom: 16
+  }
+};
+
 function useStatusColor(theme, status) {
   switch (status) {
     default:
@@ -35,6 +59,7 @@ function useStatusColor(theme, status) {
 }
 
 function useVariantStyleMap(variant, status, isFocused) {
+  let inputFontSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'large';
   const theme = (0, _styles2.useTheme)();
   const {
     borderColor,
@@ -49,19 +74,14 @@ function useVariantStyleMap(variant, status, isFocused) {
             borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
             borderBottomWidth: 1,
             gap: 16,
-            minHeight: 60,
-            paddingVertical: 16
+            minHeight: 54,
+            ...containerPaddingMap[inputFontSize]
           },
           inputStyle: {
             padding: 0
           },
           inputFontStyle: (0, _styles2.createFontStyle)(theme, {
-            selector: _ => (0, _styles.typographyOf)({
-              fontSize: 18,
-              lineHeight: 27,
-              fontFamily: 'PretendardStd-SemiBold',
-              letterSpacing: 0
-            }),
+            selector: _ => (0, _styles.typographyOf)(fontSizeStyleMap[inputFontSize]),
             color: theme.palette.text.strong
           }),
           hintStyle: {
@@ -98,6 +118,6 @@ function useVariantStyleMap(variant, status, isFocused) {
           })
         };
     }
-  }, [theme, borderColor, hintColor, variant, isFocused]);
+  }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);
 }
 //# sourceMappingURL=useVariantStyleMap.js.map

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","gap","minHeight","paddingVertical","inputStyle","padding","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                        gap: 16,\n                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\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":";;;;;;;AAAA;;AAGA;;AACA;;AAUA,SAASA,cAAT,CAAwBC,KAAxB,EAAsCC,MAAtC,EAA4G;EACxG,QAAQA,MAAR;IACI;IACA,KAAK,SAAL;MACI,OAAO;QACHC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAD/B;QAEHC,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBC;MAF3B,CAAP;;IAIJ,KAAK,SAAL;MACI,OAAO;QACHN,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ,OAD/B;QAEHH,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ;MAF7B,CAAP;;IAIJ,KAAK,OAAL;MACI,OAAO;QACHP,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS,MAD/B;QAEHJ,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS;MAF7B,CAAP;EAbR;AAkBH;;AAEc,SAASC,kBAAT,CAA4BC,OAA5B,EAAuDX,MAAvD,EAAgFY,SAAhF,EAAqH;EAChI,MAAMb,KAAK,GAAG,IAAAc,iBAAA,GAAd;EAEA,MAAM;IACFZ,WADE;IAEFI;EAFE,IAGFP,cAAc,CAACC,KAAD,EAAQC,MAAR,CAHlB;EAKA,OAAO,IAAAc,cAAA,EAAQ,MAAM;IACjB,QAAQH,OAAR;MACI;MACA,KAAK,SAAL;QACI,OAAO;UACHI,cAAc,EAAE;YACZC,iBAAiB,EAAEhB,MAAM,KAAK,SAAX,IAAwBY,SAAxB,GAAoCb,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBc,MAAzD,GAAkEhB,WADzE;YAEZiB,iBAAiB,EAAE,CAFP;YAGZC,GAAG,EAAE,EAHO;YAIZC,SAAS,EAAE,EAJC;YAKZC,eAAe,EAAE;UALL,CADb;UAQHC,UAAU,EAAE;YACRC,OAAO,EAAE;UADD,CART;UAWHC,cAAc,EAAE,IAAAC,wBAAA,EAAgB1B,KAAhB,EAAuB;YACnC2B,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,EAFc;cAG1BC,UAAU,EAAE,wBAHc;cAI1BC,aAAa,EAAE;YAJW,CAAb,CADkB;YAOnCC,KAAK,EAAElC,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBW;UAPS,CAAvB,CAXb;UAoBHiB,SAAS,EAAE;YACPC,SAAS,EAAEpC,KAAK,CAACqC,OAAN,CAAc,CAAd,CADJ;YAEP,GAAG,IAAAX,wBAAA,EAAgB1B,KAAhB,EAAuB;cACtB2B,QAAQ,EAAGW,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoB,SAApB,CADJ;cAEtBL,KAAK,EAAE5B;YAFe,CAAvB;UAFI;QApBR,CAAP;;MA4BJ,KAAK,QAAL;QACI,OAAO;UACHU,cAAc,EAAE;YACZwB,eAAe,EAAExC,KAAK,CAACG,OAAN,CAAcsC,OAAd,CAAsBC,UAD3B;YAEZxC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAFtB;YAGZsC,YAAY,EAAE3C,KAAK,CAAC4C,KAAN,CAAYC,MAAZ,CAAmBC,EAHrB;YAIZC,WAAW,EAAE,GAJD;YAKZC,aAAa,EAAE,EALH;YAMZC,iBAAiB,EAAE,EANP;YAOZC,UAAU,EAAE;UAPA,CADb;UAUH3B,UAAU,EAAE;YACRC,OAAO,EAAE;UADD,CAVT;UAaHC,cAAc,EAAE,IAAAC,wBAAA,EAAgB1B,KAAhB,EAAuB;YACnC2B,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAE,wBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAb,CADkB;YAOnCC,KAAK,EAAElC,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBW;UAPS,CAAvB;QAbb,CAAP;IAhCR;EAwDH,CAzDM,EAyDJ,CAAClB,KAAD,EAAQE,WAAR,EAAqBI,SAArB,EAAgCM,OAAhC,EAAyCC,SAAzC,CAzDI,CAAP;AA0DH"}
+{"version":3,"names":["fontSizeStyleMap","large","fontSize","lineHeight","fontFamily","letterSpacing","small","containerPaddingMap","paddingVertical","paddingTop","paddingBottom","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","inputFontSize","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","gap","minHeight","inputStyle","padding","inputFontStyle","createFontStyle","selector","_","typographyOf","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingHorizontal"],"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 { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\nconst fontSizeStyleMap = {\n    large: {\n        fontSize: 18,\n        lineHeight: 27,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: 0,\n    },\n    small: {\n        fontSize: 14,\n        lineHeight: 21,\n        fontFamily: 'PretendardStd-Medium',\n        letterSpacing: 0,\n    },\n} as const;\n\nconst containerPaddingMap = {\n    large: {\n        paddingVertical: 14,\n    },\n    small: {\n        paddingTop: 18,\n        paddingBottom: 16,\n    },\n} as const;\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(\n    variant: TextFieldVariant,\n    status: TextFieldStatus,\n    isFocused: boolean,\n    inputFontSize: TextFieldInputFontSize = 'large',\n): 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                        gap: 16,\n                        minHeight: 54,\n                        ...containerPaddingMap[inputFontSize],\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf(fontSizeStyleMap[inputFontSize]),\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, inputFontSize]);\n}\n"],"mappings":"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"}

package/build/module/TextField/TextField.js

@@ -56,7 +56,9 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     multiline,
     editable = true,
     hint,
+    inputFontSize = 'large',
     isLoading,
+    maxLength,
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
@@ -64,6 +66,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
+    showWordCounter = false,
     status = 'default',
     style: styleProp,
     title,
@@ -86,7 +89,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
       ref.current = node;
     }
   }, [ref]);
-  const variantStyles = useVariantStyleMap(variant, status, isFocused);
+  const variantStyles = useVariantStyleMap(variant, status, isFocused, inputFontSize);
 
   const handleBlur = event => {
     setIsFocused(false);
@@ -165,6 +168,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
   }) : null), /*#__PURE__*/React.createElement(TextInput, _extends({
     autoFocus: autoFocus,
     editable: !disabled,
+    maxLength: maxLength,
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
@@ -193,7 +197,10 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
   }) : /*#__PURE__*/React.createElement(EyeOn, {
     height: 19,
     width: 17.42
-  }))) : null), hint && !isSearch ? /*#__PURE__*/React.createElement(Text, {
+  }))) : null), showWordCounter && maxLength && !isSearch ? /*#__PURE__*/React.createElement(Text, {
+    children: `${(value === null || value === void 0 ? void 0 : value.length) ?? 0}/${maxLength}`,
+    style: variantStyles.hintStyle
+  }) : null, hint && !isSearch ? /*#__PURE__*/React.createElement(Text, {
     children: hint,
     style: variantStyles.hintStyle
   }) : null);

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useLayoutEffect","useRef","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","isWeb","OS","styles","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","multiline","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","internalRef","mergedRef","node","current","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","inputFontStyle","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, 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 isWeb = Platform.OS === 'web';\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        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 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    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        multiline,\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 internalRef = useRef<TextInput>(null);\n\n    const mergedRef = useCallback((node: TextInput | null) => {\n        (internalRef as React.MutableRefObject<TextInput | null>).current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<TextInput | null>).current = node;\n        }\n    }, [ref]);\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 resizeHeight = useCallback(() => {\n        const el = internalRef.current as unknown as HTMLTextAreaElement | null;\n        if (el) {\n            el.style.height = 'auto';\n            el.style.height = `${el.scrollHeight}px`;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        const shouldResizeHeight = multiline && isWeb;\n        if (shouldResizeHeight) {\n            resizeHeight();\n        }\n    }, [resizeHeight, multiline, value]);\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        isWeb ? { 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                <React.Fragment>\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={mergedRef}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            multiline={multiline}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\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                    <View style={styles.secureButtonContainer}>\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                    </View>\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,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,eAA7B,EAA8CC,MAA9C,EAAsDC,QAAtD,QAAsE,OAAtE;AAEA,SAASC,QAAT,EAAmBC,UAAnB,EAA+BC,IAA/B,EAAqCC,SAArC,EAAgDC,IAAhD,QAA4D,cAA5D;AAEA,SAASC,GAAT,QAAoB,qBAApB;AACA,OAAOC,UAAP,MAAuB,0BAAvB;AACA,SAASC,KAAT,EAAgBC,MAAhB,EAAwBC,KAAxB,EAA+BC,cAA/B,EAA+CC,MAA/C,QAA6D,mBAA7D;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,KAAK,GAAGhB,QAAQ,CAACiB,EAAT,KAAgB,KAA9B;AAEA,MAAMC,MAAM,GAAGjB,UAAU,CAACkB,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,QAAQ,EAAE;EAFR,CADuB;EAK7BC,KAAK,EAAE;IACHD,QAAQ,EAAE;EADP,CALsB;EAQ7BE,YAAY,EAAE;IACVF,QAAQ,EAAE,CADA;IAEVG,UAAU,EAAE;EAFF,CARe;EAY7BC,kBAAkB,EAAE,EAChB,GAAGzB,UAAU,CAAC0B,kBADE;IAEhBC,cAAc,EAAE;EAFA,CAZS;EAgB7BC,kBAAkB,EAAE;IAChBR,UAAU,EAAE,UADI;IAEhBS,OAAO,EAAE,CAFO;IAGhBC,QAAQ,EAAE,UAHM;IAIhBC,KAAK,EAAE;EAJS,CAhBS;EAsB7BC,mBAAmB,EAAE;IACjBC,IAAI,EAAE,EADW;IAEjBH,QAAQ,EAAE;EAFO,CAtBQ;EA0B7BI,aAAa,EAAE;IACXC,MAAM,EAAE,EADG;IAEXC,KAAK,EAAE;EAFI,CA1Bc;EA8B7BC,WAAW,EAAE;IACTF,MAAM,EAAE,EADC;IAETL,QAAQ,EAAE,UAFD;IAGTC,KAAK,EAAE,CAHE;IAITK,KAAK,EAAE;EAJE,CA9BgB;EAoC7BE,qBAAqB,EAAE;IACnBX,cAAc,EAAE,QADG;IAEnBS,KAAK,EAAE;EAFY;AApCM,CAAlB,CAAf;AA0CA,MAAMG,SAAS,gBAAG7C,KAAK,CAAC8C,UAAN,CAA4C,SAASD,SAAT,CAAmBE,KAAnB,EAA0BC,GAA1B,EAA+B;EACzF,MAAM;IACFC,SADE;IAEFC,cAAc,EAAEC,kBAFd;IAGFC,SAHE;IAIFC,QAAQ,GAAG,IAJT;IAKFC,IALE;IAMFC,SANE;IAOFC,MAPE;IAQFC,YAAY,EAAEC,gBARZ;IASFC,OATE;IAUFC,WAAW,EAAEC,eAVX;IAWFC,oBAAoB,EAAEC,wBAXpB;IAYFC,eAAe,EAAEC,mBAZf;IAaFC,eAAe,EAAEC,mBAbf;IAcFC,MAAM,GAAG,SAdP;IAeFC,KAAK,EAAEC,SAfL;IAgBFC,KAhBE;IAiBFC,KAjBE;IAkBFC,OAAO,GAAG,SAlBR;IAmBF,GAAGC;EAnBD,IAoBF3B,KApBJ;EAsBA,MAAM4B,QAAQ,GAAGF,OAAO,KAAK,QAA7B;EAEA,MAAMG,QAAQ,GAAG,CAACvB,QAAD,IAAaE,SAA9B;EAEA,MAAMsB,KAAK,GAAG1D,QAAQ,EAAtB;EAEA,MAAM,CAAC2D,SAAD,EAAYC,YAAZ,IAA4B3E,QAAQ,CAAU6C,SAAS,IAAI,KAAvB,CAA1C;EACA,MAAM,CAACe,eAAD,EAAkBgB,kBAAlB,IAAwC5E,QAAQ,CAAU6D,mBAAmB,IAAI,KAAjC,CAAtD;EAEA,MAAMgB,WAAW,GAAG9E,MAAM,CAAY,IAAZ,CAA1B;EAEA,MAAM+E,SAAS,GAAGjF,WAAW,CAAEkF,IAAD,IAA4B;IACrDF,WAAD,CAA0DG,OAA1D,GAAoED,IAApE;;IACA,IAAI,OAAOnC,GAAP,KAAe,UAAnB,EAA+B;MAC3BA,GAAG,CAACmC,IAAD,CAAH;IACH,CAFD,MAEO,IAAInC,GAAJ,EAAS;MACXA,GAAD,CAAkDoC,OAAlD,GAA4DD,IAA5D;IACH;EACJ,CAP4B,EAO1B,CAACnC,GAAD,CAP0B,CAA7B;EASA,MAAMqC,aAAa,GAAGjE,kBAAkB,CAACqD,OAAD,EAAUL,MAAV,EAAkBU,SAAlB,CAAxC;;EAEA,MAAMQ,UAAU,GAAIC,KAAD,IAA0D;IACzER,YAAY,CAAC,KAAD,CAAZ;IACAvB,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAG+B,KAAH,CAAN;EACH,CAHD;;EAKA,MAAMC,WAAW,GAAID,KAAD,IAA0D;IAC1ER,YAAY,CAAC,IAAD,CAAZ;IACApB,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAG4B,KAAH,CAAP;EACH,CAHD;;EAKA,MAAME,uBAAuB,GAAG,MAAM;IAClCT,kBAAkB,CAAEI,OAAD,IAAa,CAACA,OAAf,CAAlB;EACH,CAFD;;EAIA,MAAMM,YAAY,GAAGzF,WAAW,CAAC,MAAM;IACnC,MAAM0F,EAAE,GAAGV,WAAW,CAACG,OAAvB;;IACA,IAAIO,EAAJ,EAAQ;MACJA,EAAE,CAACtB,KAAH,CAAS5B,MAAT,GAAkB,MAAlB;MACAkD,EAAE,CAACtB,KAAH,CAAS5B,MAAT,GAAmB,GAAEkD,EAAE,CAACC,YAAa,IAArC;IACH;EACJ,CAN+B,EAM7B,EAN6B,CAAhC;EAQA1F,eAAe,CAAC,MAAM;IAClB,MAAM2F,kBAAkB,GAAGzC,SAAS,IAAI/B,KAAxC;;IACA,IAAIwE,kBAAJ,EAAwB;MACpBH,YAAY;IACf;EACJ,CALc,EAKZ,CAACA,YAAD,EAAetC,SAAf,EAA0BoB,KAA1B,CALY,CAAf;;EAOA,MAAMsB,gBAAgB,GAAIC,IAAD,IAAkB;IACvCrC,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,YAAAA,gBAAgB,CAAGqC,IAAH,CAAhB;EACH,CAFD;;EAIA,MAAMC,WAAW,GAAG,MAAM;IACtBF,gBAAgB,CAAC,EAAD,CAAhB;EACH,CAFD;;EAIA,MAAM5B,eAAe,GAAGC,mBAAmB,IAAIQ,QAA/C;EAEA,MAAMsB,cAAc,GAAG/E,eAAe,CAAC2D,KAAD,EAAQ;IAC1CqB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoB,UAApB,CADgB;IAE1CC,KAAK,EAAExB,KAAK,CAACyB,OAAN,CAAcP,IAAd,CAAmBQ;EAFgB,CAAR,CAAtC;EAKA,MAAMC,UAAU,GAAG9F,GAAG,CAAC,CACnBa,MAAM,CAACK,KADY,EAEnByD,aAAa,CAACmB,UAFK,EAGnBnB,aAAa,CAACoB,cAHK,EAInBpF,KAAK,GAAG;IAAEqF,YAAY,EAAE;EAAhB,CAAH,GAA4C,EAJ9B,EAKnBpC,SALmB,CAAD,CAAtB;EAQA,MAAMqC,oBAAoB,GAAGjG,GAAG,CAAC,CAC7B2E,aAAa,CAACoB,cADe,EAE7B;IAAEJ,KAAK,EAAEtC,wBAAwB,IAAIc,KAAK,CAACyB,OAAN,CAAclC,MAAd,CAAqBwC;EAA1D,CAF6B,CAAD,CAAhC;EAKA,MAAM1D,cAAc,GAAGxC,GAAG,CAAC,CACvBa,MAAM,CAACE,IADgB,EAEvB4D,aAAa,CAACnC,cAFS,EAGvB;IAAE2D,OAAO,EAAEjC,QAAQ,GAAG,GAAH,GAAS;EAA5B,CAHuB,EAIvBzB,kBAJuB,CAAD,CAA1B;EAOA,oBACI,oBAAC,IAAD,QACKoB,KAAK,IAAI,CAACI,QAAV,gBACG,oBAAC,IAAD;IACI,QAAQ,EAAEJ,KADd;IAEI,KAAK,EAAE0B;EAFX,EADH,GAKG,IANR,eAQI,oBAAC,GAAD;IAAK,KAAK,EAAE/C;EAAZ,gBACI,oBAAC,KAAD,CAAO,QAAP,QACKyB,QAAQ,gBACL,oBAAC,IAAD;IAAM,KAAK,EAAEpD,MAAM,CAACe;EAApB,GACKiB,SAAS,gBACN,oBAAC,cAAD;IAAgB,KAAK,EAAEhC,MAAM,CAACiB;EAA9B,EADM,gBAGN,oBAAC,MAAD;IACI,KAAK,EAAE,MADX;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EAJR,CADK,GAYL,IAbR,eAeI,oBAAC,IAAD;IAAM,KAAK,EAAEjB,MAAM,CAACM;EAApB,gBACI,oBAAC,IAAD;IACI,aAAa,EAAE,MADnB;IAEI,KAAK,EAAEN,MAAM,CAACQ;EAFlB,GAIK8B,eAAe,IAAI,CAACW,KAApB,gBACG,oBAAC,IAAD;IACI,QAAQ,EAAEX,eADd;IAEI,aAAa,EAAE,CAFnB;IAGI,KAAK,EAAE8C;EAHX,EADH,GAMG,IAVR,CADJ,eAcI,oBAAC,SAAD;IACI,SAAS,EAAE1D,SADf;IAEI,QAAQ,EAAE,CAAC2B,QAFf;IAGI,MAAM,EAAEU,UAHZ;IAII,YAAY,EAAEQ,gBAJlB;IAKI,OAAO,EAAEN,WALb;IAMI,GAAG,EAAEN,SANT;IAOI,eAAe,EAAElB,eAPrB;IAQI,KAAK,EAAEwC,UARX;IASI,KAAK,EAAEhC,KATX;IAUI,SAAS,EAAEpB;EAVf,GAWQsB,UAXR,EAdJ,CAfJ,CADJ,EA8CKR,eAAe,IAAIM,KAAJ,aAAIA,KAAJ,eAAIA,KAAK,CAAEsC,MAA1B,IAAoCtC,KAAK,CAACsC,MAAN,GAAe,CAAnD,gBACG,oBAAC,UAAD;IACI,KAAK,EAAE,MADX;IAEI,QAAQ,eACJ,oBAAC,KAAD;MACI,MAAM,EAAE,KADZ;MAEI,KAAK,EAAE;IAFX,EAHR;IAQI,OAAO,EAAEd,WARb;IASI,KAAK,EAAEzE,MAAM,CAACoB;EATlB,EADH,GAYG,IA1DR,EA4DKsB,mBAAmB,IAAI,CAACU,QAAxB,gBACG,oBAAC,IAAD;IAAM,KAAK,EAAEpD,MAAM,CAACqB;EAApB,gBACI,oBAAC,UAAD;IACI,KAAK,EAAE,MADX;IAEI,OAAO,EAAE6C,uBAFb;IAGI,KAAK,EAAElE,MAAM,CAACW;EAHlB,GAKK8B,eAAe,gBACZ,oBAAC,MAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EADY,gBAMZ,oBAAC,KAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EAXR,CADJ,CADH,GAoBG,IAhFR,CARJ,EA2FKV,IAAI,IAAI,CAACqB,QAAT,gBACG,oBAAC,IAAD;IACI,QAAQ,EAAErB,IADd;IAEI,KAAK,EAAE+B,aAAa,CAAC0B;EAFzB,EADH,GAKG,IAhGR,CADJ;AAoGH,CAjNiB,CAAlB;AAmNA,eAAelE,SAAf"}
+{"version":3,"names":["React","useCallback","useLayoutEffect","useRef","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","isWeb","OS","styles","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","multiline","editable","hint","inputFontSize","isLoading","maxLength","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","showWordCounter","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","internalRef","mergedRef","node","current","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","inputFontStyle","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, 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 isWeb = Platform.OS === 'web';\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        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 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    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        multiline,\n        editable = true,\n        hint,\n        inputFontSize = 'large',\n        isLoading,\n        maxLength,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        showWordCounter = false,\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 internalRef = useRef<TextInput>(null);\n\n    const mergedRef = useCallback((node: TextInput | null) => {\n        (internalRef as React.MutableRefObject<TextInput | null>).current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<TextInput | null>).current = node;\n        }\n    }, [ref]);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused, inputFontSize);\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 resizeHeight = useCallback(() => {\n        const el = internalRef.current as unknown as HTMLTextAreaElement | null;\n        if (el) {\n            el.style.height = 'auto';\n            el.style.height = `${el.scrollHeight}px`;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        const shouldResizeHeight = multiline && isWeb;\n        if (shouldResizeHeight) {\n            resizeHeight();\n        }\n    }, [resizeHeight, multiline, value]);\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        isWeb ? { 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                <React.Fragment>\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                            maxLength={maxLength}\n                            onBlur={handleBlur}\n                            onChangeText={handleChangeText}\n                            onFocus={handleFocus}\n                            ref={mergedRef}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            multiline={multiline}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\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                    <View style={styles.secureButtonContainer}>\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                    </View>\n                ) : null}\n            </Row>\n\n            {showWordCounter && maxLength && !isSearch ? (\n                <Text\n                    children={`${value?.length ?? 0}/${maxLength}`}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\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/TextFieldProps.js

@@ -1,3 +1,4 @@
 export const textFieldStatus = ['default', 'success', 'error'];
 export const textFieldVariants = ['default', 'search'];
+export const textFieldInputFontSizes = ['large', 'small'];
 //# sourceMappingURL=TextFieldProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["textFieldStatus","textFieldVariants"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;AAGP,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B"}
+{"version":3,"names":["textFieldStatus","textFieldVariants","textFieldInputFontSizes"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport const textFieldInputFontSizes = ['large', 'small'] as const;\nexport type TextFieldInputFontSize = typeof textFieldInputFontSizes[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n\n    /**\n     * Determines the font size of the input.\n     * @default large\n     */\n    inputFontSize?: TextFieldInputFontSize;\n\n    /**\n     * Determines whether to display the word counter below the input.\n     * Requires maxLength to be set.\n     * @default false\n     */\n    showWordCounter?: boolean;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;AAGP,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B;AAGP,OAAO,MAAMC,uBAAuB,GAAG,CAAC,OAAD,EAAU,OAAV,CAAhC"}

package/build/module/TextField/useVariantStyleMap.js

@@ -1,6 +1,29 @@
 import { useMemo } from 'react';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
+const fontSizeStyleMap = {
+  large: {
+    fontSize: 18,
+    lineHeight: 27,
+    fontFamily: 'PretendardStd-SemiBold',
+    letterSpacing: 0
+  },
+  small: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontFamily: 'PretendardStd-Medium',
+    letterSpacing: 0
+  }
+};
+const containerPaddingMap = {
+  large: {
+    paddingVertical: 14
+  },
+  small: {
+    paddingTop: 18,
+    paddingBottom: 16
+  }
+};
 
 function useStatusColor(theme, status) {
   switch (status) {
@@ -26,6 +49,7 @@ function useStatusColor(theme, status) {
 }
 
 export default function useVariantStyleMap(variant, status, isFocused) {
+  let inputFontSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'large';
   const theme = useTheme();
   const {
     borderColor,
@@ -40,19 +64,14 @@ export default function useVariantStyleMap(variant, status, isFocused) {
             borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
             borderBottomWidth: 1,
             gap: 16,
-            minHeight: 60,
-            paddingVertical: 16
+            minHeight: 54,
+            ...containerPaddingMap[inputFontSize]
           },
           inputStyle: {
             padding: 0
           },
           inputFontStyle: createFontStyle(theme, {
-            selector: _ => typographyOf({
-              fontSize: 18,
-              lineHeight: 27,
-              fontFamily: 'PretendardStd-SemiBold',
-              letterSpacing: 0
-            }),
+            selector: _ => typographyOf(fontSizeStyleMap[inputFontSize]),
             color: theme.palette.text.strong
           }),
           hintStyle: {
@@ -89,6 +108,6 @@ export default function useVariantStyleMap(variant, status, isFocused) {
           })
         };
     }
-  }, [theme, borderColor, hintColor, variant, isFocused]);
+  }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);
 }
 //# sourceMappingURL=useVariantStyleMap.js.map

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","gap","minHeight","paddingVertical","inputStyle","padding","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                        gap: 16,\n                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\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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"}
+{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","fontSizeStyleMap","large","fontSize","lineHeight","fontFamily","letterSpacing","small","containerPaddingMap","paddingVertical","paddingTop","paddingBottom","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","inputFontSize","containerStyle","borderBottomColor","strong","borderBottomWidth","gap","minHeight","inputStyle","padding","inputFontStyle","selector","_","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingHorizontal"],"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 { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\nconst fontSizeStyleMap = {\n    large: {\n        fontSize: 18,\n        lineHeight: 27,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: 0,\n    },\n    small: {\n        fontSize: 14,\n        lineHeight: 21,\n        fontFamily: 'PretendardStd-Medium',\n        letterSpacing: 0,\n    },\n} as const;\n\nconst containerPaddingMap = {\n    large: {\n        paddingVertical: 14,\n    },\n    small: {\n        paddingTop: 18,\n        paddingBottom: 16,\n    },\n} as const;\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(\n    variant: TextFieldVariant,\n    status: TextFieldStatus,\n    isFocused: boolean,\n    inputFontSize: TextFieldInputFontSize = 'large',\n): 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                        gap: 16,\n                        minHeight: 54,\n                        ...containerPaddingMap[inputFontSize],\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf(fontSizeStyleMap[inputFontSize]),\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, inputFontSize]);\n}\n"],"mappings":"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"}

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

@@ -5,6 +5,8 @@ export declare const textFieldStatus: readonly ["default", "success", "error"];
 export declare type TextFieldStatus = typeof textFieldStatus[number];
 export declare const textFieldVariants: readonly ["default", "search"];
 export declare type TextFieldVariant = typeof textFieldVariants[number];
+export declare const textFieldInputFontSizes: readonly ["large", "small"];
+export declare type TextFieldInputFontSize = typeof textFieldInputFontSizes[number];
 export default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {
     /**
      * Determines the style of the container that wraps the input.
@@ -37,5 +39,16 @@ export default interface TextFieldProps extends OverridableComponentProps<TextIn
      * @default default
      */
     variant?: TextFieldVariant;
+    /**
+     * Determines the font size of the input.
+     * @default large
+     */
+    inputFontSize?: TextFieldInputFontSize;
+    /**
+     * Determines whether to display the word counter below the input.
+     * Requires maxLength to be set.
+     * @default false
+     */
+    showWordCounter?: boolean;
 }> {
 }

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

@@ -1,11 +1,11 @@
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
-import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+import type { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
     inputFontStyle?: TextStyle;
     inputStyle?: FountainUiStyle;
     hintStyle?: FountainUiStyle;
 }
-export default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap;
+export default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean, inputFontSize?: TextFieldInputFontSize): VariantStyleMap;
 export {};

package/package.json

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

package/src/TextField/TextField.tsx

@@ -62,7 +62,9 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         multiline,
         editable = true,
         hint,
+        inputFontSize = 'large',
         isLoading,
+        maxLength,
         onBlur,
         onChangeText: onChangeTextProp,
         onFocus,
@@ -70,6 +72,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         placeholderTextColor: placeholderTextColorProp,
         secureTextEntry: secureTextEntryProp,
         showClearButton: showClearButtonProp,
+        showWordCounter = false,
         status = 'default' as TextFieldStatus,
         style: styleProp,
         title,
@@ -98,7 +101,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         }
     }, [ref]);
 
-    const variantStyles = useVariantStyleMap(variant, status, isFocused);
+    const variantStyles = useVariantStyleMap(variant, status, isFocused, inputFontSize);
 
     const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(false);
@@ -206,6 +209,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                         <TextInput
                             autoFocus={autoFocus}
                             editable={!disabled}
+                            maxLength={maxLength}
                             onBlur={handleBlur}
                             onChangeText={handleChangeText}
                             onFocus={handleFocus}
@@ -256,6 +260,13 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                 ) : null}
             </Row>
 
+            {showWordCounter && maxLength && !isSearch ? (
+                <Text
+                    children={`${value?.length ?? 0}/${maxLength}`}
+                    style={variantStyles.hintStyle}
+                />
+            ) : null}
+
             {hint && !isSearch ? (
                 <Text
                     children={hint}

package/src/TextField/TextFieldProps.ts

@@ -9,6 +9,9 @@ export type TextFieldStatus = typeof textFieldStatus[number];
 export const textFieldVariants = ['default', 'search'] as const;
 export type TextFieldVariant = typeof textFieldVariants[number];
 
+export const textFieldInputFontSizes = ['large', 'small'] as const;
+export type TextFieldInputFontSize = typeof textFieldInputFontSizes[number];
+
 export default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {
     /**
      * Determines the style of the container that wraps the input.
@@ -47,4 +50,17 @@ export default interface TextFieldProps extends OverridableComponentProps<TextIn
      * @default default
      */
     variant?: TextFieldVariant;
+
+    /**
+     * Determines the font size of the input.
+     * @default large
+     */
+    inputFontSize?: TextFieldInputFontSize;
+
+    /**
+     * Determines whether to display the word counter below the input.
+     * Requires maxLength to be set.
+     * @default false
+     */
+    showWordCounter?: boolean;
 }> {}

package/src/TextField/useVariantStyleMap.ts

@@ -3,7 +3,32 @@ 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';
-import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+import type { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+
+const fontSizeStyleMap = {
+    large: {
+        fontSize: 18,
+        lineHeight: 27,
+        fontFamily: 'PretendardStd-SemiBold',
+        letterSpacing: 0,
+    },
+    small: {
+        fontSize: 14,
+        lineHeight: 21,
+        fontFamily: 'PretendardStd-Medium',
+        letterSpacing: 0,
+    },
+} as const;
+
+const containerPaddingMap = {
+    large: {
+        paddingVertical: 14,
+    },
+    small: {
+        paddingTop: 18,
+        paddingBottom: 16,
+    },
+} as const;
 
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
@@ -33,7 +58,12 @@ function useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: s
     }
 }
 
-export default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {
+export default function useVariantStyleMap(
+    variant: TextFieldVariant,
+    status: TextFieldStatus,
+    isFocused: boolean,
+    inputFontSize: TextFieldInputFontSize = 'large',
+): VariantStyleMap {
     const theme = useTheme();
 
     const {
@@ -50,19 +80,14 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
                         borderBottomWidth: 1,
                         gap: 16,
-                        minHeight: 60,
-                        paddingVertical: 16,
+                        minHeight: 54,
+                        ...containerPaddingMap[inputFontSize],
                     },
                     inputStyle: {
                         padding: 0,
                     },
                     inputFontStyle: createFontStyle(theme, {
-                        selector: (_) => typographyOf({
-                            fontSize: 18,
-                            lineHeight: 27,
-                            fontFamily: 'PretendardStd-SemiBold',
-                            letterSpacing: 0,
-                        }),
+                        selector: (_) => typographyOf(fontSizeStyleMap[inputFontSize]),
                         color: theme.palette.text.strong,
                     }),
                     hintStyle: {
@@ -98,5 +123,5 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     }),
                 };
         }
-    }, [theme, borderColor, hintColor, variant, isFocused]);
+    }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);
 }