@fountain-ui/core 3.0.0-alpha.43 → 3.0.0-alpha.45

package/build/module/Radio/Radio.js

@@ -3,11 +3,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useContext } from 'react';
 import { Text } from 'react-native';
 import ButtonBase from '../ButtonBase';
+import Column from '../Column';
 import { Check as CheckedIcon } from '../internal';
 import Row from '../Row';
 import { createFontStyle, css, useTheme } from '../styles';
 import { cloneElementSafely } from '../utils';
 import { RadioContext } from '../RadioGroup/RadioContextProvider';
+import Typography from '../Typography';
 const DEFAULT_START_ICON_SIZE = 21;
 
 const useStyles = function () {
@@ -39,6 +41,7 @@ export default function Radio(props) {
     startIcon: startIconProp,
     style,
     value,
+    description,
     ...otherProps
   } = props;
   const theme = useTheme();
@@ -73,13 +76,21 @@ export default function Radio(props) {
     disabled: disabled,
     onPress: handlePress,
     style: rootStyle
-  }, otherProps), /*#__PURE__*/React.createElement(Row, {
+  }, otherProps), /*#__PURE__*/React.createElement(Column, {
+    gap: 2,
+    flexShrink: 1
+  }, /*#__PURE__*/React.createElement(Row, {
     alignItems: 'center',
     style: styles.content
   }, startIcon, /*#__PURE__*/React.createElement(Text, {
     children: children,
     style: fontStyle
-  })), icon);
+  })), description ? /*#__PURE__*/React.createElement(Typography, {
+    variant: 'body3',
+    color: 'base',
+    weight: 'regular',
+    children: description
+  }) : null), icon);
 }
 ;
 //# sourceMappingURL=Radio.js.map

