@fountain-ui/core 2.0.0-beta.6 → 2.0.0-beta.61

package/build/commonjs/Tab/TabIndicator.js

@@ -13,13 +13,13 @@ var _styles = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const useStyles = function () {
+const useStyles = function (color) {
   const theme = (0, _styles.useTheme)();
   return {
     root: {
-      backgroundColor: theme.palette.secondary.main,
+      backgroundColor: theme.palette[color].main,
       bottom: 0,
-      height: 4,
+      height: 2,
       left: 12,
       right: 12,
       position: 'absolute'
@@ -27,8 +27,11 @@ const useStyles = function () {
   };
 };
 
-const TabIndicator = function TabIndicator() {
-  const styles = useStyles();
+const TabIndicator = function TabIndicator(_ref) {
+  let {
+    color
+  } = _ref;
+  const styles = useStyles(color);
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.root
   });

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

@@ -1 +1 @@
-{"version":3,"sources":["TabIndicator.tsx"],"names":["useStyles","theme","root","backgroundColor","palette","secondary","main","bottom","height","left","right","position","TabIndicator","styles","React","memo"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAIA,MAAMA,SAAwC,GAAG,YAAgC;AAC7E,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,SAAd,CAAwBC,IADvC;AAEFC,MAAAA,MAAM,EAAE,CAFN;AAGFC,MAAAA,MAAM,EAAE,CAHN;AAIFC,MAAAA,IAAI,EAAE,EAJJ;AAKFC,MAAAA,KAAK,EAAE,EALL;AAMFC,MAAAA,QAAQ,EAAE;AANR;AADH,GAAP;AAUH,CAbD;;AAeA,MAAMC,YAAY,GAAG,SAASA,YAAT,GAAwB;AACzC,QAAMC,MAAM,GAAGb,SAAS,EAAxB;AAEA,sBACI,6BAAC,iBAAD;AACI,IAAA,KAAK,EAAEa,MAAM,CAACX;AADlB,IADJ;AAKH,CARD;;4BAUeY,eAAMC,IAAN,CAAWH,YAAX,C","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            bottom: 0,\n            height: 4,\n            left: 12,\n            right: 12,\n            position: 'absolute',\n        },\n    };\n};\n\nconst TabIndicator = function TabIndicator() {\n    const styles = useStyles();\n\n    return (\n        <View\n            style={styles.root}\n        />\n    );\n};\n\nexport default React.memo(TabIndicator);\n"]}
+{"version":3,"names":["useStyles","color","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 } from './TabProps';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root'>;\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                bottom: 0,\n                height: 2,\n                left: 12,\n                right: 12,\n                position: 'absolute',\n            },\n        };\n    };\n\nconst TabIndicator = function TabIndicator({ color }: { color: TabIndicatorColor }) {\n    const styles = useStyles(color);\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,SAA2D,GAC7D,UAAUC,KAAV,EAAwD;EACpD,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcL,KAAd,EAAqBM,IADpC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,IAAI,EAAE,EAJJ;MAKFC,KAAK,EAAE,EALL;MAMFC,QAAQ,EAAE;IANR;EADH,CAAP;AAUH,CAdL;;AAgBA,MAAMC,YAAY,GAAG,SAASA,YAAT,OAA+D;EAAA,IAAzC;IAAEZ;EAAF,CAAyC;EAChF,MAAMa,MAAM,GAAGd,SAAS,CAACC,KAAD,CAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEa,MAAM,CAACV;EADlB,EADJ;AAKH,CARD;;4BAUeW,cAAA,CAAMC,IAAN,CAAWH,YAAX,C"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';\nexport type TabIndicatorColor = 'primary' | 'secondary'\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;\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     * 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"],"mappings":""}

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

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

package/build/commonjs/TabBase/TabBase.js

@@ -15,7 +15,7 @@ var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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); }
+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)();

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

@@ -1 +1 @@
-{"version":3,"sources":["TabBase.tsx"],"names":["useStyles","theme","root","alignItems","justifyContent","paddingHorizontal","spacing","minHeight","row","flexDirection","column","TabBase","props","children","disabled","onPress","selected","vertical","style","otherProps","styles"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAmC,GAAG,YAA2B;AACnE,QAAMC,KAAK,GAAG,wBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,cAAc,EAAE,QAFd;AAGFC,MAAAA,iBAAiB,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAHjB;AAIFC,MAAAA,SAAS,EAAE;AAJT,KADH;AAOHC,IAAAA,GAAG,EAAE;AACDC,MAAAA,aAAa,EAAE;AADd,KAPF;AAUHC,IAAAA,MAAM,EAAE;AACJD,MAAAA,aAAa,EAAE;AADX;AAVL,GAAP;AAcH,CAjBD;;AAmBe,SAASE,OAAT,CAAiBC,KAAjB,EAAsC;AACjD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,QAAQ,GAAG,KAFT;AAGFC,IAAAA,OAHE;AAIFC,IAAAA,QAAQ,GAAG,KAJT;AAKFC,IAAAA,QAAQ,GAAG,KALT;AAMFC,IAAAA,KANE;AAOF,OAAGC;AAPD,MAQFP,KARJ;AAUA,QAAMQ,MAAM,GAAGpB,SAAS,EAAxB;AAEA,sBACI,6BAAC,mBAAD;AACI,IAAA,OAAO,EAAEe,OADb;AAEI,IAAA,QAAQ,EAAED,QAFd;AAGI,IAAA,KAAK,EAAE,iBAAI,CACPM,MAAM,CAAClB,IADA,EAEPe,QAAQ,GAAGG,MAAM,CAACV,MAAV,GAAmBU,MAAM,CAACZ,GAF3B,EAGPU,KAHO,CAAJ;AAHX,KAQQC,UARR,GAUKN,QAVL,CADJ;AAcH;;AAAA","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"]}
+{"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"}

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

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

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

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

package/build/commonjs/Tabs/IndexAwareTab.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IndexAwareTab;
+
+var _react = require("react");
+
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function IndexAwareTab(props) {
+  const {
+    children,
+    index,
+    initialIndex
+  } = props;
+  const [selected, setSelected] = (0, _react.useState)(initialIndex === index);
+  const {
+    indexStore
+  } = (0, _react.useContext)(_InternalContext.default);
+  (0, _react.useEffect)(() => {
+    return indexStore.subscribe(currentIndex => {
+      setSelected(currentIndex === index);
+    });
+  }, [indexStore, index]);
+  return /*#__PURE__*/(0, _react.cloneElement)(children, {
+    selected
+  });
+}
+
+;
+//# sourceMappingURL=IndexAwareTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["IndexAwareTab","props","children","index","initialIndex","selected","setSelected","useState","indexStore","useContext","InternalContext","useEffect","subscribe","currentIndex","cloneElement"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useContext, useEffect, useState } from 'react';\nimport InternalContext from './InternalContext';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n    initialIndex: number;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n        initialIndex,\n    } = props;\n\n    const [selected, setSelected] = useState(initialIndex === index);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe((currentIndex) => {\n            setSelected(currentIndex === index);\n        });\n    }, [indexStore, index]);\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":";;;;;;;AACA;;AACA;;;;AAQe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM,CAACI,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAASH,YAAY,KAAKD,KAA1B,CAAhC;EAEA,MAAM;IAAEK;EAAF,IAAiB,IAAAC,iBAAA,EAAWC,wBAAX,CAAvB;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZ,OAAOH,UAAU,CAACI,SAAX,CAAsBC,YAAD,IAAkB;MAC1CP,WAAW,CAACO,YAAY,KAAKV,KAAlB,CAAX;IACH,CAFM,CAAP;EAGH,CAJD,EAIG,CAACK,UAAD,EAAaL,KAAb,CAJH;EAMA,oBAAO,IAAAW,mBAAA,EAAaZ,QAAb,EAAuB;IAAEG;EAAF,CAAvB,CAAP;AACH;;AAAA"}

package/build/commonjs/Tabs/InternalContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _store = require("../store");
+
+const InternalContext = /*#__PURE__*/(0, _react.createContext)({
+  indexStore: new _store.MockStore()
+});
+var _default = InternalContext;
+exports.default = _default;
+//# sourceMappingURL=InternalContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["InternalContext","createContext","indexStore","MockStore"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport type { MonoStore } from '../store';\nimport { MockStore } from '../store';\n\nexport interface InternalContextValue {\n    indexStore: MonoStore<number>;\n}\n\nconst InternalContext = createContext<InternalContextValue>({\n    indexStore: new MockStore(),\n});\n\nexport default InternalContext;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAMA,MAAMA,eAAe,gBAAG,IAAAC,oBAAA,EAAoC;EACxDC,UAAU,EAAE,IAAIC,gBAAJ;AAD4C,CAApC,CAAxB;eAIeH,e"}

package/build/commonjs/Tabs/ScrollableTabsView.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ScrollableTabsView;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _useScrollViewReaction = _interopRequireDefault(require("./useScrollViewReaction"));
+
+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); }
+
+function ScrollableTabsView(props) {
+  const {
+    coordinates,
+    initialIndex,
+    ...scrollViewProps
+  } = props;
+  const {
+    scrollViewRef,
+    onLayout
+  } = (0, _useScrollViewReaction.default)(initialIndex, coordinates);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, _extends({
+    ref: scrollViewRef,
+    onLayout: onLayout
+  }, scrollViewProps));
+}
+
+;
+//# sourceMappingURL=ScrollableTabsView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ScrollableTabsView","props","coordinates","initialIndex","scrollViewProps","scrollViewRef","onLayout","useScrollViewReaction"],"sources":["ScrollableTabsView.tsx"],"sourcesContent":["import React from 'react';\nimport type { ScrollViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport TabCoordinate from './TabCoordinate';\nimport useScrollViewReaction from './useScrollViewReaction';\n\nexport interface ScrollableTabsViewProps extends ScrollViewProps {\n    initialIndex: number;\n    coordinates: TabCoordinate[];\n}\n\nexport default function ScrollableTabsView(props: ScrollableTabsViewProps) {\n    const {\n        coordinates,\n        initialIndex,\n        ...scrollViewProps\n    } = props;\n\n    const { scrollViewRef, onLayout } = useScrollViewReaction(initialIndex, coordinates);\n\n    return (\n        <ScrollView\n            ref={scrollViewRef}\n            onLayout={onLayout}\n            {...scrollViewProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;;;AAOe,SAASA,kBAAT,CAA4BC,KAA5B,EAA4D;EACvE,MAAM;IACFC,WADE;IAEFC,YAFE;IAGF,GAAGC;EAHD,IAIFH,KAJJ;EAMA,MAAM;IAAEI,aAAF;IAAiBC;EAAjB,IAA8B,IAAAC,8BAAA,EAAsBJ,YAAtB,EAAoCD,WAApC,CAApC;EAEA,oBACI,6BAAC,uBAAD;IACI,GAAG,EAAEG,aADT;IAEI,QAAQ,EAAEC;EAFd,GAGQF,eAHR,EADJ;AAOH;;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TabCoordinate.ts"],"names":["defaultCoordinate","x1","x2"],"mappings":";;;;;;AAKO,MAAMA,iBAAgC,GAAG;AAAEC,EAAAA,EAAE,EAAE,CAAN;AAASC,EAAAA,EAAE,EAAE;AAAb,CAAzC","sourcesContent":["interface TabCoordinate {\n    x1: number;\n    x2: number;\n}\n\nexport const defaultCoordinate: TabCoordinate = { x1: 0, x2: 0 };\n\nexport default TabCoordinate;"]}
+{"version":3,"names":["defaultCoordinate","x1","x2"],"sources":["TabCoordinate.ts"],"sourcesContent":["interface TabCoordinate {\n    x1: number;\n    x2: number;\n}\n\nexport const defaultCoordinate: TabCoordinate = { x1: 0, x2: 0 };\n\nexport default TabCoordinate;"],"mappings":";;;;;;AAKO,MAAMA,iBAAgC,GAAG;EAAEC,EAAE,EAAE,CAAN;EAASC,EAAE,EAAE;AAAb,CAAzC"}

