@fountain-ui/core 2.0.0-beta.5 → 2.0.0-beta.50

package/build/module/Typography/Typography.js

@@ -74,7 +74,10 @@ const styles = StyleSheet.create({
 });
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref) {
   const {
+    accessibilityRole,
     align = 'inherit',
+    ariaLevel,
+    disableFontScaling = false,
     children,
     color: colorProp = 'inherit',
     ellipsizeMode = 'tail',
@@ -98,11 +101,13 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref)
     textAlign: align === 'inherit' ? 'auto' : align
   }, textWrapStyle, fontStyle, style]);
   const accessibility = accessibilityMap[variant];
-  const accessibilityRole = href !== undefined ? 'link' : accessibility === null || accessibility === void 0 ? void 0 : accessibility.accessibilityRole;
+  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'];
   return /*#__PURE__*/React.createElement(Text, {
     ref: ref,
-    accessibilityRole: accessibilityRole,
-    "aria-level": accessibility === null || accessibility === void 0 ? void 0 : accessibility['area-level'],
+    accessibilityRole: accessibilityRole || variantRole,
+    allowFontScaling: !disableFontScaling,
+    "aria-level": ariaLevel || variantLevel,
     children: children,
     ellipsizeMode: ellipsizeMode // @ts-ignore
     ,

package/build/module/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Typography.tsx"],"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","OS","undefined","primary","secondary","accent","hint","main","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","align","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Platform, Text, TextStyle } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    h1: { accessibilityRole: 'header', 'area-level': 1 },\n    h2: { accessibilityRole: 'header', 'area-level': 2 },\n    h3: { accessibilityRole: 'header', 'area-level': 3 },\n    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n    subtitle2: { accessibilityRole: 'header', 'area-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    const palette = theme.palette.text;\n\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        case 'textPrimary':\n            return palette.primary;\n        case 'textSecondary':\n            return palette.secondary;\n        case 'textAccent':\n            return palette.accent;\n        case 'textHint':\n            return palette.hint;\n    }\n\n    return theme.palette[colorProp]?.main;\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        align = 'inherit',\n        children,\n        color: colorProp = 'inherit',\n        ellipsizeMode = 'tail',\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1',\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant],\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 accessibilityRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole}\n            aria-level={accessibility?.['area-level']}\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        />\n    );\n});\n\nexport default React.memo(Typography);\n"]}
+{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","OS","undefined","primary","secondary","accent","hint","main","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, TextStyle } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    h1: { accessibilityRole: 'header', 'area-level': 1 },\n    h2: { accessibilityRole: 'header', 'area-level': 2 },\n    h3: { accessibilityRole: 'header', 'area-level': 3 },\n    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n    subtitle2: { accessibilityRole: 'header', 'area-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    const palette = theme.palette.text;\n\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        case 'textPrimary':\n            return palette.primary;\n        case 'textSecondary':\n            return palette.secondary;\n        case 'textAccent':\n            return palette.accent;\n        case 'textHint':\n            return palette.hint;\n    }\n\n    return theme.palette[colorProp]?.main;\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',\n        ariaLevel,\n        disableFontScaling = false,\n        children,\n        color: colorProp = 'inherit',\n        ellipsizeMode = 'tail',\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1',\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant],\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        />\n    );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'warning'\n    | 'error'\n    | 'accent'\n    | 'textPrimary'\n    | 'textSecondary'\n    | 'textAccent'\n    | 'textHint';\n\nexport type TypographyVariant =\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption1'\n    | 'caption2'\n    | 'flag';\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n    [key: string]: Accessibility;\n}> {}\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?: TypographyVariant;\n}> {}\n"],"mappings":""}

package/build/module/Typography/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB","sourcesContent":["export { default } from './Typography';\nexport type { default as TypographyProps } from './TypographyProps';"]}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Typography';\nexport type { default as TypographyProps } from './TypographyProps';"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB"}

package/build/module/animated/AnimatedAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedAppBar.tsx"],"names":["Animated","AppBar","createAnimatedComponent"],"mappings":"AACA,OAAOA,QAAP,MAAqB,yBAArB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAEA,eAAeD,QAAQ,CAACE,uBAAT,CAAiCD,MAAjC,CAAf","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport AppBar from '../AppBar';\n\nexport default Animated.createAnimatedComponent(AppBar);\n"]}
+{"version":3,"names":["Animated","AppBar","createAnimatedComponent"],"sources":["AnimatedAppBar.tsx"],"sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport AppBar from '../AppBar';\n\nexport default Animated.createAnimatedComponent(AppBar);\n"],"mappings":"AACA,OAAOA,QAAP,MAAqB,yBAArB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAEA,eAAeD,QAAQ,CAACE,uBAAT,CAAiCD,MAAjC,CAAf"}

package/build/module/animated/AnimatedFlatList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedFlatList.tsx"],"names":["FlatList","Animated","createAnimatedComponent"],"mappings":"AACA,SAASA,QAAT,QAAyB,cAAzB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AAEA,eAAeA,QAAQ,CAACC,uBAAT,CAAiCF,QAAjC,CAAf","sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\nexport default Animated.createAnimatedComponent(FlatList);"]}
+{"version":3,"names":["FlatList","Animated","createAnimatedComponent"],"sources":["AnimatedFlatList.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\nexport default Animated.createAnimatedComponent(FlatList);"],"mappings":"AACA,SAASA,QAAT,QAAyB,cAAzB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AAEA,eAAeA,QAAQ,CAACC,uBAAT,CAAiCF,QAAjC,CAAf"}

package/build/module/animated/AnimatedPressable.js

@@ -1,5 +1,4 @@
-import Animated from 'react-native-reanimated';
-import Pressable from '../Pressable'; // @ts-ignore
-
+import { Animated } from 'react-native';
+import Pressable from '../Pressable';
 export default Animated.createAnimatedComponent(Pressable);
 //# sourceMappingURL=AnimatedPressable.js.map

