@fountain-ui/core 2.0.0-beta.74 → 2.0.0-beta.76

package/build/commonjs/Button/Button.js

@@ -84,7 +84,7 @@ function Button(props) {
   };
   const startIcon = (0, _utils.cloneElementSafely)(startIconProp, iconProps);
   const endIcon = (0, _utils.cloneElementSafely)(endIconProp, iconProps);
-  const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);
+  const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);
   const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
   const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;
   const borderRadius = theme.shape.roundnessLarge;

package/build/commonjs/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconSizes","small","medium","styles","StyleSheet","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","useTheme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","cloneElementSafely","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundnessLarge","buttonBaseStyle","css","undefined","fontStyle","createFontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n    small: 20,\n    medium: 24,\n};\n\nconst styles = StyleSheet.create({\n    root: {\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center',\n    },\n    fullWidth: {\n        width: '100%',\n    },\n    medium: {\n        minWidth: 104,\n        height: 48,\n    },\n    small: {\n        minWidth: 56,\n        height: 32,\n    },\n});\n\nexport default function Button(props: ButtonProps) {\n    const {\n        children,\n        clipHorizontalSpacing = false,\n        color = 'primary',\n        disabled = false,\n        endIcon: endIconProp,\n        fullWidth = false,\n        href,\n        onPress,\n        pressEffect,\n        size = 'medium',\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'contained',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const mainColor = theme.palette[color].main;\n\n    const fontColor = variant === 'contained'\n        ? theme.palette[color].contrastTextColor\n        : theme.palette[color].main;\n\n    const variantStyleMap = {\n        contained: {\n            backgroundColor: mainColor,\n        },\n        outlined: {\n            backgroundColor: 'transparent',\n            borderColor: mainColor,\n            borderStyle: 'solid',\n            borderWidth: 1,\n        },\n        text: {\n            backgroundColor: 'transparent',\n        },\n    };\n\n    const iconProps = {\n        width: iconSizes[size],\n        height: iconSizes[size],\n        fill: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);\n    const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n    const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n    const borderRadius = theme.shape.roundnessLarge;\n    const buttonBaseStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        size === 'medium' ? styles.medium : styles.small,\n        fullWidth ? styles.fullWidth : undefined,\n        { borderRadius, color: fontColor },\n        (variant === 'text' && clipHorizontalSpacing)\n            ? { minWidth: 0 }\n            : { paddingLeft, paddingRight },\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n        color: fontColor,\n    });\n\n    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n    const textMarginStyle = startIcon\n        ? { marginLeft: textMarginSize }\n        : endIcon\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const modifiedPressEffect = variant !== 'text' && !pressEffect\n        ? 'scale'\n        : pressEffect;\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n        if (href) {\n            if (await Linking.canOpenURL(href)) {\n                await Linking.openURL(href);\n            }\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            pressEffect={modifiedPressEffect}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["iconSizes","small","medium","styles","StyleSheet","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","useTheme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","cloneElementSafely","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundnessLarge","buttonBaseStyle","css","undefined","fontStyle","createFontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n    small: 20,\n    medium: 24,\n};\n\nconst styles = StyleSheet.create({\n    root: {\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center',\n    },\n    fullWidth: {\n        width: '100%',\n    },\n    medium: {\n        minWidth: 104,\n        height: 48,\n    },\n    small: {\n        minWidth: 56,\n        height: 32,\n    },\n});\n\nexport default function Button(props: ButtonProps) {\n    const {\n        children,\n        clipHorizontalSpacing = false,\n        color = 'primary',\n        disabled = false,\n        endIcon: endIconProp,\n        fullWidth = false,\n        href,\n        onPress,\n        pressEffect,\n        size = 'medium',\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'contained',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const mainColor = theme.palette[color].main;\n\n    const fontColor = variant === 'contained'\n        ? theme.palette[color].contrastTextColor\n        : theme.palette[color].main;\n\n    const variantStyleMap = {\n        contained: {\n            backgroundColor: mainColor,\n        },\n        outlined: {\n            backgroundColor: 'transparent',\n            borderColor: mainColor,\n            borderStyle: 'solid',\n            borderWidth: 1,\n        },\n        text: {\n            backgroundColor: 'transparent',\n        },\n    };\n\n    const iconProps = {\n        width: iconSizes[size],\n        height: iconSizes[size],\n        fill: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);\n    const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n    const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n    const borderRadius = theme.shape.roundnessLarge;\n    const buttonBaseStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        size === 'medium' ? styles.medium : styles.small,\n        fullWidth ? styles.fullWidth : undefined,\n        { borderRadius, color: fontColor },\n        (variant === 'text' && clipHorizontalSpacing)\n            ? { minWidth: 0 }\n            : { paddingLeft, paddingRight },\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n        color: fontColor,\n    });\n\n    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n    const textMarginStyle = startIcon\n        ? { marginLeft: textMarginSize }\n        : endIcon\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const modifiedPressEffect = variant !== 'text' && !pressEffect\n        ? 'scale'\n        : pressEffect;\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n        if (href) {\n            if (await Linking.canOpenURL(href)) {\n                await Linking.openURL(href);\n            }\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            pressEffect={modifiedPressEffect}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Dialog/Dialog.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Dialog;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
@@ -17,13 +17,24 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 
 var _Paper = _interopRequireDefault(require("../Paper"));
 
+var _hooks = require("../hooks");
+
+var _utils = require("../utils");
+
 var _styles2 = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const DIALOG_MAX_WIDTH = 328;
+const fadeInDuration = 300;
+const fadeOutDuration = 100;
+const fadeAnimationDelay = 50;
 
 const useStyles = function () {
   const theme = (0, _styles2.useTheme)();
@@ -77,12 +88,29 @@ function Dialog(props) {
   } = props;
   const styles = useStyles();
   const theme = (0, _styles2.useTheme)();
+  const animatedOpacity = (0, _hooks.useAnimatedValue)(fullScreen ? 1 : 0);
+  (0, _react.useEffect)(() => {
+    if (!fullScreen) {
+      _reactNative.Animated.timing(animatedOpacity, {
+        toValue: visible ? 1 : 0,
+        duration: visible ? fadeInDuration : fadeOutDuration,
+        delay: visible ? fadeAnimationDelay : 0,
+        useNativeDriver: _utils.isNotAndroid12
+      }).start();
+    }
+  }, [fullScreen, visible]);
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
     onClose: onClose,
+    exitDuration: fullScreen ? 150 : 300,
     visible: visible,
     style: styles.root
-  }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    needsOffscreenAlphaCompositing: true,
+    style: {
+      opacity: animatedOpacity
+    }
+  }, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: fullScreen ? undefined : styles.topElementSize
   }, /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: styles.topElementPosition

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

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

