@fountain-ui/core 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/SnackbarContent/SnackbarContent.tsx

@@ -10,7 +10,7 @@ import Typography from '../Typography';
 import type SnackbarContentProps from './SnackbarContentProps';
 import StatusIcon from './StatusIcon';
 
-type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton'>;
+type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton' | 'actionLabel' | 'actionElement'>;
 
 const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {
     const theme = useTheme();
@@ -30,6 +30,14 @@ const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContent
         actionButton: {
             marginLeft: theme.spacing(6),
         },
+        actionLabel: {
+            paddingBottom: theme.spacing(1.5),
+            paddingTop: theme.spacing(1.25),
+        },
+        actionElement: {
+            paddingLeft: theme.spacing(2),
+            paddingVertical: theme.spacing(1.25),
+        },
     };
 };
 
@@ -51,21 +59,28 @@ export default function SnackbarContent(props: SnackbarContentProps) {
 
     const titleFontStyle = createFontStyle(theme, {
         selector: (_) => typographyOf({
-            fontSize: 14,
-            lineHeight: 18.2,
-            fontFamily: 'Pretendard-SemiBold',
+            fontSize: 15,
+            lineHeight: 19.5,
+            fontFamily: 'PretendardStd-SemiBold',
             letterSpacing: 0,
         }),
         color: theme.palette.text.strongInverse,
     });
 
     const messageFontStyle = createFontStyle(theme, {
-        selector: (_) => typographyOf({
-            fontSize: 13,
-            lineHeight: 16.9,
-            fontFamily: 'Pretendard-Regular',
-            letterSpacing: 0,
-        }),
+        selector: (_) => title
+            ? typographyOf({
+                fontSize: 12,
+                lineHeight: 15.6,
+                fontFamily: 'PretendardStd-Regular',
+                letterSpacing: 0,
+            })
+            : typographyOf({
+                fontSize: 14,
+                lineHeight: 18.2,
+                fontFamily: 'PretendardStd-Regular',
+                letterSpacing: 0,
+            }),
         color: theme.palette.text.strongInverse,
     });
 
@@ -129,11 +144,17 @@ export default function SnackbarContent(props: SnackbarContentProps) {
 
                     <View style={styles.actionButton}>
                         {typeof actionContent === 'string' ? (
-                            <Text
-                                children={actionContent}
-                                style={labelFontStyle}
-                            />
-                        ) : (actionContent)}
+                            <View style={styles.actionLabel}>
+                                <Text
+                                    children={actionContent}
+                                    style={labelFontStyle}
+                                />
+                            </View>
+                        ) : (
+                            <View style={styles.actionElement}>
+                                {actionContent}
+                            </View>
+                        )}
                     </View>
                 </React.Fragment>
             ) : null}

package/src/Tab/Tab.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
-import Spacer from '../Spacer';
 import TabBase from '../TabBase';
