@fountain-ui/core 3.0.0-alpha.3 → 3.0.0-alpha.31

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,
     });
 
@@ -61,7 +61,12 @@ export default function NumberPagination(props: NumberPaginationProps) {
 
     return (
         <Row style={styles.root}>
-            <Text style={currentFontStyle}>
+            <Text
+                style={[
+                    currentFontStyle,
+                    { fontVariant: ['tabular-nums'] },
+                ]}
+            >
                 {currentPage + 1}
             </Text>
 

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';

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,
                     },
                 ])}