@fountain-ui/core 1.12.0 → 1.14.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.14.0) (2021-12-27)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+## [1.13.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.13.1) (2021-11-15)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+# [1.13.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.13.0) (2021-11-10)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+## [1.12.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.12.1) (2021-11-08)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
 # [1.12.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.12.0) (2021-10-29)
 
 **Note:** Version bump only for package @fountain-ui/core

package/build/commonjs/Accordion/Accordion.js

@@ -11,7 +11,17 @@ var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanim
 
 var _icons = require("../internal/icons");
 
-var _index = require("../index");
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+
+var _Column = _interopRequireDefault(require("../Column"));
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _styles = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -24,7 +34,7 @@ const ANIMATION_OPTION = {
 };
 
 const useStyles = function () {
-  const theme = (0, _index.useTheme)();
+  const theme = (0, _styles.useTheme)();
   return {
     root: {
       flexDirection: 'row',
@@ -57,19 +67,19 @@ function Accordion(props) {
     rotate.value = _reactNativeReanimated.default.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_index.Column, null, /*#__PURE__*/_react.default.createElement(_index.ButtonBase, {
+  return /*#__PURE__*/_react.default.createElement(_Column.default, null, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
     onPress: onPress,
     style: styles.root
-  }, LeftIcon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, LeftIcon, /*#__PURE__*/_react.default.createElement(_index.Spacer, {
+  }, LeftIcon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, LeftIcon, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     size: 2
-  })) : null, /*#__PURE__*/_react.default.createElement(_index.Typography, {
+  })) : null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     children: title,
     variant: titleVariant
-  }), /*#__PURE__*/_react.default.createElement(_index.Spacer, {
+  }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     flex: 1
-  }), /*#__PURE__*/_react.default.createElement(_index.Spacer, {
+  }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     size: 2
-  }), /*#__PURE__*/_react.default.createElement(_index.Column, null, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+  }), /*#__PURE__*/_react.default.createElement(_Column.default, null, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: animatedChevronDownStyles
   }, RightIcon ? RightIcon :
   /*#__PURE__*/
@@ -77,10 +87,10 @@ function Accordion(props) {
   _react.default.createElement(_icons.ChevronDown, {
     height: 24,
     width: 24
-  })))), isExpanded ? /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_index.Typography, {
+  })))), isExpanded ? /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_Typography.default, {
     children: content,
     color: 'textSecondary',
     variant: 'body2'
-  }) : null, /*#__PURE__*/_react.default.createElement(_index.Divider, null));
+  }) : null, /*#__PURE__*/_react.default.createElement(_Divider.default, null));
 }
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["Accordion.tsx"],"names":["ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","Animated","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAKA,MAAMA,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAG,sBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,KADb;AAEFC,MAAAA,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;AAFf;AADH,GAAP;AAMH,CATD;;AAWe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,OADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,SAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,YAAY,GAAG;AALb,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAGb,SAAS,EAAxB;AAEA,QAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B,qBAAS,KAAT,CAApC;;AACA,QAAMC,MAAM,GAAGC,+BAASC,cAAT,CAAwB,CAAxB,CAAf;;AAEA,QAAMC,yBAAyB,GAAGF,+BAASG,gBAAT,CAA0B,OAAO;AAC/DC,IAAAA,SAAS,EAAE,CAAC;AAAEL,MAAAA,MAAM,EAAG,GAAEA,MAAM,CAACM,KAAM;AAA1B,KAAD;AADoD,GAAP,CAA1B,CAAlC;;AAIA,QAAMC,OAAO,GAAG,MAAM;AAClBR,IAAAA,aAAa,CAACS,IAAI,IAAI,CAACA,IAAV,CAAb;AACAR,IAAAA,MAAM,CAACM,KAAP,GAAeL,+BAASQ,UAAT,CAAoB,CAACX,UAAD,GAAc,GAAd,GAAoB,CAAxC,EAA2ChB,gBAA3C,CAAf;AACH,GAHD;;AAKA,sBACI,6BAAC,aAAD,qBACI,6BAAC,iBAAD;AACI,IAAA,OAAO,EAAEyB,OADb;AAEI,IAAA,KAAK,EAAEV,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,6BAAC,aAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEO;AAAtB,KACKT,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,+BAAC,kBAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKI,UAAU,GACP,4BAAMY,cAAN,CAAqBlB,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,6BAAC,cAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const rotate = Animated.useSharedValue(0);\n\n    const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }));\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            // @ts-ignore\n                            <ChevronDownIcon height={24} width={24}/>\n                        )}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"]}
+{"version":3,"sources":["Accordion.tsx"],"names":["ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","Animated","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,KADb;AAEFC,MAAAA,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;AAFf;AADH,GAAP;AAMH,CATD;;AAWe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,OADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,SAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,YAAY,GAAG;AALb,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAGb,SAAS,EAAxB;AAEA,QAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B,qBAAS,KAAT,CAApC;;AACA,QAAMC,MAAM,GAAGC,+BAASC,cAAT,CAAwB,CAAxB,CAAf;;AAEA,QAAMC,yBAAyB,GAAGF,+BAASG,gBAAT,CAA0B,OAAO;AAC/DC,IAAAA,SAAS,EAAE,CAAC;AAAEL,MAAAA,MAAM,EAAG,GAAEA,MAAM,CAACM,KAAM;AAA1B,KAAD;AADoD,GAAP,CAA1B,CAAlC;;AAIA,QAAMC,OAAO,GAAG,MAAM;AAClBR,IAAAA,aAAa,CAACS,IAAI,IAAI,CAACA,IAAV,CAAb;AACAR,IAAAA,MAAM,CAACM,KAAP,GAAeL,+BAASQ,UAAT,CAAoB,CAACX,UAAD,GAAc,GAAd,GAAoB,CAAxC,EAA2ChB,gBAA3C,CAAf;AACH,GAHD;;AAKA,sBACI,6BAAC,eAAD,qBACI,6BAAC,mBAAD;AACI,IAAA,OAAO,EAAEyB,OADb;AAEI,IAAA,KAAK,EAAEV,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,6BAAC,eAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEO;AAAtB,KACKT,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,+BAAC,kBAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKI,UAAU,GACP,4BAAMY,cAAN,CAAqBlB,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,6BAAC,gBAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const rotate = Animated.useSharedValue(0);\n\n    const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }));\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            // @ts-ignore\n                            <ChevronDownIcon height={24} width={24}/>\n                        )}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"]}

package/build/commonjs/ButtonBase/ButtonBase.js

@@ -64,6 +64,14 @@ function ButtonBase(props) {
     }]
   }));
 
