@fountain-ui/core 1.10.0 → 1.11.3

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.11.3](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.11.3) (2021-10-06)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+## [1.11.2](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.11.2) (2021-10-01)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+## [1.11.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.11.1) (2021-09-29)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+# [1.11.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.7.0...@fountain-ui/core@1.11.0) (2021-09-27)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
 # [1.10.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.7.0...@fountain-ui/core@1.10.0) (2021-09-27)
 
 **Note:** Version bump only for package @fountain-ui/core

package/build/commonjs/Accordion/Accordion.js

@@ -17,14 +17,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const useStyles = function () {
-  return {
-    buttonBase: {
-      flexDirection: 'row'
-    }
-  };
-};
-
 const ANIMATION_OPTION = {
   duration: 250
 };
@@ -37,6 +29,17 @@ function Accordion(props) {
     title,
     titleVariant = 'subtitle2'
   } = props;
+  const theme = (0, _index.useTheme)();
+
+  const useStyles = function () {
+    return {
+      buttonBase: {
+        flexDirection: 'row',
+        paddingVertical: theme.spacing(3)
+      }
+    };
+  };
+
   const styles = useStyles();
   const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
   const sharedRotate = (0, _reactNativeReanimated.useSharedValue)(0);

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

@@ -1 +1 @@
-{"version":3,"sources":["Accordion.tsx"],"names":["useStyles","buttonBase","flexDirection","ANIMATION_OPTION","duration","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","sharedRotate","animatedChevronDownStyles","rotate","value","transform","onPress","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAWA,MAAMA,SAAqC,GAAG,YAA6B;AACvE,SAAO;AACHC,IAAAA,UAAU,EAAE;AAAEC,MAAAA,aAAa,EAAE;AAAjB;AADT,GAAP;AAGH,CAJD;;AAMA,MAAMC,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEe,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,GAAGZ,SAAS,EAAxB;AACA,QAAM,CAACa,UAAD,EAAaC,aAAb,IAA8B,qBAAS,KAAT,CAApC;AAEA,QAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AACA,QAAMC,yBAAyB,GAAG,6CAAiB,MAAM;AACrD,UAAMC,MAAM,GAAGJ,UAAU,GAAG,GAAH,GAAS,CAAlC;AACAE,IAAAA,YAAY,CAACG,KAAb,GAAqB,uCAAWD,MAAX,EAAmBd,gBAAnB,CAArB;AAEA,WAAO;AACHgB,MAAAA,SAAS,EAAE,CAAC;AAAEF,QAAAA,MAAM,EAAG,GAAEF,YAAY,CAACG,KAAM;AAAhC,OAAD;AADR,KAAP;AAGH,GAPiC,CAAlC;;AASA,QAAME,OAAO,GAAG,MAAM;AAClBN,IAAAA,aAAa,CAAC,CAACD,UAAF,CAAb;AACH,GAFD;;AAIA,sBACI,6BAAC,aAAD,qBACI,6BAAC,iBAAD;AACI,IAAA,OAAO,EAAEO,OADb;AAEI,IAAA,KAAK,EAAER,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,EAAEK;AAAtB,KACKP,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,4BAAMQ,cAAN,CAAqBd,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, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport {\n    ButtonBase,\n    Column,\n    Divider,\n    Spacer,\n    Typography,\n} from '../index';\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'buttonBase'>;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    return {\n        buttonBase: { flexDirection: 'row' },\n    };\n};\n\nconst ANIMATION_OPTION = { duration: 250 };\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    const [isExpanded, setIsExpanded] = useState(false);\n\n    const sharedRotate = useSharedValue(0);\n    const animatedChevronDownStyles = useAnimatedStyle(() => {\n        const rotate = isExpanded ? 180 : 0;\n        sharedRotate.value = withTiming(rotate, ANIMATION_OPTION);\n\n        return {\n            transform: [{ rotate: `${sharedRotate.value}deg` }],\n        };\n    });\n\n    const onPress = () => {\n        setIsExpanded(!isExpanded);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.buttonBase}\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","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","theme","useStyles","buttonBase","flexDirection","paddingVertical","spacing","styles","isExpanded","setIsExpanded","sharedRotate","animatedChevronDownStyles","rotate","value","transform","onPress","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEe,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;AAOA,QAAMM,KAAK,GAAG,sBAAd;;AAEA,QAAMC,SAAqC,GAAG,YAA6B;AACvE,WAAO;AACHC,MAAAA,UAAU,EAAE;AACRC,QAAAA,aAAa,EAAE,KADP;AAERC,QAAAA,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd;AAFT;AADT,KAAP;AAMH,GAPD;;AASA,QAAMC,MAAM,GAAGL,SAAS,EAAxB;AACA,QAAM,CAACM,UAAD,EAAaC,aAAb,IAA8B,qBAAS,KAAT,CAApC;AAEA,QAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AACA,QAAMC,yBAAyB,GAAG,6CAAiB,MAAM;AACrD,UAAMC,MAAM,GAAGJ,UAAU,GAAG,GAAH,GAAS,CAAlC;AACAE,IAAAA,YAAY,CAACG,KAAb,GAAqB,uCAAWD,MAAX,EAAmBpB,gBAAnB,CAArB;AAEA,WAAO;AACHsB,MAAAA,SAAS,EAAE,CAAC;AAAEF,QAAAA,MAAM,EAAG,GAAEF,YAAY,CAACG,KAAM;AAAhC,OAAD;AADR,KAAP;AAGH,GAPiC,CAAlC;;AASA,QAAME,OAAO,GAAG,MAAM;AAClBN,IAAAA,aAAa,CAAC,CAACD,UAAF,CAAb;AACH,GAFD;;AAIA,sBACI,6BAAC,aAAD,qBACI,6BAAC,iBAAD;AACI,IAAA,OAAO,EAAEO,OADb;AAEI,IAAA,KAAK,EAAER,MAAM,CAACJ;AAFlB,KAIKN,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,EAAEW;AAAtB,KACKb,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,+BAAC,kBAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKU,UAAU,GACP,4BAAMQ,cAAN,CAAqBpB,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, { useAnimatedStyle, useSharedValue, withTiming } 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<'buttonBase'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n    const theme = useTheme();\n\n    const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n        return {\n            buttonBase: {\n                flexDirection: 'row',\n                paddingVertical: theme.spacing(3),\n            },\n        };\n    };\n\n    const styles = useStyles();\n    const [isExpanded, setIsExpanded] = useState(false);\n\n    const sharedRotate = useSharedValue(0);\n    const animatedChevronDownStyles = useAnimatedStyle(() => {\n        const rotate = isExpanded ? 180 : 0;\n        sharedRotate.value = withTiming(rotate, ANIMATION_OPTION);\n\n        return {\n            transform: [{ rotate: `${sharedRotate.value}deg` }],\n        };\n    });\n\n    const onPress = () => {\n        setIsExpanded(!isExpanded);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.buttonBase}\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

@@ -13,6 +13,8 @@ var _hooks = require("../hooks");
 
 var _animated = require("../animated");
 
+var _styles = require("../styles");
+
 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); }
