@fountain-ui/core 2.0.0-beta.13 → 2.0.0-beta.16

package/build/commonjs/ButtonBase/ButtonBase.js

@@ -29,7 +29,7 @@ const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96; // at "node_modules/react-native/Libraries/Pressability.js"
 // const DEFAULT_MIN_PRESS_DURATION = 130;
 
-const PRESS_IN_DELAY = 130;
+const SCALE_EFFECT_PRESS_IN_DELAY = 130;
 
 const startTimingAnimationWithDefaults = (value, toValue) => {
   _reactNative.Animated.timing(value, {
@@ -92,13 +92,14 @@ function ButtonBase(props) {
       scale
     }]
   };
+  const pressDelay = pressEffect === 'scale' ? SCALE_EFFECT_PRESS_IN_DELAY : 0;
   return /*#__PURE__*/_react.default.createElement(_animated.AnimatedPressable, _extends({
     disabled: disabled,
     onPress: handlePress,
     onPressIn: handlePressIn,
     onPressOut: handlePressOut,
     style: [animatedStyle, styleProp],
-    unstable_pressDelay: PRESS_IN_DELAY
+    unstable_pressDelay: pressDelay
   }, otherProps), typeof children !== 'function' ? _ref => {
     let {
       hovered

package/build/commonjs/ButtonBase/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","Animated","timing","duration","useNativeDriver","start","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","style","styleProp","throttleMillis","otherProps","handlePress","useThrottle","periodMillis","callback","opacity","useRef","Value","current","scale","useEffect","setValue","startScaleAnimation","useCallback","pressIn","isHover","startOpacityAnimation","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n    (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst PRESS_IN_DELAY = 130;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n    value: TimingAnimationValue,\n    toValue: TimingAnimationToValue,\n) => {\n    Animated.timing(value, {\n        toValue,\n        duration: 150,\n        useNativeDriver: true,\n    }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style: styleProp,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = useRef<Animated.Value>(new Animated.Value(ORIGINAL_OPACITY)).current;\n    const scale = useRef<Animated.Value>(new Animated.Value(ORIGINAL_SCALE)).current;\n\n    useEffect(() => {\n        opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);\n    }, [disabled]);\n\n    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n        if (!isHover) {\n            startTimingAnimationWithDefaults(\n                scale,\n                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n            );\n        }\n    }, []);\n\n    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n        if (pressIn) {\n            opacity.setValue(ACTIVE_OPACITY);\n        } else {\n            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n        }\n    }, []);\n\n    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n        if (pressEffect === 'scale') {\n            startScaleAnimation(pressIn, isHover);\n        } else if (pressEffect === 'opacity') {\n            startOpacityAnimation(pressIn, isHover);\n        }\n    }, [pressEffect]);\n\n    const handlePressIn = useCallback(() => {\n        startPressAnimation(true, false);\n    }, [startPressAnimation]);\n\n    const handlePressOut = useCallback(() => {\n        startPressAnimation(false, false);\n    }, [startPressAnimation]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ scale }],\n    };\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={handlePressIn}\n            onPressOut={handlePressOut}\n            style={[\n                animatedStyle,\n                styleProp,\n            ]}\n            unstable_pressDelay={PRESS_IN_DELAY}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startPressAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","SCALE_EFFECT_PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","Animated","timing","duration","useNativeDriver","start","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","style","styleProp","throttleMillis","otherProps","handlePress","useThrottle","periodMillis","callback","opacity","useRef","Value","current","scale","useEffect","setValue","startScaleAnimation","useCallback","pressIn","isHover","startOpacityAnimation","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","pressDelay","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n    (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst SCALE_EFFECT_PRESS_IN_DELAY = 130;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n    value: TimingAnimationValue,\n    toValue: TimingAnimationToValue,\n) => {\n    Animated.timing(value, {\n        toValue,\n        duration: 150,\n        useNativeDriver: true,\n    }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style: styleProp,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = useRef<Animated.Value>(new Animated.Value(ORIGINAL_OPACITY)).current;\n    const scale = useRef<Animated.Value>(new Animated.Value(ORIGINAL_SCALE)).current;\n\n    useEffect(() => {\n        opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);\n    }, [disabled]);\n\n    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n        if (!isHover) {\n            startTimingAnimationWithDefaults(\n                scale,\n                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n            );\n        }\n    }, []);\n\n    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n        if (pressIn) {\n            opacity.setValue(ACTIVE_OPACITY);\n        } else {\n            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n        }\n    }, []);\n\n    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n        if (pressEffect === 'scale') {\n            startScaleAnimation(pressIn, isHover);\n        } else if (pressEffect === 'opacity') {\n            startOpacityAnimation(pressIn, isHover);\n        }\n    }, [pressEffect]);\n\n    const handlePressIn = useCallback(() => {\n        startPressAnimation(true, false);\n    }, [startPressAnimation]);\n\n    const handlePressOut = useCallback(() => {\n        startPressAnimation(false, false);\n    }, [startPressAnimation]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ scale }],\n    };\n\n    const pressDelay = pressEffect === 'scale'\n        ? SCALE_EFFECT_PRESS_IN_DELAY\n        : 0;\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={handlePressIn}\n            onPressOut={handlePressOut}\n            style={[\n                animatedStyle,\n                styleProp,\n            ]}\n            unstable_pressDelay={pressDelay}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startPressAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAOO,MAAMA,gBAAgB,GAAG,CAAzB;;AACA,MAAMC,gBAAgB,GAAG,EAAzB;;AACP,MAAMC,cAAc,GAAG,GAAvB;AAEA,MAAMC,cAAc,GAAG,CAAvB;AACA,MAAMC,cAAc,GAAG,GAAvB,C,CAEA;AACA;;AACA,MAAMC,2BAA2B,GAAG,GAApC;;AAKA,MAAMC,gCAAgC,GAAG,CACrCC,KADqC,EAErCC,OAFqC,KAGpC;EACDC,qBAAA,CAASC,MAAT,CAAgBH,KAAhB,EAAuB;IACnBC,OADmB;IAEnBG,QAAQ,EAAE,GAFS;IAGnBC,eAAe,EAAE;EAHE,CAAvB,EAIGC,KAJH;AAKH,CATD;;AAWe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,eAAe,GAAG,KAHhB;IAIFC,OAJE;IAKFC,WAAW,GAAG,SALZ;IAMFC,KAAK,EAAEC,SANL;IAOFC,cAAc,GAAG,GAPf;IAQF,GAAGC;EARD,IASFT,KATJ;EAWA,MAAMU,WAAW,GAAG,IAAAC,kBAAA,EAAY;IAC5BC,YAAY,EAAET,eAAe,GAAG,CAAH,GAAOK,cADR;IAE5BK,QAAQ,EAAET;EAFkB,CAAZ,CAApB;EAKA,MAAMU,OAAO,GAAG,IAAAC,aAAA,EAAuB,IAAIrB,qBAAA,CAASsB,KAAb,CAAmB/B,gBAAnB,CAAvB,EAA6DgC,OAA7E;EACA,MAAMC,KAAK,GAAG,IAAAH,aAAA,EAAuB,IAAIrB,qBAAA,CAASsB,KAAb,CAAmB5B,cAAnB,CAAvB,EAA2D6B,OAAzE;EAEA,IAAAE,gBAAA,EAAU,MAAM;IACZL,OAAO,CAACM,QAAR,CAAiBlB,QAAQ,GAAGhB,gBAAH,GAAsBD,gBAA/C;EACH,CAFD,EAEG,CAACiB,QAAD,CAFH;EAIA,MAAMmB,mBAAmB,GAAG,IAAAC,kBAAA,EAAiC,CAACC,OAAD,EAAUC,OAAV,KAAsB;IAC/E,IAAI,CAACA,OAAL,EAAc;MACVjC,gCAAgC,CAC5B2B,KAD4B,EAE5BK,OAAO,GAAGlC,cAAH,GAAoBD,cAFC,CAAhC;IAIH;EACJ,CAP2B,EAOzB,EAPyB,CAA5B;EASA,MAAMqC,qBAAqB,GAAG,IAAAH,kBAAA,EAAkCC,OAAD,IAAa;IACxE,IAAIA,OAAJ,EAAa;MACTT,OAAO,CAACM,QAAR,CAAiBjC,cAAjB;IACH,CAFD,MAEO;MACHI,gCAAgC,CAACuB,OAAD,EAAU7B,gBAAV,CAAhC;IACH;EACJ,CAN6B,EAM3B,EAN2B,CAA9B;EAQA,MAAMyC,mBAAmB,GAAG,IAAAJ,kBAAA,EAAiC,UAACC,OAAD,EAA8B;IAAA,IAApBC,OAAoB,uEAAV,KAAU;;IACvF,IAAInB,WAAW,KAAK,OAApB,EAA6B;MACzBgB,mBAAmB,CAACE,OAAD,EAAUC,OAAV,CAAnB;IACH,CAFD,MAEO,IAAInB,WAAW,KAAK,SAApB,EAA+B;MAClCoB,qBAAqB,CAACF,OAAD,EAAUC,OAAV,CAArB;IACH;EACJ,CAN2B,EAMzB,CAACnB,WAAD,CANyB,CAA5B;EAQA,MAAMsB,aAAa,GAAG,IAAAL,kBAAA,EAAY,MAAM;IACpCI,mBAAmB,CAAC,IAAD,EAAO,KAAP,CAAnB;EACH,CAFqB,EAEnB,CAACA,mBAAD,CAFmB,CAAtB;EAIA,MAAME,cAAc,GAAG,IAAAN,kBAAA,EAAY,MAAM;IACrCI,mBAAmB,CAAC,KAAD,EAAQ,KAAR,CAAnB;EACH,CAFsB,EAEpB,CAACA,mBAAD,CAFoB,CAAvB;EAIA,MAAMG,aAAa,GAAG;IAClBf,OADkB;IAElBgB,SAAS,EAAE,CAAC;MAAEZ;IAAF,CAAD;EAFO,CAAtB;EAKA,MAAMa,UAAU,GAAG1B,WAAW,KAAK,OAAhB,GACbf,2BADa,GAEb,CAFN;EAIA,oBACI,6BAAC,2BAAD;IACI,QAAQ,EAAEY,QADd;IAEI,OAAO,EAAEQ,WAFb;IAGI,SAAS,EAAEiB,aAHf;IAII,UAAU,EAAEC,cAJhB;IAKI,KAAK,EAAE,CACHC,aADG,EAEHtB,SAFG,CALX;IASI,mBAAmB,EAAEwB;EATzB,GAUQtB,UAVR,GAYK,OAAOR,QAAP,KAAoB,UAApB,GACG,QAAiB;IAAA,IAAhB;MAAE+B;IAAF,CAAgB;;IACb,IAAIA,OAAO,KAAKC,SAAZ,IAAyB,CAAC/B,QAA9B,EAAwC;MACpCwB,mBAAmB,CAACM,OAAD,EAAU,IAAV,CAAnB;IACH;;IAED,OAAO/B,QAAP;EACH,CAPJ,GAQGA,QApBR,CADJ;AAwBH;;AAAA"}