package/build/commonjs/Tabs/TabIndicator.js

@@ -5,25 +5,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = TabIndicator;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
+var _reactNative = require("react-native");
 
 var _styles = require("../styles");
 
+var _hooks = require("../hooks");
+
 var _TabCoordinate = require("./TabCoordinate");
 
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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); }
+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 () {
+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.secondary.main,
+      backgroundColor: theme.palette[color].main,
+      left: 0,
       bottom: 0,
-      height: 4,
+      width: INDICATOR_WIDTH,
+      height: INDICATOR_HEIGHT,
       position: 'absolute'
     },
     disabled: {
@@ -32,42 +46,70 @@ const useStyles = function () {
   };
 };
 
+const startAnimation = (value, toValue) => {
+  _reactNative.Animated.timing(value, {
+    toValue: toValue,
+    duration: 300,
+    easing: _reactNative.Easing.bezier(0.25, 1, 0.5, 1),
+    useNativeDriver: true
+  }).start();
+};
+
 function TabIndicator(props) {
   const {
+    color = 'primary',
     coordinates,
     disabled,
+    initialIndex,
     scrollable,
-    scrollValue,
     style,
     ...otherProps
   } = props;
-  const styles = useStyles();
-
-  const layout = _reactNativeReanimated.default.useDerivedValue(() => {
-    var _coordinates$index, _coordinates;
-
-    const rawScrollValue = scrollValue.value;
-    const index = Math.floor(rawScrollValue);
-    const offset = rawScrollValue % 1;
-    const coordinate = (_coordinates$index = coordinates[index]) !== null && _coordinates$index !== void 0 ? _coordinates$index : _TabCoordinate.defaultCoordinate;
-    const nextCoordinate = (_coordinates = coordinates[index + 1]) !== null && _coordinates !== void 0 ? _coordinates : _TabCoordinate.defaultCoordinate;
-    const x1 = offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1;
-    const x2 = offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2;
-    const leftInset = scrollable ? 12 : 0;
-    const rightInset = scrollable ? 24 : 0;
+  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 {
-      left: x1 + leftInset,
-      width: Math.max(x2 - x1 - rightInset, 0)
+      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);
     };
-  });
-
-  const animatedStyle = _reactNativeReanimated.default.useAnimatedStyle(() => ({
-    left: layout.value.left,
-    width: layout.value.width
-  }));
 