package/build/module/animated/AnimatedPressable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedPressable.tsx"],"names":["Animated","Pressable","createAnimatedComponent"],"mappings":"AACA,OAAOA,QAAP,MAAqB,yBAArB;AACA,OAAOC,SAAP,MAAsB,cAAtB,C,CAEA;;AACA,eAAeD,QAAQ,CAACE,uBAAT,CAAiCD,SAAjC,CAAf","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport Pressable from '../Pressable';\n\n// @ts-ignore\nexport default Animated.createAnimatedComponent(Pressable);\n"]}
+{"version":3,"names":["Animated","Pressable","createAnimatedComponent"],"sources":["AnimatedPressable.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated } from 'react-native';\nimport Pressable from '../Pressable';\n\nexport default Animated.createAnimatedComponent(Pressable);\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,cAAzB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AAEA,eAAeD,QAAQ,CAACE,uBAAT,CAAiCD,SAAjC,CAAf"}

package/build/module/animated/AnimatedTypography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedTypography.tsx"],"names":["Animated","Typography","createAnimatedComponent"],"mappings":"AACA,OAAOA,QAAP,MAAqB,yBAArB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AAEA,eAAeD,QAAQ,CAACE,uBAAT,CAAiCD,UAAjC,CAAf","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport Typography from '../Typography';\n\nexport default Animated.createAnimatedComponent(Typography);\n"]}
+{"version":3,"names":["Animated","Typography","createAnimatedComponent"],"sources":["AnimatedTypography.tsx"],"sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport Typography from '../Typography';\n\nexport default Animated.createAnimatedComponent(Typography);\n"],"mappings":"AACA,OAAOA,QAAP,MAAqB,yBAArB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AAEA,eAAeD,QAAQ,CAACE,uBAAT,CAAiCD,UAAjC,CAAf"}

