@fountain-ui/core 3.0.0-alpha.5 → 3.0.0-alpha.50

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,8 +53,8 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
+                            fontSize: 16,
+                            lineHeight: 20.8,
                             fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
@@ -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,8 +122,8 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
+                            fontSize: 16,
+                            lineHeight: 20.8,
                             fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),

package/src/AppBar/AppBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 import type { AppBarColor } from './AppBarProps';
@@ -34,7 +34,7 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
     const styles = useStyles();
 
     const backgroundColorMap: Record<AppBarColor, string> = {
-        default: theme.palette.background.default,
+        default: theme.palette.background.base,
         alt: theme.palette.background.alt,
     };
 

package/src/AspectRatio/AspectRatioNative.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { DimensionValue, View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css } from '../styles';
 import type AspectRatioProps from './AspectRatioProps';
@@ -32,7 +32,7 @@ export default function AspectRatio(props: AspectRatioProps) {
     }
 
     const containerStyle = css([
-        { aspectRatio: ratio, width },
+        { aspectRatio: ratio, width: width as DimensionValue},
         styles.root,
         style,
     ]);

package/src/AspectRatio/AspectRatioWeb.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { DimensionValue, View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, StyleSheet } from '../styles';
 import type AspectRatioProps from './AspectRatioProps';
@@ -38,12 +38,12 @@ export default function AspectRatio(props: AspectRatioProps) {
 
     const outerStyle = css([
         styles.root,
-        { width },
+        { width: width as DimensionValue },
         style,
     ]);
 
     const innerStyle = css([
-        { paddingBottom: `${(100 / ratio).toFixed(6)}%` },
+        { paddingBottom: `${(100 / ratio).toFixed(6)}%` as DimensionValue},
         styles.inner,
     ]);
 

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/BottomSheetTitle/BottomSheetTitle.tsx

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

package/src/BottomSheetTitle/BottomSheetTitleProps.ts

@@ -1,9 +1,9 @@
-import type { OverridableComponentProps } from '../types';
+import type { ButtonProps } from '../Button';
 import type { RowProps } from '../Row';
+import type { OverridableComponentProps } from '../types';
 
-type ActionButtonProps = {
+type ActionButtonProps = Pick<ButtonProps, 'color' | 'disabled' | 'onPress'> & {
     title: string;
-    onPress: () => void;
 };
 
 export default interface BottomSheetTitleProps extends OverridableComponentProps<RowProps, {

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,24 @@ 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,
+                },
+                danger: {
+                    container: {
+                        borderColor: theme.palette.status.danger,
+                        borderRadius: theme.shape.radius.full,
+                        borderWidth: 1,
+                    },
+                    labelColor: theme.palette.status.danger,
+                    iconColor: theme.palette.status.danger,
+                },
             },
         };
 

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,47 +1,53 @@
 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',
         style: styleProp,
+        variant = 'filled',
         ...otherProps
     } = props;
 
+    const isSelected = variant === 'outlined' ? false : selected;
+
     const {
         container: containerStyle,
-        endElement: endElementStyle,
+        closeButtonContainer: closeButtonContainerStyle,
+        closeIconSize,
         label: labelStyle,
         startElement: startElementStyle,
-    } = useChipStyle(size, startElementVariant, !!endElementProp);
+        startElementContainer: startElementContainerStyle,
+    } = useChipStyle(size, startElementVariant, color, isSelected, variant);
 
     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 +60,15 @@ export default function Chip(props: ChipProps) {
                 style={labelStyle}
             />
 
-            {endElement}
+            {isSelected ? (
+                <View style={closeButtonContainerStyle}>
+                    <ChipClose
+                        color={'baseInverse'}
+                        height={closeIconSize?.height}
+                        width={closeIconSize?.width}
+                    />
+                </View>
+            ) : null}
         </ButtonBase>
     );
 }

package/src/Chip/ChipProps.ts

@@ -2,28 +2,40 @@ 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];
 
 export const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;
 export type ChipStartElementVariant = typeof chipStartElementVariants[number];
 
+export const chipVariants = ['filled', 'outlined'] as const;
+export type ChipVariant = typeof chipVariants[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'
@@ -35,6 +47,12 @@ export default interface ChipProps extends OverridableComponentProps<ButtonBaseP
      */
     startElement?: React.ReactElement;
 
+    /**
+     * Determines the visual style of the component.
+     * @default 'filled'
+     */
+    variant?: ChipVariant;
+
     /**
      * Determines the style of the start element.
      */

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 type { default as ChipProps, ChipVariant } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants, chipVariants } from './ChipProps';