@fountain-ui/core 2.0.0-beta.81 → 2.0.0-beta.82

package/build/commonjs/Accordion/Accordion.js

@@ -31,19 +31,22 @@ 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 CONTENT_Y_START = 30;
+const CONTENT_Y_START = 10;
 const CONTENT_Y_END = 0;
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG = {
   duration: 300
 };
+const INITIAL_EXPANDED_DELAY_MILLIS = 400;
+const CONTENT_TRANSLATEY_DELAY_MILLIS = 300;
+const CONTENT_OPACITY_DELAY_MILLIS = 200;
 
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
     root: {
-      marginBottom: theme.spacing(2)
+      marginBottom: theme.spacing(3)
     },
     title: {
       borderRadius: theme.spacing(4),
@@ -67,7 +70,7 @@ const useStyles = function () {
       backgroundColor: theme.palette.paper.grey,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(6),
-      marginTop: theme.spacing(2)
+      marginTop: theme.spacing(1)
     }
   };
 };
@@ -98,7 +101,6 @@ function Accordion(props) {
   }), []);
   const animatedContentBackgroundStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     height: animatedHeight.value,
-    opacity: animatedOpacity.value,
     overflow: 'hidden'
   }), []);
   const animatedContentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
@@ -118,15 +120,15 @@ function Accordion(props) {
 
     if (shouldInitialExpandedRef.current) {
       shouldInitialExpandedRef.current = false;
-      setIsExpanded(true);
+      setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);
     }
   };
 
   (0, _react.useEffect)(() => {
     rotate.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
     animatedHeight.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
-    animatedOpacity.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? 1 : 0, ANIMATION_CONFIG);
-    animatedContentY.value = isExpanded ? (0, _reactNativeReanimated.withTiming)(CONTENT_Y_END, ANIMATION_CONFIG) : (0, _reactNativeReanimated.withDelay)(ANIMATION_CONFIG.duration, (0, _reactNativeReanimated.withTiming)(CONTENT_Y_START, {
+    animatedOpacity.value = isExpanded ? (0, _reactNativeReanimated.withDelay)(CONTENT_OPACITY_DELAY_MILLIS, (0, _reactNativeReanimated.withTiming)(1, ANIMATION_CONFIG)) : (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
+    animatedContentY.value = isExpanded ? (0, _reactNativeReanimated.withDelay)(CONTENT_TRANSLATEY_DELAY_MILLIS, (0, _reactNativeReanimated.withTiming)(CONTENT_Y_END, ANIMATION_CONFIG)) : (0, _reactNativeReanimated.withDelay)(ANIMATION_CONFIG.duration, (0, _reactNativeReanimated.withTiming)(CONTENT_Y_START, {
       duration: 0
     }));
   }, [isExpanded, contentHeight]);

package/build/commonjs/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["CONTENT_Y_START","CONTENT_Y_END","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","useStyles","theme","useTheme","root","marginBottom","spacing","title","borderRadius","backgroundColor","palette","paper","grey","paddingHorizontal","paddingVertical","alignItems","titleColumn","flexShrink","subtitle","fontSize","lineHeight","fontFamily","contentView","position","width","marginTop","Accordion","props","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","rotate","useSharedValue","animatedOpacity","animatedContentY","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","height","opacity","overflow","animatedContentStyle","translateY","onPress","prev","onLayout","event","nativeEvent","layout","current","useEffect","withTiming","withDelay"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<\n    'root'\n    | 'title'\n    | 'titleColumn'\n    | 'subtitle'\n    | 'contentView'\n>;\n\nconst CONTENT_Y_START = 30;\nconst CONTENT_Y_END = 0;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 300 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(2) },\n        title: {\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3.5),\n            alignItems: 'center',\n        },\n        titleColumn: { flexShrink: 1 },\n        subtitle: {\n            fontSize: 11,\n            lineHeight: 12,\n            fontFamily: 'Inter-Regular',\n        },\n        contentView: {\n            position: 'absolute',\n            width: '100%',\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(6),\n            marginTop: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n    const animatedContentY = useSharedValue(CONTENT_Y_START);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        opacity: animatedOpacity.value,\n        overflow: 'hidden',\n    }), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedContentY.value }],\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setIsExpanded(true);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n        animatedOpacity.value = withTiming(isExpanded ? 1 : 0, ANIMATION_CONFIG);\n\n        animatedContentY.value = isExpanded\n            ? withTiming(CONTENT_Y_END, ANIMATION_CONFIG)\n            : withDelay(ANIMATION_CONFIG.duration as number, withTiming(CONTENT_Y_START, { duration: 0 }));\n    }, [isExpanded, contentHeight]);\n\n    return (\n        <Column style={styles.root}>\n            <ButtonBase onPress={onPress}>\n                <Row style={styles.title}>\n                    {LeftComponent ? LeftComponent : null}\n\n                    <Column style={styles.titleColumn}>\n                        <Typography\n                            variant={'subtitle2'}\n                            children={title}\n                            color={'textPrimary'}\n                            numberOfLines={1}\n                        />\n\n                        {subTitle ? (\n                            <React.Fragment>\n                                <Spacer size={0.5}/>\n\n                                <Typography\n                                    style={styles.subtitle}\n                                    color={'tertiary'}\n                                    children={subTitle}\n                                />\n                            </React.Fragment>\n                        ) : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            <ChevronDown\n                                width={20}\n                                height={20}\n                                color={'tertiary'}\n                            />\n                        )}\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={styles.contentView}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Typography\n                                variant={'subtitle2'}\n                                color={'tertiary'}\n                                children={content}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["CONTENT_Y_START","CONTENT_Y_END","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_TRANSLATEY_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","title","borderRadius","backgroundColor","palette","paper","grey","paddingHorizontal","paddingVertical","alignItems","titleColumn","flexShrink","subtitle","fontSize","lineHeight","fontFamily","contentView","position","width","marginTop","Accordion","props","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","rotate","useSharedValue","animatedOpacity","animatedContentY","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","height","overflow","animatedContentStyle","translateY","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<\n    'root'\n    | 'title'\n    | 'titleColumn'\n    | 'subtitle'\n    | 'contentView'\n>;\n\nconst CONTENT_Y_START = 10;\nconst CONTENT_Y_END = 0;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 300 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 400;\nconst CONTENT_TRANSLATEY_DELAY_MILLIS = 300;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(3) },\n        title: {\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3.5),\n            alignItems: 'center',\n        },\n        titleColumn: { flexShrink: 1 },\n        subtitle: {\n            fontSize: 11,\n            lineHeight: 12,\n            fontFamily: 'Inter-Regular',\n        },\n        contentView: {\n            position: 'absolute',\n            width: '100%',\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(6),\n            marginTop: theme.spacing(1),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n    const animatedContentY = useSharedValue(CONTENT_Y_START);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        overflow: 'hidden',\n    }), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedContentY.value }],\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n        animatedOpacity.value = isExpanded\n            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n            : withTiming(0, ANIMATION_CONFIG);\n        animatedContentY.value = isExpanded\n            ? withDelay(CONTENT_TRANSLATEY_DELAY_MILLIS, withTiming(CONTENT_Y_END, ANIMATION_CONFIG))\n            : withDelay(ANIMATION_CONFIG.duration as number, withTiming(CONTENT_Y_START, { duration: 0 }));\n    }, [isExpanded, contentHeight]);\n\n    return (\n        <Column style={styles.root}>\n            <ButtonBase onPress={onPress}>\n                <Row style={styles.title}>\n                    {LeftComponent ? LeftComponent : null}\n\n                    <Column style={styles.titleColumn}>\n                        <Typography\n                            variant={'subtitle2'}\n                            children={title}\n                            color={'textPrimary'}\n                            numberOfLines={1}\n                        />\n\n                        {subTitle ? (\n                            <React.Fragment>\n                                <Spacer size={0.5}/>\n\n                                <Typography\n                                    style={styles.subtitle}\n                                    color={'tertiary'}\n                                    children={subTitle}\n                                />\n                            </React.Fragment>\n                        ) : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            <ChevronDown\n                                width={20}\n                                height={20}\n                                color={'tertiary'}\n                            />\n                        )}\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={styles.contentView}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Typography\n                                variant={'subtitle2'}\n                                color={'tertiary'}\n                                children={content}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}

package/build/commonjs/Tab/Tab.js

@@ -62,6 +62,7 @@ function Tab(props) {
     borderColor: selected ? theme.palette.primary.main : theme.palette.border,
     borderRadius: theme.shape.roundnessExtra,
     borderWidth: selected ? 1.5 : 1,
+    minHeight: 'auto',
     paddingHorizontal: theme.spacing(3),
     paddingVertical: theme.spacing(1.5)
   };

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

@@ -1 +1 @@
-{"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","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","subtitle2","fontWeight","medium","body2","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\n        ? theme.palette.text.primary\n        : variant === 'contained'\n            ? theme.palette.text.secondary\n            : theme.palette.text.hint;\n\n    const containedStyle = {\n        borderColor: selected ? theme.palette.primary.main : theme.palette.border,\n        borderRadius: theme.shape.roundnessExtra,\n        borderWidth: selected ? 1.5 : 1,\n        paddingHorizontal: theme.spacing(3),\n        paddingVertical: theme.spacing(1.5),\n    };\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        variant === 'contained' && containedStyle,\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'\n                ? typo.button2\n                : variant === 'contained'\n                    ? (selected ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium } : typo.body2)\n                    : 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,GAChBM,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC,OADH,GAEhBV,OAAO,KAAK,WAAZ,GACII,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBE,SADvB,GAEIP,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBG,IAJ7B;EAMA,MAAMC,cAAc,GAAG;IACnBC,WAAW,EAAEhB,QAAQ,GAAGM,KAAK,CAACI,OAAN,CAAcE,OAAd,CAAsBK,IAAzB,GAAgCX,KAAK,CAACI,OAAN,CAAcQ,MADhD;IAEnBC,YAAY,EAAEb,KAAK,CAACc,KAAN,CAAYC,cAFP;IAGnBC,WAAW,EAAEtB,QAAQ,GAAG,GAAH,GAAS,CAHX;IAInBuB,iBAAiB,EAAEjB,KAAK,CAACkB,OAAN,CAAc,CAAd,CAJA;IAKnBC,eAAe,EAAEnB,KAAK,CAACkB,OAAN,CAAc,GAAd;EALE,CAAvB;EAQA,MAAME,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrB/C,MAAM,CAACG,IADc,EAErBmB,OAAO,KAAK,mBAAZ,IAAmCtB,MAAM,CAACQ,gBAFrB,EAGrBc,OAAO,KAAK,WAAZ,IAA2Ba,cAHN,EAIrBZ,KAJqB,CAAJ,CAArB;EAOA,MAAMyB,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtB/C,MAAM,CAACG,IADe,EAEtBH,MAAM,CAACS,WAFe,CAAJ,CAAtB;EAKA,MAAMwC,SAAS,GAAG,IAAAC,uBAAA,EAAgBxB,KAAhB,EAAuB;IACrCyB,QAAQ,EAAGC,IAAD,IAAU9B,OAAO,KAAK,SAAZ,GACd8B,IAAI,CAACC,EADS,GAEd/B,OAAO,KAAK,WAAZ,GACI8B,IAAI,CAACE,OADT,GAEIhC,OAAO,KAAK,WAAZ,GACKF,QAAQ,GAAG,EAAE,GAAGgC,IAAI,CAACG,SAAV;MAAqBC,UAAU,EAAEJ,IAAI,CAACI,UAAL,CAAgBC;IAAjD,CAAH,GAA+DL,IAAI,CAACM,KADjF,GAEIN,IAAI,CAACO,IAPkB;IAQrC9B;EARqC,CAAvB,CAAlB;EAWA,MAAM+B,WAAW,GAAGxC,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMJ,IAAI,GAAGI,QAAQ,GAAIC,YAAY,IAAIJ,WAApB,GAAmCA,WAAxD;EACA,MAAM4C,WAAW,GAAG7C,IAAI,gBAAG,IAAA8C,mBAAA,EAAa9C,IAAb,EAAmB;IAAE+C,IAAI,EAAElC;EAAR,CAAnB,CAAH,GAAyC,IAAjE;EAEA,MAAMmC,UAAU,GAAG,OAAOlD,QAAP,KAAoB,QAApB,gBACfmD,cAAA,CAAMH,YAAN,CAAmBhD,QAAnB,EAA6B;IACzBM;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,QAAQ,EAAEyC,WADd;IAEI,SAAS,EAAE,CAAChD;EAFhB,EADJ,eAMI,6BAAC,iBAAD;IACI,QAAQ,EAAEC,QADd;IAEI,KAAK,EAAE,IAAAiC,WAAA,EAAIE,SAAJ;EAFX,EANJ,CALJ;EAiBA,MAAMiB,YAAY,GAAInD,eAAe,IAAIK,QAApB,gBACf,6BAAC,qBAAD;IAAc,aAAa,EAAED,aAA7B;IAA4C,KAAK,EAAED;EAAnD,EADe,GAEf,IAFN;EAIA,oBACI,6BAAC,gBAAD;IACI,WAAW,EAAE0C,WADjB;IAEI,KAAK,EAAEd,YAFX;IAGI,QAAQ,EAAElB;EAHd,GAIQH,UAJR,GAMKN,aAAa,KAAK,aAAlB,gBACG,6BAAC,iBAAD;IAAM,QAAQ,EAAEK,gBAAhB;IAAkC,KAAK,EAAEwB;EAAzC,GACKgB,UADL,EAGKE,YAHL,CADH,gBAOG,6BAAC,cAAD,CAAO,QAAP,QACKF,UADL,EAGKE,YAHL,CAbR,CADJ;AAsBH;;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","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","subtitle2","fontWeight","medium","body2","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\n        ? theme.palette.text.primary\n        : variant === 'contained'\n            ? theme.palette.text.secondary\n            : theme.palette.text.hint;\n\n    const containedStyle = {\n        borderColor: selected ? theme.palette.primary.main : theme.palette.border,\n        borderRadius: theme.shape.roundnessExtra,\n        borderWidth: selected ? 1.5 : 1,\n        minHeight: 'auto',\n        paddingHorizontal: theme.spacing(3),\n        paddingVertical: theme.spacing(1.5),\n    };\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        variant === 'contained' && containedStyle,\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'\n                ? typo.button2\n                : variant === 'contained'\n                    ? (selected ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium } : typo.body2)\n                    : 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":"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"}

package/build/commonjs/Tabs/Tabs.js

@@ -64,6 +64,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     keyboardShouldPersistTaps = 'never',
     onChange,
     scrollable = false,
+    scrollViewContentContainerStyle,
     style,
     variant = 'primary',
     UNSTABLE_sharedIndex,
@@ -187,7 +188,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   }, scrollable ? /*#__PURE__*/_react.default.createElement(_ScrollableTabsView.default, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
-    contentContainerStyle: styles.scrollableContainer,
+    contentContainerStyle: (0, _styles.css)([styles.scrollableContainer, scrollViewContentContainerStyle]),
     coordinates: coordinates,
     directionalLockEnabled: true,
     horizontal: true,

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","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":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAUA,MAAMA,SAAgC,GAAG,YAAwB;EAC7D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,SAAS,EAAE;MACPC,aAAa,EAAE;IADR,CAFR;IAKHC,QAAQ,EAAE;MACNC,IAAI,EAAE;IADA,CALP;IAQHC,mBAAmB,EAAE;MACjBC,iBAAiB,EAAER,KAAK,CAACS,OAAN,CAAc,CAAd;IADF;EARlB,CAAP;AAYH,CAfD;;AAiBA,MAAMC,IAAI,gBAAG,IAAAC,iBAAA,EAAoC,SAASD,IAAT,CAAcE,KAAd,EAAqBC,GAArB,EAA0B;EAAA;;EACvE,MAAM;IACFC,QADE;IAEFC,cAAc,GAAG,SAFf;IAGFC,YAAY,GAAG,CAHb;IAIFC,gBAAgB,GAAG,KAJjB;IAKFC,aAAa,GAAG,MALd;IAMFC,mBAAmB,GAAG,MANpB;IAOFC,yBAAyB,GAAG,OAP1B;IAQFC,QARE;IASFC,UAAU,GAAG,KATX;IAUFC,KAVE;IAWFC,OAAO,GAAG,SAXR;IAYFC,oBAZE;IAaFC;EAbE,IAcFd,KAdJ;EAgBA,MAAMe,mBAAmB,GAAG,IAAAC,2BAAA,EAAqB;IAAEC,YAAY,EAAEb;EAAhB,CAArB,CAA5B;EACA,MAAMc,WAAW,GAAGL,oBAAoB,IAAIE,mBAA5C;EACA,MAAMI,gBAAgB,GAAGD,WAAW,CAACD,YAArC;EAEA,MAAMG,eAAe,GAAG,IAAAC,aAAA,EAAOjB,YAAP,CAAxB;;EAEA,MAAMkB,MAAM,GAAIC,QAAD,IAAsB;IACjC,MAAMC,YAAY,GAAGJ,eAAe,CAACK,OAArC;IACAX,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGS,QAAH,EAAaC,YAAb,CAAb;IAEAN,WAAW,CAACQ,aAAZ,CAA0BC,QAA1B,CAAmCJ,QAAnC;EACH,CALD;;EAOA,IAAAK,0BAAA,EACI3B,GADJ,EAEI,OAAO;IACHqB;EADG,CAAP,CAFJ,EAKI,CAACJ,WAAD,CALJ;EAQA,MAAMW,MAAM,GAAG1C,SAAS,EAAxB;EAEA,MAAM,CAAC2C,gBAAD,EAAmBC,gBAAnB,IAAuC,IAAAC,0BAAA,EAAkB9B,QAAlB,CAA7C;EACA,MAAM,CAAC+B,sBAAD,EAAyBC,wBAAzB,IAAqD,IAAAC,iCAAA,EAAyBjC,QAAzB,CAA3D;EAEA,MAAMkC,kBAAkB,GAAG9B,aAAa,KAAK,aAAlB,GACrB,IAAA+B,mCAAA,EAA6BJ,sBAA7B,EAAqD/B,QAArD,CADqB,GAErB,IAAAmC,mCAAA,EAA6BP,gBAA7B,EAA+C5B,QAA/C,CAFN;EAIA,MAAMoC,UAAU,GAAG,IAAAC,sBAAA,EAAcrB,WAAd,CAAnB;EAEA,MAAMsB,WAAW,GAAG,IAAAC,cAAA,EAAQ,MAAM;IAC9B,IAAInC,aAAa,KAAK,aAAtB,EAAqC;MACjC,OAAOwB,gBAAP;IACH;;IAED,OAAOG,sBAAsB,CAACS,GAAvB,CAA2B,CAACC,iBAAD,EAAoBC,GAApB,KAA4B;MAC1D,MAAM;QAAEC,EAAE,EAAEC,OAAN;QAAeC,EAAE,EAAEC;MAAnB,IAA+BlB,gBAAgB,CAACc,GAAD,CAArD;MAEA,MAAMK,QAAQ,GAAGD,OAAO,GAAGF,OAA3B;MACA,MAAMI,kBAAkB,GAAG,CAACD,QAAQ,GAAGN,iBAAZ,IAAiC,CAA5D;MACA,MAAMQ,wBAAwB,GAAGL,OAAO,GAAGI,kBAA3C;MAEA,OAAO;QACHL,EAAE,EAAEM,wBADD;QAEHJ,EAAE,EAAEI,wBAAwB,GAAGR;MAF5B,CAAP;IAIH,CAXM,CAAP;EAYH,CAjBmB,EAiBjB,CAACb,gBAAD,EAAmBG,sBAAnB,EAA2CrB,OAA3C,CAjBiB,CAApB;EAmBA,IAAAwC,gBAAA,EAAU,MAAM;IACZ,OAAOd,UAAU,CAACe,SAAX,CAAqB9B,QAAQ,IAAI;MACpCd,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGc,QAAH,CAAR;MACAH,eAAe,CAACK,OAAhB,GAA0BF,QAA1B;IACH,CAHM,CAAP;EAIH,CALD,EAKG,CAACe,UAAD,EAAa7B,QAAb,CALH;EAOA,MAAM6C,WAAW,0BAAGC,cAAA,CAAMC,QAAN,CAAed,GAAf,CAAmBxC,QAAnB,EAA6B,CAACuD,KAAD,EAAQC,KAAR,KAAkB;IAC/D,IAAI,CAACD,KAAL,EAAY;MACR,OAAO,IAAP;IACH;;IAED,MAAME,gBAAgB,GAAIC,KAAD,IAA8B;MACnD,MAAM;QAAEC;MAAF,IAAYD,KAAK,CAACE,WAAN,CAAkBC,MAApC;MAEA7B,wBAAwB,CAACwB,KAAD,EAAQG,KAAR,CAAxB;IACH,CAJD;;IAMA,MAAMG,QAAQ,GAAIJ,KAAD,IAA8B;MAAA;;MAC3C,MAAM;QAAEK,CAAF;QAAKJ;MAAL,IAAeD,KAAK,CAACE,WAAN,CAAkBC,MAAvC;MAEAhC,gBAAgB,CAAC2B,KAAD,EAAQO,CAAR,EAAWJ,KAAX,CAAhB,CAH2C,CAK3C;;MACA,yCAAAJ,KAAK,CAACzD,KAAN,EAAYgE,QAAZ,mGAAuBJ,KAAvB;IACH,CAPD;;IASA,MAAMM,WAAW,GAAIC,CAAD,IAA8B;MAC9C,IAAI3D,yBAAyB,KAAK,QAAlC,EAA4C;QACxC2D,CAAC,CAACC,cAAF;MACH;IACJ,CAJD;;IAMA,MAAMC,OAAO,GAAG,MAAM;MAAA;;MAClB/C,MAAM,CAACoC,KAAD,CAAN,CADkB,CAGlB;;MACA,yCAAAD,KAAK,CAACzD,KAAN,EAAYqE,OAAZ;IACH,CALD,CA1B+D,CAiC/D;;;IACA,MAAMC,UAAU,gBAAG,IAAAC,mBAAA,EAAad,KAAb,EAAoB;MACnCe,eAAe,EAAE,CAACnE,gBAAD,IAAqB,CAAC+B,kBADJ;MAEnCjC,cAFmC;MAGnCwD,gBAHmC;MAInCK,QAJmC;MAKnCK,OALmC;MAMnCH,WANmC;MAOnCtD,OAPmC;MAQnCN,aARmC;MASnCK,KAAK,EAAED,UAAU,GAAG+D,SAAH,GAAe5C,MAAM,CAACpC;IATJ,CAApB,CAAnB;IAYA,oBACI,6BAAC,sBAAD;MACI,QAAQ,EAAE6E,UADd;MAEI,KAAK,EAAEZ,KAFX;MAGI,YAAY,EAAEvC;IAHlB,EADJ;EAOH,CArDmB,CAAH,wDAAG,oBAqDhBuD,MArDgB,CAqDTC,OArDS,CAApB;EAuDA,MAAMC,YAAY,GAAGxC,kBAAkB,gBACnC,6BAAC,qBAAD;IACI,KAAK,EAAEjC,cADX;IAEI,WAAW,EAAEqC,WAFjB;IAGI,QAAQ,EAAEnC,gBAHd;IAII,YAAY,EAAEc,gBAJlB;IAKI,UAAU,EAAET;EALhB,EADmC,GAQnC,IARJ;EAUA,oBACI,6BAAC,wBAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE;MAAE4B;IAAF;EAAjC,gBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAuC,WAAA,EAAI,CACPhD,MAAM,CAACvC,IADA,EAEPoB,UAAU,GAAG+D,SAAH,GAAe5C,MAAM,CAACtC,SAFzB,EAGPoB,KAHO,CAAJ;EADX,GAOKD,UAAU,gBACP,6BAAC,2BAAD;IACI,gCAAgC,EAAE,KADtC;IAEI,OAAO,EAAE,KAFb;IAGI,qBAAqB,EAAEmB,MAAM,CAAClC,mBAHlC;IAII,WAAW,EAAE6C,WAJjB;IAKI,sBAAsB,EAAE,IAL5B;IAMI,UAAU,EAAE,IANhB;IAOI,YAAY,EAAErB,gBAPlB;IAQI,YAAY,EAAE,KARlB;IASI,8BAA8B,EAAE,KATpC;IAUI,4BAA4B,EAAE,KAVlC;IAWI,mBAAmB,EAAEZ,mBAXzB;IAYI,yBAAyB,EAAEC;EAZ/B,GAcK8C,WAdL,EAeKsB,YAfL,CADO,gBAmBP,6BAAC,cAAD,CAAO,QAAP,QACKtB,WADL,EAEKsB,YAFL,CA1BR,CADJ,CADJ;AAoCH,CAhLY,CAAb;eAkLe9E,I"}
+{"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","scrollViewContentContainerStyle","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        scrollViewContentContainerStyle,\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={css([\n                            styles.scrollableContainer,\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport type { TabVariant, TabIndicatorSize } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The color of tab indicator\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     * 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?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport type { TabVariant, TabIndicatorSize } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\nimport type { ExtendedStyle } from '../types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The color of tab indicator\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     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * These styles will be applied to the scroll view content container which wraps all of the child views.\n     */\n    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":""}

