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

package/build/commonjs/Image/Image.js

@@ -15,6 +15,8 @@ var _styles = require("../styles");
 
 var _OverlayCloseButton = _interopRequireDefault(require("./OverlayCloseButton"));
 
+var _preload = _interopRequireDefault(require("./preload"));
+
 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); }
@@ -69,6 +71,7 @@ function Image(props) {
     alt,
     cache = 'immutable',
     disableDrag,
+    disableFadeIn,
     disableLongClick,
     disableOutline,
     disablePlaceholder,
@@ -113,6 +116,7 @@ function Image(props) {
     alt: alt,
     cache: cache,
     disableDrag: disableDrag,
+    disableFadeIn: disableFadeIn,
     disableLongClick: disableLongClick,
     height: '100%',
     loading: loading,
@@ -127,6 +131,7 @@ function Image(props) {
 }
 
 Image.OverlayCloseButton = _OverlayCloseButton.default;
+Image.preload = _preload.default;
 var _default = Image;
 exports.default = _default;
 //# sourceMappingURL=Image.js.map

package/build/commonjs/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","borderStyle","borderColor","border","weak","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","placeholderMode","css","undefined","StyleSheet","absoluteFill","zIndex","uri","OverlayCloseButton"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\nimport OverlayCloseButton from './OverlayCloseButton';\n\ntype PlaceholderMode =\n    | 'default'\n    | 'custom'\n    | 'none';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined'\n    | 'error'\n    | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: 0.5,\n            borderStyle: 'solid',\n            borderColor: theme.palette.border.weak,\n        },\n        error: {\n            alignItems: 'center',\n            height: '100%',\n            justifyContent: 'center',\n            width: '100%',\n        },\n        errorText: {\n            color: theme.palette.text.primary,\n            fontFamily: 'Inter-Medium',\n            fontSize: 12,\n            letterSpacing: 0,\n            lineHeight: 18,\n            textAlign: 'center',\n        },\n    };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n    if (props.disablePlaceholder) {\n        return 'none';\n    }\n\n    return props.placeholder ? 'custom' : 'default';\n}\n\nfunction Image(props: ImageProps) {\n    const {\n        alt,\n        cache = 'immutable',\n        disableDrag,\n        disableLongClick,\n        disableOutline,\n        disablePlaceholder,\n        error,\n        loading = 'lazy',\n        onError: onErrorProp,\n        onLoad: onLoadProp,\n        overlaidChildren,\n        placeholder,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = useState(false);\n\n    const styles = useStyles();\n\n    const onLoad: ImageCoreProps['onLoad'] = () => {\n        setFailed(false);\n\n        onLoadProp?.();\n    };\n\n    const onError: ImageCoreProps['onError'] = () => {\n        setFailed(true);\n\n        onErrorProp?.();\n    };\n\n    const placeholderMode = determinePlaceholderMode(props);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !square ? styles.rounded : undefined,\n                placeholderMode === 'default' ? styles.placeholder : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {placeholderMode === 'custom' ? (\n                <View\n                    style={css([\n                        StyleSheet.absoluteFill,\n                        { zIndex: -1 },\n                    ])}\n                >\n                    {placeholder}\n                </View>\n            ) : null}\n\n            {failed ? (\n                <View style={styles.error}>\n                    {error ?? (\n                        <Text\n                            children={alt}\n                            style={styles.errorText}\n                        />\n                    )}\n                </View>\n            ) : source.uri ? (\n                <ImageCore\n                    alt={alt}\n                    cache={cache}\n                    disableDrag={disableDrag}\n                    disableLongClick={disableLongClick}\n                    height={'100%'}\n                    loading={loading}\n                    onError={onError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={source}\n                    width={'100%'}\n                />\n            ) : null}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n}\n\nImage.OverlayCloseButton = OverlayCloseButton;\n\nexport default Image;\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","borderStyle","borderColor","border","weak","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableFadeIn","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","placeholderMode","css","undefined","StyleSheet","absoluteFill","zIndex","uri","OverlayCloseButton","preload"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\nimport OverlayCloseButton from './OverlayCloseButton';\nimport preload from './preload';\n\ntype PlaceholderMode =\n    | 'default'\n    | 'custom'\n    | 'none';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined'\n    | 'error'\n    | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: 0.5,\n            borderStyle: 'solid',\n            borderColor: theme.palette.border.weak,\n        },\n        error: {\n            alignItems: 'center',\n            height: '100%',\n            justifyContent: 'center',\n            width: '100%',\n        },\n        errorText: {\n            color: theme.palette.text.primary,\n            fontFamily: 'Inter-Medium',\n            fontSize: 12,\n            letterSpacing: 0,\n            lineHeight: 18,\n            textAlign: 'center',\n        },\n    };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n    if (props.disablePlaceholder) {\n        return 'none';\n    }\n\n    return props.placeholder ? 'custom' : 'default';\n}\n\nfunction Image(props: ImageProps) {\n    const {\n        alt,\n        cache = 'immutable',\n        disableDrag,\n        disableFadeIn,\n        disableLongClick,\n        disableOutline,\n        disablePlaceholder,\n        error,\n        loading = 'lazy',\n        onError: onErrorProp,\n        onLoad: onLoadProp,\n        overlaidChildren,\n        placeholder,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = useState(false);\n\n    const styles = useStyles();\n\n    const onLoad: ImageCoreProps['onLoad'] = () => {\n        setFailed(false);\n\n        onLoadProp?.();\n    };\n\n    const onError: ImageCoreProps['onError'] = () => {\n        setFailed(true);\n\n        onErrorProp?.();\n    };\n\n    const placeholderMode = determinePlaceholderMode(props);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !square ? styles.rounded : undefined,\n                placeholderMode === 'default' ? styles.placeholder : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {placeholderMode === 'custom' ? (\n                <View\n                    style={css([\n                        StyleSheet.absoluteFill,\n                        { zIndex: -1 },\n                    ])}\n                >\n                    {placeholder}\n                </View>\n            ) : null}\n\n            {failed ? (\n                <View style={styles.error}>\n                    {error ?? (\n                        <Text\n                            children={alt}\n                            style={styles.errorText}\n                        />\n                    )}\n                </View>\n            ) : source.uri ? (\n                <ImageCore\n                    alt={alt}\n                    cache={cache}\n                    disableDrag={disableDrag}\n                    disableFadeIn={disableFadeIn}\n                    disableLongClick={disableLongClick}\n                    height={'100%'}\n                    loading={loading}\n                    onError={onError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={source}\n                    width={'100%'}\n                />\n            ) : null}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n}\n\nImage.OverlayCloseButton = OverlayCloseButton;\nImage.preload = preload;\n\nexport default Image;\n"],"mappings":"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"}

package/build/commonjs/Image/ImageProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ImageProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type { ImageSource, Loading, ResizeMode, CacheControl } from '../ImageCore';\n\n/**\n * Image file quality.\n * Request image by query string.\n */\nexport type ImageQuality = 'small' | 'medium' | 'large';\n\nexport default interface ImageProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Indicating the alternate fallback content to be displayed\n     * if the image has not been loaded.\n     */\n    alt?: string;\n\n    /**\n     * Disable drag event for web.\n     * @default false\n     */\n    disableDrag?: boolean,\n\n    /**\n     * Disable Long click event for web.\n     * @default false\n     */\n    disableLongClick?: boolean,\n\n    /**\n     * If `true`, the image outline is not rendered.\n     * @default false\n     */\n    disableOutline?: boolean;\n\n    /**\n     * If `true`, the placeholder is not rendered.\n     * @default false\n     */\n    disablePlaceholder?: boolean;\n\n    /**\n     * Custom error element. Default is simple alt text.\n     */\n    error?: React.ReactElement | null;\n\n    /**\n     * Web only. Loading the document by determining whether to load\n     * the image immediately (`eager`) or on an as-needed basis (`lazy`).\n     * On React Native, it always works as `lazy`.\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * error event handler\n     */\n    onError?: () => void;\n\n    /**\n     * image loaded event handler\n     */\n    onLoad?: () => void;\n\n    /**\n     * The children on top this image.\n     */\n    overlaidChildren?: React.ReactElement;\n\n    /**\n     * Custom placeholder element.\n     */\n    placeholder?: React.ReactElement;\n\n    /**\n     * Determines how to resize the image when the frame doesn't match the raw image dimensions.\n     * @default 'cover'\n     */\n    resizeMode?: ResizeMode;\n\n    /**\n     * The image source.\n     */\n    source: ImageSource;\n\n    /**\n     * If `true`, rounded corners are disabled.\n     * @default false\n     */\n    square?: boolean;\n\n    /***\n     * FastImage cache control value.\n     * @default 'immutable'\n     */\n    cache?: CacheControl;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ImageProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type { ImageSource, Loading, ResizeMode, CacheControl } from '../ImageCore';\n\n/**\n * Image file quality.\n * Request image by query string.\n */\nexport type ImageQuality = 'small' | 'medium' | 'large';\n\nexport default interface ImageProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Indicating the alternate fallback content to be displayed\n     * if the image has not been loaded.\n     */\n    alt?: string;\n\n    /**\n     * Disable drag event for web.\n     * @default false\n     */\n    disableDrag?: boolean,\n\n    /**\n     * Disable Long click event for web.\n     * @default false\n     */\n    disableLongClick?: boolean,\n\n    /**\n     * If true, disables the fade-in opacity animation on image load.\n     * Only affects native platforms.\n     * @default false\n     */\n    disableFadeIn?: boolean;\n\n    /**\n     * If `true`, the image outline is not rendered.\n     * @default false\n     */\n    disableOutline?: boolean;\n\n    /**\n     * If `true`, the placeholder is not rendered.\n     * @default false\n     */\n    disablePlaceholder?: boolean;\n\n    /**\n     * Custom error element. Default is simple alt text.\n     */\n    error?: React.ReactElement | null;\n\n    /**\n     * Web only. Loading the document by determining whether to load\n     * the image immediately (`eager`) or on an as-needed basis (`lazy`).\n     * On React Native, it always works as `lazy`.\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * error event handler\n     */\n    onError?: () => void;\n\n    /**\n     * image loaded event handler\n     */\n    onLoad?: () => void;\n\n    /**\n     * The children on top this image.\n     */\n    overlaidChildren?: React.ReactElement;\n\n    /**\n     * Custom placeholder element.\n     */\n    placeholder?: React.ReactElement;\n\n    /**\n     * Determines how to resize the image when the frame doesn't match the raw image dimensions.\n     * @default 'cover'\n     */\n    resizeMode?: ResizeMode;\n\n    /**\n     * The image source.\n     */\n    source: ImageSource;\n\n    /**\n     * If `true`, rounded corners are disabled.\n     * @default false\n     */\n    square?: boolean;\n\n    /***\n     * FastImage cache control value.\n     * @default 'immutable'\n     */\n    cache?: CacheControl;\n}> {}\n"],"mappings":""}

package/build/commonjs/Image/preload.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = preload;
+
+function preload(_sources) {// No-op on web
+}
+//# sourceMappingURL=preload.js.map

package/build/commonjs/Image/preload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["preload","_sources"],"sources":["preload.ts"],"sourcesContent":["import type { ImageSource } from '../ImageCore';\n\nexport default function preload(_sources: ImageSource[]) {\n    // No-op on web\n}\n"],"mappings":";;;;;;;AAEe,SAASA,OAAT,CAAiBC,QAAjB,EAA0C,CACrD;AACH"}

