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

package/src/Tabs/Tabs.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import { useSyncAnimatedValue } from '../hooks';
-import type { TabVariant } from '../Tab';
+import type { TabSize, TabVariant } from '../Tab';
 import type TabsProps from './TabsProps';
 import type { TabsColor } from './TabsProps';
 import type { TabsInstance } from './types';
@@ -16,12 +16,12 @@ import useTabInnerContentsWidth from './useTabInnerContentsWidth';
 import useIndexStore from './useIndexStore';
 import InternalContext from './InternalContext';
 import { isEveryTabCoordinatesDefined } from './utils';
+import useTabsStyle from './useTabsStyle';
 
 type TabsStyleKeys =
     | 'root'
     | 'fixedRoot'
     | 'fixedTab'
-    | 'scrollableContainer'
     | 'bottomDivider';
 
 type TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;
@@ -37,9 +37,6 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
         fixedTab: {
             flex: 1,
         },
-        scrollableContainer: {
-            paddingHorizontal: theme.spacing(1),
-        },
         bottomDivider: {
             borderBottomColor: theme.palette.border.base,
             borderBottomWidth: 0.5,
@@ -60,6 +57,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         scrollable = false,
         scrollViewContentContainerStyle,
         showDivider = false,
+        size = 'medium' as TabSize,
         style,
         variant = 'default' as TabVariant,
         UNSTABLE_sharedIndex,
@@ -72,6 +70,8 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const currentIndexRef = useRef(initialIndex);
 
+    const { container: containerStyle } = useTabsStyle(variant, size);
+
     const setTab = (newIndex: number) => {
         const currentIndex = currentIndexRef.current;
         onTabSelected?.(newIndex, currentIndex);
@@ -170,6 +170,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             onLayout,
             onPress,
             onMouseDown,
+            size,
             variant,
             indicatorSize,
             style: scrollable ? undefined : styles.fixedTab,
@@ -202,6 +203,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,
@@ -213,7 +215,6 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                         automaticallyAdjustContentInsets={false}
                         bounces={false}
                         contentContainerStyle={css([
-                            styles.scrollableContainer,
                             scrollViewContentContainerStyle,
                         ])}
                         coordinates={coordinates}

package/src/Tabs/TabsProps.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import type { TabVariant } from '../Tab';
+import type { TabSize, TabVariant } from '../Tab';
 import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 
@@ -78,6 +78,12 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     showDivider?: boolean;
 
+    /**
+     * The size of the Tab.
+     * @default 'medium'
+     */
+    size?: TabSize;
+
     /**
      * Unstable API.
      */

package/src/Tabs/useTabsStyle.ts

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

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

@@ -49,13 +49,14 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         borderBottomWidth: 1,
                     },
                     inputStyle: {
+                        paddingLeft: 0,
                         paddingRight: theme.spacing(4),
                         paddingVertical: theme.spacing(4),
                         ...createFontStyle(theme, {
                             selector: (_) => typographyOf({
                                 fontSize: 18,
                                 lineHeight: 27,
-                                fontFamily: 'Pretendard-SemiBold',
+                                fontFamily: 'PretendardStd-SemiBold',
                                 letterSpacing: 0,
                             }),
                             color: theme.palette.text.strong,
@@ -64,7 +65,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     hintStyle: {
                         marginTop: theme.spacing(2),
                         ...createFontStyle(theme, {
-                            // selector: (typography) => typography.caption1['regular']
+                            selector: (typography) => typography.caption1['regular'],
                             color: hintColor,
                         }),
                     },
@@ -88,7 +89,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,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../../IconButton';
+import { AppBarChevronLeft } 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}
+        >
+            <React.Fragment>
+                <AppBarChevronLeft
+                    height={18}
+                    width={10}
+                />
+            </React.Fragment>
+        </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/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,12 +140,7 @@ 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,
-            })
+            ? typo.body3.regular
             : typo.caption2.regular,
         color: theme.palette.text.strongInverse,
     });

package/src/Tooltip/index.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/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/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/useCollapsibleAppBar.ts

@@ -205,7 +205,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    }, [keyboardDismissMode, appBarHeight, isScrolled]);
+    });
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

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/hooks/useFadeInAppBar.ts

@@ -117,7 +117,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         onMomentumEnd: (event) => {
             lastOffsetY.value = event.contentOffset.y;
         },
-    }, [keyboardDismissMode]);
+    });
 
     const appBarStyle = [
         animatedAppBarStyle,

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.292893 9.70711C-0.0976311 9.31658 -0.0976311 8.68342 0.292893 8.29289L8.2929 0.292893C8.68342 -0.097631 9.31658 -0.097631 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L2.41421 9L9.70711 16.2929C10.0976 16.6834 10.0976 17.3166 9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L0.292893 9.70711Z"
+        />
+    </React.Fragment>,
+    'AppBarChevronLeft',
+    '0 0 10 18',
+);

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',
 );

package/src/internal/icons/ChevronRight.tsx

@@ -4,7 +4,10 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M16.4141 12L9.70696 18.7071C9.31643 19.0976 8.68327 19.0976 8.29274 18.7071C7.90222 18.3166 7.90222 17.6834 8.29274 17.2929L13.5856 12L8.29274 6.70711C7.90222 6.31658 7.90222 5.68342 8.29274 5.29289C8.68327 4.90237 9.31643 4.90237 9.70696 5.29289L16.4141 12Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 12C8 12.2652 7.89464 12.5196 7.70711 12.7071L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292892 18.7071C-0.0976309 18.3166 -0.0976309 17.6834 0.292893 17.2929L5.58579 12L0.292894 6.70711C-0.0976304 6.31658 -0.0976304 5.68342 0.292895 5.29289C0.683418 4.90237 1.31658 4.90237 1.70711 5.29289L7.70711 11.2929C7.89464 11.4804 8 11.7348 8 12Z"
     />,
     'ChevronRight',
+    '0 0 8 24',
 );

package/src/internal/icons/Close.tsx

@@ -4,7 +4,10 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29292C5.31658 3.9024 4.68342 3.9024 4.29289 4.29292C3.90237 4.68345 3.90237 5.31661 4.29289 5.70714L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0977 19.3166 20.0977 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L7 10.5858L12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289C14.0976 5.68342 14.0976 6.31658 13.7071 6.70711L8.41421 12L13.7071 17.2929C14.0976 17.6834 14.0976 18.3166 13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071L7 13.4142L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292893 18.7071C-0.0976311 18.3166 -0.0976311 17.6834 0.292893 17.2929L5.58579 12L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z"
     />,
     'Close',
+    '0 0 14 24',
 );

package/src/internal/icons/index.ts

@@ -1,3 +1,4 @@
+export { default as AppBarChevronLeft } from './AppBarChevronLeft';
 export { default as Check } from './Check';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxChecked } from './CheckboxChecked';