@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.10

package/src/ListItem/ListItem.tsx

@@ -1,36 +1,52 @@
 import React from 'react';
-import { Platform, View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import type { FlexStyle } from 'react-native';
+import { Platform, Text, View } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
-import { css, useTheme } from '../styles';
-import ListItemProps from './ListItemProps';
+import Row from '../Row';
+import { createFontStyle, css, useTheme } from '../styles';
+import type ListItemProps from './ListItemProps';
 
-type ListItemStyles = NamedStylesStringUnion<'root'>;
+type ListItemStyles = NamedStylesStringUnion<'content' | 'description' | 'divider' | 'dividerWrapper'>;
 
 const useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {
     const theme = useTheme();
 
     return {
-        root: {
-            flexDirection: 'row',
-            paddingVertical: theme.spacing(3),
+        content: {
+            gap: theme.spacing(2),
+            paddingVertical: theme.spacing(3.75),
             paddingHorizontal: theme.spacing(4),
             width: '100%',
         },
+        description: {
+            paddingRight: theme.spacing(20),
+        },
+        divider: {
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
+        },
+        dividerWrapper: {
+            paddingHorizontal: theme.spacing(4),
+        },
     };
 };
 
 export default function ListItem(props: ListItemProps) {
     const {
-        alignItems = 'center',
+        alignItems = 'center' as FlexStyle['alignItems'],
         button = false,
         children,
+        description,
         disabled = false,
         onPress,
         style,
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
     const rootComponentProps = {
@@ -38,33 +54,58 @@ export default function ListItem(props: ListItemProps) {
         ...otherProps,
     };
 
-    const rootStyle = css([
-        styles.root,
-        { alignItems },
+    const contentWrapperStyle = css([
+        styles.content,
         style,
     ]);
 
-    if (button) {
-        return (
-            // @ts-ignore
-            <View {...rootComponentProps}>
+    const descriptionFontStyle = createFontStyle(theme, {
+        selector: (_) => typographyOf({
+            fontSize: 14,
+            lineHeight: 19.6,
+            fontFamily: 'PretendardStd-Regular',
+            letterSpacing: 0,
+        }),
+        color: theme.palette.text.base,
+    });
+
+    const content = (
+        <React.Fragment>
+            <Row alignItems={alignItems}>
+                {children}
+            </Row>
+
+            {description ? (
+                <Text style={css([
+                    styles.description,
+                    descriptionFontStyle,
+                ])}>
+                    {description}
+                </Text>
+            ) : null}
+        </React.Fragment>
+    );
+
+    return (
+        // @ts-ignore
+        <View {...rootComponentProps}>
+            {button ? (
                 <ButtonBase
                     disabled={disabled}
                     onPress={onPress}
-                    style={rootStyle}
+                    style={contentWrapperStyle}
                 >
-                    {children}
+                    {content}
                 </ButtonBase>
-            </View>
-        );
-    }
+            ) : (
+                <View style={contentWrapperStyle}>
+                    {content}
+                </View>
+            )}
 
-    return (
-        // @ts-ignore
-        <View
-            children={children}
-            style={rootStyle}
-            {...rootComponentProps}
-        />
+            <View style={styles.dividerWrapper}>
+                <View style={styles.divider}/>
+            </View>
+        </View>
     );
 };

package/src/ListItem/ListItemProps.ts

@@ -16,6 +16,11 @@ export default interface ListItemProps extends OverridableComponentProps<React.P
      */
     button?: boolean;
 
+    /**
+     * Displays a description in this item.
+     */
+    description?: string;
+
     /**
      * Whether to prevent interaction with the ButtonBase.
      * @default false

package/src/ListItemIcon/ListItemIcon.tsx

@@ -11,8 +11,7 @@ const useStyles: UseStyles<ListItemIconStyles> = function (): ListItemIconStyles
 
     return {
         root: {
-            marginRight: theme.spacing(2),
-            minWidth: 24,
+            marginRight: theme.spacing(3),
             flexShrink: 0,
         },
     };

package/src/ListItemSecondaryAction/ListItemSecondaryAction.tsx

@@ -9,6 +9,8 @@ type ListItemSecondaryActionStyles = NamedStylesStringUnion<'root'>;
 const useStyles: UseStyles<ListItemSecondaryActionStyles> = function (): ListItemSecondaryActionStyles {
     return {
         root: {
+            alignItems: 'center',
+            flexDirection: 'row',
             flexShrink: 0,
             marginLeft: 'auto',
         },

package/src/ListItemText/ListItemText.tsx

@@ -1,37 +1,42 @@
 import React from 'react';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { Text } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
 import Column from '../Column';
-import Typography from '../Typography';
-import { css, useTheme } from '../styles';
+import { createFontStyle, css, useTheme } from '../styles';
 import type ListItemTextProps from './ListItemTextProps';
 
-type ListItemTextStyles = NamedStylesStringUnion<'root' | 'multiline'>;
+type ListItemTextStyles = NamedStylesStringUnion<'root'>;
 
 const useStyles: UseStyles<ListItemTextStyles> = function (): ListItemTextStyles {
-    const theme = useTheme();
-
     return {
         root: {
             flexGrow: 1,
             flexShrink: 1,
         },
-        multiline: {
-            marginBottom: theme.spacing(1),
-        },
     };
 };
 
 export default function ListItemText(props: ListItemTextProps) {
     const {
-        primary,
-        secondary,
+        children,
         style,
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
-    const isMultiline = !!(primary && secondary);
+    const fontStyle = createFontStyle(theme, {
+        selector: (_) => typographyOf({
+            fontSize: 16,
+            lineHeight: 19.2,
+            fontFamily: 'PretendardStd-Medium',
+            letterSpacing: 0,
+        }),
+        color: theme.palette.text.strong,
+    });
 
     return (
         <Column
@@ -41,22 +46,9 @@ export default function ListItemText(props: ListItemTextProps) {
             ])}
             {...otherProps}
         >
-            {primary ? (
-                <Typography
-                    children={primary}
-                    color={'textPrimary'}
-                    variant={'body1'}
-                    style={isMultiline ? styles.multiline : undefined}
-                />
-            ) : null}
-
-            {secondary ? (
-                <Typography
-                    children={secondary}
-                    color={'textSecondary'}
-                    variant={'body2'}
-                />
-            ) : null}
+            <Text style={fontStyle}>
+                {children}
+            </Text>
         </Column>
     );
 };

package/src/ListItemText/ListItemTextProps.ts

@@ -1,17 +1,9 @@
-import type { TypographyProps } from '../Typography';
 import type { OverridableComponentProps } from '../types';
 import type { ColumnProps } from '../Column';
 
-type BaseProps = Omit<ColumnProps, 'children'>;
-
-export default interface ListItemTextProps extends OverridableComponentProps<BaseProps, {
+export default interface ListItemTextProps extends OverridableComponentProps<ColumnProps, {
     /**
      * The main content element.
      */
-    primary?: TypographyProps['children'];
-
-    /**
-     * The secondary content element.
-     */
-    secondary?: TypographyProps['children'];
+    children: string;
 }> {}

package/src/ListSubheader/ListSubheader.tsx

@@ -26,8 +26,8 @@ export default function ListSubheader(props: ListSubheaderProps) {
             ) : (
                 <Typography
                     children={children}
-                    color={'textSecondary'}
-                    variant={'caption1'}
+                    color={'strong'}
+                    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/Pagination/Pagination.tsx

@@ -110,10 +110,8 @@ export default function Pagination(props: PaginationProps) {
 
     const prevButton = !hidePrevButton ? (
         <IconButton
-            color={'tertiary'}
             disabled={disabled || (!infinite && page <= firstPage)}
             onPress={handlePrevPress}
-            size={'small'}
             style={children ? styles.prevAnchor : styles.prevInline}
         >
             <ChevronLeft/>
@@ -122,10 +120,8 @@ export default function Pagination(props: PaginationProps) {
 
     const nextButton = !hideNextButton ? (
         <IconButton
-            color={'tertiary'}
             disabled={disabled || (!infinite && page + bundleSize > lastPage)}
             onPress={handleNextPress}
-            size={'small'}
             style={children ? styles.nextAnchor : styles.nextInline}
         >
             <ChevronRight/>

package/src/Pagination/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacyPagination';
-export type { default as PaginationProps } from './LegacyPaginationProps';
+export { default } from './Pagination';
+export type { default as PaginationProps } from './PaginationProps';
+export { paginationVariants } from './PaginationProps';

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 {
@@ -57,16 +59,17 @@ export default function Radio(props: RadioProps) {
     const isChecked = context?.value === value ?? checked;
 
     const defaultCheckedIcon = (
-        <CheckedIcon
-            color={'accent'}
-            enableV2={true}
-        />
+        <CheckedIcon color={'accent'}/>
     );
 
     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,
@@ -74,7 +77,7 @@ export default function Radio(props: RadioProps) {
     ]);
 
     const fontStyle = createFontStyle(theme, {
-        // TODO: apply typo select.
+        selector: (typography) => typography.body1.regular,
         color: theme.palette.text.strong,
     });
 

package/src/Radio/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyRadio';
-export type { default as RadioProps } from './LegacyRadioProps';
+export { default } from './Radio';
+export type { default as RadioProps } from './RadioProps';

package/src/RadioGroup/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyRadioGroup';
+export { default } from './RadioGroup';
 export type { default as RadioGroupProps } from './RadioGroupProps';

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { View } from 'react-native';
-import type { ShadowVariant } from '@fountain-ui/styles';
+import type { FountainUiStyle, ShadowVariant } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import type ShadowViewProps from './ShadowViewProps';
 
 export default function ShadowView(props: ShadowViewProps) {
     const {
         children,
-        style: styleProp,
+        style: styleProp = {},
         variant = 100 as ShadowVariant,
         ...otherProps
     } = props;
@@ -16,22 +16,37 @@ export default function ShadowView(props: ShadowViewProps) {
 
     const { nativeShadows } = theme.shadow[variant];
 
-    const content = nativeShadows.reduce((accumulator, nativeShadow) => {
+    const {
+        borderRadius,
+        height,
+        maxHeight,
+        maxWidth,
+        width,
+    } = styleProp as FountainUiStyle;
+
+    return nativeShadows.reduce((accumulator, nativeShadow) => {
         return (
             <View
                 style={css([
                     { ...nativeShadow },
-                    styleProp,
+                    {
+                        borderRadius: borderRadius ?? 0,
+                        height,
+                        maxHeight,
+                        maxWidth,
+                        width,
+                    },
                 ])}
             >
                 {accumulator}
             </View>
         );
-    }, children);
-
-    return (
-        <View {...otherProps}>
-            {content}
+    }, (
+        <View
+            style={styleProp}
+            {...otherProps}
+        >
+            {children}
         </View>
-    );
+    ));
 }

package/src/Snackbar/Snackbar.tsx

@@ -3,7 +3,7 @@ import { Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Slide from '../Slide';
-import SnackbarContent from '../SnackbarContent/SnackbarContent';
+import SnackbarContent from '../SnackbarContent';
 import { useAnimatedValue } from '../hooks';
 import { useTheme } from '../styles';
 import { isNotAndroid12 } from '../utils';

package/src/Snackbar/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacySnackbar';
-export type { default as SnackbarProps } from './LegacySnackbarProps';
+export { default } from './Snackbar';
+export type { default as SnackbarProps } from './SnackbarProps';
+export { snackbarStatus } from './SnackbarProps';

package/src/SnackbarContent/SnackbarContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { typographyOf } from '@fountain-ui/styles';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { createFontStyle, css, useTheme } from '../styles';
@@ -10,7 +10,7 @@ import Typography from '../Typography';
 import type SnackbarContentProps from './SnackbarContentProps';
 import StatusIcon from './StatusIcon';
 
-type SnackBarContentStyles = NamedStylesStringUnion<'root'>;
+type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton' | 'actionLabel' | 'actionElement'>;
 
 const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {
     const theme = useTheme();
@@ -19,12 +19,25 @@ const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContent
         root: {
             flexDirection: 'row',
             alignItems: 'center',
+            alignSelf: 'center',
             backgroundColor: theme.palette.surface.accent,
             borderRadius: 22,
+            maxWidth: 400,
             paddingBottom: theme.spacing(2.25),
             paddingHorizontal: theme.spacing(4),
             paddingTop: theme.spacing(2),
         },
+        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),
+        },
     };
 };
 
@@ -46,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,
     });
 
@@ -74,9 +94,12 @@ export default function SnackbarContent(props: SnackbarContentProps) {
         color: theme.palette.text.accent,
     });
 
+    const hasActionButton = !!(actionContent && onPress);
+
     const rootStyle = css([
         styles.root,
         startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,
+        hasActionButton ? { width: '100%' } : undefined,
         styleProp,
     ]);
 
@@ -119,14 +142,20 @@ export default function SnackbarContent(props: SnackbarContentProps) {
                 <React.Fragment>
                     <Spacer flex={1}/>
 
-                    <Spacer size={1}/>
-
-                    {typeof actionContent === 'string' ? (
-                        <Text
-                            children={actionContent}
-                            style={labelFontStyle}
-                        />
-                    ) : (actionContent)}
+                    <View style={styles.actionButton}>
+                        {typeof actionContent === 'string' ? (
+                            <View style={styles.actionLabel}>
+                                <Text
+                                    children={actionContent}
+                                    style={labelFontStyle}
+                                />
+                            </View>
+                        ) : (
+                            <View style={styles.actionElement}>
+                                {actionContent}
+                            </View>
+                        )}
+                    </View>
                 </React.Fragment>
             ) : null}
         </ButtonBase>

package/src/SnackbarContent/StatusIcon.tsx

@@ -17,7 +17,6 @@ export default function StatusIcon(props: StatusIconProps) {
             return (
                 <CheckCircle
                     color={'accent'}
-                    enableV2={true}
                     height={17}
                     width={14}
                 />
@@ -25,7 +24,6 @@ export default function StatusIcon(props: StatusIconProps) {
         case 'fail':
             return (
                 <InfoCircle
-                    enableV2={true}
                     fill={theme.palette.status.danger}
                     height={17}
                     width={14}

package/src/SnackbarContent/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacySnackbarContent';
-export type { default as SnackbarContentProps } from './LegacySnackbarContentProps';
+export { default } from './SnackbarContent';
+export type { default as SnackbarContentProps } from './SnackbarContentProps';

package/src/SvgIcon/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacySvgIcon';
-export type { default as SvgIconProps } from './LegacySvgIconProps';
+export { default } from './SvgIcon';
+export type { default as SvgIconProps } from './SvgIconProps';
+export { svgIconColors, svgIconSizes } from './SvgIconProps';

package/src/Tab/Tab.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
 import Spacer from '../Spacer';
-import TabBase from '../TabBase/TabBase';
+import TabBase from '../TabBase';
 import { css, StyleSheet, useTheme } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type TabProps from './TabProps';

package/src/Tab/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyTab';
-export type { default as TabProps, TabVariant, TabIndicatorSize } from './LegacyTabProps';
+export { default } from './Tab';
+export type { default as TabProps, TabVariant } from './TabProps';