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

package/src/Accordion/useVariantStyleMap.ts

@@ -9,6 +9,7 @@ interface VariantStyle {
     container: FountainUiStyle;
     content: FountainUiStyle;
     contentFont: TextStyle;
+    iconContainer?: FountainUiStyle;
     subTitleFont?: TextStyle;
     title: FountainUiStyle;
     titleFont: TextStyle;
@@ -32,14 +33,14 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(5),
                         paddingTop: theme.spacing(4),
+                        position: 'absolute',
                     },
                     contentFont: createFontStyle(theme, {
                         selector: (typography) => typography.body3.regular,
                         color: theme.palette.text.base,
                     }),
                     subTitleFont: createFontStyle(theme, {
-                        // TODO: select typography.
-                        // selector: (typography) => typography.caption1.regular,
+                        selector: (typography) => typography.caption1.regular,
                         color: theme.palette.text.base,
                     }),
                     title: {
@@ -50,9 +51,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: 16,
+                            lineHeight: 20.8,
+                            fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
                         color: theme.palette.text.strong,
@@ -71,12 +72,15 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(4),
                         paddingTop: theme.spacing(3),
+                        position: 'absolute',
                     },
                     contentFont: createFontStyle(theme, {
-                        // TODO: select typography.
-                        // selector: typography => typography.caption2.regular,
+                        selector: (typography) => typography.caption2.regular,
                         color: theme.palette.text.base,
                     }),
