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

package/build/commonjs/Accordion/Accordion.js

@@ -7,82 +7,169 @@ exports.default = Accordion;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactNative = require("react-native");
+
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
+var _styles = require("../styles");
+
 var _icons = require("../internal/icons");
 
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
 var _Column = _interopRequireDefault(require("../Column"));
 
-var _Divider = _interopRequireDefault(require("../Divider"));
+var _Row = _interopRequireDefault(require("../Row"));
 
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
-var _styles = require("../styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const CONTENT_Y_START = 30;
+const CONTENT_Y_END = 0;
+const ROTATE_HIDE_DEGREE = 0;
+const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG = {
-  duration: 250
+  duration: 300
 };
 
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
     root: {
-      flexDirection: 'row',
-      paddingVertical: theme.spacing(3)
+      marginBottom: theme.spacing(2)
+    },
+    title: {
+      borderRadius: theme.spacing(4),
+      backgroundColor: theme.palette.paper.grey,
+      paddingHorizontal: theme.spacing(4),
+      paddingVertical: theme.spacing(3.5),
+      alignItems: 'center'
+    },
+    titleColumn: {
+      flexShrink: 1
+    },
+    subtitle: {
+      fontSize: 11,
+      lineHeight: 12,
+      fontFamily: 'Inter-Regular'
+    },
+    contentView: {
+      position: 'absolute',
+      width: '100%',
+      borderRadius: theme.spacing(4),
+      backgroundColor: theme.palette.paper.grey,
+      paddingHorizontal: theme.spacing(4),
+      paddingVertical: theme.spacing(6),
+      marginTop: theme.spacing(2)
     }
   };
 };
 
 function Accordion(props) {
   const {
+    title,
+    subTitle,
     content,
-    LeftIcon,
     RightIcon,
-    title,
-    titleVariant = 'subtitle2'
+    LeftComponent,
+    isInitialExpanded = false
   } = props;
   const styles = useStyles();
+  const theme = (0, _styles.useTheme)();
+  const CONTENT_MARGIN_HEIGHT = theme.spacing(2);
   const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
-  const rotate = (0, _reactNativeReanimated.useSharedValue)(0);
+  const shouldInitialExpandedRef = (0, _react.useRef)(isInitialExpanded);
+  const rotate = (0, _reactNativeReanimated.useSharedValue)(ROTATE_HIDE_DEGREE);
+  const animatedOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
+  const animatedContentY = (0, _reactNativeReanimated.useSharedValue)(CONTENT_Y_START);
+  const animatedHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+  const [contentHeight, setContentHeight] = (0, _react.useState)(0);
   const animatedChevronDownStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     transform: [{
       rotate: `${rotate.value}deg`
     }]
   }), []);
+  const animatedContentBackgroundStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    height: animatedHeight.value,
+    opacity: animatedOpacity.value,
+    overflow: 'hidden'
+  }), []);
+  const animatedContentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateY: animatedContentY.value
+    }],
+    opacity: animatedOpacity.value
+  }), []);
 
   const onPress = () => {
     setIsExpanded(prev => !prev);
-    rotate.value = (0, _reactNativeReanimated.withTiming)(!isExpanded ? 180 : 0, ANIMATION_CONFIG);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_Column.default, null, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
-    onPress: onPress,
+  const onLayout = event => {
+    const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;
+    setContentHeight(height);
+
+    if (shouldInitialExpandedRef.current) {
+      shouldInitialExpandedRef.current = false;
+      setIsExpanded(true);
+    }
+  };
+
+  (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, {
+      duration: 0
+    }));
+  }, [isExpanded, contentHeight]);
+  return /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: styles.root
-  }, LeftIcon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, LeftIcon, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
-    size: 2
-  })) : null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
+    onPress: onPress
+  }, /*#__PURE__*/_react.default.createElement(_Row.default, {
+    style: styles.title
+  }, LeftComponent ? LeftComponent : null, /*#__PURE__*/_react.default.createElement(_Column.default, {
+    style: styles.titleColumn
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: 'subtitle2',
     children: title,
-    variant: titleVariant
-  }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+    color: 'textPrimary',
+    numberOfLines: 1
+  }), subTitle ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+    size: 0.5
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    style: styles.subtitle,
+    color: 'tertiary',
+    children: subTitle
+  })) : null), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     flex: 1
   }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
