@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.10

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/TabBase/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyTabBase';
+export { default } from './TabBase';
 export type { default as TabBaseProps } from './TabBaseProps';

package/src/Tabs/Tabs.tsx

@@ -4,8 +4,9 @@ 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/TabProps';
+import type { TabVariant } from '../Tab';
 import type TabsProps from './TabsProps';
+import type { TabsColor } from './TabsProps';
 import type { TabsInstance } from './types';
 import TabIndicator from './TabIndicator';
 import ScrollableTabsView from './ScrollableTabsView';
@@ -15,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'
@@ -41,7 +43,7 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
         },
         bottomDivider: {
             borderBottomColor: theme.palette.border.base,
-            borderBottomWidth: 1,
+            borderBottomWidth: 0.5,
         },
     };
 };
@@ -49,6 +51,7 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
 const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
     const {
         children,
+        color = 'default',
         initialIndex = 0,
         disableIndicator = false,
         indicatorSize = 'fit-content',
@@ -70,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);
@@ -87,6 +92,8 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const styles = useStyles();
 
+    const theme = useTheme();
+
     const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
     const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);
 
@@ -97,6 +104,10 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
     const indexStore = useIndexStore(sharedIndex);
 
     const coordinates = useMemo(() => {
+        if (outerCoordinates.length === 0) {
+            return [];
+        }
+
         if (indicatorSize !== 'fit-content') {
             return outerCoordinates;
         }
@@ -113,7 +124,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                 x2: indicatorStartCoordinate + innerContentWidth,
             };
         });