+  _reactNativeReanimated.default.useAnimatedReaction(() => disabled, result => {
+    if (result) {
+      opacity.value = DISABLED_OPACITY;
+    } else {
+      opacity.value = ORIGINAL_OPACITY;
+    }
+  });
+
   const startAnimation = (pressIn, isHovered = false) => {
     if (pressEffect === 'none') {
       return;

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

@@ -1 +1 @@
-{"version":3,"sources":["ButtonBase.tsx"],"names":["ORIGINAL_OPACITY","ACTIVE_OPACITY","DISABLED_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","StyleSheet","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","Animated","useSharedValue","animatedStyle","useAnimatedStyle","value","startAnimation","pressIn","isHovered","withTiming","withDelay","undefined","hovered"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\nconst ORIGINAL_OPACITY = 1;\nconst ACTIVE_OPACITY = .65;\nconst DISABLED_OPACITY = .3;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nconst styles = StyleSheet.create({\n    disabled: {\n        opacity: DISABLED_OPACITY,\n        transform: [{ scale: ORIGINAL_SCALE }],\n    },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);\n    const scale = Animated.useSharedValue(ORIGINAL_SCALE);\n\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        opacity: opacity.value,\n        transform: [{ scale: scale.value }],\n    }));\n\n    const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n        if (pressEffect === 'none') {\n            return;\n        }\n\n        if (pressEffect === 'opacity') {\n            if (pressIn) {\n                opacity.value = ACTIVE_OPACITY;\n            } else {\n                opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = Animated.withDelay(\n                    100,\n                    Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),\n                );\n            } else {\n                scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);\n            }\n        }\n    };\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={() => startAnimation(true)}\n            onPressOut={() => startAnimation(false)}\n            style={[\n                animatedStyle,\n                disabled ? styles.disabled : undefined,\n                style,\n            ]}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"]}
+{"version":3,"sources":["ButtonBase.tsx"],"names":["ORIGINAL_OPACITY","ACTIVE_OPACITY","DISABLED_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","StyleSheet","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","Animated","useSharedValue","animatedStyle","useAnimatedStyle","value","useAnimatedReaction","result","startAnimation","pressIn","isHovered","withTiming","withDelay","undefined","hovered"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\nconst ORIGINAL_OPACITY = 1;\nconst ACTIVE_OPACITY = .65;\nconst DISABLED_OPACITY = .3;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nconst styles = StyleSheet.create({\n    disabled: {\n        opacity: DISABLED_OPACITY,\n        transform: [{ scale: ORIGINAL_SCALE }],\n    },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);\n    const scale = Animated.useSharedValue(ORIGINAL_SCALE);\n\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        opacity: opacity.value,\n        transform: [{ scale: scale.value }],\n    }));\n\n    Animated.useAnimatedReaction(\n        () => disabled,\n        (result) => {\n            if (result) {\n                opacity.value = DISABLED_OPACITY;\n            } else {\n                opacity.value = ORIGINAL_OPACITY;\n            }\n        },\n    );\n\n    const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n        if (pressEffect === 'none') {\n            return;\n        }\n\n        if (pressEffect === 'opacity') {\n            if (pressIn) {\n                opacity.value = ACTIVE_OPACITY;\n            } else {\n                opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = Animated.withDelay(\n                    100,\n                    Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),\n                );\n            } else {\n                scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);\n            }\n        }\n    };\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={() => startAnimation(true)}\n            onPressOut={() => startAnimation(false)}\n            style={[\n                animatedStyle,\n                disabled ? styles.disabled : undefined,\n                style,\n            ]}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"]}

package/build/commonjs/Chip/Chip.js

@@ -11,7 +11,7 @@ var _reactNative = require("react-native");
 
 var _styles = require("../styles");
 
-var _index = require("../index");
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -51,7 +51,7 @@ function Chip(props) {
     outlined: {
       backgroundColor: theme.palette.paper.default,
       borderColor: theme.palette.border,
-      borderWidth: 1
+      borderWidth: 2
     },
     filled: {
       backgroundColor: theme.palette.paper.grey
@@ -59,7 +59,7 @@ function Chip(props) {
     bold: {
       backgroundColor: theme.palette.paper.grey,
       borderColor: theme.palette.primary.main,
-      borderWidth: 1
+      borderWidth: 2
     }
   };
   const chipStyle = (0, _styles.css)([styles.root, variantStyleMap[variant], styleProp]);
@@ -84,7 +84,7 @@ function Chip(props) {
     size: ICON_SIZE,
     color: fontColor
   });
-  return /*#__PURE__*/_react.default.createElement(_index.ButtonBase, _extends({
+  return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
     onPress: onPress,
     style: chipStyle
   }, otherProps), startIcon, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {

package/build/commonjs/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Chip.tsx"],"names":["ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","size"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';\nimport { ButtonBase } from '../index';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 'tiny';\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 32,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(2),\n            paddingRight: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 1,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 1,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const startIcon = cloneSvgIcon(startIconProp, { size: ICON_SIZE, color: fontColor });\n    const endIcon = cloneSvgIcon(endIconProp, { size: ICON_SIZE, color: fontColor });\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}"]}
+{"version":3,"sources":["Chip.tsx"],"names":["ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","size"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 'tiny';\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 32,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(2),\n            paddingRight: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 2,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 2,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const startIcon = cloneSvgIcon(startIconProp, { size: ICON_SIZE, color: fontColor });\n    const endIcon = cloneSvgIcon(endIconProp, { size: ICON_SIZE, color: fontColor });\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"]}

package/build/commonjs/Radio/Radio.js

@@ -64,9 +64,13 @@ function Radio(props) {
     onPress: handlePress,
     style: rootStyle
   }, otherProps), isChecked ? /*#__PURE__*/_react.default.createElement(_internal.RadioChecked, {
-    fill: checkedColor
+    fill: checkedColor,
+    height: 20,
+    width: 20
   }) : /*#__PURE__*/_react.default.createElement(_internal.Radio, {
-    fill: color
+    fill: color,
+    height: 20,
+    width: 20
   }), children ? children : null);
 }
 

