@fountain-ui/core 3.0.0-alpha.18 → 3.0.0-alpha.19

package/build/commonjs/Tab/useVariantStyleMap.js

@@ -54,16 +54,16 @@ function useVariantStyleMap(variant, selected, size) {
             borderColor: selected ? undefined : theme.palette.border.weak,
             flexDirection: 'row',
             gap: 5,
-            paddingBottom: 6.5,
+            paddingBottom: 7.5,
             paddingHorizontal: 14,
-            paddingVertical: 7.5
+            paddingTop: 6.5
           },
           label: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
-              fontSize: 15,
-              lineHeight: 19.5,
+              fontSize: 14,
+              lineHeight: 18.2,
               fontFamily: 'LexendDeca-Medium',
-              letterSpacing: 0
+              letterSpacing: -0.28
             }),
             color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
           })

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

@@ -1 +1 @@
-{"version":3,"names":["useVariantStyleMap","variant","selected","size","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","iconContainer","padding","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    iconContainer?: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 14 : 15,\n                            lineHeight: size === 'small' ? 18.2 : 19.5,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingBottom: 4,\n                        paddingHorizontal: 3,\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: selected ? undefined : 0.5,\n                        borderColor: selected ? undefined : theme.palette.border.weak,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 6.5,\n                        paddingHorizontal: 14,\n                        paddingVertical: 7.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 19.5,\n                            fontFamily: 'LexendDeca-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: 10.5,\n                        width: 48,\n                    },\n                    iconContainer: {\n                        padding: 0.75,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10.5,\n                            lineHeight: 10.5,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.105,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: 10,\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 1,\n                        paddingVertical: 10,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 15 : 16,\n                            lineHeight: size === 'small' ? 18.75 : 20,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected, size]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useVariantStyleMap","variant","selected","size","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","iconContainer","padding","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    iconContainer?: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 14 : 15,\n                            lineHeight: size === 'small' ? 18.2 : 19.5,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingBottom: 4,\n                        paddingHorizontal: 3,\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: selected ? undefined : 0.5,\n                        borderColor: selected ? undefined : theme.palette.border.weak,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: 'LexendDeca-Medium',\n                            letterSpacing: -0.28,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: 10.5,\n                        width: 48,\n                    },\n                    iconContainer: {\n                        padding: 0.75,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10.5,\n                            lineHeight: 10.5,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.105,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: 10,\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 1,\n                        paddingVertical: 10,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 15 : 16,\n                            lineHeight: size === 'small' ? 18.75 : 20,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected, size]);\n}\n"],"mappings":"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"}

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/useFadeInAppBar.js

@@ -89,7 +89,7 @@ function useFadeInAppBar() {
     onMomentumEnd: event => {
       lastOffsetY.value = event.contentOffset.y;
     }
-  }, [keyboardDismissMode]);
+  });
   const appBarStyle = [animatedAppBarStyle, {
     paddingTop: safeAreaInsets.top
   }, floating ? styles.floating : undefined];

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

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","dismissKeyboard","Keyboard","dismiss","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","useMemo","beginY","scrollY","useSharedValue","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","rgb","animatedAppBarStyle","useAnimatedStyle","r","g","b","backgroundColor","value","borderColor","divider","borderBottomWidth","StyleSheet","hairlineWidth","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","undefined","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, StyleSheet, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    scrollY: SharedValue<number>;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const scrollY = useSharedValue<number>(0);\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const originalBackgroundColor = theme.palette.background.default;\n    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => {\n        const [r, g, b] = rgbValues;\n        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n        return {\n            backgroundColor,\n            borderColor: theme.palette.divider,\n            borderBottomWidth: normalized.value >= 1 ? StyleSheet.hairlineWidth : 0,\n        };\n    }, [rgbValues]);\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }), []);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(dismissKeyboard)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n            scrollY.value = offsetY;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    }, [keyboardDismissMode]);\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        scrollY,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","dismissKeyboard","Keyboard","dismiss","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","useMemo","beginY","scrollY","useSharedValue","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","rgb","animatedAppBarStyle","useAnimatedStyle","r","g","b","backgroundColor","value","borderColor","divider","borderBottomWidth","StyleSheet","hairlineWidth","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","undefined","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, StyleSheet, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    scrollY: SharedValue<number>;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const scrollY = useSharedValue<number>(0);\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const originalBackgroundColor = theme.palette.background.default;\n    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => {\n        const [r, g, b] = rgbValues;\n        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n        return {\n            backgroundColor,\n            borderColor: theme.palette.divider,\n            borderBottomWidth: normalized.value >= 1 ? StyleSheet.hairlineWidth : 0,\n        };\n    }, [rgbValues]);\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }), []);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(dismissKeyboard)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n            scrollY.value = offsetY;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        scrollY,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}