package/build/commonjs/Image/preload.native.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = preload;
+
+var _reactNativeFastImage = _interopRequireDefault(require("@d11/react-native-fast-image"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function preload(sources) {
+  _reactNativeFastImage.default.preload(sources.map(_ref => {
+    let {
+      uri
+    } = _ref;
+    return {
+      uri
+    };
+  }));
+}
+//# sourceMappingURL=preload.native.js.map

package/build/commonjs/Image/preload.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["preload","sources","FastImage","map","uri"],"sources":["preload.native.ts"],"sourcesContent":["import FastImage from '@d11/react-native-fast-image';\nimport type { ImageSource } from '../ImageCore';\n\nexport default function preload(sources: ImageSource[]) {\n    FastImage.preload(sources.map(({ uri }) => ({ uri })));\n}\n"],"mappings":";;;;;;;AAAA;;;;AAGe,SAASA,OAAT,CAAiBC,OAAjB,EAAyC;EACpDC,6BAAA,CAAUF,OAAV,CAAkBC,OAAO,CAACE,GAAR,CAAY;IAAA,IAAC;MAAEC;IAAF,CAAD;IAAA,OAAc;MAAEA;IAAF,CAAd;EAAA,CAAZ,CAAlB;AACH"}

package/build/commonjs/ImageCore/ImageCoreNative.js

@@ -33,6 +33,7 @@ const ANIMATION_DURATION = 200;
 function ImageCore(props) {
   const {
     cache,
+    disableFadeIn,
     height,
     onError,
     onLoad,
@@ -40,17 +41,19 @@ function ImageCore(props) {
     source,
     width
   } = props;
-  const opacity = (0, _hooks.useAnimatedValue)(INITIAL_OPACITY);
+  const opacity = (0, _hooks.useAnimatedValue)(disableFadeIn ? LOADED_OPACITY : INITIAL_OPACITY);
   const acceptHeader = (0, _react.useContext)(_ImageFileExtensionContext.default);
   const handleLoad = (0, _react.useCallback)(() => {
-    _reactNative.Animated.timing(opacity, {
-      toValue: LOADED_OPACITY,
-      duration: ANIMATION_DURATION,
-      useNativeDriver: _utils.isNotAndroid12
-    }).start();
+    if (!disableFadeIn) {
+      _reactNative.Animated.timing(opacity, {
+        toValue: LOADED_OPACITY,
+        duration: ANIMATION_DURATION,
+        useNativeDriver: _utils.isNotAndroid12
+      }).start();
+    }
 
     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
-  }, [onLoad]);
+  }, [disableFadeIn, onLoad]);
   return /*#__PURE__*/_react.default.createElement(AnimatedFastImage, {
     onError: onError,
     onLoad: handleLoad,

package/build/commonjs/ImageCore/ImageCoreNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["AnimatedFastImage","Animated","createAnimatedComponent","FastImage","INITIAL_OPACITY","LOADED_OPACITY","ANIMATION_DURATION","ImageCore","props","cache","height","onError","onLoad","resizeMode","source","width","opacity","useAnimatedValue","acceptHeader","useContext","ImageFileExtensionContext","handleLoad","useCallback","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","uri","headers"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Animated, DimensionValue } from 'react-native';\nimport FastImage from '@d11/react-native-fast-image';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport type ImageCoreProps from './ImageCoreProps';\nimport ImageFileExtensionContext from './ImageFileExtensionContext';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst INITIAL_OPACITY = 0;\nconst LOADED_OPACITY = 1;\n\nconst ANIMATION_DURATION = 200;\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        cache,\n        height,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const opacity = useAnimatedValue(INITIAL_OPACITY);\n\n    const acceptHeader = useContext(ImageFileExtensionContext);\n\n    const handleLoad = useCallback(() => {\n        Animated.timing(opacity, {\n            toValue: LOADED_OPACITY,\n            duration: ANIMATION_DURATION,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n\n        onLoad?.();\n    }, [onLoad]);\n\n    return (\n        <AnimatedFastImage\n            onError={onError}\n            onLoad={handleLoad}\n            resizeMode={resizeMode}\n            source={{\n                cache,\n                uri: source.uri,\n                headers: {\n                    'Accept': acceptHeader,\n                },\n            }}\n            style={[\n                { opacity },\n                { width: width as DimensionValue, height: height as DimensionValue },\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;AAEA;AACA,MAAMA,iBAAiB,GAAGC,qBAAA,CAASC,uBAAT,CAAiCC,6BAAjC,CAA1B;;AAEA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,cAAc,GAAG,CAAvB;AAEA,MAAMC,kBAAkB,GAAG,GAA3B;;AAEe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,KADE;IAEFC,MAFE;IAGFC,OAHE;IAIFC,MAJE;IAKFC,UALE;IAMFC,MANE;IAOFC;EAPE,IAQFP,KARJ;EAUA,MAAMQ,OAAO,GAAG,IAAAC,uBAAA,EAAiBb,eAAjB,CAAhB;EAEA,MAAMc,YAAY,GAAG,IAAAC,iBAAA,EAAWC,kCAAX,CAArB;EAEA,MAAMC,UAAU,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACjCrB,qBAAA,CAASsB,MAAT,CAAgBP,OAAhB,EAAyB;MACrBQ,OAAO,EAAEnB,cADY;MAErBoB,QAAQ,EAAEnB,kBAFW;MAGrBoB,eAAe,EAAEC;IAHI,CAAzB,EAIGC,KAJH;;IAMAhB,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;EACT,CARkB,EAQhB,CAACA,MAAD,CARgB,CAAnB;EAUA,oBACI,6BAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAEU,UAFZ;IAGI,UAAU,EAAER,UAHhB;IAII,MAAM,EAAE;MACJJ,KADI;MAEJoB,GAAG,EAAEf,MAAM,CAACe,GAFR;MAGJC,OAAO,EAAE;QACL,UAAUZ;MADL;IAHL,CAJZ;IAWI,KAAK,EAAE,CACH;MAAEF;IAAF,CADG,EAEH;MAAED,KAAK,EAAEA,KAAT;MAAkCL,MAAM,EAAEA;IAA1C,CAFG;EAXX,EADJ;AAkBH;;AAAA"}
+{"version":3,"names":["AnimatedFastImage","Animated","createAnimatedComponent","FastImage","INITIAL_OPACITY","LOADED_OPACITY","ANIMATION_DURATION","ImageCore","props","cache","disableFadeIn","height","onError","onLoad","resizeMode","source","width","opacity","useAnimatedValue","acceptHeader","useContext","ImageFileExtensionContext","handleLoad","useCallback","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","uri","headers"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Animated, DimensionValue } from 'react-native';\nimport FastImage from '@d11/react-native-fast-image';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport type ImageCoreProps from './ImageCoreProps';\nimport ImageFileExtensionContext from './ImageFileExtensionContext';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst INITIAL_OPACITY = 0;\nconst LOADED_OPACITY = 1;\n\nconst ANIMATION_DURATION = 200;\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        cache,\n        disableFadeIn,\n        height,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const opacity = useAnimatedValue(disableFadeIn ? LOADED_OPACITY : INITIAL_OPACITY);\n\n    const acceptHeader = useContext(ImageFileExtensionContext);\n\n    const handleLoad = useCallback(() => {\n        if (!disableFadeIn) {\n            Animated.timing(opacity, {\n                toValue: LOADED_OPACITY,\n                duration: ANIMATION_DURATION,\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n\n        onLoad?.();\n    }, [disableFadeIn, onLoad]);\n\n    return (\n        <AnimatedFastImage\n            onError={onError}\n            onLoad={handleLoad}\n            resizeMode={resizeMode}\n            source={{\n                cache,\n                uri: source.uri,\n                headers: {\n                    'Accept': acceptHeader,\n                },\n            }}\n            style={[\n                { opacity },\n                { width: width as DimensionValue, height: height as DimensionValue },\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;AAEA;AACA,MAAMA,iBAAiB,GAAGC,qBAAA,CAASC,uBAAT,CAAiCC,6BAAjC,CAA1B;;AAEA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,cAAc,GAAG,CAAvB;AAEA,MAAMC,kBAAkB,GAAG,GAA3B;;AAEe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,KADE;IAEFC,aAFE;IAGFC,MAHE;IAIFC,OAJE;IAKFC,MALE;IAMFC,UANE;IAOFC,MAPE;IAQFC;EARE,IASFR,KATJ;EAWA,MAAMS,OAAO,GAAG,IAAAC,uBAAA,EAAiBR,aAAa,GAAGL,cAAH,GAAoBD,eAAlD,CAAhB;EAEA,MAAMe,YAAY,GAAG,IAAAC,iBAAA,EAAWC,kCAAX,CAArB;EAEA,MAAMC,UAAU,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACjC,IAAI,CAACb,aAAL,EAAoB;MAChBT,qBAAA,CAASuB,MAAT,CAAgBP,OAAhB,EAAyB;QACrBQ,OAAO,EAAEpB,cADY;QAErBqB,QAAQ,EAAEpB,kBAFW;QAGrBqB,eAAe,EAAEC;MAHI,CAAzB,EAIGC,KAJH;IAKH;;IAEDhB,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;EACT,CAVkB,EAUhB,CAACH,aAAD,EAAgBG,MAAhB,CAVgB,CAAnB;EAYA,oBACI,6BAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAEU,UAFZ;IAGI,UAAU,EAAER,UAHhB;IAII,MAAM,EAAE;MACJL,KADI;MAEJqB,GAAG,EAAEf,MAAM,CAACe,GAFR;MAGJC,OAAO,EAAE;QACL,UAAUZ;MADL;IAHL,CAJZ;IAWI,KAAK,EAAE,CACH;MAAEF;IAAF,CADG,EAEH;MAAED,KAAK,EAAEA,KAAT;MAAkCL,MAAM,EAAEA;IAA1C,CAFG;EAXX,EADJ;AAkBH;;AAAA"}

package/build/commonjs/ImageCore/ImageCoreProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ImageCoreProps.ts"],"sourcesContent":["export interface ImageSource {\n    uri?: string;\n}\n\nexport type ResizeMode = 'cover' | 'contain';\n\nexport type Loading = 'lazy' | 'eager';\n\nexport type CacheControl = 'immutable' | 'web' | 'cacheOnly';\n\nexport default interface ImageCoreProps extends Readonly<{\n    alt?: string;\n    cache?: CacheControl;\n    disableDrag?: boolean,\n    disableLongClick?: boolean,\n    height?: number | string;\n    loading: Loading;\n    onError?: () => void;\n    onLoad?: () => void;\n    resizeMode: ResizeMode;\n    source: ImageSource;\n    width?: number | string;\n}> {}"],"mappings":""}
+{"version":3,"names":[],"sources":["ImageCoreProps.ts"],"sourcesContent":["export interface ImageSource {\n    uri?: string;\n}\n\nexport type ResizeMode = 'cover' | 'contain';\n\nexport type Loading = 'lazy' | 'eager';\n\nexport type CacheControl = 'immutable' | 'web' | 'cacheOnly';\n\nexport default interface ImageCoreProps extends Readonly<{\n    alt?: string;\n    cache?: CacheControl;\n    disableDrag?: boolean,\n    disableFadeIn?: boolean,\n    disableLongClick?: boolean,\n    height?: number | string;\n    loading: Loading;\n    onError?: () => void;\n    onLoad?: () => void;\n    resizeMode: ResizeMode;\n    source: ImageSource;\n    width?: number | string;\n}> {}"],"mappings":""}

package/build/commonjs/TextField/TextField.js

@@ -29,6 +29,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const isWeb = _reactNative.Platform.OS === 'web';
+
 const styles = _reactNative.StyleSheet.create({
   root: {
     alignItems: 'center',
@@ -74,6 +76,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
   const {
     autoFocus,
     containerStyle: containerStyleProp,
+    multiline,
     editable = true,
     hint,
     isLoading,
@@ -96,6 +99,16 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
   const theme = (0, _styles2.useTheme)();
   const [isFocused, setIsFocused] = (0, _react.useState)(autoFocus ?? false);
   const [secureTextEntry, setSecureTextEntry] = (0, _react.useState)(secureTextEntryProp ?? false);
+  const internalRef = (0, _react.useRef)(null);
+  const mergedRef = (0, _react.useCallback)(node => {
+    internalRef.current = node;
+
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   const variantStyles = (0, _useVariantStyleMap.default)(variant, status, isFocused);
 
   const handleBlur = event => {
@@ -112,6 +125,22 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     setSecureTextEntry(current => !current);
   };
 
+  const resizeHeight = (0, _react.useCallback)(() => {
+    const el = internalRef.current;
+
+    if (el) {
+      el.style.height = 'auto';
+      el.style.height = `${el.scrollHeight}px`;
+    }
+  }, []);
+  (0, _react.useLayoutEffect)(() => {
+    const shouldResizeHeight = multiline && isWeb;
+
+    if (shouldResizeHeight) {
+      resizeHeight();
+    }
+  }, [resizeHeight, multiline, value]);
+
   const handleChangeText = text => {
     onChangeTextProp === null || onChangeTextProp === void 0 ? void 0 : onChangeTextProp(text);
   };
@@ -125,7 +154,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     selector: typography => typography.caption1['semiBold'],
     color: theme.palette.text.strong
   });
-  const inputStyle = (0, _styles.css)([styles.input, variantStyles.inputStyle, variantStyles.inputFontStyle, _reactNative.Platform.OS === 'web' ? {
+  const inputStyle = (0, _styles.css)([styles.input, variantStyles.inputStyle, variantStyles.inputFontStyle, isWeb ? {
     outlineWidth: 0
   } : {}, styleProp]);
   const placeholderFontStyle = (0, _styles.css)([variantStyles.inputFontStyle, {
@@ -162,10 +191,11 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     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.default.createElement(_IconButton.default, {
     color: 'base',
     children: /*#__PURE__*/_react.default.createElement(_icons.Clear, {

package/build/commonjs/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","React","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","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","inputFontStyle","Platform","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":["isWeb","Platform","OS","styles","StyleSheet","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","React","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","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","internalRef","useRef","mergedRef","useCallback","node","current","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","useLayoutEffect","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","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":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;;;;;AAEA,MAAMA,KAAK,GAAGC,qBAAA,CAASC,EAAT,KAAgB,KAA9B;;AAEA,MAAMC,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,QAAQ,EAAE;EAFR,CADuB;EAK7BC,KAAK,EAAE;IACHD,QAAQ,EAAE;EADP,CALsB;EAQ7BE,YAAY,EAAE;IACVF,QAAQ,EAAE,CADA;IAEVG,UAAU,EAAE;EAFF,CARe;EAY7BC,kBAAkB,EAAE,EAChB,GAAGR,uBAAA,CAAWS,kBADE;IAEhBC,cAAc,EAAE;EAFA,CAZS;EAgB7BC,kBAAkB,EAAE;IAChBR,UAAU,EAAE,UADI;IAEhBS,OAAO,EAAE,CAFO;IAGhBC,QAAQ,EAAE,UAHM;IAIhBC,KAAK,EAAE;EAJS,CAhBS;EAsB7BC,mBAAmB,EAAE;IACjBC,IAAI,EAAE,EADW;IAEjBH,QAAQ,EAAE;EAFO,CAtBQ;EA0B7BI,aAAa,EAAE;IACXC,MAAM,EAAE,EADG;IAEXC,KAAK,EAAE;EAFI,CA1Bc;EA8B7BC,WAAW,EAAE;IACTF,MAAM,EAAE,EADC;IAETL,QAAQ,EAAE,UAFD;IAGTC,KAAK,EAAE,CAHE;IAITK,KAAK,EAAE;EAJE,CA9BgB;EAoC7BE,qBAAqB,EAAE;IACnBX,cAAc,EAAE,QADG;IAEnBS,KAAK,EAAE;EAFY;AApCM,CAAlB,CAAf;;AA0CA,MAAMG,SAAS,gBAAGC,cAAA,CAAMC,UAAN,CAA4C,SAASF,SAAT,CAAmBG,KAAnB,EAA0BC,GAA1B,EAA+B;EACzF,MAAM;IACFC,SADE;IAEFC,cAAc,EAAEC,kBAFd;IAGFC,SAHE;IAIFC,QAAQ,GAAG,IAJT;IAKFC,IALE;IAMFC,SANE;IAOFC,MAPE;IAQFC,YAAY,EAAEC,gBARZ;IASFC,OATE;IAUFC,WAAW,EAAEC,eAVX;IAWFC,oBAAoB,EAAEC,wBAXpB;IAYFC,eAAe,EAAEC,mBAZf;IAaFC,eAAe,EAAEC,mBAbf;IAcFC,MAAM,GAAG,SAdP;IAeFC,KAAK,EAAEC,SAfL;IAgBFC,KAhBE;IAiBFC,KAjBE;IAkBFC,OAAO,GAAG,SAlBR;IAmBF,GAAGC;EAnBD,IAoBF3B,KApBJ;EAsBA,MAAM4B,QAAQ,GAAGF,OAAO,KAAK,QAA7B;EAEA,MAAMG,QAAQ,GAAG,CAACvB,QAAD,IAAaE,SAA9B;EAEA,MAAMsB,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4B,IAAAC,eAAA,EAAkBhC,SAAS,IAAI,KAA/B,CAAlC;EACA,MAAM,CAACe,eAAD,EAAkBkB,kBAAlB,IAAwC,IAAAD,eAAA,EAAkBhB,mBAAmB,IAAI,KAAzC,CAA9C;EAEA,MAAMkB,WAAW,GAAG,IAAAC,aAAA,EAAkB,IAAlB,CAApB;EAEA,MAAMC,SAAS,GAAG,IAAAC,kBAAA,EAAaC,IAAD,IAA4B;IACrDJ,WAAD,CAA0DK,OAA1D,GAAoED,IAApE;;IACA,IAAI,OAAOvC,GAAP,KAAe,UAAnB,EAA+B;MAC3BA,GAAG,CAACuC,IAAD,CAAH;IACH,CAFD,MAEO,IAAIvC,GAAJ,EAAS;MACXA,GAAD,CAAkDwC,OAAlD,GAA4DD,IAA5D;IACH;EACJ,CAPiB,EAOf,CAACvC,GAAD,CAPe,CAAlB;EASA,MAAMyC,aAAa,GAAG,IAAAC,2BAAA,EAAmBjB,OAAnB,EAA4BL,MAA5B,EAAoCW,SAApC,CAAtB;;EAEA,MAAMY,UAAU,GAAIC,KAAD,IAA0D;IACzEZ,YAAY,CAAC,KAAD,CAAZ;IACAxB,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAGoC,KAAH,CAAN;EACH,CAHD;;EAKA,MAAMC,WAAW,GAAID,KAAD,IAA0D;IAC1EZ,YAAY,CAAC,IAAD,CAAZ;IACArB,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGiC,KAAH,CAAP;EACH,CAHD;;EAKA,MAAME,uBAAuB,GAAG,MAAM;IAClCZ,kBAAkB,CAAEM,OAAD,IAAa,CAACA,OAAf,CAAlB;EACH,CAFD;;EAIA,MAAMO,YAAY,GAAG,IAAAT,kBAAA,EAAY,MAAM;IACnC,MAAMU,EAAE,GAAGb,WAAW,CAACK,OAAvB;;IACA,IAAIQ,EAAJ,EAAQ;MACJA,EAAE,CAAC3B,KAAH,CAAS7B,MAAT,GAAkB,MAAlB;MACAwD,EAAE,CAAC3B,KAAH,CAAS7B,MAAT,GAAmB,GAAEwD,EAAE,CAACC,YAAa,IAArC;IACH;EACJ,CANoB,EAMlB,EANkB,CAArB;EAQA,IAAAC,sBAAA,EAAgB,MAAM;IAClB,MAAMC,kBAAkB,GAAG/C,SAAS,IAAIlC,KAAxC;;IACA,IAAIiF,kBAAJ,EAAwB;MACpBJ,YAAY;IACf;EACJ,CALD,EAKG,CAACA,YAAD,EAAe3C,SAAf,EAA0BoB,KAA1B,CALH;;EAOA,MAAM4B,gBAAgB,GAAIC,IAAD,IAAkB;IACvC3C,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,YAAAA,gBAAgB,CAAG2C,IAAH,CAAhB;EACH,CAFD;;EAIA,MAAMC,WAAW,GAAG,MAAM;IACtBF,gBAAgB,CAAC,EAAD,CAAhB;EACH,CAFD;;EAIA,MAAMlC,eAAe,GAAGC,mBAAmB,IAAIQ,QAA/C;EAEA,MAAM4B,cAAc,GAAG,IAAAC,wBAAA,EAAgB3B,KAAhB,EAAuB;IAC1C4B,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoB,UAApB,CADgB;IAE1CC,KAAK,EAAE/B,KAAK,CAACgC,OAAN,CAAcR,IAAd,CAAmBS;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnB3F,MAAM,CAACM,KADY,EAEnB8D,aAAa,CAACsB,UAFK,EAGnBtB,aAAa,CAACwB,cAHK,EAInB/F,KAAK,GAAG;IAAEgG,YAAY,EAAE;EAAhB,CAAH,GAA4C,EAJ9B,EAKnB5C,SALmB,CAAJ,CAAnB;EAQA,MAAM6C,oBAAoB,GAAG,IAAAH,WAAA,EAAI,CAC7BvB,aAAa,CAACwB,cADe,EAE7B;IAAEL,KAAK,EAAE7C,wBAAwB,IAAIc,KAAK,CAACgC,OAAN,CAAczC,MAAd,CAAqBgD;EAA1D,CAF6B,CAAJ,CAA7B;EAKA,MAAMlE,cAAc,GAAG,IAAA8D,WAAA,EAAI,CACvB3F,MAAM,CAACG,IADgB,EAEvBiE,aAAa,CAACvC,cAFS,EAGvB;IAAEmE,OAAO,EAAEzC,QAAQ,GAAG,GAAH,GAAS;EAA5B,CAHuB,EAIvBzB,kBAJuB,CAAJ,CAAvB;EAOA,oBACI,6BAAC,iBAAD,QACKoB,KAAK,IAAI,CAACI,QAAV,gBACG,6BAAC,iBAAD;IACI,QAAQ,EAAEJ,KADd;IAEI,KAAK,EAAEgC;EAFX,EADH,GAKG,IANR,eAQI,6BAAC,YAAD;IAAK,KAAK,EAAErD;EAAZ,gBACI,6BAAC,cAAD,CAAO,QAAP,QACKyB,QAAQ,gBACL,6BAAC,iBAAD;IAAM,KAAK,EAAEtD,MAAM,CAACgB;EAApB,GACKkB,SAAS,gBACN,6BAAC,qBAAD;IAAgB,KAAK,EAAElC,MAAM,CAACkB;EAA9B,EADM,gBAGN,6BAAC,aAAD;IACI,KAAK,EAAE,MADX;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EAJR,CADK,GAYL,IAbR,eAeI,6BAAC,iBAAD;IAAM,KAAK,EAAElB,MAAM,CAACO;EAApB,gBACI,6BAAC,iBAAD;IACI,aAAa,EAAE,MADnB;IAEI,KAAK,EAAEP,MAAM,CAACS;EAFlB,GAIK+B,eAAe,IAAI,CAACW,KAApB,gBACG,6BAAC,iBAAD;IACI,QAAQ,EAAEX,eADd;IAEI,aAAa,EAAE,CAFnB;IAGI,KAAK,EAAEsD;EAHX,EADH,GAMG,IAVR,CADJ,eAcI,6BAAC,sBAAD;IACI,SAAS,EAAElE,SADf;IAEI,QAAQ,EAAE,CAAC2B,QAFf;IAGI,MAAM,EAAEe,UAHZ;IAII,YAAY,EAAES,gBAJlB;IAKI,OAAO,EAAEP,WALb;IAMI,GAAG,EAAER,SANT;IAOI,eAAe,EAAErB,eAPrB;IAQI,KAAK,EAAE+C,UARX;IASI,KAAK,EAAEvC,KATX;IAUI,SAAS,EAAEpB;EAVf,GAWQsB,UAXR,EAdJ,CAfJ,CADJ,EA8CKR,eAAe,IAAIM,KAAJ,aAAIA,KAAJ,eAAIA,KAAK,CAAE8C,MAA1B,IAAoC9C,KAAK,CAAC8C,MAAN,GAAe,CAAnD,gBACG,6BAAC,mBAAD;IACI,KAAK,EAAE,MADX;IAEI,QAAQ,eACJ,6BAAC,YAAD;MACI,MAAM,EAAE,KADZ;MAEI,KAAK,EAAE;IAFX,EAHR;IAQI,OAAO,EAAEhB,WARb;IASI,KAAK,EAAEjF,MAAM,CAACqB;EATlB,EADH,GAYG,IA1DR,EA4DKuB,mBAAmB,IAAI,CAACU,QAAxB,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEtD,MAAM,CAACsB;EAApB,gBACI,6BAAC,mBAAD;IACI,KAAK,EAAE,MADX;IAEI,OAAO,EAAEmD,uBAFb;IAGI,KAAK,EAAEzE,MAAM,CAACY;EAHlB,GAKK+B,eAAe,gBACZ,6BAAC,aAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EADY,gBAMZ,6BAAC,YAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EAXR,CADJ,CADH,GAoBG,IAhFR,CARJ,EA2FKV,IAAI,IAAI,CAACqB,QAAT,gBACG,6BAAC,iBAAD;IACI,QAAQ,EAAErB,IADd;IAEI,KAAK,EAAEmC,aAAa,CAAC8B;EAFzB,EADH,GAKG,IAhGR,CADJ;AAoGH,CAjNiB,CAAlB;;eAmNe3E,S"}

package/build/commonjs/Tooltip/Tooltip.js

@@ -148,12 +148,16 @@ function Tooltip(props) {
   const textStyle = (0, _styles.css)([fontStyle, {
     flexShrink: 1
   }]);
+  const beakOverlapStyle = {
+    [placement === 'top' ? 'marginTop' : placement === 'bottom' ? 'marginBottom' : placement === 'left' ? 'marginLeft' : 'marginRight']: -_reactNative.StyleSheet.hairlineWidth
+  };
   const beakStyle = (0, _styles.css)({
     transform: [isVerticalPlacement ? {
       translateX: beakOffset
     } : {
       translateY: beakOffset
-    }]
+    }],
+    ...beakOverlapStyle
   });
 
   const buttonElem = /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {

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

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","useTheme","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","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","Platform","select","web","display","default","contentStyle","css","flexGrow","flexShrink","useEffect","nextScaleValue","withTiming","fontStyle","createFontStyle","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":["DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","useTheme","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","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","Platform","select","web","display","default","contentStyle","css","flexGrow","flexShrink","useEffect","nextScaleValue","withTiming","fontStyle","createFontStyle","selector","typo","body3","regular","caption2","color","text","strongInverse","textStyle","beakOverlapStyle","StyleSheet","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/Image/Image.js

@@ -5,6 +5,7 @@ import { Text, View } from 'react-native';
 import ImageCore from '../ImageCore';
 import { css, StyleSheet, useTheme } from '../styles';
 import OverlayCloseButton from './OverlayCloseButton';
+import preload from './preload';
 
 const useStyles = function () {
   const theme = useTheme();
@@ -52,6 +53,7 @@ function Image(props) {
     alt,
     cache = 'immutable',
     disableDrag,
+    disableFadeIn,
     disableLongClick,
     disableOutline,
     disablePlaceholder,
@@ -96,6 +98,7 @@ function Image(props) {
     alt: alt,
     cache: cache,
     disableDrag: disableDrag,
+    disableFadeIn: disableFadeIn,
     disableLongClick: disableLongClick,
     height: '100%',
     loading: loading,
@@ -110,5 +113,6 @@ function Image(props) {
 }
 
 Image.OverlayCloseButton = OverlayCloseButton;
+Image.preload = preload;
 export default Image;
 //# sourceMappingURL=Image.js.map

package/build/module/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Text","View","ImageCore","css","StyleSheet","useTheme","OverlayCloseButton","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","borderStyle","borderColor","border","weak","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","styles","placeholderMode","undefined","absoluteFill","zIndex","uri"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\nimport OverlayCloseButton from './OverlayCloseButton';\n\ntype PlaceholderMode =\n    | 'default'\n    | 'custom'\n    | 'none';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined'\n    | 'error'\n    | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: 0.5,\n            borderStyle: 'solid',\n            borderColor: theme.palette.border.weak,\n        },\n        error: {\n            alignItems: 'center',\n            height: '100%',\n            justifyContent: 'center',\n            width: '100%',\n        },\n        errorText: {\n            color: theme.palette.text.primary,\n            fontFamily: 'Inter-Medium',\n            fontSize: 12,\n            letterSpacing: 0,\n            lineHeight: 18,\n            textAlign: 'center',\n        },\n    };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n    if (props.disablePlaceholder) {\n        return 'none';\n    }\n\n    return props.placeholder ? 'custom' : 'default';\n}\n\nfunction Image(props: ImageProps) {\n    const {\n        alt,\n        cache = 'immutable',\n        disableDrag,\n        disableLongClick,\n        disableOutline,\n        disablePlaceholder,\n        error,\n        loading = 'lazy',\n        onError: onErrorProp,\n        onLoad: onLoadProp,\n        overlaidChildren,\n        placeholder,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = useState(false);\n\n    const styles = useStyles();\n\n    const onLoad: ImageCoreProps['onLoad'] = () => {\n        setFailed(false);\n\n        onLoadProp?.();\n    };\n\n    const onError: ImageCoreProps['onError'] = () => {\n        setFailed(true);\n\n        onErrorProp?.();\n    };\n\n    const placeholderMode = determinePlaceholderMode(props);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !square ? styles.rounded : undefined,\n                placeholderMode === 'default' ? styles.placeholder : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {placeholderMode === 'custom' ? (\n                <View\n                    style={css([\n                        StyleSheet.absoluteFill,\n                        { zIndex: -1 },\n                    ])}\n                >\n                    {placeholder}\n                </View>\n            ) : null}\n\n            {failed ? (\n                <View style={styles.error}>\n                    {error ?? (\n                        <Text\n                            children={alt}\n                            style={styles.errorText}\n                        />\n                    )}\n                </View>\n            ) : source.uri ? (\n                <ImageCore\n                    alt={alt}\n                    cache={cache}\n                    disableDrag={disableDrag}\n                    disableLongClick={disableLongClick}\n                    height={'100%'}\n                    loading={loading}\n                    onError={onError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={source}\n                    width={'100%'}\n                />\n            ) : null}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n}\n\nImage.OverlayCloseButton = OverlayCloseButton;\n\nexport default Image;\n"],"mappings":"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"}
+{"version":3,"names":["React","useState","Text","View","ImageCore","css","StyleSheet","useTheme","OverlayCloseButton","preload","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","borderStyle","borderColor","border","weak","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableFadeIn","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","styles","placeholderMode","undefined","absoluteFill","zIndex","uri"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\nimport OverlayCloseButton from './OverlayCloseButton';\nimport preload from './preload';\n\ntype PlaceholderMode =\n    | 'default'\n    | 'custom'\n    | 'none';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined'\n    | 'error'\n    | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: 0.5,\n            borderStyle: 'solid',\n            borderColor: theme.palette.border.weak,\n        },\n        error: {\n            alignItems: 'center',\n            height: '100%',\n            justifyContent: 'center',\n            width: '100%',\n        },\n        errorText: {\n            color: theme.palette.text.primary,\n            fontFamily: 'Inter-Medium',\n            fontSize: 12,\n            letterSpacing: 0,\n            lineHeight: 18,\n            textAlign: 'center',\n        },\n    };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n    if (props.disablePlaceholder) {\n        return 'none';\n    }\n\n    return props.placeholder ? 'custom' : 'default';\n}\n\nfunction Image(props: ImageProps) {\n    const {\n        alt,\n        cache = 'immutable',\n        disableDrag,\n        disableFadeIn,\n        disableLongClick,\n        disableOutline,\n        disablePlaceholder,\n        error,\n        loading = 'lazy',\n        onError: onErrorProp,\n        onLoad: onLoadProp,\n        overlaidChildren,\n        placeholder,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = useState(false);\n\n    const styles = useStyles();\n\n    const onLoad: ImageCoreProps['onLoad'] = () => {\n        setFailed(false);\n\n        onLoadProp?.();\n    };\n\n    const onError: ImageCoreProps['onError'] = () => {\n        setFailed(true);\n\n        onErrorProp?.();\n    };\n\n    const placeholderMode = determinePlaceholderMode(props);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !square ? styles.rounded : undefined,\n                placeholderMode === 'default' ? styles.placeholder : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {placeholderMode === 'custom' ? (\n                <View\n                    style={css([\n                        StyleSheet.absoluteFill,\n                        { zIndex: -1 },\n                    ])}\n                >\n                    {placeholder}\n                </View>\n            ) : null}\n\n            {failed ? (\n                <View style={styles.error}>\n                    {error ?? (\n                        <Text\n                            children={alt}\n                            style={styles.errorText}\n                        />\n                    )}\n                </View>\n            ) : source.uri ? (\n                <ImageCore\n                    alt={alt}\n                    cache={cache}\n                    disableDrag={disableDrag}\n                    disableFadeIn={disableFadeIn}\n                    disableLongClick={disableLongClick}\n                    height={'100%'}\n                    loading={loading}\n                    onError={onError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={source}\n                    width={'100%'}\n                />\n            ) : null}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n}\n\nImage.OverlayCloseButton = OverlayCloseButton;\nImage.preload = preload;\n\nexport default Image;\n"],"mappings":"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"}

package/build/module/Image/ImageProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ImageProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type { ImageSource, Loading, ResizeMode, CacheControl } from '../ImageCore';\n\n/**\n * Image file quality.\n * Request image by query string.\n */\nexport type ImageQuality = 'small' | 'medium' | 'large';\n\nexport default interface ImageProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Indicating the alternate fallback content to be displayed\n     * if the image has not been loaded.\n     */\n    alt?: string;\n\n    /**\n     * Disable drag event for web.\n     * @default false\n     */\n    disableDrag?: boolean,\n\n    /**\n     * Disable Long click event for web.\n     * @default false\n     */\n    disableLongClick?: boolean,\n\n    /**\n     * If `true`, the image outline is not rendered.\n     * @default false\n     */\n    disableOutline?: boolean;\n\n    /**\n     * If `true`, the placeholder is not rendered.\n     * @default false\n     */\n    disablePlaceholder?: boolean;\n\n    /**\n     * Custom error element. Default is simple alt text.\n     */\n    error?: React.ReactElement | null;\n\n    /**\n     * Web only. Loading the document by determining whether to load\n     * the image immediately (`eager`) or on an as-needed basis (`lazy`).\n     * On React Native, it always works as `lazy`.\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * error event handler\n     */\n    onError?: () => void;\n\n    /**\n     * image loaded event handler\n     */\n    onLoad?: () => void;\n\n    /**\n     * The children on top this image.\n     */\n    overlaidChildren?: React.ReactElement;\n\n    /**\n     * Custom placeholder element.\n     */\n    placeholder?: React.ReactElement;\n\n    /**\n     * Determines how to resize the image when the frame doesn't match the raw image dimensions.\n     * @default 'cover'\n     */\n    resizeMode?: ResizeMode;\n\n    /**\n     * The image source.\n     */\n    source: ImageSource;\n\n    /**\n     * If `true`, rounded corners are disabled.\n     * @default false\n     */\n    square?: boolean;\n\n    /***\n     * FastImage cache control value.\n     * @default 'immutable'\n     */\n    cache?: CacheControl;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ImageProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type { ImageSource, Loading, ResizeMode, CacheControl } from '../ImageCore';\n\n/**\n * Image file quality.\n * Request image by query string.\n */\nexport type ImageQuality = 'small' | 'medium' | 'large';\n\nexport default interface ImageProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Indicating the alternate fallback content to be displayed\n     * if the image has not been loaded.\n     */\n    alt?: string;\n\n    /**\n     * Disable drag event for web.\n     * @default false\n     */\n    disableDrag?: boolean,\n\n    /**\n     * Disable Long click event for web.\n     * @default false\n     */\n    disableLongClick?: boolean,\n\n    /**\n     * If true, disables the fade-in opacity animation on image load.\n     * Only affects native platforms.\n     * @default false\n     */\n    disableFadeIn?: boolean;\n\n    /**\n     * If `true`, the image outline is not rendered.\n     * @default false\n     */\n    disableOutline?: boolean;\n\n    /**\n     * If `true`, the placeholder is not rendered.\n     * @default false\n     */\n    disablePlaceholder?: boolean;\n\n    /**\n     * Custom error element. Default is simple alt text.\n     */\n    error?: React.ReactElement | null;\n\n    /**\n     * Web only. Loading the document by determining whether to load\n     * the image immediately (`eager`) or on an as-needed basis (`lazy`).\n     * On React Native, it always works as `lazy`.\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * error event handler\n     */\n    onError?: () => void;\n\n    /**\n     * image loaded event handler\n     */\n    onLoad?: () => void;\n\n    /**\n     * The children on top this image.\n     */\n    overlaidChildren?: React.ReactElement;\n\n    /**\n     * Custom placeholder element.\n     */\n    placeholder?: React.ReactElement;\n\n    /**\n     * Determines how to resize the image when the frame doesn't match the raw image dimensions.\n     * @default 'cover'\n     */\n    resizeMode?: ResizeMode;\n\n    /**\n     * The image source.\n     */\n    source: ImageSource;\n\n    /**\n     * If `true`, rounded corners are disabled.\n     * @default false\n     */\n    square?: boolean;\n\n    /***\n     * FastImage cache control value.\n     * @default 'immutable'\n     */\n    cache?: CacheControl;\n}> {}\n"],"mappings":""}

package/build/module/Image/preload.js

@@ -0,0 +1,3 @@
+export default function preload(_sources) {// No-op on web
+}
+//# sourceMappingURL=preload.js.map

package/build/module/Image/preload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["preload","_sources"],"sources":["preload.ts"],"sourcesContent":["import type { ImageSource } from '../ImageCore';\n\nexport default function preload(_sources: ImageSource[]) {\n    // No-op on web\n}\n"],"mappings":"AAEA,eAAe,SAASA,OAAT,CAAiBC,QAAjB,EAA0C,CACrD;AACH"}

package/build/module/Image/preload.native.js

@@ -0,0 +1,12 @@
+import FastImage from '@d11/react-native-fast-image';
+export default function preload(sources) {
+  FastImage.preload(sources.map(_ref => {
+    let {
+      uri
+    } = _ref;
+    return {
+      uri
+    };
+  }));
+}
+//# sourceMappingURL=preload.native.js.map

package/build/module/Image/preload.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FastImage","preload","sources","map","uri"],"sources":["preload.native.ts"],"sourcesContent":["import FastImage from '@d11/react-native-fast-image';\nimport type { ImageSource } from '../ImageCore';\n\nexport default function preload(sources: ImageSource[]) {\n    FastImage.preload(sources.map(({ uri }) => ({ uri })));\n}\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,8BAAtB;AAGA,eAAe,SAASC,OAAT,CAAiBC,OAAjB,EAAyC;EACpDF,SAAS,CAACC,OAAV,CAAkBC,OAAO,CAACC,GAAR,CAAY;IAAA,IAAC;MAAEC;IAAF,CAAD;IAAA,OAAc;MAAEA;IAAF,CAAd;EAAA,CAAZ,CAAlB;AACH"}

package/build/module/ImageCore/ImageCoreNative.js

@@ -12,6 +12,7 @@ const ANIMATION_DURATION = 200;
 export default function ImageCore(props) {
   const {
     cache,
+    disableFadeIn,
     height,
     onError,
     onLoad,
@@ -19,16 +20,19 @@ export default function ImageCore(props) {
     source,
     width
   } = props;
-  const opacity = useAnimatedValue(INITIAL_OPACITY);
+  const opacity = useAnimatedValue(disableFadeIn ? LOADED_OPACITY : INITIAL_OPACITY);
   const acceptHeader = useContext(ImageFileExtensionContext);
   const handleLoad = useCallback(() => {
-    Animated.timing(opacity, {
-      toValue: LOADED_OPACITY,
-      duration: ANIMATION_DURATION,
-      useNativeDriver: isNotAndroid12
-    }).start();
+    if (!disableFadeIn) {
+      Animated.timing(opacity, {
+        toValue: LOADED_OPACITY,
+        duration: ANIMATION_DURATION,
+        useNativeDriver: isNotAndroid12
+      }).start();
+    }
+
     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
-  }, [onLoad]);
+  }, [disableFadeIn, onLoad]);
   return /*#__PURE__*/React.createElement(AnimatedFastImage, {
     onError: onError,
     onLoad: handleLoad,

package/build/module/ImageCore/ImageCoreNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useContext","Animated","FastImage","useAnimatedValue","isNotAndroid12","ImageFileExtensionContext","AnimatedFastImage","createAnimatedComponent","INITIAL_OPACITY","LOADED_OPACITY","ANIMATION_DURATION","ImageCore","props","cache","height","onError","onLoad","resizeMode","source","width","opacity","acceptHeader","handleLoad","timing","toValue","duration","useNativeDriver","start","uri","headers"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Animated, DimensionValue } from 'react-native';\nimport FastImage from '@d11/react-native-fast-image';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport type ImageCoreProps from './ImageCoreProps';\nimport ImageFileExtensionContext from './ImageFileExtensionContext';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst INITIAL_OPACITY = 0;\nconst LOADED_OPACITY = 1;\n\nconst ANIMATION_DURATION = 200;\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        cache,\n        height,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const opacity = useAnimatedValue(INITIAL_OPACITY);\n\n    const acceptHeader = useContext(ImageFileExtensionContext);\n\n    const handleLoad = useCallback(() => {\n        Animated.timing(opacity, {\n            toValue: LOADED_OPACITY,\n            duration: ANIMATION_DURATION,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n\n        onLoad?.();\n    }, [onLoad]);\n\n    return (\n        <AnimatedFastImage\n            onError={onError}\n            onLoad={handleLoad}\n            resizeMode={resizeMode}\n            source={{\n                cache,\n                uri: source.uri,\n                headers: {\n                    'Accept': acceptHeader,\n                },\n            }}\n            style={[\n                { opacity },\n                { width: width as DimensionValue, height: height as DimensionValue },\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,UAA7B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyC,cAAzC;AACA,OAAOC,SAAP,MAAsB,8BAAtB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AACA,SAASC,cAAT,QAA+B,UAA/B;AAEA,OAAOC,yBAAP,MAAsC,6BAAtC,C,CAEA;;AACA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCL,SAAjC,CAA1B;AAEA,MAAMM,eAAe,GAAG,CAAxB;AACA,MAAMC,cAAc,GAAG,CAAvB;AAEA,MAAMC,kBAAkB,GAAG,GAA3B;AAEA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,KADE;IAEFC,MAFE;IAGFC,OAHE;IAIFC,MAJE;IAKFC,UALE;IAMFC,MANE;IAOFC;EAPE,IAQFP,KARJ;EAUA,MAAMQ,OAAO,GAAGjB,gBAAgB,CAACK,eAAD,CAAhC;EAEA,MAAMa,YAAY,GAAGrB,UAAU,CAACK,yBAAD,CAA/B;EAEA,MAAMiB,UAAU,GAAGvB,WAAW,CAAC,MAAM;IACjCE,QAAQ,CAACsB,MAAT,CAAgBH,OAAhB,EAAyB;MACrBI,OAAO,EAAEf,cADY;MAErBgB,QAAQ,EAAEf,kBAFW;MAGrBgB,eAAe,EAAEtB;IAHI,CAAzB,EAIGuB,KAJH;IAMAX,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;EACT,CAR6B,EAQ3B,CAACA,MAAD,CAR2B,CAA9B;EAUA,oBACI,oBAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAEO,UAFZ;IAGI,UAAU,EAAEL,UAHhB;IAII,MAAM,EAAE;MACJJ,KADI;MAEJe,GAAG,EAAEV,MAAM,CAACU,GAFR;MAGJC,OAAO,EAAE;QACL,UAAUR;MADL;IAHL,CAJZ;IAWI,KAAK,EAAE,CACH;MAAED;IAAF,CADG,EAEH;MAAED,KAAK,EAAEA,KAAT;MAAkCL,MAAM,EAAEA;IAA1C,CAFG;EAXX,EADJ;AAkBH;AAAA"}
+{"version":3,"names":["React","useCallback","useContext","Animated","FastImage","useAnimatedValue","isNotAndroid12","ImageFileExtensionContext","AnimatedFastImage","createAnimatedComponent","INITIAL_OPACITY","LOADED_OPACITY","ANIMATION_DURATION","ImageCore","props","cache","disableFadeIn","height","onError","onLoad","resizeMode","source","width","opacity","acceptHeader","handleLoad","timing","toValue","duration","useNativeDriver","start","uri","headers"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Animated, DimensionValue } from 'react-native';\nimport FastImage from '@d11/react-native-fast-image';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport type ImageCoreProps from './ImageCoreProps';\nimport ImageFileExtensionContext from './ImageFileExtensionContext';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst INITIAL_OPACITY = 0;\nconst LOADED_OPACITY = 1;\n\nconst ANIMATION_DURATION = 200;\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        cache,\n        disableFadeIn,\n        height,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const opacity = useAnimatedValue(disableFadeIn ? LOADED_OPACITY : INITIAL_OPACITY);\n\n    const acceptHeader = useContext(ImageFileExtensionContext);\n\n    const handleLoad = useCallback(() => {\n        if (!disableFadeIn) {\n            Animated.timing(opacity, {\n                toValue: LOADED_OPACITY,\n                duration: ANIMATION_DURATION,\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n\n        onLoad?.();\n    }, [disableFadeIn, onLoad]);\n\n    return (\n        <AnimatedFastImage\n            onError={onError}\n            onLoad={handleLoad}\n            resizeMode={resizeMode}\n            source={{\n                cache,\n                uri: source.uri,\n                headers: {\n                    'Accept': acceptHeader,\n                },\n            }}\n            style={[\n                { opacity },\n                { width: width as DimensionValue, height: height as DimensionValue },\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,UAA7B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyC,cAAzC;AACA,OAAOC,SAAP,MAAsB,8BAAtB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AACA,SAASC,cAAT,QAA+B,UAA/B;AAEA,OAAOC,yBAAP,MAAsC,6BAAtC,C,CAEA;;AACA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCL,SAAjC,CAA1B;AAEA,MAAMM,eAAe,GAAG,CAAxB;AACA,MAAMC,cAAc,GAAG,CAAvB;AAEA,MAAMC,kBAAkB,GAAG,GAA3B;AAEA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,KADE;IAEFC,aAFE;IAGFC,MAHE;IAIFC,OAJE;IAKFC,MALE;IAMFC,UANE;IAOFC,MAPE;IAQFC;EARE,IASFR,KATJ;EAWA,MAAMS,OAAO,GAAGlB,gBAAgB,CAACW,aAAa,GAAGL,cAAH,GAAoBD,eAAlC,CAAhC;EAEA,MAAMc,YAAY,GAAGtB,UAAU,CAACK,yBAAD,CAA/B;EAEA,MAAMkB,UAAU,GAAGxB,WAAW,CAAC,MAAM;IACjC,IAAI,CAACe,aAAL,EAAoB;MAChBb,QAAQ,CAACuB,MAAT,CAAgBH,OAAhB,EAAyB;QACrBI,OAAO,EAAEhB,cADY;QAErBiB,QAAQ,EAAEhB,kBAFW;QAGrBiB,eAAe,EAAEvB;MAHI,CAAzB,EAIGwB,KAJH;IAKH;;IAEDX,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;EACT,CAV6B,EAU3B,CAACH,aAAD,EAAgBG,MAAhB,CAV2B,CAA9B;EAYA,oBACI,oBAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAEO,UAFZ;IAGI,UAAU,EAAEL,UAHhB;IAII,MAAM,EAAE;MACJL,KADI;MAEJgB,GAAG,EAAEV,MAAM,CAACU,GAFR;MAGJC,OAAO,EAAE;QACL,UAAUR;MADL;IAHL,CAJZ;IAWI,KAAK,EAAE,CACH;MAAED;IAAF,CADG,EAEH;MAAED,KAAK,EAAEA,KAAT;MAAkCL,MAAM,EAAEA;IAA1C,CAFG;EAXX,EADJ;AAkBH;AAAA"}

package/build/module/ImageCore/ImageCoreProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ImageCoreProps.ts"],"sourcesContent":["export interface ImageSource {\n    uri?: string;\n}\n\nexport type ResizeMode = 'cover' | 'contain';\n\nexport type Loading = 'lazy' | 'eager';\n\nexport type CacheControl = 'immutable' | 'web' | 'cacheOnly';\n\nexport default interface ImageCoreProps extends Readonly<{\n    alt?: string;\n    cache?: CacheControl;\n    disableDrag?: boolean,\n    disableLongClick?: boolean,\n    height?: number | string;\n    loading: Loading;\n    onError?: () => void;\n    onLoad?: () => void;\n    resizeMode: ResizeMode;\n    source: ImageSource;\n    width?: number | string;\n}> {}"],"mappings":""}
+{"version":3,"names":[],"sources":["ImageCoreProps.ts"],"sourcesContent":["export interface ImageSource {\n    uri?: string;\n}\n\nexport type ResizeMode = 'cover' | 'contain';\n\nexport type Loading = 'lazy' | 'eager';\n\nexport type CacheControl = 'immutable' | 'web' | 'cacheOnly';\n\nexport default interface ImageCoreProps extends Readonly<{\n    alt?: string;\n    cache?: CacheControl;\n    disableDrag?: boolean,\n    disableFadeIn?: boolean,\n    disableLongClick?: boolean,\n    height?: number | string;\n    loading: Loading;\n    onError?: () => void;\n    onLoad?: () => void;\n    resizeMode: ResizeMode;\n    source: ImageSource;\n    width?: number | string;\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/typescript/Image/Image.d.ts

@@ -2,5 +2,6 @@ import type ImageProps from './ImageProps';
 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.44",
+  "version": "3.0.0-alpha.45",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d10c99cd364365b67465743c46e754a718b04aad"
+  "gitHead": "5eb6c804ec277b51f4955c59308ddde329866f28"
 }

package/src/Image/Image.tsx

@@ -6,6 +6,7 @@ import ImageCore from '../ImageCore';
 import { css, StyleSheet, useTheme } from '../styles';
 import type ImageProps from './ImageProps';
 import OverlayCloseButton from './OverlayCloseButton';
+import preload from './preload';
 
 type PlaceholderMode =
     | 'default'
@@ -69,6 +70,7 @@ function Image(props: ImageProps) {
         alt,
         cache = 'immutable',
         disableDrag,
+        disableFadeIn,
         disableLongClick,
         disableOutline,
         disablePlaceholder,
@@ -139,6 +141,7 @@ function Image(props: ImageProps) {
                     alt={alt}
                     cache={cache}
                     disableDrag={disableDrag}
+                    disableFadeIn={disableFadeIn}
                     disableLongClick={disableLongClick}
                     height={'100%'}
                     loading={loading}
@@ -160,5 +163,6 @@ function Image(props: ImageProps) {
 }
 
 Image.OverlayCloseButton = OverlayCloseButton;
+Image.preload = preload;
 
 export default Image;

package/src/Image/ImageProps.ts

@@ -28,6 +28,13 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      */
     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/src/Image/preload.native.ts

@@ -0,0 +1,6 @@
+import FastImage from '@d11/react-native-fast-image';
+import type { ImageSource } from '../ImageCore';
+
+export default function preload(sources: ImageSource[]) {
+    FastImage.preload(sources.map(({ uri }) => ({ uri })));
+}

package/src/Image/preload.ts

@@ -0,0 +1,5 @@
+import type { ImageSource } from '../ImageCore';
+
+export default function preload(_sources: ImageSource[]) {
+    // No-op on web
+}

package/src/ImageCore/ImageCoreNative.tsx

@@ -17,6 +17,7 @@ const ANIMATION_DURATION = 200;
 export default function ImageCore(props: ImageCoreProps) {
     const {
         cache,
+        disableFadeIn,
         height,
         onError,
         onLoad,
@@ -25,19 +26,21 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const opacity = useAnimatedValue(INITIAL_OPACITY);
+    const opacity = useAnimatedValue(disableFadeIn ? LOADED_OPACITY : INITIAL_OPACITY);
 
     const acceptHeader = useContext(ImageFileExtensionContext);
 
     const handleLoad = useCallback(() => {
-        Animated.timing(opacity, {
-            toValue: LOADED_OPACITY,
-            duration: ANIMATION_DURATION,
-            useNativeDriver: isNotAndroid12,
-        }).start();
+        if (!disableFadeIn) {
+            Animated.timing(opacity, {
+                toValue: LOADED_OPACITY,
+                duration: ANIMATION_DURATION,
+                useNativeDriver: isNotAndroid12,
+            }).start();
+        }
 
         onLoad?.();
-    }, [onLoad]);
+    }, [disableFadeIn, onLoad]);
 
     return (
         <AnimatedFastImage

package/src/ImageCore/ImageCoreProps.ts

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

package/src/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
@@ -11,6 +11,8 @@ import type TextFieldProps from './TextFieldProps';
 import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 import useVariantStyleMap from './useVariantStyleMap';
 
+const isWeb = Platform.OS === 'web';
+
 const styles = StyleSheet.create({
     root: {
         alignItems: 'center',
@@ -57,6 +59,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const {
         autoFocus,
         containerStyle: containerStyleProp,
+        multiline,
         editable = true,
         hint,
         isLoading,
@@ -84,6 +87,17 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);
     const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);
 
+    const internalRef = useRef<TextInput>(null);
+
+    const mergedRef = useCallback((node: TextInput | null) => {
+        (internalRef as React.MutableRefObject<TextInput | null>).current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref) {
+            (ref as React.MutableRefObject<TextInput | null>).current = node;
+        }
+    }, [ref]);
+
     const variantStyles = useVariantStyleMap(variant, status, isFocused);
 
     const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -100,6 +114,21 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         setSecureTextEntry((current) => !current);
     };
 
+    const resizeHeight = useCallback(() => {
+        const el = internalRef.current as unknown as HTMLTextAreaElement | null;
+        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: string) => {
         onChangeTextProp?.(text);
     };
@@ -119,7 +148,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         styles.input,
         variantStyles.inputStyle,
         variantStyles.inputFontStyle,
-        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
+        isWeb ? { outlineWidth: 0 } as FountainUiStyle : {},
         styleProp,
     ]);
 
@@ -180,10 +209,11 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                             onBlur={handleBlur}
                             onChangeText={handleChangeText}
                             onFocus={handleFocus}
-                            ref={ref}
+                            ref={mergedRef}
                             secureTextEntry={secureTextEntry}
                             style={inputStyle}
                             value={value}
+                            multiline={multiline}
                             {...otherProps}
                         />
                     </View>

package/src/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, Text, View, ViewProps } from 'react-native';
+import { Platform, StyleSheet, Text, View, ViewProps } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
@@ -150,8 +150,13 @@ export default function Tooltip(props: TooltipProps) {
         { 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 = (