package/build/commonjs/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Radio.tsx"],"names":["useStyles","root","alignItems","flexDirection","Radio","props","checked","children","disabled","onChange","onChangeProp","style","value","otherProps","styles","theme","context","React","useContext","RadioContext","handlePress","isChecked","color","palette","tertiary","main","checkedColor","primary","rootStyle"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAiC,GAAG,YAAyB;AAC/D,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,aAAa,EAAE;AAFb;AADH,GAAP;AAMH,CAPD;;AASe,SAASC,KAAT,CAAeC,KAAf,EAAkC;AAAA;;AAC7C,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,QAAQ,EAAEC,YAJR;AAKFC,IAAAA,KALE;AAMFC,IAAAA,KANE;AAOF,OAAGC;AAPD,MAQFR,KARJ;AAUA,QAAMS,MAAM,GAAGd,SAAS,EAAxB;AAEA,QAAMe,KAAK,GAAG,uBAAd;;AAEA,QAAMC,OAAO,GAAGC,eAAMC,UAAN,CAAiBC,kCAAjB,CAAhB;;AAEA,QAAMC,WAAW,GAAG,MAAM;AAAA;;AACtB,UAAMX,QAAQ,wBAAGO,OAAH,aAAGA,OAAH,uBAAGA,OAAO,CAAEP,QAAZ,iEAAwBC,YAAtC;;AACA,QAAID,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACG,KAAD,CAAR;AACH;AACJ,GALD;;AAOA,QAAMS,SAAS,WAAG,CAAAL,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEJ,KAAT,MAAmBA,KAAtB,uCAA+BN,OAA9C;AAEA,QAAMgB,KAAK,GAAGP,KAAK,CAACQ,OAAN,CAAcC,QAAd,CAAuBC,IAArC;AACA,QAAMC,YAAY,GAAGX,KAAK,CAACQ,OAAN,CAAcI,OAAd,CAAsBF,IAA3C;AAEA,QAAMG,SAAS,GAAG,iBAAI,CAClBd,MAAM,CAACb,IADW,EAElBU,KAFkB,CAAJ,CAAlB;AAKA,sBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEH,QADd;AAEI,IAAA,OAAO,EAAEY,WAFb;AAGI,IAAA,KAAK,EAAEQ;AAHX,KAIQf,UAJR,GAMKQ,SAAS,gBACJ,6BAAC,sBAAD;AAAkB,IAAA,IAAI,EAAEK;AAAxB,IADI,gBAEJ,6BAAC,eAAD;AAAW,IAAA,IAAI,EAAEJ;AAAjB,IARV,EAUKf,QAAQ,GAAGA,QAAH,GAAc,IAV3B,CADJ;AAcH;;AAAA","sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css, useTheme } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            flexDirection: 'row',\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        disabled = false,\n        onChange: onChangeProp,\n        style,\n        value,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const context = React.useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const color = theme.palette.tertiary.main;\n    const checkedColor = theme.palette.primary.main;\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {isChecked\n                ? <RadioCheckedIcon fill={checkedColor}/>\n                : <RadioIcon fill={color}/>\n            }\n            {children ? children : null}\n        </ButtonBase>\n    );\n};\n"]}
+{"version":3,"sources":["Radio.tsx"],"names":["useStyles","root","alignItems","flexDirection","Radio","props","checked","children","disabled","onChange","onChangeProp","style","value","otherProps","styles","theme","context","React","useContext","RadioContext","handlePress","isChecked","color","palette","tertiary","main","checkedColor","primary","rootStyle"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAiC,GAAG,YAAyB;AAC/D,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,aAAa,EAAE;AAFb;AADH,GAAP;AAMH,CAPD;;AASe,SAASC,KAAT,CAAeC,KAAf,EAAkC;AAAA;;AAC7C,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,QAAQ,EAAEC,YAJR;AAKFC,IAAAA,KALE;AAMFC,IAAAA,KANE;AAOF,OAAGC;AAPD,MAQFR,KARJ;AAUA,QAAMS,MAAM,GAAGd,SAAS,EAAxB;AAEA,QAAMe,KAAK,GAAG,uBAAd;;AAEA,QAAMC,OAAO,GAAGC,eAAMC,UAAN,CAAiBC,kCAAjB,CAAhB;;AAEA,QAAMC,WAAW,GAAG,MAAM;AAAA;;AACtB,UAAMX,QAAQ,wBAAGO,OAAH,aAAGA,OAAH,uBAAGA,OAAO,CAAEP,QAAZ,iEAAwBC,YAAtC;;AACA,QAAID,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACG,KAAD,CAAR;AACH;AACJ,GALD;;AAOA,QAAMS,SAAS,WAAG,CAAAL,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEJ,KAAT,MAAmBA,KAAtB,uCAA+BN,OAA9C;AAEA,QAAMgB,KAAK,GAAGP,KAAK,CAACQ,OAAN,CAAcC,QAAd,CAAuBC,IAArC;AACA,QAAMC,YAAY,GAAGX,KAAK,CAACQ,OAAN,CAAcI,OAAd,CAAsBF,IAA3C;AAEA,QAAMG,SAAS,GAAG,iBAAI,CAClBd,MAAM,CAACb,IADW,EAElBU,KAFkB,CAAJ,CAAlB;AAKA,sBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEH,QADd;AAEI,IAAA,OAAO,EAAEY,WAFb;AAGI,IAAA,KAAK,EAAEQ;AAHX,KAIQf,UAJR,GAMKQ,SAAS,gBACN,6BAAC,sBAAD;AACI,IAAA,IAAI,EAAEK,YADV;AAEI,IAAA,MAAM,EAAE,EAFZ;AAGI,IAAA,KAAK,EAAE;AAHX,IADM,gBAON,6BAAC,eAAD;AACI,IAAA,IAAI,EAAEJ,KADV;AAEI,IAAA,MAAM,EAAE,EAFZ;AAGI,IAAA,KAAK,EAAE;AAHX,IAbR,EAmBKf,QAAQ,GAAGA,QAAH,GAAc,IAnB3B,CADJ;AAuBH;;AAAA","sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css, useTheme } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            flexDirection: 'row',\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        disabled = false,\n        onChange: onChangeProp,\n        style,\n        value,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const context = React.useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const color = theme.palette.tertiary.main;\n    const checkedColor = theme.palette.primary.main;\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {isChecked ? (\n                <RadioCheckedIcon\n                    fill={checkedColor}\n                    height={20}\n                    width={20}\n                />\n            ) : (\n                <RadioIcon\n                    fill={color}\n                    height={20}\n                    width={20}\n                />\n            )}\n            {children ? children : null}\n        </ButtonBase>\n    );\n};\n"]}

package/build/commonjs/Snackbar/Snackbar.js

