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

package/build/commonjs/SnackbarContent/SnackbarContent.js

@@ -33,11 +33,24 @@ const useStyles = function () {
     root: {
       flexDirection: 'row',
       alignItems: 'center',
+      alignSelf: 'center',
       backgroundColor: theme.palette.surface.accent,
       borderRadius: 22,
+      maxWidth: 400,
       paddingBottom: theme.spacing(2.25),
       paddingHorizontal: theme.spacing(4),
       paddingTop: theme.spacing(2)
+    },
+    actionButton: {
+      marginLeft: theme.spacing(6)
+    },
+    actionLabel: {
+      paddingBottom: theme.spacing(1.5),
+      paddingTop: theme.spacing(1.25)
+    },
+    actionElement: {
+      paddingLeft: theme.spacing(2),
+      paddingVertical: theme.spacing(1.25)
     }
   };
 };
@@ -57,18 +70,23 @@ function SnackbarContent(props) {
   const theme = (0, _styles2.useTheme)();
   const titleFontStyle = (0, _styles2.createFontStyle)(theme, {
     selector: _ => (0, _styles.typographyOf)({
-      fontSize: 14,
-      lineHeight: 18.2,
-      fontFamily: 'Pretendard-SemiBold',
+      fontSize: 15,
+      lineHeight: 19.5,
+      fontFamily: 'PretendardStd-SemiBold',
       letterSpacing: 0
     }),
     color: theme.palette.text.strongInverse
   });
   const messageFontStyle = (0, _styles2.createFontStyle)(theme, {
-    selector: _ => (0, _styles.typographyOf)({
-      fontSize: 13,
-      lineHeight: 16.9,
-      fontFamily: 'Pretendard-Regular',
+    selector: _ => title ? (0, _styles.typographyOf)({
+      fontSize: 12,
+      lineHeight: 15.6,
+      fontFamily: 'PretendardStd-Regular',
+      letterSpacing: 0
+    }) : (0, _styles.typographyOf)({
+      fontSize: 14,
+      lineHeight: 18.2,
+      fontFamily: 'PretendardStd-Regular',
       letterSpacing: 0
     }),
     color: theme.palette.text.strongInverse
@@ -82,8 +100,11 @@ function SnackbarContent(props) {
     }),
     color: theme.palette.text.accent
   });
+  const hasActionButton = !!(actionContent && onPress);
   const rootStyle = (0, _styles2.css)([styles.root, startIcon ? {
     borderRadius: theme.shape.radius.xl
+  } : undefined, hasActionButton ? {
+    width: '100%'
   } : undefined, styleProp]);
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
     disabled: !onPress,
@@ -103,12 +124,16 @@ function SnackbarContent(props) {
     style: (0, _styles2.css)([messageFontStyle])
   })), actionContent ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     flex: 1
-  }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
-    size: 1
-  }), typeof actionContent === 'string' ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.actionButton
+  }, typeof actionContent === 'string' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.actionLabel
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: actionContent,
     style: labelFontStyle
-  }) : actionContent) : null);
+  })) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.actionElement
+  }, actionContent))) : null);
 }
 
 ;

