@fountain-ui/core 3.0.0-alpha.15 → 3.0.0-alpha.17

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","alignItems","height","justifyContent","paddingTop","width","strong","padding"],"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 { TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean): 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                        paddingHorizontal: theme.spacing(3.5),\n                        paddingVertical: theme.spacing(1.75),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\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                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 14,\n                        paddingVertical: 8.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: theme.spacing(2.625),\n                        width: 48,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10,\n                            lineHeight: 10,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.1,\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                        padding: theme.spacing(2.5),\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 18.75,\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]);\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","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    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                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10,\n                            lineHeight: 10,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.1,\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/Tabs/Tabs.js

@@ -22,9 +22,6 @@ const useStyles = function () {
     fixedTab: {
       flex: 1
     },
-    scrollableContainer: {
-      paddingHorizontal: theme.spacing(1)
-    },
     bottomDivider: {
       borderBottomColor: theme.palette.border.base,
       borderBottomWidth: 0.5
@@ -47,6 +44,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     scrollable = false,
     scrollViewContentContainerStyle,
     showDivider = false,
+    size = 'medium',
     style,
     variant = 'default',
     UNSTABLE_sharedIndex,
@@ -60,7 +58,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   const currentIndexRef = useRef(initialIndex);
   const {
     container: containerStyle
-  } = useTabsStyle(variant);
+  } = useTabsStyle(variant, size);
 
   const setTab = newIndex => {
     const currentIndex = currentIndexRef.current;
@@ -151,6 +149,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
       onLayout,
       onPress,
       onMouseDown,
+      size,
       variant,
       indicatorSize,
       style: scrollable ? undefined : styles.fixedTab
@@ -181,7 +180,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   }, scrollable ? /*#__PURE__*/React.createElement(ScrollableTabsView, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
-    contentContainerStyle: css([styles.scrollableContainer, scrollViewContentContainerStyle]),
+    contentContainerStyle: css([scrollViewContentContainerStyle]),
     coordinates: coordinates,
     directionalLockEnabled: true,
     horizontal: true,

package/build/module/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useTabsStyle","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","container","containerStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabVariant } from '../Tab';\nimport type TabsProps from './TabsProps';\nimport type { TabsColor } from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer'\n    | 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n        bottomDivider: {\n            borderBottomColor: theme.palette.border.base,\n            borderBottomWidth: 0.5,\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        color = 'default',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'fit-content',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollViewContentContainerStyle,\n        showDivider = false,\n        style,\n        variant = 'default' as TabVariant,\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const { container: containerStyle } = useTabsStyle(variant);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (outerCoordinates.length === 0) {\n            return [];\n        }\n\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n            const tabWidth = outerX2 - outerX1;\n            const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n            const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n            return {\n                x1: indicatorStartCoordinate,\n                x2: indicatorStartCoordinate + innerContentWidth,\n            };\n        });\n    }, [outerCoordinates, innerContentsWidthList]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { width } = event.nativeEvent.layout;\n\n            updateInnerContentsWidth(index, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            indicatorSize,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n        />\n    ) : null;\n\n    const backgroundColorMap: Record<TabsColor, string> = {\n        default: theme.palette.background.base,\n        alt: theme.palette.background.alt,\n    };\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    containerStyle,\n                    { backgroundColor: backgroundColorMap[color] },\n                    showDivider ? styles.bottomDivider : undefined,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={css([\n                            styles.scrollableContainer,\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,YAAhB,EAA8BC,UAA9B,EAA0CC,SAA1C,EAAqDC,mBAArD,EAA0EC,OAA1E,EAAmFC,MAAnF,QAAiG,OAAjG;AAEA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AACA,SAASC,oBAAT,QAAqC,UAArC;AAKA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,wBAAP,MAAqC,4BAArC;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,SAASC,4BAAT,QAA6C,SAA7C;AACA,OAAOC,YAAP,MAAyB,gBAAzB;;AAWA,MAAMC,SAAgC,GAAG,YAAwB;EAC7D,MAAMC,KAAK,GAAGZ,QAAQ,EAAtB;EAEA,OAAO;IACHa,IAAI,EAAE,EADH;IAEHC,SAAS,EAAE;MACPC,aAAa,EAAE;IADR,CAFR;IAKHC,QAAQ,EAAE;MACNC,IAAI,EAAE;IADA,CALP;IAQHC,mBAAmB,EAAE;MACjBC,iBAAiB,EAAEP,KAAK,CAACQ,OAAN,CAAc,CAAd;IADF,CARlB;IAWHC,aAAa,EAAE;MACXC,iBAAiB,EAAEV,KAAK,CAACW,OAAN,CAAcC,MAAd,CAAqBC,IAD7B;MAEXC,iBAAiB,EAAE;IAFR;EAXZ,CAAP;AAgBH,CAnBD;;AAqBA,MAAMC,IAAI,gBAAGlC,UAAU,CAA0B,SAASkC,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EAAA;;EACvE,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,YAAY,GAAG,CAHb;IAIFC,gBAAgB,GAAG,KAJjB;IAKFC,aAAa,GAAG,aALd;IAMFC,mBAAmB,GAAG,MANpB;IAOFC,yBAAyB,GAAG,OAP1B;IAQFC,QARE;IASFC,UAAU,GAAG,KATX;IAUFC,+BAVE;IAWFC,WAAW,GAAG,KAXZ;IAYFC,KAZE;IAaFC,OAAO,GAAG,SAbR;IAcFC,oBAdE;IAeFC;EAfE,IAgBFhB,KAhBJ;EAkBA,MAAMiB,mBAAmB,GAAG5C,oBAAoB,CAAC;IAAE6C,YAAY,EAAEd;EAAhB,CAAD,CAAhD;EACA,MAAMe,WAAW,GAAGJ,oBAAoB,IAAIE,mBAA5C;EACA,MAAMG,gBAAgB,GAAGD,WAAW,CAACD,YAArC;EAEA,MAAMG,eAAe,GAAGpD,MAAM,CAACmC,YAAD,CAA9B;EAEA,MAAM;IAAEkB,SAAS,EAAEC;EAAb,IAAgCzC,YAAY,CAACgC,OAAD,CAAlD;;EAEA,MAAMU,MAAM,GAAIC,QAAD,IAAsB;IACjC,MAAMC,YAAY,GAAGL,eAAe,CAACM,OAArC;IACAX,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGS,QAAH,EAAaC,YAAb,CAAb;IAEAP,WAAW,CAACS,aAAZ,CAA0BC,QAA1B,CAAmCJ,QAAnC;EACH,CALD;;EAOA1D,mBAAmB,CACfkC,GADe,EAEf,OAAO;IACHuB;EADG,CAAP,CAFe,EAKf,CAACL,WAAD,CALe,CAAnB;EAQA,MAAMW,MAAM,GAAG/C,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAGZ,QAAQ,EAAtB;EAEA,MAAM,CAAC2D,gBAAD,EAAmBC,gBAAnB,IAAuCvD,iBAAiB,CAACyB,QAAD,CAA9D;EACA,MAAM,CAAC+B,sBAAD,EAAyBC,wBAAzB,IAAqDxD,wBAAwB,CAACwB,QAAD,CAAnF;EAEA,MAAMiC,kBAAkB,GAAG7B,aAAa,KAAK,aAAlB,GACrBzB,4BAA4B,CAACoD,sBAAD,EAAyB/B,QAAzB,CADP,GAErBrB,4BAA4B,CAACkD,gBAAD,EAAmB7B,QAAnB,CAFlC;EAIA,MAAMkC,UAAU,GAAGzD,aAAa,CAACwC,WAAD,CAAhC;EAEA,MAAMkB,WAAW,GAAGrE,OAAO,CAAC,MAAM;IAC9B,IAAI+D,gBAAgB,CAACO,MAAjB,KAA4B,CAAhC,EAAmC;MAC/B,OAAO,EAAP;IACH;;IAED,IAAIhC,aAAa,KAAK,aAAtB,EAAqC;MACjC,OAAOyB,gBAAP;IACH;;IAED,OAAOE,sBAAsB,CAACM,GAAvB,CAA2B,CAACC,iBAAD,EAAoBC,GAApB,KAA4B;MAC1D,MAAM;QAAEC,EAAE,EAAEC,OAAN;QAAeC,EAAE,EAAEC;MAAnB,IAA+Bd,gBAAgB,CAACU,GAAD,CAArD;MAEA,MAAMK,QAAQ,GAAGD,OAAO,GAAGF,OAA3B;MACA,MAAMI,kBAAkB,GAAG,CAACD,QAAQ,GAAGN,iBAAZ,IAAiC,CAA5D;MACA,MAAMQ,wBAAwB,GAAGL,OAAO,GAAGI,kBAA3C;MAEA,OAAO;QACHL,EAAE,EAAEM,wBADD;QAEHJ,EAAE,EAAEI,wBAAwB,GAAGR;MAF5B,CAAP;IAIH,CAXM,CAAP;EAYH,CArB0B,EAqBxB,CAACT,gBAAD,EAAmBE,sBAAnB,CArBwB,CAA3B;EAuBAnE,SAAS,CAAC,MAAM;IACZ,OAAOsE,UAAU,CAACa,SAAX,CAAqBxB,QAAQ,IAAI;MACpChB,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGgB,QAAH,CAAR;MACAJ,eAAe,CAACM,OAAhB,GAA0BF,QAA1B;IACH,CAHM,CAAP;EAIH,CALQ,EAKN,CAACW,UAAD,EAAa3B,QAAb,CALM,CAAT;EAOA,MAAMyC,WAAW,0BAAGvF,KAAK,CAACwF,QAAN,CAAeZ,GAAf,CAAmBrC,QAAnB,EAA6B,CAACkD,KAAD,EAAQC,KAAR,KAAkB;IAC/D,IAAI,CAACD,KAAL,EAAY;MACR,OAAO,IAAP;IACH;;IAED,MAAME,gBAAgB,GAAIC,KAAD,IAA8B;MACnD,MAAM;QAAEC;MAAF,IAAYD,KAAK,CAACE,WAAN,CAAkBC,MAApC;MAEAxB,wBAAwB,CAACmB,KAAD,EAAQG,KAAR,CAAxB;IACH,CAJD;;IAMA,MAAMG,QAAQ,GAAIJ,KAAD,IAA8B;MAAA;;MAC3C,MAAM;QAAEK,CAAF;QAAKJ;MAAL,IAAeD,KAAK,CAACE,WAAN,CAAkBC,MAAvC;MAEA1B,gBAAgB,CAACqB,KAAD,EAAQO,CAAR,EAAWJ,KAAX,CAAhB,CAH2C,CAK3C;;MACA,yCAAAJ,KAAK,CAACpD,KAAN,EAAY2D,QAAZ,mGAAuBJ,KAAvB;IACH,CAPD;;IASA,MAAMM,WAAW,GAAIC,CAAD,IAA8B;MAC9C,IAAItD,yBAAyB,KAAK,QAAlC,EAA4C;QACxCsD,CAAC,CAACC,cAAF;MACH;IACJ,CAJD;;IAMA,MAAMC,OAAO,GAAG,MAAM;MAAA;;MAClBxC,MAAM,CAAC6B,KAAD,CAAN,CADkB,CAGlB;;MACA,yCAAAD,KAAK,CAACpD,KAAN,EAAYgE,OAAZ;IACH,CALD,CA1B+D,CAiC/D;;;IACA,MAAMC,UAAU,gBAAGrG,YAAY,CAACwF,KAAD,EAAQ;MACnCc,eAAe,EAAE,CAAC7D,gBAAD,IAAqB,CAAC8B,kBADJ;MAEnCmB,gBAFmC;MAGnCK,QAHmC;MAInCK,OAJmC;MAKnCH,WALmC;MAMnC/C,OANmC;MAOnCR,aAPmC;MAQnCO,KAAK,EAAEH,UAAU,GAAGyD,SAAH,GAAerC,MAAM,CAAC1C;IARJ,CAAR,CAA/B;IAWA,oBACI,oBAAC,aAAD;MACI,QAAQ,EAAE6E,UADd;MAEI,KAAK,EAAEZ,KAFX;MAGI,YAAY,EAAEjC;IAHlB,EADJ;EAOH,CApDmB,CAAH,wDAAG,oBAoDhBgD,MApDgB,CAoDTC,OApDS,CAApB;EAsDA,MAAMC,YAAY,GAAGnC,kBAAkB,gBACnC,oBAAC,YAAD;IACI,WAAW,EAAEE,WADjB;IAEI,QAAQ,EAAEhC,gBAFd;IAGI,YAAY,EAAEe;EAHlB,EADmC,GAMnC,IANJ;EAQA,MAAMmD,kBAA6C,GAAG;IAClDC,OAAO,EAAExF,KAAK,CAACW,OAAN,CAAc8E,UAAd,CAAyB5E,IADgB;IAElD6E,GAAG,EAAE1F,KAAK,CAACW,OAAN,CAAc8E,UAAd,CAAyBC;EAFoB,CAAtD;EAKA,oBACI,oBAAC,eAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE;MAAEtC;IAAF;EAAjC,gBACI,oBAAC,IAAD;IACI,KAAK,EAAEjE,GAAG,CAAC,CACP2D,MAAM,CAAC7C,IADA,EAEPsC,cAFO,EAGP;MAAEoD,eAAe,EAAEJ,kBAAkB,CAACpE,KAAD;IAArC,CAHO,EAIPS,WAAW,GAAGkB,MAAM,CAACrC,aAAV,GAA0B0E,SAJ9B,EAKPzD,UAAU,GAAGyD,SAAH,GAAerC,MAAM,CAAC5C,SALzB,EAMP2B,KANO,CAAD;EADd,GAUKH,UAAU,gBACP,oBAAC,kBAAD;IACI,gCAAgC,EAAE,KADtC;IAEI,OAAO,EAAE,KAFb;IAGI,qBAAqB,EAAEvC,GAAG,CAAC,CACvB2D,MAAM,CAACxC,mBADgB,EAEvBqB,+BAFuB,CAAD,CAH9B;IAOI,WAAW,EAAE0B,WAPjB;IAQI,sBAAsB,EAAE,IAR5B;IASI,UAAU,EAAE,IAThB;IAUI,YAAY,EAAEjB,gBAVlB;IAWI,YAAY,EAAE,KAXlB;IAYI,8BAA8B,EAAE,KAZpC;IAaI,4BAA4B,EAAE,KAblC;IAcI,mBAAmB,EAAEb,mBAdzB;IAeI,yBAAyB,EAAEC;EAf/B,GAiBK0C,WAjBL,EAkBKoB,YAlBL,CADO,gBAsBP,oBAAC,KAAD,CAAO,QAAP,QACKpB,WADL,EAEKoB,YAFL,CAhCR,CADJ,CADJ;AA0CH,CAlMsB,CAAvB;AAoMA,eAAevE,IAAf"}
+{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useTabsStyle","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","size","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","container","containerStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabSize, TabVariant } from '../Tab';\nimport type TabsProps from './TabsProps';\nimport type { TabsColor } from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        bottomDivider: {\n            borderBottomColor: theme.palette.border.base,\n            borderBottomWidth: 0.5,\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        color = 'default',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'fit-content',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollViewContentContainerStyle,\n        showDivider = false,\n        size = 'medium' as TabSize,\n        style,\n        variant = 'default' as TabVariant,\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const { container: containerStyle } = useTabsStyle(variant, size);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (outerCoordinates.length === 0) {\n            return [];\n        }\n\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n            const tabWidth = outerX2 - outerX1;\n            const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n            const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n            return {\n                x1: indicatorStartCoordinate,\n                x2: indicatorStartCoordinate + innerContentWidth,\n            };\n        });\n    }, [outerCoordinates, innerContentsWidthList]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { width } = event.nativeEvent.layout;\n\n            updateInnerContentsWidth(index, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            size,\n            variant,\n            indicatorSize,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n        />\n    ) : null;\n\n    const backgroundColorMap: Record<TabsColor, string> = {\n        default: theme.palette.background.base,\n        alt: theme.palette.background.alt,\n    };\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    containerStyle,\n                    { backgroundColor: backgroundColorMap[color] },\n                    showDivider ? styles.bottomDivider : undefined,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={css([\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,YAAhB,EAA8BC,UAA9B,EAA0CC,SAA1C,EAAqDC,mBAArD,EAA0EC,OAA1E,EAAmFC,MAAnF,QAAiG,OAAjG;AAEA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AACA,SAASC,oBAAT,QAAqC,UAArC;AAKA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,wBAAP,MAAqC,4BAArC;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,SAASC,4BAAT,QAA6C,SAA7C;AACA,OAAOC,YAAP,MAAyB,gBAAzB;;AAUA,MAAMC,SAAgC,GAAG,YAAwB;EAC7D,MAAMC,KAAK,GAAGZ,QAAQ,EAAtB;EAEA,OAAO;IACHa,IAAI,EAAE,EADH;IAEHC,SAAS,EAAE;MACPC,aAAa,EAAE;IADR,CAFR;IAKHC,QAAQ,EAAE;MACNC,IAAI,EAAE;IADA,CALP;IAQHC,aAAa,EAAE;MACXC,iBAAiB,EAAEP,KAAK,CAACQ,OAAN,CAAcC,MAAd,CAAqBC,IAD7B;MAEXC,iBAAiB,EAAE;IAFR;EARZ,CAAP;AAaH,CAhBD;;AAkBA,MAAMC,IAAI,gBAAG/B,UAAU,CAA0B,SAAS+B,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EAAA;;EACvE,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,YAAY,GAAG,CAHb;IAIFC,gBAAgB,GAAG,KAJjB;IAKFC,aAAa,GAAG,aALd;IAMFC,mBAAmB,GAAG,MANpB;IAOFC,yBAAyB,GAAG,OAP1B;IAQFC,QARE;IASFC,UAAU,GAAG,KATX;IAUFC,+BAVE;IAWFC,WAAW,GAAG,KAXZ;IAYFC,IAAI,GAAG,QAZL;IAaFC,KAbE;IAcFC,OAAO,GAAG,SAdR;IAeFC,oBAfE;IAgBFC;EAhBE,IAiBFjB,KAjBJ;EAmBA,MAAMkB,mBAAmB,GAAG1C,oBAAoB,CAAC;IAAE2C,YAAY,EAAEf;EAAhB,CAAD,CAAhD;EACA,MAAMgB,WAAW,GAAGJ,oBAAoB,IAAIE,mBAA5C;EACA,MAAMG,gBAAgB,GAAGD,WAAW,CAACD,YAArC;EAEA,MAAMG,eAAe,GAAGlD,MAAM,CAACgC,YAAD,CAA9B;EAEA,MAAM;IAAEmB,SAAS,EAAEC;EAAb,IAAgCvC,YAAY,CAAC8B,OAAD,EAAUF,IAAV,CAAlD;;EAEA,MAAMY,MAAM,GAAIC,QAAD,IAAsB;IACjC,MAAMC,YAAY,GAAGL,eAAe,CAACM,OAArC;IACAX,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGS,QAAH,EAAaC,YAAb,CAAb;IAEAP,WAAW,CAACS,aAAZ,CAA0BC,QAA1B,CAAmCJ,QAAnC;EACH,CALD;;EAOAxD,mBAAmB,CACf+B,GADe,EAEf,OAAO;IACHwB;EADG,CAAP,CAFe,EAKf,CAACL,WAAD,CALe,CAAnB;EAQA,MAAMW,MAAM,GAAG7C,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAGZ,QAAQ,EAAtB;EAEA,MAAM,CAACyD,gBAAD,EAAmBC,gBAAnB,IAAuCrD,iBAAiB,CAACsB,QAAD,CAA9D;EACA,MAAM,CAACgC,sBAAD,EAAyBC,wBAAzB,IAAqDtD,wBAAwB,CAACqB,QAAD,CAAnF;EAEA,MAAMkC,kBAAkB,GAAG9B,aAAa,KAAK,aAAlB,GACrBtB,4BAA4B,CAACkD,sBAAD,EAAyBhC,QAAzB,CADP,GAErBlB,4BAA4B,CAACgD,gBAAD,EAAmB9B,QAAnB,CAFlC;EAIA,MAAMmC,UAAU,GAAGvD,aAAa,CAACsC,WAAD,CAAhC;EAEA,MAAMkB,WAAW,GAAGnE,OAAO,CAAC,MAAM;IAC9B,IAAI6D,gBAAgB,CAACO,MAAjB,KAA4B,CAAhC,EAAmC;MAC/B,OAAO,EAAP;IACH;;IAED,IAAIjC,aAAa,KAAK,aAAtB,EAAqC;MACjC,OAAO0B,gBAAP;IACH;;IAED,OAAOE,sBAAsB,CAACM,GAAvB,CAA2B,CAACC,iBAAD,EAAoBC,GAApB,KAA4B;MAC1D,MAAM;QAAEC,EAAE,EAAEC,OAAN;QAAeC,EAAE,EAAEC;MAAnB,IAA+Bd,gBAAgB,CAACU,GAAD,CAArD;MAEA,MAAMK,QAAQ,GAAGD,OAAO,GAAGF,OAA3B;MACA,MAAMI,kBAAkB,GAAG,CAACD,QAAQ,GAAGN,iBAAZ,IAAiC,CAA5D;MACA,MAAMQ,wBAAwB,GAAGL,OAAO,GAAGI,kBAA3C;MAEA,OAAO;QACHL,EAAE,EAAEM,wBADD;QAEHJ,EAAE,EAAEI,wBAAwB,GAAGR;MAF5B,CAAP;IAIH,CAXM,CAAP;EAYH,CArB0B,EAqBxB,CAACT,gBAAD,EAAmBE,sBAAnB,CArBwB,CAA3B;EAuBAjE,SAAS,CAAC,MAAM;IACZ,OAAOoE,UAAU,CAACa,SAAX,CAAqBxB,QAAQ,IAAI;MACpCjB,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGiB,QAAH,CAAR;MACAJ,eAAe,CAACM,OAAhB,GAA0BF,QAA1B;IACH,CAHM,CAAP;EAIH,CALQ,EAKN,CAACW,UAAD,EAAa5B,QAAb,CALM,CAAT;EAOA,MAAM0C,WAAW,0BAAGrF,KAAK,CAACsF,QAAN,CAAeZ,GAAf,CAAmBtC,QAAnB,EAA6B,CAACmD,KAAD,EAAQC,KAAR,KAAkB;IAC/D,IAAI,CAACD,KAAL,EAAY;MACR,OAAO,IAAP;IACH;;IAED,MAAME,gBAAgB,GAAIC,KAAD,IAA8B;MACnD,MAAM;QAAEC;MAAF,IAAYD,KAAK,CAACE,WAAN,CAAkBC,MAApC;MAEAxB,wBAAwB,CAACmB,KAAD,EAAQG,KAAR,CAAxB;IACH,CAJD;;IAMA,MAAMG,QAAQ,GAAIJ,KAAD,IAA8B;MAAA;;MAC3C,MAAM;QAAEK,CAAF;QAAKJ;MAAL,IAAeD,KAAK,CAACE,WAAN,CAAkBC,MAAvC;MAEA1B,gBAAgB,CAACqB,KAAD,EAAQO,CAAR,EAAWJ,KAAX,CAAhB,CAH2C,CAK3C;;MACA,yCAAAJ,KAAK,CAACrD,KAAN,EAAY4D,QAAZ,mGAAuBJ,KAAvB;IACH,CAPD;;IASA,MAAMM,WAAW,GAAIC,CAAD,IAA8B;MAC9C,IAAIvD,yBAAyB,KAAK,QAAlC,EAA4C;QACxCuD,CAAC,CAACC,cAAF;MACH;IACJ,CAJD;;IAMA,MAAMC,OAAO,GAAG,MAAM;MAAA;;MAClBxC,MAAM,CAAC6B,KAAD,CAAN,CADkB,CAGlB;;MACA,yCAAAD,KAAK,CAACrD,KAAN,EAAYiE,OAAZ;IACH,CALD,CA1B+D,CAiC/D;;;IACA,MAAMC,UAAU,gBAAGnG,YAAY,CAACsF,KAAD,EAAQ;MACnCc,eAAe,EAAE,CAAC9D,gBAAD,IAAqB,CAAC+B,kBADJ;MAEnCmB,gBAFmC;MAGnCK,QAHmC;MAInCK,OAJmC;MAKnCH,WALmC;MAMnCjD,IANmC;MAOnCE,OAPmC;MAQnCT,aARmC;MASnCQ,KAAK,EAAEJ,UAAU,GAAG0D,SAAH,GAAerC,MAAM,CAACxC;IATJ,CAAR,CAA/B;IAYA,oBACI,oBAAC,aAAD;MACI,QAAQ,EAAE2E,UADd;MAEI,KAAK,EAAEZ,KAFX;MAGI,YAAY,EAAEjC;IAHlB,EADJ;EAOH,CArDmB,CAAH,wDAAG,oBAqDhBgD,MArDgB,CAqDTC,OArDS,CAApB;EAuDA,MAAMC,YAAY,GAAGnC,kBAAkB,gBACnC,oBAAC,YAAD;IACI,WAAW,EAAEE,WADjB;IAEI,QAAQ,EAAEjC,gBAFd;IAGI,YAAY,EAAEgB;EAHlB,EADmC,GAMnC,IANJ;EAQA,MAAMmD,kBAA6C,GAAG;IAClDC,OAAO,EAAEtF,KAAK,CAACQ,OAAN,CAAc+E,UAAd,CAAyB7E,IADgB;IAElD8E,GAAG,EAAExF,KAAK,CAACQ,OAAN,CAAc+E,UAAd,CAAyBC;EAFoB,CAAtD;EAKA,oBACI,oBAAC,eAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE;MAAEtC;IAAF;EAAjC,gBACI,oBAAC,IAAD;IACI,KAAK,EAAE/D,GAAG,CAAC,CACPyD,MAAM,CAAC3C,IADA,EAEPoC,cAFO,EAGP;MAAEoD,eAAe,EAAEJ,kBAAkB,CAACrE,KAAD;IAArC,CAHO,EAIPS,WAAW,GAAGmB,MAAM,CAACtC,aAAV,GAA0B2E,SAJ9B,EAKP1D,UAAU,GAAG0D,SAAH,GAAerC,MAAM,CAAC1C,SALzB,EAMPyB,KANO,CAAD;EADd,GAUKJ,UAAU,gBACP,oBAAC,kBAAD;IACI,gCAAgC,EAAE,KADtC;IAEI,OAAO,EAAE,KAFb;IAGI,qBAAqB,EAAEpC,GAAG,CAAC,CACvBqC,+BADuB,CAAD,CAH9B;IAMI,WAAW,EAAE2B,WANjB;IAOI,sBAAsB,EAAE,IAP5B;IAQI,UAAU,EAAE,IARhB;IASI,YAAY,EAAEjB,gBATlB;IAUI,YAAY,EAAE,KAVlB;IAWI,8BAA8B,EAAE,KAXpC;IAYI,4BAA4B,EAAE,KAZlC;IAaI,mBAAmB,EAAEd,mBAbzB;IAcI,yBAAyB,EAAEC;EAd/B,GAgBK2C,WAhBL,EAiBKoB,YAjBL,CADO,gBAqBP,oBAAC,KAAD,CAAO,QAAP,QACKpB,WADL,EAEKoB,YAFL,CA/BR,CADJ,CADJ;AAyCH,CAnMsB,CAAvB;AAqMA,eAAexE,IAAf"}

package/build/module/Tabs/TabsProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["tabsColors","tabIndicatorSizes"],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabVariant } from '../Tab';\nimport type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport const tabsColors = ['default', 'alt'] as const;\nexport type TabsColor = typeof tabsColors[number];\n\nexport const tabIndicatorSizes = ['fit-content', 'full'] as const;\nexport type TabIndicatorSize = typeof tabIndicatorSizes[number];\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'default'\n     */\n    color?: TabsColor;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'fit-content'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * These styles will be applied to the scroll view content container which wraps all of the child views.\n     */\n    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines whether to display the bottom border.\n     * @default false\n     */\n    showDivider?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":"AAMA,OAAO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,KAAZ,CAAnB;AAGP,OAAO,MAAMC,iBAAiB,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAA1B"}
+{"version":3,"names":["tabsColors","tabIndicatorSizes"],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabSize, TabVariant } from '../Tab';\nimport type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport const tabsColors = ['default', 'alt'] as const;\nexport type TabsColor = typeof tabsColors[number];\n\nexport const tabIndicatorSizes = ['fit-content', 'full'] as const;\nexport type TabIndicatorSize = typeof tabIndicatorSizes[number];\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'default'\n     */\n    color?: TabsColor;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'fit-content'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * These styles will be applied to the scroll view content container which wraps all of the child views.\n     */\n    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines whether to display the bottom border.\n     * @default false\n     */\n    showDivider?: boolean;\n\n    /**\n     * The size of the Tab.\n     * @default 'medium'\n     */\n    size?: TabSize;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":"AAMA,OAAO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,KAAZ,CAAnB;AAGP,OAAO,MAAMC,iBAAiB,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAA1B"}

package/build/module/Tabs/useTabsStyle.js

@@ -1,16 +1,24 @@
 import { useMemo } from 'react';
 import { useBreakpointUp } from '../hooks';
 import { useTheme } from '../styles';
-export default function useTabsStyle(variant) {
+export default function useTabsStyle(variant, size) {
   const theme = useTheme();
-  const isDesktop = useBreakpointUp('md', true, false);
+  const isTablet = useBreakpointUp('md', true, false);
   return useMemo(() => {
     switch (variant) {
       case 'circular':
         return {
           container: {
             paddingBottom: 8,
-            paddingHorizontal: isDesktop ? 20 : 12
+            paddingHorizontal: isTablet ? 20 : size === 'small' ? 8 : 12
+          }
+        };
+
+      case 'circular-home':
+        return {
+          container: {
+            paddingBottom: 8,
+            paddingHorizontal: isTablet ? 20 : 8
           }
         };
 
@@ -18,7 +26,8 @@ export default function useTabsStyle(variant) {
         return {
           container: {
             borderTopColor: theme.palette.border.base,
-            borderTopWidth: 0.5
+            borderTopWidth: 0.5,
+            paddingHorizontal: 20
           }
         };
 
@@ -26,10 +35,10 @@ export default function useTabsStyle(variant) {
       default:
         return {
           container: {
-            paddingHorizontal: isDesktop ? 14 : 6
+            paddingHorizontal: isTablet ? 14 : 6
           }
         };
     }
-  }, [theme, variant, isDesktop]);
+  }, [theme, variant, isTablet, size]);
 }
 //# sourceMappingURL=useTabsStyle.js.map

package/build/module/Tabs/useTabsStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","theme","isDesktop","container","paddingBottom","paddingHorizontal","borderTopColor","palette","border","base","borderTopWidth"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: isDesktop ? 20 : 12,\n                    },\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        borderTopColor: theme.palette.border.base,\n                        borderTopWidth: 0.5,\n                    },\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: isDesktop ? 14 : 6,\n                    },\n                };\n        }\n    }, [theme, variant, isDesktop]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAMI,SAAS,GAAGL,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAjC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,SAAS,GAAG,EAAH,GAAQ;UAF7B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHC,SAAS,EAAE;YACPG,cAAc,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE;UAFT;QADR,CAAP;;MAMJ,KAAK,SAAL;MACA;QACI,OAAO;UACHP,SAAS,EAAE;YACPE,iBAAiB,EAAEH,SAAS,GAAG,EAAH,GAAQ;UAD7B;QADR,CAAP;IAjBR;EAuBH,CAxBa,EAwBX,CAACD,KAAD,EAAQD,OAAR,EAAiBE,SAAjB,CAxBW,CAAd;AAyBH"}
+{"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","size","theme","isTablet","container","paddingBottom","paddingHorizontal","borderTopColor","palette","border","base","borderTopWidth"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize) {\n    const theme = useTheme();\n\n    const isTablet = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: isTablet ? 20 : (size === 'small' ? 8 : 12),\n                    },\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: isTablet ? 20 : 8,\n                    },\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        borderTopColor: theme.palette.border.base,\n                        borderTopWidth: 0.5,\n                        paddingHorizontal: 20,\n                    },\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: isTablet ? 14 : 6,\n                    },\n                };\n        }\n    }, [theme, variant, isTablet, size]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0D;EACrE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,MAAMK,QAAQ,GAAGN,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAhC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHI,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAASF,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB;UAFpD;QADR,CAAP;;MAMJ,KAAK,eAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAAQ;UAF5B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHC,SAAS,EAAE;YACPG,cAAc,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE,GAFT;YAGPL,iBAAiB,EAAE;UAHZ;QADR,CAAP;;MAOJ,KAAK,SAAL;MACA;QACI,OAAO;UACHF,SAAS,EAAE;YACPE,iBAAiB,EAAEH,QAAQ,GAAG,EAAH,GAAQ;UAD5B;QADR,CAAP;IAzBR;EA+BH,CAhCa,EAgCX,CAACD,KAAD,EAAQF,OAAR,EAAiBG,QAAjB,EAA2BF,IAA3B,CAhCW,CAAd;AAiCH"}