@@ -43,10 +43,12 @@ const useStyles = function () {
 
 function Snackbar(props) {
   const {
+    actionLabel,
     animatedY,
     autoHideDuration = null,
     children,
     message,
+    onActionPress,
     onClose,
     style,
     visible = false,
@@ -95,7 +97,9 @@ function Snackbar(props) {
     onEnter: () => setExited(false),
     onExited: () => setExited(true)
   }, children ? children : /*#__PURE__*/_react.default.createElement(_SnackbarContent.default, {
-    message: message
+    actionLabel: actionLabel,
+    message: message,
+    onActionPress: onActionPress
   })));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Snackbar.tsx"],"names":["useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","animatedY","autoHideDuration","children","message","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;AACrE,QAAMC,KAAK,GAAG,wBAAd;AACA,QAAMC,MAAM,GAAG,oDAAf;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAE,QADT;AAEFC,MAAAA,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;AAGFC,MAAAA,QAAQ,EAAE,GAHR;AAIFC,MAAAA,aAAa,EAAEN,MAAM,CAACG,MAJpB;AAKFI,MAAAA,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;AAMFI,MAAAA,QAAQ,EAAE,UANR;AAOFC,MAAAA,KAAK,EAAE,MAPL;AAQF;AACAC,MAAAA,MAAM,EAAE;AATN;AADH,GAAP;AAaH,CAjBD;;AAmBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,SADE;AAEFC,IAAAA,gBAAgB,GAAG,IAFjB;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,KANE;AAOFC,IAAAA,OAAO,GAAG,KAPR;AAQF,OAAGC;AARD,MASFR,KATJ;;AAWA,QAAMS,aAAa,GAAGC,eAAMC,MAAN,CAA4B,IAA5B,CAAtB;;AAEA,QAAMC,oBAAoB,GAAG,MAAM;AAC/B,QAAIH,aAAa,CAACI,OAAd,KAA0B,IAA9B,EAAoC;AAChCC,MAAAA,YAAY,CAACL,aAAa,CAACI,OAAf,CAAZ;AACH;AACJ,GAJD;;AAMAH,iBAAMK,SAAN,CAAgB,MAAM;AAClB,WAAO,MAAM;AACTH,MAAAA,oBAAoB;AACvB,KAFD;AAGH,GAJD,EAIG,EAJH;;AAMAF,iBAAMK,SAAN,CAAgB,MAAM;AAClB,QAAIR,OAAO,IAAIL,gBAAgB,KAAK,IAApC,EAA0C;AACtCU,MAAAA,oBAAoB,GADkB,CAGtC;;AACAH,MAAAA,aAAa,CAACI,OAAd,GAAwBG,UAAU,CAAC,MAAM;AACrC,YAAIX,OAAJ,EAAa;AACTA,UAAAA,OAAO;AACV;AACJ,OAJiC,EAI/BH,gBAJ+B,CAAlC;AAKH;AACJ,GAXD,EAWG,CAACK,OAAD,EAAUL,gBAAV,EAA4BG,OAA5B,CAXH;;AAaA,QAAMY,MAAM,GAAG/B,SAAS,EAAxB;;AAEA,QAAM,CAACgC,MAAD,EAASC,SAAT,IAAsBT,eAAMU,QAAN,CAAe,IAAf,CAA5B;;AAEA,MAAI,CAACb,OAAD,IAAYW,MAAhB,EAAwB;AACpB,WAAO,IAAP;AACH;;AAED,sBACI,6BAAC,iBAAD;AACI,IAAA,KAAK,EAAE,iBAAI,CACPD,MAAM,CAAC5B,IADA,EAEPiB,KAFO,CAAJ;AADX,KAKQE,UALR,gBAOI,6BAAC,cAAD;AACI,IAAA,SAAS,EAAEP,SADf;AAEI,IAAA,MAAM,EAAEM,OAFZ;AAGI,IAAA,OAAO,EAAE,MAAMY,SAAS,CAAC,KAAD,CAH5B;AAII,IAAA,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;AAJ7B,KAMKhB,QAAQ,GAAGA,QAAH,gBACL,6BAAC,wBAAD;AAAiB,IAAA,OAAO,EAAEC;AAA1B,IAPR,CAPJ,CADJ;AAoBH;;AAAA","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        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\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 message={message}/>\n                )}\n            </Slide>\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Snackbar.tsx"],"names":["useStyles","theme","insets","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"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;AACrE,QAAMC,KAAK,GAAG,wBAAd;AACA,QAAMC,MAAM,GAAG,oDAAf;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAE,QADT;AAEFC,MAAAA,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;AAGFC,MAAAA,QAAQ,EAAE,GAHR;AAIFC,MAAAA,aAAa,EAAEN,MAAM,CAACG,MAJpB;AAKFI,MAAAA,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;AAMFI,MAAAA,QAAQ,EAAE,UANR;AAOFC,MAAAA,KAAK,EAAE,MAPL;AAQF;AACAC,MAAAA,MAAM,EAAE;AATN;AADH,GAAP;AAaH,CAjBD;;AAmBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,WADE;AAEFC,IAAAA,SAFE;AAGFC,IAAAA,gBAAgB,GAAG,IAHjB;AAIFC,IAAAA,QAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,aANE;AAOFC,IAAAA,OAPE;AAQFC,IAAAA,KARE;AASFC,IAAAA,OAAO,GAAG,KATR;AAUF,OAAGC;AAVD,MAWFV,KAXJ;;AAaA,QAAMW,aAAa,GAAGC,eAAMC,MAAN,CAA4B,IAA5B,CAAtB;;AAEA,QAAMC,oBAAoB,GAAG,MAAM;AAC/B,QAAIH,aAAa,CAACI,OAAd,KAA0B,IAA9B,EAAoC;AAChCC,MAAAA,YAAY,CAACL,aAAa,CAACI,OAAf,CAAZ;AACH;AACJ,GAJD;;AAMAH,iBAAMK,SAAN,CAAgB,MAAM;AAClB,WAAO,MAAM;AACTH,MAAAA,oBAAoB;AACvB,KAFD;AAGH,GAJD,EAIG,EAJH;;AAMAF,iBAAMK,SAAN,CAAgB,MAAM;AAClB,QAAIR,OAAO,IAAIN,gBAAgB,KAAK,IAApC,EAA0C;AACtCW,MAAAA,oBAAoB,GADkB,CAGtC;;AACAH,MAAAA,aAAa,CAACI,OAAd,GAAwBG,UAAU,CAAC,MAAM;AACrC,YAAIX,OAAJ,EAAa;AACTA,UAAAA,OAAO;AACV;AACJ,OAJiC,EAI/BJ,gBAJ+B,CAAlC;AAKH;AACJ,GAXD,EAWG,CAACM,OAAD,EAAUN,gBAAV,EAA4BI,OAA5B,CAXH;;AAaA,QAAMY,MAAM,GAAGjC,SAAS,EAAxB;;AAEA,QAAM,CAACkC,MAAD,EAASC,SAAT,IAAsBT,eAAMU,QAAN,CAAe,IAAf,CAA5B;;AAEA,MAAI,CAACb,OAAD,IAAYW,MAAhB,EAAwB;AACpB,WAAO,IAAP;AACH;;AAED,sBACI,6BAAC,iBAAD;AACI,IAAA,KAAK,EAAE,iBAAI,CACPD,MAAM,CAAC9B,IADA,EAEPmB,KAFO,CAAJ;AADX,KAKQE,UALR,gBAOI,6BAAC,cAAD;AACI,IAAA,SAAS,EAAER,SADf;AAEI,IAAA,MAAM,EAAEO,OAFZ;AAGI,IAAA,OAAO,EAAE,MAAMY,SAAS,CAAC,KAAD,CAH5B;AAII,IAAA,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;AAJ7B,KAMKjB,QAAQ,GAAGA,QAAH,gBACL,6BAAC,wBAAD;AACI,IAAA,WAAW,EAAEH,WADjB;AAEI,IAAA,OAAO,EAAEI,OAFb;AAGI,IAAA,aAAa,EAAEC;AAHnB,IAPR,CAPJ,CADJ;AAwBH;;AAAA","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"]}

package/build/commonjs/SnackbarContent/SnackbarContent.js

