@fountain-ui/core 2.0.0-beta.75 → 2.0.0-beta.77

package/build/commonjs/Dialog/Dialog.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Dialog;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
@@ -17,13 +17,24 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 
 var _Paper = _interopRequireDefault(require("../Paper"));
 
+var _hooks = require("../hooks");
+
+var _utils = require("../utils");
+
 var _styles2 = require("../styles");
 
 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 DIALOG_MAX_WIDTH = 328;
+const fadeInDuration = 300;
+const fadeOutDuration = 100;
+const fadeAnimationDelay = 50;
 
 const useStyles = function () {
   const theme = (0, _styles2.useTheme)();
@@ -77,12 +88,29 @@ function Dialog(props) {
   } = props;
   const styles = useStyles();
   const theme = (0, _styles2.useTheme)();
+  const animatedOpacity = (0, _hooks.useAnimatedValue)(fullScreen ? 1 : 0);
+  (0, _react.useEffect)(() => {
+    if (!fullScreen) {
+      _reactNative.Animated.timing(animatedOpacity, {
+        toValue: visible ? 1 : 0,
+        duration: visible ? fadeInDuration : fadeOutDuration,
+        delay: visible ? fadeAnimationDelay : 0,
+        useNativeDriver: _utils.isNotAndroid12
+      }).start();
+    }
+  }, [fullScreen, visible]);
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
     onClose: onClose,
+    exitDuration: fullScreen ? 150 : 300,
     visible: visible,
     style: styles.root
-  }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    needsOffscreenAlphaCompositing: true,
+    style: {
+      opacity: animatedOpacity
+    }
+  }, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: fullScreen ? undefined : styles.topElementSize
   }, /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: styles.topElementPosition

