@fountain-ui/core 3.0.0-alpha.47 → 3.0.0-alpha.49

package/build/commonjs/Dialog/Dialog.js

@@ -118,6 +118,7 @@ function Dialog(props) {
   const paperStyle = (0, _styles.css)([styles.paper, styleProp]);
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     animationStyle: styles.container,
+    avoidKeyboard: size !== 'full',
     closeAnimation: closeAnimation,
     hideBackdrop: hideBackdrop || animationType === _Modal.ANIMATION_TYPE.FADE,
     initialOpacity: initialOpacity,

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

@@ -1 +1 @@
-{"version":3,"names":["TOP_ELEMENT_HIDDEN_OFFSET","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","useDialogStyle","height","screenHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","topElementHeightWithoutOffset","Math","max","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","css","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n        return [{\n            toValue: (topElementHeightWithoutOffset) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <DialogProvider value={{ size }}>\n                {topElement ? (\n                    <Column style={styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <ShadowView\n                    variant={600}\n                    style={paperStyle}\n                >\n                    {children}\n                </ShadowView>\n            </DialogProvider>\n        </Modal>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["TOP_ELEMENT_HIDDEN_OFFSET","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","useDialogStyle","height","screenHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","topElementHeightWithoutOffset","Math","max","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","css","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n        return [{\n            toValue: (topElementHeightWithoutOffset) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            avoidKeyboard={size !== 'full'}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <DialogProvider value={{ size }}>\n                {topElement ? (\n                    <Column style={styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <ShadowView\n                    variant={600}\n                    style={paperStyle}\n                >\n                    {children}\n                </ShadowView>\n            </DialogProvider>\n        </Modal>\n    );\n}\n"],"mappings":"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"}

package/build/commonjs/Modal/Modal.js

@@ -33,6 +33,7 @@ exports.createModalCloseEvent = createModalCloseEvent;
 function Modal(props) {
   const {
     animationStyle,
+    avoidKeyboard = false,
     backdropOpacity = 0.75,
     children,
     closeAnimation,
@@ -86,25 +87,33 @@ function Modal(props) {
     }
   }
 
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
-    style: (0, _styles.css)([_styles.StyleSheet.absoluteFill, elevationStyle, style])
-  }, otherProps), !hideBackdrop && visible ? /*#__PURE__*/_react.default.createElement(_SimpleBackdrop.default, {
-    onPress: handleBackdropPress,
-    opacity: backdropOpacity
-  }) : null, !disableAnimation ? /*#__PURE__*/_react.default.createElement(_AnimatedContainer.default, {
-    children: children,
-    closeAnimation: closeAnimation,
-    initialOpacity: initialOpacity,
-    initialTranslateY: initialTranslateY,
-    onEnter: onEnter,
-    onEntered: onEntered,
-    onExit: onExit,
-    onExited: onExited,
-    openAnimation: openAnimation,
-    offsetAnimation: offsetAnimation,
-    style: animationStyle,
-    visible: visible
-  }) : children);
+  const Container = avoidKeyboard ? _reactNative.KeyboardAvoidingView : _reactNative.View;
+  const containerProps = avoidKeyboard ? {
+    behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : undefined
+  } : {};
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error
+    _react.default.createElement(Container, _extends({}, containerProps, {
+      style: (0, _styles.css)([_styles.StyleSheet.absoluteFill, elevationStyle, style])
+    }, otherProps), !hideBackdrop && visible ? /*#__PURE__*/_react.default.createElement(_SimpleBackdrop.default, {
+      onPress: handleBackdropPress,
+      opacity: backdropOpacity
+    }) : null, !disableAnimation ? /*#__PURE__*/_react.default.createElement(_AnimatedContainer.default, {
+      children: children,
+      closeAnimation: closeAnimation,
+      initialOpacity: initialOpacity,
+      initialTranslateY: initialTranslateY,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      openAnimation: openAnimation,
+      offsetAnimation: offsetAnimation,
+      style: animationStyle,
+      visible: visible
+    }) : children)
+  );
 }
 
 ;

package/build/commonjs/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"names":["createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","offsetAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.75,\n        children,\n        closeAnimation,\n        disableAnimation = false,\n        hideBackdrop = false,\n        initialOpacity,\n        initialTranslateY,\n        onClose,\n        onEnter: onEnterProp,\n        onEntered: onEnteredProp,\n        onExit: onExitProp,\n        onExited: onExitedProp,\n        openAnimation,\n        offsetAnimation,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    const onEnter = () => {\n        setExited(false);\n        onEnterProp?.();\n    };\n\n    const onEntered = () => {\n        onEnteredProp?.();\n    };\n\n    const onExit = () => {\n        onExitProp?.();\n    };\n\n    const onExited = () => {\n        setExited(true);\n        onExitedProp?.();\n    };\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(!hideBackdrop && visible) ? (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            ) : null}\n\n            {!disableAnimation ? (\n                <AnimatedContainer\n                    children={children}\n                    closeAnimation={closeAnimation}\n                    initialOpacity={initialOpacity}\n                    initialTranslateY={initialTranslateY}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={onExited}\n                    openAnimation={openAnimation}\n                    offsetAnimation={offsetAnimation}\n                    style={animationStyle}\n                    visible={visible}\n                />\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAUO,MAAMA,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,IAFhB;IAGFC,QAHE;IAIFC,cAJE;IAKFC,gBAAgB,GAAG,KALjB;IAMFC,YAAY,GAAG,KANb;IAOFC,cAPE;IAQFC,iBARE;IASFC,OATE;IAUFC,OAAO,EAAEC,WAVP;IAWFC,SAAS,EAAEC,aAXT;IAYFC,MAAM,EAAEC,UAZN;IAaFC,QAAQ,EAAEC,YAbR;IAcFC,aAdE;IAeFC,eAfE;IAgBFC,KAhBE;IAiBFC,OAjBE;IAkBF,GAAGC;EAlBD,IAmBFtB,KAnBJ;;EAqBA,MAAMuB,mBAAmB,GAAG,MAAM;IAC9B,IAAId,OAAJ,EAAa;MACTA,OAAO,CAACb,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC4B,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,MAAMnB,OAAO,GAAG,MAAM;IAClBe,SAAS,CAAC,KAAD,CAAT;IACAd,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBS,SAAS,CAAC,IAAD,CAAT;IACAR,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACI,OAAL,EAAc;IACV,IAAIhB,gBAAgB,IAAImB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPJ,cAFO,EAGPR,KAHO,CAAJ;EADX,GAMQE,UANR,GAQM,CAAChB,YAAD,IAAiBe,OAAlB,gBACG,6BAAC,uBAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAErB;EAFb,EADH,GAKG,IAbR,EAeK,CAACG,gBAAD,gBACG,6BAAC,0BAAD;IACI,QAAQ,EAAEF,QADd;IAEI,cAAc,EAAEC,cAFpB;IAGI,cAAc,EAAEG,cAHpB;IAII,iBAAiB,EAAEC,iBAJvB;IAKI,OAAO,EAAEE,OALb;IAMI,SAAS,EAAEE,SANf;IAOI,MAAM,EAAEE,MAPZ;IAQI,QAAQ,EAAEE,QARd;IASI,aAAa,EAAEE,aATnB;IAUI,eAAe,EAAEC,eAVrB;IAWI,KAAK,EAAElB,cAXX;IAYI,OAAO,EAAEoB;EAZb,EADH,GAeGlB,QA9BR,CADJ;AAkCH;;AAAA"}
+{"version":3,"names":["createModalCloseEvent","reason","metadata","Modal","props","animationStyle","avoidKeyboard","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","offsetAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","Container","KeyboardAvoidingView","View","containerProps","behavior","Platform","OS","undefined","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { KeyboardAvoidingView, Platform, View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        avoidKeyboard = false,\n        backdropOpacity = 0.75,\n        children,\n        closeAnimation,\n        disableAnimation = false,\n        hideBackdrop = false,\n        initialOpacity,\n        initialTranslateY,\n        onClose,\n        onEnter: onEnterProp,\n        onEntered: onEnteredProp,\n        onExit: onExitProp,\n        onExited: onExitedProp,\n        openAnimation,\n        offsetAnimation,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    const onEnter = () => {\n        setExited(false);\n        onEnterProp?.();\n    };\n\n    const onEntered = () => {\n        onEnteredProp?.();\n    };\n\n    const onExit = () => {\n        onExitProp?.();\n    };\n\n    const onExited = () => {\n        setExited(true);\n        onExitedProp?.();\n    };\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    const Container = avoidKeyboard ? KeyboardAvoidingView : View;\n    const containerProps = avoidKeyboard ? {\n        behavior: Platform.OS === 'ios' ? 'padding' : undefined,\n    } : {};\n\n    return (\n        // @ts-expect-error\n        <Container\n            {...containerProps}\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(!hideBackdrop && visible) ? (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            ) : null}\n\n            {!disableAnimation ? (\n                <AnimatedContainer\n                    children={children}\n                    closeAnimation={closeAnimation}\n                    initialOpacity={initialOpacity}\n                    initialTranslateY={initialTranslateY}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={onExited}\n                    openAnimation={openAnimation}\n                    offsetAnimation={offsetAnimation}\n                    style={animationStyle}\n                    visible={visible}\n                />\n            ) : children}\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAUO,MAAMA,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,aAAa,GAAG,KAFd;IAGFC,eAAe,GAAG,IAHhB;IAIFC,QAJE;IAKFC,cALE;IAMFC,gBAAgB,GAAG,KANjB;IAOFC,YAAY,GAAG,KAPb;IAQFC,cARE;IASFC,iBATE;IAUFC,OAVE;IAWFC,OAAO,EAAEC,WAXP;IAYFC,SAAS,EAAEC,aAZT;IAaFC,MAAM,EAAEC,UAbN;IAcFC,QAAQ,EAAEC,YAdR;IAeFC,aAfE;IAgBFC,eAhBE;IAiBFC,KAjBE;IAkBFC,OAlBE;IAmBF,GAAGC;EAnBD,IAoBFvB,KApBJ;;EAsBA,MAAMwB,mBAAmB,GAAG,MAAM;IAC9B,IAAId,OAAJ,EAAa;MACTA,OAAO,CAACd,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC6B,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,MAAMnB,OAAO,GAAG,MAAM;IAClBe,SAAS,CAAC,KAAD,CAAT;IACAd,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBS,SAAS,CAAC,IAAD,CAAT;IACAR,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACI,OAAL,EAAc;IACV,IAAIhB,gBAAgB,IAAImB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,MAAMM,SAAS,GAAG7B,aAAa,GAAG8B,iCAAH,GAA0BC,iBAAzD;EACA,MAAMC,cAAc,GAAGhC,aAAa,GAAG;IACnCiC,QAAQ,EAAEC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC;EADX,CAAH,GAEhC,EAFJ;EAIA;IAAA;IACI;IACA,6BAAC,SAAD,eACQJ,cADR;MAEI,KAAK,EAAE,IAAAK,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPZ,cAFO,EAGPR,KAHO,CAAJ;IAFX,GAOQE,UAPR,GASM,CAAChB,YAAD,IAAiBe,OAAlB,gBACG,6BAAC,uBAAD;MACI,OAAO,EAAEE,mBADb;MAEI,OAAO,EAAErB;IAFb,EADH,GAKG,IAdR,EAgBK,CAACG,gBAAD,gBACG,6BAAC,0BAAD;MACI,QAAQ,EAAEF,QADd;MAEI,cAAc,EAAEC,cAFpB;MAGI,cAAc,EAAEG,cAHpB;MAII,iBAAiB,EAAEC,iBAJvB;MAKI,OAAO,EAAEE,OALb;MAMI,SAAS,EAAEE,SANf;MAOI,MAAM,EAAEE,MAPZ;MAQI,QAAQ,EAAEE,QARd;MASI,aAAa,EAAEE,aATnB;MAUI,eAAe,EAAEC,eAVrB;MAWI,KAAK,EAAEnB,cAXX;MAYI,OAAO,EAAEqB;IAZb,EADH,GAeGlB,QA/BR;EAFJ;AAoCH;;AAAA"}

package/build/commonjs/Modal/ModalProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n    SLIDE = 'slide',\n    FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     */\n    type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Animation used when the modal closes.\n     */\n    closeAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Set the initial value of opacity for animating.\n     */\n    initialOpacity?: number | undefined;\n\n    /**\n     * Set the initial value of transition y for animating.\n     */\n    initialTranslateY?: number | undefined;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void;\n\n    /**\n     * Callback fired when the enter animation will start.\n     */\n    onEnter?: () => void | undefined;\n\n    /**\n     * Callback fired when the enter animation is completed.\n     */\n    onEntered?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation will start.\n     */\n    onExit?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation is completed.\n     */\n    onExited?: () => void | undefined;\n\n    /**\n     * Animation used when the modal opens.\n     */\n    openAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * Additional offset animation applied when the modal opens.\n     */\n    offsetAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":";;;;;;IAMkBA,c;;;WAAAA,c;EAAAA,c;EAAAA,c;GAAAA,c,8BAAAA,c"}
+{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n    SLIDE = 'slide',\n    FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     */\n    type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the modal wraps its content in a `KeyboardAvoidingView` so\n     * that on iOS the visible area shrinks when the software keyboard appears.\n     * Intended for centered modals; leave `false` for bottom-anchored or\n     * full-screen overlays that manage their own keyboard handling.\n     * @default false\n     */\n    avoidKeyboard?: boolean;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Animation used when the modal closes.\n     */\n    closeAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Set the initial value of opacity for animating.\n     */\n    initialOpacity?: number | undefined;\n\n    /**\n     * Set the initial value of transition y for animating.\n     */\n    initialTranslateY?: number | undefined;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void;\n\n    /**\n     * Callback fired when the enter animation will start.\n     */\n    onEnter?: () => void | undefined;\n\n    /**\n     * Callback fired when the enter animation is completed.\n     */\n    onEntered?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation will start.\n     */\n    onExit?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation is completed.\n     */\n    onExited?: () => void | undefined;\n\n    /**\n     * Animation used when the modal opens.\n     */\n    openAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * Additional offset animation applied when the modal opens.\n     */\n    offsetAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":";;;;;;IAMkBA,c;;;WAAAA,c;EAAAA,c;EAAAA,c;GAAAA,c,8BAAAA,c"}

package/build/commonjs/TextField/TextField.js

@@ -79,7 +79,9 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     multiline,
     editable = true,
     hint,
+    inputFontSize = 'large',
     isLoading,
+    maxLength,
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
@@ -87,6 +89,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
+    showWordCounter = false,
     status = 'default',
     style: styleProp,
     title,
@@ -109,7 +112,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
       ref.current = node;
     }
   }, [ref]);
-  const variantStyles = (0, _useVariantStyleMap.default)(variant, status, isFocused);
+  const variantStyles = (0, _useVariantStyleMap.default)(variant, status, isFocused, inputFontSize);
 
   const handleBlur = event => {
     setIsFocused(false);
@@ -188,6 +191,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
   }) : null), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
     autoFocus: autoFocus,
     editable: !disabled,