@@ -13,8 +13,12 @@ var _utils = require("@fountain-ui/utils");
 
 var _styles = require("../styles");
 
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+
 var _Paper = _interopRequireDefault(require("../Paper"));
 
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -31,29 +35,52 @@ const useStyles = function () {
       borderRadius: theme.shape.roundness,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(3)
+    },
+    action: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingVertical: theme.spacing(2)
     }
   };
 };
 
 function SnackbarContent(props) {
   const {
+    actionLabel,
     message,
+    onActionPress,
     style,
     ...otherProps
   } = props;
   const styles = useStyles();
   const theme = (0, _styles.useTheme)();
-  const fontStyle = (0, _styles.createFontStyle)(theme, {
+  const messageFontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typo => typo.body2,
     color: theme.palette.primary.contrastTextColor
   });
+  const labelFontStyle = (0, _styles.createFontStyle)(theme, {
+    selector: typo => typo.button2,
+    color: theme.palette.primary.contrastTextColor
+  });
+  const labelStyle = (0, _styles.css)([labelFontStyle, {
+    padding: theme.spacing(2)
+  }]);
   return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
     elevation: 0,
-    style: (0, _styles.css)([styles.root, style])
+    style: (0, _styles.css)([styles.root, actionLabel ? styles.action : undefined, style])
   }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: message,
-    style: (0, _styles.css)([fontStyle])
-  }));
+    style: (0, _styles.css)([messageFontStyle])
+  }), actionLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+    size: 1
+  }), /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
+    onPress: onActionPress,
+    pressEffect: 'none'
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: actionLabel,
+    style: labelStyle
+  }))) : null);
 }
 
 ;

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

