@fountain-ui/core 3.0.0-alpha.3 → 3.0.0-alpha.30

package/src/Tab/useVariantStyleMap.ts

@@ -2,16 +2,23 @@ import { useMemo } from 'react';
 import { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
+import type { TabsColor } from '../Tabs';
 import { createFontStyle, useTheme } from '../styles';
-import type { TabVariant } from './TabProps';
+import type { TabSize, TabVariant } from './TabProps';
 
 interface VariantStyle {
     container: FountainUiStyle;
+    iconContainer?: FountainUiStyle;
     inner?: FountainUiStyle;
     label: TextStyle;
 }
 
-export default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle {
+export default function useVariantStyleMap(
+    variant: TabVariant,
+    selected: boolean,
+    size: TabSize,
+    parentColor: TabsColor,
+): VariantStyle {
     const theme = useTheme();
 
     return useMemo<VariantStyle>(() => {
@@ -25,21 +32,57 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                     inner: {
                         backgroundColor: selected
                             ? theme.palette.fill.base
-                            : theme.palette.fill.weaker,
+                            : parentColor === 'alt'
+                                ? theme.palette.surface.base
+                                : theme.palette.fill.weaker,
                         borderRadius: theme.shape.radius.full,
-                        paddingHorizontal: theme.spacing(4),
-                        paddingVertical: theme.spacing(1.75),
+                        flexDirection: 'row',
+                        gap: 5,
+                        paddingBottom: 7.5,
+                        paddingHorizontal: 14,
+                        paddingTop: 6.5,
+                    },
+                    label: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: size === 'small' ? 14 : 15,
+                            lineHeight: size === 'small' ? 18.2 : 19.5,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: selected
+                            ? theme.palette.text.strongInverse
+                            : theme.palette.text.base,
+                    }),
+                };
+            case 'circular-home':
+                return {
+                    container: {
+                        paddingBottom: 4,
+                        paddingHorizontal: 3,
+                    },
+                    inner: {
+                        backgroundColor: selected
+                            ? theme.palette.fill.base
+                            : theme.palette.surface.base,
+                        borderRadius: theme.shape.radius.full,
+                        borderWidth: selected ? undefined : 0.5,
+                        borderColor: selected ? undefined : theme.palette.border.weak,
+                        flexDirection: 'row',
+                        gap: 5,
+                        paddingBottom: 7.5,
+                        paddingHorizontal: 14,
+                        paddingTop: 6.5,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
                             fontSize: 14,
                             lineHeight: 18.2,
-                            fontFamily: 'Pretendard-SemiBold',
-                            letterSpacing: 0,
+                            fontFamily: 'LexendDeca-Medium',
+                            letterSpacing: -0.28,
                         }),
                         color: selected
                             ? theme.palette.text.strongInverse
-                            : theme.palette.text.strong,
+                            : theme.palette.text.base,
                     }),
                 };
             case 'bottom-navigation':
@@ -48,15 +91,19 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         alignItems: 'center',
                         height: 49,
                         justifyContent: 'flex-start',
-                        paddingTop: theme.spacing(2.625),
-                        width: 48,
+                        maxWidth: 64,
+                        paddingTop: 10,
+                    },
+                    inner: {
+                        flexDirection: 'column',
+                        gap: 5,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 10,
-                            lineHeight: 10,
-                            fontFamily: 'Pretendard-Medium',
-                            letterSpacing: -0.1,
+                            fontSize: 10.5,
+                            lineHeight: 10.5,
+                            fontFamily: 'PretendardStd-Medium',
+                            letterSpacing: -0.105,
                         }),
                         color: selected
                             ? theme.palette.text.strong
@@ -67,13 +114,19 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
             default:
                 return {
                     container: {
-                        padding: theme.spacing(2.5),
+                        paddingHorizontal: 10,
+                    },
+                    inner: {
+                        flexDirection: 'row',
+                        gap: 5,
+                        paddingHorizontal: 1,
+                        paddingVertical: 10,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 18.75,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: size === 'small' ? 15 : 16,
+                            lineHeight: size === 'small' ? 18.75 : 20,
+                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
                             letterSpacing: 0,
                         }),
                         color: selected
@@ -82,5 +135,5 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                     }),
                 };
         }
-    }, [theme, variant, selected]);
+    }, [theme, variant, selected, size, parentColor]);
 }

