@fountain-ui/core 3.0.0-alpha.2 → 3.0.0-alpha.20

package/build/typescript/Tabs/useTabsStyle.d.ts

@@ -0,0 +1,7 @@
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import type { TabSize, TabVariant } from '../Tab';
+interface TabsStyle {
+    container: FountainUiStyle;
+}
+export default function useTabsStyle(variant: TabVariant, size: TabSize): TabsStyle;
+export {};

package/build/typescript/Toolbar/BackButton/BackButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type BackButtonProps from './BackButtonProps';
+export default function BackButton(props: BackButtonProps): JSX.Element;

package/build/typescript/Toolbar/BackButton/BackButtonProps.d.ts

@@ -0,0 +1,4 @@
+import type { IconButtonProps } from '../../IconButton';
+import type { OverridableComponentProps } from '../../types';
+export default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {
+}

package/build/typescript/Toolbar/BackButton/index.d.ts

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

package/build/typescript/Toolbar/Toolbar.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
-export default function Toolbar(props: ToolbarProps): JSX.Element;
+declare const Toolbar: {
+    (props: ToolbarProps): JSX.Element;
+    BackButton: typeof BackButton;
+};
+export default Toolbar;

package/build/typescript/Tooltip/Beaks/index.d.ts

@@ -1,2 +1,6 @@
 export { default } from './Beak';
 export type { default as BeakProps } from './BeakProps';
+export { default as HorizontalLargeBeak } from './HorizontalLargeBeak';
+export { default as HorizontalSmallBeak } from './HorizontalSmallBeak';
+export { default as VerticalLargeBeak } from './VerticalLargeBeak';
+export { default as VerticalSmallBeak } from './VerticalSmallBeak';

package/build/typescript/Tooltip/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './Tooltip';
 export type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';
 export { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';
+export * from './Beaks';

package/build/typescript/Typography/TypographyProps.d.ts

@@ -48,6 +48,10 @@ export default interface TypographyProps extends ComponentProps<{
      * Internal use only. The hyperlink of the text.
      */
     href?: string;
+    /**
+     * Defines the vertical spacing between lines of text.
+     */
+    lineHeight?: TextStyle['lineHeight'];
     /**
      * Used to truncate the text with an ellipsis after computing the text
      * layout, including line wrapping, such that the total number of lines

package/build/typescript/hooks/useContentContainerStyle.d.ts

@@ -1,11 +1,7 @@
-import type { ScrollViewProps } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
 import type { Theme } from '../types';
-declare type Breakpoint = keyof Theme['breakpoints']['values'];
-declare type ContentContainerStyle = ScrollViewProps['contentContainerStyle'];
 export interface Config {
-    breakpoint?: Breakpoint;
-    maxWidth?: Breakpoint;
-    styleProvider?: (theme: Theme) => ContentContainerStyle;
+    maxWidth?: number;
+    styleProvider?: (theme: Theme) => FountainUiStyle;
 }
-export default function useContentContainerStyle(config?: Config): ContentContainerStyle;
-export {};
+export default function useContentContainerStyle(config?: Config): FountainUiStyle;

package/build/typescript/index.d.ts

@@ -97,6 +97,8 @@ export { default as RadioGroup } from './RadioGroup';
 export * from './RadioGroup';
 export { default as Row } from './Row';
 export * from './Row';
+export { default as Section } from './Section';
+export * from './Section';
 export { default as ShadowView } from './ShadowView';
 export * from './ShadowView';
 export { default as Slide } from './Slide';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.20",
   "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.10",
     "@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": "28005225fc7de910f1946bf35cab98be3f53094c"
+  "gitHead": "cbf3d668134714e8aa469c418335717e25d628a8"
 }

package/src/Accordion/Accordion.tsx

@@ -62,6 +62,7 @@ export default function Accordion(props: AccordionProps) {
         container: containerStyle,
         content: contentStyle,
         contentFont: contentFontStyle,
+        iconContainer: iconContainerStyle,
         subTitleFont: subTitleFontStyle,
         title: titleStyle,
         titleFont: titleFontStyle,
@@ -123,7 +124,9 @@ export default function Accordion(props: AccordionProps) {
                         <Row alignItems={'center'}>
                             {LeftComponent ? (
                                 <React.Fragment>
-                                    {LeftComponent}
+                                    <View style={iconContainerStyle}>
+                                        {LeftComponent}
+                                    </View>
 
                                     <Spacer size={1.5}/>
                                 </React.Fragment>
@@ -137,20 +140,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/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,6 +32,8 @@ 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> = {
@@ -41,6 +44,7 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
     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

@@ -169,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/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 { Close } 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,26 @@ export default function Chip(props: ChipProps) {
 
     const {
         container: containerStyle,
-        endElement: endElementStyle,
+        closeButton: closeButtonStyle,
         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 +56,12 @@ export default function Chip(props: ChipProps) {
                 style={labelStyle}
             />
 
-            {endElement}
+            {selected ? (
+                <Close
+                    color={'baseInverse'}
+                    style={closeButtonStyle}
+                />
+            ) : null}
         </ButtonBase>
     );
 }