package/build/module/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","Text","ButtonBase","Check","CheckedIcon","Row","createFontStyle","css","useTheme","cloneElementSafely","RadioContext","DEFAULT_START_ICON_SIZE","useStyles","theme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","otherProps","styles","context","handlePress","isChecked","defaultCheckedIcon","icon","color","height","width","rootStyle","fontStyle","selector","typography","body1","regular","text","strong"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n    const icon = isChecked ? checkedIcon : null;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Row\n                alignItems={'center'}\n                style={styles.content}\n            >\n                {startIcon}\n\n                <Text\n                    children={children}\n                    style={fontStyle}\n                />\n            </Row>\n\n            {icon}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useContext","Text","ButtonBase","Column","Check","CheckedIcon","Row","createFontStyle","css","useTheme","cloneElementSafely","RadioContext","Typography","DEFAULT_START_ICON_SIZE","useStyles","theme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","description","otherProps","styles","context","handlePress","isChecked","defaultCheckedIcon","icon","color","height","width","rootStyle","fontStyle","selector","typography","body1","regular","text","strong"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\nimport Typography from '../Typography';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        description,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n    const icon = isChecked ? checkedIcon : null;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Column\n                gap={2}\n                flexShrink={1}\n            >\n                <Row\n                    alignItems={'center'}\n                    style={styles.content}\n                >\n                    {startIcon}\n\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n\n                {description ? (\n                    <Typography\n                        variant={'body3'}\n                        color={'base'}\n                        weight={'regular'}\n                        children={description}\n                    />\n                ) : null}\n            </Column>\n\n            {icon}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/module/Radio/RadioProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["RadioProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\ntype BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;\n\nexport default interface RadioProps extends OverridableComponentProps<BaseProps, {\n    /**\n     * If `true`, the component is checked.\n     * @default false\n     */\n    checked?: boolean;\n\n    /**\n     * Custom icon element to display when the radio is checked.\n     */\n    checkedIcon?: React.ReactNode;\n\n    /**\n     * Content which is sharing pressable next to radio.\n     */\n    children?: string;\n\n    /**\n     * If `true`, the radio is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback fired when the component is pressed.\n     */\n    onChange?: (newValue: string) => void;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * Value of the component.\n     */\n    value: string;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["RadioProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\ntype BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;\n\nexport default interface RadioProps extends OverridableComponentProps<BaseProps, {\n    /**\n     * If `true`, the component is checked.\n     * @default false\n     */\n    checked?: boolean;\n\n    /**\n     * Custom icon element to display when the radio is checked.\n     */\n    checkedIcon?: React.ReactNode;\n\n    /**\n     * Content which is sharing pressable next to radio.\n     */\n    children?: string;\n\n    /**\n     * If `true`, the radio is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback fired when the component is pressed.\n     */\n    onChange?: (newValue: string) => void;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * Value of the component.\n     */\n    value: string;\n\n\n    /**\n     * Helper text displayed below the children.\n     */\n    description?: string;\n}> {}\n"],"mappings":""}

package/build/module/TextField/TextField.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import IconButton from '../IconButton/IconButton';
@@ -8,6 +8,7 @@ import { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons'
 import Row from '../Row';
 import { createFontStyle, useTheme } from '../styles';
 import useVariantStyleMap from './useVariantStyleMap';
+const isWeb = Platform.OS === 'web';
 const styles = StyleSheet.create({
   root: {
     alignItems: 'center',
@@ -52,6 +53,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
   const {
     autoFocus,
     containerStyle: containerStyleProp,
+    multiline,
     editable = true,
     hint,
     isLoading,
@@ -74,6 +76,16 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
   const theme = useTheme();
   const [isFocused, setIsFocused] = useState(autoFocus ?? false);
   const [secureTextEntry, setSecureTextEntry] = useState(secureTextEntryProp ?? false);
+  const internalRef = useRef(null);
+  const mergedRef = useCallback(node => {
+    internalRef.current = node;
+
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   const variantStyles = useVariantStyleMap(variant, status, isFocused);
 
   const handleBlur = event => {
@@ -90,6 +102,22 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     setSecureTextEntry(current => !current);
   };
 
+  const resizeHeight = useCallback(() => {
+    const el = internalRef.current;
+
+    if (el) {
+      el.style.height = 'auto';
+      el.style.height = `${el.scrollHeight}px`;
+    }
+  }, []);
+  useLayoutEffect(() => {
+    const shouldResizeHeight = multiline && isWeb;
+
+    if (shouldResizeHeight) {
+      resizeHeight();
+    }
+  }, [resizeHeight, multiline, value]);
+
   const handleChangeText = text => {
     onChangeTextProp === null || onChangeTextProp === void 0 ? void 0 : onChangeTextProp(text);
   };
@@ -103,7 +131,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     selector: typography => typography.caption1['semiBold'],
     color: theme.palette.text.strong
   });
-  const inputStyle = css([styles.input, variantStyles.inputStyle, variantStyles.inputFontStyle, Platform.OS === 'web' ? {
+  const inputStyle = css([styles.input, variantStyles.inputStyle, variantStyles.inputFontStyle, isWeb ? {
     outlineWidth: 0
   } : {}, styleProp]);
   const placeholderFontStyle = css([variantStyles.inputFontStyle, {
@@ -140,10 +168,11 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
-    ref: ref,
+    ref: mergedRef,
     secureTextEntry: secureTextEntry,
     style: inputStyle,
-    value: value
+    value: value,
+    multiline: multiline
   }, otherProps)))), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/React.createElement(IconButton, {
     color: 'base',
     children: /*#__PURE__*/React.createElement(Clear, {

package/build/module/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","styles","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","inputFontStyle","OS","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    inputWrapper: {\n        flexGrow: 1,\n        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        editable = true,\n        hint,\n        isLoading,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        variantStyles.inputFontStyle,\n        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderFontStyle = css([\n        variantStyles.inputFontStyle,\n        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },\n    ]);\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                <React.Fragment>\n                    {isSearch ? (\n                        <View style={styles.searchIconContainer}>\n                            {isLoading ? (\n                                <LoadingSpinner style={styles.loadingSinner}/>\n                            ) : (\n                                <Search\n                                    color={'base'}\n                                    height={19}\n                                    width={19}\n                                />\n                            )}\n                        </View>\n                    ) : null}\n\n                    <View style={styles.inputWrapper}>\n                        <View\n                            pointerEvents={'none'}\n                            style={styles.placeholderWrapper}\n                        >\n                            {placeholderProp && !value ? (\n                                <Text\n                                    children={placeholderProp}\n                                    numberOfLines={1}\n                                    style={placeholderFontStyle}\n                                />\n                            ) : null}\n                        </View>\n\n                        <TextInput\n                            autoFocus={autoFocus}\n                            editable={!disabled}\n                            onBlur={handleBlur}\n                            onChangeText={handleChangeText}\n                            onFocus={handleFocus}\n                            ref={ref}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <View style={styles.secureButtonContainer}>\n                        <IconButton\n                            color={'base'}\n                            onPress={handleSecureTogglePress}\n                            style={styles.secureToggleButton}\n                        >\n                            {secureTextEntry ? (\n                                <EyeOff\n                                    height={19}\n                                    width={17.42}\n                                />\n                            ) : (\n                                <EyeOn\n                                    height={19}\n                                    width={17.42}\n                                />\n                            )}\n                        </IconButton>\n                    </View>\n                ) : null}\n            </Row>\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useLayoutEffect","useRef","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","isWeb","OS","styles","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","multiline","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","internalRef","mergedRef","node","current","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","inputFontStyle","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst isWeb = Platform.OS === 'web';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    inputWrapper: {\n        flexGrow: 1,\n        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        multiline,\n        editable = true,\n        hint,\n        isLoading,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const internalRef = useRef<TextInput>(null);\n\n    const mergedRef = useCallback((node: TextInput | null) => {\n        (internalRef as React.MutableRefObject<TextInput | null>).current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<TextInput | null>).current = node;\n        }\n    }, [ref]);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const resizeHeight = useCallback(() => {\n        const el = internalRef.current as unknown as HTMLTextAreaElement | null;\n        if (el) {\n            el.style.height = 'auto';\n            el.style.height = `${el.scrollHeight}px`;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        const shouldResizeHeight = multiline && isWeb;\n        if (shouldResizeHeight) {\n            resizeHeight();\n        }\n    }, [resizeHeight, multiline, value]);\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        variantStyles.inputFontStyle,\n        isWeb ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderFontStyle = css([\n        variantStyles.inputFontStyle,\n        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },\n    ]);\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                <React.Fragment>\n                    {isSearch ? (\n                        <View style={styles.searchIconContainer}>\n                            {isLoading ? (\n                                <LoadingSpinner style={styles.loadingSinner}/>\n                            ) : (\n                                <Search\n                                    color={'base'}\n                                    height={19}\n                                    width={19}\n                                />\n                            )}\n                        </View>\n                    ) : null}\n\n                    <View style={styles.inputWrapper}>\n                        <View\n                            pointerEvents={'none'}\n                            style={styles.placeholderWrapper}\n                        >\n                            {placeholderProp && !value ? (\n                                <Text\n                                    children={placeholderProp}\n                                    numberOfLines={1}\n                                    style={placeholderFontStyle}\n                                />\n                            ) : null}\n                        </View>\n\n                        <TextInput\n                            autoFocus={autoFocus}\n                            editable={!disabled}\n                            onBlur={handleBlur}\n                            onChangeText={handleChangeText}\n                            onFocus={handleFocus}\n                            ref={mergedRef}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            multiline={multiline}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <View style={styles.secureButtonContainer}>\n                        <IconButton\n                            color={'base'}\n                            onPress={handleSecureTogglePress}\n                            style={styles.secureToggleButton}\n                        >\n                            {secureTextEntry ? (\n                                <EyeOff\n                                    height={19}\n                                    width={17.42}\n                                />\n                            ) : (\n                                <EyeOn\n                                    height={19}\n                                    width={17.42}\n                                />\n                            )}\n                        </IconButton>\n                    </View>\n                ) : null}\n            </Row>\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/build/module/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useEffect, useState } from 'react';
-import { Platform, Text, View } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
@@ -129,12 +129,16 @@ export default function Tooltip(props) {
   const textStyle = css([fontStyle, {
     flexShrink: 1
   }]);
+  const beakOverlapStyle = {
+    [placement === 'top' ? 'marginTop' : placement === 'bottom' ? 'marginBottom' : placement === 'left' ? 'marginLeft' : 'marginRight']: -StyleSheet.hairlineWidth
+  };
   const beakStyle = css({
     transform: [isVerticalPlacement ? {
       translateX: beakOffset
     } : {
       translateY: beakOffset
-    }]
+    }],
+    ...beakOverlapStyle
   });
   const buttonElem = /*#__PURE__*/React.createElement(ButtonBase, {
     pressEffect: 'none',

package/build/module/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","ButtonBase","createFontStyle","css","useTheme","Beak","DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","paddingBottom","paddingTop","large","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","otherProps","beakOffset","beakPlacement","styles","layout","setLayout","scale","animatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","select","web","display","default","contentStyle","flexGrow","flexShrink","nextScaleValue","fontStyle","selector","typo","body3","regular","caption2","color","text","strongInverse","textStyle","beakStyle","translateX","translateY","buttonElem","beakElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type TooltipProps from './TooltipProps';\nimport type { TooltipBeakLayout, TooltipPlacement, TooltipSize } from './TooltipProps';\nimport Beak from './Beaks';\n\nconst DEFAULT_BEAK_LAYOUT: TooltipBeakLayout = {\n    offset: 0,\n    placement: 'middle',\n};\n\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nconst getFlexDirection = (placement: TooltipPlacement): FlexDirection => {\n    switch (placement) {\n        case 'right':\n            return 'row-reverse';\n        case 'bottom':\n            return 'column-reverse';\n        case 'left':\n            return 'row';\n        case 'top':\n        default:\n            return 'column';\n    }\n};\n\ntype TooltipStyles = NamedStylesStringUnion<'root' | 'content' | 'small' | 'large'>;\n\nconst useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            position: 'absolute',\n            zIndex: theme.zIndex.tooltip,\n        },\n        content: {\n            backgroundColor: theme.palette.fill.base,\n            paddingHorizontal: theme.spacing(2),\n            paddingVertical: theme.spacing(1.5),\n        },\n        small: {\n            borderRadius: theme.shape.radius.sm,\n            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: theme.spacing(2),\n            paddingTop: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        beakLayout = DEFAULT_BEAK_LAYOUT,\n        children,\n        initialLayout = INITIAL_LAYOUT,\n        left,\n        onClose,\n        placement = 'top' as TooltipPlacement,\n        right,\n        numberOfTitleLines = 1,\n        size = 'small' as TooltipSize,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const {\n        offset: beakOffset,\n        placement: beakPlacement,\n    } = beakLayout;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), [scale]);\n\n    const flexDirection = getFlexDirection(placement);\n\n    const isVerticalPlacement = placement === 'top' || placement === 'bottom';\n\n    const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: beakPlacement === 'start'\n            ? 'flex-start'\n            : beakPlacement === 'end'\n                ? 'flex-end'\n                : 'center',\n        flexDirection,\n        left,\n        right,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n        ...Platform.select({\n            web: {\n                display: visible ? 'flex' : 'none',\n            },\n            default: {},\n        }),\n        [placement]: totalOffset,\n    };\n\n    const contentStyle = css([\n        styles.content,\n        styles[size],\n        isVerticalPlacement\n            ? { width: '100%' }\n            : { flexGrow: 1, flexShrink: 1 },\n    ]);\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'large'\n            ? typo.body3.regular\n            : typo.caption2.regular,\n        color: theme.palette.text.strongInverse,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { flexShrink: 1 },\n    ]);\n\n    const beakStyle = css({\n        transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n            style={contentStyle}\n        >\n            <Text\n                // TODO: Should we provide text prop customization?\n                numberOfLines={numberOfTitleLines}\n                style={textStyle}\n            >\n                {title}\n            </Text>\n        </ButtonBase>\n    );\n\n    const beakElem = (\n        <View style={beakStyle}>\n            <Beak\n                fill={theme.palette.fill.base}\n                placement={placement}\n                size={size}\n            />\n        </View>\n    );\n\n    return (\n        <View\n            style={style}\n            {...otherProps}\n        >\n            {children}\n\n            <Animated.View\n                onLayout={(event) => {\n                    if (event.nativeEvent.layout.height === 0) {\n                        return;\n                    }\n\n                    setLayout(event.nativeEvent.layout);\n                }}\n                style={[\n                    styles.root,\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {buttonElem}\n\n                {beakElem}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useState","Platform","StyleSheet","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","ButtonBase","createFontStyle","css","useTheme","Beak","DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","paddingBottom","paddingTop","large","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","otherProps","beakOffset","beakPlacement","styles","layout","setLayout","scale","animatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","select","web","display","default","contentStyle","flexGrow","flexShrink","nextScaleValue","fontStyle","selector","typo","body3","regular","caption2","color","text","strongInverse","textStyle","beakOverlapStyle","hairlineWidth","beakStyle","translateX","translateY","buttonElem","beakElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, StyleSheet, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type TooltipProps from './TooltipProps';\nimport type { TooltipBeakLayout, TooltipPlacement, TooltipSize } from './TooltipProps';\nimport Beak from './Beaks';\n\nconst DEFAULT_BEAK_LAYOUT: TooltipBeakLayout = {\n    offset: 0,\n    placement: 'middle',\n};\n\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nconst getFlexDirection = (placement: TooltipPlacement): FlexDirection => {\n    switch (placement) {\n        case 'right':\n            return 'row-reverse';\n        case 'bottom':\n            return 'column-reverse';\n        case 'left':\n            return 'row';\n        case 'top':\n        default:\n            return 'column';\n    }\n};\n\ntype TooltipStyles = NamedStylesStringUnion<'root' | 'content' | 'small' | 'large'>;\n\nconst useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            position: 'absolute',\n            zIndex: theme.zIndex.tooltip,\n        },\n        content: {\n            backgroundColor: theme.palette.fill.base,\n            paddingHorizontal: theme.spacing(2),\n            paddingVertical: theme.spacing(1.5),\n        },\n        small: {\n            borderRadius: theme.shape.radius.sm,\n            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: theme.spacing(2),\n            paddingTop: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        beakLayout = DEFAULT_BEAK_LAYOUT,\n        children,\n        initialLayout = INITIAL_LAYOUT,\n        left,\n        onClose,\n        placement = 'top' as TooltipPlacement,\n        right,\n        numberOfTitleLines = 1,\n        size = 'small' as TooltipSize,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const {\n        offset: beakOffset,\n        placement: beakPlacement,\n    } = beakLayout;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), [scale]);\n\n    const flexDirection = getFlexDirection(placement);\n\n    const isVerticalPlacement = placement === 'top' || placement === 'bottom';\n\n    const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: beakPlacement === 'start'\n            ? 'flex-start'\n            : beakPlacement === 'end'\n                ? 'flex-end'\n                : 'center',\n        flexDirection,\n        left,\n        right,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n        ...Platform.select({\n            web: {\n                display: visible ? 'flex' : 'none',\n            },\n            default: {},\n        }),\n        [placement]: totalOffset,\n    };\n\n    const contentStyle = css([\n        styles.content,\n        styles[size],\n        isVerticalPlacement\n            ? { width: '100%' }\n            : { flexGrow: 1, flexShrink: 1 },\n    ]);\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'large'\n            ? typo.body3.regular\n            : typo.caption2.regular,\n        color: theme.palette.text.strongInverse,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { flexShrink: 1 },\n    ]);\n\n    const beakOverlapStyle = {\n        [placement === 'top' ? 'marginTop' : placement === 'bottom' ? 'marginBottom' : placement === 'left' ? 'marginLeft' : 'marginRight']: -StyleSheet.hairlineWidth,\n    };\n\n    const beakStyle = css({\n        transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],\n        ...beakOverlapStyle,\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n            style={contentStyle}\n        >\n            <Text\n                // TODO: Should we provide text prop customization?\n                numberOfLines={numberOfTitleLines}\n                style={textStyle}\n            >\n                {title}\n            </Text>\n        </ButtonBase>\n    );\n\n    const beakElem = (\n        <View style={beakStyle}>\n            <Beak\n                fill={theme.palette.fill.base}\n                placement={placement}\n                size={size}\n            />\n        </View>\n    );\n\n    return (\n        <View\n            style={style}\n            {...otherProps}\n        >\n            {children}\n\n            <Animated.View\n                onLayout={(event) => {\n                    if (event.nativeEvent.layout.height === 0) {\n                        return;\n                    }\n\n                    setLayout(event.nativeEvent.layout);\n                }}\n                style={[\n                    styles.root,\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {buttonElem}\n\n                {beakElem}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/module/internal/icons/CloseCircleFillPierced.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+export default createSvgIcon( /*#__PURE__*/React.createElement(Path, {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M11 1C4.92487 1 0 5.92487 0 12C0 18.0751 4.92487 23 11 23C17.0751 23 22 18.0751 22 12C22 5.92487 17.0751 1 11 1ZM8.70711 8.29289C8.31658 7.90237 7.68342 7.90237 7.29289 8.29289C6.90237 8.68342 6.90237 9.31658 7.29289 9.70711L9.58579 12L7.29289 14.2929C6.90237 14.6834 6.90237 15.3166 7.29289 15.7071C7.68342 16.0976 8.31658 16.0976 8.70711 15.7071L11 13.4142L13.2929 15.7071C13.6834 16.0976 14.3166 16.0976 14.7071 15.7071C15.0976 15.3166 15.0976 14.6834 14.7071 14.2929L12.4142 12L14.7071 9.70711C15.0976 9.31658 15.0976 8.68342 14.7071 8.29289C14.3166 7.90237 13.6834 7.90237 13.2929 8.29289L11 10.5858L8.70711 8.29289Z"
+}), 'CloseCircleFillPierced', '0 0 22 24');
+//# sourceMappingURL=CloseCircleFillPierced.js.map

