@fountain-ui/core 2.0.0-beta.93 → 2.0.0-beta.95

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","color","indicatorSize","theme","useTheme","root","backgroundColor","palette","main","bottom","height","left","right","position","TabIndicator","styles","React","memo"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { TabIndicatorColor, TabIndicatorSize } from './TabProps';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: (color: TabIndicatorColor, indicatorSize: TabIndicatorSize) => TabIndicatorStyles =\n    function (color: TabIndicatorColor, indicatorSize): TabIndicatorStyles {\n        const theme = useTheme();\n\n        return {\n            root: {\n                backgroundColor: theme.palette[color].main,\n                bottom: 0,\n                height: 2,\n                left: indicatorSize === 'fit-content' ? 0 : 12,\n                right: indicatorSize === 'fit-content' ? 0 : 12,\n                position: 'absolute',\n            },\n        };\n    };\n\nconst TabIndicator = function TabIndicator({ indicatorSize, color }: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {\n    const styles = useStyles(color, indicatorSize);\n\n    return (\n        <View\n            style={styles.root}\n        />\n    );\n};\n\nexport default React.memo(TabIndicator);\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAKA,MAAMA,SAA4F,GAC9F,UAAUC,KAAV,EAAoCC,aAApC,EAAuE;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcN,KAAd,EAAqBO,IADpC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,IAAI,EAAET,aAAa,KAAK,aAAlB,GAAkC,CAAlC,GAAsC,EAJ1C;MAKFU,KAAK,EAAEV,aAAa,KAAK,aAAlB,GAAkC,CAAlC,GAAsC,EAL3C;MAMFW,QAAQ,EAAE;IANR;EADH,CAAP;AAUH,CAdL;;AAgBA,MAAMC,YAAY,GAAG,SAASA,YAAT,OAA+G;EAAA,IAAzF;IAAEZ,aAAF;IAAiBD;EAAjB,CAAyF;EAChI,MAAMc,MAAM,GAAGf,SAAS,CAACC,KAAD,EAAQC,aAAR,CAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEa,MAAM,CAACV;EADlB,EADJ;AAKH,CARD;;4BAUeW,cAAA,CAAMC,IAAN,CAAWH,YAAX,C"}
+{"version":3,"names":["useStyles","color","indicatorSize","theme","useTheme","root","backgroundColor","palette","main","bottom","height","left","right","position","TabIndicator","styles","React","memo"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { TabIndicatorColor, TabIndicatorSize } from './LegacyTabProps';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: (color: TabIndicatorColor, indicatorSize: TabIndicatorSize) => TabIndicatorStyles =\n    function (color: TabIndicatorColor, indicatorSize): TabIndicatorStyles {\n        const theme = useTheme();\n\n        return {\n            root: {\n                backgroundColor: theme.palette[color].main,\n                bottom: 0,\n                height: 2,\n                left: indicatorSize === 'fit-content' ? 0 : 12,\n                right: indicatorSize === 'fit-content' ? 0 : 12,\n                position: 'absolute',\n            },\n        };\n    };\n\nconst TabIndicator = function TabIndicator({\n    indicatorSize,\n    color,\n}: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {\n    const styles = useStyles(color, indicatorSize);\n\n    return (\n        <View\n            style={styles.root}\n        />\n    );\n};\n\nexport default React.memo(TabIndicator);\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAKA,MAAMA,SAA4F,GAC9F,UAAUC,KAAV,EAAoCC,aAApC,EAAuE;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcN,KAAd,EAAqBO,IADpC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,IAAI,EAAET,aAAa,KAAK,aAAlB,GAAkC,CAAlC,GAAsC,EAJ1C;MAKFU,KAAK,EAAEV,aAAa,KAAK,aAAlB,GAAkC,CAAlC,GAAsC,EAL3C;MAMFW,QAAQ,EAAE;IANR;EADH,CAAP;AAUH,CAdL;;AAgBA,MAAMC,YAAY,GAAG,SAASA,YAAT,OAG6C;EAAA,IAHvB;IACvCZ,aADuC;IAEvCD;EAFuC,CAGuB;EAC9D,MAAMc,MAAM,GAAGf,SAAS,CAACC,KAAD,EAAQC,aAAR,CAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEa,MAAM,CAACV;EADlB,EADJ;AAKH,CAXD;;4BAaeW,cAAA,CAAMC,IAAN,CAAWH,YAAX,C"}

package/build/commonjs/Tab/TabProps.js

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

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

@@ -1 +1 @@
-{"version":3,"names":[],"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 type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary';\nexport type TabIndicatorSize = 'full' | 'fit-content';\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     * Tab indicator color\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\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 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\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 'primary'\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":""}
+{"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"}

package/build/commonjs/Tab/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _Tab.default;
+    return _LegacyTab.default;
   }
 });
 