package/build/module/animated/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","AnimatedAppBar","AnimatedFlatList","AnimatedPressable","AnimatedTypography"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAApB,QAA0C,kBAA1C;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,oBAA5C;AACA,SAASF,OAAO,IAAIG,iBAApB,QAA6C,qBAA7C;AACA,SAASH,OAAO,IAAII,kBAApB,QAA8C,sBAA9C","sourcesContent":["export { default as AnimatedAppBar } from './AnimatedAppBar';\nexport { default as AnimatedFlatList } from './AnimatedFlatList';\nexport { default as AnimatedPressable } from './AnimatedPressable';\nexport { default as AnimatedTypography } from './AnimatedTypography';\n"]}
+{"version":3,"names":["default","AnimatedAppBar","AnimatedFlatList","AnimatedPressable","AnimatedTypography"],"sources":["index.ts"],"sourcesContent":["export { default as AnimatedAppBar } from './AnimatedAppBar';\nexport { default as AnimatedFlatList } from './AnimatedFlatList';\nexport { default as AnimatedPressable } from './AnimatedPressable';\nexport { default as AnimatedTypography } from './AnimatedTypography';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAApB,QAA0C,kBAA1C;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,oBAA5C;AACA,SAASF,OAAO,IAAIG,iBAApB,QAA6C,qBAA7C;AACA,SAASH,OAAO,IAAII,kBAApB,QAA8C,sBAA9C"}

package/build/module/hooks/index.js

@@ -1,8 +1,12 @@
+export { default as useAnimatedValue } from './useAnimatedValue';
 export { default as useBreakpointUp } from './useBreakpointUp';
 export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';
 export { default as useContentContainerStyle } from './useContentContainerStyle';
 export { default as useElevationStyle } from './useElevationStyle';
 export { default as useFadeInAppBar } from './useFadeInAppBar';
+export { default as useImperativeState } from './useImperativeState';
+export { default as useSyncAnimatedValue } from './useSyncAnimatedValue';
 export { default as useThrottle } from './useThrottle';
+export { default as useDebounce } from './useDebounce';
 export { default as useValidWindowDimensions } from './useValidWindowDimensions';
 //# sourceMappingURL=index.js.map

package/build/module/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","useBreakpointUp","useCollapsibleAppBar","useContentContainerStyle","useElevationStyle","useFadeInAppBar","useThrottle","useValidWindowDimensions"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C;AACA,SAASD,OAAO,IAAIE,oBAApB,QAAgD,wBAAhD;AACA,SAASF,OAAO,IAAIG,wBAApB,QAAoD,4BAApD;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,qBAA7C;AACA,SAASJ,OAAO,IAAIK,eAApB,QAA2C,mBAA3C;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,SAASN,OAAO,IAAIO,wBAApB,QAAoD,4BAApD","sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';\nexport { default as useValidWindowDimensions } from './useValidWindowDimensions';\n"]}
+{"version":3,"names":["default","useAnimatedValue","useBreakpointUp","useCollapsibleAppBar","useContentContainerStyle","useElevationStyle","useFadeInAppBar","useImperativeState","useSyncAnimatedValue","useThrottle","useDebounce","useValidWindowDimensions"],"sources":["index.ts"],"sourcesContent":["export { default as useAnimatedValue } from './useAnimatedValue';\nexport { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useImperativeState } from './useImperativeState';\nexport { default as useSyncAnimatedValue } from './useSyncAnimatedValue';\nexport { default as useThrottle } from './useThrottle';\nexport { default as useDebounce } from './useDebounce';\nexport { default as useValidWindowDimensions } from './useValidWindowDimensions';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAApB,QAA4C,oBAA5C;AACA,SAASD,OAAO,IAAIE,eAApB,QAA2C,mBAA3C;AACA,SAASF,OAAO,IAAIG,oBAApB,QAAgD,wBAAhD;AACA,SAASH,OAAO,IAAII,wBAApB,QAAoD,4BAApD;AACA,SAASJ,OAAO,IAAIK,iBAApB,QAA6C,qBAA7C;AACA,SAASL,OAAO,IAAIM,eAApB,QAA2C,mBAA3C;AACA,SAASN,OAAO,IAAIO,kBAApB,QAA8C,sBAA9C;AACA,SAASP,OAAO,IAAIQ,oBAApB,QAAgD,wBAAhD;AACA,SAASR,OAAO,IAAIS,WAApB,QAAuC,eAAvC;AACA,SAAST,OAAO,IAAIU,WAApB,QAAuC,eAAvC;AACA,SAASV,OAAO,IAAIW,wBAApB,QAAoD,4BAApD"}

package/build/module/hooks/useAnimatedValue.js

@@ -0,0 +1,22 @@
+import { useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+
+function ensureFiniteNumber(value) {
+  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return Number.isFinite(value) ? value : fallback;
+}
+
+export default function useAnimatedValue() {
+  let initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+  if (__DEV__) {
+    if (!Number.isFinite(initialValue)) {
+      console.warn(`Initial value: ${initialValue} must be numeric.`);
+    }
+  }
+
+  const initialAnimatedValue = useMemo(() => new Animated.Value(ensureFiniteNumber(initialValue)), []);
+  return useRef(initialAnimatedValue).current;
+}
+;
+//# sourceMappingURL=useAnimatedValue.js.map

package/build/module/hooks/useAnimatedValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useRef","Animated","ensureFiniteNumber","value","fallback","Number","isFinite","useAnimatedValue","initialValue","__DEV__","console","warn","initialAnimatedValue","Value","current"],"sources":["useAnimatedValue.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\n\nfunction ensureFiniteNumber(value: any, fallback: number = 0): number {\n    return Number.isFinite(value) ? value : fallback;\n}\n\nexport default function useAnimatedValue(initialValue: number = 0): Animated.Value {\n    if (__DEV__) {\n        if (!Number.isFinite(initialValue)) {\n            console.warn(`Initial value: ${initialValue} must be numeric.`);\n        }\n    }\n\n    const initialAnimatedValue = useMemo<Animated.Value>(\n        () => new Animated.Value(ensureFiniteNumber(initialValue)),\n        [],\n    );\n\n    return useRef<Animated.Value>(initialAnimatedValue).current;\n};\n"],"mappings":"AAAA,SAASA,OAAT,EAAkBC,MAAlB,QAAgC,OAAhC;AACA,SAASC,QAAT,QAAyB,cAAzB;;AAEA,SAASC,kBAAT,CAA4BC,KAA5B,EAAsE;EAAA,IAA9BC,QAA8B,uEAAX,CAAW;EAClE,OAAOC,MAAM,CAACC,QAAP,CAAgBH,KAAhB,IAAyBA,KAAzB,GAAiCC,QAAxC;AACH;;AAED,eAAe,SAASG,gBAAT,GAAoE;EAAA,IAA1CC,YAA0C,uEAAnB,CAAmB;;EAC/E,IAAIC,OAAJ,EAAa;IACT,IAAI,CAACJ,MAAM,CAACC,QAAP,CAAgBE,YAAhB,CAAL,EAAoC;MAChCE,OAAO,CAACC,IAAR,CAAc,kBAAiBH,YAAa,mBAA5C;IACH;EACJ;;EAED,MAAMI,oBAAoB,GAAGb,OAAO,CAChC,MAAM,IAAIE,QAAQ,CAACY,KAAb,CAAmBX,kBAAkB,CAACM,YAAD,CAArC,CAD0B,EAEhC,EAFgC,CAApC;EAKA,OAAOR,MAAM,CAAiBY,oBAAjB,CAAN,CAA6CE,OAApD;AACH;AAAA"}

package/build/module/hooks/useAppbarStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAppbarStyles.ts"],"names":["useAppBarStyles","floating","position","top","left","right"],"mappings":"AAIA,MAAMA,eAAwC,GAAG,YAA0B;AACvE,SAAO;AACHC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,QAAQ,EAAE,UADJ;AAENC,MAAAA,GAAG,EAAE,CAFC;AAGNC,MAAAA,IAAI,EAAE,CAHA;AAINC,MAAAA,KAAK,EAAE;AAJD;AADP,GAAP;AAQH,CATD;;AAWA,eAAeL,eAAf","sourcesContent":["import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\n\ntype AppBarStyles = NamedStylesStringUnion<'floating'>;\n\nconst useAppBarStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n    return {\n        floating: {\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n        },\n    };\n};\n\nexport default useAppBarStyles;"]}
+{"version":3,"names":["useAppBarStyles","floating","position","top","left","right"],"sources":["useAppbarStyles.ts"],"sourcesContent":["import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\n\ntype AppBarStyles = NamedStylesStringUnion<'floating'>;\n\nconst useAppBarStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n    return {\n        floating: {\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n        },\n    };\n};\n\nexport default useAppBarStyles;"],"mappings":"AAIA,MAAMA,eAAwC,GAAG,YAA0B;EACvE,OAAO;IACHC,QAAQ,EAAE;MACNC,QAAQ,EAAE,UADJ;MAENC,GAAG,EAAE,CAFC;MAGNC,IAAI,EAAE,CAHA;MAINC,KAAK,EAAE;IAJD;EADP,CAAP;AAQH,CATD;;AAWA,eAAeL,eAAf"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useBreakpointUp.ts"],"names":["useMemo","useTheme","useBreakpointUp","target","yes","no","theme","current","breakpoints","isUp"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAIA,eAAe,SAASC,eAAT,CAA4BC,MAA5B,EAAgDC,GAAhD,EAAwDC,EAAxD,EAAkE;AAC7E,QAAMC,KAAK,GAAGL,QAAQ,EAAtB;AAEA,QAAMM,OAAO,GAAGD,KAAK,CAACE,WAAN,CAAkBD,OAAlC,CAH6E,CAK7E;;AACA,QAAME,IAAI,GAAGT,OAAO,CAAU,MAAM;AAChC,YAAQG,MAAR;AACI,WAAK,IAAL;AACI,eAAO,IAAP;;AACJ,WAAK,IAAL;AACI,eAAOI,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAA3D;;AACJ,WAAK,IAAL;AACI,eAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAvC;;AACJ,WAAK,IAAL;AACI,eAAOA,OAAO,KAAK,IAAnB;AARR;AAUH,GAXmB,EAWjB,CAACJ,MAAD,EAASI,OAAT,CAXiB,CAApB;AAaA,SAAOE,IAAI,GAAGL,GAAH,GAASC,EAApB;AACH;AAAA","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"]}
+{"version":3,"names":["useMemo","useTheme","useBreakpointUp","target","yes","no","theme","current","breakpoints","isUp"],"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,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAIA,eAAe,SAASC,eAAT,CAA4BC,MAA5B,EAAgDC,GAAhD,EAAwDC,EAAxD,EAAkE;EAC7E,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMM,OAAO,GAAGD,KAAK,CAACE,WAAN,CAAkBD,OAAlC,CAH6E,CAK7E;;EACA,MAAME,IAAI,GAAGT,OAAO,CAAU,MAAM;IAChC,QAAQG,MAAR;MACI,KAAK,IAAL;QACI,OAAO,IAAP;;MACJ,KAAK,IAAL;QACI,OAAOI,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,CAXmB,EAWjB,CAACJ,MAAD,EAASI,OAAT,CAXiB,CAApB;EAaA,OAAOE,IAAI,GAAGL,GAAH,GAASC,EAApB;AACH;AAAA"}