package/build/typescript/Tab/TabProps.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
+export declare const tabSizes: readonly ["small", "medium"];
+export declare type TabSize = typeof tabSizes[number];
 export declare const tabVariants: readonly ["default", "circular", "circular-home", "bottom-navigation"];
 export declare type TabVariant = typeof tabVariants[number];
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
@@ -32,6 +34,11 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * If supplied, use this icon on selected state.
      */
     selectedIcon?: React.ReactElement;
+    /**
+     * The size of the Tab.
+     * @default 'medium'
+     */
+    size?: TabSize;
     /**
      * The variant to use.
      * @default 'default'

package/build/typescript/Tab/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Tab';
-export type { default as TabProps, TabVariant } from './TabProps';
+export type { default as TabProps, TabSize, TabVariant } from './TabProps';
+export { tabSizes, tabVariants } from './TabProps';

package/build/typescript/Tab/useVariantStyleMap.d.ts

@@ -1,10 +1,10 @@
 import { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
-import type { TabVariant } from './TabProps';
+import type { TabSize, TabVariant } from './TabProps';
 interface VariantStyle {
     container: FountainUiStyle;
     inner?: FountainUiStyle;
     label: TextStyle;
 }
-export default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle;
+export default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle;
 export {};

package/build/typescript/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type TabsProps from './TabsProps';
 import type { TabsInstance } from './types';
-declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "color" | "testID" | "style" | "onLayout" | "keyboardDismissMode" | "children" | "pointerEvents" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "accessibilityLabel" | "accessible" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessibilityActions" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onChange" | "variant" | "keyboardShouldPersistTaps" | "disableIndicator" | "indicatorSize" | "initialIndex" | "scrollable" | "scrollViewContentContainerStyle" | "showDivider" | "UNSTABLE_sharedIndex" | "onTabSelected"> & React.RefAttributes<TabsInstance>>;
+declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "color" | "testID" | "style" | "onLayout" | "keyboardDismissMode" | "children" | "pointerEvents" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "accessibilityLabel" | "accessible" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessibilityActions" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "size" | "onChange" | "variant" | "keyboardShouldPersistTaps" | "disableIndicator" | "indicatorSize" | "initialIndex" | "scrollable" | "scrollViewContentContainerStyle" | "showDivider" | "UNSTABLE_sharedIndex" | "onTabSelected"> & React.RefAttributes<TabsInstance>>;
 export default Tabs;

package/build/typescript/Tabs/TabsProps.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import type { TabVariant } from '../Tab';
+import type { TabSize, TabVariant } from '../Tab';
 import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 export declare const tabsColors: readonly ["default", "alt"];
@@ -63,6 +63,11 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     showDivider?: boolean;
+    /**
+     * The size of the Tab.
+     * @default 'medium'
+     */
+    size?: TabSize;
     /**
      * Unstable API.
      */