+                    iconContainer: {
+                        paddingTop: 1,
+                    },
                     title: {
                         alignItems: 'center',
                         paddingBottom: theme.spacing(1),
@@ -114,9 +118,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: 16,
+                            lineHeight: 20.8,
+                            fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
                         color: theme.palette.text.strong,

package/src/AppBar/AppBar.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Paper from '../Paper';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
+import type { AppBarColor } from './AppBarProps';
 
 type AppBarStyleKeys = 'root';
 
@@ -33,27 +33,21 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
 
     const styles = useStyles();
 
-    const backgroundColor = color === 'default'
-        ? theme.palette.background.default
-        : color === 'paper'
-            ? theme.palette.paper.default
-            : color === 'primary'
-                ? theme.palette.primary.main
-                : 'transparent';
+    const backgroundColorMap: Record<AppBarColor, string> = {
+        default: theme.palette.background.default,
+        alt: theme.palette.background.alt,
+    };
 
     const paperStyle = css([
         styles.root,
-        { backgroundColor },
+        { backgroundColor: backgroundColorMap[color] },
         style,
     ]);
 
     return (
-        <Paper
+        <View
             ref={ref}
-            colorValue={backgroundColor}
-            elevation={0}
             style={paperStyle}
-            square={true}
             {...otherProps}
         />
     );

package/src/AppBar/AppBarProps.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
-export type AppBarColor = 'default' | 'paper' | 'primary' | 'transparent';
+export const appBarColors = ['default', 'alt'] as const;
+export type AppBarColor = typeof appBarColors[number];
 
 export default interface AppBarProps extends OverridableComponentProps<PaperProps, {
     /**

package/src/AppBar/index.ts

@@ -1,2 +1,3 @@
 export { default } from './AppBar';
-export type { default as AppBarProps } from './AppBarProps';
+export type { default as AppBarProps } from './AppBarProps';
+export { appBarColors } from './AppBarProps';

package/src/Badge/index.ts

@@ -1,2 +1,13 @@
-export { default } from './LegacyBadge';
-export type { default as BadgeProps } from './LegacyBadgeProps';
+export { default } from './Badge';
+export type {
+    default as BadgeProps,
+    BadgeHorizontalPosition,
+    BadgePosition,
+    BadgeVerticalPosition,
+} from './BadgeProps';
+export {
+    badgeColors,
+    badgeHorizontalPositions,
+    badgeSizes,
+    badgeVerticalPositions,
+} from './BadgeProps';

package/src/Badge/useVariantStyleMap.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
-import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
+import type { FontStyle, FountainUiStyle, Theme } from '@fountain-ui/styles';
 import { commonColors, typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
 import type { BadgeColor, BadgeSize, BadgeVariant } from './BadgeProps';
@@ -45,6 +45,21 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
             width: badgeSize,
         };
 
+        const fontStyleMap: Record<BadgeSize, FontStyle> = {
+            large: typographyOf({
+                fontSize: 14,
+                lineHeight: 14,
+                fontFamily: 'PretendardStd-Bold',
+                letterSpacing: -0.7,
+            }),
+            medium: typographyOf({
+                fontSize: 12,
+                lineHeight: 12,
+                fontFamily: 'PretendardStd-Bold',
+                letterSpacing: -0.6,
+            }),
+        };
+
         switch (variant) {
             default:
             case 'dot':
@@ -59,12 +74,7 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
                         justifyContent: 'center',
                     },
                     contentFont: createFontStyle(theme, {
-                        selector: (_) => typographyOf({
-                            fontSize: 12,
-                            lineHeight: 12,
-                            fontFamily: 'Pretendard-Bold',
-                            letterSpacing: -0.6,
-                        }),
+                        selector: (_) => fontStyleMap[size],
                         color: commonColors.opacity.white['100'],
                     }),
                 };

package/src/BottomSheetActions/BottomSheetActions.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type BottomSheetActionsProps from './BottomSheetActionsProps';
+
+type BottomSheetActionsStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<BottomSheetActionsStyles> = function (): BottomSheetActionsStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            marginTop: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+    };
+};
+
+export default function BottomSheetActions(props: BottomSheetActionsProps) {
+    const {
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <View
+            style={rootStyle}
+            {...otherProps}
+        >
+            {children}
+        </View>
+    );
+}

package/src/BottomSheetActions/BottomSheetActionsProps.ts

@@ -0,0 +1,4 @@
+import { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface BottomSheetActionsProps extends OverridableComponentProps<ViewProps, {}> {}

package/src/BottomSheetActions/index.ts

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

package/src/BottomSheetContent/BottomSheetContent.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type BottomSheetContentProps from './BottomSheetContentProps';
+
+type BottomSheetContentStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<BottomSheetContentStyles> = function (): BottomSheetContentStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            flexGrow: 1,
+            flexShrink: 1,
+            paddingBottom: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+    };
+};
+
+export default function BottomSheetContent(props: BottomSheetContentProps) {
+    const {
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <ScrollView
+            bounces={false}
+            style={rootStyle}
+            {...otherProps}
+        >
+            {children}
+        </ScrollView>
+    );
+}

package/src/BottomSheetContent/BottomSheetContentProps.ts

@@ -0,0 +1,4 @@
+import type { ScrollViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface BottomSheetContentProps extends OverridableComponentProps<ScrollViewProps, {}> {}

package/src/BottomSheetContent/index.ts

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

package/src/BottomSheetTitle/BottomSheetTitle.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Button from '../Button/Button';
+import Row from '../Row';
+import { createFontStyle, css, useTheme } from '../styles';
+import type BottomSheetTitleProps from './BottomSheetTitleProps';
+
+type BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;
+
+const useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            alignItems: 'center',
+            gap: theme.spacing(8),
+            justifyContent: 'space-between',
+            marginBottom: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+        title: {
+            paddingBottom: theme.spacing(1.25),
+            paddingTop: theme.spacing(1),
+        },
+        actionButton: {
+            paddingBottom: theme.spacing(1.75),
+            paddingHorizontal: 0,
+            paddingTop: theme.spacing(1.25),
+        },
+    };
+};
+
+export default function BottomSheetTitle(props: BottomSheetTitleProps) {
+    const {
+        actionButtonProps,
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    const titleFontStyle = createFontStyle(theme, {
+        selector: (typography) => typography.header3.semiBold,
+        color: theme.palette.text.strong,
+    });
+
+    const titleStyle = css([
+        styles.title,
+        titleFontStyle,
+    ]);
+
+    return (
+        <Row
+            style={rootStyle}
+            {...otherProps}
+        >
+            <Text
+                children={children}
+                style={titleStyle}
+            />
+
+            {actionButtonProps ? (
+                <Button
+                    children={actionButtonProps.title}
+                    color={'accent'}
+                    disableMinWidth={true}
+                    onPress={actionButtonProps.onPress}
+                    size={'large'}
+                    style={styles.actionButton}
+                    variant={'text'}
+                />
+            ) : null}
+        </Row>
+    );
+}

package/src/BottomSheetTitle/BottomSheetTitleProps.ts

@@ -0,0 +1,12 @@
+import type { OverridableComponentProps } from '../types';
+import type { RowProps } from '../Row';
+
+type ActionButtonProps = {
+    title: string;
+    onPress: () => void;
+};
+
+export default interface BottomSheetTitleProps extends OverridableComponentProps<RowProps, {
+    children: string;
+    actionButtonProps?: ActionButtonProps;
+}> {}

package/src/BottomSheetTitle/index.ts

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

package/src/Button/Button.tsx

@@ -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,
@@ -110,10 +115,20 @@ export default function Button(props: ButtonProps) {
 
     const iconProps = {
         fill: iconColor,
+        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,
@@ -121,13 +136,10 @@ export default function Button(props: ButtonProps) {
         styles[size],
         fullWidth ? styles.fullWidth : undefined,
         disableMinWidth ? { minWidth: 0 } : undefined,
+        disablePadding ? { paddingHorizontal: 0, paddingVertical: 0 } : undefined,
         styleProp,
     ]);
 
-    const contentStyle = css({
-        opacity: isLoading ? 0 : 1,
-    });
-
     const fontStyle = createFontStyle(theme, {
         selector: (_) => fontStyleMap[size],
         color: labelColor,
@@ -135,7 +147,10 @@ export default function Button(props: ButtonProps) {
 
     const textStyle = css([
         fontStyle,
-        { textAlign: 'center' },
+        {
+            opacity: isLoading ? 0 : 1,
+            textAlign: 'center',
+        },
     ]);
 
     const modifiedPressEffect = variant !== 'text' && !pressEffect
@@ -167,15 +182,13 @@ export default function Button(props: ButtonProps) {
             pressEffect={modifiedPressEffect}
             {...otherProps}
         >
-            <View style={contentStyle}>
-                {startIcon}
+            {startIcon}
 
-                <Text style={textStyle}>
-                    {children}
-                </Text>
+            <Text style={textStyle}>
+                {children}
+            </Text>
 
-                {endIcon}
-            </View>
+            {endIcon}
 
             {isLoading ? (
                 <LoadingSpinner

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 './LegacyButton';
-export type { default as ButtonProps } from './LegacyButtonProps';
+export { default } from './Button';
+export type { default as ButtonProps } from './ButtonProps';
+export { buttonColors, buttonSizes, buttonVariants } from './ButtonProps';

package/src/Button/useVariantStyleMap.ts

@@ -96,6 +96,10 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
                     labelColor: palette.text.accentAlt,
                     iconColor: palette.icon.accentAlt,
                 },
+                danger: {
+                    labelColor: palette.status.danger,
+                    iconColor: palette.status.danger,
+                },
                 disabled: {
                     labelColor: palette.status.disabledLabel,
                     iconColor: palette.status.disabledLabel,
@@ -165,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,15 +51,16 @@ export default function Checkbox(props: CheckboxProps) {
             style={rootStyle}
             {...otherProps}
         >
-            <View style={checkboxStyle}>
-                {checked ? (
-                    <CheckboxOnIcon
-                        fill={iconColor}
-                        enableV2={true}
-                        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 './LegacyCheckbox';
-export type { default as CheckboxProps } from './LegacyCheckboxProps';
+export { default } from './Checkbox';
+export type { default as CheckboxProps } from './CheckboxProps';
+export { checkboxVariants } from './CheckboxProps';