-var _Tab = _interopRequireDefault(require("./Tab"));
+var _LegacyTab = _interopRequireDefault(require("./LegacyTab"));
 
 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 './Tab';\nexport type { default as TabProps, TabVariant, TabIndicatorSize } from './TabProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyTab';\nexport type { default as TabProps, TabVariant, TabIndicatorSize } from './LegacyTabProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Tab/useVariantStyleMap.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useVariantStyleMap;
+
+var _react = require("react");
+
+var _styles = require("@fountain-ui/styles");
+
+var _styles2 = require("../styles");
+
+function useVariantStyleMap(variant, selected) {
+  const theme = (0, _styles2.useTheme)();
+  return (0, _react.useMemo)(() => {
+    switch (variant) {
+      case 'circular':
+        return {
+          container: {
+            paddingHorizontal: theme.spacing(0.75),
+            paddingVertical: theme.spacing(1)
+          },
+          inner: {
+            backgroundColor: selected ? theme.palette.fill.base : theme.palette.fill.weaker,
+            borderRadius: theme.shape.radius.full,
+            paddingHorizontal: theme.spacing(4),
+            paddingVertical: theme.spacing(1.75)
+          },
+          label: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 14,
+              lineHeight: 18.2,
+              fontFamily: 'Pretendard-SemiBold',
+              letterSpacing: 0
+            }),
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+          })
+        };
+
+      case 'bottom-navigation':
+        return {
+          container: {
+            alignItems: 'center',
+            height: 49,
+            justifyContent: 'flex-start',
+            paddingTop: theme.spacing(2.625),
+            width: 48
+          },
+          label: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 10,
+              lineHeight: 10,
+              fontFamily: 'Pretendard-Medium',
+              letterSpacing: -0.1
+            }),
+            color: selected ? theme.palette.text.strong : theme.palette.text.base
+          })
+        };
+
+      case 'default':
+      default:
+        return {
+          container: {
+            padding: theme.spacing(2.5)
+          },
+          label: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 15,
+              lineHeight: 18.75,
+              fontFamily: 'Pretendard-SemiBold',
+              letterSpacing: 0
+            }),
+            color: selected ? theme.palette.text.strong : theme.palette.text.base
+          })
+        };
+    }
+  }, [theme, variant, selected]);
+}
+//# sourceMappingURL=useVariantStyleMap.js.map

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

@@ -0,0 +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"}

package/build/commonjs/TabBase/LegacyTabBase.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TabBase;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@fountain-ui/styles");
+
+var _styles2 = require("../styles");
+
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const useStyles = function () {
+  const theme = (0, _styles2.useTheme)();
+  return {
+    root: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: theme.spacing(3),
+      minHeight: 48
+    },
+    row: {
+      flexDirection: 'row'
+    },
+    column: {
+      flexDirection: 'column'
+    }
+  };
+};
+
+function TabBase(props) {
+  const {
+    children,
+    disabled = false,
+    onPress,
+    selected = false,
+    vertical = false,
+    style,
+    ...otherProps
+  } = props;
+  const styles = useStyles();
+  return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
+    onPress: onPress,
+    disabled: disabled,
+    style: (0, _styles.css)([styles.root, vertical ? styles.column : styles.row, style])
+  }, otherProps), children);
+}
+
+;
+//# sourceMappingURL=LegacyTabBase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","justifyContent","paddingHorizontal","spacing","minHeight","row","flexDirection","column","TabBase","props","children","disabled","onPress","selected","vertical","style","otherProps","styles","css"],"sources":["LegacyTabBase.tsx"],"sourcesContent":["import React from 'react';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../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    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            paddingHorizontal: theme.spacing(3),\n            minHeight: 48,\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;;AACA;;;;;;AAKA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,iBAAiB,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd,CAHjB;MAIFC,SAAS,EAAE;IAJT,CADH;IAOHC,GAAG,EAAE;MACDC,aAAa,EAAE;IADd,CAPF;IAUHC,MAAM,EAAE;MACJD,aAAa,EAAE;IADX;EAVL,CAAP;AAcH,CAjBD;;AAmBe,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,GAAGrB,SAAS,EAAxB;EAEA,oBACI,6BAAC,mBAAD;IACI,OAAO,EAAEgB,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAE,IAAAO,WAAA,EAAI,CACPD,MAAM,CAAClB,IADA,EAEPe,QAAQ,GAAGG,MAAM,CAACV,MAAV,GAAmBU,MAAM,CAACZ,GAF3B,EAGPU,KAHO,CAAJ;EAHX,GAQQC,UARR,GAUKN,QAVL,CADJ;AAcH;;AAAA"}

