@fountain-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.10

package/src/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Linking, Text } from 'react-native';
+import { Linking, Text, View } from 'react-native';
 import type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase/ButtonBase';
@@ -10,7 +10,7 @@ import type ButtonProps from './ButtonProps';
 import type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonProps';
 import useVariantStyleMap from './useVariantStyleMap';
 
-type ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small' | 'loadingSpinner'>;
+type ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small' | 'loadingSpinner' | 'iconContainer'>;
 
 const useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {
     const theme = useTheme();
@@ -21,6 +21,7 @@ const useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {
             borderRadius: theme.shape.radius.sm,
             flexDirection: 'row',
             justifyContent: 'center',
+            minHeight: 32,
         },
         fullWidth: {
             width: '100%',
@@ -45,6 +46,9 @@ const useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {
         loadingSpinner: {
             position: 'absolute',
         },
+        iconContainer: {
+            paddingTop: 1,
+        },
     };
 };
 
@@ -82,6 +86,7 @@ export default function Button(props: ButtonProps) {
         color: colorProp = 'primary' as ButtonColor,
         disabled: disabledProp = false,
         disableMinWidth = false,
+        disablePadding = false,
         endIcon: endIconProp,
         fullWidth = false,
         href,
@@ -113,8 +118,17 @@ export default function Button(props: ButtonProps) {
         opacity: isLoading ? 0 : 1,
     };
 
-    const startIcon = cloneElementSafely(startIconProp, iconProps);
-    const endIcon = cloneElementSafely(endIconProp, iconProps);
+    const startIcon = startIconProp ? (
+        <View style={styles.iconContainer}>
+            {cloneElementSafely(startIconProp, iconProps)}
+        </View>
+    ) : null;
+
+    const endIcon = endIconProp ? (
+        <View style={styles.iconContainer}>
+            {cloneElementSafely(endIconProp, iconProps)}
+        </View>
+    ) : null;
 
     const buttonBaseStyle = css([
         styles.root,
@@ -122,6 +136,7 @@ export default function Button(props: ButtonProps) {
         styles[size],
         fullWidth ? styles.fullWidth : undefined,
         disableMinWidth ? { minWidth: 0 } : undefined,
+        disablePadding ? { paddingHorizontal: 0, paddingVertical: 0 } : undefined,
         styleProp,
     ]);
 

package/src/Button/ButtonProps.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ButtonBaseProps } from '../ButtonBase';
 import type { OverridableComponentProps } from '../types';
 
-export const ButtonColors = [
+export const buttonColors = [
     'accent',
     'primary',
     'danger',
@@ -10,23 +10,23 @@ export const ButtonColors = [
     'secondary',
     'accentAlt',
 ] as const;
-export type ButtonColor = typeof ButtonColors[number];
+export type ButtonColor = typeof buttonColors[number];
 
-export const ButtonSizes = [
+export const buttonSizes = [
     'small',
     'medium',
     'large',
 ] as const;
-export type ButtonSize = typeof ButtonSizes[number];
+export type ButtonSize = typeof buttonSizes[number];
 
-export const ButtonVariants = [
+export const buttonVariants = [
     'solid',
     'outlined',
     'text',
     'capsuleSolid',
     'capsuleOutlined',
 ] as const;
-export type ButtonVariant = typeof ButtonVariants[number];
+export type ButtonVariant = typeof buttonVariants[number];
 
 export default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
@@ -46,6 +46,12 @@ export default interface ButtonProps extends OverridableComponentProps<ButtonBas
      */
     disableMinWidth?: boolean;
 
+    /**
+     * Determines whether padding should be applied.
+     * @default false
+     */
+    disablePadding?: boolean;
+
     /**
      * Element placed after the children.
      */

package/src/Button/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Button';
 export type { default as ButtonProps } from './ButtonProps';
+export { buttonColors, buttonSizes, buttonVariants } from './ButtonProps';

package/src/Button/useVariantStyleMap.ts

@@ -59,9 +59,7 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
                         borderColor: palette.border.accent,
                         borderWidth: 1,
                     },
-                    labelColor: '#0BCC99',
-                    // TODO: change color.
-                    // labelColor: palette.text.accent,
+                    labelColor: palette.text.accent,
                     iconColor: palette.icon.accent,
                 },
                 primary: {
@@ -91,9 +89,7 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
                     iconColor: palette.icon.base,
                 },
                 accent: {
-                    labelColor: '#0BCC99',
-                    // TODO: change color.
-                    // labelColor: palette.text.accent,
+                    labelColor: palette.text.accent,
                     iconColor: palette.icon.accent,
                 },
                 accentAlt: {
@@ -173,7 +169,7 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
             },
         };
 
-        if (variantStyleMap[variant][color]) {
+        if (variantStyleMap[variant]?.[color]) {
             return variantStyleMap[variant][color] as UseVariantStyleMapReturns;
         }
 

package/src/Checkbox/Checkbox.tsx

@@ -22,6 +22,7 @@ export default function Checkbox(props: CheckboxProps) {
     const theme = useTheme();
 
     const {
+        checkboxContainerStyle,
         checkboxStyle,
         containerStyle,
         iconColor,
@@ -33,7 +34,7 @@ export default function Checkbox(props: CheckboxProps) {
     ]);
 
     const fontStyle = createFontStyle(theme, {
-        // TODO: apply typo select.
+        selector: (typography) => typography.body2.regular,
         color: theme.palette.text.strong,
     });
 
@@ -50,14 +51,16 @@ export default function Checkbox(props: CheckboxProps) {
             style={rootStyle}
             {...otherProps}
         >
-            <View style={checkboxStyle}>
-                {checked ? (
-                    <CheckboxOnIcon
-                        fill={iconColor}
-                        height={7.5}
-                        width={11}
-                    />
-                ) : null}
+            <View style={checkboxContainerStyle}>
+                <View style={checkboxStyle}>
+                    {checked ? (
+                        <CheckboxOnIcon
+                            fill={iconColor}
+                            height={7.5}
+                            width={11}
+                        />
+                    ) : null}
+                </View>
             </View>
 
             {children ? (

package/src/Checkbox/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Checkbox';
 export type { default as CheckboxProps } from './CheckboxProps';
+export { checkboxVariants } from './CheckboxProps';

package/src/Checkbox/useVariantStyleMap.ts

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
 });
 
 type useVariantStyleMapReturns = {
+    checkboxContainerStyle?: FountainUiStyle;
     checkboxStyle?: FountainUiStyle;
     containerStyle?: FountainUiStyle;
     iconColor?: string;
@@ -23,6 +24,10 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
     switch (variant) {
         case 'square':
             return {
+                checkboxContainerStyle: {
+                    alignSelf: 'flex-start',
+                    paddingTop: 3,
+                },
                 checkboxStyle: css([
                     styles.checkbox,
                     {
@@ -37,9 +42,9 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
                     },
                 ]),
                 containerStyle: {
-                    alignItems: 'center',
                     flexDirection: 'row',
                     gap: theme.spacing(3),
+                    paddingVertical: theme.spacing(2),
                 },
                 iconColor: theme.palette.fill.baseAlt,
             };

package/src/Chip/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Chip';
 export type { default as ChipProps } from './ChipProps';
+export { chipSizes, chipStartElementVariants } from './ChipProps';

package/src/Chip/useChipStyle.ts

@@ -3,7 +3,6 @@ import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
 import type { ChipSize, ChipStartElementVariant } from './ChipProps';
-import { typographyOf } from '@fountain-ui/styles';
 
 interface ChipStyle {
     container: FountainUiStyle;
@@ -25,25 +24,11 @@ export default function useChipStyle(
     return useMemo<ChipStyle>(() => {
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
-                // TODO: select typography.
-                // selector: (typography) => typography.caption1.medium,
-                selector: (_) => typographyOf({
-                    fontSize: 12,
-                    lineHeight: 16.8,
-                    fontFamily: 'Pretendard-Medium',
-                    letterSpacing: 0,
-                }),
+                selector: (typography) => typography.caption1.medium,
                 color: theme.palette.text.strong,
             }),
             large: createFontStyle(theme, {
-                // TODO: select typography.
-                // selector: (typography) => typography.body2.medium,
-                selector: (_) => typographyOf({
-                    fontSize: 14,
-                    lineHeight: 21,
-                    fontFamily: 'Pretendard-Medium',
-                    letterSpacing: 0,
-                }),
+                selector: (typography) => typography.body2.medium,
                 color: theme.palette.text.strong,
             }),
         };

package/src/Dialog/index.ts

@@ -1,4 +1,5 @@
 export { default } from './Dialog';
 export type { default as DialogProps } from './DialogProps';
+export { dialogSizes } from './DialogProps';
 export { DialogProvider, useDialogContext } from './DialogContext';
 export { default as useDialogSectionStyle } from './useDialogSectionStyle';

package/src/DialogContent/DialogContent.tsx

@@ -40,8 +40,7 @@ export default function DialogContent(props: DialogContentProps) {
     ]);
 
     const contentFontStyle = createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) => typography.body2.regular,
+        selector: (typography) => typography.body2.regular,
         color: theme.palette.text.base,
     });
 

package/src/Divider/Divider.tsx

@@ -96,7 +96,7 @@ export default function Divider(props: DividerProps) {
     };
 
     const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption2,
+        selector: (typo) => typo.caption2.medium,
         color: fontColor,
     });
 

package/src/Divider/DividerProps.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
-export const elementAligns = ['start', 'center', 'end'] as const;
-export type ElementAlign = typeof elementAligns[number];
+export const dividerElementAligns = ['start', 'center', 'end'] as const;
+export type DividerElementAlign = typeof dividerElementAligns[number];
 
 export const dividerVariants = ['base', 'strong'] as const;
 export type DividerVariant = typeof dividerVariants[number];
@@ -42,7 +42,7 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      *  Set position of children.
      *  @default center
      */
-    elementAlign?: ElementAlign;
+    elementAlign?: DividerElementAlign;
 
     /**
      * Select the style of the divider based on this value.

package/src/Divider/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Divider';
 export type { default as DividerProps } from './DividerProps';
+export { dividerVariants, dividerElementAligns } from './DividerProps';

package/src/Empty/Empty.tsx

@@ -55,8 +55,7 @@ export default function Empty(props: EmptyProps) {
     });
 
     const descriptionFontStyle = createFontStyle(theme, {
-        // TODO: select typography.
-        // 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/index.ts

@@ -1,2 +1,3 @@
 export { default } from './IconButton';
 export type { default as IconButtonProps } from './IconButtonProps';
+export { iconButtonColors } from './IconButtonProps';

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={'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>