@fountain-ui/core 2.0.0-beta.30 → 2.0.0-beta.32

package/build/commonjs/Badge/Badge.js

@@ -23,7 +23,6 @@ const defaultPosition = {
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   const dotSize = 4;
-  const offset = 0;
   return {
     root: {},
     badge: {
@@ -32,18 +31,6 @@ const useStyles = function () {
       height: dotSize,
       position: 'absolute',
       width: dotSize
-    },
-    top: {
-      top: offset
-    },
-    bottom: {
-      bottom: offset
-    },
-    left: {
-      left: offset
-    },
-    right: {
-      right: offset
     }
   };
 };
@@ -54,11 +41,15 @@ function Badge(props) {
     invisible = false,
     position = defaultPosition,
     style,
+    offset = 0,
     ...otherProps
   } = props;
   const styles = useStyles();
   const rootStyle = (0, _styles.css)([styles.root, style]);
-  const badgeStyle = (0, _styles.css)([styles.badge, styles[position.vertical], styles[position.horizontal]]);
+  const badgeStyle = (0, _styles.css)([styles.badge, {
+    [position.vertical]: offset,
+    [position.horizontal]: offset
+  }]);
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     style: rootStyle
   }, otherProps), children, !invisible ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {

package/build/commonjs/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultPosition","vertical","horizontal","useStyles","theme","useTheme","dotSize","offset","root","badge","backgroundColor","palette","secondary","main","borderRadius","height","position","width","top","bottom","left","right","Badge","props","children","invisible","style","otherProps","styles","rootStyle","css","badgeStyle"],"sources":["Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport BadgeProps, { BadgePosition } from './BadgeProps';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\ntype BadgeStyles = NamedStylesStringUnion<'root' | 'badge' | 'top' | 'bottom' | 'left' | 'right'>;\n\nconst useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {\n    const theme = useTheme();\n\n    const dotSize = 4;\n    const offset = 0;\n\n    return {\n        root: {},\n        badge: {\n            backgroundColor: theme.palette.secondary.main,\n            borderRadius: dotSize * 0.5,\n            height: dotSize,\n            position: 'absolute',\n            width: dotSize,\n        },\n        top: {\n            top: offset,\n        },\n        bottom: {\n            bottom: offset,\n        },\n        left: {\n            left: offset,\n        },\n        right: {\n            right: offset,\n        },\n    };\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        invisible = false,\n        position = defaultPosition,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const badgeStyle = css([\n        styles.badge,\n        styles[position.vertical],\n        styles[position.horizontal],\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? <View style={badgeStyle}/> : null}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAGA,MAAMA,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;;AAOA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,OAAO,GAAG,CAAhB;EACA,MAAMC,MAAM,GAAG,CAAf;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,KAAK,EAAE;MACHC,eAAe,EAAEN,KAAK,CAACO,OAAN,CAAcC,SAAd,CAAwBC,IADtC;MAEHC,YAAY,EAAER,OAAO,GAAG,GAFrB;MAGHS,MAAM,EAAET,OAHL;MAIHU,QAAQ,EAAE,UAJP;MAKHC,KAAK,EAAEX;IALJ,CAFJ;IASHY,GAAG,EAAE;MACDA,GAAG,EAAEX;IADJ,CATF;IAYHY,MAAM,EAAE;MACJA,MAAM,EAAEZ;IADJ,CAZL;IAeHa,IAAI,EAAE;MACFA,IAAI,EAAEb;IADJ,CAfH;IAkBHc,KAAK,EAAE;MACHA,KAAK,EAAEd;IADJ;EAlBJ,CAAP;AAsBH,CA5BD;;AA8Be,SAASe,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,SAAS,GAAG,KAFV;IAGFT,QAAQ,GAAGhB,eAHT;IAIF0B,KAJE;IAKF,GAAGC;EALD,IAMFJ,KANJ;EAQA,MAAMK,MAAM,GAAGzB,SAAS,EAAxB;EAEA,MAAM0B,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACpB,IADW,EAElBkB,KAFkB,CAAJ,CAAlB;EAKA,MAAMK,UAAU,GAAG,IAAAD,WAAA,EAAI,CACnBF,MAAM,CAACnB,KADY,EAEnBmB,MAAM,CAACZ,QAAQ,CAACf,QAAV,CAFa,EAGnB2B,MAAM,CAACZ,QAAQ,CAACd,UAAV,CAHa,CAAJ,CAAnB;EAMA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE2B;EADX,GAEQF,UAFR,GAIKH,QAJL,EAMK,CAACC,SAAD,gBAAa,6BAAC,iBAAD;IAAM,KAAK,EAAEM;EAAb,EAAb,GAA0C,IAN/C,CADJ;AAUH;;AAAA"}
+{"version":3,"names":["defaultPosition","vertical","horizontal","useStyles","theme","useTheme","dotSize","root","badge","backgroundColor","palette","secondary","main","borderRadius","height","position","width","Badge","props","children","invisible","style","offset","otherProps","styles","rootStyle","css","badgeStyle"],"sources":["Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport BadgeProps, { BadgePosition } from './BadgeProps';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\ntype BadgeStyles = NamedStylesStringUnion<'root' | 'badge'>;\n\nconst useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {\n    const theme = useTheme();\n\n    const dotSize = 4;\n\n    return {\n        root: {},\n        badge: {\n            backgroundColor: theme.palette.secondary.main,\n            borderRadius: dotSize * 0.5,\n            height: dotSize,\n            position: 'absolute',\n            width: dotSize,\n        },\n    };\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        invisible = false,\n        position = defaultPosition,\n        style,\n        offset = 0,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const badgeStyle = css([\n        styles.badge,\n        {\n            [position.vertical]: offset,\n            [position.horizontal]: offset,\n        },\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? <View style={badgeStyle}/> : null}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAGA,MAAMA,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;;AAOA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,OAAO,GAAG,CAAhB;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,KAAK,EAAE;MACHC,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,SAAd,CAAwBC,IADtC;MAEHC,YAAY,EAAEP,OAAO,GAAG,GAFrB;MAGHQ,MAAM,EAAER,OAHL;MAIHS,QAAQ,EAAE,UAJP;MAKHC,KAAK,EAAEV;IALJ;EAFJ,CAAP;AAUH,CAfD;;AAiBe,SAASW,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,SAAS,GAAG,KAFV;IAGFL,QAAQ,GAAGf,eAHT;IAIFqB,KAJE;IAKFC,MAAM,GAAG,CALP;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGrB,SAAS,EAAxB;EAEA,MAAMsB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACjB,IADW,EAElBc,KAFkB,CAAJ,CAAlB;EAKA,MAAMM,UAAU,GAAG,IAAAD,WAAA,EAAI,CACnBF,MAAM,CAAChB,KADY,EAEnB;IACI,CAACO,QAAQ,CAACd,QAAV,GAAqBqB,MADzB;IAEI,CAACP,QAAQ,CAACb,UAAV,GAAuBoB;EAF3B,CAFmB,CAAJ,CAAnB;EAQA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEG;EADX,GAEQF,UAFR,GAIKJ,QAJL,EAMK,CAACC,SAAD,gBAAa,6BAAC,iBAAD;IAAM,KAAK,EAAEO;EAAb,EAAb,GAA0C,IAN/C,CADJ;AAUH;;AAAA"}

package/build/commonjs/Badge/BadgeProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["BadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport type BadgeHorizontalPosition = 'right' | 'left';\n\nexport type BadgeVerticalPosition = 'top' | 'bottom';\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["BadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport type BadgeHorizontalPosition = 'right' | 'left';\n\nexport type BadgeVerticalPosition = 'top' | 'bottom';\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n\n    /**\n     * The offset of the badge.\n     * @default 0\n     */\n    offset?: number;\n}> {}\n"],"mappings":""}

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

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

package/build/commonjs/Slide/Slide.js

@@ -70,6 +70,7 @@ function Slide(props) {
     }
   }, [appear, onEnter, onEntered, onExit, onExited]);
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({
+    pointerEvents: 'box-none',
     style: [animatedStyle, style]
   }, otherProps));
 }