package/src/TabBase/TabBase.tsx

@@ -3,7 +3,7 @@ import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import type TabBaseProps from './TabBaseProps';
 
-type TabBaseStyles = NamedStylesStringUnion<'root' | 'row' | 'column'>;
+type TabBaseStyles = NamedStylesStringUnion<'root'>;
 
 const useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {
     return {
@@ -11,12 +11,6 @@ const useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {
             alignItems: 'center',
             justifyContent: 'center',
         },
-        row: {
-            flexDirection: 'row',
-        },
-        column: {
-            flexDirection: 'column',
-        },
     };
 };
 
@@ -26,7 +20,6 @@ export default function TabBase(props: TabBaseProps) {
         disabled = false,
         onPress,
         selected = false,
-        vertical = false,
         style,
         ...otherProps
     } = props;
@@ -39,7 +32,6 @@ export default function TabBase(props: TabBaseProps) {
             disabled={disabled}
             style={css([
                 styles.root,
-                vertical ? styles.column : styles.row,
                 style,
             ])}
             {...otherProps}

package/src/TabBase/TabBaseProps.ts

@@ -13,10 +13,4 @@ export default interface TabBaseProps extends OverridableComponentProps<ButtonBa
      * @default false
      */
     selected?: boolean;
-
-    /**
-     * Orientation of the TabBase. Default is horizontal.
-     * @default false
-     */
-    vertical?: boolean;
 }> {}

package/src/Tabs/Tabs.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import { useSyncAnimatedValue } from '../hooks';
-import type { TabVariant } from '../Tab';
+import type { TabSize, TabVariant } from '../Tab';
 import type TabsProps from './TabsProps';
 import type { TabsColor } from './TabsProps';
 import type { TabsInstance } from './types';
@@ -16,12 +16,13 @@ import useTabInnerContentsWidth from './useTabInnerContentsWidth';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
 import { isEveryTabCoordinatesDefined } from './utils';
+import { defaultCoordinate } from './TabCoordinate';
+import useTabsStyle from './useTabsStyle';
 
 type TabsStyleKeys =
     | 'root'
     | 'fixedRoot'
     | 'fixedTab'
-    | 'scrollableContainer'
     | 'bottomDivider';
 
 type TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;
@@ -37,9 +38,6 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
         fixedTab: {
             flex: 1,
         },
