@fountain-ui/core 3.0.0-alpha.5 → 3.0.0-alpha.50

package/build/commonjs/Tab/useVariantStyleMap.js

@@ -11,7 +11,7 @@ var _styles = require("@fountain-ui/styles");
 
 var _styles2 = require("../styles");
 
-function useVariantStyleMap(variant, selected) {
+function useVariantStyleMap(variant, selected, size, parentColor) {
   const theme = (0, _styles2.useTheme)();
   return (0, _react.useMemo)(() => {
     switch (variant) {
@@ -22,19 +22,50 @@ function useVariantStyleMap(variant, selected) {
             paddingVertical: theme.spacing(1)
           },
           inner: {
-            backgroundColor: selected ? theme.palette.fill.base : theme.palette.fill.weaker,
+            backgroundColor: selected ? theme.palette.fill.base : parentColor === 'alt' ? theme.palette.surface.base : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
-            paddingHorizontal: theme.spacing(4),
-            paddingVertical: theme.spacing(1.75)
+            flexDirection: 'row',
+            gap: 5,
+            paddingBottom: 7.5,
+            paddingHorizontal: 14,
+            paddingTop: 6.5
+          },
+          label: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: size === 'small' ? 14 : 15,
+              lineHeight: size === 'small' ? 18.2 : 19.5,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: 0
+            }),
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
+          })
+        };
+
+      case 'circular-home':
+        return {
+          container: {
+            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: 7.5,
+            paddingHorizontal: 14,
+            paddingTop: 6.5
           },
           label: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
               fontSize: 14,
               lineHeight: 18.2,
-              fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
-              letterSpacing: 0
+              fontFamily: 'LexendDeca-Medium',
+              letterSpacing: -0.28
             }),
-            color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
           })
         };
 
@@ -44,15 +75,19 @@ function useVariantStyleMap(variant, selected) {
             alignItems: 'center',
             height: 49,
             justifyContent: 'flex-start',
-            paddingTop: theme.spacing(2.625),
-            width: 48
+            maxWidth: 64,
+            paddingTop: 10
+          },
+          inner: {
+            flexDirection: 'column',
+            gap: 5
           },
           label: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
-              fontSize: 10,
-              lineHeight: 10,
+              fontSize: 10.5,
+              lineHeight: 10.5,
               fontFamily: 'PretendardStd-Medium',
-              letterSpacing: -0.1
+              letterSpacing: -0.105
             }),
             color: selected ? theme.palette.text.strong : theme.palette.text.base
           })
@@ -62,12 +97,18 @@ function useVariantStyleMap(variant, selected) {
       default:
         return {
           container: {
-            padding: theme.spacing(2.5)
+            paddingHorizontal: 10
+          },
+          inner: {
+            flexDirection: 'row',
+            gap: 5,
+            paddingHorizontal: 1,
+            paddingVertical: 10
           },
           label: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.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
             }),
@@ -75,6 +116,6 @@ function useVariantStyleMap(variant, selected) {
           })
         };
     }