-    size: 2
-  }), /*#__PURE__*/_react.default.createElement(_Column.default, null, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    size: 3
+  }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: animatedChevronDownStyles
-  }, RightIcon ? RightIcon : /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, null)))), isExpanded ? /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    children: content,
-    color: 'textSecondary',
-    variant: 'body2'
-  }) : null, /*#__PURE__*/_react.default.createElement(_Divider.default, null));
+  }, RightIcon ? RightIcon : /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
+    width: 20,
+    height: 20,
+    color: 'tertiary'
+  })))), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: animatedContentBackgroundStyles
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: onLayout,
+    style: styles.contentView
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: animatedContentStyle
+  }, typeof content === 'string' ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: 'subtitle2',
+    color: 'tertiary',
+    children: content
+  }) : content))));
 }
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["ANIMATION_CONFIG","duration","useStyles","theme","useTheme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","useState","rotate","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","React","isValidElement"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n\n    const rotate = useSharedValue(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : <ChevronDownIcon/>}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd;IAFf;EADH,CAAP;AAMH,CATD;;AAWe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,OADE;IAEFC,QAFE;IAGFC,SAHE;IAIFC,KAJE;IAKFC,YAAY,GAAG;EALb,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGd,SAAS,EAAxB;EAEA,MAAM,CAACe,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAAS,KAAT,CAApC;EAEA,MAAMC,MAAM,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAf;EAEA,MAAMC,yBAAyB,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IACtDC,SAAS,EAAE,CAAC;MAAEJ,MAAM,EAAG,GAAEA,MAAM,CAACK,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAjB,EAE9B,EAF8B,CAAlC;;EAIA,MAAMC,OAAO,GAAG,MAAM;IAClBR,aAAa,CAACS,IAAI,IAAI,CAACA,IAAV,CAAb;IACAP,MAAM,CAACK,KAAP,GAAe,IAAAG,iCAAA,EAAW,CAACX,UAAD,GAAc,GAAd,GAAoB,CAA/B,EAAkCjB,gBAAlC,CAAf;EACH,CAHD;;EAKA,oBACI,6BAAC,eAAD,qBACI,6BAAC,mBAAD;IACI,OAAO,EAAE0B,OADb;IAEI,KAAK,EAAEV,MAAM,CAACX;EAFlB,GAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAFJ,CADK,GAKL,IATR,eAWI,6BAAC,mBAAD;IACI,QAAQ,EAAEE,KADd;IAEI,OAAO,EAAEC;EAFb,EAXJ,eAgBI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAhBJ,eAkBI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAlBJ,eAoBI,6BAAC,eAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAEO;EAAtB,GACKT,SAAS,GAAGA,SAAH,gBAAe,6BAAC,kBAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,aAAAY,cAAA,CAAMC,cAAN,CAAqBnB,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEA,OADd;IAEI,KAAK,EAAE,eAFX;IAGI,OAAO,EAAE;EAHb,EAFG,GAQP,IApCR,eAsCI,6BAAC,gBAAD,OAtCJ,CADJ;AA0CH"}
+{"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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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["AccordionProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TypographyProps } from '../Typography';\n\nexport default interface AccordionProps {\n    /**\n     * The content of the component.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * The icon to the left of the component.\n     */\n    LeftIcon?: React.ReactElement;\n\n    /**\n     * The icon to the right of the component.\n     */\n    RightIcon?: React.ReactElement;\n\n    /**\n     * The title of the component.\n     */\n    title: string;\n\n    /**\n     * The variant of the component title.\n     * @default 'subtitle2'\n     */\n    titleVariant?: TypographyProps['variant'];\n}"],"mappings":""}
+{"version":3,"names":[],"sources":["AccordionProps.ts"],"sourcesContent":["import React from 'react';\n\nexport default interface AccordionProps {\n    /**\n     * The title of the component.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The subtitle of the component.\n     */\n    subTitle?: string | React.ReactNode;\n\n    /**\n     * The component to the left of the title.\n     */\n    LeftComponent?: React.ReactNode;\n\n    /**\n     * The icon to the right of the title.\n     */\n    RightIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * The initial state of expanding\n     * @default false\n     */\n    isInitialExpanded?: boolean;\n}"],"mappings":""}

package/build/commonjs/Tab/Tab.js

@@ -57,11 +57,20 @@ function Tab(props) {
   } = props;
   const theme = (0, _styles.useTheme)();
   const vertical = variant === 'bottom-navigation';
-  const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
-  const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, style]);
+  const color = selected ? theme.palette.text.primary : variant === 'contained' ? theme.palette.text.secondary : theme.palette.text.hint;
+  const containedStyle = {
+    borderColor: selected ? theme.palette.primary.main : theme.palette.border,
+    borderRadius: theme.shape.roundnessExtra,
+    borderWidth: selected ? 1.5 : 1,
+    paddingHorizontal: theme.spacing(3),
+    paddingVertical: theme.spacing(1.5)
+  };
+  const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, style]);
   const tabInnerStyle = (0, _styles.css)([styles.root, styles.filledInner]);
   const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : typo.flag,