-  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({
-    style: [styles.root, disabled ? styles.disabled : undefined, animatedStyle, style]
+    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));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["TabIndicator.tsx"],"names":["useStyles","theme","root","backgroundColor","palette","secondary","main","bottom","height","position","disabled","TabIndicator","props","coordinates","scrollable","scrollValue","style","otherProps","styles","layout","Animated","useDerivedValue","rawScrollValue","value","index","Math","floor","offset","coordinate","defaultCoordinate","nextCoordinate","x1","x2","leftInset","rightInset","left","width","max","animatedStyle","useAnimatedStyle","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;;;AAIA,MAAMA,SAAwC,GAAG,YAAgC;AAC7E,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,SAAd,CAAwBC,IADvC;AAEFC,MAAAA,MAAM,EAAE,CAFN;AAGFC,MAAAA,MAAM,EAAE,CAHN;AAIFC,MAAAA,QAAQ,EAAE;AAJR,KADH;AAOHC,IAAAA,QAAQ,EAAE;AACNF,MAAAA,MAAM,EAAE;AADF;AAPP,GAAP;AAWH,CAdD;;AAgBe,SAASG,YAAT,CAAsBC,KAAtB,EAAgD;AAC3D,QAAM;AACFC,IAAAA,WADE;AAEFH,IAAAA,QAFE;AAGFI,IAAAA,UAHE;AAIFC,IAAAA,WAJE;AAKFC,IAAAA,KALE;AAMF,OAAGC;AAND,MAOFL,KAPJ;AASA,QAAMM,MAAM,GAAGlB,SAAS,EAAxB;;AAEA,QAAMmB,MAAM,GAAGC,+BAASC,eAAT,CAAyB,MAAM;AAAA;;AAC1C,UAAMC,cAAc,GAAGP,WAAW,CAACQ,KAAnC;AACA,UAAMC,KAAK,GAAGC,IAAI,CAACC,KAAL,CAAWJ,cAAX,CAAd;AACA,UAAMK,MAAM,GAAGL,cAAc,GAAG,CAAhC;AAEA,UAAMM,UAAU,yBAAGf,WAAW,CAACW,KAAD,CAAd,mEAAyBK,gCAAzC;AACA,UAAMC,cAAc,mBAAGjB,WAAW,CAACW,KAAK,GAAG,CAAT,CAAd,uDAA6BK,gCAAjD;AAEA,UAAME,EAAE,GAAIJ,MAAM,GAAGG,cAAc,CAACC,EAAxB,GAA6B,CAAC,IAAIJ,MAAL,IAAeC,UAAU,CAACG,EAAnE;AACA,UAAMC,EAAE,GAAIL,MAAM,GAAGG,cAAc,CAACE,EAAxB,GAA6B,CAAC,IAAIL,MAAL,IAAeC,UAAU,CAACI,EAAnE;AAEA,UAAMC,SAAS,GAAGnB,UAAU,GAAG,EAAH,GAAQ,CAApC;AACA,UAAMoB,UAAU,GAAGpB,UAAU,GAAG,EAAH,GAAQ,CAArC;AAEA,WAAO;AACHqB,MAAAA,IAAI,EAAEJ,EAAE,GAAGE,SADR;AAEHG,MAAAA,KAAK,EAAEX,IAAI,CAACY,GAAL,CAASL,EAAE,GAAGD,EAAL,GAAUG,UAAnB,EAA+B,CAA/B;AAFJ,KAAP;AAIH,GAlBc,CAAf;;AAoBA,QAAMI,aAAa,GAAGlB,+BAASmB,gBAAT,CAA0B,OAAO;AACnDJ,IAAAA,IAAI,EAAEhB,MAAM,CAACI,KAAP,CAAaY,IADgC;AAEnDC,IAAAA,KAAK,EAAEjB,MAAM,CAACI,KAAP,CAAaa;AAF+B,GAAP,CAA1B,CAAtB;;AAKA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AACI,IAAA,KAAK,EAAE,CACHlB,MAAM,CAAChB,IADJ,EAEHQ,QAAQ,GAAGQ,MAAM,CAACR,QAAV,GAAqB8B,SAF1B,EAGHF,aAHG,EAIHtB,KAJG;AADX,KAOQC,UAPR,EADJ;AAWH;;AAAA","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            bottom: 0,\n            height: 4,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        scrollable,\n        scrollValue,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const layout = Animated.useDerivedValue(() => {\n        const rawScrollValue = scrollValue.value;\n        const index = Math.floor(rawScrollValue);\n        const offset = rawScrollValue % 1;\n\n        const coordinate = coordinates[index] ?? defaultCoordinate;\n        const nextCoordinate = coordinates[index + 1] ?? defaultCoordinate;\n\n        const x1 = (offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1);\n        const x2 = (offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2);\n\n        const leftInset = scrollable ? 12 : 0;\n        const rightInset = scrollable ? 24 : 0;\n\n        return {\n            left: x1 + leftInset,\n            width: Math.max(x2 - x1 - rightInset, 0),\n        };\n    });\n\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        left: layout.value.left,\n        width: layout.value.width,\n    }));\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"]}
+{"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","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":["TabIndicator.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 type TabIndicatorProps from './TabIndicatorProps';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\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: true,\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/TabIndicatorProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["TabIndicatorProps.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/Tabs.js

@@ -3,31 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Tabs;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _styles = require("../styles");
 
-var _utils = require("@fountain-ui/utils");
+var _hooks = require("../hooks");
 
-var _styles = require("../styles");
+var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
 
-var _hooks = require("../internal/hooks");
+var _ScrollableTabsView = _interopRequireDefault(require("./ScrollableTabsView"));
 
-var _TabCoordinate = require("./TabCoordinate");
+var _IndexAwareTab = _interopRequireDefault(require("./IndexAwareTab"));
 
-var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
+var _useTabCoordinates = _interopRequireDefault(require("./useTabCoordinates"));
 
-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); }
+var _useIndexStore = _interopRequireDefault(require("./useIndexStore"));
 
