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

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]);
 }