+    selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : variant === 'contained' ? selected ? { ...typo.subtitle2,
+      fontWeight: typo.fontWeight.medium
+    } : typo.body2 : typo.flag,
     color
   });
   const pressEffect = selected ? 'none' : 'opacity';

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","hint","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","flag","pressEffect","iconElement","cloneElement","fill","tabElement","React","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n        minHeight: 40,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n    filledInner: {\n        justifyContent: 'center',\n    }\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        indicatorColor = 'primary',\n        indicatorSize = 'full',\n        selected = false,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        style,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.root,\n        styles.filledInner,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n    const tabElement = typeof children !== 'string' ? (\n        React.cloneElement(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n        </React.Fragment>\n    );\n    const tabIndicator = (enableIndicator && selected)\n        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n        : null;\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            {indicatorSize === 'fit-content' ? (\n                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                    {tabElement}\n\n                    {tabIndicator}\n                </View>\n            ) : (\n                <React.Fragment>\n                    {tabElement}\n\n                    {tabIndicator}\n                </React.Fragment>\n            )}\n        </TabBase>\n    );\n};\n"],"mappings":"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"}
+{"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":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';\nexport type TabIndicatorColor = 'primary' | 'secondary'\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * Tab indicator color\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary'\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * Tab indicator color\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}