@@ -1 +1 @@
-{"version":3,"sources":["SnackbarContent.tsx"],"names":["useStyles","theme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","SnackbarContent","props","message","style","otherProps","styles","fontStyle","selector","typo","body2","color","contrastTextColor"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAA2C,GAAG,YAAmC;AACnF,QAAMC,KAAK,GAAG,uBAAd;AAEA,QAAMC,eAAe,GAAGD,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsBC,IAA9C;;AACA,QAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAYC,eAAMC,OAAN,CAAc,MAAM,gBAAIR,eAAJ,CAApB,EAA0C,CAACA,eAAD,CAA1C,CAAlB;;AAEA,SAAO;AACHS,IAAAA,IAAI,EAAE;AACFT,MAAAA,eAAe,EAAG,QAAOI,CAAE,KAAIC,CAAE,KAAIC,CAAE,OADrC;AAEFI,MAAAA,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,SAFxB;AAGFC,MAAAA,iBAAiB,EAAEd,KAAK,CAACe,OAAN,CAAc,CAAd,CAHjB;AAIFC,MAAAA,eAAe,EAAEhB,KAAK,CAACe,OAAN,CAAc,CAAd;AAJf;AADH,GAAP;AAQH,CAdD;;AAgBe,SAASE,eAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,OADE;AAEFC,IAAAA,KAFE;AAGF,OAAGC;AAHD,MAIFH,KAJJ;AAMA,QAAMI,MAAM,GAAGvB,SAAS,EAAxB;AAEA,QAAMC,KAAK,GAAG,uBAAd;AAEA,QAAMuB,SAAS,GAAG,6BAAgBvB,KAAhB,EAAuB;AACrCwB,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,KADY;AAErCC,IAAAA,KAAK,EAAE3B,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsByB;AAFQ,GAAvB,CAAlB;AAKA,sBACI,6BAAC,cAAD;AACI,IAAA,SAAS,EAAE,CADf;AAEI,IAAA,KAAK,EAAE,iBAAI,CACPN,MAAM,CAACZ,IADA,EAEPU,KAFO,CAAJ;AAFX,KAMQC,UANR,gBAQI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEF,OADd;AAEI,IAAA,KAAK,EAAE,iBAAI,CACPI,SADO,CAAJ;AAFX,IARJ,CADJ;AAiBH;;AAAA","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 Paper from '../Paper';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root'>;\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    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        message,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.body2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    return (\n        <Paper\n            elevation={0}\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Text\n                children={message}\n                style={css([\n                    fontStyle,\n                ])}\n            />\n        </Paper>\n    );\n};\n"]}
+{"version":3,"sources":["SnackbarContent.tsx"],"names":["useStyles","theme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","alignItems","flexDirection","justifyContent","SnackbarContent","props","actionLabel","message","onActionPress","style","otherProps","styles","messageFontStyle","selector","typo","body2","color","contrastTextColor","labelFontStyle","button2","labelStyle","padding","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAA2C,GAAG,YAAmC;AACnF,QAAMC,KAAK,GAAG,uBAAd;AAEA,QAAMC,eAAe,GAAGD,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsBC,IAA9C;;AACA,QAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAYC,eAAMC,OAAN,CAAc,MAAM,gBAAIR,eAAJ,CAApB,EAA0C,CAACA,eAAD,CAA1C,CAAlB;;AAEA,SAAO;AACHS,IAAAA,IAAI,EAAE;AACFT,MAAAA,eAAe,EAAG,QAAOI,CAAE,KAAIC,CAAE,KAAIC,CAAE,OADrC;AAEFI,MAAAA,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,SAFxB;AAGFC,MAAAA,iBAAiB,EAAEd,KAAK,CAACe,OAAN,CAAc,CAAd,CAHjB;AAIFC,MAAAA,eAAe,EAAEhB,KAAK,CAACe,OAAN,CAAc,CAAd;AAJf,KADH;AAOHE,IAAAA,MAAM,EAAE;AACJC,MAAAA,UAAU,EAAE,QADR;AAEJC,MAAAA,aAAa,EAAE,KAFX;AAGJC,MAAAA,cAAc,EAAE,eAHZ;AAIJJ,MAAAA,eAAe,EAAEhB,KAAK,CAACe,OAAN,CAAc,CAAd;AAJb;AAPL,GAAP;AAcH,CApBD;;AAsBe,SAASM,eAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,WADE;AAEFC,IAAAA,OAFE;AAGFC,IAAAA,aAHE;AAIFC,IAAAA,KAJE;AAKF,OAAGC;AALD,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAG7B,SAAS,EAAxB;AAEA,QAAMC,KAAK,GAAG,uBAAd;AAEA,QAAM6B,gBAAgB,GAAG,6BAAgB7B,KAAhB,EAAuB;AAC5C8B,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,KADmB;AAE5CC,IAAAA,KAAK,EAAEjC,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsB+B;AAFe,GAAvB,CAAzB;AAKA,QAAMC,cAAc,GAAG,6BAAgBnC,KAAhB,EAAuB;AAC1C8B,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACK,OADiB;AAE1CH,IAAAA,KAAK,EAAEjC,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsB+B;AAFa,GAAvB,CAAvB;AAKA,QAAMG,UAAU,GAAG,iBAAI,CACnBF,cADmB,EAEnB;AAAEG,IAAAA,OAAO,EAAEtC,KAAK,CAACe,OAAN,CAAc,CAAd;AAAX,GAFmB,CAAJ,CAAnB;AAKA,sBACI,6BAAC,cAAD;AACI,IAAA,SAAS,EAAE,CADf;AAEI,IAAA,KAAK,EAAE,iBAAI,CACPa,MAAM,CAAClB,IADA,EAEPa,WAAW,GAAGK,MAAM,CAACX,MAAV,GAAmBsB,SAFvB,EAGPb,KAHO,CAAJ;AAFX,KAOQC,UAPR,gBASI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEH,OADd;AAEI,IAAA,KAAK,EAAE,iBAAI,CACPK,gBADO,CAAJ;AAFX,IATJ,EAgBKN,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IADJ,eAGI,6BAAC,mBAAD;AACI,IAAA,OAAO,EAAEE,aADb;AAEI,IAAA,WAAW,EAAE;AAFjB,kBAII,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEF,WADd;AAEI,IAAA,KAAK,EAAEc;AAFX,IAJJ,CAHJ,CADQ,GAcR,IA9BR,CADJ;AAkCH;;AAAA","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"]}

package/build/commonjs/Tab/Tab.js

@@ -58,13 +58,15 @@ function Tab(props) {
     selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : typo.flag,
     color
   });
+  const pressEffect = selected ? 'none' : 'opacity';
   const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
   const iconElement = icon ? /*#__PURE__*/_react.default.cloneElement(icon, {
     fill: color
   }) : null;
   return /*#__PURE__*/_react.default.createElement(_TabBase.default, _extends({
-    vertical: vertical,
-    style: tabBaseStyle
+    pressEffect: pressEffect,
+    style: tabBaseStyle,
+    vertical: vertical
   }, otherProps), /*#__PURE__*/_react.default.createElement(_Badge.default, {
     children: iconElement,
     invisible: !badgeVisible

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","otherProps","theme","vertical","color","palette","text","hint","tabBaseStyle","fontStyle","selector","typo","h2","button2","flag","iconElement","React","cloneElement","fill"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,MAAMA,MAAM,GAAGC,mBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE,EACF;AACA,QAAIC,sBAASC,EAAT,KAAgB,KAAhB,GAAwB;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAxB,GAA+C,EAAnD;AAFE,GADuB;AAK7BC,EAAAA,OAAO,EAAE;AACLC,IAAAA,SAAS,EAAE;AADN,GALoB;AAQ7BC,EAAAA,SAAS,EAAE;AACPD,IAAAA,SAAS,EAAE;AADJ,GARkB;AAW7BE,EAAAA,gBAAgB,EAAE;AACdF,IAAAA,SAAS,EAAE;AADG;AAXW,CAAlB,CAAf;;AAgBe,SAASG,GAAT,CAAaC,KAAb,EAA8B;AACzC,QAAM;AACFC,IAAAA,YAAY,GAAG,KADb;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,eAHE;AAIFC,IAAAA,IAAI,EAAEC,WAJJ;AAKFC,IAAAA,QALE;AAMFC,IAAAA,YANE;AAOFC,IAAAA,OAAO,GAAG,SAPR;AAQFC,IAAAA,KARE;AASF,OAAGC;AATD,MAUFV,KAVJ;AAYA,QAAMW,KAAK,GAAG,uBAAd;AAEA,QAAMC,QAAQ,GAAGJ,OAAO,KAAK,mBAA7B;AAEA,QAAMK,KAAK,GAAGP,QAAQ,GAAGK,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBpB,OAAtB,GAAgCgB,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;AAEA,QAAMC,YAAY,GAAG,iBAAI,CACrB7B,MAAM,CAACG,IADc,EAErBiB,OAAO,KAAK,SAAZ,GACMpB,MAAM,CAACO,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BpB,MAAM,CAACS,SAAjC,GAA6CT,MAAM,CAACU,gBAJtC,EAKrBW,KALqB,CAAJ,CAArB;AAQA,QAAMS,SAAS,GAAG,6BAAgBP,KAAhB,EAAuB;AACrCQ,IAAAA,QAAQ,EAAGC,IAAD,IAAUZ,OAAO,KAAK,SAAZ,GACdY,IAAI,CAACC,EADS,GAEbb,OAAO,KAAK,WAAZ,GAA0BY,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;AAIrCV,IAAAA;AAJqC,GAAvB,CAAlB;AAOA,QAAMT,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;AACA,QAAMmB,WAAW,GAAGpB,IAAI,gBAAGqB,eAAMC,YAAN,CAAmBtB,IAAnB,EAAyB;AAAEuB,IAAAA,IAAI,EAAEd;AAAR,GAAzB,CAAH,GAA+C,IAAvE;AAEA,sBACI,6BAAC,gBAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,KAAK,EAAEK;AAFX,KAGQP,UAHR,gBAKI,6BAAC,cAAD;AACI,IAAA,QAAQ,EAAEc,WADd;AAEI,IAAA,SAAS,EAAE,CAACvB;AAFhB,IALJ,eAUI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEC,QADd;AAEI,IAAA,KAAK,EAAE,iBAAIgB,SAAJ;AAFX,IAVJ,EAeKf,eAAe,gBAAG,6BAAC,qBAAD,OAAH,GAAqB,IAfzC,CADJ;AAmBH;;AAAA","sourcesContent":["import React from 'react';\nimport { Platform, Text } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    primary: {\n        minHeight: 48,\n    },\n    secondary: {\n        minHeight: 48,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator,\n        icon: defaultIcon,\n        selected,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'primary'\n            ? styles.primary\n            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;\n\n    return (\n        <TabBase\n            vertical={vertical}\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n\n            {enableIndicator ? <TabIndicator/> : null}\n        </TabBase>\n    );\n};\n"]}
+{"version":3,"sources":["Tab.tsx"],"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","otherProps","theme","vertical","color","palette","text","hint","tabBaseStyle","fontStyle","selector","typo","h2","button2","flag","pressEffect","iconElement","React","cloneElement","fill"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,MAAMA,MAAM,GAAGC,mBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE,EACF;AACA,QAAIC,sBAASC,EAAT,KAAgB,KAAhB,GAAwB;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAxB,GAA+C,EAAnD;AAFE,GADuB;AAK7BC,EAAAA,OAAO,EAAE;AACLC,IAAAA,SAAS,EAAE;AADN,GALoB;AAQ7BC,EAAAA,SAAS,EAAE;AACPD,IAAAA,SAAS,EAAE;AADJ,GARkB;AAW7BE,EAAAA,gBAAgB,EAAE;AACdF,IAAAA,SAAS,EAAE;AADG;AAXW,CAAlB,CAAf;;AAgBe,SAASG,GAAT,CAAaC,KAAb,EAA8B;AACzC,QAAM;AACFC,IAAAA,YAAY,GAAG,KADb;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,eAHE;AAIFC,IAAAA,IAAI,EAAEC,WAJJ;AAKFC,IAAAA,QALE;AAMFC,IAAAA,YANE;AAOFC,IAAAA,OAAO,GAAG,SAPR;AAQFC,IAAAA,KARE;AASF,OAAGC;AATD,MAUFV,KAVJ;AAYA,QAAMW,KAAK,GAAG,uBAAd;AAEA,QAAMC,QAAQ,GAAGJ,OAAO,KAAK,mBAA7B;AAEA,QAAMK,KAAK,GAAGP,QAAQ,GAAGK,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBpB,OAAtB,GAAgCgB,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;AAEA,QAAMC,YAAY,GAAG,iBAAI,CACrB7B,MAAM,CAACG,IADc,EAErBiB,OAAO,KAAK,SAAZ,GACMpB,MAAM,CAACO,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BpB,MAAM,CAACS,SAAjC,GAA6CT,MAAM,CAACU,gBAJtC,EAKrBW,KALqB,CAAJ,CAArB;AAQA,QAAMS,SAAS,GAAG,6BAAgBP,KAAhB,EAAuB;AACrCQ,IAAAA,QAAQ,EAAGC,IAAD,IAAUZ,OAAO,KAAK,SAAZ,GACdY,IAAI,CAACC,EADS,GAEbb,OAAO,KAAK,WAAZ,GAA0BY,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;AAIrCV,IAAAA;AAJqC,GAAvB,CAAlB;AAOA,QAAMW,WAAW,GAAGlB,QAAQ,GAAG,MAAH,GAAY,SAAxC;AAEA,QAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;AACA,QAAMoB,WAAW,GAAGrB,IAAI,gBAAGsB,eAAMC,YAAN,CAAmBvB,IAAnB,EAAyB;AAAEwB,IAAAA,IAAI,EAAEf;AAAR,GAAzB,CAAH,GAA+C,IAAvE;AAEA,sBACI,6BAAC,gBAAD;AACI,IAAA,WAAW,EAAEW,WADjB;AAEI,IAAA,KAAK,EAAEP,YAFX;AAGI,IAAA,QAAQ,EAAEL;AAHd,KAIQF,UAJR,gBAMI,6BAAC,cAAD;AACI,IAAA,QAAQ,EAAEe,WADd;AAEI,IAAA,SAAS,EAAE,CAACxB;AAFhB,IANJ,eAWI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEC,QADd;AAEI,IAAA,KAAK,EAAE,iBAAIgB,SAAJ;AAFX,IAXJ,EAgBKf,eAAe,gBAAG,6BAAC,qBAAD,OAAH,GAAqB,IAhBzC,CADJ;AAoBH;;AAAA","sourcesContent":["import React from 'react';\nimport { Platform, Text } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    primary: {\n        minHeight: 48,\n    },\n    secondary: {\n        minHeight: 48,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator,\n        icon: defaultIcon,\n        selected,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'primary'\n            ? styles.primary\n            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n\n            {enableIndicator ? <TabIndicator/> : null}\n        </TabBase>\n    );\n};\n"]}

package/build/commonjs/Tooltip/Tooltip.js

@@ -59,7 +59,7 @@ function Tooltip(props) {
     }]
   }));
 