package/build/commonjs/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["DIALOG_MAX_WIDTH","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","undefined","css","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={24}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </React.Fragment>\n        </Modal>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAcA,MAAMA,gBAAgB,GAAG,GAAzB;;AAEA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAM;IAAEC;EAAF,IAAY,IAAAC,gCAAA,GAAlB;EAEA,MAAMC,MAAM,GAAGJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAAf;EACA,MAAMC,WAAW,GAAGJ,KAAK,GAAGE,MAAM,GAAG,CAArC;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,MAAM,EAAEV,KAAK,CAACU,MAAN,CAAaC;IAHnB,CADH;IAMHC,KAAK,EAAE;MACHR,MADG;MAEHS,QAAQ,EAAEf,gBAFP;MAGHgB,QAAQ,EAAE,QAHP;MAIHZ,KAAK,EAAEI;IAJJ,CANJ;IAYHS,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAZd;IAeHC,SAAS,EAAE,EAfR;IAgBHC,mBAAmB,EAAE;MACjBhB,KAAK,EAAE,MADU;MAEjBiB,MAAM,EAAE;IAFS,CAhBlB;IAoBHC,cAAc,EAAE;MACZC,gBAAgB,EAAEjB,MADN;MAEZS,QAAQ,EAAEf,gBAFE;MAGZI,KAAK,EAAEI;IAHK,CApBb;IAyBHgB,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAAC,CAAD,GAAKxB,KAAK,CAACK,OAAN,CAAc,CAAd,CAFG;MAGhBH,KAAK,EAAE;IAHS;EAzBjB,CAAP;AA+BH,CAvCD;;AAyCe,SAASuB,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,UAAU,GAAG,KAFX;IAGFC,OAHE;IAIFC,KAAK,GAAG,EAJN;IAKFC,OALE;IAMFC,UANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGnC,SAAS,EAAxB;EACA,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,oBACI,6BAAC,cAAD;IACI,cAAc,EAAE2B,UAAU,GAAGM,MAAM,CAAChB,mBAAV,GAAgCgB,MAAM,CAACjB,SADrE;IAEI,OAAO,EAAEY,OAFb;IAGI,OAAO,EAAEE,OAHb;IAII,KAAK,EAAEG,MAAM,CAAC3B;EAJlB,GAKQ0B,UALR,gBAOI,6BAAC,cAAD,CAAO,QAAP,QACKD,UAAU,gBACP,6BAAC,eAAD;IAAQ,KAAK,EAAEJ,UAAU,GAAGO,SAAH,GAAeD,MAAM,CAACd;EAA/C,gBACI,6BAAC,eAAD;IAAQ,KAAK,EAAEc,MAAM,CAACZ;EAAtB,GACKU,UADL,CADJ,CADO,GAMP,IAPR,eASI,6BAAC,cAAD;IACI,SAAS,EAAE,EADf;IAEI,MAAM,EAAEJ,UAFZ;IAGI,KAAK,EAAE,IAAAQ,WAAA,EAAI,CACP;MAAEC,YAAY,EAAET,UAAU,GAAGO,SAAH,GAAenC,KAAK,CAACsC,KAAN,CAAYC;IAArD,CADO,EAEPX,UAAU,GAAGM,MAAM,CAACnB,eAAV,GAA4BmB,MAAM,CAACtB,KAFtC,EAGPkB,KAHO,CAAJ;EAHX,GASKH,QATL,CATJ,CAPJ,CADJ;AA+BH;;AAAA"}
+{"version":3,"names":["DIALOG_MAX_WIDTH","fadeInDuration","fadeOutDuration","fadeAnimationDelay","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","useAnimatedValue","useEffect","Animated","timing","toValue","duration","delay","useNativeDriver","isNotAndroid12","start","opacity","undefined","css","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeInDuration = 300;\nconst fadeOutDuration = 100;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);\n\n    useEffect(() => {\n        if(!fullScreen){\n            Animated.timing(animatedOpacity, {\n                toValue: visible ? 1 : 0,\n                duration: visible ? fadeInDuration: fadeOutDuration,\n                delay: visible ? fadeAnimationDelay : 0,\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n    }, [fullScreen, visible]);\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            exitDuration={fullScreen ? 150 : 300}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Animated.View\n                needsOffscreenAlphaCompositing={true}\n                style={{ opacity: animatedOpacity }}\n            >\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={24}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Modal/Modal.js

@@ -22,6 +22,9 @@ 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 defaultEnterDuration = 300;
+const defaultExitDuration = 150;
+
 const createModalCloseEvent = reason => ({
   metadata: {
     reason
@@ -36,6 +39,8 @@ function Modal(props) {
     backdropOpacity = 0.5,
     children,
     disableAnimation = false,
+    enterDuration = defaultEnterDuration,
+    exitDuration = defaultExitDuration,
     hideBackdrop = false,
     onClose,
     style,
@@ -66,7 +71,8 @@ function Modal(props) {
     opacity: backdropOpacity
   }), !disableAnimation ? /*#__PURE__*/_react.default.createElement(_Slide.default, {
     appear: visible,
-    exitDuration: 150,
+    enterDuration: enterDuration,
+    exitDuration: exitDuration,
     onEnter: () => setExited(false),
     onExited: () => setExited(true),
     style: animationStyle

package/build/commonjs/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"names":["createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","disableAnimation","hideBackdrop","onClose","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport Slide from '../Slide';\nimport SimpleBackdrop from './SimpleBackdrop';\nimport type ModalProps from './ModalProps';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        disableAnimation = false,\n        hideBackdrop = false,\n        onClose,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(hideBackdrop || !visible) ? null : (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            )}\n\n            {!disableAnimation ? (\n                <Slide\n                    appear={visible}\n                    exitDuration={150}\n                    onEnter={() => setExited(false)}\n                    onExited={() => setExited(true)}\n                    style={animationStyle}\n                >\n                    {children}\n                </Slide>\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAWO,MAAMA,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,gBAAgB,GAAG,KAJjB;IAKFC,YAAY,GAAG,KALb;IAMFC,OANE;IAOFC,KAPE;IAQFC,OARE;IASF,GAAGC;EATD,IAUFT,KAVJ;;EAYA,MAAMU,mBAAmB,GAAG,MAAM;IAC9B,IAAIJ,OAAJ,EAAa;MACTA,OAAO,CAACV,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAACe,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,IAAI,CAACR,OAAL,EAAc;IACV,IAAIJ,gBAAgB,IAAIO,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPJ,cAFO,EAGPR,KAHO,CAAJ;EADX,GAMQE,UANR,GAQMJ,YAAY,IAAI,CAACG,OAAlB,GAA6B,IAA7B,gBACG,6BAAC,uBAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAER;EAFb,EATR,EAeK,CAACE,gBAAD,gBACG,6BAAC,cAAD;IACI,MAAM,EAAEI,OADZ;IAEI,YAAY,EAAE,GAFlB;IAGI,OAAO,EAAE,MAAMI,SAAS,CAAC,KAAD,CAH5B;IAII,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD,CAJ7B;IAKI,KAAK,EAAEX;EALX,GAOKE,QAPL,CADH,GAUGA,QAzBR,CADJ;AA6BH;;AAAA"}
+{"version":3,"names":["defaultEnterDuration","defaultExitDuration","createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","disableAnimation","enterDuration","exitDuration","hideBackdrop","onClose","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport Slide from '../Slide';\nimport SimpleBackdrop from './SimpleBackdrop';\nimport type ModalProps from './ModalProps';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 150;\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        disableAnimation = false,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        hideBackdrop = false,\n        onClose,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(hideBackdrop || !visible) ? null : (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            )}\n\n            {!disableAnimation ? (\n                <Slide\n                    appear={visible}\n                    enterDuration={enterDuration}\n                    exitDuration={exitDuration}\n                    onEnter={() => setExited(false)}\n                    onExited={() => setExited(true)}\n                    style={animationStyle}\n                >\n                    {children}\n                </Slide>\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAWA,MAAMA,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;;AAEO,MAAMC,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,gBAAgB,GAAG,KAJjB;IAKFC,aAAa,GAAGX,oBALd;IAMFY,YAAY,GAAGX,mBANb;IAOFY,YAAY,GAAG,KAPb;IAQFC,OARE;IASFC,KATE;IAUFC,OAVE;IAWF,GAAGC;EAXD,IAYFX,KAZJ;;EAcA,MAAMY,mBAAmB,GAAG,MAAM;IAC9B,IAAIJ,OAAJ,EAAa;MACTA,OAAO,CAACZ,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAACiB,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,IAAI,CAACR,OAAL,EAAc;IACV,IAAIN,gBAAgB,IAAIS,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPJ,cAFO,EAGPR,KAHO,CAAJ;EADX,GAMQE,UANR,GAQMJ,YAAY,IAAI,CAACG,OAAlB,GAA6B,IAA7B,gBACG,6BAAC,uBAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAEV;EAFb,EATR,EAeK,CAACE,gBAAD,gBACG,6BAAC,cAAD;IACI,MAAM,EAAEM,OADZ;IAEI,aAAa,EAAEL,aAFnB;IAGI,YAAY,EAAEC,YAHlB;IAII,OAAO,EAAE,MAAMQ,SAAS,CAAC,KAAD,CAJ5B;IAKI,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD,CAL7B;IAMI,KAAK,EAAEb;EANX,GAQKE,QARL,CADH,GAWGA,QA1BR,CADJ;AA8BH;;AAAA"}

package/build/commonjs/Modal/ModalProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void,\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * The number of milliseconds to enter animation.\n     * @default 300\n     */\n    enterDuration?: number;\n\n    /**\n     * The number of milliseconds to exit animation.\n     * @default 150\n     */\n    exitDuration?: number;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void,\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/Snackbar/Snackbar.js

@@ -5,26 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Snackbar;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 
-var _styles = require("@fountain-ui/styles");
-
 var _Slide = _interopRequireDefault(require("../Slide"));
 
 var _SnackbarContent = _interopRequireDefault(require("../SnackbarContent"));
 
-var _styles2 = require("../styles");
+var _hooks = require("../hooks");
+
+var _styles = require("../styles");
+
+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; }
+
 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 fadeInDuration = 300;
+const fadeOutDuration = 110;
+const fadeAnimationDelay = 100;
+
 const useStyles = function () {
-  const theme = (0, _styles2.useTheme)();
+  const theme = (0, _styles.useTheme)();
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   return {
     root: {
@@ -87,12 +97,25 @@ function Snackbar(props) {
 
   const [exited, setExited] = _react.default.useState(true);
 
+  const animatedOpacity = (0, _hooks.useAnimatedValue)(0);
+  const animatedStyle = {
+    opacity: animatedOpacity
+  };
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(animatedOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: visible ? fadeInDuration : fadeOutDuration,
+      delay: visible ? fadeAnimationDelay : 0,
+      useNativeDriver: _utils.isNotAndroid12
+    }).start();
+  }, [visible]);
+
   if (!visible && exited) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
-    style: (0, _styles.css)([styles.root, style])
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
+    style: [animatedStyle, styles.root, style]
   }, otherProps), /*#__PURE__*/_react.default.createElement(_Slide.default, {
     animatedY: animatedY,
     appear: visible,

package/build/commonjs/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","insets","useSafeAreaInsets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","title","startIcon","onActionPress","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState","css"],"sources":["Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n            // TODO: Need to remove zIndex.\n            zIndex: 32,\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        actionLabel,\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        title,\n        startIcon,\n        onActionPress,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent\n                        title={title}\n                        startIcon={startIcon}\n                        actionLabel={actionLabel}\n                        message={message}\n                        onActionPress={onActionPress}\n                    />\n                )}\n            </Slide>\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EACA,MAAMC,MAAM,GAAG,IAAAC,6CAAA,GAAf;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,SAAS,EAAE,QADT;MAEFC,MAAM,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd,CAFN;MAGFC,QAAQ,EAAE,GAHR;MAIFC,aAAa,EAAEP,MAAM,CAACI,MAJpB;MAKFI,iBAAiB,EAAEV,KAAK,CAACO,OAAN,CAAc,CAAd,CALjB;MAMFI,QAAQ,EAAE,UANR;MAOFC,KAAK,EAAE,MAPL;MAQF;MACAC,MAAM,EAAE;IATN;EADH,CAAP;AAaH,CAjBD;;AAmBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,WADE;IAEFC,SAFE;IAGFC,gBAAgB,GAAG,IAHjB;IAIFC,QAJE;IAKFC,OALE;IAMFC,KANE;IAOFC,SAPE;IAQFC,aARE;IASFC,OATE;IAUFC,KAVE;IAWFC,OAAO,GAAG,KAXR;IAYF,GAAGC;EAZD,IAaFZ,KAbJ;;EAeA,MAAMa,aAAa,GAAGC,cAAA,CAAMC,MAAN,CAA4B,IAA5B,CAAtB;;EAEA,MAAMC,oBAAoB,GAAG,MAAM;IAC/B,IAAIH,aAAa,CAACI,OAAd,KAA0B,IAA9B,EAAoC;MAChCC,YAAY,CAACL,aAAa,CAACI,OAAf,CAAZ;IACH;EACJ,CAJD;;EAMAH,cAAA,CAAMK,SAAN,CAAgB,MAAM;IAClB,OAAO,MAAM;MACTH,oBAAoB;IACvB,CAFD;EAGH,CAJD,EAIG,EAJH;;EAMAF,cAAA,CAAMK,SAAN,CAAgB,MAAM;IAClB,IAAIR,OAAO,IAAIR,gBAAgB,KAAK,IAApC,EAA0C;MACtCa,oBAAoB,GADkB,CAGtC;;MACAH,aAAa,CAACI,OAAd,GAAwBG,UAAU,CAAC,MAAM;QACrC,IAAIX,OAAJ,EAAa;UACTA,OAAO;QACV;MACJ,CAJiC,EAI/BN,gBAJ+B,CAAlC;IAKH;EACJ,CAXD,EAWG,CAACQ,OAAD,EAAUR,gBAAV,EAA4BM,OAA5B,CAXH;;EAaA,MAAMY,MAAM,GAAGrC,SAAS,EAAxB;;EAEA,MAAM,CAACsC,MAAD,EAASC,SAAT,IAAsBT,cAAA,CAAMU,QAAN,CAAe,IAAf,CAA5B;;EAEA,IAAI,CAACb,OAAD,IAAYW,MAAhB,EAAwB;IACpB,OAAO,IAAP;EACH;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAG,WAAA,EAAI,CACPJ,MAAM,CAAChC,IADA,EAEPqB,KAFO,CAAJ;EADX,GAKQE,UALR,gBAOI,6BAAC,cAAD;IACI,SAAS,EAAEV,SADf;IAEI,MAAM,EAAES,OAFZ;IAGI,OAAO,EAAE,MAAMY,SAAS,CAAC,KAAD,CAH5B;IAII,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;EAJ7B,GAMKnB,QAAQ,GAAGA,QAAH,gBACL,6BAAC,wBAAD;IACI,KAAK,EAAEE,KADX;IAEI,SAAS,EAAEC,SAFf;IAGI,WAAW,EAAEN,WAHjB;IAII,OAAO,EAAEI,OAJb;IAKI,aAAa,EAAEG;EALnB,EAPR,CAPJ,CADJ;AA0BH;;AAAA"}
+{"version":3,"names":["fadeInDuration","fadeOutDuration","fadeAnimationDelay","useStyles","theme","useTheme","insets","useSafeAreaInsets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","title","startIcon","onActionPress","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState","animatedOpacity","useAnimatedValue","animatedStyle","opacity","Animated","timing","toValue","duration","delay","useNativeDriver","isNotAndroid12","start"],"sources":["Snackbar.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useAnimatedValue } from '../hooks';\nimport { useTheme } from '../styles';\nimport { isNotAndroid12 } from '../utils';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst fadeInDuration = 300;\nconst fadeOutDuration = 110;\nconst fadeAnimationDelay = 100;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n            // TODO: Need to remove zIndex.\n            zIndex: 32,\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        actionLabel,\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        title,\n        startIcon,\n        onActionPress,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    const animatedOpacity = useAnimatedValue(0);\n\n    const animatedStyle = {\n        opacity: animatedOpacity,\n    };\n\n    useEffect(() => {\n        Animated.timing(animatedOpacity, {\n            toValue: visible ? 1 : 0,\n            duration: visible ? fadeInDuration : fadeOutDuration,\n            delay: visible ? fadeAnimationDelay : 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    }, [visible]);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                styles.root,\n                style,\n            ]}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent\n                        title={title}\n                        startIcon={startIcon}\n                        actionLabel={actionLabel}\n                        message={message}\n                        onActionPress={onActionPress}\n                    />\n                )}\n            </Slide>\n        </Animated.View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Tab/Tab.js

@@ -29,16 +29,14 @@ const styles = _styles.StyleSheet.create({
   root: { // TODO: Remove redundant platform checking
     ...(_reactNative.Platform.OS === 'web' ? {
       minWidth: 'auto'
-    } : {})
-  },
-  primary: {
-    minHeight: 40
-  },
-  secondary: {
+    } : {}),
     minHeight: 40
   },
   bottomNavigation: {
     minHeight: 56
+  },
+  filledInner: {
+    justifyContent: 'center'
   }
 });
 
@@ -49,16 +47,19 @@ function Tab(props) {
     enableIndicator = false,
     icon: defaultIcon,
     indicatorColor = 'primary',
+    indicatorSize = 'full',
     selected = false,
     selectedIcon,
     variant = 'primary',
     style,
+    onTabInnerLayout,
     ...otherProps
   } = props;
   const theme = (0, _styles.useTheme)();
   const vertical = variant === 'bottom-navigation';
   const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
-  const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'primary' ? styles.primary : variant === 'secondary' ? styles.secondary : styles.bottomNavigation, style]);
+  const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, style]);
+  const tabInnerStyle = (0, _styles.css)([styles.root, styles.filledInner]);
   const fontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : typo.flag,
     color
@@ -68,19 +69,27 @@ function Tab(props) {
   const iconElement = icon ? /*#__PURE__*/(0, _react.cloneElement)(icon, {
     fill: color
   }) : null;
-  return /*#__PURE__*/_react.default.createElement(_TabBase.default, _extends({
-    pressEffect: pressEffect,
-    style: tabBaseStyle,
-    vertical: vertical
-  }, otherProps), /*#__PURE__*/_react.default.createElement(_Badge.default, {
+  const tabElement = typeof children !== 'string' ? /*#__PURE__*/_react.default.cloneElement(children, {
+    selected
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Badge.default, {
     children: iconElement,
     invisible: !badgeVisible
   }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: children,
     style: (0, _styles.css)(fontStyle)
-  }), enableIndicator && selected ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
+  }));
+  const tabIndicator = enableIndicator && selected ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
+    indicatorSize: indicatorSize,
     color: indicatorColor
-  }) : null);
+  }) : null;
+  return /*#__PURE__*/_react.default.createElement(_TabBase.default, _extends({
+    pressEffect: pressEffect,
+    style: tabBaseStyle,
+    vertical: vertical
+  }, otherProps), indicatorSize === 'fit-content' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: onTabInnerLayout,
+    style: tabInnerStyle
+  }, tabElement, tabIndicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElement, tabIndicator));
 }
 
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","selected","selectedIcon","variant","style","otherProps","theme","useTheme","vertical","color","palette","text","hint","tabBaseStyle","css","fontStyle","createFontStyle","selector","typo","h2","button2","flag","pressEffect","iconElement","cloneElement","fill"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    primary: {\n        minHeight: 40,\n    },\n    secondary: {\n        minHeight: 40,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        indicatorColor = 'primary',\n        selected = false,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'primary'\n            ? styles.primary\n            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n\n            {(enableIndicator && selected) ? <TabIndicator color={indicatorColor}/> : null}\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,OAAO,EAAE;IACLC,SAAS,EAAE;EADN,CALoB;EAQ7BC,SAAS,EAAE;IACPD,SAAS,EAAE;EADJ,CARkB;EAW7BE,gBAAgB,EAAE;IACdF,SAAS,EAAE;EADG;AAXW,CAAlB,CAAf;;AAgBe,SAASG,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,cAAc,GAAG,SALf;IAMFC,QAAQ,GAAG,KANT;IAOFC,YAPE;IAQFC,OAAO,GAAG,SARR;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAMY,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAGL,OAAO,KAAK,mBAA7B;EAEA,MAAMM,KAAK,GAAGR,QAAQ,GAAGK,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBtB,OAAtB,GAAgCiB,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;EAEA,MAAMC,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBhC,MAAM,CAACG,IADc,EAErBkB,OAAO,KAAK,SAAZ,GACMrB,MAAM,CAACO,OADb,GAEOc,OAAO,KAAK,WAAZ,GAA0BrB,MAAM,CAACS,SAAjC,GAA6CT,MAAM,CAACU,gBAJtC,EAKrBY,KALqB,CAAJ,CAArB;EAQA,MAAMW,SAAS,GAAG,IAAAC,uBAAA,EAAgBV,KAAhB,EAAuB;IACrCW,QAAQ,EAAGC,IAAD,IAAUf,OAAO,KAAK,SAAZ,GACde,IAAI,CAACC,EADS,GAEbhB,OAAO,KAAK,WAAZ,GAA0Be,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;IAIrCZ;EAJqC,CAAvB,CAAlB;EAOA,MAAMa,WAAW,GAAGrB,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMH,IAAI,GAAGG,QAAQ,GAAIC,YAAY,IAAIH,WAApB,GAAmCA,WAAxD;EACA,MAAMwB,WAAW,GAAGzB,IAAI,gBAAG,IAAA0B,mBAAA,EAAa1B,IAAb,EAAmB;IAAE2B,IAAI,EAAEhB;EAAR,CAAnB,CAAH,GAAyC,IAAjE;EAEA,oBACI,6BAAC,gBAAD;IACI,WAAW,EAAEa,WADjB;IAEI,KAAK,EAAET,YAFX;IAGI,QAAQ,EAAEL;EAHd,GAIQH,UAJR,gBAMI,6BAAC,cAAD;IACI,QAAQ,EAAEkB,WADd;IAEI,SAAS,EAAE,CAAC5B;EAFhB,EANJ,eAWI,6BAAC,iBAAD;IACI,QAAQ,EAAEC,QADd;IAEI,KAAK,EAAE,IAAAkB,WAAA,EAAIC,SAAJ;EAFX,EAXJ,EAgBMlB,eAAe,IAAII,QAApB,gBAAgC,6BAAC,qBAAD;IAAc,KAAK,EAAED;EAArB,EAAhC,GAAyE,IAhB9E,CADJ;AAoBH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","useTheme","vertical","color","palette","text","primary","hint","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","flag","pressEffect","iconElement","cloneElement","fill","tabElement","React","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n        minHeight: 40,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n    filledInner: {\n        justifyContent: 'center',\n    }\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        indicatorColor = 'primary',\n        indicatorSize = 'full',\n        selected = false,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        style,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.root,\n        styles.filledInner,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n    const tabElement = typeof children !== 'string' ? (\n        React.cloneElement(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n        </React.Fragment>\n    );\n    const tabIndicator = (enableIndicator && selected)\n        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n        : null;\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            {indicatorSize === 'fit-content' ? (\n                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                    {tabElement}\n\n                    {tabIndicator}\n                </View>\n            ) : (\n                <React.Fragment>\n                    {tabElement}\n\n                    {tabIndicator}\n                </React.Fragment>\n            )}\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD,CAFE;IAGFC,SAAS,EAAE;EAHT,CADuB;EAM7BC,gBAAgB,EAAE;IACdD,SAAS,EAAE;EADG,CANW;EAS7BE,WAAW,EAAE;IACTC,cAAc,EAAE;EADP;AATgB,CAAlB,CAAf;;AAce,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,cAAc,GAAG,SALf;IAMFC,aAAa,GAAG,MANd;IAOFC,QAAQ,GAAG,KAPT;IAQFC,YARE;IASFC,OAAO,GAAG,SATR;IAUFC,KAVE;IAWFC,gBAXE;IAYF,GAAGC;EAZD,IAaFb,KAbJ;EAeA,MAAMc,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAGN,OAAO,KAAK,mBAA7B;EAEA,MAAMO,KAAK,GAAGT,QAAQ,GAAGM,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC,OAAtB,GAAgCN,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBE,IAAzE;EAEA,MAAMC,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBnC,MAAM,CAACG,IADc,EAErBmB,OAAO,KAAK,mBAAZ,IAAmCtB,MAAM,CAACQ,gBAFrB,EAGrBe,KAHqB,CAAJ,CAArB;EAMA,MAAMa,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBnC,MAAM,CAACG,IADe,EAEtBH,MAAM,CAACS,WAFe,CAAJ,CAAtB;EAKA,MAAM4B,SAAS,GAAG,IAAAC,uBAAA,EAAgBZ,KAAhB,EAAuB;IACrCa,QAAQ,EAAGC,IAAD,IAAUlB,OAAO,KAAK,SAAZ,GACdkB,IAAI,CAACC,EADS,GAEbnB,OAAO,KAAK,WAAZ,GAA0BkB,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;IAIrCd;EAJqC,CAAvB,CAAlB;EAOA,MAAMe,WAAW,GAAGxB,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMJ,IAAI,GAAGI,QAAQ,GAAIC,YAAY,IAAIJ,WAApB,GAAmCA,WAAxD;EACA,MAAM4B,WAAW,GAAG7B,IAAI,gBAAG,IAAA8B,mBAAA,EAAa9B,IAAb,EAAmB;IAAE+B,IAAI,EAAElB;EAAR,CAAnB,CAAH,GAAyC,IAAjE;EAEA,MAAMmB,UAAU,GAAG,OAAOlC,QAAP,KAAoB,QAApB,gBACfmC,cAAA,CAAMH,YAAN,CAAmBhC,QAAnB,EAA6B;IACzBM;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,QAAQ,EAAEyB,WADd;IAEI,SAAS,EAAE,CAAChC;EAFhB,EADJ,eAMI,6BAAC,iBAAD;IACI,QAAQ,EAAEC,QADd;IAEI,KAAK,EAAE,IAAAqB,WAAA,EAAIE,SAAJ;EAFX,EANJ,CALJ;EAiBA,MAAMa,YAAY,GAAInC,eAAe,IAAIK,QAApB,gBACf,6BAAC,qBAAD;IAAc,aAAa,EAAED,aAA7B;IAA4C,KAAK,EAAED;EAAnD,EADe,GAEf,IAFN;EAIA,oBACI,6BAAC,gBAAD;IACI,WAAW,EAAE0B,WADjB;IAEI,KAAK,EAAEV,YAFX;IAGI,QAAQ,EAAEN;EAHd,GAIQH,UAJR,GAMKN,aAAa,KAAK,aAAlB,gBACG,6BAAC,iBAAD;IAAM,QAAQ,EAAEK,gBAAhB;IAAkC,KAAK,EAAEY;EAAzC,GACKY,UADL,EAGKE,YAHL,CADH,gBAOG,6BAAC,cAAD,CAAO,QAAP,QACKF,UADL,EAGKE,YAHL,CAbR,CADJ;AAsBH;;AAAA"}