package/build/module/hooks/useCollapsibleAppBar.js

@@ -1,20 +1,25 @@
-import React from 'react';
-import { Keyboard, Platform } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useCallback, useRef } from 'react';
+import { Keyboard, Platform, StyleSheet } from 'react-native';
+import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@fountain-ui/styles';
 import { useHeight } from '../internal/hooks';
-import useElevationStyle from './useElevationStyle';
 import useAppbarStyles from './useAppbarStyles';
 const defaultOptions = {
   keyboardDismissMode: 'none',
-  translucent: false
+  dividerExposureMode: 'overlapped',
+  supportsReverseScroll: true
+};
+const ANIMATION_CONFIG = {
+  duration: 100
 };
-const ANIMATION_DURATION_MILLIS = 100;
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
-export default function useCollapsibleAppBar(userOptions = defaultOptions) {
+export default function useCollapsibleAppBar() {
+  let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
   const {
-    translucent,
-    keyboardDismissMode
+    keyboardDismissMode,
+    dividerExposureMode,
+    supportsReverseScroll
   } = { ...defaultOptions,
     ...userOptions
   };
@@ -22,35 +27,25 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
   const safeAreaInsets = useSafeAreaInsets();
   const [appBarHeight, onAppBarLayout] = useHeight();
   const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
-  const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
-  const translateY = Animated.useSharedValue(0);
-  const lastTranslateY = Animated.useSharedValue(0);
-  const lastOffsetY = Animated.useSharedValue(0);
-  const overlapped = Animated.useSharedValue(false);
-  const elevationStyle = useElevationStyle(4);
-  const animatedStyle = Animated.useAnimatedStyle(() => {
-    return Platform.OS === 'web' ? {
-      transform: [{
-        translateY: translateY.value
-      }],
-      boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
-    } : {
-      transform: [{
-        translateY: translateY.value
-      }],
-      elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
-      shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
-      shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
-      shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
-      shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
+  const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
+  const translateY = useSharedValue(0);
+  const lastTranslateY = useSharedValue(0);
+  const lastOffsetY = useSharedValue(0);
+  const overlapped = useSharedValue(false);
+  const theme = useTheme();
+  const animatedStyle = useAnimatedStyle(() => {
+    const transform = [{
+      translateY: translateY.value
+    }];
+    return {
+      transform,
+      borderColor: theme.palette.divider,
+      borderBottomWidth: dividerExposureMode === 'always' || overlapped.value ? StyleSheet.hairlineWidth : 0
     };
-  });
-  const indexRef = React.useRef(0);
-  const offsetsRef = React.useRef([]);
-
-  const onScrollViewChanged = nextIndex => {
-    var _offsetsRef$current$n;
-
+  }, [theme, dividerExposureMode]);
+  const indexRef = useRef(0);
+  const offsetsRef = useRef([]);
+  const onScrollViewChanged = useCallback(nextIndex => {
     const prevIndex = indexRef.current;
 
     if (prevIndex === nextIndex) {
@@ -58,23 +53,20 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
     }
 
     offsetsRef.current[prevIndex] = lastOffsetY.value;
-    const savedOffsetY = (_offsetsRef$current$n = offsetsRef.current[nextIndex]) !== null && _offsetsRef$current$n !== void 0 ? _offsetsRef$current$n : 0;
+    const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;
     lastOffsetY.value = savedOffsetY;
     indexRef.current = nextIndex; // Determine whether to overlap every time index is changed.
 
     overlapped.value = savedOffsetY > 0; // If next ScrollView's offset is too short, expand app bar.
 
     if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-      translateY.value = Animated.withTiming(0, {
-        duration: ANIMATION_DURATION_MILLIS
-      });
+      translateY.value = withTiming(0, ANIMATION_CONFIG);
     }
-  };
-
-  const scrollHandler = Animated.useAnimatedScrollHandler({
+  }, [appBarHeight]);
+  const scrollHandler = useAnimatedScrollHandler({
     onBeginDrag: () => {
       if (keyboardDismissMode === 'on-drag') {
-        Animated.runOnJS(Keyboard.dismiss)();
+        runOnJS(Keyboard.dismiss)();
       }
 
       lastTranslateY.value = translateY.value;
@@ -84,7 +76,6 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
     },
     onScroll: event => {
       const offsetY = event.contentOffset.y;
-      const ty = translateY.value;
       const maxTy = maxTranslateY.value;
 
       if (SUPPORTS_DRAG_DETECTION) {
@@ -92,20 +83,14 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
         translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);
         overlapped.value = offsetY + translateY.value > 0;
       } else {
-        if (offsetY > -maxTy) {
-          if (ty === 0) {
-            translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-              duration: ANIMATION_DURATION_MILLIS
-            });
-          }
-        } else {
-          if (ty === maxTy) {
-            translateY.value = Animated.withTiming(0, {
-              duration: ANIMATION_DURATION_MILLIS
-            });
-          }
-        }
-
+        const minOffsetY = -maxTy;
+        const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
+        const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
+        const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
+        const dy = safeOffsetY - safeLastOffsetY;
+        const newTranslateY = supportsReverseScroll ? dy === 0 ? lastTranslateY.value : dy > 0 ? maxTy : 0 : safeLastOffsetY === minOffsetY ? 0 : maxTy;
+        translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);
+        lastTranslateY.value = newTranslateY;
         overlapped.value = offsetY > 0;
         lastOffsetY.value = offsetY;
       }
@@ -126,15 +111,13 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
       const threshold = maxTy * 0.5;
       const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
       overlapped.value = offsetY + nextTranslateY > 0;
-      translateY.value = Animated.withTiming(nextTranslateY, {
-        duration: ANIMATION_DURATION_MILLIS
-      });
+      translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
     }
-  });
+  }, [keyboardDismissMode, appBarHeight]);
   const hasCollapsible = collapsibleToolbarHeight > 0;
