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

package/build/commonjs/Tab/Tab.js

@@ -11,8 +11,6 @@ var _reactNative = require("react-native");
 
 var _Badge = _interopRequireDefault(require("../Badge"));
 
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-
 var _TabBase = _interopRequireDefault(require("../TabBase"));
 
 var _styles = require("../styles");
@@ -50,8 +48,6 @@ function Tab(props) {
     onTabInnerLayout,
     ...otherProps
   } = props;
-  const theme = (0, _styles.useTheme)();
-  const vertical = variant === 'bottom-navigation';
   const {
     container: containerStyle,
     inner: innerStyle,
@@ -59,21 +55,15 @@ function Tab(props) {
   } = (0, _useVariantStyleMap.default)(variant, selected);
   const tabBaseStyle = (0, _styles.css)([styles.root, containerStyle, styleProp]);
   const tabInnerStyle = (0, _styles.css)([styles.filledInner, innerStyle]);
-  const pressEffect = selected ? 'none' : 'opacity';
   const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
-  const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;
-  const iconElement = (0, _utils.cloneElementSafely)(icon, {
-    fill: iconColor
-  });
+  const iconElement = (0, _utils.cloneElementSafely)(icon);
   const tabElement = typeof children !== 'string' ? (0, _utils.cloneElementSafely)(children, {
     selected
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconElement ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Badge.default, {
     horizontalOffset: -6,
     invisible: !badgeVisible,
     verticalOffset: -4.5
-  }, iconElement), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
-    size: 1.25
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }, iconElement), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: (0, _styles.css)(labelStyle)
   }, children)) : /*#__PURE__*/_react.default.createElement(_Badge.default, {
     horizontalOffset: -7,
@@ -83,9 +73,7 @@ function Tab(props) {
     style: (0, _styles.css)(labelStyle)
   }, children)));
   return /*#__PURE__*/_react.default.createElement(_TabBase.default, _extends({
-    pressEffect: pressEffect,
-    style: tabBaseStyle,
-    vertical: vertical
+    style: tabBaseStyle
   }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     onLayout: onTabInnerLayout,
     style: tabInnerStyle

package/build/commonjs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","theme","useTheme","vertical","container","containerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","pressEffect","iconColor","palette","strong","base","iconElement","cloneElementSafely","fill","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport Spacer from '../Spacer';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;\n    const iconElement = cloneElementSafely(icon, { fill: iconColor });\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-6}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4.5}\n                    >\n                        {iconElement}\n                    </Badge>\n\n                    <Spacer size={1.25}/>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","iconElement","cloneElementSafely","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = cloneElementSafely(icon);\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-6}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4.5}\n                    >\n                        {iconElement}\n                    </Badge>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,OAAO,GAAG,SAPR;IAQFC,KAAK,EAAEC,SARL;IASFC,gBATE;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAM;IACFa,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF,IAAAC,2BAAA,EAAmBX,OAAnB,EAA4BF,QAA5B,CAJJ;EAMA,MAAMc,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBhC,MAAM,CAACG,IADc,EAErBsB,cAFqB,EAGrBJ,SAHqB,CAAJ,CAArB;EAMA,MAAMY,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBhC,MAAM,CAACO,WADe,EAEtBoB,UAFsB,CAAJ,CAAtB;EAKA,MAAMZ,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMkB,WAAW,GAAG,IAAAC,yBAAA,EAAmBpB,IAAnB,CAApB;EAEA,MAAMqB,UAAU,GAAG,OAAOvB,QAAP,KAAoB,QAApB,GACf,IAAAsB,yBAAA,EAAmBtB,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKiB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACtB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,GAKKsB,WALL,CADJ,eASI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAF,WAAA,EAAIH,UAAJ;EAAb,GACKhB,QADL,CATJ,CADQ,gBAeR,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAoB,WAAA,EAAIH,UAAJ;EAAb,GACKhB,QADL,CALJ,CAhBR,CALJ;EAkCA,oBACI,6BAAC,gBAAD;IACI,KAAK,EAAEkB;EADX,GAEQR,UAFR,gBAII,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEW;EAAzC,GACKG,UADL,CAJJ,CADJ;AAUH;;AAAA"}

package/build/commonjs/Tab/TabProps.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tabVariants = void 0;
-const tabVariants = ['default', 'circular', 'bottom-navigation'];
+const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'];
 exports.tabVariants = tabVariants;
 //# sourceMappingURL=TabProps.js.map

package/build/commonjs/Tab/TabProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const tabVariants = ['default', 'circular', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'default'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,mBAAxB,CAApB"}
+{"version":3,"names":["tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'default'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,eAAxB,EAAyC,mBAAzC,CAApB"}

package/build/commonjs/Tab/useVariantStyleMap.js

@@ -24,17 +24,44 @@ function useVariantStyleMap(variant, selected) {
           inner: {
             backgroundColor: selected ? theme.palette.fill.base : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
-            paddingHorizontal: theme.spacing(4),
+            flexDirection: 'row',
+            gap: 5,
+            paddingHorizontal: theme.spacing(3.5),
             paddingVertical: theme.spacing(1.75)
           },
           label: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
               fontSize: 14,
               lineHeight: 18.2,
-              fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
+              fontFamily: 'PretendardStd-SemiBold',
               letterSpacing: 0
             }),
-            color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
+          })
+        };
+
+      case 'circular-home':
+        return {
+          container: {
+            paddingHorizontal: theme.spacing(0.75),
+            paddingVertical: theme.spacing(1)
+          },
+          inner: {
+            backgroundColor: selected ? theme.palette.fill.base : theme.palette.surface.base,
+            borderRadius: theme.shape.radius.full,
+            flexDirection: 'row',
+            gap: 5,
+            paddingHorizontal: 14,
+            paddingVertical: 8.5
+          },
+          label: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 15,
+              lineHeight: 19.5,
+              fontFamily: 'LexendDeca-Medium',
+              letterSpacing: 0
+            }),
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
           })
         };
 