package/build/commonjs/Typography/TypographyProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'warning'\n    | 'error'\n    | 'accent'\n    | 'textPrimary'\n    | 'textSecondary'\n    | 'textAccent'\n    | 'textHint';\n\nexport type TypographyVariant =\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption1'\n    | 'caption2'\n    | 'flag';\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n    [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: TypographyVariant;\n\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n     onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'warning'\n    | 'error'\n    | 'accent'\n    | 'textPrimary'\n    | 'textSecondary'\n    | 'textAccent'\n    | 'textHint';\n\nexport type TypographyVariant =\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption1'\n    | 'caption2'\n    | 'flag'\n    | 'button1'\n    | 'button2';\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n    [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: TypographyVariant;\n\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n     onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":""}

package/build/module/Accordion/Accordion.js

@@ -1,66 +1,152 @@
-import React, { useState } from 'react';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { ChevronDown as ChevronDownIcon } from '../internal/icons';
+import React, { useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { useTheme } from '../styles';
+import { ChevronDown } from '../internal/icons';
 import ButtonBase from '../ButtonBase';
 import Column from '../Column';
-import Divider from '../Divider';
+import Row from '../Row';
 import Spacer from '../Spacer';
 import Typography from '../Typography';
-import { useTheme } from '../styles';
+const CONTENT_Y_START = 30;
+const CONTENT_Y_END = 0;
+const ROTATE_HIDE_DEGREE = 0;
+const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG = {
-  duration: 250
+  duration: 300
 };
 
 const useStyles = function () {
   const theme = useTheme();
   return {
     root: {
-      flexDirection: 'row',
-      paddingVertical: theme.spacing(3)
+      marginBottom: theme.spacing(2)
+    },
+    title: {
+      borderRadius: theme.spacing(4),
+      backgroundColor: theme.palette.paper.grey,
+      paddingHorizontal: theme.spacing(4),
+      paddingVertical: theme.spacing(3.5),
+      alignItems: 'center'
+    },
+    titleColumn: {
+      flexShrink: 1
+    },
+    subtitle: {
+      fontSize: 11,
+      lineHeight: 12,
+      fontFamily: 'Inter-Regular'
+    },
+    contentView: {
+      position: 'absolute',
+      width: '100%',
+      borderRadius: theme.spacing(4),
+      backgroundColor: theme.palette.paper.grey,
+      paddingHorizontal: theme.spacing(4),
+      paddingVertical: theme.spacing(6),
+      marginTop: theme.spacing(2)
     }
   };
 };
 
 export default function Accordion(props) {
   const {
+    title,
+    subTitle,
     content,
-    LeftIcon,
     RightIcon,
-    title,
-    titleVariant = 'subtitle2'
+    LeftComponent,
+    isInitialExpanded = false
   } = props;
   const styles = useStyles();
+  const theme = useTheme();
+  const CONTENT_MARGIN_HEIGHT = theme.spacing(2);
   const [isExpanded, setIsExpanded] = useState(false);
-  const rotate = useSharedValue(0);
+  const shouldInitialExpandedRef = useRef(isInitialExpanded);
+  const rotate = useSharedValue(ROTATE_HIDE_DEGREE);
+  const animatedOpacity = useSharedValue(0);
+  const animatedContentY = useSharedValue(CONTENT_Y_START);
+  const animatedHeight = useSharedValue(0);
+  const [contentHeight, setContentHeight] = useState(0);
   const animatedChevronDownStyles = useAnimatedStyle(() => ({
     transform: [{
       rotate: `${rotate.value}deg`
     }]
   }), []);
+  const animatedContentBackgroundStyles = useAnimatedStyle(() => ({
+    height: animatedHeight.value,
+    opacity: animatedOpacity.value,
+    overflow: 'hidden'
+  }), []);
+  const animatedContentStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: animatedContentY.value
+    }],
+    opacity: animatedOpacity.value
+  }), []);
 
   const onPress = () => {
     setIsExpanded(prev => !prev);
-    rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);
   };
 