package/build/commonjs/TabBase/TabBase.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styles = require("@fountain-ui/styles");
 
-var _styles2 = require("../styles");
-
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,13 +16,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const useStyles = function () {
-  const theme = (0, _styles2.useTheme)();
   return {
     root: {
       alignItems: 'center',
-      justifyContent: 'center',
-      paddingHorizontal: theme.spacing(3),
-      minHeight: 48
+      justifyContent: 'center'
     },
     row: {
       flexDirection: 'row'

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","justifyContent","paddingHorizontal","spacing","minHeight","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 { useTheme } from '../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    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            paddingHorizontal: theme.spacing(3),\n            minHeight: 48,\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;;AACA;;;;;;AAKA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,iBAAiB,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd,CAHjB;MAIFC,SAAS,EAAE;IAJT,CADH;IAOHC,GAAG,EAAE;MACDC,aAAa,EAAE;IADd,CAPF;IAUHC,MAAM,EAAE;MACJD,aAAa,EAAE;IADX;EAVL,CAAP;AAcH,CAjBD;;AAmBe,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,GAAGrB,SAAS,EAAxB;EAEA,oBACI,6BAAC,mBAAD;IACI,OAAO,EAAEgB,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAE,IAAAO,WAAA,EAAI,CACPD,MAAM,CAAClB,IADA,EAEPe,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","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"}

package/build/commonjs/TabBase/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _TabBase.default;
+    return _LegacyTabBase.default;
   }
 });
 
-var _TabBase = _interopRequireDefault(require("./TabBase"));
+var _LegacyTabBase = _interopRequireDefault(require("./LegacyTabBase"));
 
 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 './TabBase';\nexport type { default as TabBaseProps } from './TabBaseProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyTabBase';\nexport type { default as TabBaseProps } from './TabBaseProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Tabs/LegacyTabIndicator.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TabIndicator;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _styles = require("../styles");