package/build/module/Tab/useVariantStyleMap.js

@@ -44,16 +44,16 @@ export default function useVariantStyleMap(variant, selected, size) {
             borderColor: selected ? undefined : theme.palette.border.weak,
             flexDirection: 'row',
             gap: 5,
-            paddingBottom: 6.5,
+            paddingBottom: 7.5,
             paddingHorizontal: 14,
-            paddingVertical: 7.5
+            paddingTop: 6.5
           },
           label: createFontStyle(theme, {
             selector: _ => typographyOf({
-              fontSize: 15,
-              lineHeight: 19.5,
+              fontSize: 14,
+              lineHeight: 18.2,
               fontFamily: 'LexendDeca-Medium',
-              letterSpacing: 0
+              letterSpacing: -0.28
             }),
             color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
           })

package/build/module/Tab/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","size","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","iconContainer","padding","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    iconContainer?: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 14 : 15,\n                            lineHeight: size === 'small' ? 18.2 : 19.5,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingBottom: 4,\n                        paddingHorizontal: 3,\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: selected ? undefined : 0.5,\n                        borderColor: selected ? undefined : theme.palette.border.weak,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 6.5,\n                        paddingHorizontal: 14,\n                        paddingVertical: 7.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 19.5,\n                            fontFamily: 'LexendDeca-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: 10.5,\n                        width: 48,\n                    },\n                    iconContainer: {\n                        padding: 0.75,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10.5,\n                            lineHeight: 10.5,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.105,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: 10,\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 1,\n                        paddingVertical: 10,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 15 : 16,\n                            lineHeight: size === 'small' ? 18.75 : 20,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected, size]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","size","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","iconContainer","padding","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    iconContainer?: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 14 : 15,\n                            lineHeight: size === 'small' ? 18.2 : 19.5,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingBottom: 4,\n                        paddingHorizontal: 3,\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: selected ? undefined : 0.5,\n                        borderColor: selected ? undefined : theme.palette.border.weak,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: 'LexendDeca-Medium',\n                            letterSpacing: -0.28,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: 10.5,\n                        width: 48,\n                    },\n                    iconContainer: {\n                        padding: 0.75,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10.5,\n                            lineHeight: 10.5,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.105,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: 10,\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 1,\n                        paddingVertical: 10,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 15 : 16,\n                            lineHeight: size === 'small' ? 18.75 : 20,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected, size]);\n}\n"],"mappings":"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"}

package/build/module/hooks/useCollapsibleAppBar.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useRef","useState","Keyboard","Platform","StyleSheet","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useTheme","useHeight","useAppbarStyles","defaultOptions","keyboardDismissMode","dividerExposureMode","supportsReverseScroll","ANIMATION_CONFIG","duration","TRANSPARENT","SUPPORTS_DRAG_DETECTION","OS","dismissKeyboard","dismiss","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","overlapped","isScrolled","setIsScrolled","theme","animatedStyle","transform","value","borderColor","palette","divider","borderBottomWidth","hairlineWidth","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","scrollHandler","onBeginDrag","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":["useCallback","useRef","useState","Keyboard","Platform","StyleSheet","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useTheme","useHeight","useAppbarStyles","defaultOptions","keyboardDismissMode","dividerExposureMode","supportsReverseScroll","ANIMATION_CONFIG","duration","TRANSPARENT","SUPPORTS_DRAG_DETECTION","OS","dismissKeyboard","dismiss","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","overlapped","isScrolled","setIsScrolled","theme","animatedStyle","transform","value","borderColor","palette","divider","borderBottomWidth","hairlineWidth","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","scrollHandler","onBeginDrag","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/module/hooks/useFadeInAppBar.js