@@ -26,6 +28,15 @@ const animationTimingConfig = {
   duration: 150
 };
 
+const styles = _styles.StyleSheet.create({
+  disabled: {
+    opacity: DISABLED_OPACITY,
+    transform: [{
+      scale: ORIGINAL_SCALE
+    }]
+  }
+});
+
 function ButtonBase(props) {
   const {
     children,
@@ -47,13 +58,13 @@ function ButtonBase(props) {
   const scale = _reactNativeReanimated.default.useSharedValue(ORIGINAL_SCALE);
 
   const animatedStyle = _reactNativeReanimated.default.useAnimatedStyle(() => ({
-    opacity: disabled ? DISABLED_OPACITY : opacity.value,
+    opacity: opacity.value,
     transform: [{
-      scale: disabled ? ORIGINAL_SCALE : scale.value
+      scale: scale.value
     }]
   }));
 
-  const startAnimation = _react.default.useCallback((pressIn, isHovered = false) => {
+  const startAnimation = (pressIn, isHovered = false) => {
     if (pressEffect === 'none') {
       return;
     }
@@ -71,14 +82,14 @@ function ButtonBase(props) {
         scale.value = _reactNativeReanimated.default.withTiming(ORIGINAL_SCALE, animationTimingConfig);
       }
     }
-  }, [pressEffect]);
+  };
 
   return /*#__PURE__*/_react.default.createElement(_animated.AnimatedPressable, _extends({
     disabled: disabled,
     onPress: handlePress,
     onPressIn: () => startAnimation(true),
     onPressOut: () => startAnimation(false),
-    style: [animatedStyle, style]
+    style: [animatedStyle, disabled ? styles.disabled : undefined, style]
   }, otherProps), typeof children !== 'function' ? ({
     hovered
   }) => {

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","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","opacity","Animated","useSharedValue","scale","animatedStyle","useAnimatedStyle","value","transform","startAnimation","React","useCallback","pressIn","isHovered","withTiming","withDelay","hovered","undefined"],"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 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\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: disabled ? DISABLED_OPACITY : opacity.value,\n        transform: [{ scale: disabled ? ORIGINAL_SCALE : scale.value }],\n    }));\n\n    const startAnimation = React.useCallback((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    }, [pressEffect]);\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={() => startAnimation(true)}\n            onPressOut={() => startAnimation(false)}\n            style={[animatedStyle, style]}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined) {\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","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) {\n                        startAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"]}

package/build/commonjs/Link/Link.js

@@ -40,6 +40,10 @@ function Link(props) {
   const styles = useStyles();
 
   const handlePress = async event => {
+    if (_reactNative.Platform.OS === 'web') {
+      event.preventDefault();
+    }
+
     if (onPress) {
       onPress(event);
       return;
@@ -52,7 +56,7 @@ function Link(props) {
 
   return /*#__PURE__*/_react.default.createElement(_Pressable.default, {
     disabled: disabled,
-    onPress: handlePress,
+    onPress: _reactNative.Platform.OS === 'web' ? undefined : handlePress,
     style: (0, _styles.css)([styles.root, style])
   }, ({
     hovered
@@ -60,7 +64,8 @@ function Link(props) {
     const underlineStyle = underline === 'always' || underline === 'hover' && hovered ? styles.underline : undefined;
     return /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({
       href: href,
-      style: underlineStyle
+      style: underlineStyle,
+      onPress: _reactNative.Platform.OS === 'web' ? handlePress : undefined
     }, otherProps));
   });
 }

package/build/commonjs/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Link.tsx"],"names":["useStyles","root","underline","textDecorationLine","Link","props","disabled","href","onPress","style","otherProps","styles","handlePress","event","Linking","canOpenURL","openURL","hovered","underlineStyle","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAgC,GAAG,YAAwB;AAC7D,SAAO;AACHC,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,SAAS,EAAE;AACPC,MAAAA,kBAAkB,EAAE;AADb;AAFR,GAAP;AAMH,CAPD;;AASe,SAASC,IAAT,CAAcC,KAAd,EAAgC;AAC3C,QAAM;AACFC,IAAAA,QAAQ,GAAG,KADT;AAEFC,IAAAA,IAFE;AAGFC,IAAAA,OAHE;AAIFC,IAAAA,KAJE;AAKFP,IAAAA,SAAS,GAAG,QALV;AAMF,OAAGQ;AAND,MAOFL,KAPJ;AASA,QAAMM,MAAM,GAAGX,SAAS,EAAxB;;AAEA,QAAMY,WAAW,GAAG,MAAOC,KAAP,IAAwC;AACxD,QAAIL,OAAJ,EAAa;AACTA,MAAAA,OAAO,CAACK,KAAD,CAAP;AACA;AACH;;AAED,QAAI,MAAMC,qBAAQC,UAAR,CAAmBR,IAAnB,CAAV,EAAoC;AAChC,YAAMO,qBAAQE,OAAR,CAAgBT,IAAhB,CAAN;AACH;AACJ,GATD;;AAWA,sBACI,6BAAC,kBAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,OAAO,EAAEM,WAFb;AAGI,IAAA,KAAK,EAAE,iBAAI,CAACD,MAAM,CAACV,IAAR,EAAcQ,KAAd,CAAJ;AAHX,KAKK,CAAC;AAAEQ,IAAAA;AAAF,GAAD,KAAiB;AACd,UAAMC,cAAc,GAAIhB,SAAS,KAAK,QAAd,IAA2BA,SAAS,KAAK,OAAd,IAAyBe,OAArD,GACjBN,MAAM,CAACT,SADU,GAEjBiB,SAFN;AAIA,wBACI,6BAAC,mBAAD;AACI,MAAA,IAAI,EAAEZ,IADV;AAEI,MAAA,KAAK,EAAEW;AAFX,OAGQR,UAHR,EADJ;AAOH,GAjBL,CADJ;AAqBH;;AAAA","sourcesContent":["import React from 'react';\nimport { GestureResponderEvent, Linking } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Pressable from '../Pressable';\nimport Typography from '../Typography';\nimport { css } from '../styles';\nimport type LinkProps from './LinkProps';\n\ntype LinkStyles = NamedStylesStringUnion<'root' | 'underline'>;\n\nconst useStyles: UseStyles<LinkStyles> = function (): LinkStyles {\n    return {\n        root: {},\n        underline: {\n            textDecorationLine: 'underline',\n        },\n    };\n};\n\nexport default function Link(props: LinkProps) {\n    const {\n        disabled = false,\n        href,\n        onPress,\n        style,\n        underline = 'always',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const handlePress = async (event: GestureResponderEvent) => {\n        if (onPress) {\n            onPress(event);\n            return;\n        }\n\n        if (await Linking.canOpenURL(href)) {\n            await Linking.openURL(href);\n        }\n    };\n\n    return (\n        <Pressable\n            disabled={disabled}\n            onPress={handlePress}\n            style={css([styles.root, style])}\n        >\n            {({ hovered }) => {\n                const underlineStyle = (underline === 'always' || (underline === 'hover' && hovered))\n                    ? styles.underline\n                    : undefined;\n\n                return (\n                    <Typography\n                        href={href}\n                        style={underlineStyle}\n                        {...otherProps}\n                    />\n                );\n            }}\n        </Pressable>\n    );\n};\n"]}
+{"version":3,"sources":["Link.tsx"],"names":["useStyles","root","underline","textDecorationLine","Link","props","disabled","href","onPress","style","otherProps","styles","handlePress","event","Platform","OS","preventDefault","Linking","canOpenURL","openURL","undefined","hovered","underlineStyle"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAgC,GAAG,YAAwB;AAC7D,SAAO;AACHC,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,SAAS,EAAE;AACPC,MAAAA,kBAAkB,EAAE;AADb;AAFR,GAAP;AAMH,CAPD;;AASe,SAASC,IAAT,CAAcC,KAAd,EAAgC;AAC3C,QAAM;AACFC,IAAAA,QAAQ,GAAG,KADT;AAEFC,IAAAA,IAFE;AAGFC,IAAAA,OAHE;AAIFC,IAAAA,KAJE;AAKFP,IAAAA,SAAS,GAAG,QALV;AAMF,OAAGQ;AAND,MAOFL,KAPJ;AASA,QAAMM,MAAM,GAAGX,SAAS,EAAxB;;AAEA,QAAMY,WAAW,GAAG,MAAOC,KAAP,IAAwC;AACxD,QAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACvBF,MAAAA,KAAK,CAACG,cAAN;AACH;;AAED,QAAIR,OAAJ,EAAa;AACTA,MAAAA,OAAO,CAACK,KAAD,CAAP;AACA;AACH;;AAED,QAAI,MAAMI,qBAAQC,UAAR,CAAmBX,IAAnB,CAAV,EAAoC;AAChC,YAAMU,qBAAQE,OAAR,CAAgBZ,IAAhB,CAAN;AACH;AACJ,GAbD;;AAeA,sBACI,6BAAC,kBAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,OAAO,EAAEQ,sBAASC,EAAT,KAAgB,KAAhB,GAAwBK,SAAxB,GAAoCR,WAFjD;AAGI,IAAA,KAAK,EAAE,iBAAI,CAACD,MAAM,CAACV,IAAR,EAAcQ,KAAd,CAAJ;AAHX,KAKK,CAAC;AAAEY,IAAAA;AAAF,GAAD,KAAiB;AACd,UAAMC,cAAc,GAAIpB,SAAS,KAAK,QAAd,IAA2BA,SAAS,KAAK,OAAd,IAAyBmB,OAArD,GACjBV,MAAM,CAACT,SADU,GAEjBkB,SAFN;AAIA,wBACI,6BAAC,mBAAD;AACI,MAAA,IAAI,EAAEb,IADV;AAEI,MAAA,KAAK,EAAEe,cAFX;AAGI,MAAA,OAAO,EAAER,sBAASC,EAAT,KAAgB,KAAhB,GAAwBH,WAAxB,GAAsCQ;AAHnD,OAIQV,UAJR,EADJ;AAQH,GAlBL,CADJ;AAsBH;;AAAA","sourcesContent":["import React from 'react';\nimport { GestureResponderEvent, Linking, Platform } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Pressable from '../Pressable';\nimport Typography from '../Typography';\nimport { css } from '../styles';\nimport type LinkProps from './LinkProps';\n\ntype LinkStyles = NamedStylesStringUnion<'root' | 'underline'>;\n\nconst useStyles: UseStyles<LinkStyles> = function (): LinkStyles {\n    return {\n        root: {},\n        underline: {\n            textDecorationLine: 'underline',\n        },\n    };\n};\n\nexport default function Link(props: LinkProps) {\n    const {\n        disabled = false,\n        href,\n        onPress,\n        style,\n        underline = 'always',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const handlePress = async (event: GestureResponderEvent) => {\n        if (Platform.OS === 'web') {\n            event.preventDefault();\n        }\n\n        if (onPress) {\n            onPress(event);\n            return;\n        }\n\n        if (await Linking.canOpenURL(href)) {\n            await Linking.openURL(href);\n        }\n    };\n\n    return (\n        <Pressable\n            disabled={disabled}\n            onPress={Platform.OS === 'web' ? undefined : handlePress}\n            style={css([styles.root, style])}\n        >\n            {({ hovered }) => {\n                const underlineStyle = (underline === 'always' || (underline === 'hover' && hovered))\n                    ? styles.underline\n                    : undefined;\n\n                return (\n                    <Typography\n                        href={href}\n                        style={underlineStyle}\n                        onPress={Platform.OS === 'web' ? handlePress : undefined}\n                        {...otherProps}\n                    />\n                );\n            }}\n        </Pressable>\n    );\n};\n"]}

package/build/commonjs/SvgIcon/SvgIcon.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNativeSvg = _interopRequireDefault(require("react-native-svg"));
 
+var _styles = require("../styles");
+
 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); }
@@ -17,13 +19,18 @@ function SvgIcon(props) {
   const {
     fill = '#000',
     height = 24,
+    style: styleProp,
     viewBox = '0 0 20 20',
     width = 24,
     ...otherProps
   } = props;
+  const style = (0, _styles.css)([{
+    flexShrink: 0
+  }, styleProp]);
   return /*#__PURE__*/_react.default.createElement(_reactNativeSvg.default, _extends({
     fill: fill,
     height: height,
+    style: style,
     viewBox: viewBox,
     width: width
   }, otherProps));

package/build/commonjs/SvgIcon/SvgIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SvgIcon.tsx"],"names":["SvgIcon","props","fill","height","viewBox","width","otherProps"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAGe,SAASA,OAAT,CAAiBC,KAAjB,EAAsC;AACjD,QAAM;AACFC,IAAAA,IAAI,GAAG,MADL;AAEFC,IAAAA,MAAM,GAAG,EAFP;AAGFC,IAAAA,OAAO,GAAG,WAHR;AAIFC,IAAAA,KAAK,GAAG,EAJN;AAKF,OAAGC;AALD,MAMYL,KANlB;AAQA,sBACI,6BAAC,uBAAD;AACI,IAAA,IAAI,EAAEC,IADV;AAEI,IAAA,MAAM,EAAEC,MAFZ;AAGI,IAAA,OAAO,EAAEC,OAHb;AAII,IAAA,KAAK,EAAEC;AAJX,KAKQC,UALR,EADJ;AASH;;AAAA","sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport type SvgIconProps from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        fill = '#000',\n        height = 24,\n        viewBox = '0 0 20 20',\n        width = 24,\n        ...otherProps\n    }: SvgIconProps = props;\n\n    return (\n        <Svg\n            fill={fill}\n            height={height}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};\n"]}
+{"version":3,"sources":["SvgIcon.tsx"],"names":["SvgIcon","props","fill","height","style","styleProp","viewBox","width","otherProps","flexShrink"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGe,SAASA,OAAT,CAAiBC,KAAjB,EAAsC;AACjD,QAAM;AACFC,IAAAA,IAAI,GAAG,MADL;AAEFC,IAAAA,MAAM,GAAG,EAFP;AAGFC,IAAAA,KAAK,EAAEC,SAHL;AAIFC,IAAAA,OAAO,GAAG,WAJR;AAKFC,IAAAA,KAAK,GAAG,EALN;AAMF,OAAGC;AAND,MAOYP,KAPlB;AASA,QAAMG,KAAK,GAAG,iBAAI,CACd;AAAEK,IAAAA,UAAU,EAAG;AAAf,GADc,EAEdJ,SAFc,CAAJ,CAAd;AAKA,sBACI,6BAAC,uBAAD;AACI,IAAA,IAAI,EAAEH,IADV;AAEI,IAAA,MAAM,EAAEC,MAFZ;AAGI,IAAA,KAAK,EAAEC,KAHX;AAII,IAAA,OAAO,EAAEE,OAJb;AAKI,IAAA,KAAK,EAAEC;AALX,KAMQC,UANR,EADJ;AAUH;;AAAA","sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport { css } from '../styles';\nimport type SvgIconProps from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        fill = '#000',\n        height = 24,\n        style: styleProp,\n        viewBox = '0 0 20 20',\n        width = 24,\n        ...otherProps\n    }: SvgIconProps = props;\n\n    const style = css([\n        { flexShrink : 0 },\n        styleProp,\n    ]);\n\n    return (\n        <Svg\n            fill={fill}\n            height={height}\n            style={style}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};"]}

package/build/commonjs/Tab/Tab.js

@@ -60,10 +60,10 @@ function Tab(props) {
   return /*#__PURE__*/_react.default.createElement(_TabBase.default, _extends({
     vertical: vertical,
     style: tabBaseStyle
-  }, otherProps), iconElement && badgeVisible ? /*#__PURE__*/_react.default.createElement(_Badge.default, {
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_Badge.default, {
     children: iconElement,
-    invisible: false
-  }) : iconElement, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    invisible: !badgeVisible
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: children,
     style: (0, _styles.css)(fontStyle)
   }), enableIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, null) : null);

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["styles","StyleSheet","create","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,OAAO,EAAE;AACLC,IAAAA,SAAS,EAAE;AADN,GADoB;AAI7BC,EAAAA,SAAS,EAAE;AACPD,IAAAA,SAAS,EAAE;AADJ,GAJkB;AAO7BE,EAAAA,gBAAgB,EAAE;AACdF,IAAAA,SAAS,EAAE;AADG;AAPW,CAAlB,CAAf;;AAYe,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,CACrBT,OAAO,KAAK,SAAZ,GACMhB,MAAM,CAACG,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BhB,MAAM,CAACK,SAAjC,GAA6CL,MAAM,CAACM,gBAHtC,EAIrBW,KAJqB,CAAJ,CAArB;AAOA,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,GAKKc,WAAW,IAAIvB,YAAf,gBACG,6BAAC,cAAD;AACI,IAAA,QAAQ,EAAEuB,WADd;AAEI,IAAA,SAAS,EAAE;AAFf,IADH,GAKGA,WAVR,eAYI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEtB,QADd;AAEI,IAAA,KAAK,EAAE,iBAAIgB,SAAJ;AAFX,IAZJ,EAiBKf,eAAe,gBAAG,6BAAC,qBAAD,OAAH,GAAqB,IAjBzC,CADJ;AAqBH;;AAAA","sourcesContent":["import React from 'react';\nimport { 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    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        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            {iconElement && badgeVisible ? (\n                <Badge\n                    children={iconElement}\n                    invisible={false}\n                />\n            ) : iconElement}\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","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,OAAO,EAAE;AACLC,IAAAA,SAAS,EAAE;AADN,GADoB;AAI7BC,EAAAA,SAAS,EAAE;AACPD,IAAAA,SAAS,EAAE;AADJ,GAJkB;AAO7BE,EAAAA,gBAAgB,EAAE;AACdF,IAAAA,SAAS,EAAE;AADG;AAPW,CAAlB,CAAf;;AAYe,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,CACrBT,OAAO,KAAK,SAAZ,GACMhB,MAAM,CAACG,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BhB,MAAM,CAACK,SAAjC,GAA6CL,MAAM,CAACM,gBAHtC,EAIrBW,KAJqB,CAAJ,CAArB;AAOA,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 { 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    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        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"]}

package/build/commonjs/Typography/Typography.js

@@ -58,7 +58,7 @@ function selectColor(theme, colorProp) {
 
   switch (colorProp) {
     case 'inherit':
-      return undefined;
+      return _reactNative.Platform.OS === 'web' ? 'inherit' : undefined;
 
     case 'textPrimary':
       return palette.primary;

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

@@ -1 +1 @@
-{"version":3,"sources":["Typography.tsx"],"names":["accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","undefined","primary","secondary","accent","hint","main","Typography","React","forwardRef","props","ref","align","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","fontStyle","selector","typography","textStyle","textAlign","flexShrink","accessibility","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    h1: { accessibilityRole: 'header', 'area-level': 1 },\n    h2: { accessibilityRole: 'header', 'area-level': 2 },\n    h3: { accessibilityRole: 'header', 'area-level': 3 },\n    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n    body1: { accessibilityRole: 'text' },\n    body2: { accessibilityRole: 'text' },\n    caption1: { accessibilityRole: 'text' },\n    caption2: { accessibilityRole: 'text' },\n    flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    const palette = theme.palette.text;\n\n    switch (colorProp) {\n        case 'inherit':\n            return undefined;\n        case 'textPrimary':\n            return palette.primary;\n        case 'textSecondary':\n            return palette.secondary;\n        case 'textAccent':\n            return palette.accent;\n        case 'textHint':\n            return palette.hint;\n    }\n\n    return theme.palette[colorProp]?.main;\n}\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        align = 'inherit',\n        children,\n        color: colorProp = 'inherit',\n        ellipsizeMode = 'tail',\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1',\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant],\n        color: selectColor(theme, colorProp),\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            textAlign: align === 'inherit' ? 'auto' : align,\n            flexShrink: 1,\n        },\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const accessibilityRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole}\n            aria-level={accessibility?.['area-level']}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"]}
+{"version":3,"sources":["Typography.tsx"],"names":["accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","Platform","OS","undefined","primary","secondary","accent","hint","main","Typography","React","forwardRef","props","ref","align","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","fontStyle","selector","typography","textStyle","textAlign","flexShrink","accessibility","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Platform, Text } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    h1: { accessibilityRole: 'header', 'area-level': 1 },\n    h2: { accessibilityRole: 'header', 'area-level': 2 },\n    h3: { accessibilityRole: 'header', 'area-level': 3 },\n    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n    body1: { accessibilityRole: 'text' },\n    body2: { accessibilityRole: 'text' },\n    caption1: { accessibilityRole: 'text' },\n    caption2: { accessibilityRole: 'text' },\n    flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    const palette = theme.palette.text;\n\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        case 'textPrimary':\n            return palette.primary;\n        case 'textSecondary':\n            return palette.secondary;\n        case 'textAccent':\n            return palette.accent;\n        case 'textHint':\n            return palette.hint;\n    }\n\n    return theme.palette[colorProp]?.main;\n}\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        align = 'inherit',\n        children,\n        color: colorProp = 'inherit',\n        ellipsizeMode = 'tail',\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1',\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant],\n        color: selectColor(theme, colorProp),\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            textAlign: align === 'inherit' ? 'auto' : align,\n            flexShrink: 1,\n        },\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const accessibilityRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole}\n            aria-level={accessibility?.['area-level']}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"]}

package/build/commonjs/hooks/index.js

@@ -3,12 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useBreakpointUp", {
+  enumerable: true,
+  get: function () {
+    return _useBreakpointUp.default;
+  }
+});
 Object.defineProperty(exports, "useCollapsibleAppBar", {
   enumerable: true,
   get: function () {
     return _useCollapsibleAppBar.default;
   }
 });
+Object.defineProperty(exports, "useContentContainerStyle", {
+  enumerable: true,
+  get: function () {
+    return _useContentContainerStyle.default;
+  }
+});
 Object.defineProperty(exports, "useElevationStyle", {
   enumerable: true,
   get: function () {
@@ -28,8 +40,12 @@ Object.defineProperty(exports, "useThrottle", {
   }
 });
 
+var _useBreakpointUp = _interopRequireDefault(require("./useBreakpointUp"));
+
 var _useCollapsibleAppBar = _interopRequireDefault(require("./useCollapsibleAppBar"));
 
+var _useContentContainerStyle = _interopRequireDefault(require("./useContentContainerStyle"));
+
 var _useElevationStyle = _interopRequireDefault(require("./useElevationStyle"));
 
 var _useFadeInAppBar = _interopRequireDefault(require("./useFadeInAppBar"));

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';\n"]}

package/build/commonjs/hooks/useCollapsibleAppBar.js

@@ -50,17 +50,23 @@ function useCollapsibleAppBar(userOptions = defaultOptions) {
 
   const elevationStyle = (0, _hooks.useElevationStyle)(6);
 
-  const animatedStyle = _reactNativeReanimated.default.useAnimatedStyle(() => ({
-    transform: [{
-      translateY: translateY.value
-    }],
-    boxShadow: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow,
-    elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
-    shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
-    shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
-    shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
-    shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
-  }));
+  const animatedStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
+    return _reactNative.Platform.OS === 'web' ? {
+      transform: [{
+        translateY: translateY.value
+      }],
+      boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
+    } : {
+      transform: [{
+        translateY: translateY.value
+      }],
+      elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
+      shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
+      shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
+      shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
+      shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
+    };
+  });
 
   const indexRef = _react.default.useRef(0);
 
@@ -120,6 +126,7 @@ function useCollapsibleAppBar(userOptions = defaultOptions) {
           }
         }
 
+        overlapped.value = offsetY > 0;
         lastOffsetY.value = offsetY;
       }
     },

package/build/commonjs/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA4BA,MAAMA,cAAiC,GAAG;AACtCC,EAAAA,WAAW,EAAE;AADyB,CAA1C;AAIA,MAAMC,yBAAyB,GAAG,GAAlC;AAEA,MAAMC,uBAAuB,GAAGC,sBAASC,EAAT,KAAgB,KAAhD;;AAEe,SAASC,oBAAT,CAA8BC,WAAoB,GAAGP,cAArD,EAAwF;AACnG,QAAM;AAAEC,IAAAA;AAAF,MAAqC,EACvC,GAAGD,cADoC;AAEvC,OAAGO;AAFoC,GAA3C;AAKA,QAAMC,MAAM,GAAG,+BAAf;AAEA,QAAMC,cAAc,GAAG,oDAAvB;AAEA,QAAM,CAACC,YAAD,EAAeC,cAAf,IAAiC,wBAAvC;AACA,QAAM,CAACC,wBAAD,EAA2BC,0BAA3B,IAAyD,wBAA/D;;AAEA,QAAMC,aAAa,GAAGC,+BAASC,eAAT,CAAyB,MAAM,CAACJ,wBAAhC,CAAtB;;AAEA,QAAMK,UAAU,GAAGF,+BAASG,cAAT,CAAgC,CAAhC,CAAnB;;AACA,QAAMC,cAAc,GAAGJ,+BAASG,cAAT,CAAgC,CAAhC,CAAvB;;AACA,QAAME,WAAW,GAAGL,+BAASG,cAAT,CAAgC,CAAhC,CAApB;;AACA,QAAMG,UAAU,GAAGN,+BAASG,cAAT,CAAiC,KAAjC,CAAnB;;AAEA,QAAMI,cAAc,GAAG,8BAAkB,CAAlB,CAAvB;;AACA,QAAMC,aAAa,GAAGR,+BAASS,gBAAT,CAA0B,OAAO;AACnDC,IAAAA,SAAS,EAAE,CAAC;AAAER,MAAAA,UAAU,EAAEA,UAAU,CAACS;AAAzB,KAAD,CADwC;AAEnDC,IAAAA,SAAS,EAAEL,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEK,SAFwB;AAGnDC,IAAAA,SAAS,EAAEP,UAAU,CAACK,KAAX,GAAmBJ,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEM,SAAnC,GAA+C,CAHP;AAInDC,IAAAA,WAAW,EAAEP,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEO,WAJsB;AAKnDC,IAAAA,YAAY,EAAER,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEQ,YALqB;AAMnDC,IAAAA,YAAY,EAAET,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAES,YANqB;AAOnDC,IAAAA,aAAa,EAAEX,UAAU,CAACK,KAAX,GAAmBJ,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEU,aAAnC,GAAmD;AAPf,GAAP,CAA1B,CAAtB;;AAUA,QAAMC,QAAQ,GAAGC,eAAMC,MAAN,CAAqB,CAArB,CAAjB;;AACA,QAAMC,UAAU,GAAGF,eAAMC,MAAN,CAA4B,EAA5B,CAAnB;;AAEA,QAAME,mBAAmB,GAAIC,SAAD,IAAuB;AAAA;;AAC/C,UAAMC,SAAS,GAAGN,QAAQ,CAACO,OAA3B;;AACA,QAAID,SAAS,KAAKD,SAAlB,EAA6B;AACzB;AACH;;AAEDF,IAAAA,UAAU,CAACI,OAAX,CAAmBD,SAAnB,IAAgCnB,WAAW,CAACM,KAA5C;AAEA,UAAMe,YAAY,4BAAGL,UAAU,CAACI,OAAX,CAAmBF,SAAnB,CAAH,yEAAoC,CAAtD;AACAlB,IAAAA,WAAW,CAACM,KAAZ,GAAoBe,YAApB;AAEAR,IAAAA,QAAQ,CAACO,OAAT,GAAmBF,SAAnB,CAX+C,CAa/C;;AACAjB,IAAAA,UAAU,CAACK,KAAX,GAAmBe,YAAY,GAAG,CAAlC,CAd+C,CAgB/C;;AACA,QAAIxB,UAAU,CAACS,KAAX,GAAmB,CAAnB,IAAwBe,YAAY,GAAG/B,YAA3C,EAAyD;AACrDO,MAAAA,UAAU,CAACS,KAAX,GAAmBX,+BAAS2B,UAAT,CAAoB,CAApB,EAAuB;AACtCC,QAAAA,QAAQ,EAAEzC;AAD4B,OAAvB,CAAnB;AAGH;AACJ,GAtBD;;AAwBA,QAAM0C,aAAa,GAAG7B,+BAAS8B,wBAAT,CAAkC;AACpDC,IAAAA,WAAW,EAAE,MAAM;AACf3B,MAAAA,cAAc,CAACO,KAAf,GAAuBT,UAAU,CAACS,KAAlC;AACH,KAHmD;AAIpDqB,IAAAA,eAAe,EAAE,MAAM;AACnB5B,MAAAA,cAAc,CAACO,KAAf,GAAuBT,UAAU,CAACS,KAAlC;AACH,KANmD;AAOpDsB,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACjB,YAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;AAEA,YAAMC,EAAE,GAAGpC,UAAU,CAACS,KAAtB;AACA,YAAM4B,KAAK,GAAGxC,aAAa,CAACY,KAA5B;;AAEA,UAAIvB,uBAAJ,EAA6B;AACzB,cAAMoD,EAAE,GAAGL,OAAO,GAAG9B,WAAW,CAACM,KAAjC;AAEAT,QAAAA,UAAU,CAACS,KAAX,GAAmBwB,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBM,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASvC,cAAc,CAACO,KAAf,GAAuB6B,EAAhC,EAAoCD,KAApC,CAAT,EAAqD,CAArD,CAAtC;AAEAjC,QAAAA,UAAU,CAACK,KAAX,GAAmBwB,OAAO,GAAGjC,UAAU,CAACS,KAArB,GAA6B,CAAhD;AACH,OAND,MAMO;AACH,YAAIwB,OAAO,GAAG,CAACI,KAAf,EAAsB;AAClB,cAAID,EAAE,KAAK,CAAX,EAAc;AACVpC,YAAAA,UAAU,CAACS,KAAX,GAAmBX,+BAAS2B,UAAT,CAAoBc,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAS,CAACR,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAApB,EAA4D;AAC3EX,cAAAA,QAAQ,EAAEzC;AADiE,aAA5D,CAAnB;AAGH;AACJ,SAND,MAMO;AACH,cAAImD,EAAE,KAAKC,KAAX,EAAkB;AACdrC,YAAAA,UAAU,CAACS,KAAX,GAAmBX,+BAAS2B,UAAT,CAAoB,CAApB,EAAuB;AACtCC,cAAAA,QAAQ,EAAEzC;AAD4B,aAAvB,CAAnB;AAGH;AACJ;;AAEDkB,QAAAA,WAAW,CAACM,KAAZ,GAAoBwB,OAApB;AACH;AACJ,KApCmD;AAqCpDS,IAAAA,SAAS,EAAGV,KAAD,IAAW;AAClB7B,MAAAA,WAAW,CAACM,KAAZ,GAAoBuB,KAAK,CAACE,aAAN,CAAoBC,CAAxC;AACH,KAvCmD;AAwCpDQ,IAAAA,aAAa,EAAGX,KAAD,IAAW;AACtB,YAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;AAEAhC,MAAAA,WAAW,CAACM,KAAZ,GAAoBwB,OAApB;AAEA,YAAMG,EAAE,GAAGpC,UAAU,CAACS,KAAtB;AACA,YAAM4B,KAAK,GAAGxC,aAAa,CAACY,KAA5B,CANsB,CAQtB;;AACA,UAAI2B,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;AACxB;AACH;;AAED,YAAMQ,SAAS,GAAGP,KAAK,GAAG,GAA1B;AAEA,YAAMQ,cAAc,GAAIT,EAAE,GAAGQ,SAAL,IAAkBX,OAAO,GAAGxC,YAA7B,GAA6C,CAA7C,GAAiD4C,KAAxE;AAEAjC,MAAAA,UAAU,CAACK,KAAX,GAAmBwB,OAAO,GAAGY,cAAV,GAA2B,CAA9C;AAEA7C,MAAAA,UAAU,CAACS,KAAX,GAAmBX,+BAAS2B,UAAT,CAAoBoB,cAApB,EAAoC;AACnDnB,QAAAA,QAAQ,EAAEzC;AADyC,OAApC,CAAnB;AAGH;AA9DmD,GAAlC,CAAtB;;AAiEA,QAAM6D,cAAc,GAAGnD,wBAAwB,GAAG,CAAlD;AAEA,QAAMoD,WAAW,GAAG,CAChBzC,aADgB,EAEhBtB,WAAW,GAAG;AAAEgE,IAAAA,UAAU,EAAExD,cAAc,CAACyD;AAA7B,GAAH,GAAwCC,SAFnC,EAGhBJ,cAAc,GAAGvD,MAAM,CAAC4D,QAAV,GAAqBD,SAHnB,CAApB;AAMA,SAAO;AACHH,IAAAA,WADG;AAEHrD,IAAAA,cAFG;AAGHE,IAAAA,0BAHG;AAIHmC,IAAAA,QAAQ,EAAEJ,aAJP;AAKHP,IAAAA,mBALG;AAMHgC,IAAAA,mBAAmB,EAAE;AAAEH,MAAAA,GAAG,EAAEH,cAAc,GAAGrD,YAAH,GAAkB;AAAvC;AANlB,GAAP;AAQH;;AAAA","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useElevationStyle } from '../hooks';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(6);\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        transform: [{ translateY: translateY.value }],\n        boxShadow: elevationStyle?.boxShadow,\n        elevation: overlapped.value ? elevationStyle?.elevation : 0,\n        shadowColor: elevationStyle?.shadowColor,\n        shadowOffset: elevationStyle?.shadowOffset,\n        shadowRadius: elevationStyle?.shadowRadius,\n        shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n    }));\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}
+{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useElevationStyle } from '../hooks';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(6);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}