package/build/module/Accordion/Accordion.js

@@ -8,19 +8,22 @@ import Column from '../Column';
 import Row from '../Row';
 import Spacer from '../Spacer';
 import Typography from '../Typography';
-const CONTENT_Y_START = 30;
+const CONTENT_Y_START = 10;
 const CONTENT_Y_END = 0;
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG = {
   duration: 300
 };
+const INITIAL_EXPANDED_DELAY_MILLIS = 400;
+const CONTENT_TRANSLATEY_DELAY_MILLIS = 300;
+const CONTENT_OPACITY_DELAY_MILLIS = 200;
 
 const useStyles = function () {
   const theme = useTheme();
   return {
     root: {
-      marginBottom: theme.spacing(2)
+      marginBottom: theme.spacing(3)
     },
     title: {
       borderRadius: theme.spacing(4),
@@ -44,7 +47,7 @@ const useStyles = function () {
       backgroundColor: theme.palette.paper.grey,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(6),
-      marginTop: theme.spacing(2)
+      marginTop: theme.spacing(1)
     }
   };
 };
@@ -75,7 +78,6 @@ export default function Accordion(props) {
   }), []);
   const animatedContentBackgroundStyles = useAnimatedStyle(() => ({
     height: animatedHeight.value,
-    opacity: animatedOpacity.value,
     overflow: 'hidden'
   }), []);
   const animatedContentStyle = useAnimatedStyle(() => ({
@@ -95,15 +97,15 @@ export default function Accordion(props) {
 
     if (shouldInitialExpandedRef.current) {
       shouldInitialExpandedRef.current = false;
-      setIsExpanded(true);
+      setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);
     }
   };
 
   useEffect(() => {
     rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
     animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
-    animatedOpacity.value = withTiming(isExpanded ? 1 : 0, ANIMATION_CONFIG);
-    animatedContentY.value = isExpanded ? withTiming(CONTENT_Y_END, ANIMATION_CONFIG) : withDelay(ANIMATION_CONFIG.duration, withTiming(CONTENT_Y_START, {
+    animatedOpacity.value = isExpanded ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG)) : withTiming(0, ANIMATION_CONFIG);
+    animatedContentY.value = isExpanded ? withDelay(CONTENT_TRANSLATEY_DELAY_MILLIS, withTiming(CONTENT_Y_END, ANIMATION_CONFIG)) : withDelay(ANIMATION_CONFIG.duration, withTiming(CONTENT_Y_START, {
       duration: 0
     }));
   }, [isExpanded, contentHeight]);

package/build/module/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","View","Animated","useAnimatedStyle","useSharedValue","withDelay","withTiming","useTheme","ChevronDown","ButtonBase","Column","Row","Spacer","Typography","CONTENT_Y_START","CONTENT_Y_END","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","useStyles","theme","root","marginBottom","spacing","title","borderRadius","backgroundColor","palette","paper","grey","paddingHorizontal","paddingVertical","alignItems","titleColumn","flexShrink","subtitle","fontSize","lineHeight","fontFamily","contentView","position","width","marginTop","Accordion","props","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","shouldInitialExpandedRef","rotate","animatedOpacity","animatedContentY","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","transform","value","animatedContentBackgroundStyles","height","opacity","overflow","animatedContentStyle","translateY","onPress","prev","onLayout","event","nativeEvent","layout","current"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<\n    'root'\n    | 'title'\n    | 'titleColumn'\n    | 'subtitle'\n    | 'contentView'\n>;\n\nconst CONTENT_Y_START = 30;\nconst CONTENT_Y_END = 0;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 300 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(2) },\n        title: {\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3.5),\n            alignItems: 'center',\n        },\n        titleColumn: { flexShrink: 1 },\n        subtitle: {\n            fontSize: 11,\n            lineHeight: 12,\n            fontFamily: 'Inter-Regular',\n        },\n        contentView: {\n            position: 'absolute',\n            width: '100%',\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(6),\n            marginTop: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n    const animatedContentY = useSharedValue(CONTENT_Y_START);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        opacity: animatedOpacity.value,\n        overflow: 'hidden',\n    }), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedContentY.value }],\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setIsExpanded(true);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n        animatedOpacity.value = withTiming(isExpanded ? 1 : 0, ANIMATION_CONFIG);\n\n        animatedContentY.value = isExpanded\n            ? withTiming(CONTENT_Y_END, ANIMATION_CONFIG)\n            : withDelay(ANIMATION_CONFIG.duration as number, withTiming(CONTENT_Y_START, { duration: 0 }));\n    }, [isExpanded, contentHeight]);\n\n    return (\n        <Column style={styles.root}>\n            <ButtonBase onPress={onPress}>\n                <Row style={styles.title}>\n                    {LeftComponent ? LeftComponent : null}\n\n                    <Column style={styles.titleColumn}>\n                        <Typography\n                            variant={'subtitle2'}\n                            children={title}\n                            color={'textPrimary'}\n                            numberOfLines={1}\n                        />\n\n                        {subTitle ? (\n                            <React.Fragment>\n                                <Spacer size={0.5}/>\n\n                                <Typography\n                                    style={styles.subtitle}\n                                    color={'tertiary'}\n                                    children={subTitle}\n                                />\n                            </React.Fragment>\n                        ) : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            <ChevronDown\n                                width={20}\n                                height={20}\n                                color={'tertiary'}\n                            />\n                        )}\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={styles.contentView}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Typography\n                                variant={'subtitle2'}\n                                color={'tertiary'}\n                                children={content}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAA4BC,IAA5B,QAAwC,cAAxC;AACA,OAAOC,QAAP,IACIC,gBADJ,EAEIC,cAFJ,EAGIC,SAHJ,EAIIC,UAJJ,QAMO,yBANP;AAQA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,WAAT,QAA4B,mBAA5B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AAYA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,aAAa,GAAG,CAAtB;AAEA,MAAMC,kBAAkB,GAAG,CAA3B;AACA,MAAMC,kBAAkB,GAAG,GAA3B;AACA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAGd,QAAQ,EAAtB;EAEA,OAAO;IACHe,IAAI,EAAE;MAAEC,YAAY,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd;IAAhB,CADH;IAEHC,KAAK,EAAE;MACHC,YAAY,EAAEL,KAAK,CAACG,OAAN,CAAc,CAAd,CADX;MAEHG,eAAe,EAAEN,KAAK,CAACO,OAAN,CAAcC,KAAd,CAAoBC,IAFlC;MAGHC,iBAAiB,EAAEV,KAAK,CAACG,OAAN,CAAc,CAAd,CAHhB;MAIHQ,eAAe,EAAEX,KAAK,CAACG,OAAN,CAAc,GAAd,CAJd;MAKHS,UAAU,EAAE;IALT,CAFJ;IASHC,WAAW,EAAE;MAAEC,UAAU,EAAE;IAAd,CATV;IAUHC,QAAQ,EAAE;MACNC,QAAQ,EAAE,EADJ;MAENC,UAAU,EAAE,EAFN;MAGNC,UAAU,EAAE;IAHN,CAVP;IAeHC,WAAW,EAAE;MACTC,QAAQ,EAAE,UADD;MAETC,KAAK,EAAE,MAFE;MAGThB,YAAY,EAAEL,KAAK,CAACG,OAAN,CAAc,CAAd,CAHL;MAITG,eAAe,EAAEN,KAAK,CAACO,OAAN,CAAcC,KAAd,CAAoBC,IAJ5B;MAKTC,iBAAiB,EAAEV,KAAK,CAACG,OAAN,CAAc,CAAd,CALV;MAMTQ,eAAe,EAAEX,KAAK,CAACG,OAAN,CAAc,CAAd,CANR;MAOTmB,SAAS,EAAEtB,KAAK,CAACG,OAAN,CAAc,CAAd;IAPF;EAfV,CAAP;AAyBH,CA5BD;;AA8BA,eAAe,SAASoB,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFpB,KADE;IAEFqB,QAFE;IAGFC,OAHE;IAIFC,SAJE;IAKFC,aALE;IAMFC,iBAAiB,GAAG;EANlB,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAG/B,SAAS,EAAxB;EACA,MAAMC,KAAK,GAAGd,QAAQ,EAAtB;EACA,MAAM6C,qBAAqB,GAAG/B,KAAK,CAACG,OAAN,CAAc,CAAd,CAA9B;EAEA,MAAM,CAAC6B,UAAD,EAAaC,aAAb,IAA8BtD,QAAQ,CAAC,KAAD,CAA5C;EACA,MAAMuD,wBAAwB,GAAGxD,MAAM,CAAUmD,iBAAV,CAAvC;EAEA,MAAMM,MAAM,GAAGpD,cAAc,CAACY,kBAAD,CAA7B;EACA,MAAMyC,eAAe,GAAGrD,cAAc,CAAC,CAAD,CAAtC;EACA,MAAMsD,gBAAgB,GAAGtD,cAAc,CAACU,eAAD,CAAvC;EAEA,MAAM6C,cAAc,GAAGvD,cAAc,CAAC,CAAD,CAArC;EACA,MAAM,CAACwD,aAAD,EAAgBC,gBAAhB,IAAoC7D,QAAQ,CAAC,CAAD,CAAlD;EAEA,MAAM8D,yBAAyB,GAAG3D,gBAAgB,CAAC,OAAO;IACtD4D,SAAS,EAAE,CAAC;MAAEP,MAAM,EAAG,GAAEA,MAAM,CAACQ,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAD,EAE9C,EAF8C,CAAlD;EAIA,MAAMC,+BAA+B,GAAG9D,gBAAgB,CAAC,OAAO;IAC5D+D,MAAM,EAAEP,cAAc,CAACK,KADqC;IAE5DG,OAAO,EAAEV,eAAe,CAACO,KAFmC;IAG5DI,QAAQ,EAAE;EAHkD,CAAP,CAAD,EAIpD,EAJoD,CAAxD;EAMA,MAAMC,oBAAoB,GAAGlE,gBAAgB,CAAC,OAAO;IACjD4D,SAAS,EAAE,CAAC;MAAEO,UAAU,EAAEZ,gBAAgB,CAACM;IAA/B,CAAD,CADsC;IAEjDG,OAAO,EAAEV,eAAe,CAACO;EAFwB,CAAP,CAAD,EAGzC,EAHyC,CAA7C;;EAKA,MAAMO,OAAO,GAAG,MAAM;IAClBjB,aAAa,CAACkB,IAAI,IAAI,CAACA,IAAV,CAAb;EACH,CAFD;;EAIA,MAAMC,QAAQ,GAAIC,KAAD,IAA8B;IAC3C,MAAMR,MAAM,GAAGQ,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBV,MAAzB,GAAkCd,qBAAjD;IACAS,gBAAgB,CAACK,MAAD,CAAhB;;IAEA,IAAIX,wBAAwB,CAACsB,OAA7B,EAAsC;MAClCtB,wBAAwB,CAACsB,OAAzB,GAAmC,KAAnC;MACAvB,aAAa,CAAC,IAAD,CAAb;IACH;EACJ,CARD;;EAUAxD,SAAS,CAAC,MAAM;IACZ0D,MAAM,CAACQ,KAAP,GAAe1D,UAAU,CAAC+C,UAAU,GAAGpC,kBAAH,GAAwBD,kBAAnC,EAAuDE,gBAAvD,CAAzB;IAEAyC,cAAc,CAACK,KAAf,GAAuB1D,UAAU,CAAC+C,UAAU,GAAGO,aAAH,GAAmB,CAA9B,EAAiC1C,gBAAjC,CAAjC;IACAuC,eAAe,CAACO,KAAhB,GAAwB1D,UAAU,CAAC+C,UAAU,GAAG,CAAH,GAAO,CAAlB,EAAqBnC,gBAArB,CAAlC;IAEAwC,gBAAgB,CAACM,KAAjB,GAAyBX,UAAU,GAC7B/C,UAAU,CAACS,aAAD,EAAgBG,gBAAhB,CADmB,GAE7Bb,SAAS,CAACa,gBAAgB,CAACC,QAAlB,EAAsCb,UAAU,CAACQ,eAAD,EAAkB;MAAEK,QAAQ,EAAE;IAAZ,CAAlB,CAAhD,CAFf;EAGH,CATQ,EASN,CAACkC,UAAD,EAAaO,aAAb,CATM,CAAT;EAWA,oBACI,oBAAC,MAAD;IAAQ,KAAK,EAAET,MAAM,CAAC7B;EAAtB,gBACI,oBAAC,UAAD;IAAY,OAAO,EAAEiD;EAArB,gBACI,oBAAC,GAAD;IAAK,KAAK,EAAEpB,MAAM,CAAC1B;EAAnB,GACKwB,aAAa,GAAGA,aAAH,GAAmB,IADrC,eAGI,oBAAC,MAAD;IAAQ,KAAK,EAAEE,MAAM,CAACjB;EAAtB,gBACI,oBAAC,UAAD;IACI,OAAO,EAAE,WADb;IAEI,QAAQ,EAAET,KAFd;IAGI,KAAK,EAAE,aAHX;IAII,aAAa,EAAE;EAJnB,EADJ,EAQKqB,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,oBAAC,UAAD;IACI,KAAK,EAAEK,MAAM,CAACf,QADlB;IAEI,KAAK,EAAE,UAFX;IAGI,QAAQ,EAAEU;EAHd,EAHJ,CADK,GAUL,IAlBR,CAHJ,eAwBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAxBJ,eA0BI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EA1BJ,eA4BI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEgB;EAAtB,GACKd,SAAS,GAAGA,SAAH,gBACN,oBAAC,WAAD;IACI,KAAK,EAAE,EADX;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EAFR,CA5BJ,CADJ,CADJ,eA0CI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEiB;EAAtB,gBACI,oBAAC,IAAD;IACI,QAAQ,EAAEQ,QADd;IAEI,KAAK,EAAEtB,MAAM,CAACX;EAFlB,gBAII,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE6B;EAAtB,GACK,OAAOtB,OAAP,KAAmB,QAAnB,gBACG,oBAAC,UAAD;IACI,OAAO,EAAE,WADb;IAEI,KAAK,EAAE,UAFX;IAGI,QAAQ,EAAEA;EAHd,EADH,GAMIA,OAPT,CAJJ,CADJ,CA1CJ,CADJ;AA6DH"}
+{"version":3,"names":["React","useEffect","useRef","useState","View","Animated","useAnimatedStyle","useSharedValue","withDelay","withTiming","useTheme","ChevronDown","ButtonBase","Column","Row","Spacer","Typography","CONTENT_Y_START","CONTENT_Y_END","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_TRANSLATEY_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","root","marginBottom","spacing","title","borderRadius","backgroundColor","palette","paper","grey","paddingHorizontal","paddingVertical","alignItems","titleColumn","flexShrink","subtitle","fontSize","lineHeight","fontFamily","contentView","position","width","marginTop","Accordion","props","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","shouldInitialExpandedRef","rotate","animatedOpacity","animatedContentY","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","transform","value","animatedContentBackgroundStyles","height","overflow","animatedContentStyle","translateY","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<\n    'root'\n    | 'title'\n    | 'titleColumn'\n    | 'subtitle'\n    | 'contentView'\n>;\n\nconst CONTENT_Y_START = 10;\nconst CONTENT_Y_END = 0;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 300 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 400;\nconst CONTENT_TRANSLATEY_DELAY_MILLIS = 300;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(3) },\n        title: {\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3.5),\n            alignItems: 'center',\n        },\n        titleColumn: { flexShrink: 1 },\n        subtitle: {\n            fontSize: 11,\n            lineHeight: 12,\n            fontFamily: 'Inter-Regular',\n        },\n        contentView: {\n            position: 'absolute',\n            width: '100%',\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(6),\n            marginTop: theme.spacing(1),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n    const animatedContentY = useSharedValue(CONTENT_Y_START);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        overflow: 'hidden',\n    }), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedContentY.value }],\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n        animatedOpacity.value = isExpanded\n            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n            : withTiming(0, ANIMATION_CONFIG);\n        animatedContentY.value = isExpanded\n            ? withDelay(CONTENT_TRANSLATEY_DELAY_MILLIS, withTiming(CONTENT_Y_END, ANIMATION_CONFIG))\n            : withDelay(ANIMATION_CONFIG.duration as number, withTiming(CONTENT_Y_START, { duration: 0 }));\n    }, [isExpanded, contentHeight]);\n\n    return (\n        <Column style={styles.root}>\n            <ButtonBase onPress={onPress}>\n                <Row style={styles.title}>\n                    {LeftComponent ? LeftComponent : null}\n\n                    <Column style={styles.titleColumn}>\n                        <Typography\n                            variant={'subtitle2'}\n                            children={title}\n                            color={'textPrimary'}\n                            numberOfLines={1}\n                        />\n\n                        {subTitle ? (\n                            <React.Fragment>\n                                <Spacer size={0.5}/>\n\n                                <Typography\n                                    style={styles.subtitle}\n                                    color={'tertiary'}\n                                    children={subTitle}\n                                />\n                            </React.Fragment>\n                        ) : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            <ChevronDown\n                                width={20}\n                                height={20}\n                                color={'tertiary'}\n                            />\n                        )}\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={styles.contentView}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Typography\n                                variant={'subtitle2'}\n                                color={'tertiary'}\n                                children={content}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}

package/build/module/Tab/Tab.js

@@ -42,6 +42,7 @@ export default function Tab(props) {
     borderColor: selected ? theme.palette.primary.main : theme.palette.border,
     borderRadius: theme.shape.roundnessExtra,
     borderWidth: selected ? 1.5 : 1,
+    minHeight: 'auto',
     paddingHorizontal: theme.spacing(3),
     paddingVertical: theme.spacing(1.5)
   };

package/build/module/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cloneElement","Platform","Text","View","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","tabInnerStyle","fontStyle","selector","typo","h2","button2","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","fill","tabElement","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\n        ? theme.palette.text.primary\n        : variant === 'contained'\n            ? theme.palette.text.secondary\n            : theme.palette.text.hint;\n\n    const containedStyle = {\n        borderColor: selected ? theme.palette.primary.main : theme.palette.border,\n        borderRadius: theme.shape.roundnessExtra,\n        borderWidth: selected ? 1.5 : 1,\n        paddingHorizontal: theme.spacing(3),\n        paddingVertical: theme.spacing(1.5),\n    };\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        variant === 'contained' && containedStyle,\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'\n                ? typo.button2\n                : variant === 'contained'\n                    ? (selected ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium } : typo.body2)\n                    : 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":"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"}
+{"version":3,"names":["React","cloneElement","Platform","Text","View","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","tabInnerStyle","fontStyle","selector","typo","h2","button2","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","fill","tabElement","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\n        ? theme.palette.text.primary\n        : variant === 'contained'\n            ? theme.palette.text.secondary\n            : theme.palette.text.hint;\n\n    const containedStyle = {\n        borderColor: selected ? theme.palette.primary.main : theme.palette.border,\n        borderRadius: theme.shape.roundnessExtra,\n        borderWidth: selected ? 1.5 : 1,\n        minHeight: 'auto',\n        paddingHorizontal: theme.spacing(3),\n        paddingVertical: theme.spacing(1.5),\n    };\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        variant === 'contained' && containedStyle,\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'\n                ? typo.button2\n                : variant === 'contained'\n                    ? (selected ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium } : typo.body2)\n                    : 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":"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"}

package/build/module/Tabs/Tabs.js

@@ -40,6 +40,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     keyboardShouldPersistTaps = 'never',
     onChange,
     scrollable = false,
+    scrollViewContentContainerStyle,
     style,
     variant = 'primary',
     UNSTABLE_sharedIndex,
@@ -163,7 +164,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   }, scrollable ? /*#__PURE__*/React.createElement(ScrollableTabsView, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
-    contentContainerStyle: styles.scrollableContainer,
+    contentContainerStyle: css([styles.scrollableContainer, scrollViewContentContainerStyle]),
     coordinates: coordinates,
     directionalLockEnabled: true,
     horizontal: true,

package/build/module/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","indicatorColor","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator"],"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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"}
+{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","indicatorColor","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator"],"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        scrollViewContentContainerStyle,\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={css([\n                            styles.scrollableContainer,\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport type { TabVariant, TabIndicatorSize } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The color of tab indicator\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     * 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?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport type { TabVariant, TabIndicatorSize } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\nimport type { ExtendedStyle } from '../types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The color of tab indicator\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     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * These styles will be applied to the scroll view content container which wraps all of the child views.\n     */\n    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":""}

package/build/typescript/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type TabsProps from './TabsProps';
 import type { TabsInstance } from './types';
-declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "testID" | "style" | "onLayout" | "keyboardDismissMode" | "children" | "pointerEvents" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "accessibilityLabel" | "accessible" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessibilityActions" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "variant" | "keyboardShouldPersistTaps" | "onChange" | "indicatorColor" | "indicatorSize" | "initialIndex" | "scrollable" | "disableIndicator" | "UNSTABLE_sharedIndex" | "onTabSelected"> & React.RefAttributes<TabsInstance>>;
+declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "testID" | "style" | "onLayout" | "keyboardDismissMode" | "children" | "pointerEvents" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "accessibilityLabel" | "accessible" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessibilityActions" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "variant" | "keyboardShouldPersistTaps" | "onChange" | "indicatorColor" | "indicatorSize" | "initialIndex" | "scrollable" | "disableIndicator" | "scrollViewContentContainerStyle" | "UNSTABLE_sharedIndex" | "onTabSelected"> & React.RefAttributes<TabsInstance>>;
 export default Tabs;

package/build/typescript/Tabs/TabsProps.d.ts

@@ -4,6 +4,7 @@ import type { TabIndicatorColor } from './TabIndicatorProps';
 import type { TabVariant, TabIndicatorSize } from '../Tab';
 import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
+import type { ExtendedStyle } from '../types';
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
     ref?: Ref<TabsInstance>;
     /**
@@ -51,6 +52,10 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     scrollable?: boolean;
+    /**
+     * These styles will be applied to the scroll view content container which wraps all of the child views.
+     */
+    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];
     /**
      * Unstable API.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.81",
+  "version": "2.0.0-beta.82",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6a28f31a6f19409b3b2249968f40a0085e3836ec"
+  "gitHead": "f07255eea37343ebe04cff31bd0db4dd0a0d08e9"
 }

package/src/Accordion/Accordion.tsx

@@ -26,18 +26,21 @@ type AccordionStyles = NamedStylesStringUnion<
     | 'contentView'
 >;
 
-const CONTENT_Y_START = 30;
+const CONTENT_Y_START = 10;
 const CONTENT_Y_END = 0;
 
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 300 };
+const INITIAL_EXPANDED_DELAY_MILLIS = 400;
+const CONTENT_TRANSLATEY_DELAY_MILLIS = 300;
+const CONTENT_OPACITY_DELAY_MILLIS = 200;
 
 const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
     const theme = useTheme();
 
     return {
-        root: { marginBottom: theme.spacing(2) },
+        root: { marginBottom: theme.spacing(3) },
         title: {
             borderRadius: theme.spacing(4),
             backgroundColor: theme.palette.paper.grey,
@@ -58,7 +61,7 @@ const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
             backgroundColor: theme.palette.paper.grey,
             paddingHorizontal: theme.spacing(4),
             paddingVertical: theme.spacing(6),
-            marginTop: theme.spacing(2),
+            marginTop: theme.spacing(1),
         },
     };
 };
@@ -93,7 +96,6 @@ export default function Accordion(props: AccordionProps) {
 
     const animatedContentBackgroundStyles = useAnimatedStyle(() => ({
         height: animatedHeight.value,
-        opacity: animatedOpacity.value,
         overflow: 'hidden',
     }), []);
 
@@ -112,7 +114,7 @@ export default function Accordion(props: AccordionProps) {
 
         if (shouldInitialExpandedRef.current) {
             shouldInitialExpandedRef.current = false;
-            setIsExpanded(true);
+            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);
         }
     };
 
@@ -120,10 +122,12 @@ export default function Accordion(props: AccordionProps) {
         rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
 
         animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
-        animatedOpacity.value = withTiming(isExpanded ? 1 : 0, ANIMATION_CONFIG);
 
+        animatedOpacity.value = isExpanded
+            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))
+            : withTiming(0, ANIMATION_CONFIG);
         animatedContentY.value = isExpanded
-            ? withTiming(CONTENT_Y_END, ANIMATION_CONFIG)
+            ? withDelay(CONTENT_TRANSLATEY_DELAY_MILLIS, withTiming(CONTENT_Y_END, ANIMATION_CONFIG))
             : withDelay(ANIMATION_CONFIG.duration as number, withTiming(CONTENT_Y_START, { duration: 0 }));
     }, [isExpanded, contentHeight]);
 

package/src/Tab/Tab.tsx

@@ -50,6 +50,7 @@ export default function Tab(props: TabProps) {
         borderColor: selected ? theme.palette.primary.main : theme.palette.border,
         borderRadius: theme.shape.roundnessExtra,
         borderWidth: selected ? 1.5 : 1,
+        minHeight: 'auto',
         paddingHorizontal: theme.spacing(3),
         paddingVertical: theme.spacing(1.5),
     };

package/src/Tabs/Tabs.tsx

@@ -51,6 +51,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         keyboardShouldPersistTaps = 'never',
         onChange,
         scrollable = false,
+        scrollViewContentContainerStyle,
         style,
         variant = 'primary',
         UNSTABLE_sharedIndex,
@@ -193,7 +194,10 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                     <ScrollableTabsView
                         automaticallyAdjustContentInsets={false}
                         bounces={false}
-                        contentContainerStyle={styles.scrollableContainer}
+                        contentContainerStyle={css([
+                            styles.scrollableContainer,
+                            scrollViewContentContainerStyle,
+                        ])}
                         coordinates={coordinates}
                         directionalLockEnabled={true}
                         horizontal={true}

package/src/Tabs/TabsProps.ts

@@ -4,6 +4,7 @@ import type { TabIndicatorColor } from './TabIndicatorProps';
 import type { TabVariant, TabIndicatorSize } from '../Tab';
 import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
+import type { ExtendedStyle } from '../types';
 
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
     ref?: Ref<TabsInstance>;
@@ -62,6 +63,11 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     scrollable?: boolean;
 
+    /**
+     * These styles will be applied to the scroll view content container which wraps all of the child views.
+     */
+    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];
+
     /**
      * Unstable API.
      */