+
+var _hooks = require("../hooks");
+
+var _utils = require("../utils");
+
+var _TabCoordinate = require("./TabCoordinate");
+
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const INDICATOR_WIDTH = 10;
+const INDICATOR_HEIGHT = 2;
+const SCROLLABLE_TABS_INSET = 12 * 2;
+
+const useStyles = function (color) {
+  const theme = (0, _styles.useTheme)();
+  return {
+    root: {
+      backgroundColor: theme.palette[color].main,
+      left: 0,
+      bottom: 0,
+      width: INDICATOR_WIDTH,
+      height: INDICATOR_HEIGHT,
+      position: 'absolute'
+    },
+    disabled: {
+      height: 0
+    }
+  };
+};
+
+const startAnimation = (value, toValue) => {
+  _reactNative.Animated.timing(value, {
+    toValue: toValue,
+    duration: 300,
+    easing: _reactNative.Easing.bezier(0.25, 1, 0.5, 1),
+    useNativeDriver: _utils.isNotAndroid12
+  }).start();
+};
+
+function TabIndicator(props) {
+  const {
+    color = 'primary',
+    coordinates,
+    disabled,
+    initialIndex,
+    scrollable,
+    style,
+    ...otherProps
+  } = props;
+  const styles = useStyles(color);
+  const computeAnimationValues = (0, _react.useCallback)(currentIndex => {
+    const {
+      x1,
+      x2
+    } = coordinates[currentIndex] ?? _TabCoordinate.defaultCoordinate;
+    const tabWidth = x2 - x1;
+    const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+    const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+    const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
+    return {
+      tx: nextTranslateX,
+      sx: nextScaleX
+    };
+  }, [coordinates, scrollable]);
+  const {
+    tx: initialTx,
+    sx: initialSx
+  } = computeAnimationValues(initialIndex);
+  const translateX = (0, _hooks.useAnimatedValue)(initialTx);
+  const scaleX = (0, _hooks.useAnimatedValue)(initialSx);
+  const {
+    indexStore
+  } = (0, _react.useContext)(_InternalContext.default);
+  (0, _react.useEffect)(() => {
+    const scrollToIndex = index => {
+      const {
+        tx,
+        sx
+      } = computeAnimationValues(index);
+      startAnimation(translateX, tx);
+      startAnimation(scaleX, sx);
+    };
+
+    scrollToIndex(indexStore.getState());
+    return indexStore.subscribe(scrollToIndex);
+  }, [computeAnimationValues, coordinates, indexStore]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
+    style: [styles.root, disabled ? styles.disabled : undefined, {
+      transform: [{
+        translateX
+      }, {
+        scaleX
+      }]
+    }, style]
+  }, otherProps));
+}
+
+;
+//# sourceMappingURL=LegacyTabIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","color","theme","useTheme","root","backgroundColor","palette","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","Animated","timing","duration","easing","Easing","bezier","useNativeDriver","isNotAndroid12","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","useCallback","currentIndex","x1","x2","defaultCoordinate","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","useAnimatedValue","scaleX","indexStore","useContext","InternalContext","useEffect","scrollToIndex","index","getState","subscribe","undefined","transform"],"sources":["LegacyTabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport type TabIndicatorProps from './LegacyTabIndicatorProps';\nimport type { TabIndicatorColor } from './LegacyTabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 2;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =\n    function (color: TabIndicatorColor): TabIndicatorStyles {\n        const theme = useTheme();\n\n        return {\n            root: {\n                backgroundColor: theme.palette[color].main,\n                left: 0,\n                bottom: 0,\n                width: INDICATOR_WIDTH,\n                height: INDICATOR_HEIGHT,\n                position: 'absolute',\n            },\n            disabled: {\n                height: 0,\n            },\n        };\n    };\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n    Animated.timing(value, {\n        toValue: toValue,\n        duration: 300,\n        easing: Easing.bezier(0.25, 1, 0.5, 1),\n        useNativeDriver: isNotAndroid12,\n    }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        color = 'primary',\n        coordinates,\n        disabled,\n        initialIndex,\n        scrollable,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles(color);\n\n    const computeAnimationValues = useCallback((currentIndex: number) => {\n        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n        const tabWidth = x2 - x1;\n\n        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n        return { tx: nextTranslateX, sx: nextScaleX };\n    }, [coordinates, scrollable]);\n\n    const {\n        tx: initialTx,\n        sx: initialSx,\n    } = computeAnimationValues(initialIndex);\n\n    const translateX = useAnimatedValue(initialTx);\n    const scaleX = useAnimatedValue(initialSx);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        const scrollToIndex = (index: number) => {\n            const { tx, sx } = computeAnimationValues(index);\n\n            startAnimation(translateX, tx);\n            startAnimation(scaleX, sx);\n        };\n\n        scrollToIndex(indexStore.getState());\n\n        return indexStore.subscribe(scrollToIndex);\n    }, [\n        computeAnimationValues,\n        coordinates,\n        indexStore,\n    ]);\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                { transform: [{ translateX }, { scaleX }] },\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Tabs/LegacyTabIndicatorProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=LegacyTabIndicatorProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyTabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport type TabIndicatorColor = 'primary' | 'secondary';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * Indicator color.\n     * @default: 'primary'\n     */\n    color?: TabIndicatorColor;\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * Initial index.\n     */\n    initialIndex: number;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/Tabs/LegacyTabs.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _styles = require("../styles");
+
+var _hooks = require("../hooks");
+
+var _LegacyTabIndicator = _interopRequireDefault(require("./LegacyTabIndicator"));
+
+var _ScrollableTabsView = _interopRequireDefault(require("./ScrollableTabsView"));
+
+var _IndexAwareTab = _interopRequireDefault(require("./IndexAwareTab"));
+
+var _useTabCoordinates = _interopRequireDefault(require("./useTabCoordinates"));
+
+var _useTabInnerContentsWidth = _interopRequireDefault(require("./useTabInnerContentsWidth"));
+
+var _useIndexStore = _interopRequireDefault(require("./useIndexStore"));
+
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
+
+var _utils = require("./utils");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useStyles = function () {
+  const theme = (0, _styles.useTheme)();
+  return {
+    root: {},
+    fixedRoot: {
+      flexDirection: 'row'
+    },
+    fixedTab: {
+      flex: 1
+    },
+    scrollableContainer: {
+      paddingHorizontal: theme.spacing(1)
+    }
+  };
+};
+
+const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
+  var _React$Children$map;
+
+  const {
+    children,
+    indicatorColor = 'primary',
+    initialIndex = 0,
+    disableIndicator = false,
+    indicatorSize = 'full',
+    keyboardDismissMode = 'none',
+    keyboardShouldPersistTaps = 'never',
+    onChange,
+    scrollable = false,
+    scrollViewContentContainerStyle,
+    style,
+    variant = 'primary',
+    UNSTABLE_sharedIndex,
+    onTabSelected
+  } = props;
+  const fallbackSharedIndex = (0, _hooks.useSyncAnimatedValue)({
+    initialValue: initialIndex
+  });
+  const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+  const realInitialIndex = sharedIndex.initialValue;
+  const currentIndexRef = (0, _react.useRef)(initialIndex);
+
+  const setTab = newIndex => {
+    const currentIndex = currentIndexRef.current;
+    onTabSelected === null || onTabSelected === void 0 ? void 0 : onTabSelected(newIndex, currentIndex);
+    sharedIndex.animatedValue.setValue(newIndex);
+  };
+
+  (0, _react.useImperativeHandle)(ref, () => ({
+    setTab
+  }), [sharedIndex]);
+  const styles = useStyles();
+  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 (indicatorSize !== 'fit-content') {
+      return outerCoordinates;
+    }
+
+    return innerContentsWidthList.map((innerContentWidth, idx) => {
+      const {
+        x1: outerX1,
+        x2: outerX2
+      } = outerCoordinates[idx];
+      const tabWidth = outerX2 - outerX1;
+      const distanceFromParent = (tabWidth - innerContentWidth) / 2;
+      const indicatorStartCoordinate = outerX1 + distanceFromParent;
+      return {
+        x1: indicatorStartCoordinate,
+        x2: indicatorStartCoordinate + innerContentWidth
+      };
+    });
+  }, [outerCoordinates, innerContentsWidthList, variant]);
+  (0, _react.useEffect)(() => {
+    return indexStore.subscribe(newIndex => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
+      currentIndexRef.current = newIndex;
+    });
+  }, [indexStore, onChange]);
+  const tabElements = (_React$Children$map = _react.default.Children.map(children, (child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    const onTabInnerLayout = event => {
+      const {
+        width
+      } = event.nativeEvent.layout;
+      updateInnerContentsWidth(index, width);
+    };
+
+    const onLayout = event => {
+      var _child$props$onLayout, _child$props;
+
+      const {
+        x,
+        width
+      } = event.nativeEvent.layout;
+      updateCoordinate(index, x, width); // @ts-ignore
+
+      (_child$props$onLayout = (_child$props = child.props).onLayout) === null || _child$props$onLayout === void 0 ? void 0 : _child$props$onLayout.call(_child$props, event);
+    };
+
+    const onMouseDown = e => {
+      if (keyboardShouldPersistTaps === 'always') {
+        e.preventDefault();
+      }
+    };
+
+    const onPress = () => {
+      var _child$props$onPress, _child$props2;
+
+      setTab(index); // @ts-ignore
+
+      (_child$props$onPress = (_child$props2 = child.props).onPress) === null || _child$props$onPress === void 0 ? void 0 : _child$props$onPress.call(_child$props2);
+    }; // @ts-ignore
+
+
+    const tabElement = /*#__PURE__*/(0, _react.cloneElement)(child, {
+      enableIndicator: !disableIndicator && !canRenderIndicator,
+      indicatorColor,
+      onTabInnerLayout,
+      onLayout,
+      onPress,
+      onMouseDown,
+      variant,
+      indicatorSize,
+      style: scrollable ? undefined : styles.fixedTab
+    });
+    return /*#__PURE__*/_react.default.createElement(_IndexAwareTab.default, {
+      children: tabElement,
+      index: index,
+      initialIndex: realInitialIndex
+    });
+  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
+  const tabIndicator = canRenderIndicator ? /*#__PURE__*/_react.default.createElement(_LegacyTabIndicator.default, {
+    color: indicatorColor,
+    coordinates: coordinates,
+    disabled: disableIndicator,
+    initialIndex: realInitialIndex,
+    scrollable: scrollable
+  }) : null;
+  return /*#__PURE__*/_react.default.createElement(_InternalContext.default.Provider, {
+    value: {
+      indexStore
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: (0, _styles.css)([styles.root, scrollable ? undefined : styles.fixedRoot, style])
+  }, scrollable ? /*#__PURE__*/_react.default.createElement(_ScrollableTabsView.default, {
+    automaticallyAdjustContentInsets: false,
+    bounces: false,
+    contentContainerStyle: (0, _styles.css)([styles.scrollableContainer, scrollViewContentContainerStyle]),
+    coordinates: coordinates,
+    directionalLockEnabled: true,
+    horizontal: true,
+    initialIndex: realInitialIndex,
+    scrollsToTop: false,
+    showsHorizontalScrollIndicator: false,
+    showsVerticalScrollIndicator: false,
+    keyboardDismissMode: keyboardDismissMode,
+    keyboardShouldPersistTaps: keyboardShouldPersistTaps
+  }, tabElements, tabIndicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElements, tabIndicator)));
+});
+var _default = Tabs;
+exports.default = _default;
+//# sourceMappingURL=LegacyTabs.js.map