@fountain-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/PaginationItem/PaginationItemProps.ts

@@ -1,7 +1,14 @@
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
+import { PaginationColor } from '../Pagination';
 
 export default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * If `true`, the pagination item is disabled.
      * @default false

package/src/Radio/Radio.tsx

@@ -9,6 +9,8 @@ import { cloneElementSafely } from '../utils';
 import { RadioContext } from '../RadioGroup/RadioContextProvider';
 import type RadioProps from './RadioProps';
 
+const DEFAULT_START_ICON_SIZE = 21;
+
 type RadioStyles = NamedStylesStringUnion<'root' | 'content'>;
 
 const useStyles: UseStyles<RadioStyles> = function (): RadioStyles {
@@ -63,7 +65,11 @@ export default function Radio(props: RadioProps) {
     const checkedIcon = checkIconProp ?? defaultCheckedIcon;
     const icon = isChecked ? checkedIcon : null;
 
-    const startIcon = cloneElementSafely(startIconProp, { color: 'strong' });
+    const startIcon = cloneElementSafely(startIconProp, {
+        color: 'strong',
+        height: DEFAULT_START_ICON_SIZE,
+        width: DEFAULT_START_ICON_SIZE,
+    });
 
     const rootStyle = css([
         styles.root,
@@ -71,7 +77,7 @@ export default function Radio(props: RadioProps) {
     ]);
 
     const fontStyle = createFontStyle(theme, {
-        // TODO: apply typo select.
+        selector: (typography) => typography.body1.regular,
         color: theme.palette.text.strong,
     });
 

package/src/Section/Section.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useContentContainerStyle } from '../hooks';
+import { css } from '../styles';
+import type SectionProps from './SectionProps';
+
+export default function Section(props: SectionProps) {
+    const {
+        children,
+        maxWidth,
+        style: styleProp,
+    } = props;
+
+    const styles = useContentContainerStyle({ maxWidth });
+
+    const rootStyle = css([
+        styles,
+        styleProp,
+    ]);
+
+    return (
+        <View style={rootStyle}>
+            {children}
+        </View>
+    );
+}

package/src/Section/SectionProps.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface SectionProps extends OverridableComponentProps<ViewProps, {
+    maxWidth?: number;
+}> {}

package/src/Section/index.ts

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

package/src/ShadowView/ShadowView.native.tsx

@@ -19,6 +19,8 @@ export default function ShadowView(props: ShadowViewProps) {
     const {
         borderRadius,
         height,
+        maxHeight,
+        maxWidth,
         width,
     } = styleProp as FountainUiStyle;
 
@@ -30,6 +32,8 @@ export default function ShadowView(props: ShadowViewProps) {
                     {
                         borderRadius: borderRadius ?? 0,
                         height,
+                        maxHeight,
+                        maxWidth,
                         width,
                     },
                 ])}

package/src/Snackbar/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Snackbar';
 export type { default as SnackbarProps } from './SnackbarProps';
+export { snackbarStatus } from './SnackbarProps';

package/src/SnackbarContent/SnackbarContent.tsx

@@ -10,7 +10,7 @@ import Typography from '../Typography';
 import type SnackbarContentProps from './SnackbarContentProps';
 import StatusIcon from './StatusIcon';
 
-type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton'>;
+type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton' | 'actionLabel' | 'actionElement'>;
 
 const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {
     const theme = useTheme();
@@ -30,6 +30,14 @@ const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContent
         actionButton: {
             marginLeft: theme.spacing(6),
         },
+        actionLabel: {
+            paddingBottom: theme.spacing(1.5),
+            paddingTop: theme.spacing(1.25),
+        },
+        actionElement: {
+            paddingLeft: theme.spacing(2),
+            paddingVertical: theme.spacing(1.25),
+        },
     };
 };
 
@@ -51,21 +59,28 @@ export default function SnackbarContent(props: SnackbarContentProps) {
 
     const titleFontStyle = createFontStyle(theme, {
         selector: (_) => typographyOf({
-            fontSize: 14,
-            lineHeight: 18.2,
-            fontFamily: 'Pretendard-SemiBold',
+            fontSize: 15,
+            lineHeight: 19.5,
+            fontFamily: 'PretendardStd-SemiBold',
             letterSpacing: 0,
         }),
         color: theme.palette.text.strongInverse,
     });
 
     const messageFontStyle = createFontStyle(theme, {
-        selector: (_) => typographyOf({
-            fontSize: 13,
-            lineHeight: 16.9,
-            fontFamily: 'Pretendard-Regular',
-            letterSpacing: 0,
-        }),
+        selector: (_) => title
+            ? typographyOf({
+                fontSize: 12,
+                lineHeight: 15.6,
+                fontFamily: 'PretendardStd-Regular',
+                letterSpacing: 0,
+            })
+            : typographyOf({
+                fontSize: 14,
+                lineHeight: 18.2,
+                fontFamily: 'PretendardStd-Regular',
+                letterSpacing: 0,
+            }),
         color: theme.palette.text.strongInverse,
     });
 
@@ -76,9 +91,7 @@ export default function SnackbarContent(props: SnackbarContentProps) {
             fontFamily: 'LexendDeca-SemiBold',
             letterSpacing: -0.26,
         }),
