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

package/src/Chip/index.ts

@@ -1,3 +1,3 @@
 export { default } from './Chip';
-export type { default as ChipProps } from './ChipProps';
-export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';
+export type { default as ChipProps, ChipVariant } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants, chipVariants } from './ChipProps';

package/src/Chip/useChipStyle.ts

@@ -3,7 +3,7 @@ import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import type { SvgIconProps } from '../SvgIcon';
 import { createFontStyle, useTheme } from '../styles';
-import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant, ChipVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
@@ -44,30 +44,46 @@ export default function useChipStyle(
     startElementVariant: ChipStartElementVariant,
     color: ChipColor,
     selected: boolean,
+    variant: ChipVariant = 'filled',
 ): ChipStyle {
     const theme = useTheme();
 
     return useMemo<ChipStyle>(() => {
+        const isOutlined = variant === 'outlined';
+
+        const textColor = selected
+            ? theme.palette.text.strongInverse
+            : isOutlined
+                ? theme.palette.text.base
+                : theme.palette.text.strong;
+
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
                 selector: (typography) => typography.caption1.medium,
-                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
+                color: textColor,
             }),
             large: createFontStyle(theme, {
                 selector: (typography) => typography.body2.medium,
-                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
+                color: textColor,
             }),
         };
 
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
-            backgroundColor: selected ? theme.palette.fill.base
-                : color === 'white'
-                    ? theme.palette.surface.base
-                    : theme.palette.fill.weaker,
+            backgroundColor: selected
+                ? theme.palette.fill.base
+                : isOutlined
+                    ? 'transparent'
+                    : color === 'white'
+                        ? theme.palette.surface.base
+                        : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
             overflow: 'hidden',
+            ...(isOutlined && {
+                borderWidth: 1,
+                borderColor: theme.palette.border.weak,
+            }),
         };
 
         const isLarge = size === 'large';
@@ -145,5 +161,5 @@ export default function useChipStyle(
             startElement: variantStyleMap[startElementVariant]?.startElement,
             startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,
         };
-    }, [theme, size, startElementVariant, color, selected]);
+    }, [theme, size, startElementVariant, color, selected, variant]);
 }

package/src/Radio/Radio.tsx

@@ -62,14 +62,15 @@ export default function Radio(props: RadioProps) {
         }
     };
 
-    const isChecked = context?.value === value ?? checked;
+    const isChecked = context
+        ? context.value === value
+        : checked;
 
     const defaultCheckedIcon = (
         <CheckedIcon color={'accent'}/>
     );
 
     const checkedIcon = checkIconProp ?? defaultCheckedIcon;
-    const icon = isChecked ? checkedIcon : null;
 
     const startIcon = cloneElementSafely(startIconProp, {
         color: 'strong',
@@ -120,7 +121,9 @@ export default function Radio(props: RadioProps) {
                 ) : null}
             </Column>
 
-            {icon}
+            <Column style={{ opacity: Number(isChecked) }}>
+                {checkedIcon}
+            </Column>
         </ButtonBase>
     );
 };

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]);
 }