package/build/commonjs/SnackbarContent/SnackbarContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","flexDirection","alignItems","backgroundColor","palette","surface","accent","borderRadius","paddingBottom","spacing","paddingHorizontal","paddingTop","SnackbarContent","props","actionContent","message","title","onPress","style","styleProp","status","startIcon","otherProps","styles","titleFontStyle","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","messageFontStyle","labelFontStyle","rootStyle","css","shape","radius","xl","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\nimport StatusIcon from './StatusIcon';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            backgroundColor: theme.palette.surface.accent,\n            borderRadius: 22,\n            paddingBottom: theme.spacing(2.25),\n            paddingHorizontal: theme.spacing(4),\n            paddingTop: theme.spacing(2),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionContent,\n        message,\n        title,\n        onPress,\n        style: styleProp,\n        status = 'info',\n        startIcon,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 14,\n            lineHeight: 18.2,\n            fontFamily: 'Pretendard-SemiBold',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 13,\n            lineHeight: 16.9,\n            fontFamily: 'Pretendard-Regular',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 13,\n            lineHeight: 16.25,\n            fontFamily: 'LexendDeca-SemiBold',\n            letterSpacing: -0.26,\n        }),\n        color: theme.palette.text.accent,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {startIcon ? (\n                <React.Fragment>\n                    {startIcon}\n\n                    <Spacer size={3}/>\n                </React.Fragment>\n            ) : status !== 'info' ? (\n                <React.Fragment>\n                    <StatusIcon status={status}/>\n\n                    <Spacer size={1.5}/>\n                </React.Fragment>\n            ) : null}\n\n            <Column>\n                {title ? (\n                    <Typography\n                        children={title}\n                        style={css([titleFontStyle])}\n                    />\n                ) : null}\n\n                <Text\n                    children={message}\n                    style={css([messageFontStyle])}\n                />\n            </Column>\n\n            {actionContent ? (\n                <React.Fragment>\n                    <Spacer flex={1}/>\n\n                    <Spacer size={1}/>\n\n                    {typeof actionContent === 'string' ? (\n                        <Text\n                            children={actionContent}\n                            style={labelFontStyle}\n                        />\n                    ) : (actionContent)}\n                </React.Fragment>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","flexDirection","alignItems","alignSelf","backgroundColor","palette","surface","accent","borderRadius","maxWidth","paddingBottom","spacing","paddingHorizontal","paddingTop","actionButton","marginLeft","actionLabel","actionElement","paddingLeft","paddingVertical","SnackbarContent","props","actionContent","message","title","onPress","style","styleProp","status","startIcon","otherProps","styles","titleFontStyle","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","messageFontStyle","labelFontStyle","hasActionButton","rootStyle","css","shape","radius","xl","undefined","width"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\nimport StatusIcon from './StatusIcon';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton' | 'actionLabel' | 'actionElement'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            alignSelf: 'center',\n            backgroundColor: theme.palette.surface.accent,\n            borderRadius: 22,\n            maxWidth: 400,\n            paddingBottom: theme.spacing(2.25),\n            paddingHorizontal: theme.spacing(4),\n            paddingTop: theme.spacing(2),\n        },\n        actionButton: {\n            marginLeft: theme.spacing(6),\n        },\n        actionLabel: {\n            paddingBottom: theme.spacing(1.5),\n            paddingTop: theme.spacing(1.25),\n        },\n        actionElement: {\n            paddingLeft: theme.spacing(2),\n            paddingVertical: theme.spacing(1.25),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionContent,\n        message,\n        title,\n        onPress,\n        style: styleProp,\n        status = 'info',\n        startIcon,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 15,\n            lineHeight: 19.5,\n            fontFamily: 'PretendardStd-SemiBold',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (_) => title\n            ? typographyOf({\n                fontSize: 12,\n                lineHeight: 15.6,\n                fontFamily: 'PretendardStd-Regular',\n                letterSpacing: 0,\n            })\n            : typographyOf({\n                fontSize: 14,\n                lineHeight: 18.2,\n                fontFamily: 'PretendardStd-Regular',\n                letterSpacing: 0,\n            }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 13,\n            lineHeight: 16.25,\n            fontFamily: 'LexendDeca-SemiBold',\n            letterSpacing: -0.26,\n        }),\n        color: theme.palette.text.accent,\n    });\n\n    const hasActionButton = !!(actionContent && onPress);\n\n    const rootStyle = css([\n        styles.root,\n        startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,\n        hasActionButton ? { width: '100%' } : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {startIcon ? (\n                <React.Fragment>\n                    {startIcon}\n\n                    <Spacer size={3}/>\n                </React.Fragment>\n            ) : status !== 'info' ? (\n                <React.Fragment>\n                    <StatusIcon status={status}/>\n\n                    <Spacer size={1.5}/>\n                </React.Fragment>\n            ) : null}\n\n            <Column>\n                {title ? (\n                    <Typography\n                        children={title}\n                        style={css([titleFontStyle])}\n                    />\n                ) : null}\n\n                <Text\n                    children={message}\n                    style={css([messageFontStyle])}\n                />\n            </Column>\n\n            {actionContent ? (\n                <React.Fragment>\n                    <Spacer flex={1}/>\n\n                    <View style={styles.actionButton}>\n                        {typeof actionContent === 'string' ? (\n                            <View style={styles.actionLabel}>\n                                <Text\n                                    children={actionContent}\n                                    style={labelFontStyle}\n                                />\n                            </View>\n                        ) : (\n                            <View style={styles.actionElement}>\n                                {actionContent}\n                            </View>\n                        )}\n                    </View>\n                </React.Fragment>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/SnackbarContent/StatusIcon.js

@@ -23,14 +23,12 @@ function StatusIcon(props) {
     case 'success':
       return /*#__PURE__*/_react.default.createElement(_icons.CheckCircle, {
         color: 'accent',
-        enableV2: true,
         height: 17,
         width: 14
       });
 
     case 'fail':
       return /*#__PURE__*/_react.default.createElement(_icons.InfoCircle, {
-        enableV2: true,
         fill: theme.palette.status.danger,
         height: 17,
         width: 14

package/build/commonjs/SnackbarContent/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["StatusIcon","props","status","theme","useTheme","palette","danger"],"sources":["StatusIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { CheckCircle, InfoCircle } from '../internal/icons';\nimport { useTheme } from '../styles';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ninterface StatusIconProps {\n    status: SnackbarContentProps['status'];\n}\n\nexport default function StatusIcon(props: StatusIconProps) {\n    const { status } = props;\n\n    const theme = useTheme();\n\n    switch (status) {\n        case 'success':\n            return (\n                <CheckCircle\n                    color={'accent'}\n                    enableV2={true}\n                    height={17}\n                    width={14}\n                />\n            );\n        case 'fail':\n            return (\n                <InfoCircle\n                    enableV2={true}\n                    fill={theme.palette.status.danger}\n                    height={17}\n                    width={14}\n                />\n            );\n        default:\n            return null;\n    }\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAOe,SAASA,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IAAEC;EAAF,IAAaD,KAAnB;EAEA,MAAME,KAAK,GAAG,IAAAC,gBAAA,GAAd;;EAEA,QAAQF,MAAR;IACI,KAAK,SAAL;MACI,oBACI,6BAAC,kBAAD;QACI,KAAK,EAAE,QADX;QAEI,QAAQ,EAAE,IAFd;QAGI,MAAM,EAAE,EAHZ;QAII,KAAK,EAAE;MAJX,EADJ;;IAQJ,KAAK,MAAL;MACI,oBACI,6BAAC,iBAAD;QACI,QAAQ,EAAE,IADd;QAEI,IAAI,EAAEC,KAAK,CAACE,OAAN,CAAcH,MAAd,CAAqBI,MAF/B;QAGI,MAAM,EAAE,EAHZ;QAII,KAAK,EAAE;MAJX,EADJ;;IAQJ;MACI,OAAO,IAAP;EApBR;AAsBH"}
+{"version":3,"names":["StatusIcon","props","status","theme","useTheme","palette","danger"],"sources":["StatusIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { CheckCircle, InfoCircle } from '../internal/icons';\nimport { useTheme } from '../styles';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ninterface StatusIconProps {\n    status: SnackbarContentProps['status'];\n}\n\nexport default function StatusIcon(props: StatusIconProps) {\n    const { status } = props;\n\n    const theme = useTheme();\n\n    switch (status) {\n        case 'success':\n            return (\n                <CheckCircle\n                    color={'accent'}\n                    height={17}\n                    width={14}\n                />\n            );\n        case 'fail':\n            return (\n                <InfoCircle\n                    fill={theme.palette.status.danger}\n                    height={17}\n                    width={14}\n                />\n            );\n        default:\n            return null;\n    }\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAOe,SAASA,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IAAEC;EAAF,IAAaD,KAAnB;EAEA,MAAME,KAAK,GAAG,IAAAC,gBAAA,GAAd;;EAEA,QAAQF,MAAR;IACI,KAAK,SAAL;MACI,oBACI,6BAAC,kBAAD;QACI,KAAK,EAAE,QADX;QAEI,MAAM,EAAE,EAFZ;QAGI,KAAK,EAAE;MAHX,EADJ;;IAOJ,KAAK,MAAL;MACI,oBACI,6BAAC,iBAAD;QACI,IAAI,EAAEC,KAAK,CAACE,OAAN,CAAcH,MAAd,CAAqBI,MAD/B;QAEI,MAAM,EAAE,EAFZ;QAGI,KAAK,EAAE;MAHX,EADJ;;IAOJ;MACI,OAAO,IAAP;EAlBR;AAoBH"}

package/build/commonjs/SnackbarContent/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _LegacySnackbarContent.default;
+    return _SnackbarContent.default;
   }
 });
 
-var _LegacySnackbarContent = _interopRequireDefault(require("./LegacySnackbarContent"));
+var _SnackbarContent = _interopRequireDefault(require("./SnackbarContent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/build/commonjs/SnackbarContent/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacySnackbarContent';\nexport type { default as SnackbarContentProps } from './LegacySnackbarContentProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './SnackbarContent';\nexport type { default as SnackbarContentProps } from './SnackbarContentProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/SvgIcon/index.js

@@ -6,11 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _LegacySvgIcon.default;
+    return _SvgIcon.default;
   }
 });
+Object.defineProperty(exports, "svgIconColors", {
+  enumerable: true,
+  get: function () {
+    return _SvgIconProps.svgIconColors;
+  }
+});
+Object.defineProperty(exports, "svgIconSizes", {
+  enumerable: true,
+  get: function () {
+    return _SvgIconProps.svgIconSizes;
+  }
+});
+
+var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
 
-var _LegacySvgIcon = _interopRequireDefault(require("./LegacySvgIcon"));
+var _SvgIconProps = require("./SvgIconProps");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/build/commonjs/SvgIcon/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacySvgIcon';\nexport type { default as SvgIconProps } from './LegacySvgIconProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './SvgIcon';\nexport type { default as SvgIconProps } from './SvgIconProps';\nexport { svgIconColors, svgIconSizes } from './SvgIconProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

package/build/commonjs/Tab/Tab.js

@@ -13,7 +13,7 @@ var _Badge = _interopRequireDefault(require("../Badge"));
 
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 
-var _TabBase = _interopRequireDefault(require("../TabBase/TabBase"));
+var _TabBase = _interopRequireDefault(require("../TabBase"));
 
 var _styles = require("../styles");
 

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/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 invisible={!badgeVisible}>\n                        {iconElement}\n                    </Badge>\n\n                    <Spacer size={1.25}/>\n                </React.Fragment>\n            ) : null}\n\n            <Text style={css(labelStyle)}>\n                {children}\n            </Text>\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":";;;;;;;AAAA;;AACA;;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,MAAMa,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAGP,OAAO,KAAK,mBAA7B;EAEA,MAAM;IACFQ,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF,IAAAC,2BAAA,EAAmBd,OAAnB,EAA4BF,QAA5B,CAJJ;EAMA,MAAMiB,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBnC,MAAM,CAACG,IADc,EAErByB,cAFqB,EAGrBP,SAHqB,CAAJ,CAArB;EAMA,MAAMe,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBnC,MAAM,CAACO,WADe,EAEtBuB,UAFsB,CAAJ,CAAtB;EAKA,MAAMO,WAAW,GAAGpB,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMsB,SAAS,GAAGrB,QAAQ,GAAGO,KAAK,CAACe,OAAN,CAAcxB,IAAd,CAAmByB,MAAtB,GAA+BhB,KAAK,CAACe,OAAN,CAAcxB,IAAd,CAAmB0B,IAA5E;EACA,MAAMC,WAAW,GAAG,IAAAC,yBAAA,EAAmB5B,IAAnB,EAAyB;IAAE6B,IAAI,EAAEN;EAAR,CAAzB,CAApB;EAEA,MAAMO,UAAU,GAAG,OAAOhC,QAAP,KAAoB,QAApB,GACf,IAAA8B,yBAAA,EAAmB9B,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKyB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IAAO,SAAS,EAAE,CAAC9B;EAAnB,GACK8B,WADL,CADJ,eAKI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EALJ,CADQ,GAQR,IATR,eAWI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAP,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CAXJ,CALJ;EAsBA,oBACI,6BAAC,gBAAD;IACI,WAAW,EAAEwB,WADjB;IAEI,KAAK,EAAEH,YAFX;IAGI,QAAQ,EAAER;EAHd,GAIQH,UAJR,gBAMI,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEc;EAAzC,GACKS,UADL,CANJ,CADJ;AAYH;;AAAA"}
+{"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 invisible={!badgeVisible}>\n                        {iconElement}\n                    </Badge>\n\n                    <Spacer size={1.25}/>\n                </React.Fragment>\n            ) : null}\n\n            <Text style={css(labelStyle)}>\n                {children}\n            </Text>\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":";;;;;;;AAAA;;AACA;;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,MAAMa,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAGP,OAAO,KAAK,mBAA7B;EAEA,MAAM;IACFQ,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF,IAAAC,2BAAA,EAAmBd,OAAnB,EAA4BF,QAA5B,CAJJ;EAMA,MAAMiB,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBnC,MAAM,CAACG,IADc,EAErByB,cAFqB,EAGrBP,SAHqB,CAAJ,CAArB;EAMA,MAAMe,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBnC,MAAM,CAACO,WADe,EAEtBuB,UAFsB,CAAJ,CAAtB;EAKA,MAAMO,WAAW,GAAGpB,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMsB,SAAS,GAAGrB,QAAQ,GAAGO,KAAK,CAACe,OAAN,CAAcxB,IAAd,CAAmByB,MAAtB,GAA+BhB,KAAK,CAACe,OAAN,CAAcxB,IAAd,CAAmB0B,IAA5E;EACA,MAAMC,WAAW,GAAG,IAAAC,yBAAA,EAAmB5B,IAAnB,EAAyB;IAAE6B,IAAI,EAAEN;EAAR,CAAzB,CAApB;EAEA,MAAMO,UAAU,GAAG,OAAOhC,QAAP,KAAoB,QAApB,GACf,IAAA8B,yBAAA,EAAmB9B,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKyB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IAAO,SAAS,EAAE,CAAC9B;EAAnB,GACK8B,WADL,CADJ,eAKI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EALJ,CADQ,GAQR,IATR,eAWI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAP,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CAXJ,CALJ;EAsBA,oBACI,6BAAC,gBAAD;IACI,WAAW,EAAEwB,WADjB;IAEI,KAAK,EAAEH,YAFX;IAGI,QAAQ,EAAER;EAHd,GAIQH,UAJR,gBAMI,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEc;EAAzC,GACKS,UADL,CANJ,CADJ;AAYH;;AAAA"}

