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

package/src/Badge/BadgeProps.ts

@@ -39,6 +39,12 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      */
     content?: number;
 
+    /**
+     * The horizontal offset of the badge.
+     * @default 0
+     */
+    horizontalOffset?: number;
+
     /**
      * If `true`, the badge is invisible.
      * @default false
@@ -54,12 +60,6 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      */
     position?: BadgePosition;
 
-    /**
-     * The offset of the badge.
-     * @default 0
-     */
-    offset?: number;
-
     /**
      *
      */
@@ -70,4 +70,10 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * @default 'dot'
      */
     variant?: BadgeVariant;
+
+    /**
+     * The vertical offset of the badge.
+     * @default 0
+     */
+    verticalOffset?: number;
 }> {}

package/src/Badge/useVariantStyleMap.ts

@@ -49,13 +49,13 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
             large: typographyOf({
                 fontSize: 14,
                 lineHeight: 14,
-                fontFamily: 'Pretendard-Bold',
+                fontFamily: 'PretendardStd-Bold',
                 letterSpacing: -0.7,
             }),
             medium: typographyOf({
                 fontSize: 12,
                 lineHeight: 12,
-                fontFamily: 'Pretendard-Bold',
+                fontFamily: 'PretendardStd-Bold',
                 letterSpacing: -0.6,
             }),
         };

package/src/BottomSheetTitle/BottomSheetTitle.tsx