package/build/commonjs/CircularProgress/CircularProgress.js

@@ -7,7 +7,7 @@ exports.default = CircularProgress;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNative = require("react-native");
 
 var _icons = require("../internal/icons");
 
@@ -15,10 +15,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 ANIMATION_CONFIG = {
-  duration: 900,
-  easing: _reactNativeReanimated.Easing.linear
-};
 const MIN_ROTATE_DEGREE = 0;
 const MAX_ROTATE_DEGREE = 360;
 
@@ -36,16 +32,24 @@ function CircularProgress(props) {
     style: styleProp
   } = props;
   const styles = useStyles();
-  const rotate = (0, _reactNativeReanimated.useSharedValue)(MIN_ROTATE_DEGREE);
-  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+  const rotate = (0, _react.useRef)(new _reactNative.Animated.Value(MIN_ROTATE_DEGREE)).current;
+  const animatedStyle = {
     transform: [{
-      rotate: `${rotate.value}deg`
+      rotate: rotate.interpolate({
+        inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],
+        outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`]
+      })
     }]
-  }), []);
+  };
   (0, _react.useEffect)(() => {
-    rotate.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(MAX_ROTATE_DEGREE, ANIMATION_CONFIG), -1, false);
+    _reactNative.Animated.loop(_reactNative.Animated.timing(rotate, {
+      toValue: MAX_ROTATE_DEGREE,
+      duration: 900,
+      easing: _reactNative.Easing.linear,
+      useNativeDriver: true
+    })).start();
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     children: /*#__PURE__*/_react.default.createElement(_icons.CircularProgress, null),
     style: [animatedStyle, styles.root, styleProp]
   });

package/build/commonjs/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANIMATION_CONFIG","duration","easing","Easing","linear","MIN_ROTATE_DEGREE","MAX_ROTATE_DEGREE","useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styleProp","styles","rotate","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","useEffect","withRepeat","withTiming"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 900, easing: Easing.linear };\n\nconst MIN_ROTATE_DEGREE = 0;\nconst MAX_ROTATE_DEGREE = 360;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style: styleProp } = props;\n\n    const styles = useStyles();\n\n    const rotate = useSharedValue(MIN_ROTATE_DEGREE);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    useEffect(() => {\n        rotate.value = withRepeat(\n            withTiming(MAX_ROTATE_DEGREE, ANIMATION_CONFIG),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View\n            children={<CircularProgressIcon/>}\n            style={[\n                animatedStyle,\n                styles.root,\n                styleProp,\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;AAKA,MAAMA,gBAA4C,GAAG;EAAEC,QAAQ,EAAE,GAAZ;EAAiBC,MAAM,EAAEC,6BAAA,CAAOC;AAAhC,CAArD;AAEA,MAAMC,iBAAiB,GAAG,CAA1B;AACA,MAAMC,iBAAiB,GAAG,GAA1B;;AAEA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,gBAAT,CAA0BC,KAA1B,EAAuE;EAClF,MAAM;IAAEC,KAAK,EAAEC;EAAT,IAAuBF,KAA7B;EAEA,MAAMG,MAAM,GAAGR,SAAS,EAAxB;EAEA,MAAMS,MAAM,GAAG,IAAAC,qCAAA,EAAeZ,iBAAf,CAAf;EAEA,MAAMa,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEJ,MAAM,EAAG,GAAEA,MAAM,CAACK,KAAM;IAA1B,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,IAAAC,gBAAA,EAAU,MAAM;IACZN,MAAM,CAACK,KAAP,GAAe,IAAAE,iCAAA,EACX,IAAAC,iCAAA,EAAWlB,iBAAX,EAA8BN,gBAA9B,CADW,EAEX,CAAC,CAFU,EAGX,KAHW,CAAf;EAKH,CAND,EAMG,EANH;EAQA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,QAAQ,eAAE,6BAAC,uBAAD,OADd;IAEI,KAAK,EAAE,CACHkB,aADG,EAEHH,MAAM,CAACP,IAFJ,EAGHM,SAHG;EAFX,EADJ;AAUH;;AAAA"}
+{"version":3,"names":["MIN_ROTATE_DEGREE","MAX_ROTATE_DEGREE","useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styleProp","styles","rotate","useRef","Animated","Value","current","animatedStyle","transform","interpolate","inputRange","outputRange","useEffect","loop","timing","toValue","duration","easing","Easing","linear","useNativeDriver","start"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst MIN_ROTATE_DEGREE = 0;\nconst MAX_ROTATE_DEGREE = 360;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style: styleProp } = props;\n\n    const styles = useStyles();\n\n    const rotate = useRef(new Animated.Value(MIN_ROTATE_DEGREE)).current;\n\n    const animatedStyle = {\n        transform: [{\n            rotate: rotate.interpolate({\n                inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],\n                outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`],\n            }),\n        }],\n    };\n\n    useEffect(() => {\n        Animated.loop(\n            Animated.timing(\n                rotate,\n                {\n                    toValue: MAX_ROTATE_DEGREE,\n                    duration: 900,\n                    easing: Easing.linear,\n                    useNativeDriver: true,\n                },\n            ),\n        ).start();\n    }, []);\n\n    return (\n        <Animated.View\n            children={<CircularProgressIcon/>}\n            style={[\n                animatedStyle,\n                styles.root,\n                styleProp,\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;;;AAKA,MAAMA,iBAAiB,GAAG,CAA1B;AACA,MAAMC,iBAAiB,GAAG,GAA1B;;AAEA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,gBAAT,CAA0BC,KAA1B,EAAuE;EAClF,MAAM;IAAEC,KAAK,EAAEC;EAAT,IAAuBF,KAA7B;EAEA,MAAMG,MAAM,GAAGR,SAAS,EAAxB;EAEA,MAAMS,MAAM,GAAG,IAAAC,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmBd,iBAAnB,CAAP,EAA8Ce,OAA7D;EAEA,MAAMC,aAAa,GAAG;IAClBC,SAAS,EAAE,CAAC;MACRN,MAAM,EAAEA,MAAM,CAACO,WAAP,CAAmB;QACvBC,UAAU,EAAE,CAACnB,iBAAD,EAAoBC,iBAApB,CADW;QAEvBmB,WAAW,EAAE,CAAE,GAAEpB,iBAAkB,KAAtB,EAA6B,GAAEC,iBAAkB,KAAjD;MAFU,CAAnB;IADA,CAAD;EADO,CAAtB;EASA,IAAAoB,gBAAA,EAAU,MAAM;IACZR,qBAAA,CAASS,IAAT,CACIT,qBAAA,CAASU,MAAT,CACIZ,MADJ,EAEI;MACIa,OAAO,EAAEvB,iBADb;MAEIwB,QAAQ,EAAE,GAFd;MAGIC,MAAM,EAAEC,mBAAA,CAAOC,MAHnB;MAIIC,eAAe,EAAE;IAJrB,CAFJ,CADJ,EAUEC,KAVF;EAWH,CAZD,EAYG,EAZH;EAcA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,QAAQ,eAAE,6BAAC,uBAAD,OADd;IAEI,KAAK,EAAE,CACHd,aADG,EAEHN,MAAM,CAACP,IAFJ,EAGHM,SAHG;EAFX,EADJ;AAUH;;AAAA"}

package/build/commonjs/Tab/Tab.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tab;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
@@ -19,6 +19,10 @@ var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
 
 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 styles = _styles.StyleSheet.create({
@@ -42,9 +46,9 @@ function Tab(props) {
   const {
     badgeVisible = false,
     children,
-    enableIndicator,
+    enableIndicator = false,
     icon: defaultIcon,
-    selected,
+    selected = false,
     selectedIcon,
     variant = 'primary',
     style,
@@ -60,7 +64,7 @@ function Tab(props) {
   });
   const pressEffect = selected ? 'none' : 'opacity';
   const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
-  const iconElement = icon ? /*#__PURE__*/_react.default.cloneElement(icon, {
+  const iconElement = icon ? /*#__PURE__*/(0, _react.cloneElement)(icon, {
     fill: color
   }) : null;
   return /*#__PURE__*/_react.default.createElement(_TabBase.default, _extends({
@@ -73,7 +77,7 @@ function Tab(props) {
   }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: children,
     style: (0, _styles.css)(fontStyle)
-  }), enableIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, null) : null);
+  }), enableIndicator && selected ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, null) : null);
 }
 
 ;

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","selected","selectedIcon","variant","style","otherProps","theme","useTheme","vertical","color","palette","text","hint","tabBaseStyle","css","fontStyle","createFontStyle","selector","typo","h2","button2","flag","pressEffect","iconElement","React","cloneElement","fill"],"sources":["Tab.tsx"],"sourcesContent":["import React 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: 48,\n    },\n    secondary: {\n        minHeight: 48,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator,\n        icon: defaultIcon,\n        selected,\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 ? React.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 ? <TabIndicator/> : 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,eAHE;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QALE;IAMFC,YANE;IAOFC,OAAO,GAAG,SAPR;IAQFC,KARE;IASF,GAAGC;EATD,IAUFV,KAVJ;EAYA,MAAMW,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAGL,OAAO,KAAK,mBAA7B;EAEA,MAAMM,KAAK,GAAGR,QAAQ,GAAGK,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBrB,OAAtB,GAAgCgB,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;EAEA,MAAMC,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrB/B,MAAM,CAACG,IADc,EAErBiB,OAAO,KAAK,SAAZ,GACMpB,MAAM,CAACO,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BpB,MAAM,CAACS,SAAjC,GAA6CT,MAAM,CAACU,gBAJtC,EAKrBW,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,MAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMuB,WAAW,GAAGxB,IAAI,gBAAGyB,cAAA,CAAMC,YAAN,CAAmB1B,IAAnB,EAAyB;IAAE2B,IAAI,EAAEjB;EAAR,CAAzB,CAAH,GAA+C,IAAvE;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,CAAC3B;EAFhB,EANJ,eAWI,6BAAC,iBAAD;IACI,QAAQ,EAAEC,QADd;IAEI,KAAK,EAAE,IAAAiB,WAAA,EAAIC,SAAJ;EAFX,EAXJ,EAgBKjB,eAAe,gBAAG,6BAAC,qBAAD,OAAH,GAAqB,IAhBzC,CADJ;AAoBH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","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: 48,\n    },\n    secondary: {\n        minHeight: 48,\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        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/> : 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,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,OAAO,GAAG,SAPR;IAQFC,KARE;IASF,GAAGC;EATD,IAUFV,KAVJ;EAYA,MAAMW,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAGL,OAAO,KAAK,mBAA7B;EAEA,MAAMM,KAAK,GAAGR,QAAQ,GAAGK,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBrB,OAAtB,GAAgCgB,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;EAEA,MAAMC,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrB/B,MAAM,CAACG,IADc,EAErBiB,OAAO,KAAK,SAAZ,GACMpB,MAAM,CAACO,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BpB,MAAM,CAACS,SAAjC,GAA6CT,MAAM,CAACU,gBAJtC,EAKrBW,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,MAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMuB,WAAW,GAAGxB,IAAI,gBAAG,IAAAyB,mBAAA,EAAazB,IAAb,EAAmB;IAAE0B,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,CAAC3B;EAFhB,EANJ,eAWI,6BAAC,iBAAD;IACI,QAAQ,EAAEC,QADd;IAEI,KAAK,EAAE,IAAAiB,WAAA,EAAIC,SAAJ;EAFX,EAXJ,EAgBMjB,eAAe,IAAIG,QAApB,gBAAgC,6BAAC,qBAAD,OAAhC,GAAkD,IAhBvD,CADJ;AAoBH;;AAAA"}

package/build/commonjs/Tabs/IndexAwareTab.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IndexAwareTab;
+
+var _react = require("react");
+
+var _reactNativeReanimated = require("react-native-reanimated");
+
+function IndexAwareTab(props) {
+  const {
+    children,
+    index,
+    sharedIndex
+  } = props;
+  const [selected, setSelected] = (0, _react.useState)(index === sharedIndex.value);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => index === sharedIndex.value, result => {
+    (0, _reactNativeReanimated.runOnJS)(setSelected)(result);
+  }, [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","sharedIndex","selected","setSelected","useState","value","useAnimatedReaction","result","runOnJS","cloneElement"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useState } from 'react';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedReaction } from 'react-native-reanimated';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n    sharedIndex: SharedValue<number>;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n        sharedIndex,\n    } = props;\n\n    const [selected, setSelected] = useState(index === sharedIndex.value);\n\n    useAnimatedReaction(\n        () => index === sharedIndex.value,\n        (result) => {\n            runOnJS(setSelected)(result);\n        },\n        [index],\n    );\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":";;;;;;;AACA;;AAEA;;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,EAASJ,KAAK,KAAKC,WAAW,CAACI,KAA/B,CAAhC;EAEA,IAAAC,0CAAA,EACI,MAAMN,KAAK,KAAKC,WAAW,CAACI,KADhC,EAEKE,MAAD,IAAY;IACR,IAAAC,8BAAA,EAAQL,WAAR,EAAqBI,MAArB;EACH,CAJL,EAKI,CAACP,KAAD,CALJ;EAQA,oBAAO,IAAAS,mBAAA,EAAaV,QAAb,EAAuB;IAAEG;EAAF,CAAvB,CAAP;AACH;;AAAA"}

package/build/commonjs/Tabs/TabIndicator.js

@@ -21,13 +21,19 @@ 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 INDICATOR_WIDTH = 10;
+const INDICATOR_HEIGHT = 4;
+const SCROLLABLE_TABS_INSET = 12 * 2;
+
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
     root: {
       backgroundColor: theme.palette.secondary.main,
+      left: 0,
       bottom: 0,
-      height: 4,
+      width: INDICATOR_WIDTH,
+      height: INDICATOR_HEIGHT,
       position: 'absolute'
     },
     disabled: {
@@ -36,29 +42,37 @@ const useStyles = function () {
   };
 };
 
+const ANIMATION_CONFIG = {
+  duration: 300,
+  easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
+};
+
 function TabIndicator(props) {
   const {
     coordinates,
     disabled,
     scrollable,
-    scrollValue,
+    sharedIndex,
     style,
     ...otherProps
   } = props;
   const styles = useStyles();
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const rawScrollValue = scrollValue.value;
-    const index = Math.floor(rawScrollValue);
-    const offset = rawScrollValue % 1;
-    const coordinate = coordinates[index] ?? _TabCoordinate.defaultCoordinate;
-    const nextCoordinate = coordinates[index + 1] ?? _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 index = sharedIndex.value;
+    const {
+      x1,
+      x2
+    } = coordinates[index] ?? _TabCoordinate.defaultCoordinate;
+    const tabWidth = x2 - x1;
+    const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+    const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+    const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;
     return {
-      left: x1 + leftInset,
-      width: Math.max(x2 - x1 - rightInset, 0)
+      transform: [{
+        translateX: (0, _reactNativeReanimated.withTiming)(translateX, ANIMATION_CONFIG)
+      }, {
+        scaleX: (0, _reactNativeReanimated.withTiming)(scaleX, ANIMATION_CONFIG)
+      }]
     };
   }, [coordinates, scrollable]);
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","backgroundColor","palette","secondary","main","bottom","height","position","disabled","TabIndicator","props","coordinates","scrollable","scrollValue","style","otherProps","styles","animatedStyle","useAnimatedStyle","rawScrollValue","value","index","Math","floor","offset","coordinate","defaultCoordinate","nextCoordinate","x1","x2","leftInset","rightInset","left","width","max","undefined"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedStyle } 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 animatedStyle = useAnimatedStyle(() => {\n        const rawScrollValue = scrollValue.value;\n\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    }, [coordinates, scrollable]);\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"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;;;;;;;AAIA,MAAMA,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,QAAQ,EAAE;IAJR,CADH;IAOHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EAPP,CAAP;AAWH,CAdD;;AAgBe,SAASG,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFH,QAFE;IAGFI,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGnB,SAAS,EAAxB;EAEA,MAAMoB,aAAa,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACzC,MAAMC,cAAc,GAAGN,WAAW,CAACO,KAAnC;IAEA,MAAMC,KAAK,GAAGC,IAAI,CAACC,KAAL,CAAWJ,cAAX,CAAd;IACA,MAAMK,MAAM,GAAGL,cAAc,GAAG,CAAhC;IAEA,MAAMM,UAAU,GAAGd,WAAW,CAACU,KAAD,CAAX,IAAsBK,gCAAzC;IACA,MAAMC,cAAc,GAAGhB,WAAW,CAACU,KAAK,GAAG,CAAT,CAAX,IAA0BK,gCAAjD;IAEA,MAAME,EAAE,GAAIJ,MAAM,GAAGG,cAAc,CAACC,EAAxB,GAA6B,CAAC,IAAIJ,MAAL,IAAeC,UAAU,CAACG,EAAnE;IACA,MAAMC,EAAE,GAAIL,MAAM,GAAGG,cAAc,CAACE,EAAxB,GAA6B,CAAC,IAAIL,MAAL,IAAeC,UAAU,CAACI,EAAnE;IAEA,MAAMC,SAAS,GAAGlB,UAAU,GAAG,EAAH,GAAQ,CAApC;IACA,MAAMmB,UAAU,GAAGnB,UAAU,GAAG,EAAH,GAAQ,CAArC;IAEA,OAAO;MACHoB,IAAI,EAAEJ,EAAE,GAAGE,SADR;MAEHG,KAAK,EAAEX,IAAI,CAACY,GAAL,CAASL,EAAE,GAAGD,EAAL,GAAUG,UAAnB,EAA+B,CAA/B;IAFJ,CAAP;EAIH,CAnBqB,EAmBnB,CAACpB,WAAD,EAAcC,UAAd,CAnBmB,CAAtB;EAqBA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,MAAM,CAAChB,IADJ,EAEHQ,QAAQ,GAAGQ,MAAM,CAACR,QAAV,GAAqB2B,SAF1B,EAGHlB,aAHG,EAIHH,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}
+{"version":3,"names":["INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","useTheme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","ANIMATION_CONFIG","duration","easing","Easing","out","exp","TabIndicator","props","coordinates","scrollable","sharedIndex","style","otherProps","styles","animatedStyle","useAnimatedStyle","index","value","x1","x2","defaultCoordinate","tabWidth","translateX","inset","scaleX","transform","withTiming","undefined"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, withTiming } 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 INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.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 ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 300,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        scrollable,\n        sharedIndex,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const index = sharedIndex.value;\n\n        const { x1, x2 } = coordinates[index] ?? defaultCoordinate;\n\n        const tabWidth = x2 - x1;\n\n        const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n        const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n        return {\n            transform: [\n                { translateX: withTiming(translateX, ANIMATION_CONFIG) },\n                { scaleX: withTiming(scaleX, ANIMATION_CONFIG) },\n            ],\n        };\n    }, [coordinates, scrollable]);\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"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;;;;;;;;;AAIA,MAAMA,eAAe,GAAG,EAAxB;AACA,MAAMC,gBAAgB,GAAG,CAAzB;AAEA,MAAMC,qBAAqB,GAAG,KAAK,CAAnC;;AAEA,MAAMC,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,IAAI,EAAE,CAFJ;MAGFC,MAAM,EAAE,CAHN;MAIFC,KAAK,EAAEb,eAJL;MAKFc,MAAM,EAAEb,gBALN;MAMFc,QAAQ,EAAE;IANR,CADH;IASHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EATP,CAAP;AAaH,CAhBD;;AAkBA,MAAMG,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEC,6BAAA,CAAOC,GAAP,CAAWD,6BAAA,CAAOE,GAAlB;AAFyC,CAArD;;AAKe,SAASC,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFT,QAFE;IAGFU,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAG3B,SAAS,EAAxB;EAEA,MAAM4B,aAAa,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACzC,MAAMC,KAAK,GAAGN,WAAW,CAACO,KAA1B;IAEA,MAAM;MAAEC,EAAF;MAAMC;IAAN,IAAaX,WAAW,CAACQ,KAAD,CAAX,IAAsBI,gCAAzC;IAEA,MAAMC,QAAQ,GAAGF,EAAE,GAAGD,EAAtB;IAEA,MAAMI,UAAU,GAAGJ,EAAE,GAAG,CAACG,QAAQ,GAAGtC,eAAZ,IAA+B,CAAvD;IAEA,MAAMwC,KAAK,GAAGd,UAAU,GAAGxB,qBAAH,GAA2B,CAAnD;IACA,MAAMuC,MAAM,GAAG,CAACH,QAAQ,GAAGE,KAAZ,IAAqBxC,eAApC;IAEA,OAAO;MACH0C,SAAS,EAAE,CACP;QAAEH,UAAU,EAAE,IAAAI,iCAAA,EAAWJ,UAAX,EAAuBtB,gBAAvB;MAAd,CADO,EAEP;QAAEwB,MAAM,EAAE,IAAAE,iCAAA,EAAWF,MAAX,EAAmBxB,gBAAnB;MAAV,CAFO;IADR,CAAP;EAMH,CAlBqB,EAkBnB,CAACQ,WAAD,EAAcC,UAAd,CAlBmB,CAAtB;EAoBA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,MAAM,CAACxB,IADJ,EAEHU,QAAQ,GAAGc,MAAM,CAACd,QAAV,GAAqB4B,SAF1B,EAGHb,aAHG,EAIHH,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n\n    /**\n     * Scrollable value for using animated interpolation.\n     */\n    scrollValue: SharedValue<number>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n\n    /**\n     * Shared index value for using animated interpolation.\n     */\n    sharedIndex: SharedValue<number>;\n}> {}\n"],"mappings":""}