-        color: '#0BCC99',
-        // TODO: change color.
-        // color: theme.palette.text.accent,
+        color: theme.palette.text.accent,
     });
 
     const hasActionButton = !!(actionContent && onPress);
@@ -131,11 +144,17 @@ export default function SnackbarContent(props: SnackbarContentProps) {
 
                     <View style={styles.actionButton}>
                         {typeof actionContent === 'string' ? (
-                            <Text
-                                children={actionContent}
-                                style={labelFontStyle}
-                            />
-                        ) : (actionContent)}
+                            <View style={styles.actionLabel}>
+                                <Text
+                                    children={actionContent}
+                                    style={labelFontStyle}
+                                />
+                            </View>
+                        ) : (
+                            <View style={styles.actionElement}>
+                                {actionContent}
+                            </View>
+                        )}
                     </View>
                 </React.Fragment>
             ) : null}

package/src/SvgIcon/index.ts

@@ -1,2 +1,3 @@
 export { default } from './SvgIcon';
 export type { default as SvgIconProps } from './SvgIconProps';
+export { svgIconColors, svgIconSizes } from './SvgIconProps';

package/src/Tab/useVariantStyleMap.ts

@@ -34,7 +34,7 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         selector: (_) => typographyOf({
                             fontSize: 14,
                             lineHeight: 18.2,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
                             letterSpacing: 0,
                         }),
                         color: selected
@@ -55,7 +55,7 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         selector: (_) => typographyOf({
                             fontSize: 10,
                             lineHeight: 10,
-                            fontFamily: 'Pretendard-Medium',
+                            fontFamily: 'PretendardStd-Medium',
                             letterSpacing: -0.1,
                         }),
                         color: selected
@@ -73,7 +73,7 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         selector: (_) => typographyOf({
                             fontSize: 15,
                             lineHeight: 18.75,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
                             letterSpacing: 0,
                         }),
                         color: selected

package/src/Tabs/Tabs.tsx

@@ -16,6 +16,7 @@ import useTabInnerContentsWidth from './useTabInnerContentsWidth';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
 import { isEveryTabCoordinatesDefined } from './utils';
+import useTabsStyle from './useTabsStyle';
 
 type TabsStyleKeys =
     | 'root'
@@ -72,6 +73,8 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const currentIndexRef = useRef(initialIndex);
 