-  const appBarStyle = [animatedStyle, translucent ? {
+  const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top
-  } : undefined, hasCollapsible ? styles.floating : undefined];
+  }, hasCollapsible ? styles.floating : undefined];
   return {
     appBarStyle,
     onAppBarLayout,

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

@@ -1 +1 @@
-{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["React","Keyboard","Platform","Animated","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","keyboardDismissMode","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\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    translucent?: 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}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent, keyboardDismissMode }: 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 = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (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 = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\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            const ty = translateY.value;\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                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\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 = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\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    };\n};\n"]}
+{"version":3,"names":["useCallback","useRef","Keyboard","Platform","StyleSheet","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useTheme","useHeight","useAppbarStyles","defaultOptions","keyboardDismissMode","dividerExposureMode","supportsReverseScroll","ANIMATION_CONFIG","duration","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","overlapped","theme","animatedStyle","transform","value","borderColor","palette","divider","borderBottomWidth","hairlineWidth","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","scrollHandler","onBeginDrag","dismiss","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 } 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}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    dividerExposureMode: 'overlapped',\n    supportsReverseScroll: true,\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\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 theme = useTheme();\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        return {\n            transform,\n            borderColor: theme.palette.divider,\n            borderBottomWidth: dividerExposureMode === 'always' || overlapped.value ? StyleSheet.hairlineWidth : 0,\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(Keyboard.dismiss)();\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            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 = supportsReverseScroll\n                    ? dy === 0\n                        ? lastTranslateY.value\n                        : dy > 0\n                            ? maxTy\n                            : 0\n                    : safeLastOffsetY === minOffsetY\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]);\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    };\n};\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AACA,SAEIC,QAFJ,EAGIC,QAHJ,EAMIC,UANJ,QASO,cATP;AAWA,SACIC,OADJ,EAEIC,wBAFJ,EAGIC,gBAHJ,EAIIC,eAJJ,EAKIC,cALJ,EAMIC,UANJ,QAOO,yBAPP;AAQA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,QAAT,QAAyB,qBAAzB;AACA,SAASC,SAAT,QAA0B,mBAA1B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAgCA,MAAMC,cAAiC,GAAG;EACtCC,mBAAmB,EAAE,MADiB;EAEtCC,mBAAmB,EAAE,YAFiB;EAGtCC,qBAAqB,EAAE;AAHe,CAA1C;AAMA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;AAEA,MAAMC,uBAAuB,GAAGlB,QAAQ,CAACmB,EAAT,KAAgB,KAAhD;AAEA,eAAe,SAASC,oBAAT,GAAwF;EAAA,IAA1DC,WAA0D,uEAAnCT,cAAmC;EACnG,MAAM;IAAEC,mBAAF;IAAuBC,mBAAvB;IAA4CC;EAA5C,IAAyF,EAC3F,GAAGH,cADwF;IAE3F,GAAGS;EAFwF,CAA/F;EAKA,MAAMC,MAAM,GAAGX,eAAe,EAA9B;EAEA,MAAMY,cAAc,GAAGf,iBAAiB,EAAxC;EAEA,MAAM,CAACgB,YAAD,EAAeC,cAAf,IAAiCf,SAAS,EAAhD;EACA,MAAM,CAACgB,wBAAD,EAA2BC,0BAA3B,IAAyDjB,SAAS,EAAxE;EAEA,MAAMkB,aAAa,GAAGvB,eAAe,CAAC,MAAM,CAACqB,wBAAR,EAAkC,CAACA,wBAAD,CAAlC,CAArC;EAEA,MAAMG,UAAU,GAAGvB,cAAc,CAAS,CAAT,CAAjC;EACA,MAAMwB,cAAc,GAAGxB,cAAc,CAAS,CAAT,CAArC;EACA,MAAMyB,WAAW,GAAGzB,cAAc,CAAS,CAAT,CAAlC;EACA,MAAM0B,UAAU,GAAG1B,cAAc,CAAU,KAAV,CAAjC;EAEA,MAAM2B,KAAK,GAAGxB,QAAQ,EAAtB;EAEA,MAAMyB,aAAa,GAAG9B,gBAAgB,CAAC,MAAM;IACzC,MAAM+B,SAAS,GAAG,CAAC;MAAEN,UAAU,EAAEA,UAAU,CAACO;IAAzB,CAAD,CAAlB;IAEA,OAAO;MACHD,SADG;MAEHE,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcC,OAFxB;MAGHC,iBAAiB,EAAE1B,mBAAmB,KAAK,QAAxB,IAAoCkB,UAAU,CAACI,KAA/C,GAAuDnC,UAAU,CAACwC,aAAlE,GAAkF;IAHlG,CAAP;EAKH,CARqC,EAQnC,CACCR,KADD,EAECnB,mBAFD,CARmC,CAAtC;EAaA,MAAM4B,QAAQ,GAAG5C,MAAM,CAAS,CAAT,CAAvB;EACA,MAAM6C,UAAU,GAAG7C,MAAM,CAAgB,EAAhB,CAAzB;EAEA,MAAM8C,mBAAmB,GAAG/C,WAAW,CAAEgD,SAAD,IAAuB;IAC3D,MAAMC,SAAS,GAAGJ,QAAQ,CAACK,OAA3B;;IACA,IAAID,SAAS,KAAKD,SAAlB,EAA6B;MACzB;IACH;;IAEDF,UAAU,CAACI,OAAX,CAAmBD,SAAnB,IAAgCf,WAAW,CAACK,KAA5C;IAEA,MAAMY,YAAY,GAAGL,UAAU,CAACI,OAAX,CAAmBF,SAAnB,KAAiC,CAAtD;IACAd,WAAW,CAACK,KAAZ,GAAoBY,YAApB;IAEAN,QAAQ,CAACK,OAAT,GAAmBF,SAAnB,CAX2D,CAa3D;;IACAb,UAAU,CAACI,KAAX,GAAmBY,YAAY,GAAG,CAAlC,CAd2D,CAgB3D;;IACA,IAAInB,UAAU,CAACO,KAAX,GAAmB,CAAnB,IAAwBY,YAAY,GAAGxB,YAA3C,EAAyD;MACrDK,UAAU,CAACO,KAAX,GAAmB7B,UAAU,CAAC,CAAD,EAAIS,gBAAJ,CAA7B;IACH;EACJ,CApBsC,EAoBpC,CAACQ,YAAD,CApBoC,CAAvC;EAsBA,MAAMyB,aAAa,GAAG9C,wBAAwB,CAAC;IAC3C+C,WAAW,EAAE,MAAM;MACf,IAAIrC,mBAAmB,KAAK,SAA5B,EAAuC;QACnCX,OAAO,CAACH,QAAQ,CAACoD,OAAV,CAAP;MACH;;MACDrB,cAAc,CAACM,KAAf,GAAuBP,UAAU,CAACO,KAAlC;IACH,CAN0C;IAO3CgB,eAAe,EAAE,MAAM;MACnBtB,cAAc,CAACM,KAAf,GAAuBP,UAAU,CAACO,KAAlC;IACH,CAT0C;IAU3CiB,QAAQ,EAAGC,KAAD,IAAW;MACjB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEA,MAAMC,KAAK,GAAG9B,aAAa,CAACQ,KAA5B;;MAEA,IAAIlB,uBAAJ,EAA6B;QACzB,MAAMyC,EAAE,GAAGJ,OAAO,GAAGxB,WAAW,CAACK,KAAjC;QAEAP,UAAU,CAACO,KAAX,GAAmBmB,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBK,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAShC,cAAc,CAACM,KAAf,GAAuBuB,EAAhC,EAAoCD,KAApC,CAAT,EAAqD,CAArD,CAAtC;QAEA1B,UAAU,CAACI,KAAX,GAAmBmB,OAAO,GAAG1B,UAAU,CAACO,KAArB,GAA6B,CAAhD;MACH,CAND,MAMO;QACH,MAAM2B,UAAU,GAAG,CAACL,KAApB;QACA,MAAMM,UAAU,GAAGV,KAAK,CAACW,WAAN,CAAkBC,MAAlB,GAA2BZ,KAAK,CAACa,iBAAN,CAAwBD,MAAtE;QAEA,MAAME,WAAW,GAAGR,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASP,OAAT,EAAkBQ,UAAlB,CAAT,EAAwCC,UAAxC,CAApB;QACA,MAAMK,eAAe,GAAGT,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAS/B,WAAW,CAACK,KAArB,EAA4B2B,UAA5B,CAAT,EAAkDC,UAAlD,CAAxB;QACA,MAAML,EAAE,GAAGS,WAAW,GAAGC,eAAzB;QAEA,MAAMC,aAAa,GAAGvD,qBAAqB,GACrC4C,EAAE,KAAK,CAAP,GACI7B,cAAc,CAACM,KADnB,GAEIuB,EAAE,GAAG,CAAL,GACID,KADJ,GAEI,CAL6B,GAMrCW,eAAe,KAAKN,UAApB,GACI,CADJ,GAEIL,KARV;QAUA7B,UAAU,CAACO,KAAX,GAAmB7B,UAAU,CAAC+D,aAAD,EAAgBtD,gBAAhB,CAA7B;QACAc,cAAc,CAACM,KAAf,GAAuBkC,aAAvB;QAEAtC,UAAU,CAACI,KAAX,GAAmBmB,OAAO,GAAG,CAA7B;QAEAxB,WAAW,CAACK,KAAZ,GAAoBmB,OAApB;MACH;IACJ,CA9C0C;IA+C3CgB,SAAS,EAAGjB,KAAD,IAAW;MAClBvB,WAAW,CAACK,KAAZ,GAAoBkB,KAAK,CAACE,aAAN,CAAoBC,CAAxC;IACH,CAjD0C;IAkD3Ce,aAAa,EAAGlB,KAAD,IAAW;MACtB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEA1B,WAAW,CAACK,KAAZ,GAAoBmB,OAApB;MAEA,MAAMkB,EAAE,GAAG5C,UAAU,CAACO,KAAtB;MACA,MAAMsB,KAAK,GAAG9B,aAAa,CAACQ,KAA5B,CANsB,CAQtB;;MACA,IAAIqC,EAAE,IAAIf,KAAN,IAAee,EAAE,IAAI,CAAzB,EAA4B;QACxB;MACH;;MAED,MAAMC,SAAS,GAAGhB,KAAK,GAAG,GAA1B;MAEA,MAAMiB,cAAc,GAAIF,EAAE,GAAGC,SAAL,IAAkBnB,OAAO,GAAG/B,YAA7B,GAA6C,CAA7C,GAAiDkC,KAAxE;MAEA1B,UAAU,CAACI,KAAX,GAAmBmB,OAAO,GAAGoB,cAAV,GAA2B,CAA9C;MAEA9C,UAAU,CAACO,KAAX,GAAmB7B,UAAU,CAACoE,cAAD,EAAiB3D,gBAAjB,CAA7B;IACH;EAtE0C,CAAD,EAuE3C,CAACH,mBAAD,EAAsBW,YAAtB,CAvE2C,CAA9C;EAyEA,MAAMoD,cAAc,GAAGlD,wBAAwB,GAAG,CAAlD;EAEA,MAAMmD,WAAW,GAAG,CAChB3C,aADgB,EAEhB;IAAE4C,UAAU,EAAEvD,cAAc,CAACwD;EAA7B,CAFgB,EAGhBH,cAAc,GAAGtD,MAAM,CAAC0D,QAAV,GAAqBC,SAHnB,CAApB;EAMA,OAAO;IACHJ,WADG;IAEHpD,cAFG;IAGHE,0BAHG;IAIH0B,QAAQ,EAAEJ,aAJP;IAKHL,mBALG;IAMHsC,mBAAmB,EAAE;MAAEH,GAAG,EAAEH,cAAc,GAAGpD,YAAH,GAAkB;IAAvC;EANlB,CAAP;AAQH;AAAA"}

package/build/module/hooks/useContentContainerStyle.js

@@ -22,7 +22,8 @@ function getMaxWidth(theme, breakpoint) {
   }
 }
 
-export default function useContentContainerStyle(config = defaultConfig) {
+export default function useContentContainerStyle() {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig;
   const {
     breakpoint,
     maxWidth,

package/build/module/hooks/useContentContainerStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useContentContainerStyle.ts"],"names":["useTheme","useBreakpointUp","defaultConfig","breakpoint","maxWidth","styleProvider","undefined","getMaxWidth","theme","breakpoints","values","useContentContainerStyle","config","additionalStyle","yesStyle","alignSelf","width"],"mappings":"AAEA,SAASA,QAAT,QAAyB,WAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAYA,MAAMC,aAA+B,GAAG;AACpCC,EAAAA,UAAU,EAAE,IADwB;AAEpCC,EAAAA,QAAQ,EAAE,IAF0B;AAGpCC,EAAAA,aAAa,EAAE,MAAMC;AAHe,CAAxC,C,CAMA;;AACA,SAASC,WAAT,CAAqBC,KAArB,EAAmCL,UAAnC,EAAkF;AAC9E,UAAQA,UAAR;AACI,SAAK,IAAL;AACI,aAAOK,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAO,MAAP;AARR;AAUH;;AAED,eAAe,SAASC,wBAAT,CAAkCC,MAAc,GAAGV,aAAnD,EAAyF;AACpG,QAAM;AACFC,IAAAA,UADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA;AAHE,MAIF,EACA,GAAGH,aADH;AAEA,OAAGU;AAFH,GAJJ;AASA,QAAMJ,KAAK,GAAGR,QAAQ,EAAtB;AAEA,QAAMa,eAAe,GAAGR,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGG,KAAH,CAArC;AAEA,QAAMM,QAA+B,GAAG,CACpC;AACIC,IAAAA,SAAS,EAAE,QADf;AAEIX,IAAAA,QAAQ,EAAEG,WAAW,CAACC,KAAD,EAAQJ,QAAR,CAFzB;AAGIY,IAAAA,KAAK,EAAE;AAHX,GADoC,EAMpCH,eANoC,CAAxC;AASA,SAAOZ,eAAe,CAACE,UAAD,EAAaW,QAAb,EAAuBD,eAAvB,CAAtB;AACH;AAAA","sourcesContent":["import type { ScrollViewProps, ViewStyle } from 'react-native';\nimport type { Theme } from '../types';\nimport { useTheme } from '../styles';\nimport useBreakpointUp from './useBreakpointUp';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\ntype ContentContainerStyle = ScrollViewProps['contentContainerStyle'];\n\nexport interface Config {\n    breakpoint?: Breakpoint;\n    maxWidth?: Breakpoint;\n    styleProvider?: (theme: Theme) => ContentContainerStyle;\n}\n\nconst defaultConfig: Required<Config> = {\n    breakpoint: 'lg',\n    maxWidth: 'md',\n    styleProvider: () => undefined,\n};\n\n// TODO: Needs to refactor\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'xs':\n            return theme.breakpoints.values['sm'];\n        case 'sm':\n            return theme.breakpoints.values['md'];\n        case 'md':\n            return theme.breakpoints.values['lg'];\n        case 'lg':\n            return 'none';\n    }\n}\n\nexport default function useContentContainerStyle(config: Config = defaultConfig): ContentContainerStyle {\n    const {\n        breakpoint,\n        maxWidth,\n        styleProvider,\n    } = {\n        ...defaultConfig,\n        ...config,\n    };\n\n    const theme = useTheme();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const yesStyle: ContentContainerStyle = [\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, maxWidth),\n            width: '100%',\n        },\n        additionalStyle,\n    ];\n\n    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);\n};\n"]}
+{"version":3,"names":["useTheme","useBreakpointUp","defaultConfig","breakpoint","maxWidth","styleProvider","undefined","getMaxWidth","theme","breakpoints","values","useContentContainerStyle","config","additionalStyle","yesStyle","alignSelf","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { ScrollViewProps, ViewStyle } from 'react-native';\nimport type { Theme } from '../types';\nimport { useTheme } from '../styles';\nimport useBreakpointUp from './useBreakpointUp';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\ntype ContentContainerStyle = ScrollViewProps['contentContainerStyle'];\n\nexport interface Config {\n    breakpoint?: Breakpoint;\n    maxWidth?: Breakpoint;\n    styleProvider?: (theme: Theme) => ContentContainerStyle;\n}\n\nconst defaultConfig: Required<Config> = {\n    breakpoint: 'lg',\n    maxWidth: 'md',\n    styleProvider: () => undefined,\n};\n\n// TODO: Needs to refactor\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'xs':\n            return theme.breakpoints.values['sm'];\n        case 'sm':\n            return theme.breakpoints.values['md'];\n        case 'md':\n            return theme.breakpoints.values['lg'];\n        case 'lg':\n            return 'none';\n    }\n}\n\nexport default function useContentContainerStyle(config: Config = defaultConfig): ContentContainerStyle {\n    const {\n        breakpoint,\n        maxWidth,\n        styleProvider,\n    } = {\n        ...defaultConfig,\n        ...config,\n    };\n\n    const theme = useTheme();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const yesStyle: ContentContainerStyle = [\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, maxWidth),\n            width: '100%',\n        },\n        additionalStyle,\n    ];\n\n    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);\n};\n"],"mappings":"AAEA,SAASA,QAAT,QAAyB,WAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAYA,MAAMC,aAA+B,GAAG;EACpCC,UAAU,EAAE,IADwB;EAEpCC,QAAQ,EAAE,IAF0B;EAGpCC,aAAa,EAAE,MAAMC;AAHe,CAAxC,C,CAMA;;AACA,SAASC,WAAT,CAAqBC,KAArB,EAAmCL,UAAnC,EAAkF;EAC9E,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOK,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAO,MAAP;EARR;AAUH;;AAED,eAAe,SAASC,wBAAT,GAAyF;EAAA,IAAvDC,MAAuD,uEAAtCV,aAAsC;EACpG,MAAM;IACFC,UADE;IAEFC,QAFE;IAGFC;EAHE,IAIF,EACA,GAAGH,aADH;IAEA,GAAGU;EAFH,CAJJ;EASA,MAAMJ,KAAK,GAAGR,QAAQ,EAAtB;EAEA,MAAMa,eAAe,GAAGR,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGG,KAAH,CAArC;EAEA,MAAMM,QAA+B,GAAG,CACpC;IACIC,SAAS,EAAE,QADf;IAEIX,QAAQ,EAAEG,WAAW,CAACC,KAAD,EAAQJ,QAAR,CAFzB;IAGIY,KAAK,EAAE;EAHX,CADoC,EAMpCH,eANoC,CAAxC;EASA,OAAOZ,eAAe,CAACE,UAAD,EAAaW,QAAb,EAAuBD,eAAvB,CAAtB;AACH;AAAA"}

package/build/module/hooks/useDebounce.js

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useRef } from 'react';
+export default function useDebounce(callback, debounceMillis) {
+  const debounceTimeout = useRef(null);
+  useEffect(() => {
+    return () => {
+      debounceTimeout.current && clearTimeout(debounceTimeout.current);
+    };
+  }, []);
+  return useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
+
+    if (callback) {
+      debounceTimeout.current = setTimeout(() => {
+        callback(...args);
+      }, debounceMillis);
+    }
+  }, [debounceMillis, callback]);
+}
+//# sourceMappingURL=useDebounce.js.map

package/build/module/hooks/useDebounce.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","useDebounce","callback","debounceMillis","debounceTimeout","current","clearTimeout","args","setTimeout"],"sources":["useDebounce.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nexport default function useDebounce(callback: (args?: any) => void, debounceMillis: number) {\n    const debounceTimeout = useRef<NodeJS.Timeout | null>(null);\n\n    useEffect(() => {\n        return () => {\n            debounceTimeout.current && clearTimeout(debounceTimeout.current);\n        };\n    }, []);\n\n    return useCallback((...args: any[]) => {\n        if (debounceTimeout.current) {\n            clearTimeout(debounceTimeout.current);\n        }\n\n        if (callback) {\n            debounceTimeout.current = setTimeout(() => {\n                callback(...args);\n            }, debounceMillis);\n        }\n    }, [debounceMillis, callback]);\n}"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,QAA+C,OAA/C;AAEA,eAAe,SAASC,WAAT,CAAqBC,QAArB,EAAqDC,cAArD,EAA6E;EACxF,MAAMC,eAAe,GAAGJ,MAAM,CAAwB,IAAxB,CAA9B;EAEAD,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTK,eAAe,CAACC,OAAhB,IAA2BC,YAAY,CAACF,eAAe,CAACC,OAAjB,CAAvC;IACH,CAFD;EAGH,CAJQ,EAIN,EAJM,CAAT;EAMA,OAAOP,WAAW,CAAC,YAAoB;IAAA,kCAAhBS,IAAgB;MAAhBA,IAAgB;IAAA;;IACnC,IAAIH,eAAe,CAACC,OAApB,EAA6B;MACzBC,YAAY,CAACF,eAAe,CAACC,OAAjB,CAAZ;IACH;;IAED,IAAIH,QAAJ,EAAc;MACVE,eAAe,CAACC,OAAhB,GAA0BG,UAAU,CAAC,MAAM;QACvCN,QAAQ,CAAC,GAAGK,IAAJ,CAAR;MACH,CAFmC,EAEjCJ,cAFiC,CAApC;IAGH;EACJ,CAViB,EAUf,CAACA,cAAD,EAAiBD,QAAjB,CAVe,CAAlB;AAWH"}