-  return /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(ButtonBase, {
-    onPress: onPress,
+  const onLayout = event => {
+    const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;
+    setContentHeight(height);
+
+    if (shouldInitialExpandedRef.current) {
+      shouldInitialExpandedRef.current = false;
+      setIsExpanded(true);
+    }
+  };
+
+  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, {
+      duration: 0
+    }));
+  }, [isExpanded, contentHeight]);
+  return /*#__PURE__*/React.createElement(Column, {
     style: styles.root
-  }, LeftIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, LeftIcon, /*#__PURE__*/React.createElement(Spacer, {
-    size: 2
-  })) : null, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(ButtonBase, {
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(Row, {
+    style: styles.title
+  }, LeftComponent ? LeftComponent : null, /*#__PURE__*/React.createElement(Column, {
+    style: styles.titleColumn
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: 'subtitle2',
     children: title,
-    variant: titleVariant
-  }), /*#__PURE__*/React.createElement(Spacer, {
+    color: 'textPrimary',
+    numberOfLines: 1
+  }), subTitle ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
+    size: 0.5
+  }), /*#__PURE__*/React.createElement(Typography, {
+    style: styles.subtitle,
+    color: 'tertiary',
+    children: subTitle
+  })) : null), /*#__PURE__*/React.createElement(Spacer, {
     flex: 1
   }), /*#__PURE__*/React.createElement(Spacer, {
-    size: 2
-  }), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Animated.View, {
+    size: 3
+  }), /*#__PURE__*/React.createElement(Animated.View, {
     style: animatedChevronDownStyles
-  }, RightIcon ? RightIcon : /*#__PURE__*/React.createElement(ChevronDownIcon, null)))), isExpanded ? /*#__PURE__*/React.isValidElement(content) ? content : /*#__PURE__*/React.createElement(Typography, {
-    children: content,
-    color: 'textSecondary',
-    variant: 'body2'
-  }) : null, /*#__PURE__*/React.createElement(Divider, null));
+  }, RightIcon ? RightIcon : /*#__PURE__*/React.createElement(ChevronDown, {
+    width: 20,
+    height: 20,
+    color: 'tertiary'
+  })))), /*#__PURE__*/React.createElement(Animated.View, {
+    style: animatedContentBackgroundStyles
+  }, /*#__PURE__*/React.createElement(View, {
+    onLayout: onLayout,
+    style: styles.contentView
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: animatedContentStyle
+  }, typeof content === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    variant: 'subtitle2',
+    color: 'tertiary',
+    children: content
+  }) : content))));
 }
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useTheme","ANIMATION_CONFIG","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","animatedChevronDownStyles","transform","value","onPress","prev","isValidElement"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n\n    const rotate = useSharedValue(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : <ChevronDownIcon/>}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,QAAT,QAAyB,WAAzB;AAMA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;IAFf;EADH,CAAP;AAMH,CATD;;AAWA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,OADE;IAEFC,QAFE;IAGFC,SAHE;IAIFC,KAJE;IAKFC,YAAY,GAAG;EALb,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGb,SAAS,EAAxB;EAEA,MAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B9B,QAAQ,CAAC,KAAD,CAA5C;EAEA,MAAM+B,MAAM,GAAG5B,cAAc,CAAC,CAAD,CAA7B;EAEA,MAAM6B,yBAAyB,GAAG9B,gBAAgB,CAAC,OAAO;IACtD+B,SAAS,EAAE,CAAC;MAAEF,MAAM,EAAG,GAAEA,MAAM,CAACG,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAD,EAE9C,EAF8C,CAAlD;;EAIA,MAAMC,OAAO,GAAG,MAAM;IAClBL,aAAa,CAACM,IAAI,IAAI,CAACA,IAAV,CAAb;IACAL,MAAM,CAACG,KAAP,GAAe9B,UAAU,CAAC,CAACyB,UAAD,GAAc,GAAd,GAAoB,CAArB,EAAwBhB,gBAAxB,CAAzB;EACH,CAHD;;EAKA,oBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;IACI,OAAO,EAAEsB,OADb;IAEI,KAAK,EAAEP,MAAM,CAACX;EAFlB,GAIKO,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;IACI,QAAQ,EAAEE,KADd;IAEI,OAAO,EAAEC;EAFb,EAXJ,eAgBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAhBJ,eAkBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEK;EAAtB,GACKP,SAAS,GAAGA,SAAH,gBAAe,oBAAC,eAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,aAAA9B,KAAK,CAACsC,cAAN,CAAqBd,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;IACI,QAAQ,EAAEA,OADd;IAEI,KAAK,EAAE,eAFX;IAGI,OAAO,EAAE;EAHb,EAFG,GAQP,IApCR,eAsCI,oBAAC,OAAD,OAtCJ,CADJ;AA0CH"}
+{"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":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["AccordionProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TypographyProps } from '../Typography';\n\nexport default interface AccordionProps {\n    /**\n     * The content of the component.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * The icon to the left of the component.\n     */\n    LeftIcon?: React.ReactElement;\n\n    /**\n     * The icon to the right of the component.\n     */\n    RightIcon?: React.ReactElement;\n\n    /**\n     * The title of the component.\n     */\n    title: string;\n\n    /**\n     * The variant of the component title.\n     * @default 'subtitle2'\n     */\n    titleVariant?: TypographyProps['variant'];\n}"],"mappings":""}
+{"version":3,"names":[],"sources":["AccordionProps.ts"],"sourcesContent":["import React from 'react';\n\nexport default interface AccordionProps {\n    /**\n     * The title of the component.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The subtitle of the component.\n     */\n    subTitle?: string | React.ReactNode;\n\n    /**\n     * The component to the left of the title.\n     */\n    LeftComponent?: React.ReactNode;\n\n    /**\n     * The icon to the right of the title.\n     */\n    RightIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * The initial state of expanding\n     * @default false\n     */\n    isInitialExpanded?: boolean;\n}"],"mappings":""}