+    const { container: containerStyle } = useTabsStyle(variant);
+
     const setTab = (newIndex: number) => {
         const currentIndex = currentIndexRef.current;
         onTabSelected?.(newIndex, currentIndex);
@@ -202,6 +205,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             <View
                 style={css([
                     styles.root,
+                    containerStyle,
                     { backgroundColor: backgroundColorMap[color] },
                     showDivider ? styles.bottomDivider : undefined,
                     scrollable ? undefined : styles.fixedRoot,

package/src/Tabs/index.ts

@@ -1,3 +1,4 @@
 export { default } from './Tabs';
 export type { default as TabsProps } from './TabsProps';
+export { tabIndicatorSizes, tabsColors } from './TabsProps';
 export type { TabsInstance } from './types';

package/src/Tabs/useTabsStyle.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
+import { useTheme } from '../styles';
+import type { TabVariant } from '../Tab';
+
+interface TabsStyle {
+    container: FountainUiStyle;
+}
+
+export default function useTabsStyle(variant: TabVariant) {
+    const theme = useTheme();
+
+    const isDesktop = useBreakpointUp('md', true, false);
+
+    return useMemo<TabsStyle>(() => {
+        switch (variant) {
+            case 'circular':
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: isDesktop ? 20 : 12,
+                    },
+                };
+            case 'bottom-navigation':
+                return {
+                    container: {},
+                };
+            case 'default':
+            default:
+                return {
+                    container: {
+                        paddingHorizontal: isDesktop ? 14 : 6,
+                    },
+                };
+        }
+    }, [theme, variant, isDesktop]);
+}

package/src/TextField/TextField.tsx

@@ -82,7 +82,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const showClearButton = showClearButtonProp ?? isSearch;
 
     const titleFontStyle = createFontStyle(theme, {
-        // selector: (typography) => typography.caption1['semiBold']
+        selector: (typography) => typography.caption1['semiBold'],
         color: theme.palette.text.strong,
     });
 

package/src/TextField/index.tsx

@@ -1,2 +1,3 @@
 export { default } from './TextField';
 export type { default as TextFieldProps } from './TextFieldProps';
+export { textFieldStatus } from './TextFieldProps';

package/src/TextField/useVariantStyleMap.ts

@@ -55,7 +55,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                             selector: (_) => typographyOf({
                                 fontSize: 18,
                                 lineHeight: 27,
-                                fontFamily: 'Pretendard-SemiBold',
+                                fontFamily: 'PretendardStd-SemiBold',
                                 letterSpacing: 0,
                             }),
                             color: theme.palette.text.strong,
@@ -88,7 +88,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                             selector: (_) => typographyOf({
                                 fontSize: 16,
                                 lineHeight: 19.2,
-                                fontFamily: 'Pretendard-SemiBold',
+                                fontFamily: 'PretendardStd-SemiBold',
                                 letterSpacing: -0.16,
                             }),
                             color: theme.palette.text.strong,

package/src/Toolbar/BackButton/BackButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../../IconButton';
+import { ChevronLeft } from '../../internal';
+import type BackButtonProps from './BackButtonProps';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 4,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+export default function BackButton(props: BackButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <ChevronLeft
+                color={'strong'}
+                size={'large'}
+            />
+        </IconButton>
+    );
+}

package/src/Toolbar/BackButton/BackButtonProps.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/src/Toolbar/BackButton/index.ts

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

package/src/Toolbar/Toolbar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Row from '../Row';
 import { css, useTheme } from '../styles';
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
 import type { ToolbarSize } from './ToolbarProps';
 
@@ -27,7 +28,7 @@ const sizeMap: Record<ToolbarSize, FountainUiStyle> = {
     large: { height: 56 },
 };
 
-export default function Toolbar(props: ToolbarProps) {
+const Toolbar = (props: ToolbarProps) => {
     const {
         disableGutters = false,
         size = 'medium',
@@ -49,3 +50,7 @@ export default function Toolbar(props: ToolbarProps) {
         />
     );
 };
+
+Toolbar.BackButton = BackButton;
+
+export default Toolbar;

package/src/Toolbar/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Toolbar';
 export type { default as ToolbarProps } from './ToolbarProps';
+export { toolbarSizes } from './ToolbarProps';

package/src/Tooltip/Beaks/index.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/src/Tooltip/Tooltip.tsx

@@ -52,14 +52,14 @@ const useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {
         },
         small: {
             borderRadius: theme.shape.radius.sm,
+            paddingBottom: theme.spacing(1.75),
             paddingHorizontal: theme.spacing(2),
-            paddingVertical: theme.spacing(1.5),
+            paddingTop: theme.spacing(1.5),
         },
         large: {
             borderRadius: 5,
-            paddingBottom: theme.spacing(2.5),
             paddingHorizontal: theme.spacing(4),
-            paddingTop: theme.spacing(2),
+            paddingVertical: theme.spacing(2),
         },
     };
 };
@@ -140,19 +140,8 @@ export default function Tooltip(props: TooltipProps) {
 
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => size === 'large'
-            ? typographyOf({
-                fontSize: 13,
-                lineHeight: 19.5,
-                fontFamily: 'Pretendard-Regular',
-                letterSpacing: 0,
-            })
-            // TODO: change caption2.
-            : typographyOf({
-                fontSize: 11,
-                lineHeight: 15.4,
-                fontFamily: 'Pretendard-Regular',
-                letterSpacing: 0,
-            }),
+            ? typo.body3.regular
+            : typo.caption2.regular,
         color: theme.palette.text.strongInverse,
     });
 

package/src/Tooltip/index.ts

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

package/src/Typography/Typography.tsx

@@ -46,6 +46,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
         color: colorProp = 'inherit' as TypographyColor,
         ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],
         href,
+        lineHeight,
         numberOfLines,
         onPress,
         selectable,
@@ -59,7 +60,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
     const theme = useTheme();
 
     const fontStyle = createFontStyle(theme, {
-        selector: (typography) => typography[variant][weight],
+        selector: (typography) => typography[variant]?.[weight],
         color: selectColor(theme, colorProp),
     });
 