-    }, [outerCoordinates, innerContentsWidthList, indicatorSize]);
+    }, [outerCoordinates, innerContentsWidthList]);
 
     useEffect(() => {
         return indexStore.subscribe(newIndex => {
@@ -184,11 +195,18 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         />
     ) : null;
 
+    const backgroundColorMap: Record<TabsColor, string> = {
+        default: theme.palette.background.base,
+        alt: theme.palette.background.alt,
+    };
+
     return (
         <InternalContext.Provider value={{ indexStore }}>
             <View
                 style={css([
                     styles.root,
+                    containerStyle,
+                    { backgroundColor: backgroundColorMap[color] },
                     showDivider ? styles.bottomDivider : undefined,
                     scrollable ? undefined : styles.fixedRoot,
                     style,

package/src/Tabs/TabsProps.ts

@@ -1,9 +1,12 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import type { TabVariant } from '../Tab/TabProps';
+import type { TabVariant } from '../Tab';
 import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 
+export const tabsColors = ['default', 'alt'] as const;
+export type TabsColor = typeof tabsColors[number];
+
 export const tabIndicatorSizes = ['fit-content', 'full'] as const;
 export type TabIndicatorSize = typeof tabIndicatorSizes[number];
 
@@ -15,6 +18,12 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     children: ReactNode;
 
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'default'
+     */
+    color?: TabsColor;
+
     /**
      * If `true`, the indicator is disabled.
      * @default false

package/src/Tabs/index.ts

@@ -1,3 +1,4 @@
-export { default } from './LegacyTabs';
-export type { default as TabsProps } from './LegacyTabsProps';
+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,35 @@
+import { useMemo } from 'react';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
+import type { TabVariant } from '../Tab';
+
+interface TabsStyle {
+    container: FountainUiStyle;
+}
+
+export default function useTabsStyle(variant: TabVariant) {
+    const theme = useTheme();
+
+    return useMemo<TabsStyle>(() => {
+        switch (variant) {
+            case 'circular':
+                return {
+                    container: {
+                        paddingBottom: theme.spacing(2),
+                        paddingHorizontal: theme.spacing(3),
+                    },
+                };
+            case 'bottom-navigation':
+                return {
+                    container: {},
+                };
+            case 'default':
+            default:
+                return {
+                    container: {
+                        paddingHorizontal: theme.spacing(1.5),
+                    },
+                };
+        }
+    }, [theme, variant]);
+}

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,
     });
 
@@ -118,7 +118,6 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                     ) : (
                         <Search
                             color={'base'}
-                            enableV2={true}
                             height={18}
                             width={18}
                         />

package/src/TextField/index.tsx

@@ -1,2 +1,3 @@
-export { default } from './LegacyTextField';
-export type { default as TextFieldProps } from './LegacyTextFieldProps';
+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/Toggle/Toggle.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import { Animated } from 'react-native';
 import { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import ButtonBase from '../ButtonBase';
+import ButtonBase from '../ButtonBase/ButtonBase';
 import ShadowView from '../ShadowView';
 import { css, useTheme } from '../styles';
 import { ExtendedStyle } from '../types';
@@ -18,7 +18,6 @@ const useStyles: UseStyles<ToggleStyles> = function (): ToggleStyles {
             justifyContent: 'center',
         },
         toggle: {
-            backgroundColor: commonColors.static.strongInverse,
             borderRadius: theme.shape.radius.full,
         },
     };
@@ -36,6 +35,7 @@ const sizeMap = {
 export default function Toggle(props: ToggleProps) {
     const {
         checked = false,
+        disabled = false,
         onChange,
         style: styleProp,
         ...otherProps
@@ -70,9 +70,7 @@ export default function Toggle(props: ToggleProps) {
     const containerStyle = css([
         styles.root,
         {
-            backgroundColor: checked
-                ? theme.palette.fill.accent
-                : theme.palette.fill.weak,
+            backgroundColor: disabled || !checked ? theme.palette.fill.weak : theme.palette.fill.accent,
             height: containerHeight,
             width: containerWidth,
         },
@@ -82,6 +80,9 @@ export default function Toggle(props: ToggleProps) {
     const toggleStyle = css([
         styles.toggle,
         {
+            backgroundColor: disabled
+                ? theme.palette.status.disabledLabel
+                : commonColors.static.strongInverse,
             height: toggleSize,
             width: toggleSize,
         },
@@ -98,6 +99,7 @@ export default function Toggle(props: ToggleProps) {
     return (
         <ButtonBase
             {...otherProps}
+            disabled={disabled}
             pressEffect={'none'}
             onPress={handlePress}
             style={containerStyle}

package/src/Toolbar/Toolbar.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import type ToolbarProps from './ToolbarProps';
+import type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Row from '../Row';
 import { css, useTheme } from '../styles';
+import type ToolbarProps from './ToolbarProps';
+import type { ToolbarSize } from './ToolbarProps';
 
 type ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;
 
@@ -12,9 +13,7 @@ const useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {
     return {
         root: {
             alignItems: 'center',
-            flexDirection: 'row',
             flexWrap: 'nowrap',
-            minHeight: 56,
         },
         gutters: {
             paddingHorizontal: theme.spacing(4),
@@ -22,9 +21,16 @@ const useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {
     };
 };
 
+const sizeMap: Record<ToolbarSize, FountainUiStyle> = {
+    small: { height: 48 },
+    medium: { height: 50 },
+    large: { height: 56 },
+};
+
 export default function Toolbar(props: ToolbarProps) {
     const {
         disableGutters = false,
+        size = 'medium',
         style,
         ...otherProps
     } = props;
@@ -32,10 +38,11 @@ export default function Toolbar(props: ToolbarProps) {
     const styles = useStyles();
 
     return (
-        <View
+        <Row
             style={css([
                 styles.root,
                 !disableGutters ? styles.gutters : undefined,
+                sizeMap[size],
                 style,
             ])}
             {...otherProps}

package/src/Toolbar/ToolbarProps.ts

@@ -1,8 +1,11 @@
 import React from 'react';
-import type { ViewProps } from 'react-native';
+import type { RowProps } from '../Row';
 import type { OverridableComponentProps } from '../types';
 
-export default interface ToolbarProps extends OverridableComponentProps<ViewProps, {
+export const toolbarSizes = ['small', 'medium', 'large'] as const;
+export type ToolbarSize = typeof toolbarSizes[number];
+
+export default interface ToolbarProps extends OverridableComponentProps<RowProps, {
     /**
      * The content of the component.
      */
@@ -13,4 +16,10 @@ export default interface ToolbarProps extends OverridableComponentProps<ViewProp
      * @default false
      */
     disableGutters?: boolean,
+
+    /**
+     * Determines the height of the toolbar.
+     * @default 'medium'
+     */
+    size?: ToolbarSize;
 }> {}

package/src/Toolbar/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Toolbar';
-export type { default as ToolbarProps } from './ToolbarProps';
+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,14 +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.
-            : typo.caption3.regular,
+            ? typo.body3.regular
+            : typo.caption2.regular,
         color: theme.palette.text.strongInverse,
     });
 

package/src/Tooltip/index.ts

@@ -1,2 +1,4 @@
-export { default } from './LegacyTooltip';
-export type { default as TooltipProps } from './LegacyTooltipProps';
+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/Typography/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacyTypography';
-export type { default as TypographyProps } from './LegacyTypographyProps';
+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

@@ -23,6 +23,15 @@ export * from './Avatar';
 export { default as Badge } from './Badge';
 export * from './Badge';
 
+export { default as BottomSheetActions } from './BottomSheetActions';
+export * from './BottomSheetActions';
+
+export { default as BottomSheetContent } from './BottomSheetContent';
+export * from './BottomSheetContent';
+
+export { default as BottomSheetTitle } from './BottomSheetTitle';
+export * from './BottomSheetTitle';
+
 export { default as Button } from './Button';
 export * from './Button';
 
@@ -47,9 +56,6 @@ export * from './CardMedia';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 
-export { default as CheckboxGroup } from './CheckboxGroup';
-export * from './CheckboxGroup';
-
 export { default as Chip } from './Chip';
 export * from './Chip';
 
@@ -143,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/LoadingSpinner/index.native.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import LottieView from 'lottie-react-native';
-import type { FountainUiStyle } from '@fountain-ui/styles';
+import { css } from '../../../styles';
 import type LoadingSpinnerProps from './LoadingSpinnerProps';
 import { loadingSpinnerMap, loadingSpinnerSizeMap } from './utils';
 
@@ -9,22 +9,32 @@ export default function LoadingSpinner(props: LoadingSpinnerProps) {
     const {
         color = 'gray',
         size = 'medium',
+        style: styleProp,
         ...otherProps
     } = props;
 
-    const style: FountainUiStyle = {
-        height: loadingSpinnerSizeMap[size],
-        width: loadingSpinnerSizeMap[size],
-    };
+    const rootStyle = css([
+        {
+            height: loadingSpinnerSizeMap[size],
+            width: loadingSpinnerSizeMap[size],
+        },
+        styleProp,
+    ]);
 
     return (
-        <View {...otherProps}>
+        <View
+            {...otherProps}
+            style={rootStyle}
+        >
             <LottieView
                 autoPlay={true}
                 key={color}
                 loop={true}
                 source={loadingSpinnerMap[color]}
-                style={style}
+                style={{
+                    height: '100%',
+                    width: '100%',
+                }}
             />
         </View>
     );