package/build/commonjs/hooks/useContentContainerStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useContentContainerStyle.ts"],"names":["defaultConfig","breakpoint","maxWidth","styleProvider","undefined","getMaxWidth","theme","breakpoints","values","useContentContainerStyle","config","additionalStyle","yesStyle","alignSelf","width"],"mappings":";;;;;;;AAEA;;AACA;;;;AAYA,MAAMA,aAA+B,GAAG;AACpCC,EAAAA,UAAU,EAAE,IADwB;AAEpCC,EAAAA,QAAQ,EAAE,IAF0B;AAGpCC,EAAAA,aAAa,EAAE,MAAMC;AAHe,CAAxC,C,CAMA;;AACA,SAASC,WAAT,CAAqBC,KAArB,EAAmCL,UAAnC,EAAkF;AAC9E,UAAQA,UAAR;AACI,SAAK,IAAL;AACI,aAAOK,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAO,MAAP;AARR;AAUH;;AAEc,SAASC,wBAAT,CAAkCC,MAAM,GAAGV,aAA3C,EAAiF;AAC5F,QAAM;AACFC,IAAAA,UADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA;AAHE,MAIF,EACA,GAAGH,aADH;AAEA,OAAGU;AAFH,GAJJ;AASA,QAAMJ,KAAK,GAAG,uBAAd;AAEA,QAAMK,eAAe,GAAGR,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGG,KAAH,CAArC;AAEA,QAAMM,QAA+B,GAAG,CACpC;AACIC,IAAAA,SAAS,EAAE,QADf;AAEIX,IAAAA,QAAQ,EAAEG,WAAW,CAACC,KAAD,EAAQJ,QAAR,CAFzB;AAGIY,IAAAA,KAAK,EAAE;AAHX,GADoC,EAMpCH,eANoC,CAAxC;AASA,SAAO,8BAAgBV,UAAhB,EAA4BW,QAA5B,EAAsCD,eAAtC,CAAP;AACH;;AAAA","sourcesContent":["import type { ScrollViewProps, ViewStyle } from 'react-native';\nimport type { Theme } from '../types';\nimport { useTheme } from '../styles';\nimport useBreakpointUp from './useBreakpointUp';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\ntype ContentContainerStyle = ScrollViewProps['contentContainerStyle'];\n\nexport interface Config {\n    breakpoint?: Breakpoint;\n    maxWidth?: Breakpoint;\n    styleProvider?: (theme: Theme) => ContentContainerStyle;\n}\n\nconst defaultConfig: Required<Config> = {\n    breakpoint: 'lg',\n    maxWidth: 'md',\n    styleProvider: () => undefined,\n};\n\n// TODO: Needs to refactor\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'xs':\n            return theme.breakpoints.values['sm'];\n        case 'sm':\n            return theme.breakpoints.values['md'];\n        case 'md':\n            return theme.breakpoints.values['lg'];\n        case 'lg':\n            return 'none';\n    }\n}\n\nexport default function useContentContainerStyle(config = defaultConfig): ContentContainerStyle {\n    const {\n        breakpoint,\n        maxWidth,\n        styleProvider,\n    } = {\n        ...defaultConfig,\n        ...config,\n    };\n\n    const theme = useTheme();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const yesStyle: ContentContainerStyle = [\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, maxWidth),\n            width: '100%',\n        },\n        additionalStyle,\n    ];\n\n    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);\n};\n"]}
+{"version":3,"sources":["useContentContainerStyle.ts"],"names":["defaultConfig","breakpoint","maxWidth","styleProvider","undefined","getMaxWidth","theme","breakpoints","values","useContentContainerStyle","config","additionalStyle","yesStyle","alignSelf","width"],"mappings":";;;;;;;AAEA;;AACA;;;;AAYA,MAAMA,aAA+B,GAAG;AACpCC,EAAAA,UAAU,EAAE,IADwB;AAEpCC,EAAAA,QAAQ,EAAE,IAF0B;AAGpCC,EAAAA,aAAa,EAAE,MAAMC;AAHe,CAAxC,C,CAMA;;AACA,SAASC,WAAT,CAAqBC,KAArB,EAAmCL,UAAnC,EAAkF;AAC9E,UAAQA,UAAR;AACI,SAAK,IAAL;AACI,aAAOK,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAO,MAAP;AARR;AAUH;;AAEc,SAASC,wBAAT,CAAkCC,MAAc,GAAGV,aAAnD,EAAyF;AACpG,QAAM;AACFC,IAAAA,UADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA;AAHE,MAIF,EACA,GAAGH,aADH;AAEA,OAAGU;AAFH,GAJJ;AASA,QAAMJ,KAAK,GAAG,uBAAd;AAEA,QAAMK,eAAe,GAAGR,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGG,KAAH,CAArC;AAEA,QAAMM,QAA+B,GAAG,CACpC;AACIC,IAAAA,SAAS,EAAE,QADf;AAEIX,IAAAA,QAAQ,EAAEG,WAAW,CAACC,KAAD,EAAQJ,QAAR,CAFzB;AAGIY,IAAAA,KAAK,EAAE;AAHX,GADoC,EAMpCH,eANoC,CAAxC;AASA,SAAO,8BAAgBV,UAAhB,EAA4BW,QAA5B,EAAsCD,eAAtC,CAAP;AACH;;AAAA","sourcesContent":["import type { ScrollViewProps, ViewStyle } from 'react-native';\nimport type { Theme } from '../types';\nimport { useTheme } from '../styles';\nimport useBreakpointUp from './useBreakpointUp';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\ntype ContentContainerStyle = ScrollViewProps['contentContainerStyle'];\n\nexport interface Config {\n    breakpoint?: Breakpoint;\n    maxWidth?: Breakpoint;\n    styleProvider?: (theme: Theme) => ContentContainerStyle;\n}\n\nconst defaultConfig: Required<Config> = {\n    breakpoint: 'lg',\n    maxWidth: 'md',\n    styleProvider: () => undefined,\n};\n\n// TODO: Needs to refactor\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'xs':\n            return theme.breakpoints.values['sm'];\n        case 'sm':\n            return theme.breakpoints.values['md'];\n        case 'md':\n            return theme.breakpoints.values['lg'];\n        case 'lg':\n            return 'none';\n    }\n}\n\nexport default function useContentContainerStyle(config: Config = defaultConfig): ContentContainerStyle {\n    const {\n        breakpoint,\n        maxWidth,\n        styleProvider,\n    } = {\n        ...defaultConfig,\n        ...config,\n    };\n\n    const theme = useTheme();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const yesStyle: ContentContainerStyle = [\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, maxWidth),\n            width: '100%',\n        },\n        additionalStyle,\n    ];\n\n    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);\n};\n"]}

package/build/module/Accordion/Accordion.js

@@ -1,16 +1,7 @@
 import React, { useState } from 'react';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
-import { ButtonBase, Column, Divider, Spacer, Typography } from '../index';
-
-const useStyles = function () {
-  return {
-    buttonBase: {
-      flexDirection: 'row'
-    }
-  };
-};
-
+import { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';
 const ANIMATION_OPTION = {
   duration: 250
 };
@@ -22,6 +13,17 @@ export default function Accordion(props) {
     title,
     titleVariant = 'subtitle2'
   } = props;
+  const theme = useTheme();
+
+  const useStyles = function () {
+    return {
+      buttonBase: {
+        flexDirection: 'row',
+        paddingVertical: theme.spacing(3)
+      }
+    };
+  };
+
   const styles = useStyles();
   const [isExpanded, setIsExpanded] = useState(false);
   const sharedRotate = useSharedValue(0);

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

@@ -1 +1 @@
-{"version":3,"sources":["Accordion.tsx"],"names":["React","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useStyles","buttonBase","flexDirection","ANIMATION_OPTION","duration","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","sharedRotate","animatedChevronDownStyles","rotate","value","transform","onPress","isValidElement"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,SACIC,UADJ,EAEIC,MAFJ,EAGIC,OAHJ,EAIIC,MAJJ,EAKIC,UALJ,QAMO,UANP;;AAWA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,SAAO;AACHC,IAAAA,UAAU,EAAE;AAAEC,MAAAA,aAAa,EAAE;AAAjB;AADT,GAAP;AAGH,CAJD;;AAMA,MAAMC,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;AAEA,eAAe,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,GAAGZ,SAAS,EAAxB;AACA,QAAM,CAACa,UAAD,EAAaC,aAAb,IAA8B1B,QAAQ,CAAC,KAAD,CAA5C;AAEA,QAAM2B,YAAY,GAAGxB,cAAc,CAAC,CAAD,CAAnC;AACA,QAAMyB,yBAAyB,GAAG1B,gBAAgB,CAAC,MAAM;AACrD,UAAM2B,MAAM,GAAGJ,UAAU,GAAG,GAAH,GAAS,CAAlC;AACAE,IAAAA,YAAY,CAACG,KAAb,GAAqB1B,UAAU,CAACyB,MAAD,EAASd,gBAAT,CAA/B;AAEA,WAAO;AACHgB,MAAAA,SAAS,EAAE,CAAC;AAAEF,QAAAA,MAAM,EAAG,GAAEF,YAAY,CAACG,KAAM;AAAhC,OAAD;AADR,KAAP;AAGH,GAPiD,CAAlD;;AASA,QAAME,OAAO,GAAG,MAAM;AAClBN,IAAAA,aAAa,CAAC,CAACD,UAAF,CAAb;AACH,GAFD;;AAIA,sBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;AACI,IAAA,OAAO,EAAEO,OADb;AAEI,IAAA,KAAK,EAAER,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEK;AAAtB,KACKP,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,sBAAC,eAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKI,UAAU,GACP,aAAA1B,KAAK,CAACkC,cAAN,CAAqBd,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,oBAAC,OAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport {\n    ButtonBase,\n    Column,\n    Divider,\n    Spacer,\n    Typography,\n} from '../index';\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'buttonBase'>;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    return {\n        buttonBase: { flexDirection: 'row' },\n    };\n};\n\nconst ANIMATION_OPTION = { duration: 250 };\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    const [isExpanded, setIsExpanded] = useState(false);\n\n    const sharedRotate = useSharedValue(0);\n    const animatedChevronDownStyles = useAnimatedStyle(() => {\n        const rotate = isExpanded ? 180 : 0;\n        sharedRotate.value = withTiming(rotate, ANIMATION_OPTION);\n\n        return {\n            transform: [{ rotate: `${sharedRotate.value}deg` }],\n        };\n    });\n\n    const onPress = () => {\n        setIsExpanded(!isExpanded);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.buttonBase}\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":["React","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useTheme","ANIMATION_OPTION","duration","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","theme","useStyles","buttonBase","flexDirection","paddingVertical","spacing","styles","isExpanded","setIsExpanded","sharedRotate","animatedChevronDownStyles","rotate","value","transform","onPress","isValidElement"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,SAASC,UAAT,EAAqBC,MAArB,EAA6BC,OAA7B,EAAsCC,MAAtC,EAA8CC,UAA9C,EAA0DC,QAA1D,QAA0E,UAA1E;AAKA,MAAMC,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;AAEA,eAAe,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;AAOA,QAAMM,KAAK,GAAGV,QAAQ,EAAtB;;AAEA,QAAMW,SAAqC,GAAG,YAA6B;AACvE,WAAO;AACHC,MAAAA,UAAU,EAAE;AACRC,QAAAA,aAAa,EAAE,KADP;AAERC,QAAAA,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd;AAFT;AADT,KAAP;AAMH,GAPD;;AASA,QAAMC,MAAM,GAAGL,SAAS,EAAxB;AACA,QAAM,CAACM,UAAD,EAAaC,aAAb,IAA8B9B,QAAQ,CAAC,KAAD,CAA5C;AAEA,QAAM+B,YAAY,GAAG5B,cAAc,CAAC,CAAD,CAAnC;AACA,QAAM6B,yBAAyB,GAAG9B,gBAAgB,CAAC,MAAM;AACrD,UAAM+B,MAAM,GAAGJ,UAAU,GAAG,GAAH,GAAS,CAAlC;AACAE,IAAAA,YAAY,CAACG,KAAb,GAAqB9B,UAAU,CAAC6B,MAAD,EAASpB,gBAAT,CAA/B;AAEA,WAAO;AACHsB,MAAAA,SAAS,EAAE,CAAC;AAAEF,QAAAA,MAAM,EAAG,GAAEF,YAAY,CAACG,KAAM;AAAhC,OAAD;AADR,KAAP;AAGH,GAPiD,CAAlD;;AASA,QAAME,OAAO,GAAG,MAAM;AAClBN,IAAAA,aAAa,CAAC,CAACD,UAAF,CAAb;AACH,GAFD;;AAIA,sBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;AACI,IAAA,OAAO,EAAEO,OADb;AAEI,IAAA,KAAK,EAAER,MAAM,CAACJ;AAFlB,KAIKN,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEW;AAAtB,KACKb,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,sBAAC,eAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKU,UAAU,GACP,aAAA9B,KAAK,CAACsC,cAAN,CAAqBpB,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,oBAAC,OAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'buttonBase'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n    const theme = useTheme();\n\n    const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n        return {\n            buttonBase: {\n                flexDirection: 'row',\n                paddingVertical: theme.spacing(3),\n            },\n        };\n    };\n\n    const styles = useStyles();\n    const [isExpanded, setIsExpanded] = useState(false);\n\n    const sharedRotate = useSharedValue(0);\n    const animatedChevronDownStyles = useAnimatedStyle(() => {\n        const rotate = isExpanded ? 180 : 0;\n        sharedRotate.value = withTiming(rotate, ANIMATION_OPTION);\n\n        return {\n            transform: [{ rotate: `${sharedRotate.value}deg` }],\n        };\n    });\n\n    const onPress = () => {\n        setIsExpanded(!isExpanded);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.buttonBase}\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"]}