-  const [r, g, b] = (0, _utils.rgb)(theme.palette.tertiary.main);
+  const [r, g, b] = (0, _utils.rgb)(theme.palette.primary.main);
   const totalVerticalOffset = -(layout.height + verticalOffset);
   const tooltipLayoutStyle = {
     alignItems: 'center',
@@ -87,13 +87,14 @@ function Tooltip(props) {
   };
   const fontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typo => typo.caption2,
-    color: theme.palette.tertiary.contrastTextColor
+    color: theme.palette.primary.contrastTextColor
   });
   const textStyle = (0, _styles.css)([fontStyle, {
     marginRight: theme.spacing(2)
   }]);
 
   const buttonElem = /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TouchableWithoutFeedback, {
+    disallowInterruption: true,
     onPress: onClose
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: (0, _styles.css)(touchableStyle)
@@ -103,14 +104,14 @@ function Tooltip(props) {
     numberOfLines: 1,
     style: textStyle
   }), /*#__PURE__*/_react.default.createElement(_icons.Close, {
-    fill: theme.palette.tertiary.contrastTextColor,
+    fill: theme.palette.primary.contrastTextColor,
     width: 20,
     height: 20
   })));
 
   const arrowElem = /*#__PURE__*/_react.default.createElement(_UpArrow.default, {
     upsideDown: placement === 'top',
-    fill: theme.palette.tertiary.main,
+    fill: theme.palette.primary.main,
     opacity: defaultOpacity
   });
 