package/build/commonjs/Slide/Slide.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultEnterDuration","defaultExitDuration","getDisappearingOffsetY","Dimensions","get","height","Slide","props","animatedY","animatedYProp","appear","enterDuration","exitDuration","onEnter","onEntered","onExit","onExited","style","otherProps","y","useSharedValue","animatedStyle","useAnimatedStyle","transform","translateY","value","useEffect","toValue","enterConfig","duration","easing","Easing","out","exp","withTiming","isFinished","runOnJS","exitConfig","in","ease"],"sources":["Slide.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type SlideProps from './SlideProps';\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 300;\n\nconst getDisappearingOffsetY = (): number => Dimensions.get('window').height;\n\nexport default function Slide(props: SlideProps) {\n    const {\n        animatedY: animatedYProp,\n        appear,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        style,\n        ...otherProps\n    } = props;\n\n    const y = useSharedValue(getDisappearingOffsetY());\n    const animatedY = animatedYProp || y;\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (appear) {\n            onEnter?.();\n\n            const toValue = 0;\n            const enterConfig: Readonly<WithTimingConfig> = {\n                duration: enterDuration,\n                easing: Easing.out(Easing.exp),\n            };\n\n            animatedY.value = withTiming(toValue, enterConfig, isFinished => {\n                if (isFinished && onEntered) {\n                    runOnJS(onEntered)();\n                }\n            });\n        } else {\n            onExit?.();\n\n            const toValue = getDisappearingOffsetY();\n            const exitConfig: Readonly<WithTimingConfig> = {\n                duration: exitDuration,\n                easing: Easing.in(Easing.ease),\n            };\n\n            animatedY.value = withTiming(toValue, exitConfig, isFinished => {\n                if (isFinished && onExited) {\n                    runOnJS(onExited)();\n                }\n            });\n        }\n    }, [appear, onEnter, onEntered, onExit, onExited]);\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;;;AAGA,MAAMA,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;;AAEA,MAAMC,sBAAsB,GAAG,MAAcC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,MAAtE;;AAEe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,SAAS,EAAEC,aADT;IAEFC,MAFE;IAGFC,aAAa,GAAGX,oBAHd;IAIFY,YAAY,GAAGX,mBAJb;IAKFY,OALE;IAMFC,SANE;IAOFC,MAPE;IAQFC,QARE;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAMY,CAAC,GAAG,IAAAC,qCAAA,EAAelB,sBAAsB,EAArC,CAAV;EACA,MAAMM,SAAS,GAAGC,aAAa,IAAIU,CAAnC;EAEA,MAAME,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEhB,SAAS,CAACiB;IAAxB,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,IAAAC,gBAAA,EAAU,MAAM;IACZ,IAAIhB,MAAJ,EAAY;MACRG,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;MAEP,MAAMc,OAAO,GAAG,CAAhB;MACA,MAAMC,WAAuC,GAAG;QAC5CC,QAAQ,EAAElB,aADkC;QAE5CmB,MAAM,EAAEC,6BAAA,CAAOC,GAAP,CAAWD,6BAAA,CAAOE,GAAlB;MAFoC,CAAhD;MAKAzB,SAAS,CAACiB,KAAV,GAAkB,IAAAS,iCAAA,EAAWP,OAAX,EAAoBC,WAApB,EAAiCO,UAAU,IAAI;QAC7D,IAAIA,UAAU,IAAIrB,SAAlB,EAA6B;UACzB,IAAAsB,8BAAA,EAAQtB,SAAR;QACH;MACJ,CAJiB,CAAlB;IAKH,CAdD,MAcO;MACHC,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;MAEN,MAAMY,OAAO,GAAGzB,sBAAsB,EAAtC;MACA,MAAMmC,UAAsC,GAAG;QAC3CR,QAAQ,EAAEjB,YADiC;QAE3CkB,MAAM,EAAEC,6BAAA,CAAOO,EAAP,CAAUP,6BAAA,CAAOQ,IAAjB;MAFmC,CAA/C;MAKA/B,SAAS,CAACiB,KAAV,GAAkB,IAAAS,iCAAA,EAAWP,OAAX,EAAoBU,UAApB,EAAgCF,UAAU,IAAI;QAC5D,IAAIA,UAAU,IAAInB,QAAlB,EAA4B;UACxB,IAAAoB,8BAAA,EAAQpB,QAAR;QACH;MACJ,CAJiB,CAAlB;IAKH;EACJ,CA9BD,EA8BG,CAACN,MAAD,EAASG,OAAT,EAAkBC,SAAlB,EAA6BC,MAA7B,EAAqCC,QAArC,CA9BH;EAgCA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHK,aADG,EAEHJ,KAFG;EADX,GAKQC,UALR,EADJ;AASH;;AAAA"}
+{"version":3,"names":["defaultEnterDuration","defaultExitDuration","getDisappearingOffsetY","Dimensions","get","height","Slide","props","animatedY","animatedYProp","appear","enterDuration","exitDuration","onEnter","onEntered","onExit","onExited","style","otherProps","y","useSharedValue","animatedStyle","useAnimatedStyle","transform","translateY","value","useEffect","toValue","enterConfig","duration","easing","Easing","out","exp","withTiming","isFinished","runOnJS","exitConfig","in","ease"],"sources":["Slide.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type SlideProps from './SlideProps';\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 300;\n\nconst getDisappearingOffsetY = (): number => Dimensions.get('window').height;\n\nexport default function Slide(props: SlideProps) {\n    const {\n        animatedY: animatedYProp,\n        appear,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        style,\n        ...otherProps\n    } = props;\n\n    const y = useSharedValue(getDisappearingOffsetY());\n    const animatedY = animatedYProp || y;\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (appear) {\n            onEnter?.();\n\n            const toValue = 0;\n            const enterConfig: Readonly<WithTimingConfig> = {\n                duration: enterDuration,\n                easing: Easing.out(Easing.exp),\n            };\n\n            animatedY.value = withTiming(toValue, enterConfig, isFinished => {\n                if (isFinished && onEntered) {\n                    runOnJS(onEntered)();\n                }\n            });\n        } else {\n            onExit?.();\n\n            const toValue = getDisappearingOffsetY();\n            const exitConfig: Readonly<WithTimingConfig> = {\n                duration: exitDuration,\n                easing: Easing.in(Easing.ease),\n            };\n\n            animatedY.value = withTiming(toValue, exitConfig, isFinished => {\n                if (isFinished && onExited) {\n                    runOnJS(onExited)();\n                }\n            });\n        }\n    }, [appear, onEnter, onEntered, onExit, onExited]);\n\n    return (\n        <Animated.View\n            pointerEvents={'box-none'}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;;;AAGA,MAAMA,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;;AAEA,MAAMC,sBAAsB,GAAG,MAAcC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,MAAtE;;AAEe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,SAAS,EAAEC,aADT;IAEFC,MAFE;IAGFC,aAAa,GAAGX,oBAHd;IAIFY,YAAY,GAAGX,mBAJb;IAKFY,OALE;IAMFC,SANE;IAOFC,MAPE;IAQFC,QARE;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAMY,CAAC,GAAG,IAAAC,qCAAA,EAAelB,sBAAsB,EAArC,CAAV;EACA,MAAMM,SAAS,GAAGC,aAAa,IAAIU,CAAnC;EAEA,MAAME,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEhB,SAAS,CAACiB;IAAxB,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,IAAAC,gBAAA,EAAU,MAAM;IACZ,IAAIhB,MAAJ,EAAY;MACRG,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;MAEP,MAAMc,OAAO,GAAG,CAAhB;MACA,MAAMC,WAAuC,GAAG;QAC5CC,QAAQ,EAAElB,aADkC;QAE5CmB,MAAM,EAAEC,6BAAA,CAAOC,GAAP,CAAWD,6BAAA,CAAOE,GAAlB;MAFoC,CAAhD;MAKAzB,SAAS,CAACiB,KAAV,GAAkB,IAAAS,iCAAA,EAAWP,OAAX,EAAoBC,WAApB,EAAiCO,UAAU,IAAI;QAC7D,IAAIA,UAAU,IAAIrB,SAAlB,EAA6B;UACzB,IAAAsB,8BAAA,EAAQtB,SAAR;QACH;MACJ,CAJiB,CAAlB;IAKH,CAdD,MAcO;MACHC,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;MAEN,MAAMY,OAAO,GAAGzB,sBAAsB,EAAtC;MACA,MAAMmC,UAAsC,GAAG;QAC3CR,QAAQ,EAAEjB,YADiC;QAE3CkB,MAAM,EAAEC,6BAAA,CAAOO,EAAP,CAAUP,6BAAA,CAAOQ,IAAjB;MAFmC,CAA/C;MAKA/B,SAAS,CAACiB,KAAV,GAAkB,IAAAS,iCAAA,EAAWP,OAAX,EAAoBU,UAApB,EAAgCF,UAAU,IAAI;QAC5D,IAAIA,UAAU,IAAInB,QAAlB,EAA4B;UACxB,IAAAoB,8BAAA,EAAQpB,QAAR;QACH;MACJ,CAJiB,CAAlB;IAKH;EACJ,CA9BD,EA8BG,CAACN,MAAD,EAASG,OAAT,EAAkBC,SAAlB,EAA6BC,MAA7B,EAAqCC,QAArC,CA9BH;EAgCA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,aAAa,EAAE,UADnB;IAEI,KAAK,EAAE,CACHK,aADG,EAEHJ,KAFG;EAFX,GAMQC,UANR,EADJ;AAUH;;AAAA"}

package/build/commonjs/Tooltip/Tooltip.js

@@ -40,11 +40,13 @@ const ANIMATION_CONFIG = {
 
 function Tooltip(props) {
   const {
+    arrowLayout,
     children,
     left,
     onClose,
     placement = 'top',
     right,
+    numberOfTitleLines = 1,
     style,
     title,
     tooltipStyle,
@@ -62,7 +64,7 @@ function Tooltip(props) {
   const [r, g, b] = (0, _utils.rgb)(theme.palette.primary.main);
   const totalVerticalOffset = -(layout.height + verticalOffset);
   const tooltipLayoutStyle = {
-    alignItems: 'center',
+    alignItems: (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'left' ? 'flex-start' : (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'right' ? 'flex-end' : 'center',
     bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
     left,
     position: 'absolute',
@@ -90,6 +92,10 @@ function Tooltip(props) {
   const textStyle = (0, _styles.css)([fontStyle, {
     marginRight: theme.spacing(2)
   }]);
+  const arrowStyle = (0, _styles.css)({ ...(arrowLayout && {
+      [arrowLayout.placement]: arrowLayout.offset
+    })
+  });
 
   const buttonElem = /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
     pressEffect: 'none',
@@ -99,7 +105,7 @@ function Tooltip(props) {
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: title // TODO: Should we provide text prop customization?
     ,
-    numberOfLines: 1,
+    numberOfLines: numberOfTitleLines,
     style: textStyle
   }), /*#__PURE__*/_react.default.createElement(_icons.Close, {
     fill: theme.palette.primary.contrastTextColor,
@@ -107,11 +113,13 @@ function Tooltip(props) {
     height: 20
   })));
 
-  const arrowElem = /*#__PURE__*/_react.default.createElement(_UpArrow.default, {
+  const arrowElem = /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: arrowStyle
+  }, /*#__PURE__*/_react.default.createElement(_UpArrow.default, {
     upsideDown: placement === 'top',
     fill: theme.palette.primary.main,
     opacity: DEFAULT_OPACITY
-  });
+  }));
 
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: style

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

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={1}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <UpArrow\n            upsideDown={placement === 'top'}\n            fill={theme.palette.primary.main}\n            opacity={DEFAULT_OPACITY}\n        />\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps, ViewStyle } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Tooltip arrow layout.\n     * If 'undefined', the arrow will be centered on tooltip.\n     */\n    arrowLayout?: {\n        placement: TooltipArrowPlacement;\n        offset: number;\n    }\n\n    /**\n     * number of tooltip's title lines\n     * @default 1\n     */\n    numberOfTitleLines?: TextProps['numberOfLines'];\n}> {}\n"],"mappings":""}

package/build/module/Badge/Badge.js

@@ -11,7 +11,6 @@ const defaultPosition = {
 const useStyles = function () {
   const theme = useTheme();
   const dotSize = 4;
-  const offset = 0;
   return {
     root: {},
     badge: {
@@ -20,18 +19,6 @@ const useStyles = function () {
       height: dotSize,
       position: 'absolute',
       width: dotSize
-    },
-    top: {
-      top: offset
-    },
-    bottom: {
-      bottom: offset
-    },
-    left: {
-      left: offset
-    },
-    right: {
-      right: offset
     }
   };
 };
@@ -42,11 +29,15 @@ export default function Badge(props) {
     invisible = false,
     position = defaultPosition,
     style,
+    offset = 0,
     ...otherProps
   } = props;
   const styles = useStyles();
   const rootStyle = css([styles.root, style]);
-  const badgeStyle = css([styles.badge, styles[position.vertical], styles[position.horizontal]]);
+  const badgeStyle = css([styles.badge, {
+    [position.vertical]: offset,
+    [position.horizontal]: offset
+  }]);
   return /*#__PURE__*/React.createElement(View, _extends({
     style: rootStyle
   }, otherProps), children, !invisible ? /*#__PURE__*/React.createElement(View, {

package/build/module/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","css","useTheme","defaultPosition","vertical","horizontal","useStyles","theme","dotSize","offset","root","badge","backgroundColor","palette","secondary","main","borderRadius","height","position","width","top","bottom","left","right","Badge","props","children","invisible","style","otherProps","styles","rootStyle","badgeStyle"],"sources":["Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport BadgeProps, { BadgePosition } from './BadgeProps';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\ntype BadgeStyles = NamedStylesStringUnion<'root' | 'badge' | 'top' | 'bottom' | 'left' | 'right'>;\n\nconst useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {\n    const theme = useTheme();\n\n    const dotSize = 4;\n    const offset = 0;\n\n    return {\n        root: {},\n        badge: {\n            backgroundColor: theme.palette.secondary.main,\n            borderRadius: dotSize * 0.5,\n            height: dotSize,\n            position: 'absolute',\n            width: dotSize,\n        },\n        top: {\n            top: offset,\n        },\n        bottom: {\n            bottom: offset,\n        },\n        left: {\n            left: offset,\n        },\n        right: {\n            right: offset,\n        },\n    };\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        invisible = false,\n        position = defaultPosition,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const badgeStyle = css([\n        styles.badge,\n        styles[position.vertical],\n        styles[position.horizontal],\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? <View style={badgeStyle}/> : null}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,MAAMC,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;;AAOA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMM,OAAO,GAAG,CAAhB;EACA,MAAMC,MAAM,GAAG,CAAf;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,KAAK,EAAE;MACHC,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,SAAd,CAAwBC,IADtC;MAEHC,YAAY,EAAER,OAAO,GAAG,GAFrB;MAGHS,MAAM,EAAET,OAHL;MAIHU,QAAQ,EAAE,UAJP;MAKHC,KAAK,EAAEX;IALJ,CAFJ;IASHY,GAAG,EAAE;MACDA,GAAG,EAAEX;IADJ,CATF;IAYHY,MAAM,EAAE;MACJA,MAAM,EAAEZ;IADJ,CAZL;IAeHa,IAAI,EAAE;MACFA,IAAI,EAAEb;IADJ,CAfH;IAkBHc,KAAK,EAAE;MACHA,KAAK,EAAEd;IADJ;EAlBJ,CAAP;AAsBH,CA5BD;;AA8BA,eAAe,SAASe,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,SAAS,GAAG,KAFV;IAGFT,QAAQ,GAAGf,eAHT;IAIFyB,KAJE;IAKF,GAAGC;EALD,IAMFJ,KANJ;EAQA,MAAMK,MAAM,GAAGxB,SAAS,EAAxB;EAEA,MAAMyB,SAAS,GAAG9B,GAAG,CAAC,CAClB6B,MAAM,CAACpB,IADW,EAElBkB,KAFkB,CAAD,CAArB;EAKA,MAAMI,UAAU,GAAG/B,GAAG,CAAC,CACnB6B,MAAM,CAACnB,KADY,EAEnBmB,MAAM,CAACZ,QAAQ,CAACd,QAAV,CAFa,EAGnB0B,MAAM,CAACZ,QAAQ,CAACb,UAAV,CAHa,CAAD,CAAtB;EAMA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAE0B;EADX,GAEQF,UAFR,GAIKH,QAJL,EAMK,CAACC,SAAD,gBAAa,oBAAC,IAAD;IAAM,KAAK,EAAEK;EAAb,EAAb,GAA0C,IAN/C,CADJ;AAUH;AAAA"}
+{"version":3,"names":["React","View","css","useTheme","defaultPosition","vertical","horizontal","useStyles","theme","dotSize","root","badge","backgroundColor","palette","secondary","main","borderRadius","height","position","width","Badge","props","children","invisible","style","offset","otherProps","styles","rootStyle","badgeStyle"],"sources":["Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport BadgeProps, { BadgePosition } from './BadgeProps';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\ntype BadgeStyles = NamedStylesStringUnion<'root' | 'badge'>;\n\nconst useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {\n    const theme = useTheme();\n\n    const dotSize = 4;\n\n    return {\n        root: {},\n        badge: {\n            backgroundColor: theme.palette.secondary.main,\n            borderRadius: dotSize * 0.5,\n            height: dotSize,\n            position: 'absolute',\n            width: dotSize,\n        },\n    };\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        invisible = false,\n        position = defaultPosition,\n        style,\n        offset = 0,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const badgeStyle = css([\n        styles.badge,\n        {\n            [position.vertical]: offset,\n            [position.horizontal]: offset,\n        },\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? <View style={badgeStyle}/> : null}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,MAAMC,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;;AAOA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMM,OAAO,GAAG,CAAhB;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,KAAK,EAAE;MACHC,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,SAAd,CAAwBC,IADtC;MAEHC,YAAY,EAAEP,OAAO,GAAG,GAFrB;MAGHQ,MAAM,EAAER,OAHL;MAIHS,QAAQ,EAAE,UAJP;MAKHC,KAAK,EAAEV;IALJ;EAFJ,CAAP;AAUH,CAfD;;AAiBA,eAAe,SAASW,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,SAAS,GAAG,KAFV;IAGFL,QAAQ,GAAGd,eAHT;IAIFoB,KAJE;IAKFC,MAAM,GAAG,CALP;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGpB,SAAS,EAAxB;EAEA,MAAMqB,SAAS,GAAG1B,GAAG,CAAC,CAClByB,MAAM,CAACjB,IADW,EAElBc,KAFkB,CAAD,CAArB;EAKA,MAAMK,UAAU,GAAG3B,GAAG,CAAC,CACnByB,MAAM,CAAChB,KADY,EAEnB;IACI,CAACO,QAAQ,CAACb,QAAV,GAAqBoB,MADzB;IAEI,CAACP,QAAQ,CAACZ,UAAV,GAAuBmB;EAF3B,CAFmB,CAAD,CAAtB;EAQA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEG;EADX,GAEQF,UAFR,GAIKJ,QAJL,EAMK,CAACC,SAAD,gBAAa,oBAAC,IAAD;IAAM,KAAK,EAAEM;EAAb,EAAb,GAA0C,IAN/C,CADJ;AAUH;AAAA"}

package/build/module/Badge/BadgeProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["BadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport type BadgeHorizontalPosition = 'right' | 'left';\n\nexport type BadgeVerticalPosition = 'top' | 'bottom';\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["BadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport type BadgeHorizontalPosition = 'right' | 'left';\n\nexport type BadgeVerticalPosition = 'top' | 'bottom';\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n\n    /**\n     * The offset of the badge.\n     * @default 0\n     */\n    offset?: number;\n}> {}\n"],"mappings":""}

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

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

package/build/module/Slide/Slide.js

@@ -56,6 +56,7 @@ export default function Slide(props) {
     }
   }, [appear, onEnter, onEntered, onExit, onExited]);
   return /*#__PURE__*/React.createElement(Animated.View, _extends({
+    pointerEvents: 'box-none',
     style: [animatedStyle, style]
   }, otherProps));
 }

package/build/module/Slide/Slide.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Dimensions","Animated","Easing","runOnJS","useAnimatedStyle","useSharedValue","withTiming","defaultEnterDuration","defaultExitDuration","getDisappearingOffsetY","get","height","Slide","props","animatedY","animatedYProp","appear","enterDuration","exitDuration","onEnter","onEntered","onExit","onExited","style","otherProps","y","animatedStyle","transform","translateY","value","toValue","enterConfig","duration","easing","out","exp","isFinished","exitConfig","in","ease"],"sources":["Slide.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type SlideProps from './SlideProps';\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 300;\n\nconst getDisappearingOffsetY = (): number => Dimensions.get('window').height;\n\nexport default function Slide(props: SlideProps) {\n    const {\n        animatedY: animatedYProp,\n        appear,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        style,\n        ...otherProps\n    } = props;\n\n    const y = useSharedValue(getDisappearingOffsetY());\n    const animatedY = animatedYProp || y;\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (appear) {\n            onEnter?.();\n\n            const toValue = 0;\n            const enterConfig: Readonly<WithTimingConfig> = {\n                duration: enterDuration,\n                easing: Easing.out(Easing.exp),\n            };\n\n            animatedY.value = withTiming(toValue, enterConfig, isFinished => {\n                if (isFinished && onEntered) {\n                    runOnJS(onEntered)();\n                }\n            });\n        } else {\n            onExit?.();\n\n            const toValue = getDisappearingOffsetY();\n            const exitConfig: Readonly<WithTimingConfig> = {\n                duration: exitDuration,\n                easing: Easing.in(Easing.ease),\n            };\n\n            animatedY.value = withTiming(toValue, exitConfig, isFinished => {\n                if (isFinished && onExited) {\n                    runOnJS(onExited)();\n                }\n            });\n        }\n    }, [appear, onEnter, onEntered, onExit, onExited]);\n\n    return (\n        <Animated.View\n            style={[\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,OAA3B,EAAoCC,gBAApC,EAAsDC,cAAtD,EAAsEC,UAAtE,QAAwF,yBAAxF;AAGA,MAAMC,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;;AAEA,MAAMC,sBAAsB,GAAG,MAAcT,UAAU,CAACU,GAAX,CAAe,QAAf,EAAyBC,MAAtE;;AAEA,eAAe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,SAAS,EAAEC,aADT;IAEFC,MAFE;IAGFC,aAAa,GAAGV,oBAHd;IAIFW,YAAY,GAAGV,mBAJb;IAKFW,OALE;IAMFC,SANE;IAOFC,MAPE;IAQFC,QARE;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAMY,CAAC,GAAGpB,cAAc,CAACI,sBAAsB,EAAvB,CAAxB;EACA,MAAMK,SAAS,GAAGC,aAAa,IAAIU,CAAnC;EAEA,MAAMC,aAAa,GAAGtB,gBAAgB,CAAC,OAAO;IAC1CuB,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEd,SAAS,CAACe;IAAxB,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIA9B,SAAS,CAAC,MAAM;IACZ,IAAIiB,MAAJ,EAAY;MACRG,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;MAEP,MAAMW,OAAO,GAAG,CAAhB;MACA,MAAMC,WAAuC,GAAG;QAC5CC,QAAQ,EAAEf,aADkC;QAE5CgB,MAAM,EAAE/B,MAAM,CAACgC,GAAP,CAAWhC,MAAM,CAACiC,GAAlB;MAFoC,CAAhD;MAKArB,SAAS,CAACe,KAAV,GAAkBvB,UAAU,CAACwB,OAAD,EAAUC,WAAV,EAAuBK,UAAU,IAAI;QAC7D,IAAIA,UAAU,IAAIhB,SAAlB,EAA6B;UACzBjB,OAAO,CAACiB,SAAD,CAAP;QACH;MACJ,CAJ2B,CAA5B;IAKH,CAdD,MAcO;MACHC,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;MAEN,MAAMS,OAAO,GAAGrB,sBAAsB,EAAtC;MACA,MAAM4B,UAAsC,GAAG;QAC3CL,QAAQ,EAAEd,YADiC;QAE3Ce,MAAM,EAAE/B,MAAM,CAACoC,EAAP,CAAUpC,MAAM,CAACqC,IAAjB;MAFmC,CAA/C;MAKAzB,SAAS,CAACe,KAAV,GAAkBvB,UAAU,CAACwB,OAAD,EAAUO,UAAV,EAAsBD,UAAU,IAAI;QAC5D,IAAIA,UAAU,IAAId,QAAlB,EAA4B;UACxBnB,OAAO,CAACmB,QAAD,CAAP;QACH;MACJ,CAJ2B,CAA5B;IAKH;EACJ,CA9BQ,EA8BN,CAACN,MAAD,EAASG,OAAT,EAAkBC,SAAlB,EAA6BC,MAA7B,EAAqCC,QAArC,CA9BM,CAAT;EAgCA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,aADG,EAEHH,KAFG;EADX,GAKQC,UALR,EADJ;AASH;AAAA"}
+{"version":3,"names":["React","useEffect","Dimensions","Animated","Easing","runOnJS","useAnimatedStyle","useSharedValue","withTiming","defaultEnterDuration","defaultExitDuration","getDisappearingOffsetY","get","height","Slide","props","animatedY","animatedYProp","appear","enterDuration","exitDuration","onEnter","onEntered","onExit","onExited","style","otherProps","y","animatedStyle","transform","translateY","value","toValue","enterConfig","duration","easing","out","exp","isFinished","exitConfig","in","ease"],"sources":["Slide.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type SlideProps from './SlideProps';\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 300;\n\nconst getDisappearingOffsetY = (): number => Dimensions.get('window').height;\n\nexport default function Slide(props: SlideProps) {\n    const {\n        animatedY: animatedYProp,\n        appear,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        style,\n        ...otherProps\n    } = props;\n\n    const y = useSharedValue(getDisappearingOffsetY());\n    const animatedY = animatedYProp || y;\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (appear) {\n            onEnter?.();\n\n            const toValue = 0;\n            const enterConfig: Readonly<WithTimingConfig> = {\n                duration: enterDuration,\n                easing: Easing.out(Easing.exp),\n            };\n\n            animatedY.value = withTiming(toValue, enterConfig, isFinished => {\n                if (isFinished && onEntered) {\n                    runOnJS(onEntered)();\n                }\n            });\n        } else {\n            onExit?.();\n\n            const toValue = getDisappearingOffsetY();\n            const exitConfig: Readonly<WithTimingConfig> = {\n                duration: exitDuration,\n                easing: Easing.in(Easing.ease),\n            };\n\n            animatedY.value = withTiming(toValue, exitConfig, isFinished => {\n                if (isFinished && onExited) {\n                    runOnJS(onExited)();\n                }\n            });\n        }\n    }, [appear, onEnter, onEntered, onExit, onExited]);\n\n    return (\n        <Animated.View\n            pointerEvents={'box-none'}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,OAA3B,EAAoCC,gBAApC,EAAsDC,cAAtD,EAAsEC,UAAtE,QAAwF,yBAAxF;AAGA,MAAMC,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;;AAEA,MAAMC,sBAAsB,GAAG,MAAcT,UAAU,CAACU,GAAX,CAAe,QAAf,EAAyBC,MAAtE;;AAEA,eAAe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,SAAS,EAAEC,aADT;IAEFC,MAFE;IAGFC,aAAa,GAAGV,oBAHd;IAIFW,YAAY,GAAGV,mBAJb;IAKFW,OALE;IAMFC,SANE;IAOFC,MAPE;IAQFC,QARE;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAMY,CAAC,GAAGpB,cAAc,CAACI,sBAAsB,EAAvB,CAAxB;EACA,MAAMK,SAAS,GAAGC,aAAa,IAAIU,CAAnC;EAEA,MAAMC,aAAa,GAAGtB,gBAAgB,CAAC,OAAO;IAC1CuB,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAEd,SAAS,CAACe;IAAxB,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIA9B,SAAS,CAAC,MAAM;IACZ,IAAIiB,MAAJ,EAAY;MACRG,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;MAEP,MAAMW,OAAO,GAAG,CAAhB;MACA,MAAMC,WAAuC,GAAG;QAC5CC,QAAQ,EAAEf,aADkC;QAE5CgB,MAAM,EAAE/B,MAAM,CAACgC,GAAP,CAAWhC,MAAM,CAACiC,GAAlB;MAFoC,CAAhD;MAKArB,SAAS,CAACe,KAAV,GAAkBvB,UAAU,CAACwB,OAAD,EAAUC,WAAV,EAAuBK,UAAU,IAAI;QAC7D,IAAIA,UAAU,IAAIhB,SAAlB,EAA6B;UACzBjB,OAAO,CAACiB,SAAD,CAAP;QACH;MACJ,CAJ2B,CAA5B;IAKH,CAdD,MAcO;MACHC,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;MAEN,MAAMS,OAAO,GAAGrB,sBAAsB,EAAtC;MACA,MAAM4B,UAAsC,GAAG;QAC3CL,QAAQ,EAAEd,YADiC;QAE3Ce,MAAM,EAAE/B,MAAM,CAACoC,EAAP,CAAUpC,MAAM,CAACqC,IAAjB;MAFmC,CAA/C;MAKAzB,SAAS,CAACe,KAAV,GAAkBvB,UAAU,CAACwB,OAAD,EAAUO,UAAV,EAAsBD,UAAU,IAAI;QAC5D,IAAIA,UAAU,IAAId,QAAlB,EAA4B;UACxBnB,OAAO,CAACmB,QAAD,CAAP;QACH;MACJ,CAJ2B,CAA5B;IAKH;EACJ,CA9BQ,EA8BN,CAACN,MAAD,EAASG,OAAT,EAAkBC,SAAlB,EAA6BC,MAA7B,EAAqCC,QAArC,CA9BM,CAAT;EAgCA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,aAAa,EAAE,UADnB;IAEI,KAAK,EAAE,CACHI,aADG,EAEHH,KAFG;EAFX,GAMQC,UANR,EADJ;AAUH;AAAA"}

package/build/module/Tooltip/Tooltip.js

@@ -18,11 +18,13 @@ const ANIMATION_CONFIG = {
 };
 export default function Tooltip(props) {
   const {
+    arrowLayout,
     children,
     left,
     onClose,
     placement = 'top',
     right,
+    numberOfTitleLines = 1,
     style,
     title,
     tooltipStyle,
@@ -40,7 +42,7 @@ export default function Tooltip(props) {
   const [r, g, b] = rgb(theme.palette.primary.main);
   const totalVerticalOffset = -(layout.height + verticalOffset);
   const tooltipLayoutStyle = {
-    alignItems: 'center',
+    alignItems: (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'left' ? 'flex-start' : (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'right' ? 'flex-end' : 'center',
     bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
     left,
     position: 'absolute',
@@ -68,6 +70,10 @@ export default function Tooltip(props) {
   const textStyle = css([fontStyle, {
     marginRight: theme.spacing(2)
   }]);
+  const arrowStyle = css({ ...(arrowLayout && {
+      [arrowLayout.placement]: arrowLayout.offset
+    })
+  });
   const buttonElem = /*#__PURE__*/React.createElement(ButtonBase, {
     pressEffect: 'none',
     onPress: onClose
@@ -76,18 +82,20 @@ export default function Tooltip(props) {
   }, /*#__PURE__*/React.createElement(Text, {
     children: title // TODO: Should we provide text prop customization?
     ,
-    numberOfLines: 1,
+    numberOfLines: numberOfTitleLines,
     style: textStyle
   }), /*#__PURE__*/React.createElement(CloseIcon, {
     fill: theme.palette.primary.contrastTextColor,
     width: 20,
     height: 20
   })));
-  const arrowElem = /*#__PURE__*/React.createElement(UpArrow, {
+  const arrowElem = /*#__PURE__*/React.createElement(View, {
+    style: arrowStyle
+  }, /*#__PURE__*/React.createElement(UpArrow, {
     upsideDown: placement === 'top',
     fill: theme.palette.primary.main,
     opacity: DEFAULT_OPACITY
-  });
+  }));
   return /*#__PURE__*/React.createElement(View, {
     style: style
   }, children, /*#__PURE__*/React.createElement(Animated.View, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","scale","animatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={1}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <UpArrow\n            upsideDown={placement === 'top'}\n            fill={theme.palette.primary.main}\n            opacity={DEFAULT_OPACITY}\n        />\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","scale","animatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps, ViewStyle } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Tooltip arrow layout.\n     * If 'undefined', the arrow will be centered on tooltip.\n     */\n    arrowLayout?: {\n        placement: TooltipArrowPlacement;\n        offset: number;\n    }\n\n    /**\n     * number of tooltip's title lines\n     * @default 1\n     */\n    numberOfTitleLines?: TextProps['numberOfLines'];\n}> {}\n"],"mappings":""}

package/build/typescript/Badge/BadgeProps.d.ts

@@ -25,5 +25,10 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * }
      */
     position?: BadgePosition;
+    /**
+     * The offset of the badge.
+     * @default 0
+     */
+    offset?: number;
 }> {
 }

package/build/typescript/Checkbox/CheckboxProps.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { CommonComponentColor, OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
-declare type BaseProps = Omit<ButtonBaseProps, 'onPress'>;
+declare type BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;
 export declare type CheckboxColor = CommonComponentColor;
 export default interface CheckboxProps extends OverridableComponentProps<BaseProps, {
     /**

package/build/typescript/Tooltip/TooltipProps.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { ViewProps } from 'react-native';
+import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
 export declare type TooltipPlacement = 'top' | 'bottom';
+export declare type TooltipArrowPlacement = 'left' | 'right';
 export default interface TooltipProps extends ComponentProps<{
     /**
      * Tooltip reference element.
@@ -43,5 +44,18 @@ export default interface TooltipProps extends ComponentProps<{
      * @default false
      */
     visible?: boolean;
+    /**
+     * Tooltip arrow layout.
+     * If 'undefined', the arrow will be centered on tooltip.
+     */
+    arrowLayout?: {
+        placement: TooltipArrowPlacement;
+        offset: number;
+    };
+    /**
+     * number of tooltip's title lines
+     * @default 1
+     */
+    numberOfTitleLines?: TextProps['numberOfLines'];
 }> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.30",
+  "version": "2.0.0-beta.32",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fae21ec577db95700d6c21442f2249dc824eb3de"
+  "gitHead": "b95359524cf4e246be3dce3580f3d587502429e6"
 }

package/src/Badge/Badge.tsx

@@ -9,13 +9,12 @@ const defaultPosition: BadgePosition = {
     horizontal: 'right',
 };
 
-type BadgeStyles = NamedStylesStringUnion<'root' | 'badge' | 'top' | 'bottom' | 'left' | 'right'>;
+type BadgeStyles = NamedStylesStringUnion<'root' | 'badge'>;
 
 const useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {
     const theme = useTheme();
 
     const dotSize = 4;
-    const offset = 0;
 
     return {
         root: {},
@@ -26,18 +25,6 @@ const useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {
             position: 'absolute',
             width: dotSize,
         },
-        top: {
-            top: offset,
-        },
-        bottom: {
-            bottom: offset,
-        },
-        left: {
-            left: offset,
-        },
-        right: {
-            right: offset,
-        },
     };
 };
 
@@ -47,6 +34,7 @@ export default function Badge(props: BadgeProps) {
         invisible = false,
         position = defaultPosition,
         style,
+        offset = 0,
         ...otherProps
     } = props;
 
@@ -59,8 +47,10 @@ export default function Badge(props: BadgeProps) {
 
     const badgeStyle = css([
         styles.badge,
-        styles[position.vertical],
-        styles[position.horizontal],
+        {
+            [position.vertical]: offset,
+            [position.horizontal]: offset,
+        },
     ]);
 
     return (

package/src/Badge/BadgeProps.ts

@@ -31,4 +31,10 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * }
      */
     position?: BadgePosition;
+
+    /**
+     * The offset of the badge.
+     * @default 0
+     */
+    offset?: number;
 }> {}

package/src/Checkbox/CheckboxProps.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { CommonComponentColor, OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
 
-type BaseProps = Omit<ButtonBaseProps, 'onPress'>;
+type BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;
 
 export type CheckboxColor = CommonComponentColor;
 

package/src/Slide/Slide.tsx

@@ -64,6 +64,7 @@ export default function Slide(props: SlideProps) {
 
     return (
         <Animated.View
+            pointerEvents={'box-none'}
             style={[
                 animatedStyle,
                 style,

package/src/Tooltip/Tooltip.tsx

@@ -16,11 +16,13 @@ const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
 export default function Tooltip(props: TooltipProps) {
     const {
+        arrowLayout,
         children,
         left,
         onClose,
         placement = 'top',
         right,
+        numberOfTitleLines = 1,
         style,
         title,
         tooltipStyle,
@@ -42,7 +44,11 @@ export default function Tooltip(props: TooltipProps) {
 
     const totalVerticalOffset = -(layout.height + verticalOffset);
     const tooltipLayoutStyle: ViewProps['style'] = {
-        alignItems: 'center',
+        alignItems: arrowLayout?.placement === 'left'
+            ? 'flex-start'
+            : arrowLayout?.placement === 'right'
+                ? 'flex-end'
+                : 'center',
         bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
         left,
         position: 'absolute',
@@ -77,6 +83,12 @@ export default function Tooltip(props: TooltipProps) {
         { marginRight: theme.spacing(2) },
     ]);
 
+    const arrowStyle = css({
+        ...(arrowLayout && {
+            [arrowLayout.placement]: arrowLayout.offset,
+        }),
+    });
+
     const buttonElem = (
         <ButtonBase
             pressEffect={'none'}
@@ -86,7 +98,7 @@ export default function Tooltip(props: TooltipProps) {
                 <Text
                     children={title}
                     // TODO: Should we provide text prop customization?
-                    numberOfLines={1}
+                    numberOfLines={numberOfTitleLines}
                     style={textStyle}
                 />
                 <CloseIcon
@@ -99,11 +111,13 @@ export default function Tooltip(props: TooltipProps) {
     );
 
     const arrowElem = (
-        <UpArrow
-            upsideDown={placement === 'top'}
-            fill={theme.palette.primary.main}
-            opacity={DEFAULT_OPACITY}
-        />
+        <View style={arrowStyle}>
+            <UpArrow
+                upsideDown={placement === 'top'}
+                fill={theme.palette.primary.main}
+                opacity={DEFAULT_OPACITY}
+            />
+        </View>
     );
 
     return (

package/src/Tooltip/TooltipProps.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import type { ViewProps, ViewStyle } from 'react-native';
+import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
 
 export type TooltipPlacement = 'top' | 'bottom';
 
+export type TooltipArrowPlacement = 'left' | 'right';
+
 export default interface TooltipProps extends ComponentProps<{
     /**
      * Tooltip reference element.
@@ -53,4 +55,19 @@ export default interface TooltipProps extends ComponentProps<{
      * @default false
      */
     visible?: boolean;
+
+    /**
+     * Tooltip arrow layout.
+     * If 'undefined', the arrow will be centered on tooltip.
+     */
+    arrowLayout?: {
+        placement: TooltipArrowPlacement;
+        offset: number;
+    }
+
+    /**
+     * number of tooltip's title lines
+     * @default 1
+     */
+    numberOfTitleLines?: TextProps['numberOfLines'];
 }> {}