-import { css, StyleSheet, useTheme } from '../styles';
+import { css, StyleSheet } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type TabProps from './TabProps';
-import type { TabVariant } from './TabProps';
+import type { TabSize, TabVariant } from './TabProps';
 import useVariantStyleMap from './useVariantStyleMap';
 
 const styles = StyleSheet.create({
@@ -28,21 +27,19 @@ export default function Tab(props: TabProps) {
         icon: defaultIcon,
         selected = false,
         selectedIcon,
+        size = 'medium' as TabSize,
         variant = 'default' as TabVariant,
         style: styleProp,
         onTabInnerLayout,
         ...otherProps
     } = props;
 
-    const theme = useTheme();
-
-    const vertical = variant === 'bottom-navigation';
-
     const {
         container: containerStyle,
+        iconContainer: iconContainerStyle,
         inner: innerStyle,
         label: labelStyle,
-    } = useVariantStyleMap(variant, selected);
+    } = useVariantStyleMap(variant, selected, size);
 
     const tabBaseStyle = css([
         styles.root,
@@ -55,11 +52,8 @@ export default function Tab(props: TabProps) {
         innerStyle,
     ]);
 
-    const pressEffect = selected ? 'none' : 'opacity';
-
     const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
-    const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;
-    const iconElement = cloneElementSafely(icon, { fill: iconColor });
+    const iconElement = cloneElementSafely(icon);
 
     const tabElement = typeof children !== 'string' ? (
         cloneElementSafely(children, {
@@ -69,25 +63,37 @@ export default function Tab(props: TabProps) {
         <React.Fragment>
             {iconElement ? (
                 <React.Fragment>
-                    <Badge invisible={!badgeVisible}>
-                        {iconElement}
+                    <Badge
+                        horizontalOffset={-4}
+                        invisible={!badgeVisible}
+                        verticalOffset={-4}
+                    >
+                        <View style={iconContainerStyle}>
+                            {iconElement}
+                        </View>
                     </Badge>
 
-                    <Spacer size={1.25}/>
+                    <Text style={css(labelStyle)}>
+                        {children}
+                    </Text>
                 </React.Fragment>
-            ) : null}
-
-            <Text style={css(labelStyle)}>
-                {children}
-            </Text>
+            ) : (
+                <Badge
+                    horizontalOffset={-7}
+                    invisible={!badgeVisible}
+                    verticalOffset={3}
+                >
+                    <Text style={css(labelStyle)}>
+                        {children}
+                    </Text>
+                </Badge>
+            )}
         </React.Fragment>
     );
 
     return (
         <TabBase
-            pressEffect={pressEffect}
             style={tabBaseStyle}
-            vertical={vertical}
             {...otherProps}
         >
             <View onLayout={onTabInnerLayout} style={tabInnerStyle}>

package/src/Tab/TabProps.ts

@@ -3,7 +3,10 @@ import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
-export const tabVariants = ['default', 'circular', 'bottom-navigation'] as const;
+export const tabSizes = ['small', 'medium'] as const;
+export type TabSize = typeof tabSizes[number];
+
+export const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;
 export type TabVariant = typeof tabVariants[number];
 
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
@@ -40,6 +43,12 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     selectedIcon?: React.ReactElement;
 
+    /**
+     * The size of the Tab.
+     * @default 'medium'
+     */
+    size?: TabSize;
+
     /**
      * The variant to use.
      * @default 'default'

package/src/Tab/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Tab';
-export type { default as TabProps, TabVariant } from './TabProps';
+export type { default as TabProps, TabSize, TabVariant } from './TabProps';
+export { tabSizes, tabVariants } from './TabProps';

package/src/Tab/useVariantStyleMap.ts

@@ -3,15 +3,16 @@ import { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 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): VariantStyle {
     const theme = useTheme();
 
     return useMemo<VariantStyle>(() => {
@@ -27,19 +28,53 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                             ? theme.palette.fill.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 +83,22 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         alignItems: 'center',
                         height: 49,
                         justifyContent: 'flex-start',
-                        paddingTop: theme.spacing(2.625),
+                        paddingTop: 10.5,
                         width: 48,
                     },
+                    iconContainer: {
+                        padding: 0.75,
+                    },
+                    inner: {
+                        flexDirection: 'column',
+                        gap: 4.75,
+                    },
                     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 +109,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 +130,5 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                     }),
                 };
         }
-    }, [theme, variant, selected]);
+    }, [theme, variant, selected, size]);
 }

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,12 @@ import useTabInnerContentsWidth from './useTabInnerContentsWidth';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
 import { isEveryTabCoordinatesDefined } from './utils';
+import useTabsStyle from './useTabsStyle';
 
 type TabsStyleKeys =
     | 'root'
     | 'fixedRoot'
     | 'fixedTab'
-    | 'scrollableContainer'
     | 'bottomDivider';
 
 type TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;
@@ -37,9 +37,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 +57,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 +70,8 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const currentIndexRef = useRef(initialIndex);
 
+    const { container: containerStyle } = useTabsStyle(variant, size);
+
     const setTab = (newIndex: number) => {
         const currentIndex = currentIndexRef.current;
         onTabSelected?.(newIndex, currentIndex);
@@ -170,6 +170,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             onLayout,
             onPress,
             onMouseDown,
+            size,
             variant,
             indicatorSize,
             style: scrollable ? undefined : styles.fixedTab,
@@ -202,6 +203,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 +215,6 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                         automaticallyAdjustContentInsets={false}
                         bounces={false}
                         contentContainerStyle={css([
-                            styles.scrollableContainer,
                             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/useTabsStyle.ts

@@ -0,0 +1,49 @@
+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;
+}
+
+export default function useTabsStyle(variant: TabVariant, size: TabSize) {
+    const theme = useTheme();
+
+    const isTablet = useBreakpointUp('md', true, false);
+
+    return useMemo<TabsStyle>(() => {
+        switch (variant) {
+            case 'circular':
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: isTablet ? 20 : (size === 'small' ? 8 : 12),
+                    },
+                };
+            case 'circular-home':
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: isTablet ? 20 : 8,
+                    },
+                };
+            case 'bottom-navigation':
+                return {
+                    container: {
+                        borderTopColor: theme.palette.border.base,
+                        borderTopWidth: 0.5,
+                        paddingHorizontal: 24,
+                    },
+                };
+            case 'default':
+            default:
+                return {
+                    container: {
+                        paddingHorizontal: isTablet ? 14 : 6,
+                    },
+                };
+        }
+    }, [theme, variant, isTablet, size]);
+}

package/src/TextField/TextField.tsx

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

package/src/TextField/useVariantStyleMap.ts

@@ -49,13 +49,14 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         borderBottomWidth: 1,
                     },
                     inputStyle: {
+                        paddingLeft: 0,
                         paddingRight: theme.spacing(4),
                         paddingVertical: theme.spacing(4),
                         ...createFontStyle(theme, {
                             selector: (_) => typographyOf({
                                 fontSize: 18,
                                 lineHeight: 27,
-                                fontFamily: 'Pretendard-SemiBold',
+                                fontFamily: 'PretendardStd-SemiBold',
                                 letterSpacing: 0,
                             }),
                             color: theme.palette.text.strong,
@@ -64,7 +65,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     hintStyle: {
                         marginTop: theme.spacing(2),
                         ...createFontStyle(theme, {
-                            // selector: (typography) => typography.caption1['regular']
+                            selector: (typography) => typography.caption1['regular'],
                             color: hintColor,
                         }),
                     },
@@ -88,7 +89,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                             selector: (_) => typographyOf({
                                 fontSize: 16,
                                 lineHeight: 19.2,
-                                fontFamily: 'Pretendard-SemiBold',
+                                fontFamily: 'PretendardStd-SemiBold',
                                 letterSpacing: -0.16,
                             }),
                             color: theme.palette.text.strong,

package/src/Toolbar/BackButton/BackButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../../IconButton';
+import { ChevronLeft } from '../../internal';
+import type BackButtonProps from './BackButtonProps';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 4,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+export default function BackButton(props: BackButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <ChevronLeft
+                color={'strong'}
+                size={'large'}
+            />
+        </IconButton>
+    );
+}

package/src/Toolbar/BackButton/BackButtonProps.ts

@@ -0,0 +1,4 @@
+import type { IconButtonProps } from '../../IconButton';
+import type { OverridableComponentProps } from '../../types';
+
+export default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {}

package/src/Toolbar/BackButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BackButton';
+export type { default as BackButtonProps } from './BackButtonProps';

package/src/Toolbar/Toolbar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Row from '../Row';
 import { css, useTheme } from '../styles';
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
 import type { ToolbarSize } from './ToolbarProps';
 
@@ -27,7 +28,7 @@ const sizeMap: Record<ToolbarSize, FountainUiStyle> = {
     large: { height: 56 },
 };
 
-export default function Toolbar(props: ToolbarProps) {
+const Toolbar = (props: ToolbarProps) => {
     const {
         disableGutters = false,
         size = 'medium',
@@ -49,3 +50,7 @@ export default function Toolbar(props: ToolbarProps) {
         />
     );
 };
+
+Toolbar.BackButton = BackButton;
+
+export default Toolbar;