@@ -47,6 +74,10 @@ function useVariantStyleMap(variant, selected) {
             paddingTop: theme.spacing(2.625),
             width: 48
           },
+          inner: {
+            flexDirection: 'column',
+            gap: 4.75
+          },
           label: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
               fontSize: 10,
@@ -64,6 +95,10 @@ function useVariantStyleMap(variant, selected) {
           container: {
             padding: theme.spacing(2.5)
           },
+          inner: {
+            flexDirection: 'row',
+            gap: 5
+          },
           label: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
               fontSize: 15,

package/build/commonjs/Tab/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["useVariantStyleMap","variant","selected","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","strong","alignItems","height","justifyContent","paddingTop","width","padding"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        paddingHorizontal: theme.spacing(4),\n                        paddingVertical: theme.spacing(1.75),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.strong,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: theme.spacing(2.625),\n                        width: 48,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10,\n                            lineHeight: 10,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.1,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        padding: theme.spacing(2.5),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 18.75,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected]);\n}\n"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AASe,SAASA,kBAAT,CAA4BC,OAA5B,EAAiDC,QAAjD,EAAkF;EAC7F,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAsB,MAAM;IAC/B,QAAQJ,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHK,SAAS,EAAE;YACPC,iBAAiB,EAAEJ,KAAK,CAACK,OAAN,CAAc,IAAd,CADZ;YAEPC,eAAe,EAAEN,KAAK,CAACK,OAAN,CAAc,CAAd;UAFV,CADR;UAKHE,KAAK,EAAE;YACHC,eAAe,EAAET,QAAQ,GACnBC,KAAK,CAACS,OAAN,CAAcC,IAAd,CAAmBC,IADA,GAEnBX,KAAK,CAACS,OAAN,CAAcC,IAAd,CAAmBE,MAHtB;YAIHC,YAAY,EAAEb,KAAK,CAACc,KAAN,CAAYC,MAAZ,CAAmBC,IAJ9B;YAKHZ,iBAAiB,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CALhB;YAMHC,eAAe,EAAEN,KAAK,CAACK,OAAN,CAAc,IAAd;UANd,CALJ;UAaHY,KAAK,EAAE,IAAAC,wBAAA,EAAgBlB,KAAhB,EAAuB;YAC1BmB,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAEzB,QAAQ,GAAG,wBAAH,GAA8B,sBAHxB;cAI1B0B,aAAa,EAAE;YAJW,CAAb,CADS;YAO1BC,KAAK,EAAE3B,QAAQ,GACTC,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBC,aADV,GAET5B,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBE;UATC,CAAvB;QAbJ,CAAP;;MAyBJ,KAAK,mBAAL;QACI,OAAO;UACH1B,SAAS,EAAE;YACP2B,UAAU,EAAE,QADL;YAEPC,MAAM,EAAE,EAFD;YAGPC,cAAc,EAAE,YAHT;YAIPC,UAAU,EAAEjC,KAAK,CAACK,OAAN,CAAc,KAAd,CAJL;YAKP6B,KAAK,EAAE;UALA,CADR;UAQHjB,KAAK,EAAE,IAAAC,wBAAA,EAAgBlB,KAAhB,EAAuB;YAC1BmB,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,EAFc;cAG1BC,UAAU,EAAE,sBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAb,CADS;YAO1BC,KAAK,EAAE3B,QAAQ,GACTC,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBE,MADV,GAET7B,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBhB;UATC,CAAvB;QARJ,CAAP;;MAoBJ,KAAK,SAAL;MACA;QACI,OAAO;UACHR,SAAS,EAAE;YACPgC,OAAO,EAAEnC,KAAK,CAACK,OAAN,CAAc,GAAd;UADF,CADR;UAIHY,KAAK,EAAE,IAAAC,wBAAA,EAAgBlB,KAAhB,EAAuB;YAC1BmB,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,KAFc;cAG1BC,UAAU,EAAEzB,QAAQ,GAAG,wBAAH,GAA8B,sBAHxB;cAI1B0B,aAAa,EAAE;YAJW,CAAb,CADS;YAO1BC,KAAK,EAAE3B,QAAQ,GACTC,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBE,MADV,GAET7B,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBhB;UATC,CAAvB;QAJJ,CAAP;IAlDR;EAmEH,CApEM,EAoEJ,CAACX,KAAD,EAAQF,OAAR,EAAiBC,QAAjB,CApEI,CAAP;AAqEH"}
+{"version":3,"names":["useVariantStyleMap","variant","selected","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","alignItems","height","justifyContent","paddingTop","width","strong","padding"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: theme.spacing(3.5),\n                        paddingVertical: theme.spacing(1.75),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 14,\n                        paddingVertical: 8.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 19.5,\n                            fontFamily: 'LexendDeca-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: theme.spacing(2.625),\n                        width: 48,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10,\n                            lineHeight: 10,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.1,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        padding: theme.spacing(2.5),\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 18.75,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected]);\n}\n"],"mappings":"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"}

package/build/commonjs/TabBase/TabBase.js

@@ -20,12 +20,6 @@ const useStyles = function () {
     root: {
       alignItems: 'center',
       justifyContent: 'center'
-    },
-    row: {
-      flexDirection: 'row'
-    },
-    column: {
-      flexDirection: 'column'
     }
   };
 };
@@ -36,7 +30,6 @@ function TabBase(props) {
     disabled = false,
     onPress,
     selected = false,
-    vertical = false,
     style,
     ...otherProps
   } = props;
@@ -44,7 +37,7 @@ function TabBase(props) {
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
     onPress: onPress,
     disabled: disabled,
-    style: (0, _styles.css)([styles.root, vertical ? styles.column : styles.row, style])
+    style: (0, _styles.css)([styles.root, style])
   }, otherProps), children);
 }
 