package/build/module/internal/icons/CloseCircleFillPierced.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Path","createSvgIcon"],"sources":["CloseCircleFillPierced.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M11 1C4.92487 1 0 5.92487 0 12C0 18.0751 4.92487 23 11 23C17.0751 23 22 18.0751 22 12C22 5.92487 17.0751 1 11 1ZM8.70711 8.29289C8.31658 7.90237 7.68342 7.90237 7.29289 8.29289C6.90237 8.68342 6.90237 9.31658 7.29289 9.70711L9.58579 12L7.29289 14.2929C6.90237 14.6834 6.90237 15.3166 7.29289 15.7071C7.68342 16.0976 8.31658 16.0976 8.70711 15.7071L11 13.4142L13.2929 15.7071C13.6834 16.0976 14.3166 16.0976 14.7071 15.7071C15.0976 15.3166 15.0976 14.6834 14.7071 14.2929L12.4142 12L14.7071 9.70711C15.0976 9.31658 15.0976 8.68342 14.7071 8.29289C14.3166 7.90237 13.6834 7.90237 13.2929 8.29289L11 10.5858L8.70711 8.29289Z\"\n    />,\n    'CloseCircleFillPierced',\n    '0 0 22 24',\n);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,aAAT,QAA8B,aAA9B;AAEA,eAAeA,aAAa,eACxB,oBAAC,IAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADwB,EAMxB,wBANwB,EAOxB,WAPwB,CAA5B"}