+    maxLength: maxLength,
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
@@ -216,7 +220,10 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
   }) : /*#__PURE__*/_react.default.createElement(_icons.EyeOn, {
     height: 19,
     width: 17.42
-  }))) : null), hint && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }))) : null), showWordCounter && maxLength && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: `${(value === null || value === void 0 ? void 0 : value.length) ?? 0}/${maxLength}`,
+    style: variantStyles.hintStyle
+  }) : null, hint && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: hint,
     style: variantStyles.hintStyle
   }) : null);

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

@@ -1 +1 @@
-{"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":"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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","inputFontSize","isLoading","maxLength","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","showWordCounter","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        inputFontSize = 'large',\n        isLoading,\n        maxLength,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        showWordCounter = false,\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, inputFontSize);\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                            maxLength={maxLength}\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            {showWordCounter && maxLength && !isSearch ? (\n                <Text\n                    children={`${value?.length ?? 0}/${maxLength}`}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\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/commonjs/TextField/TextFieldProps.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textFieldVariants = exports.textFieldStatus = void 0;
+exports.textFieldVariants = exports.textFieldStatus = exports.textFieldInputFontSizes = void 0;
 const textFieldStatus = ['default', 'success', 'error'];
 exports.textFieldStatus = textFieldStatus;
 const textFieldVariants = ['default', 'search'];
 exports.textFieldVariants = textFieldVariants;
+const textFieldInputFontSizes = ['large', 'small'];
+exports.textFieldInputFontSizes = textFieldInputFontSizes;
 //# sourceMappingURL=TextFieldProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["textFieldStatus","textFieldVariants"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;;AAGA,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B"}
+{"version":3,"names":["textFieldStatus","textFieldVariants","textFieldInputFontSizes"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport const textFieldInputFontSizes = ['large', 'small'] as const;\nexport type TextFieldInputFontSize = typeof textFieldInputFontSizes[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n\n    /**\n     * Determines the font size of the input.\n     * @default large\n     */\n    inputFontSize?: TextFieldInputFontSize;\n\n    /**\n     * Determines whether to display the word counter below the input.\n     * Requires maxLength to be set.\n     * @default false\n     */\n    showWordCounter?: boolean;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;;AAGA,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B;;AAGA,MAAMC,uBAAuB,GAAG,CAAC,OAAD,EAAU,OAAV,CAAhC"}

package/build/commonjs/TextField/useVariantStyleMap.js

@@ -11,6 +11,30 @@ var _styles = require("@fountain-ui/styles");
 
 var _styles2 = require("../styles");
 
+const fontSizeStyleMap = {
+  large: {
+    fontSize: 18,
+    lineHeight: 27,
+    fontFamily: 'PretendardStd-SemiBold',
+    letterSpacing: 0
+  },
+  small: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontFamily: 'PretendardStd-Medium',
+    letterSpacing: 0
+  }
+};
+const containerPaddingMap = {
+  large: {
+    paddingVertical: 14
+  },
+  small: {
+    paddingTop: 18,
+    paddingBottom: 16
+  }
+};
+
 function useStatusColor(theme, status) {
   switch (status) {
     default:
@@ -35,6 +59,7 @@ function useStatusColor(theme, status) {
 }
 
 function useVariantStyleMap(variant, status, isFocused) {
+  let inputFontSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'large';
   const theme = (0, _styles2.useTheme)();
   const {
     borderColor,
@@ -49,19 +74,14 @@ function useVariantStyleMap(variant, status, isFocused) {
             borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
             borderBottomWidth: 1,
             gap: 16,
-            minHeight: 60,
-            paddingVertical: 16
+            minHeight: 54,
+            ...containerPaddingMap[inputFontSize]
           },
           inputStyle: {
             padding: 0
           },
           inputFontStyle: (0, _styles2.createFontStyle)(theme, {
-            selector: _ => (0, _styles.typographyOf)({
-              fontSize: 18,
-              lineHeight: 27,
-              fontFamily: 'PretendardStd-SemiBold',
-              letterSpacing: 0
-            }),
+            selector: _ => (0, _styles.typographyOf)(fontSizeStyleMap[inputFontSize]),
             color: theme.palette.text.strong
           }),
           hintStyle: {
@@ -98,6 +118,6 @@ function useVariantStyleMap(variant, status, isFocused) {
           })
         };
     }
-  }, [theme, borderColor, hintColor, variant, isFocused]);
+  }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);
 }
 //# sourceMappingURL=useVariantStyleMap.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","gap","minHeight","paddingVertical","inputStyle","padding","inputFontStyle","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputFontStyle?: TextStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        gap: 16,\n                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 18,\n                            lineHeight: 27,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 19.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: -0.16,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["fontSizeStyleMap","large","fontSize","lineHeight","fontFamily","letterSpacing","small","containerPaddingMap","paddingVertical","paddingTop","paddingBottom","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","inputFontSize","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","gap","minHeight","inputStyle","padding","inputFontStyle","createFontStyle","selector","_","typographyOf","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingHorizontal"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\nconst fontSizeStyleMap = {\n    large: {\n        fontSize: 18,\n        lineHeight: 27,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: 0,\n    },\n    small: {\n        fontSize: 14,\n        lineHeight: 21,\n        fontFamily: 'PretendardStd-Medium',\n        letterSpacing: 0,\n    },\n} as const;\n\nconst containerPaddingMap = {\n    large: {\n        paddingVertical: 14,\n    },\n    small: {\n        paddingTop: 18,\n        paddingBottom: 16,\n    },\n} as const;\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputFontStyle?: TextStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(\n    variant: TextFieldVariant,\n    status: TextFieldStatus,\n    isFocused: boolean,\n    inputFontSize: TextFieldInputFontSize = 'large',\n): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        gap: 16,\n                        minHeight: 54,\n                        ...containerPaddingMap[inputFontSize],\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf(fontSizeStyleMap[inputFontSize]),\n                        color: theme.palette.text.strong,\n                    }),\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 19.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: -0.16,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);\n}\n"],"mappings":"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"}