@@ -71,6 +72,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
         { textAlign: align === 'inherit' ? 'auto' : align },
         textWrapStyle as TextStyle,
         fontStyle,
+        lineHeight ? { lineHeight } : undefined,
         style,
     ]);
 

package/src/Typography/TypographyProps.ts

@@ -76,6 +76,11 @@ export default interface TypographyProps extends ComponentProps<{
      */
     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/src/Typography/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Typography';
 export type { default as TypographyProps } from './TypographyProps';
+export { typographyColors } from './TypographyProps';

package/src/hooks/useBreakpointUp.ts

@@ -12,8 +12,10 @@ export default function useBreakpointUp<R>(target: Breakpoint, yes: R, no: R): R
     // TODO: Needs to refactor
     const isUp = useMemo<boolean>(() => {
         switch (target) {
-            case 'xs':
+            case 'xxs':
                 return true;
+            case 'xs':
+                return current === 'xs' || current === 'sm' || current === 'md' || current === 'lg';
             case 'sm':
                 return current === 'sm' || current === 'md' || current === 'lg';
             case 'md':

package/src/hooks/useContentContainerStyle.ts

@@ -1,60 +1,52 @@
-import type { ScrollViewProps, ViewStyle } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
 import type { Theme } from '../types';
-import { useTheme } from '../styles';
-import useBreakpointUp from './useBreakpointUp';
 
 type Breakpoint = keyof Theme['breakpoints']['values'];
 
-type ContentContainerStyle = ScrollViewProps['contentContainerStyle'];
-
 export interface Config {
-    breakpoint?: Breakpoint;
-    maxWidth?: Breakpoint;
-    styleProvider?: (theme: Theme) => ContentContainerStyle;
+    maxWidth?: number;
+    styleProvider?: (theme: Theme) => FountainUiStyle;
 }
 
-const defaultConfig: Required<Config> = {
-    breakpoint: 'lg',
-    maxWidth: 'md',
-    styleProvider: () => undefined,
-};
+function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {
+    switch (breakpoint) {
+        case 'lg':
+        case 'md':
+            return customMaxWidth ?? theme.breakpoints.values[breakpoint];
+        default:
+            return undefined;
+    }
+}
 
-// TODO: Needs to refactor
-function getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {
+function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
     switch (breakpoint) {
-        case 'xs':
-            return theme.breakpoints.values['sm'];
         case 'sm':
-            return theme.breakpoints.values['md'];
-        case 'md':
-            return theme.breakpoints.values['lg'];
-        case 'lg':
-            return 'none';
+            return theme.spacing(6);
+        default:
+            return theme.spacing(4);
     }
 }
 
-export default function useContentContainerStyle(config: Config = defaultConfig): ContentContainerStyle {
+export default function useContentContainerStyle(config: Config = {}): FountainUiStyle {
     const {
-        breakpoint,
-        maxWidth,
+        maxWidth: customMaxWidth,
         styleProvider,
-    } = {
-        ...defaultConfig,
-        ...config,
-    };
+    } = config;
 
     const theme = useTheme();
 
+    const currentBreakpoint = theme.breakpoints.current;
+
     const additionalStyle = styleProvider?.(theme);
 
-    const yesStyle: ContentContainerStyle = [
+    return css([
         {
             alignSelf: 'center',
-            maxWidth: getMaxWidth(theme, maxWidth),
+            maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
+            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
             width: '100%',
         },
         additionalStyle,
-    ];
-
-    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);
+    ]);
 };

package/src/index.ts

@@ -149,6 +149,9 @@ 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';
 

package/src/internal/icons/ChevronLeft.tsx

@@ -4,7 +4,10 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M7.58594 12L14.293 18.7071C14.6836 19.0976 15.3167 19.0976 15.7073 18.7071C16.0978 18.3166 16.0978 17.6834 15.7073 17.2929L10.4144 12L15.7073 6.70711C16.0978 6.31658 16.0978 5.68342 15.7073 5.29289C15.3167 4.90237 14.6836 4.90237 14.293 5.29289L7.58594 12Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 12C3.16267e-09 11.7348 0.105357 11.4804 0.292893 11.2929L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L2.41421 12L7.70711 17.2929C8.09763 17.6834 8.09763 18.3166 7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L0.292893 12.7071C0.105357 12.5196 -3.16267e-09 12.2652 0 12Z"
     />,
     'ChevronLeft',
+    '0 0 8 24',
 );