package/build/module/internal/icons/index.js

@@ -11,6 +11,7 @@ export { default as ChipClose } from './ChipClose';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Clear } from './Clear';
 export { default as Close } from './Close';
+export { default as CloseCircleFillPierced } from './CloseCircleFillPierced';
 export { default as EyeOff } from './EyeOff';
 export { default as EyeOn } from './EyeOn';
 export { default as InfoCircle } from './InfoCircle';

package/build/module/internal/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","AppBarChevronLeft","Check","Checkbox","CheckboxChecked","CheckboxOn","CheckCircle","ChevronDown","ChevronLeft","ChevronRight","ChipClose","CircularProgress","Clear","Close","EyeOff","EyeOn","InfoCircle","LoadingSpinner","Radio","RadioChecked","Search"],"sources":["index.ts"],"sourcesContent":["export { default as AppBarChevronLeft } from './AppBarChevronLeft';\nexport { default as Check } from './Check';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxChecked } from './CheckboxChecked';\nexport { default as CheckboxOn } from './CheckboxOn';\nexport { default as CheckCircle } from './CheckCircle';\nexport { default as ChevronDown } from './ChevronDown';\nexport { default as ChevronLeft } from './ChevronLeft';\nexport { default as ChevronRight } from './ChevronRight';\nexport { default as ChipClose } from './ChipClose';\nexport { default as CircularProgress } from './CircularProgress';\nexport { default as Clear } from './Clear';\nexport { default as Close } from './Close';\nexport { default as EyeOff } from './EyeOff';\nexport { default as EyeOn } from './EyeOn';\nexport { default as InfoCircle } from './InfoCircle';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Radio } from './Radio';\nexport { default as RadioChecked } from './RadioChecked';\nexport { default as Search } from './Search';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,qBAA7C;AACA,SAASD,OAAO,IAAIE,KAApB,QAAiC,SAAjC;AACA,SAASF,OAAO,IAAIG,QAApB,QAAoC,YAApC;AACA,SAASH,OAAO,IAAII,eAApB,QAA2C,mBAA3C;AACA,SAASJ,OAAO,IAAIK,UAApB,QAAsC,cAAtC;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,SAASN,OAAO,IAAIO,WAApB,QAAuC,eAAvC;AACA,SAASP,OAAO,IAAIQ,WAApB,QAAuC,eAAvC;AACA,SAASR,OAAO,IAAIS,YAApB,QAAwC,gBAAxC;AACA,SAAST,OAAO,IAAIU,SAApB,QAAqC,aAArC;AACA,SAASV,OAAO,IAAIW,gBAApB,QAA4C,oBAA5C;AACA,SAASX,OAAO,IAAIY,KAApB,QAAiC,SAAjC;AACA,SAASZ,OAAO,IAAIa,KAApB,QAAiC,SAAjC;AACA,SAASb,OAAO,IAAIc,MAApB,QAAkC,UAAlC;AACA,SAASd,OAAO,IAAIe,KAApB,QAAiC,SAAjC;AACA,SAASf,OAAO,IAAIgB,UAApB,QAAsC,cAAtC;AACA,SAAShB,OAAO,IAAIiB,cAApB,QAA0C,kBAA1C;AACA,SAASjB,OAAO,IAAIkB,KAApB,QAAiC,SAAjC;AACA,SAASlB,OAAO,IAAImB,YAApB,QAAwC,gBAAxC;AACA,SAASnB,OAAO,IAAIoB,MAApB,QAAkC,UAAlC"}
+{"version":3,"names":["default","AppBarChevronLeft","Check","Checkbox","CheckboxChecked","CheckboxOn","CheckCircle","ChevronDown","ChevronLeft","ChevronRight","ChipClose","CircularProgress","Clear","Close","CloseCircleFillPierced","EyeOff","EyeOn","InfoCircle","LoadingSpinner","Radio","RadioChecked","Search"],"sources":["index.ts"],"sourcesContent":["export { default as AppBarChevronLeft } from './AppBarChevronLeft';\nexport { default as Check } from './Check';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxChecked } from './CheckboxChecked';\nexport { default as CheckboxOn } from './CheckboxOn';\nexport { default as CheckCircle } from './CheckCircle';\nexport { default as ChevronDown } from './ChevronDown';\nexport { default as ChevronLeft } from './ChevronLeft';\nexport { default as ChevronRight } from './ChevronRight';\nexport { default as ChipClose } from './ChipClose';\nexport { default as CircularProgress } from './CircularProgress';\nexport { default as Clear } from './Clear';\nexport { default as Close } from './Close';\nexport { default as CloseCircleFillPierced } from './CloseCircleFillPierced';\nexport { default as EyeOff } from './EyeOff';\nexport { default as EyeOn } from './EyeOn';\nexport { default as InfoCircle } from './InfoCircle';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Radio } from './Radio';\nexport { default as RadioChecked } from './RadioChecked';\nexport { default as Search } from './Search';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,qBAA7C;AACA,SAASD,OAAO,IAAIE,KAApB,QAAiC,SAAjC;AACA,SAASF,OAAO,IAAIG,QAApB,QAAoC,YAApC;AACA,SAASH,OAAO,IAAII,eAApB,QAA2C,mBAA3C;AACA,SAASJ,OAAO,IAAIK,UAApB,QAAsC,cAAtC;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,SAASN,OAAO,IAAIO,WAApB,QAAuC,eAAvC;AACA,SAASP,OAAO,IAAIQ,WAApB,QAAuC,eAAvC;AACA,SAASR,OAAO,IAAIS,YAApB,QAAwC,gBAAxC;AACA,SAAST,OAAO,IAAIU,SAApB,QAAqC,aAArC;AACA,SAASV,OAAO,IAAIW,gBAApB,QAA4C,oBAA5C;AACA,SAASX,OAAO,IAAIY,KAApB,QAAiC,SAAjC;AACA,SAASZ,OAAO,IAAIa,KAApB,QAAiC,SAAjC;AACA,SAASb,OAAO,IAAIc,sBAApB,QAAkD,0BAAlD;AACA,SAASd,OAAO,IAAIe,MAApB,QAAkC,UAAlC;AACA,SAASf,OAAO,IAAIgB,KAApB,QAAiC,SAAjC;AACA,SAAShB,OAAO,IAAIiB,UAApB,QAAsC,cAAtC;AACA,SAASjB,OAAO,IAAIkB,cAApB,QAA0C,kBAA1C;AACA,SAASlB,OAAO,IAAImB,KAApB,QAAiC,SAAjC;AACA,SAASnB,OAAO,IAAIoB,YAApB,QAAwC,gBAAxC;AACA,SAASpB,OAAO,IAAIqB,MAApB,QAAkC,UAAlC"}

package/build/typescript/Image/Image.d.ts

@@ -1,2 +1,7 @@
 import type ImageProps from './ImageProps';
-export default function Image(props: ImageProps): JSX.Element;
+declare function Image(props: ImageProps): JSX.Element;
+declare namespace Image {
+    var OverlayCloseButton: typeof import("./OverlayCloseButton").default;
+    var preload: typeof import("./preload").default;
+}
+export default Image;

package/build/typescript/Image/ImageProps.d.ts

@@ -23,6 +23,12 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     disableLongClick?: boolean;
+    /**
+     * If true, disables the fade-in opacity animation on image load.
+     * Only affects native platforms.
+     * @default false
+     */
+    disableFadeIn?: boolean;
     /**
      * If `true`, the image outline is not rendered.
      * @default false

package/build/typescript/Image/OverlayCloseButton/OverlayCloseButton.d.ts

@@ -0,0 +1,2 @@
+import type OverlayCloseButtonProps from './OverlayCloseButtonProps';
+export default function OverlayCloseButton(props: OverlayCloseButtonProps): JSX.Element;

package/build/typescript/Image/OverlayCloseButton/OverlayCloseButtonProps.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonProps } from '../../IconButton';
+export default interface OverlayCloseButtonProps extends Omit<IconButtonProps, 'children'> {
+}

package/build/typescript/Image/OverlayCloseButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './OverlayCloseButton';
+export type { default as OverlayCloseButtonProps } from './OverlayCloseButtonProps';

package/build/typescript/Image/preload.d.ts

@@ -0,0 +1,2 @@
+import type { ImageSource } from '../ImageCore';
+export default function preload(_sources: ImageSource[]): void;

package/build/typescript/Image/preload.native.d.ts

@@ -0,0 +1,2 @@
+import type { ImageSource } from '../ImageCore';
+export default function preload(sources: ImageSource[]): void;

package/build/typescript/ImageCore/ImageCoreProps.d.ts

@@ -8,6 +8,7 @@ export default interface ImageCoreProps extends Readonly<{
     alt?: string;
     cache?: CacheControl;
     disableDrag?: boolean;
+    disableFadeIn?: boolean;
     disableLongClick?: boolean;
     height?: number | string;
     loading: Loading;

package/build/typescript/Radio/RadioProps.d.ts

@@ -33,6 +33,10 @@ export default interface RadioProps extends OverridableComponentProps<BaseProps,
      * Value of the component.
      */
     value: string;
+    /**
+     * Helper text displayed below the children.
+     */
+    description?: string;
 }> {
 }
 export {};