package/build/commonjs/Tabs/Tabs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Tabs;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,18 +15,18 @@ var _styles = require("../styles");
 
 var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
 
-var _useTabsWidth = _interopRequireDefault(require("./useTabsWidth"));
+var _IndexAwareTab = _interopRequireDefault(require("./IndexAwareTab"));
 
 var _useTabCoordinates = _interopRequireDefault(require("./useTabCoordinates"));
 
+var _useScrollViewReaction = _interopRequireDefault(require("./useScrollViewReaction"));
+
 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 useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
@@ -43,63 +43,42 @@ const useStyles = function () {
   };
 };
 
-const ANIMATION_CONFIG = {
-  duration: 200,
-  easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
-};
-
-function Tabs(props) {
+const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   const {
     children,
-    index: indexProp,
+    initialIndex = 0,
     disableIndicator = false,
     keyboardDismissMode = 'none',
     keyboardShouldPersistTaps = 'never',
     onChange,
     scrollable = false,
-    scrollValue: scrollValueProp,
     style,
     variant = 'primary',
-    ...otherProps
+    UNSTABLE_sharedIndex
   } = props;
+  const fallbackSharedIndex = (0, _reactNativeReanimated.useSharedValue)(initialIndex);
+  const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+
+  const getCurrentIndex = () => sharedIndex.value;
+
+  const setTab = newIndex => {
+    sharedIndex.value = newIndex;
+  };
+
+  (0, _react.useImperativeHandle)(ref, () => ({
+    getCurrentIndex,
+    setTab
+  }), [sharedIndex]);
   const styles = useStyles();
-  const [containerWidth, handleLayout] = (0, _useTabsWidth.default)();
-  const scrollViewRef = (0, _react.useRef)(null);
   const {
     coordinates,
     updateCoordinate
   } = (0, _useTabCoordinates.default)(children);
-  const internalScrollValue = (0, _reactNativeReanimated.useSharedValue)(0);
-  const scrollValue = scrollValueProp ?? internalScrollValue;
+  const {
+    scrollViewRef,
+    onLayout
+  } = (0, _useScrollViewReaction.default)(sharedIndex, coordinates);
   const isReadyToRenderIndicator = coordinates.length > 0;
-  (0, _react.useEffect)(() => {
-    const animateTab = index => {
-      scrollValue.value = (0, _reactNativeReanimated.withTiming)(index, ANIMATION_CONFIG);
-    };
-
-    animateTab(indexProp);
-  }, [indexProp, scrollValue]);
-  const scrollPosition = (0, _react.useMemo)(() => {
-    const coordinate = coordinates[indexProp - 1];
-
-    if (coordinate) {
-      const tabWidth = coordinate.x2 - coordinate.x1;
-      return Math.floor(coordinate.x1 + tabWidth / 2);
-    }
-
-    return 0;
-  }, [indexProp, coordinates]);
-  (0, _react.useEffect)(() => {
-    const scrollView = scrollViewRef.current;
-
-    if (scrollView) {
-      scrollView.scrollTo({
-        x: scrollPosition,
-        y: 0,
-        animated: true
-      });
-    }
-  }, [scrollPosition, containerWidth]);
 
   const tabElements = _react.default.Children.map(children, (child, index) => {
     const onLayout = event => {
@@ -119,36 +98,38 @@ function Tabs(props) {
     const onPress = () => {
       var _child$props$onPress, _child$props;
 
+      setTab(index);
       onChange === null || onChange === void 0 ? void 0 : onChange(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);
-    };
+    }; // @ts-ignore
 
-    const selected = index === indexProp;
-    const enableIndicatorPlaceholder = disableIndicator ? false : isReadyToRenderIndicator ? false : selected; //@ts-ignore
 
-    return /*#__PURE__*/(0, _react.cloneElement)(child, {
-      enableIndicator: enableIndicatorPlaceholder,
+    const tabElement = /*#__PURE__*/(0, _react.cloneElement)(child, {
+      enableIndicator: !disableIndicator && !isReadyToRenderIndicator,
       onLayout,
       onPress,
       onMouseDown,
       variant,
-      selected,
       style: scrollable ? undefined : styles.fixedTab
     });
+    return /*#__PURE__*/_react.default.createElement(_IndexAwareTab.default, {
+      children: tabElement,
+      index: index,
+      sharedIndex: sharedIndex
+    });
   });
 
-  const indicator = /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
+  const tabIndicator = isReadyToRenderIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
     coordinates: coordinates,
     disabled: disableIndicator,
     scrollable: scrollable,
-    scrollValue: scrollValue
-  });
-
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
-    onLayout: handleLayout,
+    sharedIndex: sharedIndex
+  }) : null;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: onLayout,
     style: (0, _styles.css)([styles.root, scrollable ? undefined : styles.fixedRoot, style])