package/build/module/hooks/useElevationStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useElevationStyle.ts"],"names":["Platform","useTheme","useElevationStyle","elevation","theme","shadow","select","android","ios","web","boxShadow"],"mappings":"AAAA,SAASA,QAAT,QAAyB,cAAzB;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAEA,eAAe,SAASC,iBAAT,CAA2BC,SAA3B,EAAiD;AAC5D,QAAMC,KAAK,GAAGH,QAAQ,EAAtB;AACA,QAAMI,MAAM,GAAGD,KAAK,CAACC,MAAN,CAAaF,SAAb,CAAf;AAEA,SAAOH,QAAQ,CAACM,MAAT,CAAqB;AACxBC,IAAAA,OAAO,EAAEF,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEF,SADO;AAExBK,IAAAA,GAAG,EAAEH,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAFW;AAGxBI,IAAAA,GAAG,EAAEJ,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEK;AAHW,GAArB,CAAP;AAKH;AAAA","sourcesContent":["import { Platform } from 'react-native';\nimport type { Elevation } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\nexport default function useElevationStyle(elevation: Elevation) {\n    const theme = useTheme();\n    const shadow = theme.shadow[elevation];\n\n    return Platform.select<any>({\n        android: shadow?.elevation,\n        ios: shadow?.shadow,\n        web: shadow?.boxShadow,\n    });\n};\n"]}
+{"version":3,"names":["Platform","useTheme","useElevationStyle","elevation","theme","shadow","select","android","ios","web","boxShadow"],"sources":["useElevationStyle.ts"],"sourcesContent":["import { Platform } from 'react-native';\nimport type { Elevation } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\nexport default function useElevationStyle(elevation: Elevation) {\n    const theme = useTheme();\n    const shadow = theme.shadow[elevation];\n\n    return Platform.select<any>({\n        android: shadow?.elevation,\n        ios: shadow?.shadow,\n        web: shadow?.boxShadow,\n    });\n};\n"],"mappings":"AAAA,SAASA,QAAT,QAAyB,cAAzB;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAEA,eAAe,SAASC,iBAAT,CAA2BC,SAA3B,EAAiD;EAC5D,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EACA,MAAMI,MAAM,GAAGD,KAAK,CAACC,MAAN,CAAaF,SAAb,CAAf;EAEA,OAAOH,QAAQ,CAACM,MAAT,CAAqB;IACxBC,OAAO,EAAEF,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEF,SADO;IAExBK,GAAG,EAAEH,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAFW;IAGxBI,GAAG,EAAEJ,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEK;EAHW,CAArB,CAAP;AAKH;AAAA"}