package/build/commonjs/Tab/TabIndicator.js

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

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

@@ -1 +1 @@
-{"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"}
+{"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"}

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

@@ -1 +1 @@
-{"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":""}
+{"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' | 'bottom-navigation';\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":""}

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 } from './TabProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabVariant, TabIndicatorSize } from './TabProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Tabs/Tabs.js

@@ -21,6 +21,8 @@ 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"));
@@ -50,26 +52,33 @@ const useStyles = function () {
 };
 
 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,
     style,
     variant = 'primary',
-    UNSTABLE_sharedIndex
+    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);
   };
 
@@ -77,16 +86,47 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     setTab
   }), [sharedIndex]);
   const styles = useStyles();
-  const [coordinates, updateCoordinate] = (0, _useTabCoordinates.default)(children);
-  const canRenderIndicator = (0, _utils.isEveryTabCoordinatesDefined)(coordinates, children);
+  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 tabElements = _react.default.Children.map(children, (child, index) => {
     const onLayout = event => {
       var _child$props$onLayout, _child$props;
 
@@ -117,10 +157,12 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     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, {
@@ -128,8 +170,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
       index: index,
       initialIndex: realInitialIndex
     });
-  });
-
+  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
   const tabIndicator = canRenderIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
     color: indicatorColor,
     coordinates: coordinates,

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

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