package/build/typescript/Tabs/useTabsStyle.d.ts

@@ -1,7 +1,7 @@
 import type { FountainUiStyle } from '@fountain-ui/styles';
-import type { TabVariant } from '../Tab';
+import type { TabSize, TabVariant } from '../Tab';
 interface TabsStyle {
     container: FountainUiStyle;
 }
-export default function useTabsStyle(variant: TabVariant): TabsStyle;
+export default function useTabsStyle(variant: TabVariant, size: TabSize): TabsStyle;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.15",
+  "version": "3.0.0-alpha.17",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f8f3251647c5c4742bfbefff5aeba7fb2a076c55"
+  "gitHead": "a1cc03c803e63c95ee74237ffe7f809428ff0116"
 }

package/src/Tab/Tab.tsx

@@ -5,7 +5,7 @@ import TabBase from '../TabBase';
 import { css, StyleSheet } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type TabProps from './TabProps';
-import type { TabVariant } from './TabProps';
+import type { TabSize, TabVariant } from './TabProps';
 import useVariantStyleMap from './useVariantStyleMap';
 
 const styles = StyleSheet.create({
@@ -27,6 +27,7 @@ export default function Tab(props: TabProps) {
         icon: defaultIcon,
         selected = false,
         selectedIcon,
+        size = 'medium' as TabSize,
         variant = 'default' as TabVariant,
         style: styleProp,
         onTabInnerLayout,
@@ -37,7 +38,7 @@ export default function Tab(props: TabProps) {
         container: containerStyle,
         inner: innerStyle,
         label: labelStyle,
-    } = useVariantStyleMap(variant, selected);
+    } = useVariantStyleMap(variant, selected, size);
 
     const tabBaseStyle = css([
         styles.root,

package/src/Tab/TabProps.ts

@@ -3,6 +3,9 @@ import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
+export const tabSizes = ['small', 'medium'] as const;
+export type TabSize = typeof tabSizes[number];
+
 export const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;
 export type TabVariant = typeof tabVariants[number];
 
@@ -40,6 +43,12 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     selectedIcon?: React.ReactElement;
 
+    /**
+     * The size of the Tab.
+     * @default 'medium'
+     */
+    size?: TabSize;
+
     /**
      * The variant to use.
      * @default 'default'

package/src/Tab/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Tab';
-export type { default as TabProps, TabVariant } from './TabProps';
+export type { default as TabProps, TabSize, TabVariant } from './TabProps';
+export { tabSizes, tabVariants } from './TabProps';

package/src/Tab/useVariantStyleMap.ts

@@ -3,7 +3,7 @@ import { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
-import type { TabVariant } from './TabProps';
+import type { TabSize, TabVariant } from './TabProps';
 
 interface VariantStyle {
     container: FountainUiStyle;
@@ -11,7 +11,7 @@ interface VariantStyle {
     label: TextStyle;
 }
 
-export default function useVariantStyleMap(variant: TabVariant, selected: boolean): VariantStyle {
+export default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {
     const theme = useTheme();
 
     return useMemo<VariantStyle>(() => {
@@ -29,13 +29,14 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         borderRadius: theme.shape.radius.full,
                         flexDirection: 'row',
                         gap: 5,
-                        paddingHorizontal: theme.spacing(3.5),
-                        paddingVertical: theme.spacing(1.75),
+                        paddingBottom: 7.5,
+                        paddingHorizontal: 14,
+                        paddingTop: 6.5,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 14,
-                            lineHeight: 18.2,
+                            fontSize: size === 'small' ? 14 : 15,
+                            lineHeight: size === 'small' ? 18.2 : 19.5,
                             fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
@@ -47,18 +48,21 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
             case 'circular-home':
                 return {
                     container: {
-                        paddingHorizontal: theme.spacing(0.75),
-                        paddingVertical: theme.spacing(1),
+                        paddingBottom: 4,
+                        paddingHorizontal: 3,
                     },
                     inner: {
                         backgroundColor: selected
                             ? theme.palette.fill.base
                             : theme.palette.surface.base,
                         borderRadius: theme.shape.radius.full,
+                        borderWidth: selected ? undefined : 0.5,
+                        borderColor: selected ? undefined : theme.palette.border.weak,
                         flexDirection: 'row',
                         gap: 5,
+                        paddingBottom: 6.5,
                         paddingHorizontal: 14,
-                        paddingVertical: 8.5,
+                        paddingVertical: 7.5,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
@@ -78,7 +82,7 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         alignItems: 'center',
                         height: 49,
                         justifyContent: 'flex-start',
-                        paddingTop: theme.spacing(2.625),
+                        paddingTop: 10.5,
                         width: 48,
                     },
                     inner: {
@@ -101,16 +105,18 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
             default:
                 return {
                     container: {
-                        padding: theme.spacing(2.5),
+                        paddingHorizontal: 10,
                     },
                     inner: {
                         flexDirection: 'row',
                         gap: 5,
+                        paddingHorizontal: 1,
+                        paddingVertical: 10,
                     },
                     label: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 18.75,
+                            fontSize: size === 'small' ? 15 : 16,
+                            lineHeight: size === 'small' ? 18.75 : 20,
                             fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
                             letterSpacing: 0,
                         }),
@@ -120,5 +126,5 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                     }),
                 };
         }
-    }, [theme, variant, selected]);
+    }, [theme, variant, selected, size]);
 }

package/src/Tabs/Tabs.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import { useSyncAnimatedValue } from '../hooks';
-import type { TabVariant } from '../Tab';
+import type { TabSize, TabVariant } from '../Tab';
 import type TabsProps from './TabsProps';
 import type { TabsColor } from './TabsProps';
 import type { TabsInstance } from './types';
@@ -22,7 +22,6 @@ type TabsStyleKeys =
     | 'root'
     | 'fixedRoot'
     | 'fixedTab'
-    | 'scrollableContainer'
     | 'bottomDivider';
 
 type TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;
@@ -38,9 +37,6 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
         fixedTab: {
             flex: 1,
         },
-        scrollableContainer: {
-            paddingHorizontal: theme.spacing(1),
-        },
         bottomDivider: {
             borderBottomColor: theme.palette.border.base,
             borderBottomWidth: 0.5,
@@ -61,6 +57,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         scrollable = false,
         scrollViewContentContainerStyle,
         showDivider = false,
+        size = 'medium' as TabSize,
         style,
         variant = 'default' as TabVariant,
         UNSTABLE_sharedIndex,
@@ -73,7 +70,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const currentIndexRef = useRef(initialIndex);
 
-    const { container: containerStyle } = useTabsStyle(variant);
+    const { container: containerStyle } = useTabsStyle(variant, size);
 
     const setTab = (newIndex: number) => {
         const currentIndex = currentIndexRef.current;
@@ -173,6 +170,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             onLayout,
             onPress,
             onMouseDown,
+            size,
             variant,
             indicatorSize,
             style: scrollable ? undefined : styles.fixedTab,
@@ -217,7 +215,6 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                         automaticallyAdjustContentInsets={false}
                         bounces={false}
                         contentContainerStyle={css([
-                            styles.scrollableContainer,
                             scrollViewContentContainerStyle,
                         ])}
                         coordinates={coordinates}

package/src/Tabs/TabsProps.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import type { TabVariant } from '../Tab';
+import type { TabSize, TabVariant } from '../Tab';
 import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 
@@ -78,6 +78,12 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     showDivider?: boolean;
 
+    /**
+     * The size of the Tab.
+     * @default 'medium'
+     */
+    size?: TabSize;
+
     /**
      * Unstable API.
      */