@@ -13,7 +13,7 @@ const useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTit
 
     return {
         root: {
-            alignItems: 'center',
+            alignItems: 'flex-start',
             gap: theme.spacing(8),
             justifyContent: 'space-between',
             marginBottom: theme.spacing(4),
@@ -22,6 +22,7 @@ const useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTit
         title: {
             paddingBottom: theme.spacing(1.25),
             paddingTop: theme.spacing(1),
+            minWidth: 0,
         },
         actionButton: {
             paddingBottom: theme.spacing(1.75),
@@ -72,8 +73,10 @@ export default function BottomSheetTitle(props: BottomSheetTitleProps) {
                 <Button
                     children={actionButtonProps.title}
                     color={'accent'}
+                    disabled={actionButtonProps.disabled ?? false}
                     disableMinWidth={true}
                     onPress={actionButtonProps.onPress}
+                    size={'large'}
                     style={styles.actionButton}
                     variant={'text'}
                 />

package/src/BottomSheetTitle/BottomSheetTitleProps.ts

@@ -2,6 +2,7 @@ import type { OverridableComponentProps } from '../types';
 import type { RowProps } from '../Row';
 
 type ActionButtonProps = {
+    disabled?: boolean | undefined;
     title: string;
     onPress: () => void;
 };

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,30 +21,34 @@ const useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {
             borderRadius: theme.shape.radius.sm,
             flexDirection: 'row',
             justifyContent: 'center',
+            minHeight: 32,
         },
         fullWidth: {
             width: '100%',
         },
         large: {
-            gap: theme.spacing(2),
+            gap: 8,
             minWidth: 104,
-            paddingHorizontal: theme.spacing(6),
-            paddingVertical: theme.spacing(3.5),
+            paddingHorizontal: 24,
+            paddingVertical: 14,
         },
         medium: {
-            gap: theme.spacing(1.5),
+            gap: 6,
             minWidth: 88,
-            paddingHorizontal: theme.spacing(6),
-            paddingVertical: theme.spacing(2.75),
+            paddingHorizontal: 16,
+            paddingVertical: 11,
         },
         small: {
             minWidth: 64,
-            paddingHorizontal: theme.spacing(6),
-            paddingVertical: theme.spacing(2),
+            paddingHorizontal: 10,
+            paddingVertical: 8,
         },
         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,15 +118,26 @@ 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,
         containerStyle,
         styles[size],
+        (variant === 'capsuleSolid' || variant === 'capsuleOutlined') && size === 'small' ? { paddingHorizontal: 12 } : undefined,
         fullWidth ? styles.fullWidth : undefined,
         disableMinWidth ? { minWidth: 0 } : undefined,
+        disablePadding ? { paddingHorizontal: 0, paddingVertical: 0 } : undefined,
         styleProp,
     ]);
 

package/src/Button/ButtonProps.ts

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

@@ -13,7 +13,7 @@ export const ORIGINAL_OPACITY = 1;
 const ACTIVE_OPACITY = .65;
 
 const ORIGINAL_SCALE = 1;
-const MINIFIED_SCALE = .96;
+const MINIFIED_SCALE = .98;
 
 // at "node_modules/react-native/Libraries/Pressability.js"
 // const DEFAULT_MIN_PRESS_DURATION = 130;

package/src/ButtonBase/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyButtonBase';
+export { default } from './ButtonBase';
 export type { default as ButtonBaseProps } from './ButtonBaseProps';

package/src/Checkbox/Checkbox.tsx

@@ -22,6 +22,7 @@ export default function Checkbox(props: CheckboxProps) {
     const theme = useTheme();
 
     const {
+        checkboxContainerStyle,
         checkboxStyle,
         containerStyle,
         iconColor,
@@ -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/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/Chip.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+import ButtonBase from '../ButtonBase';
+import { ChipClose } from '../internal';
 import { css } from '../styles';
 import { cloneElementSafely } from '../utils';
-import ButtonBase from '../ButtonBase/ButtonBase';
 import type ChipProps from './ChipProps';
-import type { ChipSize } from './ChipProps';
+import type { ChipColor, ChipSize } from './ChipProps';
 import useChipStyle from './useChipStyle';
 
 export default function Chip(props: ChipProps) {
     const {
         children,
-        endElement: endElementProp,
+        color = 'default' as ChipColor,
         numberOfLines,
         onPress,
+        selected = false,
         size = 'small' as ChipSize,
         startElement: startElementProp,
         startElementVariant = 'default',
@@ -22,26 +24,27 @@ export default function Chip(props: ChipProps) {
 
     const {
         container: containerStyle,
-        endElement: endElementStyle,
+        closeButtonContainer: closeButtonContainerStyle,
+        closeIconSize,
         label: labelStyle,
         startElement: startElementStyle,
-    } = useChipStyle(size, startElementVariant, !!endElementProp);
+        startElementContainer: startElementContainerStyle,
+    } = useChipStyle(size, startElementVariant, color, selected);
 
     const chipStyle = css([
         containerStyle,
         styleProp,
     ]);
 
-    const startElement = startElementVariant === 'icon'
-        ? (
-            <View style={startElementStyle}>
-                {cloneElementSafely(startElementProp)}
-            </View>
-        ) : cloneElementSafely(startElementProp, { style: startElementStyle });
-    const endElement = cloneElementSafely(endElementProp, { style: endElementStyle });
+    const startElement = (
+        <View style={startElementContainerStyle}>
+            {cloneElementSafely(startElementProp, { style: startElementStyle })}
+        </View>
+    );
 
     return (
         <ButtonBase
+            disabled={!onPress}
             onPress={onPress}
             style={chipStyle}
             {...otherProps}
@@ -54,7 +57,15 @@ export default function Chip(props: ChipProps) {
                 style={labelStyle}
             />
 
-            {endElement}
+            {selected ? (
+                <View style={closeButtonContainerStyle}>
+                    <ChipClose
+                        color={'baseInverse'}
+                        height={closeIconSize?.height}
+                        width={closeIconSize?.width}
+                    />
+                </View>
+            ) : null}
         </ButtonBase>
     );
 }

package/src/Chip/ChipProps.ts

@@ -2,6 +2,9 @@ import React from 'react';
 import { OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
 
+export const chipColors = ['default', 'white'] as const;
+export type ChipColor = typeof chipColors[number];
+
 export const chipSizes = ['large', 'small'] as const;
 export type ChipSize = typeof chipSizes[number];
 
@@ -10,20 +13,26 @@ export type ChipStartElementVariant = typeof chipStartElementVariants[number];
 
 export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
-     * Element placed after the children.
+     * The content of the component.
      */
-    endElement?: React.ReactElement;
+    children: string;
 
     /**
-     * The content of the component.
+     * Set backgroundColor of the component.
+     * @default 'default'
      */
-    children: string;
+    color?: ChipColor;
 
     /**
      * Number of lines of children.
      */
     numberOfLines?: number;
 
+    /**
+     * If `true`, showing a close icon and applying a highlighted style.
+     */
+    selected?: boolean;
+
     /**
      * Determines size of component.
      * @default 'small'

package/src/Chip/index.ts

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

package/src/Chip/useChipStyle.ts

@@ -1,23 +1,49 @@
 import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
+import type { SvgIconProps } from '../SvgIcon';
 import { createFontStyle, useTheme } from '../styles';
-import type { ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
-    endElement?: FountainUiStyle;
+    closeButtonContainer?: FountainUiStyle;
+    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;
     label: TextStyle;
     startElement?: FountainUiStyle;
+    startElementContainer?: FountainUiStyle;
 }
 
 type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
 
+const closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {
+    small: {
+        marginLeft: 8,
+        paddingTop: 1,
+    },
+    large: {
+        marginLeft: 10,
+        paddingTop: 1,
+    },
+};
+
+const closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {
+    small: {
+        height: 14,
+        width: 8.17,
+    },
+    large: {
+        height: 16,
+        width: 9,
+    },
+};
+
 // TODO: need to refactoring...
 export default function useChipStyle(
     size: ChipSize,
     startElementVariant: ChipStartElementVariant,
-    isEndElement: boolean,
+    color: ChipColor,
+    selected: boolean,
 ): ChipStyle {
     const theme = useTheme();
 
@@ -25,30 +51,20 @@ export default function useChipStyle(
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
                 selector: (typography) => typography.caption1.medium,
-                color: theme.palette.text.strong,
+                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
             }),
             large: createFontStyle(theme, {
                 selector: (typography) => typography.body2.medium,
-                color: theme.palette.text.strong,
+                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
             }),
         };
 
-        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {
-            small: {
-                height: 14,
-                marginLeft: theme.spacing(2),
-                width: 8.17,
-            },
-            large: {
-                height: 16,
-                marginLeft: theme.spacing(2.5),
-                width: 9,
-            },
-        };
-
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
-            backgroundColor: theme.palette.fill.weaker,
+            backgroundColor: selected ? theme.palette.fill.base
+                : color === 'white'
+                    ? theme.palette.surface.base
+                    : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
             overflow: 'hidden',
@@ -65,9 +81,11 @@ export default function useChipStyle(
                 },
                 startElement: {
                     borderRadius: theme.shape.radius.full,
-                    height: isLarge ? 24 : 22,
+                    height: isLarge ? 26 : 23,
+                    width: isLarge ? 26 : 23,
+                },
+                startElementContainer: {
                     marginRight: theme.spacing(isLarge ? 1.5 : 1.25),
-                    width: isLarge ? 24 : 22,
                 },
             },
             icon: {
@@ -77,11 +95,18 @@ export default function useChipStyle(
                     paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),
                 },
                 startElement: {
+                    color: selected
+                        ? theme.palette.icon.strongInverse
+                        : theme.palette.icon.strong,
+                    height: isLarge ? 17 : 16,
+                    width: isLarge ? 17 : 16,
+                },
+                startElementContainer: {
                     alignItems: 'center',
-                    height: isLarge ? 22 : 20,
+                    height: isLarge ? 24 : 21,
                     justifyContent: 'center',
                     marginRight: theme.spacing(isLarge ? 1 : 0.75),
-                    width: isLarge ? 22 : 20,
+                    width: isLarge ? 24 : 21,
                 },
             },
             image: {
@@ -91,15 +116,18 @@ export default function useChipStyle(
                 },
                 startElement: {
                     borderRadius: theme.shape.radius.full,
-                    height: isLarge ? 34 : 30,
+                    height: isLarge ? 36 : 31,
+                    width: isLarge ? 48 : 40,
+                },
+                startElementContainer: {
                     marginRight: theme.spacing(1.5),
-                    width: isLarge ? 45 : 40,
                 },
             },
             default: {
                 container: {
                     paddingBottom: theme.spacing(1.75),
-                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
                     paddingTop: theme.spacing(1.5),
                 },
             },
@@ -109,11 +137,13 @@ export default function useChipStyle(
             container: {
                 ...baseContainerStyle,
                 ...variantStyleMap[startElementVariant]?.container,
-                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
+                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
             },
-            endElement: endElementStyleMap[size],
+            closeButtonContainer: closeButtonContainerStyleMap[size],
+            closeIconSize: closeIconSize[size],
             label: fontStyleMap[size],
             startElement: variantStyleMap[startElementVariant]?.startElement,
+            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,
         };
-    }, [theme, size, startElementVariant]);
+    }, [theme, size, startElementVariant, color, selected]);
 }

package/src/Dialog/Dialog.tsx

@@ -8,13 +8,12 @@ import type DialogProps from './DialogProps';
 import { DialogProvider } from './DialogContext';
 import useDialogStyle from './useDialogStyle';
 
-const TOP_ELEMENT_OFFSET = 20;
+const TOP_ELEMENT_HIDDEN_OFFSET = 16;
 
 export default function Dialog(props: DialogProps) {
     const {
         animationType = ANIMATION_TYPE.SLIDE,
         children,
-        fullScreen = false,
         hideBackdrop,
         onClose,
         style: styleProp,
@@ -24,7 +23,7 @@ export default function Dialog(props: DialogProps) {
         ...otherProps
     } = props;
 
-    const styles = useDialogStyle(size, fullScreen);
+    const styles = useDialogStyle(size);
 
     const { height: screenHeight } = useWindowDimensions();
 
@@ -39,8 +38,10 @@ export default function Dialog(props: DialogProps) {
             return [];
         }
 
+        const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);
+
         return [{
-            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+            toValue: (topElementHeightWithoutOffset) / 2,
             type: ANIMATION_TYPE.SLIDE,
         }];
     }, [topElementHeight]);
@@ -51,7 +52,7 @@ export default function Dialog(props: DialogProps) {
                 toValue: 0,
                 type: ANIMATION_TYPE.FADE,
             }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+        } else if (animationType === ANIMATION_TYPE.SLIDE) {
             return [
                 {
                     toValue: screenHeight,
@@ -70,7 +71,7 @@ export default function Dialog(props: DialogProps) {
             toValue: screenHeight,
             type: ANIMATION_TYPE.SLIDE,
         }];
-    }, [animationType, fullScreen, screenHeight]);
+    }, [animationType, screenHeight]);
 
     const openAnimation = useMemo<AnimationUnit[]>(() => {
         if (animationType === ANIMATION_TYPE.FADE) {
@@ -78,7 +79,7 @@ export default function Dialog(props: DialogProps) {
                 toValue: 1,
                 type: ANIMATION_TYPE.FADE,
             }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+        } else if (animationType === ANIMATION_TYPE.SLIDE) {
             return [
                 {
                     toValue: 0,
@@ -97,9 +98,9 @@ export default function Dialog(props: DialogProps) {
             toValue: 0,
             type: ANIMATION_TYPE.SLIDE,
         }];
-    }, [animationType, fullScreen]);
+    }, [animationType]);
 
-    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;
 
     const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
 
@@ -124,7 +125,7 @@ export default function Dialog(props: DialogProps) {
         >
             <DialogProvider value={{ size }}>
                 {topElement ? (
-                    <Column style={fullScreen ? undefined : styles.topElementContainer}>
+                    <Column style={styles.topElementContainer}>
                         <Column
                             style={styles.topElementContent}
                             onLayout={handleTopElementLayout}
@@ -143,4 +144,4 @@ export default function Dialog(props: DialogProps) {
             </DialogProvider>
         </Modal>
     );
-};
+}

package/src/Dialog/DialogProps.ts

@@ -3,7 +3,7 @@ import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
 import { ANIMATION_TYPE } from '../Modal';
 
-export const dialogSizes = ['small', 'medium', 'large'] as const;
+export const dialogSizes = ['small', 'medium', 'large', 'full'] as const;
 export type DialogSize = typeof dialogSizes[number];
 
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
@@ -18,12 +18,6 @@ export default interface DialogProps extends OverridableComponentProps<ModalProp
      */
     children?: React.ReactNode;
 
-    /**
-     * If `true`, the dialog is full-screen.
-     * @default false
-     */
-    fullScreen?: boolean;
-
     /**
      * Determines the minWidth of the Dialog.
      * @default 'medium'