package/build/module/Tab/Tab.js

@@ -37,11 +37,20 @@ export default function Tab(props) {
   } = props;
   const theme = useTheme();
   const vertical = variant === 'bottom-navigation';
-  const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
-  const tabBaseStyle = css([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, style]);
+  const color = selected ? theme.palette.text.primary : variant === 'contained' ? theme.palette.text.secondary : theme.palette.text.hint;
+  const containedStyle = {
+    borderColor: selected ? theme.palette.primary.main : theme.palette.border,
+    borderRadius: theme.shape.roundnessExtra,
+    borderWidth: selected ? 1.5 : 1,
+    paddingHorizontal: theme.spacing(3),
+    paddingVertical: theme.spacing(1.5)
+  };
+  const tabBaseStyle = css([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, style]);
   const tabInnerStyle = css([styles.root, styles.filledInner]);
   const fontStyle = createFontStyle(theme, {
-    selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : typo.flag,
+    selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : variant === 'contained' ? selected ? { ...typo.subtitle2,
+      fontWeight: typo.fontWeight.medium
+    } : typo.body2 : typo.flag,
     color
   });
   const pressEffect = selected ? 'none' : 'opacity';

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","hint","tabBaseStyle","tabInnerStyle","fontStyle","selector","typo","h2","button2","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 ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        style,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.root,\n        styles.filledInner,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n    const tabElement = typeof children !== 'string' ? (\n        React.cloneElement(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n        </React.Fragment>\n    );\n    const tabIndicator = (enableIndicator && selected)\n        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n        : null;\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            {indicatorSize === 'fit-content' ? (\n                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                    {tabElement}\n\n                    {tabIndicator}\n                </View>\n            ) : (\n                <React.Fragment>\n                    {tabElement}\n\n                    {tabIndicator}\n                </React.Fragment>\n            )}\n        </TabBase>\n    );\n};\n"],"mappings":"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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        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/Tab/TabProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';\nexport type TabIndicatorColor = 'primary' | 'secondary'\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * Tab indicator color\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary'\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * Tab indicator color\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}

