@fountain-ui/core 3.0.0-alpha.14 → 3.0.0-alpha.16

package/src/Tab/Tab.tsx

@@ -5,7 +5,7 @@ import TabBase from '../TabBase';
 import { css, StyleSheet } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type TabProps from './TabProps';
-import type { TabVariant } from './TabProps';
+import type { TabSize, TabVariant } from './TabProps';
 import useVariantStyleMap from './useVariantStyleMap';
 
 const styles = StyleSheet.create({
@@ -27,6 +27,7 @@ export default function Tab(props: TabProps) {
         icon: defaultIcon,
         selected = false,
         selectedIcon,
+        size = 'medium' as TabSize,
         variant = 'default' as TabVariant,
         style: styleProp,
         onTabInnerLayout,
@@ -37,7 +38,7 @@ export default function Tab(props: TabProps) {
         container: containerStyle,
         inner: innerStyle,
         label: labelStyle,
-    } = useVariantStyleMap(variant, selected);
+    } = useVariantStyleMap(variant, selected, size);
 
     const tabBaseStyle = css([
         styles.root,

package/src/Tab/TabProps.ts

@@ -3,6 +3,9 @@ import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
+export const tabSizes = ['small', 'medium'] as const;
+export type TabSize = typeof tabSizes[number];
+
 export const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;
 export type TabVariant = typeof tabVariants[number];
 
@@ -40,6 +43,12 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     selectedIcon?: React.ReactElement;
 
+    /**
+     * The size of the Tab.
+     * @default 'medium'
+     */
+    size?: TabSize;
+
     /**
      * The variant to use.
      * @default 'default'

package/src/Tab/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Tab';
-export type { default as TabProps, TabVariant } from './TabProps';
+export type { default as TabProps, TabSize, TabVariant } from './TabProps';
+export { tabSizes, tabVariants } from './TabProps';

package/src/Tab/useVariantStyleMap.ts

@@ -3,7 +3,7 @@ import { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
-import type { TabVariant } from './TabProps';
+import type { TabSize, TabVariant } from './TabProps';
 
 interface VariantStyle {
     container: FountainUiStyle;
@@ -11,7 +11,7 @@ interface VariantStyle {
     label: TextStyle;
 }
 
-export default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle {
+export default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {
     const theme = useTheme();
 
     return useMemo<VariantStyle>(() => {
@@ -29,13 +29,14 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         borderRadius: theme.shape.radius.full,
                         flexDirection: 'row',
                         gap: 5,
-                        paddingHorizontal: theme.spacing(3.5),
-                        paddingVertical: theme.spacing(1.75),
+                        paddingBottom: 7.5,
+                        paddingHorizontal: 14,
+                        paddingTop: 6.5,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 14,
-                            lineHeight: 18.2,
+                            fontSize: size === 'small' ? 14 : 15,
+                            lineHeight: size === 'small' ? 18.2 : 19.5,
                             fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
@@ -55,10 +56,13 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                             ? theme.palette.fill.base
                             : theme.palette.surface.base,
                         borderRadius: theme.shape.radius.full,
+                        borderWidth: selected ? undefined : 0.5,
+                        borderColor: selected ? undefined : theme.palette.border.weak,
                         flexDirection: 'row',
                         gap: 5,
+                        paddingBottom: 6.5,
                         paddingHorizontal: 14,
-                        paddingVertical: 8.5,
+                        paddingVertical: 7.5,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
@@ -78,7 +82,7 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         alignItems: 'center',
                         height: 49,
                         justifyContent: 'flex-start',
-                        paddingTop: theme.spacing(2.625),
+                        paddingTop: 10.5,
                         width: 48,
                     },
                     inner: {
@@ -101,16 +105,18 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
             default:
                 return {
                     container: {
-                        padding: theme.spacing(2.5),
+                        paddingHorizontal: 10,
                     },
                     inner: {
                         flexDirection: 'row',
                         gap: 5,
+                        paddingHorizontal: 1,
+                        paddingVertical: 10,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 18.75,
+                            fontSize: size === 'small' ? 15 : 16,
+                            lineHeight: size === 'small' ? 18.75 : 20,
                             fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
                             letterSpacing: 0,
                         }),
@@ -120,5 +126,5 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                     }),
                 };
         }
-    }, [theme, variant, selected]);
+    }, [theme, variant, selected, size]);
 }

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';
@@ -22,7 +22,6 @@ type TabsStyleKeys =
     | 'root'
     | 'fixedRoot'
     | 'fixedTab'
-    | 'scrollableContainer'
     | 'bottomDivider';
 
 type TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;
@@ -38,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,
@@ -61,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,
@@ -73,7 +70,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const currentIndexRef = useRef(initialIndex);
 
-    const { container: containerStyle } = useTabsStyle(variant);
+    const { container: containerStyle } = useTabsStyle(variant, size);
 
     const setTab = (newIndex: number) => {
         const currentIndex = currentIndexRef.current;
@@ -173,6 +170,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             onLayout,
             onPress,
             onMouseDown,
+            size,
             variant,
             indicatorSize,
             style: scrollable ? undefined : styles.fixedTab,
@@ -217,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

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