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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.31",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,15 +14,15 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^3.0.0-alpha.2",
+    "@fountain-ui/styles": "^3.0.0-alpha.13",
     "@fountain-ui/utils": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
+    "@d11/react-native-fast-image": "^8.11.1",
     "@react-native-community/slider": "^4.1.6",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
-    "react-native-fast-image": "8.6.3",
     "react-native-reanimated": "^2.0.0",
     "react-native-safe-area-context": "^4.0.0",
     "react-native-svg": "^13.14.0"
@@ -37,7 +37,7 @@
     "react-native": {
       "optional": true
     },
-    "react-native-fast-image": {
+    "@d11/react-native-fast-image": {
       "optional": true
     }
   },
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f9e5b1c4b523be0923313ceb21d1a7190b57b690"
+  "gitHead": "d8e076043e1f5a646daf7a0ad876be03f818f08c"
 }

package/src/Accordion/Accordion.tsx

@@ -48,7 +48,9 @@ export default function Accordion(props: AccordionProps) {
         RightIcon,
         LeftComponent,
         isInitialExpanded = false,
+        style: styleProp,
         variant = 'solid' as AccordionVariant,
+        ...otherProps
     } = props;
 
     const styles = useStyles();
@@ -62,6 +64,7 @@ export default function Accordion(props: AccordionProps) {
         container: containerStyle,
         content: contentStyle,
         contentFont: contentFontStyle,
+        iconContainer: iconContainerStyle,
         subTitleFont: subTitleFontStyle,
         title: titleStyle,
         titleFont: titleFontStyle,
@@ -113,17 +116,23 @@ export default function Accordion(props: AccordionProps) {
     const rootStyle = css([
         styles.root,
         containerStyle,
+        styleProp,
     ]);
 
     return (
-        <Column style={rootStyle}>
+        <Column
+            style={rootStyle}
+            {...otherProps}
+        >
             <ButtonBase onPress={onPress}>
                 <Row style={titleStyle}>
                     <Column flexShrink={1}>
                         <Row alignItems={'center'}>
                             {LeftComponent ? (
                                 <React.Fragment>
-                                    {LeftComponent}
+                                    <View style={iconContainerStyle}>
+                                        {LeftComponent}
+                                    </View>
 
                                     <Spacer size={1.5}/>
                                 </React.Fragment>
@@ -137,20 +146,20 @@ export default function Accordion(props: AccordionProps) {
                             />
                         </Row>
 
-                        {subTitle && variant === 'solid' ?
-                            typeof subTitle === 'string' ? (
-                                <React.Fragment>
-                                    <Spacer size={1.5}/>
+                        {subTitle && variant === 'solid' ? (
+                            <React.Fragment>
+                                <Spacer size={1.5}/>
 
+                                {typeof subTitle === 'string' ? (
                                     <Text
                                         allowFontScaling={false}
                                         children={subTitle}
                                         numberOfLines={1}
                                         style={subTitleFontStyle}
                                     />
-                                </React.Fragment>
-                            ) : (subTitle)
-                            : null}
+                                ) : (subTitle)}
+                            </React.Fragment>
+                        ) : null}
                     </Column>
 
                     <Spacer flex={1}/>

package/src/Accordion/AccordionProps.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { ColumnProps } from '../Column';
+import type { OverridableComponentProps } from '../types';
 
 export const accordionVariants = ['solid', 'line', 'underline'] as const;
 export type AccordionVariant = typeof accordionVariants[number];
 
-export default interface AccordionProps {
+export default interface AccordionProps extends OverridableComponentProps<Omit<ColumnProps, 'children'>, {
     /**
      * The title of the component.
      */
@@ -40,4 +42,4 @@ export default interface AccordionProps {
      * @default 'solid'
      */
     variant: AccordionVariant;
-}
+}> {}

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;
@@ -29,10 +30,12 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     content: {
                         borderTopColor: theme.palette.border.weak,
                         borderTopWidth: 0.5,
+                        left: 0,
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(5),
                         paddingTop: theme.spacing(4),
                         position: 'absolute',
+                        right: 0,
                     },
                     contentFont: createFontStyle(theme, {
                         selector: (typography) => typography.body3.regular,
@@ -50,9 +53,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,
@@ -68,15 +71,20 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     content: {
                         borderTopColor: theme.palette.border.weak,
                         borderTopWidth: 0.5,
+                        left: 0,
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(4),
                         paddingTop: theme.spacing(3),
                         position: 'absolute',
+                        right: 0,
                     },
                     contentFont: createFontStyle(theme, {
                         selector: (typography) => typography.caption2.regular,
                         color: theme.palette.text.base,
                     }),
+                    iconContainer: {
+                        paddingTop: 1,
+                    },
                     title: {
                         alignItems: 'center',
                         paddingBottom: theme.spacing(1),
@@ -114,9 +122,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,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 import type { AppBarColor } from './AppBarProps';
@@ -31,16 +32,19 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
 
     const theme = useTheme();
 
+    const isDesktop = useBreakpointUp('md', true, false);
+
     const styles = useStyles();
 
     const backgroundColorMap: Record<AppBarColor, string> = {
-        default: theme.palette.background.default,
+        default: theme.palette.background.base,
         alt: theme.palette.background.alt,
     };
 
     const paperStyle = css([
         styles.root,
         { backgroundColor: backgroundColorMap[color] },
+        isDesktop ? { paddingHorizontal: 8 } : undefined,
         style,
     ]);
 

package/src/Badge/Badge.tsx

@@ -15,12 +15,13 @@ export default function Badge(props: BadgeProps) {
         children,
         color = 'accent' as BadgeColor,
         content,
+        horizontalOffset = 0,
         invisible = false,
         position = defaultPosition,
         size = 'medium' as BadgeSize,
         style: styleProp,
-        offset = 0,
         variant = 'dot' as BadgeVariant,
+        verticalOffset = 0,
         ...otherProps
     } = props;
 
@@ -36,8 +37,8 @@ export default function Badge(props: BadgeProps) {
     const badgeStyle = css([
         baseBadgeStyle,
         {
-            [position.vertical]: offset,
-            [position.horizontal]: offset,
+            [position.vertical]: verticalOffset,
+            [position.horizontal]: horizontalOffset,
         },
     ]);
 

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/Button/useVariantStyleMap.ts

@@ -166,6 +166,15 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
                     labelColor: theme.palette.status.disabledLabel,
                     iconColor: theme.palette.status.disabledLabel,
                 },
+                accent: {
+                    container: {
+                        borderColor: theme.palette.border.accent,
+                        borderRadius: theme.shape.radius.full,
+                        borderWidth: 1,
+                    },
+                    labelColor: theme.palette.text.accent,
+                    iconColor: theme.palette.icon.accent,
+                },
             },
         };
 

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'