-  }, [theme, variant, selected]);
+  }, [theme, variant, selected, size, parentColor]);
 }
 //# sourceMappingURL=useVariantStyleMap.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useVariantStyleMap","variant","selected","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","strong","alignItems","height","justifyContent","paddingTop","width","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                        paddingHorizontal: theme.spacing(4),\n                        paddingVertical: theme.spacing(1.75),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.strong,\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                    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                    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":";;;;;;;AAAA;;AAGA;;AACA;;AASe,SAASA,kBAAT,CAA4BC,OAA5B,EAAiDC,QAAjD,EAAkF;EAC7F,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAsB,MAAM;IAC/B,QAAQJ,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHK,SAAS,EAAE;YACPC,iBAAiB,EAAEJ,KAAK,CAACK,OAAN,CAAc,IAAd,CADZ;YAEPC,eAAe,EAAEN,KAAK,CAACK,OAAN,CAAc,CAAd;UAFV,CADR;UAKHE,KAAK,EAAE;YACHC,eAAe,EAAET,QAAQ,GACnBC,KAAK,CAACS,OAAN,CAAcC,IAAd,CAAmBC,IADA,GAEnBX,KAAK,CAACS,OAAN,CAAcC,IAAd,CAAmBE,MAHtB;YAIHC,YAAY,EAAEb,KAAK,CAACc,KAAN,CAAYC,MAAZ,CAAmBC,IAJ9B;YAKHZ,iBAAiB,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CALhB;YAMHC,eAAe,EAAEN,KAAK,CAACK,OAAN,CAAc,IAAd;UANd,CALJ;UAaHY,KAAK,EAAE,IAAAC,wBAAA,EAAgBlB,KAAhB,EAAuB;YAC1BmB,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAEzB,QAAQ,GAAG,wBAAH,GAA8B,sBAHxB;cAI1B0B,aAAa,EAAE;YAJW,CAAb,CADS;YAO1BC,KAAK,EAAE3B,QAAQ,GACTC,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBC,aADV,GAET5B,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBE;UATC,CAAvB;QAbJ,CAAP;;MAyBJ,KAAK,mBAAL;QACI,OAAO;UACH1B,SAAS,EAAE;YACP2B,UAAU,EAAE,QADL;YAEPC,MAAM,EAAE,EAFD;YAGPC,cAAc,EAAE,YAHT;YAIPC,UAAU,EAAEjC,KAAK,CAACK,OAAN,CAAc,KAAd,CAJL;YAKP6B,KAAK,EAAE;UALA,CADR;UAQHjB,KAAK,EAAE,IAAAC,wBAAA,EAAgBlB,KAAhB,EAAuB;YAC1BmB,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,EAFc;cAG1BC,UAAU,EAAE,sBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAb,CADS;YAO1BC,KAAK,EAAE3B,QAAQ,GACTC,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBE,MADV,GAET7B,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBhB;UATC,CAAvB;QARJ,CAAP;;MAoBJ,KAAK,SAAL;MACA;QACI,OAAO;UACHR,SAAS,EAAE;YACPgC,OAAO,EAAEnC,KAAK,CAACK,OAAN,CAAc,GAAd;UADF,CADR;UAIHY,KAAK,EAAE,IAAAC,wBAAA,EAAgBlB,KAAhB,EAAuB;YAC1BmB,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,KAFc;cAG1BC,UAAU,EAAEzB,QAAQ,GAAG,wBAAH,GAA8B,sBAHxB;cAI1B0B,aAAa,EAAE;YAJW,CAAb,CADS;YAO1BC,KAAK,EAAE3B,QAAQ,GACTC,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBE,MADV,GAET7B,KAAK,CAACS,OAAN,CAAckB,IAAd,CAAmBhB;UATC,CAAvB;QAJJ,CAAP;IAlDR;EAmEH,CApEM,EAoEJ,CAACX,KAAD,EAAQF,OAAR,EAAiBC,QAAjB,CApEI,CAAP;AAqEH"}
+{"version":3,"names":["useVariantStyleMap","variant","selected","size","parentColor","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","maxWidth","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 type { TabsColor } from '../Tabs';\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(\n    variant: TabVariant,\n    selected: boolean,\n    size: TabSize,\n    parentColor: TabsColor,\n): 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                            : parentColor === 'alt'\n                                ? theme.palette.surface.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                        maxWidth: 64,\n                        paddingTop: 10,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 5,\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, parentColor]);\n}\n"],"mappings":"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"}

package/build/commonjs/TabBase/TabBase.js

@@ -20,12 +20,6 @@ const useStyles = function () {
     root: {
       alignItems: 'center',
       justifyContent: 'center'
-    },
-    row: {
-      flexDirection: 'row'
-    },
-    column: {
-      flexDirection: 'column'
     }
   };
 };
@@ -36,7 +30,6 @@ function TabBase(props) {
     disabled = false,
     onPress,
     selected = false,
-    vertical = false,
     style,
     ...otherProps
   } = props;
@@ -44,7 +37,7 @@ function TabBase(props) {
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
     onPress: onPress,
     disabled: disabled,
-    style: (0, _styles.css)([styles.root, vertical ? styles.column : styles.row, style])
+    style: (0, _styles.css)([styles.root, style])
   }, otherProps), children);
 }
 