package/build/commonjs/Toolbar/BackButton/BackButton.js

@@ -39,9 +39,9 @@ function BackButton(props) {
   const rootStyle = (0, _styles.css)([styles.root, styleProp]);
   return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
     style: rootStyle
-  }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_internal.AppBarChevronLeft, {
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_internal.AppBarChevronLeft, {
     height: 24,
     width: 24
-  })));
+  }));
 }
 //# sourceMappingURL=BackButton.js.map

package/build/commonjs/Toolbar/BackButton/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { AppBarChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n    root: {\n        height: 40,\n        left: 4,\n        paddingLeft: 5,\n        paddingRight: 11,\n        paddingVertical: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n    const {\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    return (\n        <IconButton\n            style={rootStyle}\n            {...otherProps}\n        >\n            <React.Fragment>\n                <AppBarChevronLeft\n                    height={24}\n                    width={24}\n                />\n            </React.Fragment>\n        </IconButton>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,CAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;;AAYe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBjB,MAAM,CAACG,IADW,EAElBW,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,2BAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EADJ,CAJJ,CADJ;AAaH"}
+{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { AppBarChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n    root: {\n        height: 40,\n        left: 4,\n        paddingLeft: 5,\n        paddingRight: 11,\n        paddingVertical: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n    const {\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    return (\n        <IconButton\n            style={rootStyle}\n            {...otherProps}\n        >\n            <AppBarChevronLeft\n                height={24}\n                width={24}\n            />\n        </IconButton>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,CAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;;AAYe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBjB,MAAM,CAACG,IADW,EAElBW,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,2BAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EAJJ,CADJ;AAWH"}

package/build/module/Dialog/Dialog.js

@@ -96,6 +96,7 @@ export default function Dialog(props) {
   const paperStyle = css([styles.paper, styleProp]);
   return /*#__PURE__*/React.createElement(Modal, _extends({
     animationStyle: styles.container,
+    avoidKeyboard: size !== 'full',
     closeAnimation: closeAnimation,
     hideBackdrop: hideBackdrop || animationType === ANIMATION_TYPE.FADE,
     initialOpacity: initialOpacity,

package/build/module/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","useDialogStyle","TOP_ELEMENT_HIDDEN_OFFSET","Dialog","props","animationType","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","topElementHeightWithoutOffset","Math","max","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n        return [{\n            toValue: (topElementHeightWithoutOffset) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <DialogProvider value={{ size }}>\n                {topElement ? (\n                    <Column style={styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <ShadowView\n                    variant={600}\n                    style={paperStyle}\n                >\n                    {children}\n                </ShadowView>\n            </DialogProvider>\n        </Modal>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","useDialogStyle","TOP_ELEMENT_HIDDEN_OFFSET","Dialog","props","animationType","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","topElementHeightWithoutOffset","Math","max","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n        return [{\n            toValue: (topElementHeightWithoutOffset) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            avoidKeyboard={size !== 'full'}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <DialogProvider value={{ size }}>\n                {topElement ? (\n                    <Column style={styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <ShadowView\n                    variant={600}\n                    style={paperStyle}\n                >\n                    {children}\n                </ShadowView>\n            </DialogProvider>\n        </Modal>\n    );\n}\n"],"mappings":"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"}

package/build/module/Modal/Modal.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 from 'react';
-import { View } from 'react-native';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import { css, StyleSheet } from '../styles';
 import { useElevationStyle } from '../hooks';
 import AnimatedContainer from './AnimatedContainer';
@@ -14,6 +14,7 @@ export const createModalCloseEvent = reason => ({
 export default function Modal(props) {
   const {
     animationStyle,
+    avoidKeyboard = false,
     backdropOpacity = 0.75,
     children,
     closeAnimation,
@@ -66,25 +67,33 @@ export default function Modal(props) {
     }
   }
 
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: css([StyleSheet.absoluteFill, elevationStyle, style])
-  }, otherProps), !hideBackdrop && visible ? /*#__PURE__*/React.createElement(SimpleBackdrop, {
-    onPress: handleBackdropPress,
-    opacity: backdropOpacity
-  }) : null, !disableAnimation ? /*#__PURE__*/React.createElement(AnimatedContainer, {
-    children: children,
-    closeAnimation: closeAnimation,
-    initialOpacity: initialOpacity,
-    initialTranslateY: initialTranslateY,
-    onEnter: onEnter,
-    onEntered: onEntered,
-    onExit: onExit,
-    onExited: onExited,
-    openAnimation: openAnimation,
-    offsetAnimation: offsetAnimation,
-    style: animationStyle,
-    visible: visible
-  }) : children);
+  const Container = avoidKeyboard ? KeyboardAvoidingView : View;
+  const containerProps = avoidKeyboard ? {
+    behavior: Platform.OS === 'ios' ? 'padding' : undefined
+  } : {};
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error
+    React.createElement(Container, _extends({}, containerProps, {
+      style: css([StyleSheet.absoluteFill, elevationStyle, style])
+    }, otherProps), !hideBackdrop && visible ? /*#__PURE__*/React.createElement(SimpleBackdrop, {
+      onPress: handleBackdropPress,
+      opacity: backdropOpacity
+    }) : null, !disableAnimation ? /*#__PURE__*/React.createElement(AnimatedContainer, {
+      children: children,
+      closeAnimation: closeAnimation,
+      initialOpacity: initialOpacity,
+      initialTranslateY: initialTranslateY,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      openAnimation: openAnimation,
+      offsetAnimation: offsetAnimation,
+      style: animationStyle,
+      visible: visible
+    }) : children)
+  );
 }
 ;
 //# sourceMappingURL=Modal.js.map