package/build/commonjs/Tab/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _LegacyTab.default;
+    return _Tab.default;
   }
 });
 
-var _LegacyTab = _interopRequireDefault(require("./LegacyTab"));
+var _Tab = _interopRequireDefault(require("./Tab"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyTab';\nexport type { default as TabProps, TabVariant, TabIndicatorSize } from './LegacyTabProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabVariant } from './TabProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Tab/useVariantStyleMap.js

@@ -31,7 +31,7 @@ function useVariantStyleMap(variant, selected) {
             selector: _ => (0, _styles.typographyOf)({
               fontSize: 14,
               lineHeight: 18.2,
-              fontFamily: 'Pretendard-SemiBold',
+              fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
               letterSpacing: 0
             }),
             color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
@@ -51,7 +51,7 @@ function useVariantStyleMap(variant, selected) {
             selector: _ => (0, _styles.typographyOf)({
               fontSize: 10,
               lineHeight: 10,
-              fontFamily: 'Pretendard-Medium',
+              fontFamily: 'PretendardStd-Medium',
               letterSpacing: -0.1
             }),
             color: selected ? theme.palette.text.strong : theme.palette.text.base
@@ -68,7 +68,7 @@ function useVariantStyleMap(variant, selected) {
             selector: _ => (0, _styles.typographyOf)({
               fontSize: 15,
               lineHeight: 18.75,
-              fontFamily: 'Pretendard-SemiBold',
+              fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
               letterSpacing: 0
             }),
             color: selected ? theme.palette.text.strong : theme.palette.text.base

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: 'Pretendard-SemiBold',\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: 'Pretendard-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: 'Pretendard-SemiBold',\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,EAAE,qBAHc;cAI1BC,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,mBAHc;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,EAAE,qBAHc;cAI1BC,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","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":"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"}

package/build/commonjs/TabBase/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _LegacyTabBase.default;
+    return _TabBase.default;
   }
 });
 
-var _LegacyTabBase = _interopRequireDefault(require("./LegacyTabBase"));
+var _TabBase = _interopRequireDefault(require("./TabBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyTabBase';\nexport type { default as TabBaseProps } from './TabBaseProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './TabBase';\nexport type { default as TabBaseProps } from './TabBaseProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Tabs/Tabs.js

@@ -29,6 +29,8 @@ var _InternalContext = _interopRequireDefault(require("./InternalContext"));
 
 var _utils = require("./utils");
 
+var _useTabsStyle = _interopRequireDefault(require("./useTabsStyle"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -50,7 +52,7 @@ const useStyles = function () {
     },
     bottomDivider: {
       borderBottomColor: theme.palette.border.base,
-      borderBottomWidth: 1
+      borderBottomWidth: 0.5
     }
   };
 };
@@ -60,6 +62,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
 
   const {
     children,
+    color = 'default',
     initialIndex = 0,
     disableIndicator = false,
     indicatorSize = 'fit-content',
@@ -80,6 +83,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
   const realInitialIndex = sharedIndex.initialValue;
   const currentIndexRef = (0, _react.useRef)(initialIndex);
+  const {
+    container: containerStyle
+  } = (0, _useTabsStyle.default)(variant);
 
   const setTab = newIndex => {
     const currentIndex = currentIndexRef.current;
@@ -91,11 +97,16 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     setTab
   }), [sharedIndex]);
   const styles = useStyles();
+  const theme = (0, _styles.useTheme)();
   const [outerCoordinates, updateCoordinate] = (0, _useTabCoordinates.default)(children);
   const [innerContentsWidthList, updateInnerContentsWidth] = (0, _useTabInnerContentsWidth.default)(children);
   const canRenderIndicator = indicatorSize === 'fit-content' ? (0, _utils.isEveryTabCoordinatesDefined)(innerContentsWidthList, children) : (0, _utils.isEveryTabCoordinatesDefined)(outerCoordinates, children);
   const indexStore = (0, _useIndexStore.default)(sharedIndex);
   const coordinates = (0, _react.useMemo)(() => {
+    if (outerCoordinates.length === 0) {
+      return [];
+    }
+
     if (indicatorSize !== 'fit-content') {
       return outerCoordinates;
     }
@@ -113,7 +124,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
         x2: indicatorStartCoordinate + innerContentWidth
       };
     });
-  }, [outerCoordinates, innerContentsWidthList, indicatorSize]);
+  }, [outerCoordinates, innerContentsWidthList]);
   (0, _react.useEffect)(() => {
     return indexStore.subscribe(newIndex => {
       onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
@@ -180,12 +191,18 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     disabled: disableIndicator,
     initialIndex: realInitialIndex
   }) : null;
+  const backgroundColorMap = {
+    default: theme.palette.background.base,
+    alt: theme.palette.background.alt
+  };
   return /*#__PURE__*/_react.default.createElement(_InternalContext.default.Provider, {
     value: {
       indexStore
     }
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: (0, _styles.css)([styles.root, showDivider ? styles.bottomDivider : undefined, scrollable ? undefined : styles.fixedRoot, style])
+    style: (0, _styles.css)([styles.root, containerStyle, {
+      backgroundColor: backgroundColorMap[color]
+    }, showDivider ? styles.bottomDivider : undefined, scrollable ? undefined : styles.fixedRoot, style])
   }, scrollable ? /*#__PURE__*/_react.default.createElement(_ScrollableTabsView.default, {
     automaticallyAdjustContentInsets: false,
     bounces: false,

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","currentIndexRef","useRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerContentsWidthList","updateInnerContentsWidth","useTabInnerContentsWidth","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","filter","Boolean","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabVariant } from '../Tab/TabProps';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer'\n    | 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n        bottomDivider: {\n            borderBottomColor: theme.palette.border.base,\n            borderBottomWidth: 1,\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'fit-content',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollViewContentContainerStyle,\n        showDivider = false,\n        style,\n        variant = 'default' as TabVariant,\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n            const tabWidth = outerX2 - outerX1;\n            const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n            const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n            return {\n                x1: indicatorStartCoordinate,\n                x2: indicatorStartCoordinate + innerContentWidth,\n            };\n        });\n    }, [outerCoordinates, innerContentsWidthList, indicatorSize]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { width } = event.nativeEvent.layout;\n\n            updateInnerContentsWidth(index, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            indicatorSize,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n        />\n    ) : null;\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    showDivider ? styles.bottomDivider : undefined,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={css([\n                            styles.scrollableContainer,\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","forwardRef","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","currentIndexRef","useRef","container","containerStyle","useTabsStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerContentsWidthList","updateInnerContentsWidth","useTabInnerContentsWidth","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","css","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabVariant } from '../Tab';\nimport type TabsProps from './TabsProps';\nimport type { TabsColor } from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer'\n    | 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n        bottomDivider: {\n            borderBottomColor: theme.palette.border.base,\n            borderBottomWidth: 0.5,\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        color = 'default',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'fit-content',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollViewContentContainerStyle,\n        showDivider = false,\n        style,\n        variant = 'default' as TabVariant,\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const { container: containerStyle } = useTabsStyle(variant);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (outerCoordinates.length === 0) {\n            return [];\n        }\n\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n            const tabWidth = outerX2 - outerX1;\n            const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n            const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n            return {\n                x1: indicatorStartCoordinate,\n                x2: indicatorStartCoordinate + innerContentWidth,\n            };\n        });\n    }, [outerCoordinates, innerContentsWidthList]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { width } = event.nativeEvent.layout;\n\n            updateInnerContentsWidth(index, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            indicatorSize,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n        />\n    ) : null;\n\n    const backgroundColorMap: Record<TabsColor, string> = {\n        default: theme.palette.background.base,\n        alt: theme.palette.background.alt,\n    };\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    containerStyle,\n                    { backgroundColor: backgroundColorMap[color] },\n                    showDivider ? styles.bottomDivider : undefined,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={css([\n                            styles.scrollableContainer,\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

package/build/commonjs/Tabs/TabsProps.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabIndicatorSizes = void 0;
+exports.tabsColors = exports.tabIndicatorSizes = void 0;
+const tabsColors = ['default', 'alt'];
+exports.tabsColors = tabsColors;
 const tabIndicatorSizes = ['fit-content', 'full'];
 exports.tabIndicatorSizes = tabIndicatorSizes;
 //# sourceMappingURL=TabsProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tabIndicatorSizes"],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabVariant } from '../Tab/TabProps';\nimport type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport const tabIndicatorSizes = ['fit-content', 'full'] as const;\nexport type TabIndicatorSize = typeof tabIndicatorSizes[number];\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'fit-content'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * These styles will be applied to the scroll view content container which wraps all of the child views.\n     */\n    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines whether to display the bottom border.\n     * @default false\n     */\n    showDivider?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":";;;;;;AAMO,MAAMA,iBAAiB,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAA1B"}
+{"version":3,"names":["tabsColors","tabIndicatorSizes"],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabVariant } from '../Tab';\nimport type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport const tabsColors = ['default', 'alt'] as const;\nexport type TabsColor = typeof tabsColors[number];\n\nexport const tabIndicatorSizes = ['fit-content', 'full'] as const;\nexport type TabIndicatorSize = typeof tabIndicatorSizes[number];\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'default'\n     */\n    color?: TabsColor;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'fit-content'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * These styles will be applied to the scroll view content container which wraps all of the child views.\n     */\n    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines whether to display the bottom border.\n     * @default false\n     */\n    showDivider?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":";;;;;;AAMO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,KAAZ,CAAnB;;AAGA,MAAMC,iBAAiB,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAA1B"}

package/build/commonjs/Tabs/index.js

@@ -6,11 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _LegacyTabs.default;
+    return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "tabIndicatorSizes", {
+  enumerable: true,
+  get: function () {
+    return _TabsProps.tabIndicatorSizes;
+  }
+});
+Object.defineProperty(exports, "tabsColors", {
+  enumerable: true,
+  get: function () {
+    return _TabsProps.tabsColors;
+  }
+});
+
+var _Tabs = _interopRequireDefault(require("./Tabs"));
 
-var _LegacyTabs = _interopRequireDefault(require("./LegacyTabs"));
+var _TabsProps = require("./TabsProps");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyTabs';\nexport type { default as TabsProps } from './LegacyTabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps } from './TabsProps';\nexport { tabIndicatorSizes, tabsColors } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

package/build/commonjs/Tabs/useTabsStyle.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTabsStyle;
+
+var _react = require("react");
+
+var _styles = require("../styles");
+
+function useTabsStyle(variant) {
+  const theme = (0, _styles.useTheme)();
+  return (0, _react.useMemo)(() => {
+    switch (variant) {
+      case 'circular':
+        return {
+          container: {
+            paddingBottom: theme.spacing(2),
+            paddingHorizontal: theme.spacing(3)
+          }
+        };
+
+      case 'bottom-navigation':
+        return {
+          container: {}
+        };
+
+      case 'default':
+      default:
+        return {
+          container: {
+            paddingHorizontal: theme.spacing(1.5)
+          }
+        };
+    }
+  }, [theme, variant]);
+}
+//# sourceMappingURL=useTabsStyle.js.map