package/build/module/Typography/TypographyProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'warning'\n    | 'error'\n    | 'accent'\n    | 'textPrimary'\n    | 'textSecondary'\n    | 'textAccent'\n    | 'textHint';\n\nexport type TypographyVariant =\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption1'\n    | 'caption2'\n    | 'flag';\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n    [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: TypographyVariant;\n\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n     onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'warning'\n    | 'error'\n    | 'accent'\n    | 'textPrimary'\n    | 'textSecondary'\n    | 'textAccent'\n    | 'textHint';\n\nexport type TypographyVariant =\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption1'\n    | 'caption2'\n    | 'flag'\n    | 'button1'\n    | 'button2';\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n    [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: TypographyVariant;\n\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n     onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":""}

package/build/typescript/Accordion/AccordionProps.d.ts

@@ -1,25 +1,28 @@
 import React from 'react';
-import type { TypographyProps } from '../Typography';
 export default interface AccordionProps {
     /**
-     * The content of the component.
+     * The title of the component.
      */
-    content: string | React.ReactNode;
+    title: string | React.ReactNode;
+    /**
+     * The subtitle of the component.
+     */
+    subTitle?: string | React.ReactNode;
     /**
-     * The icon to the left of the component.
+     * The component to the left of the title.
      */
-    LeftIcon?: React.ReactElement;
+    LeftComponent?: React.ReactNode;
     /**
-     * The icon to the right of the component.
+     * The icon to the right of the title.
      */
     RightIcon?: React.ReactElement;
     /**
-     * The title of the component.
+     * The content of the component.
      */
-    title: string;
+    content: string | React.ReactNode;
     /**
-     * The variant of the component title.
-     * @default 'subtitle2'
+     * The initial state of expanding
+     * @default false
      */
-    titleVariant?: TypographyProps['variant'];
+    isInitialExpanded?: boolean;
 }

package/build/typescript/Tab/TabProps.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
-export declare type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';
+export declare type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';
 export declare type TabIndicatorColor = 'primary' | 'secondary';
 export declare type TabIndicatorSize = 'full' | 'fit-content';
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {

package/build/typescript/Typography/TypographyProps.d.ts

@@ -3,7 +3,7 @@ import type { AccessibilityProps, TextProps } from 'react-native';
 import type { ComponentProps } from '../types';
 export declare type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';
 export declare type TypographyColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'warning' | 'error' | 'accent' | 'textPrimary' | 'textSecondary' | 'textAccent' | 'textHint';
-export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption1' | 'caption2' | 'flag';
+export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption1' | 'caption2' | 'flag' | 'button1' | 'button2';
 export interface Accessibility {
     accessibilityRole: AccessibilityProps['accessibilityRole'];
     'area-level'?: number;

package/package.json

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

package/src/Accordion/Accordion.tsx

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

package/src/Accordion/AccordionProps.ts

@@ -1,30 +1,34 @@
 import React from 'react';
-import type { TypographyProps } from '../Typography';
 
 export default interface AccordionProps {
     /**
-     * The content of the component.
+     * The title of the component.
      */
-    content: string | React.ReactNode;
+    title: string | React.ReactNode;
 
     /**
-     * The icon to the left of the component.
+     * The subtitle of the component.
      */
-    LeftIcon?: React.ReactElement;
+    subTitle?: string | React.ReactNode;
 
     /**
-     * The icon to the right of the component.
+     * The component to the left of the title.
+     */
+    LeftComponent?: React.ReactNode;
+
+    /**
+     * The icon to the right of the title.
      */
     RightIcon?: React.ReactElement;
 
     /**
-     * The title of the component.
+     * The content of the component.
      */
-    title: string;
+    content: string | React.ReactNode;
 
     /**
-     * The variant of the component title.
-     * @default 'subtitle2'
+     * The initial state of expanding
+     * @default false
      */
-    titleVariant?: TypographyProps['variant'];
+    isInitialExpanded?: boolean;
 }

package/src/Tab/Tab.tsx

@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
     },
     filledInner: {
         justifyContent: 'center',
-    }
+    },
 });
 
 export default function Tab(props: TabProps) {
@@ -40,11 +40,24 @@ export default function Tab(props: TabProps) {
 
     const vertical = variant === 'bottom-navigation';
 
-    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
+    const color = selected
+        ? theme.palette.text.primary
+        : variant === 'contained'
+            ? theme.palette.text.secondary
+            : theme.palette.text.hint;
+
+    const containedStyle = {
+        borderColor: selected ? theme.palette.primary.main : theme.palette.border,
+        borderRadius: theme.shape.roundnessExtra,
+        borderWidth: selected ? 1.5 : 1,
+        paddingHorizontal: theme.spacing(3),
+        paddingVertical: theme.spacing(1.5),
+    };
 
     const tabBaseStyle = css([
         styles.root,
         variant === 'bottom-navigation' && styles.bottomNavigation,
+        variant === 'contained' && containedStyle,
         style,
     ]);
 
@@ -56,7 +69,11 @@ export default function Tab(props: TabProps) {
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => variant === 'primary'
             ? typo.h2
-            : (variant === 'secondary' ? typo.button2 : typo.flag),
+            : variant === 'secondary'
+                ? typo.button2
+                : variant === 'contained'
+                    ? (selected ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium } : typo.body2)
+                    : typo.flag,
         color,
     });
 

package/src/Tab/TabProps.ts

@@ -3,7 +3,7 @@ import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
-export type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';
+export type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';
 export type TabIndicatorColor = 'primary' | 'secondary'
 export type TabIndicatorSize = 'full' | 'fit-content';
 

package/src/Typography/TypographyProps.ts

@@ -27,7 +27,9 @@ export type TypographyVariant =
     | 'body2'
     | 'caption1'
     | 'caption2'
-    | 'flag';
+    | 'flag'
+    | 'button1'
+    | 'button2';
 
 export interface Accessibility {
     accessibilityRole: AccessibilityProps['accessibilityRole'];