-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; }
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
+
+var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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); }
+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)();
@@ -45,76 +49,54 @@ const useStyles = function () {
   };
 };
 
-function Tabs(props) {
+const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   const {
     children,
-    index: indexProp,
+    indicatorColor = 'primary',
+    initialIndex = 0,
     disableIndicator = false,
     keyboardDismissMode = 'none',
     keyboardShouldPersistTaps = 'never',
     onChange,
     scrollable = false,
-    scrollValue: scrollValueProp,
     style,
     variant = 'primary',
-    ...otherProps
+    UNSTABLE_sharedIndex
   } = props;
-  const styles = useStyles();
-  const [containerWidth, handleLayout] = (0, _hooks.useWidth)();
-
-  const scrollViewRef = _react.default.useRef(null);
-
-  const tabCount = _react.default.Children.count(children);
-
-  const [coordinates, setCoordinates] = _react.default.useState(() => new Array(tabCount));
-
-  const internalScrollValue = _reactNativeReanimated.default.useSharedValue(0);
-
-  const scrollValue = scrollValueProp || internalScrollValue;
-  const isReadyToRenderIndicator = (0, _utils.isEveryDefined)(coordinates);
-
-  _react.default.useEffect(() => {
-    const animateTab = index => {
-      internalScrollValue.value = _reactNativeReanimated.default.withTiming(index, {
-        duration: 200,
-        easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
-      });
-    };
+  const fallbackSharedIndex = (0, _hooks.useSyncAnimatedValue)({
+    initialValue: initialIndex
+  });
+  const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+  const realInitialIndex = sharedIndex.initialValue;
 
-    if (scrollValueProp === undefined) {
-      animateTab(indexProp);
-    }
-  }, [indexProp, scrollValueProp, internalScrollValue]);
-
-  _react.default.useEffect(() => {
-    const snapTab = index => {
-      const scrollView = scrollViewRef.current;
-      const coordinate = coordinates[index - 1] || _TabCoordinate.defaultCoordinate;
-
-      if (scrollView) {
-        const tabWidth = coordinate.x2 - coordinate.x1;
-        const x = coordinate.x1 + tabWidth / 2;
-        scrollView.scrollTo({
-          x,
-          y: 0,
-          animated: true
-        });
-      }
-    };
+  const setTab = newIndex => {
+    sharedIndex.animatedValue.setValue(newIndex);
+  };
 
-    snapTab(indexProp);
-  }, [indexProp, containerWidth, coordinates]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    setTab
+  }), [sharedIndex]);
+  const styles = useStyles();
+  const [coordinates, updateCoordinate] = (0, _useTabCoordinates.default)(children);
+  const canRenderIndicator = (0, _utils.isEveryTabCoordinatesDefined)(coordinates, children);
+  const indexStore = (0, _useIndexStore.default)(sharedIndex);
+  (0, _react.useEffect)(() => {
+    return indexStore.subscribe(newIndex => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
+    });
+  }, [indexStore, onChange]);
 
   const tabElements = _react.default.Children.map(children, (child, index) => {
     const onLayout = event => {
+      var _child$props$onLayout, _child$props;
+
       const {
         x,
         width
       } = event.nativeEvent.layout;
-      setCoordinates(prev => [...prev.slice(0, index), {
-        x1: x,
-        x2: x + width
-      }, ...prev.slice(index + 1)]);
+      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 => {
@@ -124,51 +106,58 @@ function Tabs(props) {
     };
 
     const onPress = () => {
-      var _child$props$onPress, _child$props;
+      var _child$props$onPress, _child$props2;
 
-      onChange === null || onChange === void 0 ? void 0 : onChange(index); // @ts-ignore
+      setTab(index); // @ts-ignore
 
-      (_child$props$onPress = (_child$props = child.props).onPress) === null || _child$props$onPress === void 0 ? void 0 : _child$props$onPress.call(_child$props);
-    };
+      (_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 selected = index === indexProp;
-    const enableIndicatorPlaceholder = disableIndicator ? false : isReadyToRenderIndicator ? false : selected; //@ts-ignore
 
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      enableIndicator: enableIndicatorPlaceholder,
+    const tabElement = /*#__PURE__*/(0, _react.cloneElement)(child, {
+      enableIndicator: !disableIndicator && !canRenderIndicator,
+      indicatorColor,
       onLayout,
       onPress,
       onMouseDown,
       variant,
-      selected,
       style: scrollable ? undefined : styles.fixedTab
     });
+    return /*#__PURE__*/_react.default.createElement(_IndexAwareTab.default, {
+      children: tabElement,
+      index: index,
+      initialIndex: realInitialIndex
+    });
   });
 
-  const indicator = /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
+  const tabIndicator = canRenderIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
+    color: indicatorColor,
     coordinates: coordinates,
     disabled: disableIndicator,
-    scrollable: scrollable,
-    scrollValue: scrollValue
-  });
-
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
-    onLayout: handleLayout,
+    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])
-  }, otherProps), scrollable ? /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+  }, scrollable ? /*#__PURE__*/_react.default.createElement(_ScrollableTabsView.default, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
     contentContainerStyle: styles.scrollableContainer,
+    coordinates: coordinates,
     directionalLockEnabled: true,
     horizontal: true,
-    ref: scrollViewRef,
+    initialIndex: realInitialIndex,
     scrollsToTop: false,
     showsHorizontalScrollIndicator: false,
     showsVerticalScrollIndicator: false,
     keyboardDismissMode: keyboardDismissMode,
     keyboardShouldPersistTaps: keyboardShouldPersistTaps
-  }, tabElements, indicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElements, indicator));
-}
-
-;
+  }, tabElements, tabIndicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElements, tabIndicator)));
+});
+var _default = Tabs;
+exports.default = _default;
 //# sourceMappingURL=Tabs.js.map