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

package/src/PaginationItem/PaginationItem.tsx

@@ -1,47 +1,54 @@
 import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { PaginationColor } from '../Pagination';
 import { css, useTheme } from '../styles';
 import type PaginationItemProps from './PaginationItemProps';
 
-type PaginationItemStyles = NamedStylesStringUnion<'root' | 'selected' | 'unselected'>;
+const DEFAULT_SIZE = 6;
 
-const useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemStyles {
+const styles = StyleSheet.create({
+    root: {
+        width: DEFAULT_SIZE,
+        height: DEFAULT_SIZE,
+        borderRadius: DEFAULT_SIZE * 0.5,
+        marginHorizontal: 4,
+    },
+});
+
+function getBackgroundColor(color: PaginationColor, selected: boolean): ViewStyle['backgroundColor'] {
     const theme = useTheme();
 
-    const size = 6;
-
-    return {
-        root: {
-            width: size,
-            height: size,
-            borderRadius: size * 0.5,
-            marginHorizontal: theme.spacing(1),
-        },
-        selected: {
-            backgroundColor: theme.palette.fill.base,
-        },
-        unselected: {
-            backgroundColor: theme.palette.status.disabled,
-        },
-    };
-};
+    switch (color) {
+        case 'static':
+            return selected
+                ? commonColors.static.strongInverse
+                : commonColors.static.weakOpacityInverse;
+        case 'base':
+        default:
+            return selected
+                ? theme.palette.fill.base
+                : theme.palette.status.disabled;
+
+    }
+}
 
 function PaginationItem(props: PaginationItemProps) {
     const {
+        color = 'base' as PaginationColor,
         disabled,
-        selected,
+        selected = false,
         style,
         ...otherProps
     } = props;
 
-    const styles = useStyles();
+    const backgroundColor = getBackgroundColor(color, selected);
 
     return (
         <View
             style={css([
                 styles.root,
-                selected ? styles.selected : styles.unselected,
+                { backgroundColor },
                 style,
             ])}
             {...otherProps}

package/src/PaginationItem/PaginationItemProps.ts

@@ -1,7 +1,14 @@
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
+import { PaginationColor } from '../Pagination';
 
 export default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * If `true`, the pagination item is disabled.
      * @default false

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 {
@@ -17,12 +19,15 @@ const useStyles: UseStyles<RadioStyles> = function (): RadioStyles {
     return {
         root: {
             alignItems: 'center',
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
             flexDirection: 'row',
-            gap: theme.spacing(8),
+            gap: 32,
             justifyContent: 'space-between',
+            paddingVertical: 14,
         },
         content: {
-            gap: theme.spacing(2),
+            gap: 8,
             minHeight: 20,
         },
     };
@@ -63,7 +68,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/RadioGroup/RadioGroup.tsx

@@ -1,26 +1,8 @@
-import React, { Children } from 'react';
+import React from 'react';
 import { View } from 'react-native';
-import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { useTheme } from '../styles';
-import type { FalsyReactElement } from '../utils';
-import { cloneElementSafely } from '../utils';
 import RadioContextProvider from './RadioContextProvider';
 import type RadioGroupProps from './RadioGroupProps';
 
-type RadioItemStyles = NamedStylesStringUnion<'root'>;
-
-const useStyles: UseStyles<RadioItemStyles> = function (): RadioItemStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            borderBottomColor: theme.palette.border.weak,
-            borderBottomWidth: 0.5,
-            paddingVertical: theme.spacing(3.5),
-        },
-    };
-};
-
 export default function RadioGroup(props: RadioGroupProps) {
     const {
         children,
@@ -29,18 +11,10 @@ export default function RadioGroup(props: RadioGroupProps) {
         ...otherProps
     } = props;
 
-    const styles = useStyles();
-
-    const radios = Children.map(children, (child) => (
-        <View style={styles.root}>
-            {cloneElementSafely(child as FalsyReactElement)}
-        </View>
-    ));
-
     return (
         <RadioContextProvider value={{ value, onChange }}>
             <View {...otherProps}>
-                {radios}
+                {children}
             </View>
         </RadioContextProvider>
     );

package/src/Section/Section.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useContentContainerStyle } from '../hooks';
+import { css } from '../styles';
+import type SectionProps from './SectionProps';
+
+export default function Section(props: SectionProps) {
+    const {
+        children,
+        maxWidth,
+        style: styleProp,
+    } = props;
+
+    const styles = useContentContainerStyle({ maxWidth });
+
+    const rootStyle = css([
+        styles,
+        styleProp,
+    ]);
+
+    return (
+        <View style={rootStyle}>
+            {children}
+        </View>
+    );
+}

package/src/Section/SectionProps.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface SectionProps extends OverridableComponentProps<ViewProps, {
+    maxWidth?: number;
+}> {}

package/src/Section/index.ts

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

package/src/ShadowView/ShadowView.native.tsx

@@ -19,6 +19,8 @@ export default function ShadowView(props: ShadowViewProps) {
     const {
         borderRadius,
         height,
+        maxHeight,
+        maxWidth,
         width,
     } = styleProp as FountainUiStyle;
 
@@ -30,6 +32,8 @@ export default function ShadowView(props: ShadowViewProps) {
                     {
                         borderRadius: borderRadius ?? 0,
                         height,
+                        maxHeight,
+                        maxWidth,
                         width,
                     },
                 ])}

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;
 }> {}