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

package/src/Dialog/useDialogStyle.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
 import type { DialogSize } from './DialogProps';
@@ -13,7 +14,7 @@ type DialogStyleKeys =
 
 type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
-export default function useDialogStyle(size: DialogSize, fullScreen: boolean): DialogStyles {
+export default function useDialogStyle(size: DialogSize): DialogStyles {
     const theme = useTheme();
 
     const {
@@ -21,6 +22,11 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
         width: windowWidth,
     } = useWindowDimensions();
 
+    const {
+        bottom: bottomSafeAreaInset,
+        top: topSafeAreaInset,
+    } = useSafeAreaInsets();
+
     return useMemo(() => {
         const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {
             small: {
@@ -34,32 +40,38 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 minHeight: 360,
                 width: 512,
             },
+            full: {
+                paddingBottom: bottomSafeAreaInset,
+                paddingTop: topSafeAreaInset,
+            },
         };
 
-        const containerPaddingVertical = theme.spacing(6);
+        const containerPaddingVertical = 24;
         const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;
         const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;
 
+        const isFullScreen = size === 'full';
+
         return {
             root: {
                 alignItems: 'center',
                 justifyContent: 'center',
                 zIndex: theme.zIndex.dialog,
             },
-            container: fullScreen ? {
+            container: isFullScreen ? {
                 height: '100%',
                 width: '100%',
             } : {
                 alignItems: 'center',
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,
                 paddingVertical: containerPaddingVertical,
                 width: '100%',
             },
-            paper: fullScreen ? {
+            paper: isFullScreen ? {
                 backgroundColor: theme.palette.surface.base,
                 height: '100%',
                 width: '100%',
+                ...sizeStyleMap[size],
             } : {
                 backgroundColor: theme.palette.surface.base,
                 borderRadius: theme.shape.radius.xl,
@@ -78,5 +90,5 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 width: '100%',
             },
         };
-    }, [theme, windowHeight, windowWidth, size, fullScreen]);
+    }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);
 }

package/src/DialogActions/DialogActions.tsx

@@ -12,7 +12,6 @@ const useStyles: UseStyles<DialogActionsStyles> = function (): DialogActionsStyl
 
     return {
         root: {
-            paddingTop: theme.spacing(2),
             paddingBottom: theme.spacing(4),
         },
     };

package/src/DialogTitle/DialogLargeTitle.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { DialogProps } from '../Dialog';
+import type DialogTitleProps from './DialogTitleProps';
+import { createFontStyle, css, useTheme } from '../styles';
+import IconButton from '../IconButton';
+import { ChevronLeft, Close } from '../internal';
+
+const styles = StyleSheet.create({
+    root: {
+        alignItems: 'center',
+        height: 64,
+        justifyContent: 'center',
+        paddingHorizontal: 80,
+        width: '100%',
+    },
+    backButton: {
+        height: 40,
+        left: 20,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+    closeButton: {
+        height: 40,
+        left: 20,
+        padding: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+interface DialogLargeTitleProps extends DialogTitleProps {
+    closeButtonType?: 'back' | 'close';
+    onClose: DialogProps['onClose'];
+}
+
+export default function DialogLargeTitle(props: DialogLargeTitleProps) {
+    const {
+        children,
+        closeButtonType = 'close',
+        onClose,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.header4.semiBold,
+        color: theme.palette.text.strong,
+    });
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <View
+            style={rootStyle}
+            {...otherProps}
+        >
+            {typeof onClose === 'function' ? (
+                closeButtonType === 'back' ? (
+                    <IconButton
+                        style={styles.backButton}
+                        onPress={onClose}
+                    >
+                        <ChevronLeft
+                            color={'strong'}
+                            size={'large'}
+                        />
+                    </IconButton>
+                ) : (
+                    <IconButton
+                        style={styles.closeButton}
+                        onPress={onClose}
+                    >
+                        <Close
+                            color={'strong'}
+                            size={'large'}
+                        />
+                    </IconButton>
+                )
+            ) : null}
+
+            <Text style={fontStyle}>
+                {children}
+            </Text>
+        </View>
+    );
+}

package/src/DialogTitle/DialogTitle.tsx

@@ -3,6 +3,7 @@ import { Text, View } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
+import DialogLargeTitle from './DialogLargeTitle';
 import type DialogTitleProps from './DialogTitleProps';
 
 type DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;
@@ -20,7 +21,7 @@ const useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {
     };
 };
 
-export default function DialogTitle(props: DialogTitleProps) {
+const DialogTitle = (props: DialogTitleProps) => {
     const {
         children,
         style: styleProp,
@@ -62,3 +63,7 @@ export default function DialogTitle(props: DialogTitleProps) {
         </View>
     );
 };
+
+DialogTitle.Large = DialogLargeTitle;
+
+export default DialogTitle;

package/src/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import type { Theme } from '@fountain-ui/styles';
+import { commonColors } from '@fountain-ui/styles';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 import { ExtendedStyle } from '../types';
 import type DividerProps from './DividerProps';
@@ -29,6 +30,10 @@ function selectBorderColor(theme: Theme, variant: DividerVariant, vertical: bool
             return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
         case 'strong':
             return vertical ? theme.palette.border.weak : theme.palette.border.base;
+        case 'strongStatic':
+            return commonColors.opacity.white['13'];
+        case 'baseStatic':
+            return commonColors.opacity.white['10'];
     }
 }
 

package/src/Divider/DividerProps.ts

@@ -5,7 +5,7 @@ import type { OverridableComponentProps } from '../types';
 export const dividerElementAligns = ['start', 'center', 'end'] as const;
 export type DividerElementAlign = typeof dividerElementAligns[number];
 
-export const dividerVariants = ['base', 'strong'] as const;
+export const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'] as const;
 export type DividerVariant = typeof dividerVariants[number];
 
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {

package/src/Empty/Empty.tsx

@@ -55,7 +55,7 @@ export default function Empty(props: EmptyProps) {
     });
 
     const descriptionFontStyle = createFontStyle(theme, {
-        selector: (typography) => typography.body2.regular,
+        selector: (typography) => typography.body3.regular,
         color: theme.palette.text.base,
     });
 

package/src/Flexbox/Flexbox.tsx

@@ -27,6 +27,7 @@ export default function createFlexbox(direction: 'row' | 'column') {
             flexGrow,
             flexShrink,
             flexWrap,
+            gap,
             children,
             insets,
             justifyContent,
@@ -46,6 +47,7 @@ export default function createFlexbox(direction: 'row' | 'column') {
             flexGrow,
             flexShrink,
             flexWrap,
+            gap,
             justifyContent,
             overflow,
         };

package/src/Flexbox/FlexboxProps.ts

@@ -48,6 +48,11 @@ export default interface FlexboxProps extends OverridableComponentProps<ViewProp
      */
     flexWrap?: FlexStyle['flexWrap'];
 
+    /**
+     * Defines the spacing between items in a flex container.
+     */
+    gap?: number | undefined;
+
     /**
      * Content of this component.
      */

package/src/IconButton/IconButton.tsx

@@ -36,6 +36,8 @@ function selectIconColor(theme: Theme, color: IconButtonColor) {
             return theme.palette.icon.base;
         case 'staticStrongInverse':
             return commonColors.static.strongInverse;
+        case 'staticBaseOpacityInverse':
+            return commonColors.static.baseOpacityInverse;
         case 'disabled':
             return theme.palette.status.disabled;
     }

package/src/IconButton/IconButtonProps.ts

@@ -7,6 +7,7 @@ export const iconButtonColors = [
     'strong',
     'base',
     'staticStrongInverse',
+    'staticBaseOpacityInverse',
     'disabled',
 ] as const;
 export type IconButtonColor = typeof iconButtonColors[number];

package/src/ImageCore/ImageCoreNative.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
 import { Animated } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import FastImage from '@d11/react-native-fast-image';
 import { useAnimatedValue } from '../hooks';
 import { isNotAndroid12 } from '../utils';
 import type ImageCoreProps from './ImageCoreProps';

package/src/ListItem/ListItem.tsx

@@ -1,36 +1,46 @@
 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'>;
 
 const useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {
     const theme = useTheme();
 
     return {
-        root: {
-            flexDirection: 'row',
-            paddingVertical: theme.spacing(3),
-            paddingHorizontal: theme.spacing(4),
+        content: {
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
+            gap: theme.spacing(2),
+            paddingVertical: theme.spacing(3.75),
             width: '100%',
         },
+        description: {
+            paddingRight: theme.spacing(20),
+        },
     };
 };
 
 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 +48,54 @@ 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>
-        );
-    }
-
-    return (
-        // @ts-ignore
-        <View
-            children={children}
-            style={rootStyle}
-            {...rootComponentProps}
-        />
+            ) : (
+                <View style={contentWrapperStyle}>
+                    {content}
+                </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={'strong'}
-                    variant={'body3'}
-                    style={isMultiline ? styles.multiline : undefined}
-                />
-            ) : null}
-
-            {secondary ? (
-                <Typography
-                    children={secondary}
-                    color={'strong'}
-                    variant={'body3'}
-                />
-            ) : 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

@@ -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/Pagination/Pagination.tsx

@@ -8,7 +8,7 @@ import IconButton from '../IconButton';
 import PaginationItem from '../PaginationItem';
 import NumberPagination from './NumberPagination';
 import type PaginationProps from './PaginationProps';
-import type { PaginationVariant } from './PaginationProps';
+import type { PaginationColor, PaginationVariant } from './PaginationProps';
 
 type PaginationStyleKeys =
     | 'root'
@@ -65,6 +65,7 @@ export default function Pagination(props: PaginationProps) {
     const {
         bundleSize = 1,
         children,
+        color = 'base' as PaginationColor,
         count,
         disabled = false,
         hideIndicator = false,
@@ -134,7 +135,7 @@ export default function Pagination(props: PaginationProps) {
                 currentPage={page}
                 maxPage={count}
             />
-        ) : times(i => renderItem({ index: i, disabled, selected: i === page }), count)
+        ) : times(i => renderItem({ color, index: i, disabled, selected: i === page }), count)
     ) : null;
 
     const containerProps = {

package/src/Pagination/PaginationProps.ts

@@ -2,10 +2,19 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
+export const paginationColors = ['base', 'static'] as const;
+export type PaginationColor = typeof paginationColors[number];
+
 export const paginationVariants = ['dot', 'number'] as const;
 export type PaginationVariant = typeof paginationVariants[number];
 
 export interface PaginationRenderItemParams {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * Index of the pagination item.
      */
@@ -34,6 +43,12 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      */
     children?: React.ReactNode;
 
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * The total number of pages.
      */

package/src/Pagination/index.ts

@@ -1,3 +1,3 @@
 export { default } from './Pagination';
-export type { default as PaginationProps } from './PaginationProps';
-export { paginationVariants } from './PaginationProps';
+export type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';
+export { paginationColors, paginationVariants } from './PaginationProps';