-        scrollableContainer: {
-            paddingHorizontal: theme.spacing(1),
-        },
         bottomDivider: {
             borderBottomColor: theme.palette.border.base,
             borderBottomWidth: 0.5,
@@ -60,6 +58,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         scrollable = false,
         scrollViewContentContainerStyle,
         showDivider = false,
+        size = 'medium' as TabSize,
         style,
         variant = 'default' as TabVariant,
         UNSTABLE_sharedIndex,
@@ -72,6 +71,11 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const currentIndexRef = useRef(initialIndex);
 
+    const {
+        container: containerStyle,
+        contentContainer: contentContainerStyle,
+    } = useTabsStyle(variant, size, scrollable);
+
     const setTab = (newIndex: number) => {
         const currentIndex = currentIndexRef.current;
         onTabSelected?.(newIndex, currentIndex);
@@ -110,7 +114,12 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         }
 
         return innerContentsWidthList.map((innerContentWidth, idx) => {
-            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];
+            const outerCoordinate = outerCoordinates[idx];
+            if (!outerCoordinate) {
+                return defaultCoordinate;
+            }
+
+            const { x1: outerX1, x2: outerX2 } = outerCoordinate;
 
             const tabWidth = outerX2 - outerX1;
             const distanceFromParent = (tabWidth - innerContentWidth) / 2;
@@ -163,6 +172,9 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             child.props.onPress?.();
         };
 
+        // @ts-ignore
+        const tabStyle = child.props.style;
+
         // @ts-ignore
         const tabElement = cloneElement(child, {
             enableIndicator: !disableIndicator && !canRenderIndicator,
@@ -170,9 +182,14 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             onLayout,
             onPress,
             onMouseDown,
+            parentColor: color,
+            size,
             variant,
             indicatorSize,
-            style: scrollable ? undefined : styles.fixedTab,
+            style: css([
+                scrollable ? undefined : styles.fixedTab,
+                tabStyle,
+            ]),
         });
 
         return (
@@ -202,6 +219,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             <View
                 style={css([
                     styles.root,
+                    containerStyle,
                     { backgroundColor: backgroundColorMap[color] },
                     showDivider ? styles.bottomDivider : undefined,
                     scrollable ? undefined : styles.fixedRoot,
@@ -213,7 +231,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                         automaticallyAdjustContentInsets={false}
                         bounces={false}
                         contentContainerStyle={css([
-                            styles.scrollableContainer,
+                            contentContainerStyle,
                             scrollViewContentContainerStyle,
                         ])}
                         coordinates={coordinates}

package/src/Tabs/TabsProps.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import type { TabVariant } from '../Tab';
+import type { TabSize, TabVariant } from '../Tab';
 import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 
@@ -78,6 +78,12 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     showDivider?: boolean;
 
+    /**
+     * The size of the Tab.
+     * @default 'medium'
+     */
+    size?: TabSize;
+
     /**
      * Unstable API.
      */

package/src/Tabs/index.ts

@@ -1,4 +1,4 @@
 export { default } from './Tabs';
-export type { default as TabsProps } from './TabsProps';
+export type { default as TabsProps, TabIndicatorSize, TabsColor } from './TabsProps';
 export { tabIndicatorSizes, tabsColors } from './TabsProps';
 export type { TabsInstance } from './types';

package/src/Tabs/useTabsStyle.ts

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
+import { useTheme } from '../styles';
+import type { TabSize, TabVariant } from '../Tab';
+
+interface TabsStyle {
+    container: FountainUiStyle;
+    contentContainer?: FountainUiStyle;
+}
+
+export default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {
+    const theme = useTheme();
+
+    const isTablet = useBreakpointUp('md', true, false);
+
+    return useMemo<TabsStyle>(() => {
+        switch (variant) {
+            case 'circular': {
+                const paddingHorizontal = isTablet ? 20 : (size === 'small' ? 8 : 12);
+
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'circular-home': {
+                const paddingHorizontal = isTablet ? 20 : 8;
+
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'bottom-navigation': {
+                const paddingHorizontal = 24;
+
+                return {
+                    container: {
+                        ...(isTablet ? {
+                            alignSelf: 'center',
+                            minWidth: 460,
+                        } : {}),
+                        justifyContent: 'space-between',
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'default':
+            default: {
+                const paddingHorizontal = isTablet ? 14 : 6;
+
+                return {
+                    container: {
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+        }
+    }, [theme, variant, isTablet, size, scrollable]);
+}

package/src/TextField/TextField.tsx

@@ -19,10 +19,31 @@ const styles = StyleSheet.create({
     input: {
         flexGrow: 1,
     },
+    inputWrapper: {
+        flexGrow: 1,
+    },
+    placeholderWrapper: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+    },
     secureToggleButton: {
         alignItems: 'flex-end',
         padding: 0,
     },
+    searchIconContainer: {
+        left: 12,
+        position: 'absolute',
+    },
+    loadingSinner: {
+        height: 19,
+        width: 19,
+    },
+    clearButton: {
+        height: 36,
+        position: 'absolute',
+        right: 2,
+        width: 32,
+    },
 });
 
 const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {
@@ -35,6 +56,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         onBlur,
         onChangeText: onChangeTextProp,
         onFocus,
+        placeholder: placeholderProp,
         placeholderTextColor: placeholderTextColorProp,
         secureTextEntry: secureTextEntryProp,
         showClearButton: showClearButtonProp,
@@ -82,18 +104,22 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const showClearButton = showClearButtonProp ?? isSearch;
 
     const titleFontStyle = createFontStyle(theme, {
-        // selector: (typography) => typography.caption1['semiBold']
+        selector: (typography) => typography.caption1['semiBold'],
         color: theme.palette.text.strong,
     });
 
     const inputStyle = css([
         styles.input,
         variantStyles.inputStyle,
+        variantStyles.inputFontStyle,
         Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
         styleProp,
     ]);
 
-    const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+    const placeholderFontStyle = css([
+        variantStyles.inputFontStyle,
+        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },
+    ]);
 
     const containerStyle = css([
         styles.root,
@@ -113,41 +139,58 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
 
             <Row style={containerStyle}>
                 {isSearch ? (
-                    isLoading ? (
-                        <LoadingSpinner/>
-                    ) : (
-                        <Search
-                            color={'base'}
-                            height={18}
-                            width={18}
-                        />
-                    )
+                    <View style={styles.searchIconContainer}>
+                        {isLoading ? (
+                            <LoadingSpinner style={styles.loadingSinner}/>
+                        ) : (
+                            <Search
+                                color={'base'}
+                                height={19}
+                                width={19}
+                            />
+                        )}
+                    </View>
                 ) : null}
 
-                <TextInput
-                    autoFocus={autoFocus}
-                    editable={!disabled}
-                    onBlur={handleBlur}
-                    onChangeText={handleChangeText}
-                    onFocus={handleFocus}
-                    placeholderTextColor={placeholderTextColor}
-                    ref={ref}
-                    secureTextEntry={secureTextEntry}
-                    style={inputStyle}
-                    value={value}
-                    {...otherProps}
-                />
+                <View style={styles.inputWrapper}>
+                    <View
+                        pointerEvents={'none'}
+                        style={styles.placeholderWrapper}
+                    >
+                        {placeholderProp && !value ? (
+                            <Text
+                                children={placeholderProp}
+                                numberOfLines={1}
+                                style={placeholderFontStyle}
+                            />
+                        ) : null}
+                    </View>
+
+                    <TextInput
+                        autoFocus={autoFocus}
+                        editable={!disabled}
+                        onBlur={handleBlur}
+                        onChangeText={handleChangeText}
+                        onFocus={handleFocus}
+                        ref={ref}
+                        secureTextEntry={secureTextEntry}
+                        style={inputStyle}
+                        value={value}
+                        {...otherProps}
+                    />
+                </View>
 
                 {showClearButton && value?.length && value.length > 0 ? (
                     <IconButton
                         color={'base'}
                         children={
                             <Clear
-                                height={13.75}
-                                width={15}
+                                height={17.31}
+                                width={15.9}
                             />
                         }
                         onPress={handleClear}
+                        style={styles.clearButton}
                     />
                 ) : null}
 

package/src/TextField/useVariantStyleMap.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
 import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
@@ -6,6 +7,7 @@ import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
+    inputFontStyle?: TextStyle;
     inputStyle?: FountainUiStyle;
     hintStyle?: FountainUiStyle;
 }
@@ -47,24 +49,26 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     containerStyle: {
                         borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
                         borderBottomWidth: 1,
+                        minHeight: 60,
+                        paddingVertical: 16,
                     },
                     inputStyle: {
-                        paddingRight: theme.spacing(4),
-                        paddingVertical: theme.spacing(4),
-                        ...createFontStyle(theme, {
-                            selector: (_) => typographyOf({
-                                fontSize: 18,
-                                lineHeight: 27,
-                                fontFamily: 'Pretendard-SemiBold',
-                                letterSpacing: 0,
-                            }),
-                            color: theme.palette.text.strong,
-                        }),
+                        padding: 0,
+                        paddingRight: 16,
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 18,
+                            lineHeight: 27,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
                     hintStyle: {
                         marginTop: theme.spacing(2),
                         ...createFontStyle(theme, {
-                            // selector: (typography) => typography.caption1['regular']
+                            selector: (typography) => typography.caption1['regular'],
                             color: hintColor,
                         }),
                     },
@@ -76,24 +80,22 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         borderColor: theme.palette.border.base,
                         borderRadius: theme.shape.radius.md,
                         borderWidth: 0.5,
-                        paddingLeft: theme.spacing(3),
-                        paddingRight: theme.spacing(0.5),
+                        paddingBottom: 12,
+                        paddingHorizontal: 39,
+                        paddingTop: 11,
                     },
                     inputStyle: {
-                        paddingBottom: theme.spacing(2.5),
-                        paddingLeft: theme.spacing(2),
-                        paddingRight: theme.spacing(1),
-                        paddingTop: theme.spacing(2.25),
-                        ...createFontStyle(theme, {
-                            selector: (_) => typographyOf({
-                                fontSize: 16,
-                                lineHeight: 19.2,
-                                fontFamily: 'Pretendard-SemiBold',
-                                letterSpacing: -0.16,
-                            }),
-                            color: theme.palette.text.strong,
-                        }),
+                        padding: 0,
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 16,
+                            lineHeight: 19.2,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: -0.16,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
                 };
         }
     }, [theme, borderColor, hintColor, variant, isFocused]);