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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultEnterDuration","defaultExitDuration","createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","disableAnimation","enterDuration","exitDuration","hideBackdrop","onClose","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport Slide from '../Slide';\nimport SimpleBackdrop from './SimpleBackdrop';\nimport type ModalProps from './ModalProps';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 150;\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        disableAnimation = false,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        hideBackdrop = false,\n        onClose,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(hideBackdrop || !visible) ? null : (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            )}\n\n            {!disableAnimation ? (\n                <Slide\n                    appear={visible}\n                    enterDuration={enterDuration}\n                    exitDuration={exitDuration}\n                    onEnter={() => setExited(false)}\n                    onExited={() => setExited(true)}\n                    style={animationStyle}\n                >\n                    {children}\n                </Slide>\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAWA,MAAMA,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;;AAEO,MAAMC,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,gBAAgB,GAAG,KAJjB;IAKFC,aAAa,GAAGX,oBALd;IAMFY,YAAY,GAAGX,mBANb;IAOFY,YAAY,GAAG,KAPb;IAQFC,OARE;IASFC,KATE;IAUFC,OAVE;IAWF,GAAGC;EAXD,IAYFX,KAZJ;;EAcA,MAAMY,mBAAmB,GAAG,MAAM;IAC9B,IAAIJ,OAAJ,EAAa;MACTA,OAAO,CAACZ,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAACiB,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,IAAI,CAACR,OAAL,EAAc;IACV,IAAIN,gBAAgB,IAAIS,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPJ,cAFO,EAGPR,KAHO,CAAJ;EADX,GAMQE,UANR,GAQMJ,YAAY,IAAI,CAACG,OAAlB,GAA6B,IAA7B,gBACG,6BAAC,uBAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAEV;EAFb,EATR,EAeK,CAACE,gBAAD,gBACG,6BAAC,cAAD;IACI,MAAM,EAAEM,OADZ;IAEI,aAAa,EAAEL,aAFnB;IAGI,YAAY,EAAEC,YAHlB;IAII,OAAO,EAAE,MAAMQ,SAAS,CAAC,KAAD,CAJ5B;IAKI,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD,CAL7B;IAMI,KAAK,EAAEb;EANX,GAQKE,QARL,CADH,GAWGA,QA1BR,CADJ;AA8BH;;AAAA"}
+{"version":3,"names":["createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        closeAnimation,\n        disableAnimation = false,\n        hideBackdrop = false,\n        initialOpacity,\n        initialTranslateY,\n        onClose,\n        onEnter: onEnterProp,\n        onEntered: onEnteredProp,\n        onExit: onExitProp,\n        onExited: onExitedProp,\n        openAnimation,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    const onEnter = () => {\n        setExited(false);\n        onEnterProp?.();\n    };\n\n    const onEntered = () => {\n        onEnteredProp?.();\n    };\n\n    const onExit = () => {\n        onExitProp?.();\n    };\n\n    const onExited = () => {\n        setExited(true);\n        onExitedProp?.();\n    };\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(!hideBackdrop && visible) ? (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            ) : null}\n\n            {!disableAnimation ? (\n                <AnimatedContainer\n                    children={children}\n                    closeAnimation={closeAnimation}\n                    initialOpacity={initialOpacity}\n                    initialTranslateY={initialTranslateY}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={onExited}\n                    openAnimation={openAnimation}\n                    style={animationStyle}\n                    visible={visible}\n                />\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAUO,MAAMA,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,cAJE;IAKFC,gBAAgB,GAAG,KALjB;IAMFC,YAAY,GAAG,KANb;IAOFC,cAPE;IAQFC,iBARE;IASFC,OATE;IAUFC,OAAO,EAAEC,WAVP;IAWFC,SAAS,EAAEC,aAXT;IAYFC,MAAM,EAAEC,UAZN;IAaFC,QAAQ,EAAEC,YAbR;IAcFC,aAdE;IAeFC,KAfE;IAgBFC,OAhBE;IAiBF,GAAGC;EAjBD,IAkBFrB,KAlBJ;;EAoBA,MAAMsB,mBAAmB,GAAG,MAAM;IAC9B,IAAIb,OAAJ,EAAa;MACTA,OAAO,CAACb,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC2B,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,MAAMlB,OAAO,GAAG,MAAM;IAClBc,SAAS,CAAC,KAAD,CAAT;IACAb,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBQ,SAAS,CAAC,IAAD,CAAT;IACAP,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACG,OAAL,EAAc;IACV,IAAIf,gBAAgB,IAAIkB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPJ,cAFO,EAGPR,KAHO,CAAJ;EADX,GAMQE,UANR,GAQM,CAACf,YAAD,IAAiBc,OAAlB,gBACG,6BAAC,uBAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAEpB;EAFb,EADH,GAKG,IAbR,EAeK,CAACG,gBAAD,gBACG,6BAAC,0BAAD;IACI,QAAQ,EAAEF,QADd;IAEI,cAAc,EAAEC,cAFpB;IAGI,cAAc,EAAEG,cAHpB;IAII,iBAAiB,EAAEC,iBAJvB;IAKI,OAAO,EAAEE,OALb;IAMI,SAAS,EAAEE,SANf;IAOI,MAAM,EAAEE,MAPZ;IAQI,QAAQ,EAAEE,QARd;IASI,aAAa,EAAEE,aATnB;IAUI,KAAK,EAAEjB,cAVX;IAWI,OAAO,EAAEmB;EAXb,EADH,GAcGjB,QA7BR,CADJ;AAiCH;;AAAA"}

package/build/commonjs/Modal/ModalProps.js

@@ -1,2 +1,14 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ANIMATION_TYPE = void 0;
+let ANIMATION_TYPE;
+exports.ANIMATION_TYPE = ANIMATION_TYPE;
+
+(function (ANIMATION_TYPE) {
+  ANIMATION_TYPE["SLIDE"] = "slide";
+  ANIMATION_TYPE["FADE"] = "fade";
+})(ANIMATION_TYPE || (exports.ANIMATION_TYPE = ANIMATION_TYPE = {}));
 //# sourceMappingURL=ModalProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * The number of milliseconds to enter animation.\n     * @default 300\n     */\n    enterDuration?: number;\n\n    /**\n     * The number of milliseconds to exit animation.\n     * @default 150\n     */\n    exitDuration?: number;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void,\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n    SLIDE = 'slide',\n    FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     */\n    type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Animation used when the modal closes.\n     */\n    closeAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Set the initial value of opacity for animating.\n     */\n    initialOpacity?: number | undefined;\n\n    /**\n     * Set the initial value of transition y for animating.\n     */\n    initialTranslateY?: number | undefined;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void;\n\n    /**\n     * Callback fired when the enter animation will start.\n     */\n    onEnter?: () => void | undefined;\n\n    /**\n     * Callback fired when the enter animation is completed.\n     */\n    onEntered?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation will start.\n     */\n    onExit?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation is completed.\n     */\n    onExited?: () => void | undefined;\n\n    /**\n     * Animation used when the modal opens.\n     */\n    openAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":";;;;;;IAMkBA,c;;;WAAAA,c;EAAAA,c;EAAAA,c;GAAAA,c,8BAAAA,c"}

package/build/commonjs/Modal/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ANIMATION_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _ModalProps.ANIMATION_TYPE;
+  }
+});
 Object.defineProperty(exports, "createModalCloseEvent", {
   enumerable: true,
   get: function () {
@@ -18,6 +24,8 @@ Object.defineProperty(exports, "default", {
 
 var _Modal = _interopRequireWildcard(require("./Modal"));
 
+var _ModalProps = require("./ModalProps");
+
 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; }

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport type { default as ModalProps } from './ModalProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport type { default as ModalProps, AnimationUnit } from './ModalProps';\nexport { ANIMATION_TYPE } from './ModalProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAGA"}

package/build/commonjs/Tab/Tab.js

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

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

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

package/build/commonjs/Tabs/Tabs.js

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

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

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

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

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

package/build/module/Accordion/Accordion.js

@@ -8,26 +8,27 @@ import Column from '../Column';
 import Row from '../Row';
 import Spacer from '../Spacer';
 import Typography from '../Typography';
-const CONTENT_Y_START = 30;
-const CONTENT_Y_END = 0;
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG = {
-  duration: 300
+  duration: 200
 };
+const INITIAL_EXPANDED_DELAY_MILLIS = 100;
+const CONTENT_OPACITY_DELAY_MILLIS = 200;
 
 const useStyles = function () {
   const theme = useTheme();
   return {
     root: {
-      marginBottom: theme.spacing(2)
+      marginBottom: theme.spacing(3)
     },
     title: {
       borderRadius: theme.spacing(4),
       backgroundColor: theme.palette.paper.grey,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(3.5),
-      alignItems: 'center'
+      alignItems: 'center',
+      height: 64
     },
     titleColumn: {
       flexShrink: 1
@@ -44,7 +45,7 @@ const useStyles = function () {
       backgroundColor: theme.palette.paper.grey,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(6),
-      marginTop: theme.spacing(2)
+      marginTop: theme.spacing(1)
     }
   };
 };
@@ -65,7 +66,6 @@ export default function Accordion(props) {
   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(() => ({
@@ -75,13 +75,9 @@ export default function Accordion(props) {
   }), []);
   const animatedContentBackgroundStyles = useAnimatedStyle(() => ({
     height: animatedHeight.value,
-    opacity: animatedOpacity.value,
     overflow: 'hidden'
   }), []);
   const animatedContentStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateY: animatedContentY.value
-    }],
     opacity: animatedOpacity.value
   }), []);
 
@@ -95,17 +91,14 @@ export default function Accordion(props) {
 
     if (shouldInitialExpandedRef.current) {
       shouldInitialExpandedRef.current = false;
-      setIsExpanded(true);
+      setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);
     }
   };
 
   useEffect(() => {
     rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
     animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
-    animatedOpacity.value = withTiming(isExpanded ? 1 : 0, ANIMATION_CONFIG);
-    animatedContentY.value = isExpanded ? withTiming(CONTENT_Y_END, ANIMATION_CONFIG) : withDelay(ANIMATION_CONFIG.duration, withTiming(CONTENT_Y_START, {
-      duration: 0
-    }));
+    animatedOpacity.value = isExpanded ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG)) : withTiming(0, ANIMATION_CONFIG);
   }, [isExpanded, contentHeight]);
   return /*#__PURE__*/React.createElement(Column, {
     style: styles.root
@@ -119,13 +112,16 @@ export default function Accordion(props) {
     variant: 'subtitle2',
     children: title,
     color: 'textPrimary',
-    numberOfLines: 1
+    numberOfLines: 1,
+    disableFontScaling: true
   }), 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
+    children: subTitle,
+    numberOfLines: 1,
+    disableFontScaling: true
   })) : null), /*#__PURE__*/React.createElement(Spacer, {
     flex: 1
   }), /*#__PURE__*/React.createElement(Spacer, {

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

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

@@ -1,17 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useEffect } from 'react';
-import { useWindowDimensions, Animated, Easing } from 'react-native';
+import React, { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import Column from '../Column';
-import Modal from '../Modal';
+import Modal, { ANIMATION_TYPE } from '../Modal';
 import Paper from '../Paper';
-import { useAnimatedValue } from '../hooks';
-import { isNotAndroid12 } from '../utils';
 import { useTheme } from '../styles';
 const DIALOG_MAX_WIDTH = 328;
-const fadeDuration = 300;
-const fadeAnimationDelay = 50;
 
 const useStyles = function () {
   const theme = useTheme();
@@ -27,6 +23,7 @@ const useStyles = function () {
       zIndex: theme.zIndex.dialog
     },
     paper: {
+      borderRadius: theme.shape.roundnessExtra,
       margin,
       maxWidth: DIALOG_MAX_WIDTH,
       overflow: 'hidden',
@@ -55,6 +52,7 @@ const useStyles = function () {
 
 export default function Dialog(props) {
   const {
+    animationType = ANIMATION_TYPE.SLIDE,
     children,
     fullScreen = false,
     onClose,
@@ -64,42 +62,74 @@ export default function Dialog(props) {
     ...otherProps
   } = props;
   const styles = useStyles();
-  const theme = useTheme();
-  const animatedOpacity = useAnimatedValue(0);
-  useEffect(() => {
-    if (!fullScreen) {
-      Animated.timing(animatedOpacity, {
-        toValue: visible ? 1 : 0,
-        duration: fadeDuration,
-        delay: visible ? fadeAnimationDelay : 0,
-        easing: Easing.out(Easing.exp),
-        useNativeDriver: isNotAndroid12
-      }).start();
+  const {
+    height: screenHeight
+  } = useWindowDimensions();
+  const closeAnimation = useMemo(() => {
+    if (animationType === ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 0,
+        type: ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: screenHeight,
+        type: ANIMATION_TYPE.SLIDE
+      }, {
+        duration: 150,
+        toValue: 0,
+        type: ANIMATION_TYPE.FADE
+      }];
     }
-  }, [fullScreen, visible]);
+
+    return [{
+      duration: 150,
+      toValue: screenHeight,
+      type: ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen, screenHeight]);
+  const openAnimation = useMemo(() => {
+    if (animationType === ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 1,
+        type: ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: 0,
+        type: ANIMATION_TYPE.SLIDE
+      }, {
+        delay: 50,
+        duration: 150,
+        toValue: 1,
+        type: ANIMATION_TYPE.FADE
+      }];
+    }
+
+    return [{
+      toValue: 0,
+      type: ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen]);
+  const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+  const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
   return /*#__PURE__*/React.createElement(Modal, _extends({
     animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
+    closeAnimation: closeAnimation,
+    initialOpacity: initialOpacity,
+    initialTranslateY: initialTranslateY,
     onClose: onClose,
-    exitDuration: fullScreen ? 150 : 300,
+    openAnimation: openAnimation,
     visible: visible,
     style: styles.root
-  }, otherProps), /*#__PURE__*/React.createElement(Animated.View, {
-    needsOffscreenAlphaCompositing: true,
-    style: {
-      height: fullScreen ? '100%' : 'auto',
-      width: fullScreen ? '100%' : 'auto',
-      opacity: fullScreen ? 1 : animatedOpacity
-    }
-  }, topElement ? /*#__PURE__*/React.createElement(Column, {
+  }, otherProps), /*#__PURE__*/React.createElement(React.Fragment, null, topElement ? /*#__PURE__*/React.createElement(Column, {
     style: fullScreen ? undefined : styles.topElementSize
   }, /*#__PURE__*/React.createElement(Column, {
     style: styles.topElementPosition
   }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
     elevation: 6,
     square: fullScreen,
-    style: css([{
-      borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra
-    }, fullScreen ? styles.paperFullScreen : styles.paper, style])
+    style: css([fullScreen ? styles.paperFullScreen : styles.paper, style])
   }, children)));
 }
 ;

package/build/module/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useWindowDimensions","Animated","Easing","css","Column","Modal","Paper","useAnimatedValue","isNotAndroid12","useTheme","DIALOG_MAX_WIDTH","fadeDuration","fadeAnimationDelay","useStyles","theme","width","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","timing","toValue","duration","delay","easing","out","exp","useNativeDriver","start","opacity","undefined","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated, Easing } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const animatedOpacity = useAnimatedValue(0);\n\n    useEffect(() => {\n        if(!fullScreen){\n            Animated.timing(animatedOpacity, {\n                toValue: visible ? 1 : 0,\n                duration: fadeDuration,\n                delay: visible ? fadeAnimationDelay : 0,\n                easing: Easing.out(Easing.exp),\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n    }, [fullScreen, visible]);\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            exitDuration={fullScreen ? 150 : 300}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Animated.View\n                needsOffscreenAlphaCompositing={true}\n                style={{\n                    height: fullScreen ? '100%' : 'auto',\n                    width:  fullScreen ? '100%' : 'auto',\n                    opacity: fullScreen ? 1 : animatedOpacity,\n                }}\n            >\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useMemo","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","Paper","useTheme","DIALOG_MAX_WIDTH","useStyles","theme","width","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","borderRadius","shape","roundnessExtra","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","animationType","SLIDE","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","screenHeight","closeAnimation","FADE","toValue","type","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            borderRadius: theme.shape.roundnessExtra,\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            closeAnimation={closeAnimation}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </React.Fragment>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/module/Dialog/DialogProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["DialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface DialogProps extends OverridableComponentProps<ModalProps, {\n    /**\n     * Dialog children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the dialog is full-screen.\n     * @default false\n     */\n    fullScreen?: boolean;\n\n    /**\n     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["DialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\nimport { ANIMATION_TYPE } from '../Modal';\n\nexport default interface DialogProps extends OverridableComponentProps<ModalProps, {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     * @default 'slide'\n     */\n    animationType?: ANIMATION_TYPE;\n\n    /**\n     * Dialog children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the dialog is full-screen.\n     * @default false\n     */\n    fullScreen?: boolean;\n\n    /**\n     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":""}