@@ -72,7 +72,7 @@ export default function useFadeInAppBar() {
     onMomentumEnd: event => {
       lastOffsetY.value = event.contentOffset.y;
     }
-  }, [keyboardDismissMode]);
+  });
   const appBarStyle = [animatedAppBarStyle, {
     paddingTop: safeAreaInsets.top
   }, floating ? styles.floating : undefined];

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","Keyboard","StyleSheet","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","dismissKeyboard","dismiss","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","beginY","scrollY","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","animatedAppBarStyle","r","g","b","backgroundColor","value","borderColor","divider","borderBottomWidth","hairlineWidth","animatedTitleStyle","opacity","scrollHandler","onBeginDrag","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","undefined","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, StyleSheet, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    scrollY: SharedValue<number>;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const scrollY = useSharedValue<number>(0);\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const originalBackgroundColor = theme.palette.background.default;\n    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => {\n        const [r, g, b] = rgbValues;\n        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n        return {\n            backgroundColor,\n            borderColor: theme.palette.divider,\n            borderBottomWidth: normalized.value >= 1 ? StyleSheet.hairlineWidth : 0,\n        };\n    }, [rgbValues]);\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }), []);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(dismissKeyboard)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n            scrollY.value = offsetY;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    }, [keyboardDismissMode]);\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        scrollY,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","Keyboard","StyleSheet","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","dismissKeyboard","dismiss","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","beginY","scrollY","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","animatedAppBarStyle","r","g","b","backgroundColor","value","borderColor","divider","borderBottomWidth","hairlineWidth","animatedTitleStyle","opacity","scrollHandler","onBeginDrag","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","undefined","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, StyleSheet, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    scrollY: SharedValue<number>;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const scrollY = useSharedValue<number>(0);\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const originalBackgroundColor = theme.palette.background.default;\n    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => {\n        const [r, g, b] = rgbValues;\n        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n        return {\n            backgroundColor,\n            borderColor: theme.palette.divider,\n            borderBottomWidth: normalized.value >= 1 ? StyleSheet.hairlineWidth : 0,\n        };\n    }, [rgbValues]);\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }), []);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(dismissKeyboard)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n            scrollY.value = offsetY;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        scrollY,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.18",
+  "version": "3.0.0-alpha.19",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^3.0.0-alpha.8",
+    "@fountain-ui/styles": "^3.0.0-alpha.9",
     "@fountain-ui/utils": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d39e78bbc87db3526b4544aca37ad297beef9024"
+  "gitHead": "7142bb054dae2899d8c211c8b5a1d8060c8994bf"
 }

package/src/Tab/useVariantStyleMap.ts

@@ -61,16 +61,16 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         borderColor: selected ? undefined : theme.palette.border.weak,
                         flexDirection: 'row',
                         gap: 5,
-                        paddingBottom: 6.5,
+                        paddingBottom: 7.5,
                         paddingHorizontal: 14,
-                        paddingVertical: 7.5,
+                        paddingTop: 6.5,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
+                            fontSize: 14,
+                            lineHeight: 18.2,
                             fontFamily: 'LexendDeca-Medium',
-                            letterSpacing: 0,
+                            letterSpacing: -0.28,
                         }),
                         color: selected
                             ? theme.palette.text.strongInverse

package/src/hooks/useCollapsibleAppBar.ts

@@ -205,7 +205,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    }, [keyboardDismissMode, appBarHeight, isScrolled]);
+    });
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

package/src/hooks/useFadeInAppBar.ts

@@ -117,7 +117,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         onMomentumEnd: (event) => {
             lastOffsetY.value = event.contentOffset.y;
         },
-    }, [keyboardDismissMode]);
+    });
 
     const appBarStyle = [
         animatedAppBarStyle,