package/build/commonjs/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tooltip.tsx"],"names":["defaultOpacity","initialLayout","width","height","x","y","animationTimingConfig","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","React","useState","scale","Animated","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","palette","tertiary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { TouchableWithoutFeedback } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst defaultOpacity = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = React.useState(initialLayout);\n\n    const scale = Animated.useSharedValue(0);\n\n    const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }));\n\n    const [r, g, b] = rgb(theme.palette.tertiary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    React.useEffect(() => {\n        const nextValue = visible ? 1 : 0;\n\n        scale.value = Animated.withTiming(nextValue, animationTimingConfig);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.tertiary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const buttonElem = (\n        <TouchableWithoutFeedback onPress={onClose}>\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={1}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.tertiary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </TouchableWithoutFeedback>\n    );\n\n    const arrowElem = (\n        <UpArrow\n            upsideDown={placement === 'top'}\n            fill={theme.palette.tertiary.main}\n            opacity={defaultOpacity}\n        />\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    tooltipAnimatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Tooltip.tsx"],"names":["defaultOpacity","initialLayout","width","height","x","y","animationTimingConfig","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","React","useState","scale","Animated","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;AAEA,MAAMA,cAAc,GAAG,GAAvB;AACA,MAAMC,aAAa,GAAG;AAAEC,EAAAA,KAAK,EAAE,CAAT;AAAYC,EAAAA,MAAM,EAAE,CAApB;AAAuBC,EAAAA,CAAC,EAAE,CAA1B;AAA6BC,EAAAA,CAAC,EAAE;AAAhC,CAAtB;AAEA,MAAMC,qBAAgD,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzD;;AAEe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;AACjD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,IAFE;AAGFC,IAAAA,OAHE;AAIFC,IAAAA,SAAS,GAAG,KAJV;AAKFC,IAAAA,KALE;AAMFC,IAAAA,KANE;AAOFC,IAAAA,KAPE;AAQFC,IAAAA,YARE;AASFC,IAAAA,cAAc,GAAG,CATf;AAUFC,IAAAA,OAAO,GAAG;AAVR,MAWFV,KAXJ;AAaA,QAAMW,KAAK,GAAG,uBAAd;;AAEA,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBC,eAAMC,QAAN,CAAevB,aAAf,CAA5B;;AAEA,QAAMwB,KAAK,GAAGC,+BAASC,cAAT,CAAwB,CAAxB,CAAd;;AAEA,QAAMC,oBAAoB,GAAGF,+BAASG,gBAAT,CAA0B,OAAO;AAC1DC,IAAAA,SAAS,EAAE,CAAC;AAAEL,MAAAA,KAAK,EAAEA,KAAK,CAACM;AAAf,KAAD;AAD+C,GAAP,CAA1B,CAA7B;;AAIA,QAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAY,gBAAId,KAAK,CAACe,OAAN,CAAcC,OAAd,CAAsBC,IAA1B,CAAlB;AAEA,QAAMC,mBAAmB,GAAG,EAAEjB,MAAM,CAAClB,MAAP,GAAgBe,cAAlB,CAA5B;AACA,QAAMqB,kBAAsC,GAAG;AAC3CC,IAAAA,UAAU,EAAE,QAD+B;AAE3CC,IAAAA,MAAM,EAAE5B,SAAS,KAAK,QAAd,GAAyByB,mBAAzB,GAA+CI,SAFZ;AAG3C/B,IAAAA,IAH2C;AAI3CgC,IAAAA,QAAQ,EAAE,UAJiC;AAK3C7B,IAAAA,KAL2C;AAM3C8B,IAAAA,GAAG,EAAE/B,SAAS,KAAK,KAAd,GAAsByB,mBAAtB,GAA4CI,SANN;AAO3CG,IAAAA,MAAM,EAAEzB,KAAK,CAACyB,MAAN,CAAaC,OAPsB;AAQ3C3C,IAAAA,MAAM,EAAEgB,OAAO,GAAGuB,SAAH,GAAe,CARa;AAS3CK,IAAAA,QAAQ,EAAE5B,OAAO,GAAGuB,SAAH,GAAe;AATW,GAA/C;;AAYAnB,iBAAMyB,SAAN,CAAgB,MAAM;AAClB,UAAMC,SAAS,GAAG9B,OAAO,GAAG,CAAH,GAAO,CAAhC;AAEAM,IAAAA,KAAK,CAACM,KAAN,GAAcL,+BAASwB,UAAT,CAAoBD,SAApB,EAA+B3C,qBAA/B,CAAd;AACH,GAJD,EAIG,CAACa,OAAD,CAJH;;AAMA,QAAMgC,cAAkC,GAAG;AACvCX,IAAAA,UAAU,EAAE,QAD2B;AAEvCY,IAAAA,eAAe,EAAG,QAAOpB,CAAE,KAAIC,CAAE,KAAIC,CAAE,KAAIlC,cAAe,GAFnB;AAGvCqD,IAAAA,YAAY,EAAEjC,KAAK,CAACkC,KAAN,CAAYC,SAHa;AAIvCC,IAAAA,aAAa,EAAE,KAJwB;AAKvCC,IAAAA,OAAO,EAAErC,KAAK,CAACsC,OAAN,CAAc,CAAd;AAL8B,GAA3C;AAQA,QAAMC,SAAS,GAAG,6BAAgBvC,KAAhB,EAAuB;AACrCwC,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;AAErCC,IAAAA,KAAK,EAAE3C,KAAK,CAACe,OAAN,CAAcC,OAAd,CAAsB4B;AAFQ,GAAvB,CAAlB;AAKA,QAAMC,SAAS,GAAG,iBAAI,CAClBN,SADkB,EAElB;AAAEO,IAAAA,WAAW,EAAE9C,KAAK,CAACsC,OAAN,CAAc,CAAd;AAAf,GAFkB,CAAJ,CAAlB;;AAKA,QAAMS,UAAU,gBACZ,6BAAC,mDAAD;AACI,IAAA,oBAAoB,EAAE,IAD1B;AAEI,IAAA,OAAO,EAAEvD;AAFb,kBAII,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,iBAAIuC,cAAJ;AAAb,kBACI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEnC,KADd,CAEI;AAFJ;AAGI,IAAA,aAAa,EAAE,CAHnB;AAII,IAAA,KAAK,EAAEiD;AAJX,IADJ,eAOI,6BAAC,YAAD;AACI,IAAA,IAAI,EAAE7C,KAAK,CAACe,OAAN,CAAcC,OAAd,CAAsB4B,iBADhC;AAEI,IAAA,KAAK,EAAE,EAFX;AAGI,IAAA,MAAM,EAAE;AAHZ,IAPJ,CAJJ,CADJ;;AAqBA,QAAMI,SAAS,gBACX,6BAAC,gBAAD;AACI,IAAA,UAAU,EAAEvD,SAAS,KAAK,KAD9B;AAEI,IAAA,IAAI,EAAEO,KAAK,CAACe,OAAN,CAAcC,OAAd,CAAsBC,IAFhC;AAGI,IAAA,OAAO,EAAErC;AAHb,IADJ;;AAQA,sBACI,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEe;AAAb,KACKL,QADL,eAGI,6BAAC,8BAAD,CAAU,IAAV;AACI,IAAA,QAAQ,EAAG2D,KAAD,IAAW/C,SAAS,CAAC+C,KAAK,CAACC,WAAN,CAAkBjD,MAAnB,CADlC;AAEI,IAAA,KAAK,EAAE,CACHO,oBADG,EAEHW,kBAFG,EAGHtB,YAHG;AAFX,KAQKJ,SAAS,KAAK,KAAd,gBACG,6BAAC,cAAD,CAAO,QAAP,QACKsD,UADL,EAEKC,SAFL,CADH,gBAMG,6BAAC,cAAD,CAAO,QAAP,QACKA,SADL,EAEKD,UAFL,CAdR,CAHJ,CADJ;AA0BH;;AAAA","sourcesContent":["import React from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { TouchableWithoutFeedback } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst defaultOpacity = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = React.useState(initialLayout);\n\n    const scale = Animated.useSharedValue(0);\n\n    const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }));\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    React.useEffect(() => {\n        const nextValue = visible ? 1 : 0;\n\n        scale.value = Animated.withTiming(nextValue, animationTimingConfig);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const buttonElem = (\n        <TouchableWithoutFeedback\n            disallowInterruption={true}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={1}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </TouchableWithoutFeedback>\n    );\n\n    const arrowElem = (\n        <UpArrow\n            upsideDown={placement === 'top'}\n            fill={theme.palette.primary.main}\n            opacity={defaultOpacity}\n        />\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    tooltipAnimatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"]}

package/build/commonjs/Typography/Typography.js

@@ -80,8 +80,7 @@ const styles = _styles.StyleSheet.create({
   root: {
     flexShrink: 1,
     ...(_reactNative.Platform.OS === 'web' ? {
-      maxWidth: '100%',
-      wordWrap: 'normal'
+      maxWidth: '100%'
     } : {})
   }
 });
@@ -103,10 +102,14 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
   const fontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typography => typography[variant],
     color: selectColor(theme, colorProp)
-  });
+  }); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
+
+  const textWrapStyle = numberOfLines && numberOfLines > 0 && _reactNative.Platform.OS === 'web' ? {
+    wordWrap: 'normal'
+  } : {};
   const textStyle = (0, _styles.css)([styles.root, {
     textAlign: align === 'inherit' ? 'auto' : align
-  }, fontStyle, style]);
+  }, textWrapStyle, fontStyle, style]);
   const accessibility = accessibilityMap[variant];
   const accessibilityRole = href !== undefined ? 'link' : accessibility === null || accessibility === void 0 ? void 0 : accessibility.accessibilityRole;
   return /*#__PURE__*/_react.default.createElement(_reactNative.Text, {