@fountain-ui/core 3.0.0-alpha.2 → 3.0.0-alpha.21

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=BackButtonProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["BackButtonProps.ts"],"sourcesContent":["import type { IconButtonProps } from '../../IconButton';\nimport type { OverridableComponentProps } from '../../types';\n\nexport default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {}\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _BackButton.default;
+  }
+});
+
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './BackButton';\nexport type { default as BackButtonProps } from './BackButtonProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Toolbar/Toolbar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Toolbar;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,6 +11,8 @@ var _Row = _interopRequireDefault(require("../Row"));
 
 var _styles = require("../styles");
 
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -40,7 +42,7 @@ const sizeMap = {
   }
 };
 
-function Toolbar(props) {
+const Toolbar = props => {
   const {
     disableGutters = false,
     size = 'medium',
@@ -51,7 +53,9 @@ function Toolbar(props) {
   return /*#__PURE__*/_react.default.createElement(_Row.default, _extends({
     style: (0, _styles.css)([styles.root, !disableGutters ? styles.gutters : undefined, sizeMap[size], style])
   }, otherProps));
-}
+};
 
-;
+Toolbar.BackButton = _BackButton.default;
+var _default = Toolbar;
+exports.default = _default;
 //# sourceMappingURL=Toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","css","undefined"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flexWrap: 'nowrap',\n        },\n        gutters: {\n            paddingHorizontal: theme.spacing(4),\n        },\n    };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n    small: { height: 48 },\n    medium: { height: 50 },\n    large: { height: 56 },\n};\n\nexport default function Toolbar(props: ToolbarProps) {\n    const {\n        disableGutters = false,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <Row\n            style={css([\n                styles.root,\n                !disableGutters ? styles.gutters : undefined,\n                sizeMap[size],\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;AAMA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR,CADH;IAKHC,OAAO,EAAE;MACLC,iBAAiB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IADd;EALN,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMe,SAASG,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,IAAI,GAAG,QAFL;IAGFC,KAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGpB,SAAS,EAAxB;EAEA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAE,IAAAqB,WAAA,EAAI,CACPD,MAAM,CAACjB,IADA,EAEP,CAACa,cAAD,GAAkBI,MAAM,CAACd,OAAzB,GAAmCgB,SAF5B,EAGPb,OAAO,CAACQ,IAAD,CAHA,EAIPC,KAJO,CAAJ;EADX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","css","undefined","BackButton"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport BackButton from './BackButton';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flexWrap: 'nowrap',\n        },\n        gutters: {\n            paddingHorizontal: theme.spacing(4),\n        },\n    };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n    small: { height: 48 },\n    medium: { height: 50 },\n    large: { height: 56 },\n};\n\nconst Toolbar = (props: ToolbarProps) => {\n    const {\n        disableGutters = false,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <Row\n            style={css([\n                styles.root,\n                !disableGutters ? styles.gutters : undefined,\n                sizeMap[size],\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n\nToolbar.BackButton = BackButton;\n\nexport default Toolbar;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAMA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR,CADH;IAKHC,OAAO,EAAE;MACLC,iBAAiB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IADd;EALN,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMA,MAAMG,OAAO,GAAIC,KAAD,IAAyB;EACrC,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,IAAI,GAAG,QAFL;IAGFC,KAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGpB,SAAS,EAAxB;EAEA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAE,IAAAqB,WAAA,EAAI,CACPD,MAAM,CAACjB,IADA,EAEP,CAACa,cAAD,GAAkBI,MAAM,CAACd,OAAzB,GAAmCgB,SAF5B,EAGPb,OAAO,CAACQ,IAAD,CAHA,EAIPC,KAJO,CAAJ;EADX,GAOQC,UAPR,EADJ;AAWH,CArBD;;AAuBAL,OAAO,CAACS,UAAR,GAAqBA,mBAArB;eAEeT,O"}

package/build/commonjs/Tooltip/Beaks/index.js

@@ -3,6 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "HorizontalLargeBeak", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalLargeBeak.default;
+  }
+});
+Object.defineProperty(exports, "HorizontalSmallBeak", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalSmallBeak.default;
+  }
+});
+Object.defineProperty(exports, "VerticalLargeBeak", {
+  enumerable: true,
+  get: function () {
+    return _VerticalLargeBeak.default;
+  }
+});
+Object.defineProperty(exports, "VerticalSmallBeak", {
+  enumerable: true,
+  get: function () {
+    return _VerticalSmallBeak.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -12,5 +36,13 @@ Object.defineProperty(exports, "default", {
 
 var _Beak = _interopRequireDefault(require("./Beak"));
 
+var _HorizontalLargeBeak = _interopRequireDefault(require("./HorizontalLargeBeak"));
+
+var _HorizontalSmallBeak = _interopRequireDefault(require("./HorizontalSmallBeak"));
+
+var _VerticalLargeBeak = _interopRequireDefault(require("./VerticalLargeBeak"));
+
+var _VerticalSmallBeak = _interopRequireDefault(require("./VerticalSmallBeak"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\nexport { default as HorizontalLargeBeak } from './HorizontalLargeBeak';\nexport { default as HorizontalSmallBeak } from './HorizontalSmallBeak';\nexport { default as VerticalLargeBeak } from './VerticalLargeBeak';\nexport { default as VerticalSmallBeak } from './VerticalSmallBeak';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA"}

package/build/commonjs/Tooltip/Tooltip.js

@@ -11,11 +11,9 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _styles = require("@fountain-ui/styles");
-
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
-var _styles2 = require("../styles");
+var _styles = require("../styles");
 
 var _Beaks = _interopRequireDefault(require("./Beaks"));
 
@@ -57,7 +55,7 @@ const getFlexDirection = placement => {
 };
 
 const useStyles = function () {
-  const theme = (0, _styles2.useTheme)();
+  const theme = (0, _styles.useTheme)();
   return {
     root: {
       position: 'absolute',
@@ -70,14 +68,14 @@ const useStyles = function () {
     },
     small: {
       borderRadius: theme.shape.radius.sm,
+      paddingBottom: theme.spacing(1.75),
       paddingHorizontal: theme.spacing(2),
-      paddingVertical: theme.spacing(1.5)
+      paddingTop: theme.spacing(1.5)
     },
     large: {
       borderRadius: 5,
-      paddingBottom: theme.spacing(2.5),
       paddingHorizontal: theme.spacing(4),
-      paddingTop: theme.spacing(2)
+      paddingVertical: theme.spacing(2)
     }
   };
 };
@@ -103,7 +101,7 @@ function Tooltip(props) {
     offset: beakOffset,
     placement: beakPlacement
   } = beakLayout;
-  const theme = (0, _styles2.useTheme)();
+  const theme = (0, _styles.useTheme)();
   const styles = useStyles();
   const [layout, setLayout] = (0, _react.useState)(initialLayout);
   const scale = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -130,7 +128,7 @@ function Tooltip(props) {
     }),
     [placement]: totalOffset
   };
-  const contentStyle = (0, _styles2.css)([styles.content, styles[size], isVerticalPlacement ? {
+  const contentStyle = (0, _styles.css)([styles.content, styles[size], isVerticalPlacement ? {
     width: '100%'
   } : {
     flexGrow: 1,
@@ -140,19 +138,14 @@ function Tooltip(props) {
     const nextScaleValue = visible ? 1 : 0;
     scale.value = (0, _reactNativeReanimated.withTiming)(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
-  const fontStyle = (0, _styles2.createFontStyle)(theme, {
-    selector: typo => size === 'large' ? (0, _styles.typographyOf)({
-      fontSize: 13,
-      lineHeight: 19.5,
-      fontFamily: 'Pretendard-Regular',
-      letterSpacing: 0
-    }) : typo.caption2.regular,
+  const fontStyle = (0, _styles.createFontStyle)(theme, {
+    selector: typo => size === 'large' ? typo.body3.regular : typo.caption2.regular,
     color: theme.palette.text.strongInverse
   });
-  const textStyle = (0, _styles2.css)([fontStyle, {
+  const textStyle = (0, _styles.css)([fontStyle, {
     flexShrink: 1
   }]);
-  const beakStyle = (0, _styles2.css)({
+  const beakStyle = (0, _styles.css)({
     transform: [isVerticalPlacement ? {
       translateX: beakOffset
     } : {

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

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

package/build/commonjs/Tooltip/index.js

@@ -3,6 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  tooltipBeakPlacements: true,
+  tooltipPlacements: true,
+  tooltipSizes: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -32,5 +37,19 @@ var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
 var _TooltipProps = require("./TooltipProps");
 
+var _Beaks = require("./Beaks");
+
+Object.keys(_Beaks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Beaks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Beaks[key];
+    }
+  });
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tooltip';\nexport type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';\nexport { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tooltip';\nexport type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';\nexport { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';\nexport * from './Beaks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/commonjs/Typography/Typography.js

@@ -55,6 +55,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
     color: colorProp = 'inherit',
     ellipsizeMode = 'tail',
     href,
+    lineHeight,
     numberOfLines,
     onPress,
     selectable,
@@ -66,7 +67,11 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
   } = props;
   const theme = (0, _styles.useTheme)();
   const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typography => typography[variant][weight],
+    selector: typography => {
+      var _typography$variant;
+
+      return (_typography$variant = typography[variant]) === null || _typography$variant === void 0 ? void 0 : _typography$variant[weight];
+    },
     color: selectColor(theme, colorProp)
   }); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
 
@@ -75,7 +80,9 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
   } : {};
   const textStyle = (0, _styles.css)([styles.root, {
     textAlign: align === 'inherit' ? 'auto' : align
-  }, textWrapStyle, fontStyle, style]);
+  }, textWrapStyle, fontStyle, lineHeight ? {
+    lineHeight
+  } : undefined, style]);
   const accessibility = accessibilityMap[variant];
   const variantRole = href !== undefined ? 'link' : accessibility === null || accessibility === void 0 ? void 0 : accessibility.accessibilityRole;
   const variantLevel = accessibility === null || accessibility === void 0 ? void 0 : accessibility['area-level'];

package/build/commonjs/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"names":["accessibilityMap","selectColor","theme","colorProp","Platform","OS","undefined","palette","text","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    // TODO: set accessibilityRole.\n    // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n    // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n    // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n    // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n    // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n    // body1: { accessibilityRole: 'text' },\n    // body2: { accessibilityRole: 'text' },\n    // caption1: { accessibilityRole: 'text' },\n    // caption2: { accessibilityRole: 'text' },\n    // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        default:\n            return theme.palette.text[colorProp];\n    }\n}\n\nconst styles = StyleSheet.create({\n    root: {\n        flexShrink: 1,\n        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n    },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        accessibilityRole,\n        align = 'inherit' as TypographyAlign,\n        ariaLevel,\n        disableFontScaling = false,\n        children,\n        color: colorProp = 'inherit' as TypographyColor,\n        ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1' as FontVariant,\n        weight = 'medium' as FontWeight,\n        onLayout,\n        onTextLayout,\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant][weight],\n        color: selectColor(theme, colorProp),\n    });\n\n    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n    const textStyle = css([\n        styles.root,\n        { textAlign: align === 'inherit' ? 'auto' : align },\n        textWrapStyle as TextStyle,\n        fontStyle,\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n    const variantLevel = accessibility?.['area-level'];\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole || variantRole}\n            allowFontScaling={!disableFontScaling}\n            aria-level={ariaLevel || variantLevel}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n            onLayout={onLayout}\n            onTextLayout={onTextLayout}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}
+{"version":3,"names":["accessibilityMap","selectColor","theme","colorProp","Platform","OS","undefined","palette","text","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","lineHeight","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    // TODO: set accessibilityRole.\n    // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n    // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n    // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n    // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n    // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n    // body1: { accessibilityRole: 'text' },\n    // body2: { accessibilityRole: 'text' },\n    // caption1: { accessibilityRole: 'text' },\n    // caption2: { accessibilityRole: 'text' },\n    // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        default:\n            return theme.palette.text[colorProp];\n    }\n}\n\nconst styles = StyleSheet.create({\n    root: {\n        flexShrink: 1,\n        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n    },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        accessibilityRole,\n        align = 'inherit' as TypographyAlign,\n        ariaLevel,\n        disableFontScaling = false,\n        children,\n        color: colorProp = 'inherit' as TypographyColor,\n        ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n        href,\n        lineHeight,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1' as FontVariant,\n        weight = 'medium' as FontWeight,\n        onLayout,\n        onTextLayout,\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant]?.[weight],\n        color: selectColor(theme, colorProp),\n    });\n\n    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n    const textStyle = css([\n        styles.root,\n        { textAlign: align === 'inherit' ? 'auto' : align },\n        textWrapStyle as TextStyle,\n        fontStyle,\n        lineHeight ? { lineHeight } : undefined,\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n    const variantLevel = accessibility?.['area-level'];\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole || variantRole}\n            allowFontScaling={!disableFontScaling}\n            aria-level={ariaLevel || variantLevel}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n            onLayout={onLayout}\n            onTextLayout={onTextLayout}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}

package/build/commonjs/Typography/TypographyProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["typographyColors"],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps, TextStyle } from 'react-native';\nimport type { FontVariant, FontWeight } from '@fountain-ui/styles';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | TextStyle['textAlign'];\n\nexport const typographyColors = [\n    'inherit',\n    'accent',\n    'accentAlt',\n    'strong',\n    'strongInverse',\n    'base',\n    'baseInverse',\n    'baseOpacity',\n    'baseOpacityInverse',\n    'weak',\n    'weakOpacity',\n    'weakInverse',\n    'weakOpacityInverse',\n] as const;\n\nexport type TypographyColor = typeof typographyColors[number];\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport type AccessibilityMap = Partial<Record<FontVariant, Accessibility>>;\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: FontVariant;\n\n    /**\n     * Determines the font weight.\n     * @default 'medium'\n     */\n    weight?: FontWeight;\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n    onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":";;;;;;AAOO,MAAMA,gBAAgB,GAAG,CAC5B,SAD4B,EAE5B,QAF4B,EAG5B,WAH4B,EAI5B,QAJ4B,EAK5B,eAL4B,EAM5B,MAN4B,EAO5B,aAP4B,EAQ5B,aAR4B,EAS5B,oBAT4B,EAU5B,MAV4B,EAW5B,aAX4B,EAY5B,aAZ4B,EAa5B,oBAb4B,CAAzB"}
+{"version":3,"names":["typographyColors"],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps, TextStyle } from 'react-native';\nimport type { FontVariant, FontWeight } from '@fountain-ui/styles';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | TextStyle['textAlign'];\n\nexport const typographyColors = [\n    'inherit',\n    'accent',\n    'accentAlt',\n    'strong',\n    'strongInverse',\n    'base',\n    'baseInverse',\n    'baseOpacity',\n    'baseOpacityInverse',\n    'weak',\n    'weakOpacity',\n    'weakInverse',\n    'weakOpacityInverse',\n] as const;\n\nexport type TypographyColor = typeof typographyColors[number];\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport type AccessibilityMap = Partial<Record<FontVariant, Accessibility>>;\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Defines the vertical spacing between lines of text.\n     */\n    lineHeight?: TextStyle['lineHeight'];\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: FontVariant;\n\n    /**\n     * Determines the font weight.\n     * @default 'medium'\n     */\n    weight?: FontWeight;\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n    onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":";;;;;;AAOO,MAAMA,gBAAgB,GAAG,CAC5B,SAD4B,EAE5B,QAF4B,EAG5B,WAH4B,EAI5B,QAJ4B,EAK5B,eAL4B,EAM5B,MAN4B,EAO5B,aAP4B,EAQ5B,aAR4B,EAS5B,oBAT4B,EAU5B,MAV4B,EAW5B,aAX4B,EAY5B,aAZ4B,EAa5B,oBAb4B,CAAzB"}

package/build/commonjs/hooks/useBreakpointUp.js

@@ -15,9 +15,12 @@ function useBreakpointUp(target, yes, no) {
 
   const isUp = (0, _react.useMemo)(() => {
     switch (target) {
-      case 'xs':
+      case 'xxs':
         return true;
 
+      case 'xs':
+        return current === 'xs' || current === 'sm' || current === 'md' || current === 'lg';
+
       case 'sm':
         return current === 'sm' || current === 'md' || current === 'lg';
 

package/build/commonjs/hooks/useBreakpointUp.js.map

@@ -1 +1 @@
-{"version":3,"names":["useBreakpointUp","target","yes","no","theme","useTheme","current","breakpoints","isUp","useMemo"],"sources":["useBreakpointUp.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Theme } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport default function useBreakpointUp<R>(target: Breakpoint, yes: R, no: R): R {\n    const theme = useTheme();\n\n    const current = theme.breakpoints.current;\n\n    // TODO: Needs to refactor\n    const isUp = useMemo<boolean>(() => {\n        switch (target) {\n            case 'xs':\n                return true;\n            case 'sm':\n                return current === 'sm' || current === 'md' || current === 'lg';\n            case 'md':\n                return current === 'md' || current === 'lg';\n            case 'lg':\n                return current === 'lg';\n        }\n    }, [target, current]);\n\n    return isUp ? yes : no;\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAIe,SAASA,eAAT,CAA4BC,MAA5B,EAAgDC,GAAhD,EAAwDC,EAAxD,EAAkE;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,OAAO,GAAGF,KAAK,CAACG,WAAN,CAAkBD,OAAlC,CAH6E,CAK7E;;EACA,MAAME,IAAI,GAAG,IAAAC,cAAA,EAAiB,MAAM;IAChC,QAAQR,MAAR;MACI,KAAK,IAAL;QACI,OAAO,IAAP;;MACJ,KAAK,IAAL;QACI,OAAOK,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAA3D;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAvC;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAnB;IARR;EAUH,CAXY,EAWV,CAACL,MAAD,EAASK,OAAT,CAXU,CAAb;EAaA,OAAOE,IAAI,GAAGN,GAAH,GAASC,EAApB;AACH;;AAAA"}
+{"version":3,"names":["useBreakpointUp","target","yes","no","theme","useTheme","current","breakpoints","isUp","useMemo"],"sources":["useBreakpointUp.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Theme } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport default function useBreakpointUp<R>(target: Breakpoint, yes: R, no: R): R {\n    const theme = useTheme();\n\n    const current = theme.breakpoints.current;\n\n    // TODO: Needs to refactor\n    const isUp = useMemo<boolean>(() => {\n        switch (target) {\n            case 'xxs':\n                return true;\n            case 'xs':\n                return current === 'xs' || current === 'sm' || current === 'md' || current === 'lg';\n            case 'sm':\n                return current === 'sm' || current === 'md' || current === 'lg';\n            case 'md':\n                return current === 'md' || current === 'lg';\n            case 'lg':\n                return current === 'lg';\n        }\n    }, [target, current]);\n\n    return isUp ? yes : no;\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAIe,SAASA,eAAT,CAA4BC,MAA5B,EAAgDC,GAAhD,EAAwDC,EAAxD,EAAkE;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,OAAO,GAAGF,KAAK,CAACG,WAAN,CAAkBD,OAAlC,CAH6E,CAK7E;;EACA,MAAME,IAAI,GAAG,IAAAC,cAAA,EAAiB,MAAM;IAChC,QAAQR,MAAR;MACI,KAAK,KAAL;QACI,OAAO,IAAP;;MACJ,KAAK,IAAL;QACI,OAAOK,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAApD,IAA4DA,OAAO,KAAK,IAA/E;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAA3D;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAvC;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAnB;IAVR;EAYH,CAbY,EAaV,CAACL,MAAD,EAASK,OAAT,CAbU,CAAb;EAeA,OAAOE,IAAI,GAAGN,GAAH,GAASC,EAApB;AACH;;AAAA"}

package/build/commonjs/hooks/useCollapsibleAppBar.js

@@ -141,7 +141,7 @@ function useCollapsibleAppBar() {
       overlapped.value = offsetY + nextTranslateY > 0;
       translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, ANIMATION_CONFIG);
     }
-  }, [keyboardDismissMode, appBarHeight, isScrolled]);
+  });
   const hasCollapsible = collapsibleToolbarHeight > 0;
   const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top

package/build/commonjs/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","keyboardDismissMode","dividerExposureMode","supportsReverseScroll","ANIMATION_CONFIG","duration","TRANSPARENT","SUPPORTS_DRAG_DETECTION","Platform","OS","dismissKeyboard","Keyboard","dismiss","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","isScrolled","setIsScrolled","useState","theme","useTheme","animatedStyle","useAnimatedStyle","transform","value","borderColor","palette","divider","borderBottomWidth","StyleSheet","hairlineWidth","indexRef","useRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","maxTy","dy","Math","min","max","minOffsetY","maxOffsetY","contentSize","height","layoutMeasurement","safeOffsetY","safeLastOffsetY","newTranslateY","onEndDrag","onMomentumEnd","ty","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport {\n    Falsy,\n    Keyboard,\n    Platform,\n    RegisteredStyle,\n    ScrollViewProps,\n    StyleSheet,\n    ViewProps,\n    ViewStyle,\n} from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/styles';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n    dividerExposureMode?: 'always' | 'overlapped';\n    supportsReverseScroll?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n    isScrolled: boolean;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    dividerExposureMode: 'overlapped',\n    supportsReverseScroll: true,\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\nconst TRANSPARENT = '#FFFFFF00';\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const [isScrolled, setIsScrolled] = useState<boolean>(false);\n\n    const theme = useTheme();\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        return {\n            transform,\n            borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,\n            borderBottomWidth: StyleSheet.hairlineWidth,\n        };\n    }, [\n        theme,\n        dividerExposureMode,\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, ANIMATION_CONFIG);\n        }\n    }, [appBarHeight]);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(dismissKeyboard)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            if (!isScrolled && offsetY > 0) {\n                runOnJS(setIsScrolled)(true);\n            } else if (isScrolled && offsetY <= 0) {\n                runOnJS(setIsScrolled)(false);\n            }\n\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                const minOffsetY = -maxTy;\n                const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;\n\n                const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);\n                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);\n                const dy = safeOffsetY - safeLastOffsetY;\n\n                const newTranslateY = safeOffsetY <= minOffsetY\n                    ? 0\n                    : supportsReverseScroll\n                        ? dy === 0\n                            ? lastTranslateY.value\n                            : dy > 0\n                                ? maxTy\n                                : 0\n                        : maxTy;\n\n                translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);\n                lastTranslateY.value = newTranslateY;\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n        },\n    }, [keyboardDismissMode, appBarHeight, isScrolled]);\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n        isScrolled,\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["defaultOptions","keyboardDismissMode","dividerExposureMode","supportsReverseScroll","ANIMATION_CONFIG","duration","TRANSPARENT","SUPPORTS_DRAG_DETECTION","Platform","OS","dismissKeyboard","Keyboard","dismiss","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","isScrolled","setIsScrolled","useState","theme","useTheme","animatedStyle","useAnimatedStyle","transform","value","borderColor","palette","divider","borderBottomWidth","StyleSheet","hairlineWidth","indexRef","useRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","maxTy","dy","Math","min","max","minOffsetY","maxOffsetY","contentSize","height","layoutMeasurement","safeOffsetY","safeLastOffsetY","newTranslateY","onEndDrag","onMomentumEnd","ty","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport {\n    Falsy,\n    Keyboard,\n    Platform,\n    RegisteredStyle,\n    ScrollViewProps,\n    StyleSheet,\n    ViewProps,\n    ViewStyle,\n} from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/styles';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n    dividerExposureMode?: 'always' | 'overlapped';\n    supportsReverseScroll?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n    isScrolled: boolean;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    dividerExposureMode: 'overlapped',\n    supportsReverseScroll: true,\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\nconst TRANSPARENT = '#FFFFFF00';\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const [isScrolled, setIsScrolled] = useState<boolean>(false);\n\n    const theme = useTheme();\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        return {\n            transform,\n            borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,\n            borderBottomWidth: StyleSheet.hairlineWidth,\n        };\n    }, [\n        theme,\n        dividerExposureMode,\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, ANIMATION_CONFIG);\n        }\n    }, [appBarHeight]);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(dismissKeyboard)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            if (!isScrolled && offsetY > 0) {\n                runOnJS(setIsScrolled)(true);\n            } else if (isScrolled && offsetY <= 0) {\n                runOnJS(setIsScrolled)(false);\n            }\n\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                const minOffsetY = -maxTy;\n                const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;\n\n                const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);\n                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);\n                const dy = safeOffsetY - safeLastOffsetY;\n\n                const newTranslateY = safeOffsetY <= minOffsetY\n                    ? 0\n                    : supportsReverseScroll\n                        ? dy === 0\n                            ? lastTranslateY.value\n                            : dy > 0\n                                ? maxTy\n                                : 0\n                        : maxTy;\n\n                translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);\n                lastTranslateY.value = newTranslateY;\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n        isScrolled,\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useContentContainerStyle.js

@@ -7,49 +7,42 @@ exports.default = useContentContainerStyle;
 
 var _styles = require("../styles");
 
-var _useBreakpointUp = _interopRequireDefault(require("./useBreakpointUp"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getMaxWidth(theme, breakpoint, customMaxWidth) {
+  switch (breakpoint) {
+    case 'lg':
+    case 'md':
+      return customMaxWidth ?? theme.breakpoints.values[breakpoint];
 
-const defaultConfig = {
-  breakpoint: 'lg',
-  maxWidth: 'md',
-  styleProvider: () => undefined
-}; // TODO: Needs to refactor
+    default:
+      return undefined;
+  }
+}
 
-function getMaxWidth(theme, breakpoint) {
+function getPaddingHorizontal(theme, breakpoint) {
   switch (breakpoint) {
-    case 'xs':
-      return theme.breakpoints.values['sm'];
-
     case 'sm':
-      return theme.breakpoints.values['md'];
+      return theme.spacing(6);
 
-    case 'md':
-      return theme.breakpoints.values['lg'];
-
-    case 'lg':
-      return 'none';
+    default:
+      return theme.spacing(4);
   }
 }
 
 function useContentContainerStyle() {
-  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig;
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
-    breakpoint,
-    maxWidth,
+    maxWidth: customMaxWidth,
     styleProvider
-  } = { ...defaultConfig,
-    ...config
-  };
+  } = config;
   const theme = (0, _styles.useTheme)();
+  const currentBreakpoint = theme.breakpoints.current;
   const additionalStyle = styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider(theme);
-  const yesStyle = [{
+  return (0, _styles.css)([{
     alignSelf: 'center',
-    maxWidth: getMaxWidth(theme, maxWidth),
+    maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
+    paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
     width: '100%'
-  }, additionalStyle];
-  return (0, _useBreakpointUp.default)(breakpoint, yesStyle, additionalStyle);
+  }, additionalStyle]);
 }
 
 ;