@fountain-ui/core 3.0.0-alpha.4 → 3.0.0-alpha.40

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,12 @@
 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 type { TabsColor } from '../Tabs';
+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({
@@ -26,23 +26,23 @@ export default function Tab(props: TabProps) {
         children,
         enableIndicator = false,
         icon: defaultIcon,
+        parentColor = 'default' as TabsColor,
         selected = false,
         selectedIcon,
+        size = 'medium' as TabSize,
         variant = 'default' as TabVariant,
         style: styleProp,
+        innerStyle: innerStyleProp,
         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, parentColor);
 
     const tabBaseStyle = css([
         styles.root,
@@ -53,13 +53,11 @@ export default function Tab(props: TabProps) {
     const tabInnerStyle = css([
         styles.filledInner,
         innerStyle,
+        innerStyleProp,
     ]);
 
-    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 +67,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

@@ -1,9 +1,13 @@
 import React from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
-import type { OverridableComponentProps } from '../types';
+import type { TabsColor } from '../Tabs';
+import type { ExtendedStyle, 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, {
@@ -24,6 +28,13 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     enableIndicator?: boolean;
 
+    /**
+     * The color value inherited from the parent Tabs component.
+     * This allows Tab components to apply consistent styling based on the Tabs container's color scheme.
+     * @default 'default'
+     */
+    parentColor?: TabsColor;
+
     /**
      * If `true`, the component is selected.
      * @default false
@@ -40,6 +51,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'
@@ -50,4 +67,10 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * Function to be passed to the child component's onLayout prop.
      */
     onTabInnerLayout?: (event: LayoutChangeEvent) => void;
+
+    /**
+     * Custom style to apply to the inner container of the Tab.
+     * This allows customization of the tab's inner layout and appearance.
+     */
+    innerStyle?: ExtendedStyle | ExtendedStyle[];
 }> {}

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

@@ -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,79 @@
+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 isSmallUp = useBreakpointUp('sm', true, false);
+
+    const isMediumUp = useBreakpointUp('md', true, false);
+
+    return useMemo<TabsStyle>(() => {
+        switch (variant) {
+            case 'circular': {
+                const paddingHorizontal = isSmallUp ? 20 : (size === 'small' ? 8 : 12);
+
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'circular-home': {
+                const paddingHorizontal = isSmallUp ? 20 : 8;
+
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'bottom-navigation': {
+                const paddingHorizontal = 24;
+
+                return {
+                    container: {
+                        ...(isMediumUp ? {
+                            alignSelf: 'center',
+                            minWidth: 460,
+                        } : {}),
+                        justifyContent: 'space-between',
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'default':
+            default: {
+                const paddingHorizontal = isSmallUp ? 14 : 6;
+
+                return {
+                    container: {
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+        }
+    }, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);
+}