package/build/commonjs/Modal/Modal.js

@@ -22,6 +22,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const defaultEnterDuration = 300;
+const defaultExitDuration = 150;
+
 const createModalCloseEvent = reason => ({
   metadata: {
     reason
@@ -36,6 +39,8 @@ function Modal(props) {
     backdropOpacity = 0.5,
     children,
     disableAnimation = false,
+    enterDuration = defaultEnterDuration,
+    exitDuration = defaultExitDuration,
     hideBackdrop = false,
     onClose,
     style,
@@ -66,7 +71,8 @@ function Modal(props) {
     opacity: backdropOpacity
   }), !disableAnimation ? /*#__PURE__*/_react.default.createElement(_Slide.default, {
     appear: visible,
-    exitDuration: 150,
+    enterDuration: enterDuration,
+    exitDuration: exitDuration,
     onEnter: () => setExited(false),
     onExited: () => setExited(true),
     style: animationStyle

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

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

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

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

package/build/commonjs/Snackbar/Snackbar.js

@@ -5,26 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Snackbar;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 
-var _styles = require("@fountain-ui/styles");
-
 var _Slide = _interopRequireDefault(require("../Slide"));
 
 var _SnackbarContent = _interopRequireDefault(require("../SnackbarContent"));
 
-var _styles2 = require("../styles");
+var _hooks = require("../hooks");
+
+var _styles = require("../styles");
+
+var _utils = require("../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const fadeInDuration = 300;
+const fadeOutDuration = 110;
+const fadeAnimationDelay = 100;
+
 const useStyles = function () {
-  const theme = (0, _styles2.useTheme)();
+  const theme = (0, _styles.useTheme)();
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   return {
     root: {
@@ -48,6 +58,8 @@ function Snackbar(props) {
     autoHideDuration = null,
     children,
     message,
+    title,
+    startIcon,
     onActionPress,
     onClose,
     style,
@@ -85,18 +97,33 @@ function Snackbar(props) {
 
   const [exited, setExited] = _react.default.useState(true);
 
+  const animatedOpacity = (0, _hooks.useAnimatedValue)(0);
+  const animatedStyle = {
+    opacity: animatedOpacity
+  };
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(animatedOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: visible ? fadeInDuration : fadeOutDuration,
+      delay: visible ? fadeAnimationDelay : 0,
+      useNativeDriver: _utils.isNotAndroid12
+    }).start();
+  }, [visible]);
+
   if (!visible && exited) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
-    style: (0, _styles.css)([styles.root, style])
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
+    style: [animatedStyle, styles.root, style]
   }, otherProps), /*#__PURE__*/_react.default.createElement(_Slide.default, {
     animatedY: animatedY,
     appear: visible,
     onEnter: () => setExited(false),
     onExited: () => setExited(true)
   }, children ? children : /*#__PURE__*/_react.default.createElement(_SnackbarContent.default, {
+    title: title,
+    startIcon: startIcon,
     actionLabel: actionLabel,
     message: message,
     onActionPress: onActionPress

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

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

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SnackbarProps.ts"],"sourcesContent":["import React from 'react';\n\nimport type { Animated, ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface SnackbarProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The text to use for the action component.\n     */\n    actionLabel?: string,\n\n    /**\n     * y value for animating.\n     */\n    animatedY?: Animated.Value;\n\n    /**\n     * The number of milliseconds to wait before automatically calling the\n     * `onDismiss` function. `onDismiss` should then set the state of the `visible`\n     * prop to hide the `Snackbar`. This behavior is disabled by default with\n     * the `null` value.\n     * @default null\n     */\n    autoHideDuration?: number | null,\n\n    /**\n     * Replace the `SnackbarContent` component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The message to display.\n     */\n    message?: string,\n\n    /**\n     * Callback fired when the action component pressed.\n     */\n    onActionPress?: () => void\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void,\n\n    /**\n     * If `true`, `Snackbar` is shown.\n     * @default false\n     */\n    visible?: boolean,\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["SnackbarProps.ts"],"sourcesContent":["import React from 'react';\n\nimport type { Animated, ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface SnackbarProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The text to use for the action component.\n     */\n    actionLabel?: string;\n\n    /**\n     * y value for animating.\n     */\n    animatedY?: Animated.Value;\n\n    /**\n     * The number of milliseconds to wait before automatically calling the\n     * `onDismiss` function. `onDismiss` should then set the state of the `visible`\n     * prop to hide the `Snackbar`. This behavior is disabled by default with\n     * the `null` value.\n     * @default null\n     */\n    autoHideDuration?: number | null;\n\n    /**\n     * Replace the `SnackbarContent` component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The message to display.\n     */\n    message?: string;\n\n    /**\n     * Callback fired when the action component pressed.\n     */\n    onActionPress?: () => void;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Element placed before the title and message.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The title to display.\n     */\n    title?: string;\n\n    /**\n     * If `true`, `Snackbar` is shown.\n     * @default false\n     */\n    visible?: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/SnackbarContent/SnackbarContent.js

@@ -9,37 +9,42 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+var _styles = require("@fountain-ui/styles");
+
 var _utils = require("@fountain-ui/utils");
 
-var _styles = require("../styles");
+var _styles2 = require("../styles");
 
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
+var _Column = _interopRequireDefault(require("../Column"));
+
 var _Paper = _interopRequireDefault(require("../Paper"));
 
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 
+var _Typography = _interopRequireDefault(require("../Typography"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _styles2.useTheme)();
   const backgroundColor = theme.palette.primary.main;
 
   const [r, g, b] = _react.default.useMemo(() => (0, _utils.rgb)(backgroundColor), [backgroundColor]);
 
   return {
     root: {
+      flexDirection: 'row',
+      alignItems: 'center',
       backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
       borderRadius: theme.shape.roundness,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(3)
     },
     action: {
-      alignItems: 'center',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
       paddingVertical: theme.spacing(2)
     }
   };
@@ -49,30 +54,43 @@ function SnackbarContent(props) {
   const {
     actionLabel,
     message,
+    title,
     onActionPress,
     style,
+    startIcon,
     ...otherProps
   } = props;
   const styles = useStyles();
-  const theme = (0, _styles.useTheme)();
-  const messageFontStyle = (0, _styles.createFontStyle)(theme, {
+  const theme = (0, _styles2.useTheme)();
+  const titleFontStyle = (0, _styles2.createFontStyle)(theme, {
+    selector: typo => typo.subtitle2,
+    color: theme.mode === 'light' ? _styles.lightTheme.palette.primary.contrastTextColor : _styles.lightTheme.palette.primary.main
+  });
+  const messageFontStyle = (0, _styles2.createFontStyle)(theme, {
     selector: typo => typo.body2,
-    color: theme.palette.primary.contrastTextColor
+    color: title ? theme.mode === 'light' ? _styles.darkTheme.palette.text.secondary : _styles.lightTheme.palette.text.secondary : theme.palette.primary.contrastTextColor
   });
-  const labelFontStyle = (0, _styles.createFontStyle)(theme, {
+  const labelFontStyle = (0, _styles2.createFontStyle)(theme, {
     selector: typo => typo.button2,
     color: theme.palette.primary.contrastTextColor
   });
-  const labelStyle = (0, _styles.css)([labelFontStyle, {
+  const labelStyle = (0, _styles2.css)([labelFontStyle, {
     padding: theme.spacing(2)
   }]);
   return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
     elevation: 0,
-    style: (0, _styles.css)([styles.root, actionLabel ? styles.action : undefined, style])
-  }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: (0, _styles2.css)([styles.root, actionLabel ? styles.action : undefined, style])
+  }, otherProps), startIcon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, startIcon, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+    size: 3
+  })) : null, /*#__PURE__*/_react.default.createElement(_Column.default, null, title ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    children: title,
+    style: (0, _styles2.css)([titleFontStyle])
+  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: message,
-    style: (0, _styles.css)([messageFontStyle])
-  }), actionLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+    style: (0, _styles2.css)([messageFontStyle])
+  })), actionLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+    flex: 1
+  }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     size: 1
   }), /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
     onPress: onActionPress,

package/build/commonjs/SnackbarContent/SnackbarContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","rgb","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","alignItems","flexDirection","justifyContent","SnackbarContent","props","actionLabel","message","onActionPress","style","otherProps","styles","messageFontStyle","createFontStyle","selector","typo","body2","color","contrastTextColor","labelFontStyle","button2","labelStyle","css","padding","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport Paper from '../Paper';\nimport Spacer from '../Spacer';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    const backgroundColor = theme.palette.primary.main;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    return {\n        root: {\n            backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,\n            borderRadius: theme.shape.roundness,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3),\n        },\n        action: {\n            alignItems: 'center',\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            paddingVertical: theme.spacing(2),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionLabel,\n        message,\n        onActionPress,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.body2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.button2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const labelStyle = css([\n        labelFontStyle,\n        { padding: theme.spacing(2) },\n    ]);\n\n    return (\n        <Paper\n            elevation={0}\n            style={css([\n                styles.root,\n                actionLabel ? styles.action : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Text\n                children={message}\n                style={css([\n                    messageFontStyle,\n                ])}\n            />\n\n            {actionLabel ? (\n                <React.Fragment>\n                    <Spacer size={1}/>\n\n                    <ButtonBase\n                        onPress={onActionPress}\n                        pressEffect={'none'}\n                    >\n                        <Text\n                            children={actionLabel}\n                            style={labelStyle}\n                        />\n                    </ButtonBase>\n                </React.Fragment>\n            ) : null}\n        </Paper>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAA2C,GAAG,YAAmC;EACnF,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,eAAe,GAAGF,KAAK,CAACG,OAAN,CAAcC,OAAd,CAAsBC,IAA9C;;EACA,MAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAYC,cAAA,CAAMC,OAAN,CAAc,MAAM,IAAAC,UAAA,EAAIT,eAAJ,CAApB,EAA0C,CAACA,eAAD,CAA1C,CAAlB;;EAEA,OAAO;IACHU,IAAI,EAAE;MACFV,eAAe,EAAG,QAAOI,CAAE,KAAIC,CAAE,KAAIC,CAAE,OADrC;MAEFK,YAAY,EAAEb,KAAK,CAACc,KAAN,CAAYC,SAFxB;MAGFC,iBAAiB,EAAEhB,KAAK,CAACiB,OAAN,CAAc,CAAd,CAHjB;MAIFC,eAAe,EAAElB,KAAK,CAACiB,OAAN,CAAc,CAAd;IAJf,CADH;IAOHE,MAAM,EAAE;MACJC,UAAU,EAAE,QADR;MAEJC,aAAa,EAAE,KAFX;MAGJC,cAAc,EAAE,eAHZ;MAIJJ,eAAe,EAAElB,KAAK,CAACiB,OAAN,CAAc,CAAd;IAJb;EAPL,CAAP;AAcH,CApBD;;AAsBe,SAASM,eAAT,CAAyBC,KAAzB,EAAsD;EACjE,MAAM;IACFC,WADE;IAEFC,OAFE;IAGFC,aAHE;IAIFC,KAJE;IAKF,GAAGC;EALD,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAG/B,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM8B,gBAAgB,GAAG,IAAAC,uBAAA,EAAgBhC,KAAhB,EAAuB;IAC5CiC,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,KADmB;IAE5CC,KAAK,EAAEpC,KAAK,CAACG,OAAN,CAAcC,OAAd,CAAsBiC;EAFe,CAAvB,CAAzB;EAKA,MAAMC,cAAc,GAAG,IAAAN,uBAAA,EAAgBhC,KAAhB,EAAuB;IAC1CiC,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACK,OADiB;IAE1CH,KAAK,EAAEpC,KAAK,CAACG,OAAN,CAAcC,OAAd,CAAsBiC;EAFa,CAAvB,CAAvB;EAKA,MAAMG,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnBH,cADmB,EAEnB;IAAEI,OAAO,EAAE1C,KAAK,CAACiB,OAAN,CAAc,CAAd;EAAX,CAFmB,CAAJ,CAAnB;EAKA,oBACI,6BAAC,cAAD;IACI,SAAS,EAAE,CADf;IAEI,KAAK,EAAE,IAAAwB,WAAA,EAAI,CACPX,MAAM,CAAClB,IADA,EAEPa,WAAW,GAAGK,MAAM,CAACX,MAAV,GAAmBwB,SAFvB,EAGPf,KAHO,CAAJ;EAFX,GAOQC,UAPR,gBASI,6BAAC,iBAAD;IACI,QAAQ,EAAEH,OADd;IAEI,KAAK,EAAE,IAAAe,WAAA,EAAI,CACPV,gBADO,CAAJ;EAFX,EATJ,EAgBKN,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,6BAAC,mBAAD;IACI,OAAO,EAAEE,aADb;IAEI,WAAW,EAAE;EAFjB,gBAII,6BAAC,iBAAD;IACI,QAAQ,EAAEF,WADd;IAEI,KAAK,EAAEe;EAFX,EAJJ,CAHJ,CADQ,GAcR,IA9BR,CADJ;AAkCH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","rgb","root","flexDirection","alignItems","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","SnackbarContent","props","actionLabel","message","title","onActionPress","style","startIcon","otherProps","styles","titleFontStyle","createFontStyle","selector","typo","subtitle2","color","mode","lightTheme","contrastTextColor","messageFontStyle","body2","darkTheme","text","secondary","labelFontStyle","button2","labelStyle","css","padding","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { lightTheme, darkTheme } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Paper from '../Paper';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    const backgroundColor = theme.palette.primary.main;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    return {\n        root: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,\n            borderRadius: theme.shape.roundness,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3),\n        },\n        action: {\n            paddingVertical: theme.spacing(2),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionLabel,\n        message,\n        title,\n        onActionPress,\n        style,\n        startIcon,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: theme.mode === 'light'\n            ? lightTheme.palette.primary.contrastTextColor\n            : lightTheme.palette.primary.main,\n    });\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.body2,\n        color: title\n            ? theme.mode === 'light'\n                ? darkTheme.palette.text.secondary\n                : lightTheme.palette.text.secondary\n            : theme.palette.primary.contrastTextColor,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.button2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const labelStyle = css([\n        labelFontStyle,\n        { padding: theme.spacing(2) },\n    ]);\n\n    return (\n        <Paper\n            elevation={0}\n            style={css([\n                styles.root,\n                actionLabel ? styles.action : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {startIcon ? (\n                <React.Fragment>\n                    {startIcon}\n\n                    <Spacer size={3}/>\n                </React.Fragment>\n            ) : null}\n\n            <Column>\n                {title ? (\n                    <Typography\n                        children={title}\n                        style={css([titleFontStyle])}\n                    />\n                ) : null}\n\n                <Text\n                    children={message}\n                    style={css([messageFontStyle])}\n                />\n            </Column>\n\n            {actionLabel ? (\n                <React.Fragment>\n                    <Spacer flex={1}/>\n\n                    <Spacer size={1}/>\n\n                    <ButtonBase\n                        onPress={onActionPress}\n                        pressEffect={'none'}\n                    >\n                        <Text\n                            children={actionLabel}\n                            style={labelStyle}\n                        />\n                    </ButtonBase>\n                </React.Fragment>\n            ) : null}\n        </Paper>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/SnackbarContent/SnackbarContentProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n    /**\n     * The text to use for the action component.\n     */\n    actionLabel?: string,\n\n    /**\n     * The message to display.\n     */\n    message?: string,\n\n    /**\n     * Callback fired when the action component pressed.\n     */\n    onActionPress?: () => void\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n    /**\n     * The text to use for the action component.\n     */\n    actionLabel?: string;\n\n    /**\n     * The message to display.\n     */\n    message?: string;\n\n    /**\n     * Callback fired when the action component pressed.\n     */\n    onActionPress?: () => void;\n\n    /**\n     * Element placed before the title and message.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The title to display.\n     */\n    title?: string;\n}> {}\n"],"mappings":""}

package/build/commonjs/Tab/Tab.js

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