-  }, otherProps), scrollable ? /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+  }, scrollable ? /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
     contentContainerStyle: styles.scrollableContainer,
@@ -160,8 +141,8 @@ function Tabs(props) {
     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

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","ANIMATION_CONFIG","duration","easing","Easing","out","exp","Tabs","props","children","index","indexProp","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","useTabsWidth","scrollViewRef","useRef","coordinates","updateCoordinate","useTabCoordinates","internalScrollValue","useSharedValue","isReadyToRenderIndicator","length","useEffect","animateTab","value","withTiming","scrollPosition","useMemo","coordinate","tabWidth","x2","x1","Math","floor","scrollView","current","scrollTo","x","y","animated","tabElements","React","Children","map","child","onLayout","event","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","undefined","indicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, useEffect, useMemo, useRef } from 'react';\nimport { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport { Easing, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type TabsProps from './TabsProps';\nimport TabIndicator from './TabIndicator';\nimport useTabsWidth from './useTabsWidth';\nimport useTabCoordinates from './useTabCoordinates';\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 ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 200,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useTabsWidth();\n\n    const scrollViewRef = useRef<ScrollView | null>(null);\n\n    const { coordinates, updateCoordinate } = useTabCoordinates(children);\n\n    const internalScrollValue = useSharedValue(0);\n    const scrollValue = scrollValueProp ?? internalScrollValue;\n\n    const isReadyToRenderIndicator = coordinates.length > 0;\n\n    useEffect(() => {\n        const animateTab = (index: number) => {\n            scrollValue.value = withTiming(index, ANIMATION_CONFIG);\n        };\n\n        animateTab(indexProp);\n    }, [indexProp, scrollValue]);\n\n    const scrollPosition = useMemo<number>(() => {\n        const coordinate = coordinates[indexProp - 1];\n\n        if (coordinate) {\n            const tabWidth = coordinate.x2 - coordinate.x1;\n            return Math.floor(coordinate.x1 + tabWidth / 2);\n        }\n\n        return 0;\n    }, [indexProp, coordinates]);\n\n    useEffect(() => {\n        const scrollView = scrollViewRef.current;\n\n        if (scrollView) {\n            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });\n        }\n    }, [scrollPosition, containerWidth]);\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\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <React.Fragment>\n                    {tabElements}\n                    {indicator}\n                </React.Fragment>\n            )}\n        </View>\n    );\n};\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","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSharedValue","sharedIndex","getCurrentIndex","value","setTab","newIndex","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","scrollViewRef","onLayout","useScrollViewReaction","isReadyToRenderIndicator","length","tabElements","React","Children","map","child","index","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { ScrollView, View } from 'react-native';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './TabsProps';\nimport TabIndicator from './TabIndicator';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useScrollViewReaction from './useScrollViewReaction';\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        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 = useSharedValue<number>(initialIndex);\n\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n\n    const getCurrentIndex = (): number => sharedIndex.value;\n\n    const setTab = (newIndex: number) => {\n        sharedIndex.value = newIndex;\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getCurrentIndex,\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const { coordinates, updateCoordinate } = useTabCoordinates(children);\n\n    const { scrollViewRef, onLayout } = useScrollViewReaction(sharedIndex, coordinates);\n\n    const isReadyToRenderIndicator = coordinates.length > 0;\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\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !isReadyToRenderIndicator,\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                sharedIndex={sharedIndex}\n            />\n        );\n    });\n\n    const tabIndicator = isReadyToRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            sharedIndex={sharedIndex}\n        />\n    ) : null;\n\n    return (\n        <View\n            onLayout={onLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {tabIndicator}\n                </ScrollView>\n            ) : (\n                <React.Fragment>\n                    {tabElements}\n                    {tabIndicator}\n                </React.Fragment>\n            )}\n        </View>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport type { TabVariant } from '../Tab';\nimport type { OverridableComponentProps } from '../types';\n\nexport type KeyboardDismissMode =\n    'none'\n    | 'on-drag'\n    | 'interactive'; // ios only\n\nexport type KeyboardShouldPersistTaps =\n    'never'\n    | boolean\n    | 'always'\n    | 'handled'; // app only\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Collection of Tab components.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Selected index.\n     */\n    index: number;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * Scrollable value for using animated interpolation.\n     */\n    scrollValue?: Animated.SharedValue<number>;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { TabVariant } from '../Tab';\nimport type { OverridableComponentProps } from '../types';\n\nexport type KeyboardDismissMode =\n    'none'\n    | 'on-drag'\n    | 'interactive'; // ios only\n\nexport type KeyboardShouldPersistTaps =\n    'never'\n    | boolean\n    | 'always'\n    | 'handled'; // app only\n\nexport interface TabsInstance {\n    /**\n     * Get current tab index.\n     */\n    getCurrentIndex: () => number;\n\n    /**\n     * Function to scroll to a specific tab. Invalid index is ignored.\n     * @param index\n     */\n    setTab: (index: number) => void;\n}\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SharedValue<number>;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n}> {}\n"],"mappings":""}

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

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