@fountain-ui/core 2.0.0-beta.60 → 2.0.0-beta.62

package/build/commonjs/Divider/Divider.js

@@ -36,6 +36,7 @@ function Divider(props) {
     borderWidth = 1,
     children: childrenProp,
     color = 'divider',
+    elementAlign = 'center',
     inset = 0,
     marginBetweenChildren = 2,
     style,
@@ -76,15 +77,21 @@ function Divider(props) {
   const containerStyle = (0, _styles.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
   const dividerStyle = (0, _styles.css)([borderColorStyle, borderWidthStyle, styles.divider]);
   const dividerMarginSize = theme.spacing(marginBetweenChildren);
-  const startDividerStyle = vertical ? {
-    marginBottom: dividerMarginSize
-  } : {
-    marginRight: dividerMarginSize
+  const startDividerStyle = {
+    display: elementAlign !== 'start' ? 'flex' : 'none',
+    ...(vertical ? {
+      marginBottom: dividerMarginSize
+    } : {
+      marginRight: dividerMarginSize
+    })
   };
-  const endDividerStyle = vertical ? {
-    marginTop: dividerMarginSize
-  } : {
-    marginLeft: dividerMarginSize
+  const endDividerStyle = {
+    display: elementAlign !== 'end' ? 'flex' : 'none',
+    ...(vertical ? {
+      marginTop: dividerMarginSize
+    } : {
+      marginLeft: dividerMarginSize
+    })
   };
   const fontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typo => typo.caption2,

package/build/commonjs/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","inset","marginBetweenChildren","style","vertical","otherProps","theme","useTheme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","endDividerStyle","fontStyle","createFontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type DividerProps from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth = 1,\n        children: childrenProp,\n        color = 'divider',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const fontColor = theme.palette.text.secondary;\n    const borderColor = color === 'divider'\n        ? theme.palette.divider\n        : theme.palette[color].main;\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };\n    const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,SAAS,EAAE,SADJ;IAEPC,UAAU,EAAE;EAFL,CADkB;EAK7BC,GAAG,EAAE;IACDC,aAAa,EAAE;EADd,CALwB;EAQ7BC,MAAM,EAAE;IACJD,aAAa,EAAE;EADX,CARqB;EAW7BE,OAAO,EAAE;IACLC,QAAQ,EAAE;EADL;AAXoB,CAAlB,CAAf;;AAgBe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,WAAW,GAAG,CADZ;IAEFC,QAAQ,EAAEC,YAFR;IAGFC,KAAK,GAAG,SAHN;IAIFC,KAAK,GAAG,CAJN;IAKFC,qBAAqB,GAAG,CALtB;IAMFC,KANE;IAOFC,QAAQ,GAAG,KAPT;IAQF,GAAGC;EARD,IASFT,KATJ;EAWA,MAAMU,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBC,SAArC;EACA,MAAMC,WAAW,GAAGZ,KAAK,KAAK,SAAV,GACdM,KAAK,CAACG,OAAN,CAAchB,OADA,GAEda,KAAK,CAACG,OAAN,CAAcT,KAAd,EAAqBa,IAF3B;EAGA,MAAMC,UAAU,GAAGR,KAAK,CAACS,OAAN,CAAc,CAAd,CAAnB;EACA,MAAMC,SAAS,GAAGV,KAAK,CAACS,OAAN,CAAcd,KAAd,CAAlB;EAEA,MAAMgB,UAAU,GAAGH,UAAnB;EACA,MAAMI,WAAW,GAAGJ,UAApB;EACA,MAAMK,SAAS,GAAGL,UAAlB;EACA,MAAMM,YAAY,GAAGN,UAArB;EAEA,MAAMO,WAAW,GAAGjB,QAAQ,GACtB;IAAEa,UAAF;IAAcC;EAAd,CADsB,GAEtB;IAAEC,SAAF;IAAaC;EAAb,CAFN;EAIA,MAAME,UAAU,GAAGlB,QAAQ,GACrB;IAAEe,SAAS,EAAEH,SAAb;IAAwBI,YAAY,EAAEJ;EAAtC,CADqB,GAErB;IAAEC,UAAU,EAAED,SAAd;IAAyBE,WAAW,EAAEF;EAAtC,CAFN;EAIA,MAAMO,gBAAgB,GAAG;IAAEX;EAAF,CAAzB;EACA,MAAMY,gBAAgB,GAAIpB,QAAQ,GAAG;IAAEqB,gBAAgB,EAAE5B;EAApB,CAAH,GAAuC;IAAE6B,iBAAiB,EAAE7B;EAArB,CAAzE;EAEA,MAAM8B,cAAc,GAAG,IAAAC,WAAA,EAAI,CACvBN,UADuB,EAEvBD,WAFuB,EAGvBrC,MAAM,CAACG,SAHgB,EAIvBiB,QAAQ,GAAGpB,MAAM,CAACQ,MAAV,GAAmBR,MAAM,CAACM,GAJX,EAKvBS,YAAY,GAAG8B,SAAH,GAAeN,gBALJ,EAMvBxB,YAAY,GAAG8B,SAAH,GAAeL,gBANJ,EAOvBrB,KAPuB,CAAJ,CAAvB;EAUA,MAAM2B,YAAY,GAAG,IAAAF,WAAA,EAAI,CACrBL,gBADqB,EAErBC,gBAFqB,EAGrBxC,MAAM,CAACS,OAHc,CAAJ,CAArB;EAMA,MAAMsC,iBAAiB,GAAGzB,KAAK,CAACS,OAAN,CAAcb,qBAAd,CAA1B;EACA,MAAM8B,iBAAiB,GAAG5B,QAAQ,GAAG;IAAEgB,YAAY,EAAEW;EAAhB,CAAH,GAAyC;IAAEb,WAAW,EAAEa;EAAf,CAA3E;EACA,MAAME,eAAe,GAAG7B,QAAQ,GAAG;IAAEe,SAAS,EAAEY;EAAb,CAAH,GAAsC;IAAEd,UAAU,EAAEc;EAAd,CAAtE;EAEA,MAAMG,SAAS,GAAG,IAAAC,uBAAA,EAAgB7B,KAAhB,EAAuB;IACrC8B,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;IAErCtC,KAAK,EAAEQ;EAF8B,CAAvB,CAAlB;EAKA,MAAM+B,OAAO,GAAG,OAAOxC,YAAP,KAAwB,QAAxB,gBACV,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAA6B,WAAA,EAAIM,SAAJ;EAAb,GAA8BnC,YAA9B,CADU,GAEVA,YAFN;EAIA,MAAMD,QAAQ,GAAGC,YAAY,gBACzB,yEACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAA6B,WAAA,EAAI,CAACE,YAAD,EAAeE,iBAAf,CAAJ;EAAb,EADJ,EAEKO,OAFL,eAGI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAX,WAAA,EAAI,CAACE,YAAD,EAAeG,eAAf,CAAJ;EAAb,EAHJ,CADyB,GAMzB,IANJ;EAQA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEN;EADX,GAEQtB,UAFR,GAIKP,QAJL,CADJ;AAQH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","elementAlign","inset","marginBetweenChildren","style","vertical","otherProps","theme","useTheme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","createFontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth = 1,\n        children: childrenProp,\n        color = 'divider',\n        elementAlign = 'center',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const fontColor = theme.palette.text.secondary;\n    const borderColor = color === 'divider'\n        ? theme.palette.divider\n        : theme.palette[color].main;\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'start' ? 'flex' : 'none',\n        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n    };\n    const endDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'end' ? 'flex' : 'none',\n        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <React.Fragment>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </React.Fragment>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Divider/DividerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n     * @default 'divider'\n     */\n    color?: DividerColor;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default 1\n     */\n    borderWidth?: number;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n     * @default 'divider'\n     */\n    color?: DividerColor;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default 1\n     */\n    borderWidth?: number;\n\n    /**\n     *  Set position of children.\n     *  @default center\n     */\n    elementAlign?: 'start' | 'center' | 'end';\n}> {}\n"],"mappings":""}

package/build/commonjs/Tooltip/Tooltip.js

@@ -28,7 +28,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const DEFAULT_OPACITY = 0.8;
-const initialLayout = {
+const INITIAL_LAYOUT = {
   width: 0,
   height: 0,
   x: 0,
@@ -42,6 +42,7 @@ function Tooltip(props) {
   const {
     arrowLayout,
     children,
+    initialLayout = INITIAL_LAYOUT,
     left,
     onClose,
     placement = 'top',

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

@@ -1 +1 @@
-{"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","flexShrink","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        width: '100%',\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        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\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":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;AAEA,MAAMA,eAAe,GAAG,GAAxB;AACA,MAAMC,aAAa,GAAG;EAAEC,KAAK,EAAE,CAAT;EAAYC,MAAM,EAAE,CAApB;EAAuBC,CAAC,EAAE,CAA1B;EAA6BC,CAAC,EAAE;AAAhC,CAAtB;AAEA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAEe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,WADE;IAEFC,QAFE;IAGFC,IAHE;IAIFC,OAJE;IAKFC,SAAS,GAAG,KALV;IAMFC,KANE;IAOFC,kBAAkB,GAAG,CAPnB;IAQFC,KARE;IASFC,KATE;IAUFC,YAVE;IAWFC,cAAc,GAAG,CAXf;IAYFC,OAAO,GAAG;EAZR,IAaFZ,KAbJ;EAeA,MAAMa,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAASzB,aAAT,CAA5B;EAEA,MAAM0B,KAAK,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAd;EAEA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEJ,KAAK,EAAEA,KAAK,CAACK;IAAf,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,MAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAY,IAAAC,UAAA,EAAId,KAAK,CAACe,OAAN,CAAcC,OAAd,CAAsBC,IAA1B,CAAlB;EAEA,MAAMC,mBAAmB,GAAG,EAAEhB,MAAM,CAACrB,MAAP,GAAgBiB,cAAlB,CAA5B;EACA,MAAMqB,kBAAsC,GAAG;IAC3CC,UAAU,EAAE,CAAAhC,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,SAAb,MAA2B,MAA3B,GACN,YADM,GAEN,CAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,SAAb,MAA2B,OAA3B,GACI,UADJ,GAEI,QALiC;IAM3C6B,MAAM,EAAE7B,SAAS,KAAK,QAAd,GAAyB0B,mBAAzB,GAA+CI,SANZ;IAO3ChC,IAP2C;IAQ3CiC,QAAQ,EAAE,UARiC;IAS3C9B,KAT2C;IAU3C+B,GAAG,EAAEhC,SAAS,KAAK,KAAd,GAAsB0B,mBAAtB,GAA4CI,SAVN;IAW3CG,MAAM,EAAEzB,KAAK,CAACyB,MAAN,CAAaC,OAXsB;IAY3C7C,MAAM,EAAEkB,OAAO,GAAGuB,SAAH,GAAe,CAZa;IAa3CK,QAAQ,EAAE5B,OAAO,GAAGuB,SAAH,GAAe;EAbW,CAA/C;EAgBA,IAAAM,gBAAA,EAAU,MAAM;IACZ,MAAMC,cAAc,GAAG9B,OAAO,GAAG,CAAH,GAAO,CAArC;IAEAM,KAAK,CAACK,KAAN,GAAc,IAAAoB,iCAAA,EAAWD,cAAX,EAA2B7C,gBAA3B,CAAd;EACH,CAJD,EAIG,CAACe,OAAD,CAJH;EAMA,MAAMgC,cAAkC,GAAG;IACvCX,UAAU,EAAE,QAD2B;IAEvCY,eAAe,EAAG,QAAOrB,CAAE,KAAIC,CAAE,KAAIC,CAAE,KAAInC,eAAgB,GAFpB;IAGvCuD,YAAY,EAAEjC,KAAK,CAACkC,KAAN,CAAYC,SAHa;IAIvCC,aAAa,EAAE,KAJwB;IAKvCC,OAAO,EAAErC,KAAK,CAACsC,OAAN,CAAc,CAAd,CAL8B;IAMvC1D,KAAK,EAAE;EANgC,CAA3C;EASA,MAAM2D,SAAS,GAAG,IAAAC,uBAAA,EAAgBxC,KAAhB,EAAuB;IACrCyC,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;IAErCC,KAAK,EAAE5C,KAAK,CAACe,OAAN,CAAcC,OAAd,CAAsB6B;EAFQ,CAAvB,CAAlB;EAKA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBR,SADkB,EAElB;IACIS,WAAW,EAAEhD,KAAK,CAACsC,OAAN,CAAc,CAAd,CADjB;IAEIW,UAAU,EAAE;EAFhB,CAFkB,CAAJ,CAAlB;EAQA,MAAMC,UAAU,GAAG,IAAAH,WAAA,EAAI,EACnB,IAAI3D,WAAW,IAAI;MACf,CAACA,WAAW,CAACI,SAAb,GAAyBJ,WAAW,CAAC+D;IADtB,CAAnB;EADmB,CAAJ,CAAnB;;EAMA,MAAMC,UAAU,gBACZ,6BAAC,mBAAD;IACI,WAAW,EAAE,MADjB;IAEI,OAAO,EAAE7D;EAFb,gBAII,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAwD,WAAA,EAAIhB,cAAJ;EAAb,gBACI,6BAAC,iBAAD;IACI,QAAQ,EAAEnC,KADd,CAEI;IAFJ;IAGI,aAAa,EAAEF,kBAHnB;IAII,KAAK,EAAEoD;EAJX,EADJ,eAOI,6BAAC,YAAD;IACI,IAAI,EAAE9C,KAAK,CAACe,OAAN,CAAcC,OAAd,CAAsB6B,iBADhC;IAEI,KAAK,EAAE,EAFX;IAGI,MAAM,EAAE;EAHZ,EAPJ,CAJJ,CADJ;;EAqBA,MAAMQ,SAAS,gBACX,6BAAC,iBAAD;IAAM,KAAK,EAAEH;EAAb,gBACI,6BAAC,gBAAD;IACI,UAAU,EAAE1D,SAAS,KAAK,KAD9B;IAEI,IAAI,EAAEQ,KAAK,CAACe,OAAN,CAAcC,OAAd,CAAsBC,IAFhC;IAGI,OAAO,EAAEvC;EAHb,EADJ,CADJ;;EAUA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAEiB;EAAb,GACKN,QADL,eAGI,6BAAC,8BAAD,CAAU,IAAV;IACI,QAAQ,EAAGiE,KAAD,IAAWnD,SAAS,CAACmD,KAAK,CAACC,WAAN,CAAkBrD,MAAnB,CADlC;IAEI,KAAK,EAAE,CACHK,aADG,EAEHY,kBAFG,EAGHtB,YAHG;EAFX,GAQKL,SAAS,KAAK,KAAd,gBACG,6BAAC,cAAD,CAAO,QAAP,QACK4D,UADL,EAEKC,SAFL,CADH,gBAMG,6BAAC,cAAD,CAAO,QAAP,QACKA,SADL,EAEKD,UAFL,CAdR,CAHJ,CADJ;AA0BH;;AAAA"}
+{"version":3,"names":["DEFAULT_OPACITY","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","initialLayout","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","flexShrink","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 INITIAL_LAYOUT = { 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        initialLayout = INITIAL_LAYOUT,\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        width: '100%',\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        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\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 { 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":""}
+{"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 type TooltipInitialLayout = { height: number, width: number, x: number, y: number };\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    /**\n     * position of tooltip before onLayout call\n     * @default  { height: 0, width: 0 , x: 0, y: 0}\n     */\n    initialLayout: TooltipInitialLayout;\n}> {}\n"],"mappings":""}

package/build/module/Divider/Divider.js

@@ -23,6 +23,7 @@ export default function Divider(props) {
     borderWidth = 1,
     children: childrenProp,
     color = 'divider',
+    elementAlign = 'center',
     inset = 0,
     marginBetweenChildren = 2,
     style,
@@ -63,15 +64,21 @@ export default function Divider(props) {
   const containerStyle = css([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
   const dividerStyle = css([borderColorStyle, borderWidthStyle, styles.divider]);
   const dividerMarginSize = theme.spacing(marginBetweenChildren);
-  const startDividerStyle = vertical ? {
-    marginBottom: dividerMarginSize
-  } : {
-    marginRight: dividerMarginSize
+  const startDividerStyle = {
+    display: elementAlign !== 'start' ? 'flex' : 'none',
+    ...(vertical ? {
+      marginBottom: dividerMarginSize
+    } : {
+      marginRight: dividerMarginSize
+    })
   };
-  const endDividerStyle = vertical ? {
-    marginTop: dividerMarginSize
-  } : {
-    marginLeft: dividerMarginSize
+  const endDividerStyle = {
+    display: elementAlign !== 'end' ? 'flex' : 'none',
+    ...(vertical ? {
+      marginTop: dividerMarginSize
+    } : {
+      marginLeft: dividerMarginSize
+    })
   };
   const fontStyle = createFontStyle(theme, {
     selector: typo => typo.caption2,

package/build/module/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","inset","marginBetweenChildren","style","vertical","otherProps","theme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","endDividerStyle","fontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type DividerProps from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth = 1,\n        children: childrenProp,\n        color = 'divider',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const fontColor = theme.palette.text.secondary;\n    const borderColor = color === 'divider'\n        ? theme.palette.divider\n        : theme.palette[color].main;\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };\n    const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","elementAlign","inset","marginBetweenChildren","style","vertical","otherProps","theme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth = 1,\n        children: childrenProp,\n        color = 'divider',\n        elementAlign = 'center',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const fontColor = theme.palette.text.secondary;\n    const borderColor = color === 'divider'\n        ? theme.palette.divider\n        : theme.palette[color].main;\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'start' ? 'flex' : 'none',\n        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n    };\n    const endDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'end' ? 'flex' : 'none',\n        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <React.Fragment>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </React.Fragment>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/module/Divider/DividerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n     * @default 'divider'\n     */\n    color?: DividerColor;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default 1\n     */\n    borderWidth?: number;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n     * @default 'divider'\n     */\n    color?: DividerColor;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default 1\n     */\n    borderWidth?: number;\n\n    /**\n     *  Set position of children.\n     *  @default center\n     */\n    elementAlign?: 'start' | 'center' | 'end';\n}> {}\n"],"mappings":""}

package/build/module/Tooltip/Tooltip.js

@@ -7,7 +7,7 @@ import { createFontStyle, css, useTheme } from '../styles';
 import { Close as CloseIcon } from '../internal/icons';
 import UpArrow from './UpArrow';
 const DEFAULT_OPACITY = 0.8;
-const initialLayout = {
+const INITIAL_LAYOUT = {
   width: 0,
   height: 0,
   x: 0,
@@ -20,6 +20,7 @@ export default function Tooltip(props) {
   const {
     arrowLayout,
     children,
+    initialLayout = INITIAL_LAYOUT,
     left,
     onClose,
     placement = 'top',

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","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","flexShrink","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        width: '100%',\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        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\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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"}
+{"version":3,"names":["React","useEffect","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","initialLayout","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","flexShrink","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 INITIAL_LAYOUT = { 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        initialLayout = INITIAL_LAYOUT,\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        width: '100%',\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        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\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 { 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":""}
+{"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 type TooltipInitialLayout = { height: number, width: number, x: number, y: number };\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    /**\n     * position of tooltip before onLayout call\n     * @default  { height: 0, width: 0 , x: 0, y: 0}\n     */\n    initialLayout: TooltipInitialLayout;\n}> {}\n"],"mappings":""}

package/build/typescript/Divider/DividerProps.d.ts

@@ -32,5 +32,10 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      *  @default 1
      */
     borderWidth?: number;
+    /**
+     *  Set position of children.
+     *  @default center
+     */
+    elementAlign?: 'start' | 'center' | 'end';
 }> {
 }

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

@@ -4,6 +4,12 @@ import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
 export declare type TooltipPlacement = 'top' | 'bottom';
 export declare type TooltipArrowPlacement = 'left' | 'right';
+export declare type TooltipInitialLayout = {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+};
 export default interface TooltipProps extends ComponentProps<{
     /**
      * Tooltip reference element.
@@ -57,5 +63,10 @@ export default interface TooltipProps extends ComponentProps<{
      * @default 1
      */
     numberOfTitleLines?: TextProps['numberOfLines'];
+    /**
+     * position of tooltip before onLayout call
+     * @default  { height: 0, width: 0 , x: 0, y: 0}
+     */
+    initialLayout: TooltipInitialLayout;
 }> {
 }

package/package.json

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

package/src/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { ExtendedStyle } from '../types';
 import type DividerProps from './DividerProps';
 
 const styles = StyleSheet.create({
@@ -24,6 +25,7 @@ export default function Divider(props: DividerProps) {
         borderWidth = 1,
         children: childrenProp,
         color = 'divider',
+        elementAlign = 'center',
         inset = 0,
         marginBetweenChildren = 2,
         style,
@@ -73,8 +75,14 @@ export default function Divider(props: DividerProps) {
     ]);
 
     const dividerMarginSize = theme.spacing(marginBetweenChildren);
-    const startDividerStyle = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };
-    const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };
+    const startDividerStyle: ExtendedStyle = {
+        display: elementAlign !== 'start' ? 'flex' : 'none',
+        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),
+    };
+    const endDividerStyle: ExtendedStyle = {
+        display: elementAlign !== 'end' ? 'flex' : 'none',
+        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),
+    };
 
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => typo.caption2,
@@ -86,11 +94,11 @@ export default function Divider(props: DividerProps) {
         : childrenProp;
 
     const children = childrenProp ? (
-        <>
+        <React.Fragment>
             <View style={css([dividerStyle, startDividerStyle])}/>
             {element}
             <View style={css([dividerStyle, endDividerStyle])}/>
-        </>
+        </React.Fragment>
     ) : null;
 
     return (

package/src/Divider/DividerProps.ts

@@ -39,4 +39,10 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      *  @default 1
      */
     borderWidth?: number;
+
+    /**
+     *  Set position of children.
+     *  @default center
+     */
+    elementAlign?: 'start' | 'center' | 'end';
 }> {}

package/src/Tooltip/Tooltip.tsx

@@ -10,7 +10,7 @@ import type TooltipProps from './TooltipProps';
 import UpArrow from './UpArrow';
 
 const DEFAULT_OPACITY = 0.8;
-const initialLayout = { width: 0, height: 0, x: 0, y: 0 };
+const INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };
 
 const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
@@ -18,6 +18,7 @@ export default function Tooltip(props: TooltipProps) {
     const {
         arrowLayout,
         children,
+        initialLayout = INITIAL_LAYOUT,
         left,
         onClose,
         placement = 'top',

package/src/Tooltip/TooltipProps.ts

@@ -7,6 +7,8 @@ export type TooltipPlacement = 'top' | 'bottom';
 
 export type TooltipArrowPlacement = 'left' | 'right';
 
+export type TooltipInitialLayout = { height: number, width: number, x: number, y: number };
+
 export default interface TooltipProps extends ComponentProps<{
     /**
      * Tooltip reference element.
@@ -70,4 +72,10 @@ export default interface TooltipProps extends ComponentProps<{
      * @default 1
      */
     numberOfTitleLines?: TextProps['numberOfLines'];
+
+    /**
+     * position of tooltip before onLayout call
+     * @default  { height: 0, width: 0 , x: 0, y: 0}
+     */
+    initialLayout: TooltipInitialLayout;
 }> {}