package/build/commonjs/TabBase/TabBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","root","alignItems","justifyContent","row","flexDirection","column","TabBase","props","children","disabled","onPress","selected","vertical","style","otherProps","styles","css"],"sources":["TabBase.tsx"],"sourcesContent":["import React from 'react';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport type TabBaseProps from './TabBaseProps';\n\ntype TabBaseStyles = NamedStylesStringUnion<'root' | 'row' | 'column'>;\n\nconst useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n        row: {\n            flexDirection: 'row',\n        },\n        column: {\n            flexDirection: 'column',\n        },\n    };\n};\n\nexport default function TabBase(props: TabBaseProps) {\n    const {\n        children,\n        disabled = false,\n        onPress,\n        selected = false,\n        vertical = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            disabled={disabled}\n            style={css([\n                styles.root,\n                vertical ? styles.column : styles.row,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {children}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd,CADH;IAKHC,GAAG,EAAE;MACDC,aAAa,EAAE;IADd,CALF;IAQHC,MAAM,EAAE;MACJD,aAAa,EAAE;IADX;EARL,CAAP;AAYH,CAbD;;AAee,SAASE,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,OAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,QAAQ,GAAG,KALT;IAMFC,KANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGhB,SAAS,EAAxB;EAEA,oBACI,6BAAC,mBAAD;IACI,OAAO,EAAEW,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAE,IAAAO,WAAA,EAAI,CACPD,MAAM,CAACf,IADA,EAEPY,QAAQ,GAAGG,MAAM,CAACV,MAAV,GAAmBU,MAAM,CAACZ,GAF3B,EAGPU,KAHO,CAAJ;EAHX,GAQQC,UARR,GAUKN,QAVL,CADJ;AAcH;;AAAA"}
+{"version":3,"names":["useStyles","root","alignItems","justifyContent","TabBase","props","children","disabled","onPress","selected","style","otherProps","styles","css"],"sources":["TabBase.tsx"],"sourcesContent":["import React from 'react';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport type TabBaseProps from './TabBaseProps';\n\ntype TabBaseStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function TabBase(props: TabBaseProps) {\n    const {\n        children,\n        disabled = false,\n        onPress,\n        selected = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            disabled={disabled}\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {children}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,OAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFN,KAPJ;EASA,MAAMO,MAAM,GAAGZ,SAAS,EAAxB;EAEA,oBACI,6BAAC,mBAAD;IACI,OAAO,EAAEQ,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPD,MAAM,CAACX,IADA,EAEPS,KAFO,CAAJ;EAHX,GAOQC,UAPR,GASKL,QATL,CADJ;AAaH;;AAAA"}

package/build/commonjs/TabBase/TabBaseProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabBaseProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport default interface TabBaseProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Content of the TabBase.\n     */\n    children: React.ReactNode;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Orientation of the TabBase. Default is horizontal.\n     * @default false\n     */\n    vertical?: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabBaseProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport default interface TabBaseProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Content of the TabBase.\n     */\n    children: React.ReactNode;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/Tabs/useTabsStyle.js

@@ -26,7 +26,10 @@ function useTabsStyle(variant) {
 
       case 'bottom-navigation':
         return {
-          container: {}
+          container: {
+            borderTopColor: theme.palette.border.base,
+            borderTopWidth: 0.5
+          }
         };
 
       case 'default':

package/build/commonjs/Tabs/useTabsStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useTabsStyle","variant","theme","useTheme","isDesktop","useBreakpointUp","useMemo","container","paddingBottom","paddingHorizontal"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: isDesktop ? 20 : 12,\n                    },\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {},\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: isDesktop ? 14 : 6,\n                    },\n                };\n        }\n    }, [theme, variant, isDesktop]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAOe,SAASA,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAlB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQL,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHM,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,SAAS,GAAG,EAAH,GAAQ;UAF7B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHG,SAAS,EAAE;QADR,CAAP;;MAGJ,KAAK,SAAL;MACA;QACI,OAAO;UACHA,SAAS,EAAE;YACPE,iBAAiB,EAAEL,SAAS,GAAG,EAAH,GAAQ;UAD7B;QADR,CAAP;IAdR;EAoBH,CArBM,EAqBJ,CAACF,KAAD,EAAQD,OAAR,EAAiBG,SAAjB,CArBI,CAAP;AAsBH"}
+{"version":3,"names":["useTabsStyle","variant","theme","useTheme","isDesktop","useBreakpointUp","useMemo","container","paddingBottom","paddingHorizontal","borderTopColor","palette","border","base","borderTopWidth"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: isDesktop ? 20 : 12,\n                    },\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        borderTopColor: theme.palette.border.base,\n                        borderTopWidth: 0.5,\n                    },\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: isDesktop ? 14 : 6,\n                    },\n                };\n        }\n    }, [theme, variant, isDesktop]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAOe,SAASA,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAlB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQL,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHM,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,SAAS,GAAG,EAAH,GAAQ;UAF7B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPG,cAAc,EAAER,KAAK,CAACS,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE;UAFT;QADR,CAAP;;MAMJ,KAAK,SAAL;MACA;QACI,OAAO;UACHP,SAAS,EAAE;YACPE,iBAAiB,EAAEL,SAAS,GAAG,EAAH,GAAQ;UAD7B;QADR,CAAP;IAjBR;EAuBH,CAxBM,EAwBJ,CAACF,KAAD,EAAQD,OAAR,EAAiBG,SAAjB,CAxBI,CAAP;AAyBH"}

package/build/module/Tab/Tab.js

@@ -3,9 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
-import Spacer from '../Spacer';
 import TabBase from '../TabBase';
-import { css, StyleSheet, useTheme } from '../styles';
+import { css, StyleSheet } from '../styles';
 import { cloneElementSafely } from '../utils';
 import useVariantStyleMap from './useVariantStyleMap';
 const styles = StyleSheet.create({
@@ -32,8 +31,6 @@ export default function Tab(props) {
     onTabInnerLayout,
     ...otherProps
   } = props;
-  const theme = useTheme();
-  const vertical = variant === 'bottom-navigation';
   const {
     container: containerStyle,
     inner: innerStyle,
@@ -41,21 +38,15 @@ export default function Tab(props) {
   } = useVariantStyleMap(variant, selected);
   const tabBaseStyle = css([styles.root, containerStyle, styleProp]);
   const tabInnerStyle = css([styles.filledInner, innerStyle]);
-  const pressEffect = selected ? 'none' : 'opacity';
   const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
-  const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;
-  const iconElement = cloneElementSafely(icon, {
-    fill: iconColor
-  });
+  const iconElement = cloneElementSafely(icon);
   const tabElement = typeof children !== 'string' ? cloneElementSafely(children, {
     selected
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconElement ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
     horizontalOffset: -6,
     invisible: !badgeVisible,
     verticalOffset: -4.5
-  }, iconElement), /*#__PURE__*/React.createElement(Spacer, {
-    size: 1.25
-  }), /*#__PURE__*/React.createElement(Text, {
+  }, iconElement), /*#__PURE__*/React.createElement(Text, {
     style: css(labelStyle)
   }, children)) : /*#__PURE__*/React.createElement(Badge, {
     horizontalOffset: -7,
@@ -65,9 +56,7 @@ export default function Tab(props) {
     style: css(labelStyle)
   }, children)));
   return /*#__PURE__*/React.createElement(TabBase, _extends({
-    pressEffect: pressEffect,
-    style: tabBaseStyle,
-    vertical: vertical
+    style: tabBaseStyle
   }, otherProps), /*#__PURE__*/React.createElement(View, {
     onLayout: onTabInnerLayout,
     style: tabInnerStyle

package/build/module/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","Text","View","Badge","Spacer","TabBase","css","StyleSheet","useTheme","cloneElementSafely","useVariantStyleMap","styles","create","root","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","theme","vertical","container","containerStyle","inner","innerStyle","label","labelStyle","tabBaseStyle","tabInnerStyle","pressEffect","iconColor","palette","strong","base","iconElement","fill","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport Spacer from '../Spacer';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;\n    const iconElement = cloneElementSafely(icon, { fill: iconColor });\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-6}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4.5}\n                    >\n                        {iconElement}\n                    </Badge>\n\n                    <Spacer size={1.25}/>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Platform","Text","View","Badge","TabBase","css","StyleSheet","cloneElementSafely","useVariantStyleMap","styles","create","root","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","inner","innerStyle","label","labelStyle","tabBaseStyle","tabInnerStyle","iconElement","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = cloneElementSafely(icon);\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-6}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4.5}\n                    >\n                        {iconElement}\n                    </Badge>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAqC,cAArC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIX,QAAQ,CAACY,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;AAWA,eAAe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,OAAO,GAAG,SAPR;IAQFC,KAAK,EAAEC,SARL;IASFC,gBATE;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAM;IACFa,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF5B,kBAAkB,CAACkB,OAAD,EAAUF,QAAV,CAJtB;EAMA,MAAMa,YAAY,GAAGhC,GAAG,CAAC,CACrBI,MAAM,CAACE,IADc,EAErBqB,cAFqB,EAGrBJ,SAHqB,CAAD,CAAxB;EAMA,MAAMU,aAAa,GAAGjC,GAAG,CAAC,CACtBI,MAAM,CAACK,WADe,EAEtBoB,UAFsB,CAAD,CAAzB;EAKA,MAAMZ,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMgB,WAAW,GAAGhC,kBAAkB,CAACe,IAAD,CAAtC;EAEA,MAAMkB,UAAU,GAAG,OAAOpB,QAAP,KAAoB,QAApB,GACfb,kBAAkB,CAACa,QAAD,EAAW;IACzBI;EADyB,CAAX,CADH,gBAKf,oBAAC,KAAD,CAAO,QAAP,QACKe,WAAW,gBACR,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACpB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,GAKKoB,WALL,CADJ,eASI,oBAAC,IAAD;IAAM,KAAK,EAAElC,GAAG,CAAC+B,UAAD;EAAhB,GACKhB,QADL,CATJ,CADQ,gBAeR,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,oBAAC,IAAD;IAAM,KAAK,EAAEd,GAAG,CAAC+B,UAAD;EAAhB,GACKhB,QADL,CALJ,CAhBR,CALJ;EAkCA,oBACI,oBAAC,OAAD;IACI,KAAK,EAAEiB;EADX,GAEQP,UAFR,gBAII,oBAAC,IAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAES;EAAzC,GACKE,UADL,CAJJ,CADJ;AAUH;AAAA"}

package/build/module/Tab/TabProps.js

@@ -1,2 +1,2 @@
-export const tabVariants = ['default', 'circular', 'bottom-navigation'];
+export const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'];
 //# sourceMappingURL=TabProps.js.map

package/build/module/Tab/TabProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const tabVariants = ['default', 'circular', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'default'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,mBAAxB,CAApB"}
+{"version":3,"names":["tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'default'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,eAAxB,EAAyC,mBAAzC,CAApB"}

package/build/module/Tab/useVariantStyleMap.js

@@ -14,17 +14,44 @@ export default function useVariantStyleMap(variant, selected) {
           inner: {
             backgroundColor: selected ? theme.palette.fill.base : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
-            paddingHorizontal: theme.spacing(4),
+            flexDirection: 'row',
+            gap: 5,
+            paddingHorizontal: theme.spacing(3.5),
             paddingVertical: theme.spacing(1.75)
           },
           label: createFontStyle(theme, {
             selector: _ => typographyOf({
               fontSize: 14,
               lineHeight: 18.2,
-              fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
+              fontFamily: 'PretendardStd-SemiBold',
               letterSpacing: 0
             }),
-            color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
+          })
+        };
+
+      case 'circular-home':
+        return {
+          container: {
+            paddingHorizontal: theme.spacing(0.75),
+            paddingVertical: theme.spacing(1)
+          },
+          inner: {
+            backgroundColor: selected ? theme.palette.fill.base : theme.palette.surface.base,
+            borderRadius: theme.shape.radius.full,
+            flexDirection: 'row',
+            gap: 5,
+            paddingHorizontal: 14,
+            paddingVertical: 8.5
+          },
+          label: createFontStyle(theme, {
+            selector: _ => typographyOf({
+              fontSize: 15,
+              lineHeight: 19.5,
+              fontFamily: 'LexendDeca-Medium',
+              letterSpacing: 0
+            }),
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
           })
         };
 
@@ -37,6 +64,10 @@ export default function useVariantStyleMap(variant, selected) {
             paddingTop: theme.spacing(2.625),
             width: 48
           },
+          inner: {
+            flexDirection: 'column',
+            gap: 4.75
+          },
           label: createFontStyle(theme, {
             selector: _ => typographyOf({
               fontSize: 10,
@@ -54,6 +85,10 @@ export default function useVariantStyleMap(variant, selected) {
           container: {
             padding: theme.spacing(2.5)
           },
+          inner: {
+            flexDirection: 'row',
+            gap: 5
+          },
           label: createFontStyle(theme, {
             selector: _ => typographyOf({
               fontSize: 15,

package/build/module/Tab/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","strong","alignItems","height","justifyContent","paddingTop","width","padding"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        paddingHorizontal: theme.spacing(4),\n                        paddingVertical: theme.spacing(1.75),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.strong,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: theme.spacing(2.625),\n                        width: 48,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10,\n                            lineHeight: 10,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.1,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        padding: theme.spacing(2.5),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 18.75,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","alignItems","height","justifyContent","paddingTop","width","strong","padding"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: theme.spacing(3.5),\n                        paddingVertical: theme.spacing(1.75),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 14,\n                        paddingVertical: 8.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 19.5,\n                            fontFamily: 'LexendDeca-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: theme.spacing(2.625),\n                        width: 48,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10,\n                            lineHeight: 10,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.1,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        padding: theme.spacing(2.5),\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 18.75,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAGA,SAASC,YAAT,QAA6B,qBAA7B;AACA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;AASA,eAAe,SAASC,kBAAT,CAA4BC,OAA5B,EAAiDC,QAAjD,EAAkF;EAC7F,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAOH,OAAO,CAAe,MAAM;IAC/B,QAAQK,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,iBAAiB,EAAEF,KAAK,CAACG,OAAN,CAAc,IAAd,CADZ;YAEPC,eAAe,EAAEJ,KAAK,CAACG,OAAN,CAAc,CAAd;UAFV,CADR;UAKHE,KAAK,EAAE;YACHC,eAAe,EAAEP,QAAQ,GACnBC,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC,IADA,GAEnBT,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBE,MAHtB;YAIHC,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,MAAZ,CAAmBC,IAJ9B;YAKHC,aAAa,EAAE,KALZ;YAMHC,GAAG,EAAE,CANF;YAOHd,iBAAiB,EAAEF,KAAK,CAACG,OAAN,CAAc,GAAd,CAPhB;YAQHC,eAAe,EAAEJ,KAAK,CAACG,OAAN,CAAc,IAAd;UARd,CALJ;UAeHc,KAAK,EAAEtB,eAAe,CAACK,KAAD,EAAQ;YAC1BkB,QAAQ,EAAGC,CAAD,IAAOzB,YAAY,CAAC;cAC1B0B,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAE,wBAHc;cAI1BC,aAAa,EAAE;YAJW,CAAD,CADH;YAO1BC,KAAK,EAAEzB,QAAQ,GACTC,KAAK,CAACO,OAAN,CAAckB,IAAd,CAAmBC,aADV,GAET1B,KAAK,CAACO,OAAN,CAAckB,IAAd,CAAmBhB;UATC,CAAR;QAfnB,CAAP;;MA2BJ,KAAK,eAAL;QACI,OAAO;UACHR,SAAS,EAAE;YACPC,iBAAiB,EAAEF,KAAK,CAACG,OAAN,CAAc,IAAd,CADZ;YAEPC,eAAe,EAAEJ,KAAK,CAACG,OAAN,CAAc,CAAd;UAFV,CADR;UAKHE,KAAK,EAAE;YACHC,eAAe,EAAEP,QAAQ,GACnBC,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC,IADA,GAEnBT,KAAK,CAACO,OAAN,CAAcoB,OAAd,CAAsBlB,IAHzB;YAIHE,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,MAAZ,CAAmBC,IAJ9B;YAKHC,aAAa,EAAE,KALZ;YAMHC,GAAG,EAAE,CANF;YAOHd,iBAAiB,EAAE,EAPhB;YAQHE,eAAe,EAAE;UARd,CALJ;UAeHa,KAAK,EAAEtB,eAAe,CAACK,KAAD,EAAQ;YAC1BkB,QAAQ,EAAGC,CAAD,IAAOzB,YAAY,CAAC;cAC1B0B,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAE,mBAHc;cAI1BC,aAAa,EAAE;YAJW,CAAD,CADH;YAO1BC,KAAK,EAAEzB,QAAQ,GACTC,KAAK,CAACO,OAAN,CAAckB,IAAd,CAAmBC,aADV,GAET1B,KAAK,CAACO,OAAN,CAAckB,IAAd,CAAmBhB;UATC,CAAR;QAfnB,CAAP;;MA2BJ,KAAK,mBAAL;QACI,OAAO;UACHR,SAAS,EAAE;YACP2B,UAAU,EAAE,QADL;YAEPC,MAAM,EAAE,EAFD;YAGPC,cAAc,EAAE,YAHT;YAIPC,UAAU,EAAE/B,KAAK,CAACG,OAAN,CAAc,KAAd,CAJL;YAKP6B,KAAK,EAAE;UALA,CADR;UAQH3B,KAAK,EAAE;YACHU,aAAa,EAAE,QADZ;YAEHC,GAAG,EAAE;UAFF,CARJ;UAYHC,KAAK,EAAEtB,eAAe,CAACK,KAAD,EAAQ;YAC1BkB,QAAQ,EAAGC,CAAD,IAAOzB,YAAY,CAAC;cAC1B0B,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,EAFc;cAG1BC,UAAU,EAAE,sBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAD,CADH;YAO1BC,KAAK,EAAEzB,QAAQ,GACTC,KAAK,CAACO,OAAN,CAAckB,IAAd,CAAmBQ,MADV,GAETjC,KAAK,CAACO,OAAN,CAAckB,IAAd,CAAmBhB;UATC,CAAR;QAZnB,CAAP;;MAwBJ,KAAK,SAAL;MACA;QACI,OAAO;UACHR,SAAS,EAAE;YACPiC,OAAO,EAAElC,KAAK,CAACG,OAAN,CAAc,GAAd;UADF,CADR;UAIHE,KAAK,EAAE;YACHU,aAAa,EAAE,KADZ;YAEHC,GAAG,EAAE;UAFF,CAJJ;UAQHC,KAAK,EAAEtB,eAAe,CAACK,KAAD,EAAQ;YAC1BkB,QAAQ,EAAGC,CAAD,IAAOzB,YAAY,CAAC;cAC1B0B,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,KAFc;cAG1BC,UAAU,EAAEvB,QAAQ,GAAG,wBAAH,GAA8B,sBAHxB;cAI1BwB,aAAa,EAAE;YAJW,CAAD,CADH;YAO1BC,KAAK,EAAEzB,QAAQ,GACTC,KAAK,CAACO,OAAN,CAAckB,IAAd,CAAmBQ,MADV,GAETjC,KAAK,CAACO,OAAN,CAAckB,IAAd,CAAmBhB;UATC,CAAR;QARnB,CAAP;IApFR;EAyGH,CA1Ga,EA0GX,CAACT,KAAD,EAAQF,OAAR,EAAiBC,QAAjB,CA1GW,CAAd;AA2GH"}

package/build/module/TabBase/TabBase.js

@@ -9,12 +9,6 @@ const useStyles = function () {
     root: {
       alignItems: 'center',
       justifyContent: 'center'
-    },
-    row: {
-      flexDirection: 'row'
-    },
-    column: {
-      flexDirection: 'column'
     }
   };
 };
@@ -25,7 +19,6 @@ export default function TabBase(props) {
     disabled = false,
     onPress,
     selected = false,
-    vertical = false,
     style,
     ...otherProps
   } = props;
@@ -33,7 +26,7 @@ export default function TabBase(props) {
   return /*#__PURE__*/React.createElement(ButtonBase, _extends({
     onPress: onPress,
     disabled: disabled,
-    style: css([styles.root, vertical ? styles.column : styles.row, style])
+    style: css([styles.root, style])
   }, otherProps), children);
 }
 ;

package/build/module/TabBase/TabBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","css","ButtonBase","useStyles","root","alignItems","justifyContent","row","flexDirection","column","TabBase","props","children","disabled","onPress","selected","vertical","style","otherProps","styles"],"sources":["TabBase.tsx"],"sourcesContent":["import React from 'react';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport type TabBaseProps from './TabBaseProps';\n\ntype TabBaseStyles = NamedStylesStringUnion<'root' | 'row' | 'column'>;\n\nconst useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n        row: {\n            flexDirection: 'row',\n        },\n        column: {\n            flexDirection: 'column',\n        },\n    };\n};\n\nexport default function TabBase(props: TabBaseProps) {\n    const {\n        children,\n        disabled = false,\n        onPress,\n        selected = false,\n        vertical = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            disabled={disabled}\n            style={css([\n                styles.root,\n                vertical ? styles.column : styles.row,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {children}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,UAAP,MAAuB,eAAvB;;AAKA,MAAMC,SAAmC,GAAG,YAA2B;EACnE,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd,CADH;IAKHC,GAAG,EAAE;MACDC,aAAa,EAAE;IADd,CALF;IAQHC,MAAM,EAAE;MACJD,aAAa,EAAE;IADX;EARL,CAAP;AAYH,CAbD;;AAeA,eAAe,SAASE,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,OAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,QAAQ,GAAG,KALT;IAMFC,KANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGhB,SAAS,EAAxB;EAEA,oBACI,oBAAC,UAAD;IACI,OAAO,EAAEW,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAEZ,GAAG,CAAC,CACPkB,MAAM,CAACf,IADA,EAEPY,QAAQ,GAAGG,MAAM,CAACV,MAAV,GAAmBU,MAAM,CAACZ,GAF3B,EAGPU,KAHO,CAAD;EAHd,GAQQC,UARR,GAUKN,QAVL,CADJ;AAcH;AAAA"}
+{"version":3,"names":["React","css","ButtonBase","useStyles","root","alignItems","justifyContent","TabBase","props","children","disabled","onPress","selected","style","otherProps","styles"],"sources":["TabBase.tsx"],"sourcesContent":["import React from 'react';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport type TabBaseProps from './TabBaseProps';\n\ntype TabBaseStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function TabBase(props: TabBaseProps) {\n    const {\n        children,\n        disabled = false,\n        onPress,\n        selected = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            disabled={disabled}\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {children}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,UAAP,MAAuB,eAAvB;;AAKA,MAAMC,SAAmC,GAAG,YAA2B;EACnE,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,OAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFN,KAPJ;EASA,MAAMO,MAAM,GAAGZ,SAAS,EAAxB;EAEA,oBACI,oBAAC,UAAD;IACI,OAAO,EAAEQ,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAET,GAAG,CAAC,CACPc,MAAM,CAACX,IADA,EAEPS,KAFO,CAAD;EAHd,GAOQC,UAPR,GASKL,QATL,CADJ;AAaH;AAAA"}

package/build/module/TabBase/TabBaseProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabBaseProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport default interface TabBaseProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Content of the TabBase.\n     */\n    children: React.ReactNode;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Orientation of the TabBase. Default is horizontal.\n     * @default false\n     */\n    vertical?: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabBaseProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport default interface TabBaseProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Content of the TabBase.\n     */\n    children: React.ReactNode;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n}> {}\n"],"mappings":""}

package/build/module/Tabs/useTabsStyle.js

@@ -16,7 +16,10 @@ export default function useTabsStyle(variant) {
 
       case 'bottom-navigation':
         return {
-          container: {}
+          container: {
+            borderTopColor: theme.palette.border.base,
+            borderTopWidth: 0.5
+          }
         };
 
       case 'default':

package/build/module/Tabs/useTabsStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","theme","isDesktop","container","paddingBottom","paddingHorizontal"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: isDesktop ? 20 : 12,\n                    },\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {},\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: isDesktop ? 14 : 6,\n                    },\n                };\n        }\n    }, [theme, variant, isDesktop]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAMI,SAAS,GAAGL,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAjC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,SAAS,GAAG,EAAH,GAAQ;UAF7B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHC,SAAS,EAAE;QADR,CAAP;;MAGJ,KAAK,SAAL;MACA;QACI,OAAO;UACHA,SAAS,EAAE;YACPE,iBAAiB,EAAEH,SAAS,GAAG,EAAH,GAAQ;UAD7B;QADR,CAAP;IAdR;EAoBH,CArBa,EAqBX,CAACD,KAAD,EAAQD,OAAR,EAAiBE,SAAjB,CArBW,CAAd;AAsBH"}
+{"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","theme","isDesktop","container","paddingBottom","paddingHorizontal","borderTopColor","palette","border","base","borderTopWidth"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: isDesktop ? 20 : 12,\n                    },\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        borderTopColor: theme.palette.border.base,\n                        borderTopWidth: 0.5,\n                    },\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: isDesktop ? 14 : 6,\n                    },\n                };\n        }\n    }, [theme, variant, isDesktop]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAMI,SAAS,GAAGL,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAjC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,SAAS,GAAG,EAAH,GAAQ;UAF7B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHC,SAAS,EAAE;YACPG,cAAc,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE;UAFT;QADR,CAAP;;MAMJ,KAAK,SAAL;MACA;QACI,OAAO;UACHP,SAAS,EAAE;YACPE,iBAAiB,EAAEH,SAAS,GAAG,EAAH,GAAQ;UAD7B;QADR,CAAP;IAjBR;EAuBH,CAxBa,EAwBX,CAACD,KAAD,EAAQD,OAAR,EAAiBE,SAAjB,CAxBW,CAAd;AAyBH"}

package/build/typescript/Tab/TabProps.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
-export declare const tabVariants: readonly ["default", "circular", "bottom-navigation"];
+export declare const tabVariants: readonly ["default", "circular", "circular-home", "bottom-navigation"];
 export declare type TabVariant = typeof tabVariants[number];
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
     /**

package/build/typescript/TabBase/TabBaseProps.d.ts

@@ -11,10 +11,5 @@ export default interface TabBaseProps extends OverridableComponentProps<ButtonBa
      * @default false
      */
     selected?: boolean;
-    /**
-     * Orientation of the TabBase. Default is horizontal.
-     * @default false
-     */
-    vertical?: boolean;
 }> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.13",
+  "version": "3.0.0-alpha.14",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "edefc67f0ec818a5590cf7357f4f5154121e4e31"
+  "gitHead": "fde72b58979b933032829708992f15f1321ce408"
 }

package/src/Tab/Tab.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
-import Spacer from '../Spacer';
 import TabBase from '../TabBase';
-import { css, StyleSheet, useTheme } from '../styles';
+import { css, StyleSheet } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type TabProps from './TabProps';
 import type { TabVariant } from './TabProps';
@@ -34,10 +33,6 @@ export default function Tab(props: TabProps) {
         ...otherProps
     } = props;
 
-    const theme = useTheme();
-
-    const vertical = variant === 'bottom-navigation';
-
     const {
         container: containerStyle,
         inner: innerStyle,
@@ -55,11 +50,8 @@ export default function Tab(props: TabProps) {
         innerStyle,
     ]);
 
-    const pressEffect = selected ? 'none' : 'opacity';
-
     const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
-    const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;
-    const iconElement = cloneElementSafely(icon, { fill: iconColor });
+    const iconElement = cloneElementSafely(icon);
 
     const tabElement = typeof children !== 'string' ? (
         cloneElementSafely(children, {
@@ -77,8 +69,6 @@ export default function Tab(props: TabProps) {
                         {iconElement}
                     </Badge>
 
-                    <Spacer size={1.25}/>
-
                     <Text style={css(labelStyle)}>
                         {children}
                     </Text>
@@ -99,9 +89,7 @@ export default function Tab(props: TabProps) {
 
     return (
         <TabBase
-            pressEffect={pressEffect}
             style={tabBaseStyle}
-            vertical={vertical}
             {...otherProps}
         >
             <View onLayout={onTabInnerLayout} style={tabInnerStyle}>

package/src/Tab/TabProps.ts

@@ -3,7 +3,7 @@ import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
-export const tabVariants = ['default', 'circular', 'bottom-navigation'] as const;
+export const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;
 export type TabVariant = typeof tabVariants[number];
 
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {

package/src/Tab/useVariantStyleMap.ts

@@ -27,19 +27,49 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                             ? theme.palette.fill.base
                             : theme.palette.fill.weaker,
                         borderRadius: theme.shape.radius.full,
-                        paddingHorizontal: theme.spacing(4),
+                        flexDirection: 'row',
+                        gap: 5,
+                        paddingHorizontal: theme.spacing(3.5),
                         paddingVertical: theme.spacing(1.75),
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
                             fontSize: 14,
                             lineHeight: 18.2,
-                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: selected
+                            ? theme.palette.text.strongInverse
+                            : theme.palette.text.base,
+                    }),
+                };
+            case 'circular-home':
+                return {
+                    container: {
+                        paddingHorizontal: theme.spacing(0.75),
+                        paddingVertical: theme.spacing(1),
+                    },
+                    inner: {
+                        backgroundColor: selected
+                            ? theme.palette.fill.base
+                            : theme.palette.surface.base,
+                        borderRadius: theme.shape.radius.full,
+                        flexDirection: 'row',
+                        gap: 5,
+                        paddingHorizontal: 14,
+                        paddingVertical: 8.5,
+                    },
+                    label: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 15,
+                            lineHeight: 19.5,
+                            fontFamily: 'LexendDeca-Medium',
                             letterSpacing: 0,
                         }),
                         color: selected
                             ? theme.palette.text.strongInverse
-                            : theme.palette.text.strong,
+                            : theme.palette.text.base,
                     }),
                 };
             case 'bottom-navigation':
@@ -51,6 +81,10 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         paddingTop: theme.spacing(2.625),
                         width: 48,
                     },
+                    inner: {
+                        flexDirection: 'column',
+                        gap: 4.75,
+                    },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
                             fontSize: 10,
@@ -69,6 +103,10 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                     container: {
                         padding: theme.spacing(2.5),
                     },
+                    inner: {
+                        flexDirection: 'row',
+                        gap: 5,
+                    },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
                             fontSize: 15,

package/src/TabBase/TabBase.tsx

@@ -3,7 +3,7 @@ import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import type TabBaseProps from './TabBaseProps';
 
-type TabBaseStyles = NamedStylesStringUnion<'root' | 'row' | 'column'>;
+type TabBaseStyles = NamedStylesStringUnion<'root'>;
 
 const useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {
     return {
@@ -11,12 +11,6 @@ const useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {
             alignItems: 'center',
             justifyContent: 'center',
         },
-        row: {
-            flexDirection: 'row',
-        },
-        column: {
-            flexDirection: 'column',
-        },
     };
 };
 
@@ -26,7 +20,6 @@ export default function TabBase(props: TabBaseProps) {
         disabled = false,
         onPress,
         selected = false,
-        vertical = false,
         style,
         ...otherProps
     } = props;
@@ -39,7 +32,6 @@ export default function TabBase(props: TabBaseProps) {
             disabled={disabled}
             style={css([
                 styles.root,
-                vertical ? styles.column : styles.row,
                 style,
             ])}
             {...otherProps}

package/src/TabBase/TabBaseProps.ts

@@ -13,10 +13,4 @@ export default interface TabBaseProps extends OverridableComponentProps<ButtonBa
      * @default false
      */
     selected?: boolean;
-
-    /**
-     * Orientation of the TabBase. Default is horizontal.
-     * @default false
-     */
-    vertical?: boolean;
 }> {}

package/src/Tabs/useTabsStyle.ts

@@ -24,7 +24,10 @@ export default function useTabsStyle(variant: TabVariant) {
                 };
             case 'bottom-navigation':
                 return {
-                    container: {},
+                    container: {
+                        borderTopColor: theme.palette.border.base,
+                        borderTopWidth: 0.5,
+                    },
                 };
             case 'default':
             default: