@fountain-ui/core 2.0.0-beta.9 → 2.0.0-beta.91

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

@@ -1 +1 @@
-{"version":3,"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","StyleSheet","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","useThrottle","periodMillis","callback","useSharedValue","animatedStyle","useAnimatedStyle","value","useDisabledReaction","startAnimation","pressIn","isHovered","withTiming","withDelay","undefined","hovered"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\nimport useDisabledReaction from './useDisabledReaction';\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: 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 = useSharedValue(ORIGINAL_OPACITY);\n    const scale = useSharedValue(ORIGINAL_SCALE);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        opacity: opacity.value,\n        transform: [{ scale: scale.value }],\n    }));\n\n    useDisabledReaction(disabled, opacity);\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 = withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = withDelay(\n                    100,\n                    withTiming(MINIFIED_SCALE, animationTimingConfig),\n                );\n            } else {\n                scale.value = 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"],"mappings":"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"}
+{"version":3,"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","SCALE_EFFECT_PRESS_IN_DELAY","OPACITY_EFFECT_PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","Animated","timing","duration","useNativeDriver","isNotAndroid12","start","getOpacityByDisabled","disabled","ButtonBase","props","children","disableThrottle","onPress","onPressOut","pressEffect","pressDelay","pressDelayOrNil","style","styleProp","throttleMillis","otherProps","handlePress","useThrottle","periodMillis","callback","opacity","useAnimatedValue","scale","useEffect","setValue","startScaleAnimation","useCallback","pressIn","isHover","startOpacityAnimation","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","defaultPressDelay","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue, useThrottle } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n    (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst SCALE_EFFECT_PRESS_IN_DELAY = 130;\nconst OPACITY_EFFECT_PRESS_IN_DELAY = 0;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n    value: TimingAnimationValue,\n    toValue: TimingAnimationToValue,\n) => {\n    Animated.timing(value, {\n        toValue,\n        duration: 150,\n        useNativeDriver: isNotAndroid12,\n    }).start();\n};\n\nconst getOpacityByDisabled = (disabled: boolean) => disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY;\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        onPressOut,\n        pressEffect = 'opacity',\n        pressDelay: pressDelayOrNil,\n        style: styleProp,\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 = useAnimatedValue(getOpacityByDisabled(disabled));\n    const scale = useAnimatedValue(ORIGINAL_SCALE);\n\n    useEffect(() => {\n        opacity.setValue(getOpacityByDisabled(disabled));\n    }, [disabled, pressEffect]);\n\n    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n        if (!isHover) {\n            startTimingAnimationWithDefaults(\n                scale,\n                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n            );\n        }\n    }, []);\n\n    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n        if (pressIn) {\n            opacity.setValue(ACTIVE_OPACITY);\n        } else {\n            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n        }\n    }, []);\n\n    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n        if (pressEffect === 'scale') {\n            startScaleAnimation(pressIn, isHover);\n        } else if (pressEffect === 'opacity') {\n            startOpacityAnimation(pressIn, isHover);\n        }\n    }, [pressEffect]);\n\n    const handlePressIn = useCallback(() => {\n        startPressAnimation(true, false);\n    }, [startPressAnimation]);\n\n    const handlePressOut = useCallback(() => {\n        onPressOut && onPressOut();\n\n        startPressAnimation(false, false);\n    }, [startPressAnimation, onPressOut]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ scale }],\n    };\n\n    const defaultPressDelay = pressEffect === 'scale'\n        ? SCALE_EFFECT_PRESS_IN_DELAY\n        : OPACITY_EFFECT_PRESS_IN_DELAY;\n    const pressDelay = pressDelayOrNil ?? defaultPressDelay;\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={handlePressIn}\n            onPressOut={handlePressOut}\n            style={[\n                animatedStyle,\n                styleProp,\n            ]}\n            unstable_pressDelay={pressDelay}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startPressAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ButtonBaseProps.ts"],"sourcesContent":["import type { PressableProps } from '../Pressable';\nimport type { OverridableComponentProps } from '../types';\n\nexport type PressEffect = 'opacity' | 'scale' | 'none';\n\nexport default interface ButtonBaseProps extends OverridableComponentProps<PressableProps, {\n    /**\n     * Content of the ButtonBase.\n     */\n    children: PressableProps['children'];\n\n    /**\n     * Whether to prevent interaction with the ButtonBase.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether to debounce when button is pressed\n     * @default false\n     */\n    disableThrottle?: boolean;\n\n    /**\n     * Function to execute on press. If not set, will cause the ButtonBase to be disabled.\n     */\n    onPress?: () => void;\n\n    /**\n     * Applied press effect.\n     * @default 'opacity'\n     */\n    pressEffect?: PressEffect;\n\n    /**\n     * The millisecond for debouncing.\n     * @default 650\n     */\n    throttleMillis?: number;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ButtonBaseProps.ts"],"sourcesContent":["import type { PressableProps } from '../Pressable';\nimport type { OverridableComponentProps } from '../types';\n\nexport type PressEffect = 'opacity' | 'scale' | 'none';\n\nexport default interface ButtonBaseProps extends OverridableComponentProps<PressableProps, {\n    /**\n     * Content of the ButtonBase.\n     */\n    children: PressableProps['children'];\n\n    /**\n     * Whether to prevent interaction with the ButtonBase.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether to debounce when button is pressed\n     * @default false\n     */\n    disableThrottle?: boolean;\n\n    /**\n     * Function to execute on press. If not set, will cause the ButtonBase to be disabled.\n     */\n    onPress?: () => void;\n\n    /**\n     * Function to execute on press out.\n     */\n    onPressOut?: () => void;\n\n    /**\n     * Applied press effect.\n     * @default 'opacity'\n     */\n    pressEffect?: PressEffect;\n\n    /**\n     * The milliseconds to delay effect.\n     */\n    pressDelay?: number;\n\n    /**\n     * The millisecond for debouncing.\n     * @default 650\n     */\n    throttleMillis?: number;\n}> {}\n"],"mappings":""}

package/build/commonjs/Checkbox/CheckboxProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["CheckboxProps.ts"],"sourcesContent":["import React from 'react';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\ntype BaseProps = Omit<ButtonBaseProps, 'onPress'>;\n\nexport type CheckboxColor = CommonComponentColor;\n\nexport default interface CheckboxProps extends OverridableComponentProps<BaseProps, {\n    /**\n     * If `true`, the component is checked.\n     * @default false\n     */\n    checked?: boolean;\n\n    /**\n     * The checked Icon which is replaced.\n     */\n    checkedIcon?: React.ReactElement;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'primary'\n     */\n    color?: CheckboxColor;\n\n    /**\n     * If `true`, the checkbox is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The unchecked Icon which is replaced.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * Callback fired when the state is changed.\n     */\n    onChange?: (newChecked: boolean) => void;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["CheckboxProps.ts"],"sourcesContent":["import React from 'react';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\ntype BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;\n\nexport type CheckboxColor = CommonComponentColor;\n\nexport default interface CheckboxProps extends OverridableComponentProps<BaseProps, {\n    /**\n     * If `true`, the component is checked.\n     * @default false\n     */\n    checked?: boolean;\n\n    /**\n     * The checked Icon which is replaced.\n     */\n    checkedIcon?: React.ReactElement;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'primary'\n     */\n    color?: CheckboxColor;\n\n    /**\n     * If `true`, the checkbox is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The unchecked Icon which is replaced.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * Callback fired when the state is changed.\n     */\n    onChange?: (newChecked: boolean) => void;\n}> {}\n"],"mappings":""}

package/build/commonjs/Chip/Chip.js

@@ -19,19 +19,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const ICON_SIZE = 16;
+const ICON_SIZE = 20;
 
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
     root: {
       alignItems: 'center',
-      borderRadius: 20,
+      borderRadius: theme.shape.roundnessExtra,
       flexDirection: 'row',
       height: 32,
       justifyContent: 'center',
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2)
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3)
     }
   };
 };
@@ -40,6 +40,7 @@ function Chip(props) {
   const {
     children,
     endIcon: endIconProp,
+    numberOfLines,
     onPress,
     startIcon: startIconProp,
     style: styleProp,
@@ -52,21 +53,21 @@ function Chip(props) {
   const variantStyleMap = {
     outlined: {
       backgroundColor: theme.palette.paper.default,
-      borderColor: theme.palette.border,
-      borderWidth: 2
+      borderColor: theme.palette.border.default,
+      borderWidth: 1
     },
     filled: {
       backgroundColor: theme.palette.paper.grey
     },
     bold: {
-      backgroundColor: theme.palette.paper.grey,
+      backgroundColor: theme.palette.paper.default,
       borderColor: theme.palette.primary.main,
-      borderWidth: 2
+      borderWidth: 1.5
     }
   };
   const chipStyle = (0, _styles.css)([styles.root, variantStyleMap[variant], styleProp]);
   const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typo => typo.subtitle2,
+    selector: typo => variant === 'bold' ? typo.subtitle2 : typo.body2,
     color: fontColor
   });
   const textMarginSize = theme.spacing(1);
@@ -90,6 +91,7 @@ function Chip(props) {
     style: chipStyle
   }, otherProps), startIcon, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: children,
+    numberOfLines: numberOfLines,
     style: textStyle
   }), endIcon);
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ChipVariant = 'outlined' | 'filled' | 'bold';\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Element placed after the children.\n     */\n    endIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'outlined'\n     */\n    variant?: ChipVariant;\n}> {}"],"mappings":""}
+{"version":3,"names":[],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ChipVariant = 'outlined' | 'filled' | 'bold';\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Element placed after the children.\n     */\n    endIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Number of lines of children.\n     */\n    numberOfLines?: number;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'outlined'\n     */\n    variant?: ChipVariant;\n}> {}"],"mappings":""}

package/build/commonjs/CircularProgress/CircularProgress.js

@@ -5,19 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CircularProgress;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNative = require("react-native");
 
 var _icons = require("../internal/icons");
 
-var _styles = require("../styles");
+var _hooks = require("../hooks");
+
+var _utils = require("../utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MIN_ROTATE_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
 
 const useStyles = function () {
   return {
@@ -30,34 +33,30 @@ const useStyles = function () {
 
 function CircularProgress(props) {
   const {
-    style
+    style: styleProp
   } = props;
   const styles = useStyles();
-  const rootStyle = (0, _styles.css)([styles.root, style]);
-  const sharedSpin = (0, _reactNativeReanimated.useSharedValue)(0);
-  const spinStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const interpolatedSpin = _reactNativeReanimated.default.interpolateNode(sharedSpin.value, {
-      inputRange: [0, 1],
-      outputRange: [0, 360]
-    });
-
-    return {
-      transform: [{
-        rotate: `${interpolatedSpin}deg`
-      }]
-    };
-  });
-
-  _react.default.useEffect(() => {
-    sharedSpin.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+  const rotate = (0, _hooks.useAnimatedValue)(MIN_ROTATE_DEGREE);
+  const animatedStyle = {
+    transform: [{
+      rotate: rotate.interpolate({
+        inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],
+        outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`]
+      })
+    }]
+  };
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.loop(_reactNative.Animated.timing(rotate, {
+      toValue: MAX_ROTATE_DEGREE,
       duration: 900,
-      easing: _reactNativeReanimated.Easing.linear
-    }), -1, false);
+      easing: _reactNative.Easing.linear,
+      useNativeDriver: _utils.isNotAndroid12
+    })).start();
   }, []);
-
-  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [spinStyle, rootStyle]
-  }, /*#__PURE__*/_react.default.createElement(_icons.CircularProgress, null));
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    children: /*#__PURE__*/_react.default.createElement(_icons.CircularProgress, null),
+    style: [animatedStyle, styles.root, styleProp]
+  });
 }
 
 ;

package/build/commonjs/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styles","rootStyle","css","sharedSpin","useSharedValue","spinStyle","useAnimatedStyle","interpolatedSpin","Animated","interpolateNode","value","inputRange","outputRange","transform","rotate","React","useEffect","withRepeat","withTiming","duration","easing","Easing","linear"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const sharedSpin = useSharedValue(0);\n\n    const spinStyle = useAnimatedStyle(() => {\n        const interpolatedSpin = Animated.interpolateNode(sharedSpin.value, {\n            inputRange: [0, 1],\n            outputRange: [0, 360],\n        });\n\n        return {\n            transform: [{ rotate: `${interpolatedSpin}deg` }],\n        };\n    });\n\n    React.useEffect(() => {\n        sharedSpin.value = withRepeat(\n            withTiming(1, { duration: 900, easing: Easing.linear }),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;;;;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,gBAAT,CAA0BC,KAA1B,EAAuE;EAClF,MAAM;IAAEC;EAAF,IAAYD,KAAlB;EAEA,MAAME,MAAM,GAAGP,SAAS,EAAxB;EAEA,MAAMQ,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACN,IADW,EAElBK,KAFkB,CAAJ,CAAlB;EAKA,MAAMI,UAAU,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAnB;EAEA,MAAMC,SAAS,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACrC,MAAMC,gBAAgB,GAAGC,8BAAA,CAASC,eAAT,CAAyBN,UAAU,CAACO,KAApC,EAA2C;MAChEC,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADoD;MAEhEC,WAAW,EAAE,CAAC,CAAD,EAAI,GAAJ;IAFmD,CAA3C,CAAzB;;IAKA,OAAO;MACHC,SAAS,EAAE,CAAC;QAAEC,MAAM,EAAG,GAAEP,gBAAiB;MAA9B,CAAD;IADR,CAAP;EAGH,CATiB,CAAlB;;EAWAQ,cAAA,CAAMC,SAAN,CAAgB,MAAM;IAClBb,UAAU,CAACO,KAAX,GAAmB,IAAAO,iCAAA,EACf,IAAAC,iCAAA,EAAW,CAAX,EAAc;MAAEC,QAAQ,EAAE,GAAZ;MAAiBC,MAAM,EAAEC,6BAAA,CAAOC;IAAhC,CAAd,CADe,EAEf,CAAC,CAFc,EAGf,KAHe,CAAnB;EAKH,CAND,EAMG,EANH;;EAQA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACjB,SAAD,EAAYJ,SAAZ;EAAtB,gBACI,6BAAC,uBAAD,OADJ,CADJ;AAKH;;AAAA"}
+{"version":3,"names":["MIN_ROTATE_DEGREE","MAX_ROTATE_DEGREE","useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styleProp","styles","rotate","useAnimatedValue","animatedStyle","transform","interpolate","inputRange","outputRange","useEffect","Animated","loop","timing","toValue","duration","easing","Easing","linear","useNativeDriver","isNotAndroid12","start"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport type { OverridableComponentProps } from '../types';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst MIN_ROTATE_DEGREE = 0;\nconst MAX_ROTATE_DEGREE = 360;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style: styleProp } = props;\n\n    const styles = useStyles();\n\n    const rotate = useAnimatedValue(MIN_ROTATE_DEGREE);\n\n    const animatedStyle = {\n        transform: [{\n            rotate: rotate.interpolate({\n                inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],\n                outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`],\n            }),\n        }],\n    };\n\n    useEffect(() => {\n        Animated.loop(\n            Animated.timing(\n                rotate,\n                {\n                    toValue: MAX_ROTATE_DEGREE,\n                    duration: 900,\n                    easing: Easing.linear,\n                    useNativeDriver: isNotAndroid12,\n                },\n            ),\n        ).start();\n    }, []);\n\n    return (\n        <Animated.View\n            children={<CircularProgressIcon/>}\n            style={[\n                animatedStyle,\n                styles.root,\n                styleProp,\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AACA;;;;;;AAIA,MAAMA,iBAAiB,GAAG,CAA1B;AACA,MAAMC,iBAAiB,GAAG,GAA1B;;AAEA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,gBAAT,CAA0BC,KAA1B,EAAuE;EAClF,MAAM;IAAEC,KAAK,EAAEC;EAAT,IAAuBF,KAA7B;EAEA,MAAMG,MAAM,GAAGR,SAAS,EAAxB;EAEA,MAAMS,MAAM,GAAG,IAAAC,uBAAA,EAAiBZ,iBAAjB,CAAf;EAEA,MAAMa,aAAa,GAAG;IAClBC,SAAS,EAAE,CAAC;MACRH,MAAM,EAAEA,MAAM,CAACI,WAAP,CAAmB;QACvBC,UAAU,EAAE,CAAChB,iBAAD,EAAoBC,iBAApB,CADW;QAEvBgB,WAAW,EAAE,CAAE,GAAEjB,iBAAkB,KAAtB,EAA6B,GAAEC,iBAAkB,KAAjD;MAFU,CAAnB;IADA,CAAD;EADO,CAAtB;EASA,IAAAiB,gBAAA,EAAU,MAAM;IACZC,qBAAA,CAASC,IAAT,CACID,qBAAA,CAASE,MAAT,CACIV,MADJ,EAEI;MACIW,OAAO,EAAErB,iBADb;MAEIsB,QAAQ,EAAE,GAFd;MAGIC,MAAM,EAAEC,mBAAA,CAAOC,MAHnB;MAIIC,eAAe,EAAEC;IAJrB,CAFJ,CADJ,EAUEC,KAVF;EAWH,CAZD,EAYG,EAZH;EAcA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,QAAQ,eAAE,6BAAC,uBAAD,OADd;IAEI,KAAK,EAAE,CACHhB,aADG,EAEHH,MAAM,CAACP,IAFJ,EAGHM,SAHG;EAFX,EADJ;AAUH;;AAAA"}

package/build/commonjs/Dialog/Dialog.js

@@ -5,26 +5,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Dialog;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _Modal = _interopRequireDefault(require("../Modal"));
+var _styles = require("@fountain-ui/styles");
+
+var _Column = _interopRequireDefault(require("../Column"));
+
+var _Modal = _interopRequireWildcard(require("../Modal"));
 
 var _Paper = _interopRequireDefault(require("../Paper"));
 
-var _styles = require("../styles");
+var _styles2 = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const DIALOG_MAX_WIDTH = 328;
+const TOP_ELEMENT_OFFSET = 20;
+
 const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _styles2.useTheme)();
   const {
     width
   } = (0, _reactNative.useWindowDimensions)();
   const margin = theme.spacing(4);
+  const dialogWidth = width - margin * 2;
   return {
     root: {
       alignItems: 'center',
@@ -32,10 +44,11 @@ const useStyles = function () {
       zIndex: theme.zIndex.dialog
     },
     paper: {
+      borderRadius: theme.shape.roundnessExtra,
       margin,
-      maxWidth: 328,
+      maxWidth: DIALOG_MAX_WIDTH,
       overflow: 'hidden',
-      width: width - margin * 2
+      width: dialogWidth
     },
     paperFullScreen: {
       flexGrow: 1
@@ -44,29 +57,124 @@ const useStyles = function () {
     animationFullScreen: {
       width: '100%',
       height: '100%'
+    },
+    topElementSize: {
+      marginHorizontal: margin,
+      maxWidth: DIALOG_MAX_WIDTH,
+      width: dialogWidth
+    },
+    topElementPosition: {
+      position: 'absolute',
+      bottom: -1 * theme.spacing(4),
+      width: '100%'
     }
   };
 };
 
 function Dialog(props) {
   const {
+    animationType = _Modal.ANIMATION_TYPE.SLIDE,
     children,
     fullScreen = false,
+    hideBackdrop,
     onClose,
+    style = {},
     visible,
+    topElement,
     ...otherProps
   } = props;
   const styles = useStyles();
+  const {
+    height: screenHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const [topElementHeight, setTopElementHeight] = (0, _react.useState)(0);
+
+  const handleTopElementLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setTopElementHeight(height);
+  };
+
+  const offsetAnimation = (0, _react.useMemo)(() => {
+    if (topElementHeight === 0) {
+      return [];
+    }
+
+    return [{
+      toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [topElementHeight]);
+  const closeAnimation = (0, _react.useMemo)(() => {
+    if (animationType === _Modal.ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: screenHeight,
+        type: _Modal.ANIMATION_TYPE.SLIDE
+      }, {
+        duration: 150,
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    }
+
+    return [{
+      duration: 150,
+      toValue: screenHeight,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen, screenHeight]);
+  const openAnimation = (0, _react.useMemo)(() => {
+    if (animationType === _Modal.ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 1,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.SLIDE
+      }, {
+        delay: 50,
+        duration: 150,
+        toValue: 1,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    }
+
+    return [{
+      toValue: 0,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen]);
+  const initialOpacity = animationType === _Modal.ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+  const initialTranslateY = animationType === _Modal.ANIMATION_TYPE.FADE ? 0 : undefined;
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
+    closeAnimation: closeAnimation,
+    hideBackdrop: hideBackdrop || animationType === _Modal.ANIMATION_TYPE.FADE,
+    initialOpacity: initialOpacity,
+    initialTranslateY: initialTranslateY,
     onClose: onClose,
+    openAnimation: openAnimation,
+    offsetAnimation: offsetAnimation,
     visible: visible,
     style: styles.root
-  }, otherProps), /*#__PURE__*/_react.default.createElement(_Paper.default, {
-    elevation: 24,
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
+    style: fullScreen ? undefined : styles.topElementSize
+  }, /*#__PURE__*/_react.default.createElement(_Column.default, {
+    style: styles.topElementPosition,
+    onLayout: handleTopElementLayout
+  }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    elevation: 6,
     square: fullScreen,
-    style: fullScreen ? styles.paperFullScreen : styles.paper
-  }, children));
+    style: (0, _styles.css)([fullScreen ? styles.paperFullScreen : styles.paper, style])
+  }, children)));
 }
 
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","Dialog","props","children","fullScreen","onClose","visible","otherProps","styles"],"sources":["Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: 328,\n            overflow: 'hidden',\n            width: width - margin * 2,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        visible,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Paper\n                elevation={24}\n                square={fullScreen}\n                style={fullScreen ? styles.paperFullScreen : styles.paper}\n            >\n                {children}\n            </Paper>\n        </Modal>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAYA,MAAMA,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM;IAAEC;EAAF,IAAY,IAAAC,gCAAA,GAAlB;EAEA,MAAMC,MAAM,GAAGJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAAf;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,MAAM,EAAET,KAAK,CAACS,MAAN,CAAaC;IAHnB,CADH;IAMHC,KAAK,EAAE;MACHP,MADG;MAEHQ,QAAQ,EAAE,GAFP;MAGHC,QAAQ,EAAE,QAHP;MAIHX,KAAK,EAAEA,KAAK,GAAGE,MAAM,GAAG;IAJrB,CANJ;IAYHU,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAZd;IAeHC,SAAS,EAAE,EAfR;IAgBHC,mBAAmB,EAAE;MACjBf,KAAK,EAAE,MADU;MAEjBgB,MAAM,EAAE;IAFS;EAhBlB,CAAP;AAqBH,CA5BD;;AA8Be,SAASC,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,UAAU,GAAG,KAFX;IAGFC,OAHE;IAIFC,OAJE;IAKF,GAAGC;EALD,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAG3B,SAAS,EAAxB;EAEA,oBACI,6BAAC,cAAD;IACI,cAAc,EAAEuB,UAAU,GAAGI,MAAM,CAACT,mBAAV,GAAgCS,MAAM,CAACV,SADrE;IAEI,OAAO,EAAEO,OAFb;IAGI,OAAO,EAAEC,OAHb;IAII,KAAK,EAAEE,MAAM,CAACpB;EAJlB,GAKQmB,UALR,gBAOI,6BAAC,cAAD;IACI,SAAS,EAAE,EADf;IAEI,MAAM,EAAEH,UAFZ;IAGI,KAAK,EAAEA,UAAU,GAAGI,MAAM,CAACZ,eAAV,GAA4BY,MAAM,CAACf;EAHxD,GAKKU,QALL,CAPJ,CADJ;AAiBH;;AAAA"}
+{"version":3,"names":["DIALOG_MAX_WIDTH","TOP_ELEMENT_OFFSET","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","borderRadius","shape","roundnessExtra","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","fullScreen","hideBackdrop","onClose","style","visible","topElement","otherProps","styles","screenHeight","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","css"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            borderRadius: theme.shape.roundnessExtra,\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        fullScreen = false,\n        hideBackdrop,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        return [{\n            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }]\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column\n                            style={styles.topElementPosition}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </React.Fragment>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

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

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

package/build/commonjs/Divider/Divider.js

@@ -28,26 +28,24 @@ const styles = _styles.StyleSheet.create({
   },
   divider: {
     flexGrow: 1
-  },
-  borderBottom: {
-    borderBottomWidth: 1
-  },
-  borderRight: {
-    borderRightWidth: 1
   }
 });
 
 function Divider(props) {
   const {
+    borderWidth = 1,
     children: childrenProp,
+    color = 'divider',
+    elementAlign = 'center',
     inset = 0,
-    vertical = false,
+    marginBetweenChildren = 2,
     style,
+    vertical = false,
     ...otherProps
   } = props;
   const theme = (0, _styles.useTheme)();
   const fontColor = theme.palette.text.secondary;
-  const borderColor = theme.palette.divider;
+  const borderColor = color === 'divider' ? theme.palette.divider : color === 'border' ? theme.palette.border.default : theme.palette[color].main;
   const marginSize = theme.spacing(1);
   const insetSize = theme.spacing(inset);
   const marginLeft = marginSize;
@@ -71,19 +69,29 @@ function Divider(props) {
   const borderColorStyle = {
     borderColor
   };
-  const borderWidthStyle = vertical ? styles.borderRight : styles.borderBottom;
+  const borderWidthStyle = vertical ? {
+    borderRightWidth: borderWidth
+  } : {
+    borderBottomWidth: borderWidth
+  };
   const containerStyle = (0, _styles.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
   const dividerStyle = (0, _styles.css)([borderColorStyle, borderWidthStyle, styles.divider]);
-  const dividerMarginSize = theme.spacing(2);
-  const startDividerStyle = vertical ? {
-    marginBottom: dividerMarginSize
-  } : {
-    marginRight: dividerMarginSize
+  const dividerMarginSize = theme.spacing(marginBetweenChildren);
+  const startDividerStyle = {
+    display: elementAlign !== 'start' ? 'flex' : 'none',
+    ...(vertical ? {
+      marginBottom: dividerMarginSize
+    } : {
+      marginRight: dividerMarginSize
+    })
   };
-  const endDividerStyle = vertical ? {
-    marginTop: dividerMarginSize
-  } : {
-    marginLeft: dividerMarginSize
+  const endDividerStyle = {
+    display: elementAlign !== 'end' ? 'flex' : 'none',
+    ...(vertical ? {
+      marginTop: dividerMarginSize
+    } : {
+      marginLeft: dividerMarginSize
+    })
   };
   const fontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typo => typo.caption2,