@fountain-ui/core 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/ListSubheader/ListSubheader.tsx

@@ -27,7 +27,7 @@ export default function ListSubheader(props: ListSubheaderProps) {
                 <Typography
                     children={children}
                     color={'strong'}
-                    variant={'caption3'}
+                    variant={'caption2'}
                 />
             )}
         </Row>

package/src/Pagination/NumberPagination.tsx

@@ -45,7 +45,7 @@ export default function NumberPagination(props: NumberPaginationProps) {
     const typography = typographyOf({
         fontSize: 9.5,
         lineHeight: 11.4,
-        fontFamily: 'Pretendard-SemiBold',
+        fontFamily: 'PretendardStd-SemiBold',
         letterSpacing: -0.19,
     });
 

package/src/Radio/Radio.tsx

@@ -9,6 +9,8 @@ import { cloneElementSafely } from '../utils';
 import { RadioContext } from '../RadioGroup/RadioContextProvider';
 import type RadioProps from './RadioProps';
 
+const DEFAULT_START_ICON_SIZE = 21;
+
 type RadioStyles = NamedStylesStringUnion<'root' | 'content'>;
 
 const useStyles: UseStyles<RadioStyles> = function (): RadioStyles {
@@ -63,7 +65,11 @@ export default function Radio(props: RadioProps) {
     const checkedIcon = checkIconProp ?? defaultCheckedIcon;
     const icon = isChecked ? checkedIcon : null;
 
-    const startIcon = cloneElementSafely(startIconProp, { color: 'strong' });
+    const startIcon = cloneElementSafely(startIconProp, {
+        color: 'strong',
+        height: DEFAULT_START_ICON_SIZE,
+        width: DEFAULT_START_ICON_SIZE,
+    });
 
     const rootStyle = css([
         styles.root,

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,8 +59,8 @@ export default function SnackbarContent(props: SnackbarContentProps) {
 
     const titleFontStyle = createFontStyle(theme, {
         selector: (_) => typographyOf({
-            fontSize: 14,
-            lineHeight: 18.2,
+            fontSize: 15,
+            lineHeight: 19.5,
             fontFamily: 'PretendardStd-SemiBold',
             letterSpacing: 0,
         }),
@@ -60,12 +68,19 @@ export default function SnackbarContent(props: SnackbarContentProps) {
     });
 
     const messageFontStyle = createFontStyle(theme, {
-        selector: (_) => typographyOf({
-            fontSize: 13,
-            lineHeight: 16.9,
-            fontFamily: 'PretendardStd-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/Tabs/Tabs.tsx

@@ -16,6 +16,7 @@ import useTabInnerContentsWidth from './useTabInnerContentsWidth';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
 import { isEveryTabCoordinatesDefined } from './utils';
+import useTabsStyle from './useTabsStyle';
 
 type TabsStyleKeys =
     | 'root'
@@ -72,6 +73,8 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const currentIndexRef = useRef(initialIndex);
 
+    const { container: containerStyle } = useTabsStyle(variant);
+
     const setTab = (newIndex: number) => {
         const currentIndex = currentIndexRef.current;
         onTabSelected?.(newIndex, currentIndex);
@@ -202,6 +205,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,

package/src/Tabs/useTabsStyle.ts

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
+import type { TabVariant } from '../Tab';
+
+interface TabsStyle {
+    container: FountainUiStyle;
+}
+
+export default function useTabsStyle(variant: TabVariant) {
+    const theme = useTheme();
+
+    return useMemo<TabsStyle>(() => {
+        switch (variant) {
+            case 'circular':
+                return {
+                    container: {
+                        paddingBottom: theme.spacing(2),
+                        paddingHorizontal: theme.spacing(3),
+                    },
+                };
+            case 'bottom-navigation':
+                return {
+                    container: {},
+                };
+            case 'default':
+            default:
+                return {
+                    container: {
+                        paddingHorizontal: theme.spacing(1.5),
+                    },
+                };
+        }
+    }, [theme, variant]);
+}

package/src/Tooltip/Tooltip.tsx

@@ -52,14 +52,14 @@ const useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {
         },
         small: {
             borderRadius: theme.shape.radius.sm,
+            paddingBottom: theme.spacing(1.75),
             paddingHorizontal: theme.spacing(2),
-            paddingVertical: theme.spacing(1.5),
+            paddingTop: theme.spacing(1.5),
         },
         large: {
             borderRadius: 5,
-            paddingBottom: theme.spacing(2.5),
             paddingHorizontal: theme.spacing(4),
-            paddingTop: theme.spacing(2),
+            paddingVertical: theme.spacing(2),
         },
     };
 };
@@ -140,12 +140,7 @@ export default function Tooltip(props: TooltipProps) {
 
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => size === 'large'
-            ? typographyOf({
-                fontSize: 13,
-                lineHeight: 19.5,
-                fontFamily: 'PretendardStd-Regular',
-                letterSpacing: 0,
-            })
+            ? typo.body3.regular
             : typo.caption2.regular,
         color: theme.palette.text.strongInverse,
     });

package/src/hooks/useContentContainerStyle.ts

@@ -1,4 +1,3 @@
-import type { ViewStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { useBreakpointByWidth } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
@@ -11,18 +10,17 @@ export interface Config {
     styleProvider?: (theme: Theme) => FountainUiStyle;
 }
 
-function getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {
+function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {
     switch (breakpoint) {
         case 'lg':
-            return theme.breakpoints.values['lg'];
         case 'md':
-            return theme.breakpoints.values['md'];
+            return customMaxWidth ?? theme.breakpoints.values[breakpoint];
         default:
-            return 'none';
+            return undefined;
     }
 }
 
-function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['paddingHorizontal'] {
+function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
     switch (breakpoint) {
         case 'sm':
             return theme.spacing(6);
@@ -33,7 +31,7 @@ function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['
 
 export default function useContentContainerStyle(config: Config): FountainUiStyle {
     const {
-        maxWidth,
+        maxWidth: customMaxWidth,
         styleProvider,
     } = config;
 
@@ -43,11 +41,16 @@ export default function useContentContainerStyle(config: Config): FountainUiStyl
 
     const additionalStyle = styleProvider?.(theme);
 
+    const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);
+    const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);
+
+    const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;
+
     return css([
         {
             alignSelf: 'center',
-            maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),
-            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
+            maxWidth: resolvedMaxWidth,
+            paddingHorizontal,
             width: '100%',
         },
         additionalStyle,