package/build/commonjs/TabBase/TabBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","root","alignItems","justifyContent","row","flexDirection","column","TabBase","props","children","disabled","onPress","selected","vertical","style","otherProps","styles","css"],"sources":["TabBase.tsx"],"sourcesContent":["import React from 'react';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport type TabBaseProps from './TabBaseProps';\n\ntype TabBaseStyles = NamedStylesStringUnion<'root' | 'row' | 'column'>;\n\nconst useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n        row: {\n            flexDirection: 'row',\n        },\n        column: {\n            flexDirection: 'column',\n        },\n    };\n};\n\nexport default function TabBase(props: TabBaseProps) {\n    const {\n        children,\n        disabled = false,\n        onPress,\n        selected = false,\n        vertical = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            disabled={disabled}\n            style={css([\n                styles.root,\n                vertical ? styles.column : styles.row,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {children}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd,CADH;IAKHC,GAAG,EAAE;MACDC,aAAa,EAAE;IADd,CALF;IAQHC,MAAM,EAAE;MACJD,aAAa,EAAE;IADX;EARL,CAAP;AAYH,CAbD;;AAee,SAASE,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,OAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,QAAQ,GAAG,KALT;IAMFC,KANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGhB,SAAS,EAAxB;EAEA,oBACI,6BAAC,mBAAD;IACI,OAAO,EAAEW,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAE,IAAAO,WAAA,EAAI,CACPD,MAAM,CAACf,IADA,EAEPY,QAAQ,GAAGG,MAAM,CAACV,MAAV,GAAmBU,MAAM,CAACZ,GAF3B,EAGPU,KAHO,CAAJ;EAHX,GAQQC,UARR,GAUKN,QAVL,CADJ;AAcH;;AAAA"}
+{"version":3,"names":["useStyles","root","alignItems","justifyContent","TabBase","props","children","disabled","onPress","selected","style","otherProps","styles","css"],"sources":["TabBase.tsx"],"sourcesContent":["import React from 'react';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport type TabBaseProps from './TabBaseProps';\n\ntype TabBaseStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<TabBaseStyles> = function (): TabBaseStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function TabBase(props: TabBaseProps) {\n    const {\n        children,\n        disabled = false,\n        onPress,\n        selected = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            disabled={disabled}\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {children}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,OAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFN,KAPJ;EASA,MAAMO,MAAM,GAAGZ,SAAS,EAAxB;EAEA,oBACI,6BAAC,mBAAD;IACI,OAAO,EAAEQ,OADb;IAEI,QAAQ,EAAED,QAFd;IAGI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPD,MAAM,CAACX,IADA,EAEPS,KAFO,CAAJ;EAHX,GAOQC,UAPR,GASKL,QATL,CADJ;AAaH;;AAAA"}

package/build/commonjs/TabBase/TabBaseProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabBaseProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport default interface TabBaseProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Content of the TabBase.\n     */\n    children: React.ReactNode;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Orientation of the TabBase. Default is horizontal.\n     * @default false\n     */\n    vertical?: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabBaseProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport default interface TabBaseProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Content of the TabBase.\n     */\n    children: React.ReactNode;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/Tabs/Tabs.js

@@ -29,6 +29,10 @@ var _InternalContext = _interopRequireDefault(require("./InternalContext"));
 
 var _utils = require("./utils");
 
+var _TabCoordinate = require("./TabCoordinate");
+
+var _useTabsStyle = _interopRequireDefault(require("./useTabsStyle"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -38,17 +42,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
-    root: {},
+    root: {
+      position: 'relative'
+    },
     fixedRoot: {
       flexDirection: 'row'
     },
     fixedTab: {
       flex: 1
     },
-    scrollableContainer: {
-      paddingHorizontal: theme.spacing(1)
-    },
-    bottomDivider: {
+    borderContainer: { ..._reactNative.StyleSheet.absoluteFillObject,
       borderBottomColor: theme.palette.border.base,
       borderBottomWidth: 0.5
     }
@@ -70,6 +73,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     scrollable = false,
     scrollViewContentContainerStyle,
     showDivider = false,
+    size = 'medium',
     style,
     variant = 'default',
     UNSTABLE_sharedIndex,
@@ -81,6 +85,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
   const realInitialIndex = sharedIndex.initialValue;
   const currentIndexRef = (0, _react.useRef)(initialIndex);
+  const {
+    container: containerStyle,
+    contentContainer: contentContainerStyle
+  } = (0, _useTabsStyle.default)(variant, size, scrollable);
 
   const setTab = newIndex => {
     const currentIndex = currentIndexRef.current;
@@ -107,10 +115,16 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     }
 
     return innerContentsWidthList.map((innerContentWidth, idx) => {
+      const outerCoordinate = outerCoordinates[idx];
+
+      if (!outerCoordinate) {
+        return _TabCoordinate.defaultCoordinate;
+      }
+
       const {
         x1: outerX1,
         x2: outerX2
-      } = outerCoordinates[idx];
+      } = outerCoordinate;
       const tabWidth = outerX2 - outerX1;
       const distanceFromParent = (tabWidth - innerContentWidth) / 2;
       const indicatorStartCoordinate = outerX1 + distanceFromParent;
@@ -165,15 +179,19 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     }; // @ts-ignore
 
 
+    const tabStyle = child.props.style; // @ts-ignore
+
     const tabElement = /*#__PURE__*/(0, _react.cloneElement)(child, {
       enableIndicator: !disableIndicator && !canRenderIndicator,
       onTabInnerLayout,
       onLayout,
       onPress,
       onMouseDown,
+      parentColor: color,
+      size,
       variant,
       indicatorSize,
-      style: scrollable ? undefined : styles.fixedTab
+      style: (0, _styles.css)([scrollable ? undefined : styles.fixedTab, tabStyle])
     });
     return /*#__PURE__*/_react.default.createElement(_IndexAwareTab.default, {
       children: tabElement,
@@ -195,13 +213,13 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
       indexStore
     }
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: (0, _styles.css)([styles.root, {
+    style: (0, _styles.css)([styles.root, containerStyle, {
       backgroundColor: backgroundColorMap[color]
-    }, showDivider ? styles.bottomDivider : undefined, scrollable ? undefined : styles.fixedRoot, style])
+    }, scrollable ? undefined : styles.fixedRoot, style])
   }, scrollable ? /*#__PURE__*/_react.default.createElement(_ScrollableTabsView.default, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
-    contentContainerStyle: (0, _styles.css)([styles.scrollableContainer, scrollViewContentContainerStyle]),
+    contentContainerStyle: (0, _styles.css)([contentContainerStyle, scrollViewContentContainerStyle]),
     coordinates: coordinates,
     directionalLockEnabled: true,
     horizontal: true,
@@ -211,7 +229,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     showsVerticalScrollIndicator: false,
     keyboardDismissMode: keyboardDismissMode,
     keyboardShouldPersistTaps: keyboardShouldPersistTaps
-  }, tabElements, tabIndicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElements, tabIndicator)));
+  }, tabElements, tabIndicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElements, tabIndicator), showDivider ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    pointerEvents: 'none',
+    style: styles.borderContainer
+  }) : null));
 });
 var _default = Tabs;
 exports.default = _default;

package/build/commonjs/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","forwardRef","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","currentIndexRef","useRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerContentsWidthList","updateInnerContentsWidth","useTabInnerContentsWidth","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","css","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';\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 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                    { 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":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","position","fixedRoot","flexDirection","fixedTab","flex","borderContainer","StyleSheet","absoluteFillObject","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","forwardRef","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","size","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","currentIndexRef","useRef","container","containerStyle","contentContainer","contentContainerStyle","useTabsStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerContentsWidthList","updateInnerContentsWidth","useTabInnerContentsWidth","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","length","map","innerContentWidth","idx","outerCoordinate","defaultCoordinate","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabStyle","tabElement","cloneElement","enableIndicator","parentColor","css","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 { StyleSheet, 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 { defaultCoordinate } from './TabCoordinate';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'borderContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            position: 'relative',\n        },\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        borderContainer: {\n            ...StyleSheet.absoluteFillObject,\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 {\n        container: containerStyle,\n        contentContainer: contentContainerStyle,\n    } = useTabsStyle(variant, size, scrollable);\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 outerCoordinate = outerCoordinates[idx];\n            if (!outerCoordinate) {\n                return defaultCoordinate;\n            }\n\n            const { x1: outerX1, x2: outerX2 } = outerCoordinate;\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 tabStyle = child.props.style;\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            parentColor: color,\n            size,\n            variant,\n            indicatorSize,\n            style: css([\n                scrollable ? undefined : styles.fixedTab,\n                tabStyle,\n            ]),\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                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={css([\n                            contentContainerStyle,\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\n                {showDivider ? (\n                    <View\n                        pointerEvents={'none'}\n                        style={styles.borderContainer}\n                    />\n                ) : null}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

package/build/commonjs/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":";;;;;;AAMO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,KAAZ,CAAnB;;AAGA,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":";;;;;;AAMO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,KAAZ,CAAnB;;AAGA,MAAMC,iBAAiB,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAA1B"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps } from './TabsProps';\nexport { tabIndicatorSizes, tabsColors } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps, TabIndicatorSize, TabsColor } from './TabsProps';\nexport { tabIndicatorSizes, tabsColors } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

package/build/commonjs/Tabs/useTabsStyle.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTabsStyle;
+
+var _react = require("react");
+
+var _hooks = require("../hooks");
+
+var _styles = require("../styles");
+
+function useTabsStyle(variant, size, scrollable) {
+  const theme = (0, _styles.useTheme)();
+  const isSmallUp = (0, _hooks.useBreakpointUp)('sm', true, false);
+  const isMediumUp = (0, _hooks.useBreakpointUp)('md', true, false);
+  return (0, _react.useMemo)(() => {
+    switch (variant) {
+      case 'circular':
+        {
+          const paddingHorizontal = isSmallUp ? 20 : size === 'small' ? 8 : 12;
+          return {
+            container: {
+              paddingBottom: 8,
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'circular-home':
+        {
+          const paddingHorizontal = isSmallUp ? 20 : 8;
+          return {
+            container: {
+              paddingBottom: 8,
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'bottom-navigation':
+        {
+          const paddingHorizontal = 24;
+          return {
+            container: { ...(isMediumUp ? {
+                alignSelf: 'center',
+                minWidth: 460
+              } : {}),
+              justifyContent: 'space-between',
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'default':
+      default:
+        {
+          const paddingHorizontal = isSmallUp ? 14 : 6;
+          return {
+            container: {
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+    }
+  }, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);
+}
+//# sourceMappingURL=useTabsStyle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useTabsStyle","variant","size","scrollable","theme","useTheme","isSmallUp","useBreakpointUp","isMediumUp","useMemo","paddingHorizontal","container","paddingBottom","contentContainer","alignSelf","minWidth","justifyContent"],"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    contentContainer?: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {\n    const theme = useTheme();\n\n    const isSmallUp = useBreakpointUp('sm', true, false);\n\n    const isMediumUp = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular': {\n                const paddingHorizontal = isSmallUp ? 20 : (size === 'small' ? 8 : 12);\n\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'circular-home': {\n                const paddingHorizontal = isSmallUp ? 20 : 8;\n\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'bottom-navigation': {\n                const paddingHorizontal = 24;\n\n                return {\n                    container: {\n                        ...(isMediumUp ? {\n                            alignSelf: 'center',\n                            minWidth: 460,\n                        } : {}),\n                        justifyContent: 'space-between',\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'default':\n            default: {\n                const paddingHorizontal = isSmallUp ? 14 : 6;\n\n                return {\n                    container: {\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n        }\n    }, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAQe,SAASA,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0DC,UAA1D,EAA+E;EAC1F,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAlB;EAEA,MAAMC,UAAU,GAAG,IAAAD,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAnB;EAEA,OAAO,IAAAE,cAAA,EAAmB,MAAM;IAC5B,QAAQR,OAAR;MACI,KAAK,UAAL;QAAiB;UACb,MAAMS,iBAAiB,GAAGJ,SAAS,GAAG,EAAH,GAASJ,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB,EAAnE;UAEA,OAAO;YACHS,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEP,UAAU,GAAG,CAAH,GAAOO;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEP,UAAU,GAAGO,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,eAAL;QAAsB;UAClB,MAAMA,iBAAiB,GAAGJ,SAAS,GAAG,EAAH,GAAQ,CAA3C;UAEA,OAAO;YACHK,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEP,UAAU,GAAG,CAAH,GAAOO;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEP,UAAU,GAAGO,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,mBAAL;QAA0B;UACtB,MAAMA,iBAAiB,GAAG,EAA1B;UAEA,OAAO;YACHC,SAAS,EAAE,EACP,IAAIH,UAAU,GAAG;gBACbM,SAAS,EAAE,QADE;gBAEbC,QAAQ,EAAE;cAFG,CAAH,GAGV,EAHJ,CADO;cAKPC,cAAc,EAAE,eALT;cAMPN,iBAAiB,EAAEP,UAAU,GAAG,CAAH,GAAOO;YAN7B,CADR;YASHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEP,UAAU,GAAGO,iBAAH,GAAuB;YADtC;UATf,CAAP;QAaH;;MACD,KAAK,SAAL;MACA;QAAS;UACL,MAAMA,iBAAiB,GAAGJ,SAAS,GAAG,EAAH,GAAQ,CAA3C;UAEA,OAAO;YACHK,SAAS,EAAE;cACPD,iBAAiB,EAAEP,UAAU,GAAG,CAAH,GAAOO;YAD7B,CADR;YAIHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEP,UAAU,GAAGO,iBAAH,GAAuB;YADtC;UAJf,CAAP;QAQH;IAxDL;EA0DH,CA3DM,EA2DJ,CAACN,KAAD,EAAQH,OAAR,EAAiBO,UAAjB,EAA6BF,SAA7B,EAAwCJ,IAAxC,EAA8CC,UAA9C,CA3DI,CAAP;AA4DH"}