@fountain-ui/core 3.0.0-alpha.14 → 3.0.0-alpha.16

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

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","iconElement","cloneElementSafely","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = cloneElementSafely(icon);\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-6}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4.5}\n                    >\n                        {iconElement}\n                    </Badge>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,OAAO,GAAG,SAPR;IAQFC,KAAK,EAAEC,SARL;IASFC,gBATE;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAM;IACFa,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF,IAAAC,2BAAA,EAAmBX,OAAnB,EAA4BF,QAA5B,CAJJ;EAMA,MAAMc,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBhC,MAAM,CAACG,IADc,EAErBsB,cAFqB,EAGrBJ,SAHqB,CAAJ,CAArB;EAMA,MAAMY,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBhC,MAAM,CAACO,WADe,EAEtBoB,UAFsB,CAAJ,CAAtB;EAKA,MAAMZ,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMkB,WAAW,GAAG,IAAAC,yBAAA,EAAmBpB,IAAnB,CAApB;EAEA,MAAMqB,UAAU,GAAG,OAAOvB,QAAP,KAAoB,QAApB,GACf,IAAAsB,yBAAA,EAAmBtB,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKiB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACtB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,GAKKsB,WALL,CADJ,eASI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAF,WAAA,EAAIH,UAAJ;EAAb,GACKhB,QADL,CATJ,CADQ,gBAeR,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAoB,WAAA,EAAIH,UAAJ;EAAb,GACKhB,QADL,CALJ,CAhBR,CALJ;EAkCA,oBACI,6BAAC,gBAAD;IACI,KAAK,EAAEkB;EADX,GAEQR,UAFR,gBAII,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEW;EAAzC,GACKG,UADL,CAJJ,CADJ;AAUH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","size","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","iconElement","cloneElementSafely","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabSize, TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        size = 'medium' as TabSize,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected, size);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = cloneElementSafely(icon);\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-6}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4.5}\n                    >\n                        {iconElement}\n                    </Badge>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,IAAI,GAAG,QAPL;IAQFC,OAAO,GAAG,SARR;IASFC,KAAK,EAAEC,SATL;IAUFC,gBAVE;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAM;IACFc,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF,IAAAC,2BAAA,EAAmBX,OAAnB,EAA4BH,QAA5B,EAAsCE,IAAtC,CAJJ;EAMA,MAAMa,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBjC,MAAM,CAACG,IADc,EAErBuB,cAFqB,EAGrBJ,SAHqB,CAAJ,CAArB;EAMA,MAAMY,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBjC,MAAM,CAACO,WADe,EAEtBqB,UAFsB,CAAJ,CAAtB;EAKA,MAAMb,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMmB,WAAW,GAAG,IAAAC,yBAAA,EAAmBrB,IAAnB,CAApB;EAEA,MAAMsB,UAAU,GAAG,OAAOxB,QAAP,KAAoB,QAApB,GACf,IAAAuB,yBAAA,EAAmBvB,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKkB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACvB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,GAKKuB,WALL,CADJ,eASI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAF,WAAA,EAAIH,UAAJ;EAAb,GACKjB,QADL,CATJ,CADQ,gBAeR,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAqB,WAAA,EAAIH,UAAJ;EAAb,GACKjB,QADL,CALJ,CAhBR,CALJ;EAkCA,oBACI,6BAAC,gBAAD;IACI,KAAK,EAAEmB;EADX,GAEQR,UAFR,gBAII,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEW;EAAzC,GACKG,UADL,CAJJ,CADJ;AAUH;;AAAA"}

package/build/commonjs/Tab/TabProps.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabVariants = void 0;
+exports.tabVariants = exports.tabSizes = void 0;
+const tabSizes = ['small', 'medium'];
+exports.tabSizes = tabSizes;
 const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'];
 exports.tabVariants = tabVariants;
 //# sourceMappingURL=TabProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'default'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,eAAxB,EAAyC,mBAAzC,CAApB"}
+{"version":3,"names":["tabSizes","tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const tabSizes = ['small', 'medium'] as const;\nexport type TabSize = typeof tabSizes[number];\n\nexport const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The size of the Tab.\n     * @default 'medium'\n     */\n    size?: TabSize;\n\n    /**\n     * The variant to use.\n     * @default 'default'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,QAAQ,GAAG,CAAC,OAAD,EAAU,QAAV,CAAjB;;AAGA,MAAMC,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,eAAxB,EAAyC,mBAAzC,CAApB"}

package/build/commonjs/Tab/index.js

@@ -9,8 +9,22 @@ Object.defineProperty(exports, "default", {
     return _Tab.default;
   }
 });
+Object.defineProperty(exports, "tabSizes", {
+  enumerable: true,
+  get: function () {
+    return _TabProps.tabSizes;
+  }
+});
+Object.defineProperty(exports, "tabVariants", {
+  enumerable: true,
+  get: function () {
+    return _TabProps.tabVariants;
+  }
+});
 
 var _Tab = _interopRequireDefault(require("./Tab"));
 
+var _TabProps = require("./TabProps");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabVariant } from './TabProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabSize, TabVariant } from './TabProps';\nexport { tabSizes, tabVariants } from './TabProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

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) {
   const theme = (0, _styles2.useTheme)();
   return (0, _react.useMemo)(() => {
     switch (variant) {
@@ -26,13 +26,14 @@ function useVariantStyleMap(variant, selected) {
             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: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
-              fontSize: 14,
-              lineHeight: 18.2,
+              fontSize: size === 'small' ? 14 : 15,
+              lineHeight: size === 'small' ? 18.2 : 19.5,
               fontFamily: 'PretendardStd-SemiBold',
               letterSpacing: 0
             }),
@@ -49,10 +50,13 @@ function useVariantStyleMap(variant, selected) {
           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: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
@@ -71,7 +75,7 @@ function useVariantStyleMap(variant, selected) {
             alignItems: 'center',
             height: 49,
             justifyContent: 'flex-start',
-            paddingTop: theme.spacing(2.625),
+            paddingTop: 10.5,
             width: 48
           },
           inner: {
@@ -93,16 +97,18 @@ function useVariantStyleMap(variant, selected) {
       default:
         return {
           container: {
-            padding: theme.spacing(2.5)
+            paddingHorizontal: 10
           },
           inner: {
             flexDirection: 'row',
-            gap: 5
+            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
             }),
@@ -110,6 +116,6 @@ function useVariantStyleMap(variant, selected) {
           })
         };
     }
-  }, [theme, variant, selected]);
+  }, [theme, variant, selected, size]);
 }
 //# 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","flexDirection","gap","label","createFontStyle","selector","_","typographyOf","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":["useVariantStyleMap","variant","selected","size","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","width","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                        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                        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/commonjs/Tabs/Tabs.js

@@ -47,9 +47,6 @@ const useStyles = function () {
     fixedTab: {
       flex: 1
     },
-    scrollableContainer: {
-      paddingHorizontal: theme.spacing(1)
-    },
     bottomDivider: {
       borderBottomColor: theme.palette.border.base,
       borderBottomWidth: 0.5
@@ -72,6 +69,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     scrollable = false,
     scrollViewContentContainerStyle,
     showDivider = false,
+    size = 'medium',
     style,
     variant = 'default',
     UNSTABLE_sharedIndex,
@@ -85,7 +83,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   const currentIndexRef = (0, _react.useRef)(initialIndex);
   const {
     container: containerStyle
-  } = (0, _useTabsStyle.default)(variant);
+  } = (0, _useTabsStyle.default)(variant, size);
 
   const setTab = newIndex => {
     const currentIndex = currentIndexRef.current;
@@ -176,6 +174,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
       onLayout,
       onPress,
       onMouseDown,
+      size,
       variant,
       indicatorSize,
       style: scrollable ? undefined : styles.fixedTab
@@ -206,7 +205,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   }, scrollable ? /*#__PURE__*/_react.default.createElement(_ScrollableTabsView.default, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
-    contentContainerStyle: (0, _styles.css)([styles.scrollableContainer, scrollViewContentContainerStyle]),
+    contentContainerStyle: (0, _styles.css)([scrollViewContentContainerStyle]),
     coordinates: coordinates,
     directionalLockEnabled: true,
     horizontal: true,

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","container","containerStyle","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","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';\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":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","bottomDivider","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","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","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 { 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":"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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/useTabsStyle.js

@@ -11,16 +11,24 @@ var _hooks = require("../hooks");
 
 var _styles = require("../styles");
 
-function useTabsStyle(variant) {
+function useTabsStyle(variant, size) {
   const theme = (0, _styles.useTheme)();
-  const isDesktop = (0, _hooks.useBreakpointUp)('md', true, false);
+  const isTablet = (0, _hooks.useBreakpointUp)('md', true, false);
   return (0, _react.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
           }
         };
 
@@ -28,7 +36,8 @@ function useTabsStyle(variant) {
         return {
           container: {
             borderTopColor: theme.palette.border.base,
-            borderTopWidth: 0.5
+            borderTopWidth: 0.5,
+            paddingHorizontal: 20
           }
         };
 
@@ -36,10 +45,10 @@ 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/commonjs/Tabs/useTabsStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useTabsStyle","variant","theme","useTheme","isDesktop","useBreakpointUp","useMemo","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;;AAEA;;AACA;;AAOe,SAASA,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAlB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQL,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHM,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,SAAS,GAAG,EAAH,GAAQ;UAF7B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPG,cAAc,EAAER,KAAK,CAACS,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;YAEPC,cAAc,EAAE;UAFT;QADR,CAAP;;MAMJ,KAAK,SAAL;MACA;QACI,OAAO;UACHP,SAAS,EAAE;YACPE,iBAAiB,EAAEL,SAAS,GAAG,EAAH,GAAQ;UAD7B;QADR,CAAP;IAjBR;EAuBH,CAxBM,EAwBJ,CAACF,KAAD,EAAQD,OAAR,EAAiBG,SAAjB,CAxBI,CAAP;AAyBH"}
+{"version":3,"names":["useTabsStyle","variant","size","theme","useTheme","isTablet","useBreakpointUp","useMemo","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;;AAEA;;AACA;;AAOe,SAASA,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0D;EACrE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAjB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQN,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHO,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,QAAQ,GAAG,EAAH,GAASH,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB;UAFpD;QADR,CAAP;;MAMJ,KAAK,eAAL;QACI,OAAO;UACHM,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,QAAQ,GAAG,EAAH,GAAQ;UAF5B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPG,cAAc,EAAER,KAAK,CAACS,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,EAAEL,QAAQ,GAAG,EAAH,GAAQ;UAD5B;QADR,CAAP;IAzBR;EA+BH,CAhCM,EAgCJ,CAACF,KAAD,EAAQF,OAAR,EAAiBI,QAAjB,EAA2BH,IAA3B,CAhCI,CAAP;AAiCH"}

package/build/module/Accordion/Accordion.js

@@ -112,14 +112,14 @@ export default function Accordion(props) {
     children: title,
     numberOfLines: 1,
     style: titleFontStyle
-  })), subTitle && variant === 'solid' ? typeof subTitle === 'string' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
+  })), subTitle && variant === 'solid' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
     size: 1.5
-  }), /*#__PURE__*/React.createElement(Text, {
+  }), typeof subTitle === 'string' ? /*#__PURE__*/React.createElement(Text, {
     allowFontScaling: false,
     children: subTitle,
     numberOfLines: 1,
     style: subTitleFontStyle
-  })) : subTitle : null), /*#__PURE__*/React.createElement(Spacer, {
+  }) : subTitle) : null), /*#__PURE__*/React.createElement(Spacer, {
     flex: 1
   }), /*#__PURE__*/React.createElement(Spacer, {
     size: 3

package/build/module/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withDelay","withTiming","css","useTheme","ChevronDown","ButtonBase","Column","Row","Spacer","useVariantStyleMap","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","variant","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","shouldInitialExpandedRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","rotate","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","rootStyle"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, Text, View, ViewStyle } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport type AccordionProps from './AccordionProps';\nimport type { AccordionVariant } from './AccordionProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype AccordionStyles = NamedStylesStringUnion<'root' | 'rightIcon'>;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 100;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(3) },\n        rightIcon: {\n            alignItems: 'center',\n            height: 32,\n            justifyContent: 'center',\n            width: 32,\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n        variant = 'solid' as AccordionVariant,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState<boolean>(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const {\n        container: containerStyle,\n        content: contentStyle,\n        contentFont: contentFontStyle,\n        iconContainer: iconContainerStyle,\n        subTitleFont: subTitleFontStyle,\n        title: titleStyle,\n        titleFont: titleFontStyle,\n    } = useVariantStyleMap(variant);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        overflow: 'hidden',\n    } as ViewStyle), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n        animatedOpacity.value = isExpanded\n            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n            : withTiming(0, ANIMATION_CONFIG);\n    }, [isExpanded, contentHeight]);\n\n    const rootStyle = css([\n        styles.root,\n        containerStyle,\n    ]);\n\n    return (\n        <Column style={rootStyle}>\n            <ButtonBase onPress={onPress}>\n                <Row style={titleStyle}>\n                    <Column flexShrink={1}>\n                        <Row alignItems={'center'}>\n                            {LeftComponent ? (\n                                <React.Fragment>\n                                    <View style={iconContainerStyle}>\n                                        {LeftComponent}\n                                    </View>\n\n                                    <Spacer size={1.5}/>\n                                </React.Fragment>\n                            ) : null}\n\n                            <Text\n                                allowFontScaling={false}\n                                children={title}\n                                numberOfLines={1}\n                                style={titleFontStyle}\n                            />\n                        </Row>\n\n                        {subTitle && variant === 'solid' ?\n                            typeof subTitle === 'string' ? (\n                                <React.Fragment>\n                                    <Spacer size={1.5}/>\n\n                                    <Text\n                                        allowFontScaling={false}\n                                        children={subTitle}\n                                        numberOfLines={1}\n                                        style={subTitleFontStyle}\n                                    />\n                                </React.Fragment>\n                            ) : (subTitle)\n                            : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        <View style={styles.rightIcon}>\n                            {RightIcon ? RightIcon : (\n                                <ChevronDown\n                                    width={16}\n                                    height={16}\n                                    color={'base'}\n                                />\n                            )}\n                        </View>\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={contentStyle}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Text\n                                allowFontScaling={false}\n                                children={content}\n                                style={contentFontStyle}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withDelay","withTiming","css","useTheme","ChevronDown","ButtonBase","Column","Row","Spacer","useVariantStyleMap","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","variant","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","shouldInitialExpandedRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","rotate","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","rootStyle"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, Text, View, ViewStyle } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport type AccordionProps from './AccordionProps';\nimport type { AccordionVariant } from './AccordionProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype AccordionStyles = NamedStylesStringUnion<'root' | 'rightIcon'>;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 100;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(3) },\n        rightIcon: {\n            alignItems: 'center',\n            height: 32,\n            justifyContent: 'center',\n            width: 32,\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n        variant = 'solid' as AccordionVariant,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState<boolean>(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const {\n        container: containerStyle,\n        content: contentStyle,\n        contentFont: contentFontStyle,\n        iconContainer: iconContainerStyle,\n        subTitleFont: subTitleFontStyle,\n        title: titleStyle,\n        titleFont: titleFontStyle,\n    } = useVariantStyleMap(variant);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        overflow: 'hidden',\n    } as ViewStyle), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n        animatedOpacity.value = isExpanded\n            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n            : withTiming(0, ANIMATION_CONFIG);\n    }, [isExpanded, contentHeight]);\n\n    const rootStyle = css([\n        styles.root,\n        containerStyle,\n    ]);\n\n    return (\n        <Column style={rootStyle}>\n            <ButtonBase onPress={onPress}>\n                <Row style={titleStyle}>\n                    <Column flexShrink={1}>\n                        <Row alignItems={'center'}>\n                            {LeftComponent ? (\n                                <React.Fragment>\n                                    <View style={iconContainerStyle}>\n                                        {LeftComponent}\n                                    </View>\n\n                                    <Spacer size={1.5}/>\n                                </React.Fragment>\n                            ) : null}\n\n                            <Text\n                                allowFontScaling={false}\n                                children={title}\n                                numberOfLines={1}\n                                style={titleFontStyle}\n                            />\n                        </Row>\n\n                        {subTitle && variant === 'solid' ? (\n                            <React.Fragment>\n                                <Spacer size={1.5}/>\n\n                                {typeof subTitle === 'string' ? (\n                                    <Text\n                                        allowFontScaling={false}\n                                        children={subTitle}\n                                        numberOfLines={1}\n                                        style={subTitleFontStyle}\n                                    />\n                                ) : (subTitle)}\n                            </React.Fragment>\n                        ) : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        <View style={styles.rightIcon}>\n                            {RightIcon ? RightIcon : (\n                                <ChevronDown\n                                    width={16}\n                                    height={16}\n                                    color={'base'}\n                                />\n                            )}\n                        </View>\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={contentStyle}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Text\n                                allowFontScaling={false}\n                                children={content}\n                                style={contentFontStyle}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}

package/build/module/Accordion/useVariantStyleMap.js

@@ -15,10 +15,12 @@ export default function useVariantStyleMap(variant) {
           content: {
             borderTopColor: theme.palette.border.weak,
             borderTopWidth: 0.5,
+            left: 0,
             marginHorizontal: theme.spacing(4),
             paddingBottom: theme.spacing(5),
             paddingTop: theme.spacing(4),
-            position: 'absolute'
+            position: 'absolute',
+            right: 0
           },
           contentFont: createFontStyle(theme, {
             selector: typography => typography.body3.regular,
@@ -55,10 +57,12 @@ export default function useVariantStyleMap(variant) {
           content: {
             borderTopColor: theme.palette.border.weak,
             borderTopWidth: 0.5,
+            left: 0,
             marginHorizontal: theme.spacing(4),
             paddingBottom: theme.spacing(4),
             paddingTop: theme.spacing(3),
-            position: 'absolute'
+            position: 'absolute',
+            right: 0
           },
           contentFont: createFontStyle(theme, {
             selector: typography => typography.caption2.regular,

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","theme","container","backgroundColor","palette","surface","supportive","borderRadius","shape","radius","md","content","borderTopColor","border","weak","borderTopWidth","marginHorizontal","spacing","paddingBottom","paddingTop","position","contentFont","selector","typography","body3","regular","color","text","base","subTitleFont","caption1","title","alignItems","paddingLeft","paddingRight","paddingVertical","titleFont","_","fontSize","lineHeight","fontFamily","letterSpacing","strong","borderColor","borderWidth","caption2","iconContainer","caption1short","semiBold","borderBottomColor","borderBottomWidth"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { AccordionVariant } from './AccordionProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    content: FountainUiStyle;\n    contentFont: TextStyle;\n    iconContainer?: FountainUiStyle;\n    subTitleFont?: TextStyle;\n    title: FountainUiStyle;\n    titleFont: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: AccordionVariant): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'solid':\n                return {\n                    container: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderRadius: theme.shape.radius.md,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        marginHorizontal: theme.spacing(4),\n                        paddingBottom: theme.spacing(5),\n                        paddingTop: theme.spacing(4),\n                        position: 'absolute',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.body3.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    subTitleFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption1.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingLeft: theme.spacing(4),\n                        paddingRight: theme.spacing(2),\n                        paddingVertical: theme.spacing(4),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 20.8,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n            case 'line':\n                return {\n                    container: {\n                        borderColor: theme.palette.border.weak,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 1,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        marginHorizontal: theme.spacing(4),\n                        paddingBottom: theme.spacing(4),\n                        paddingTop: theme.spacing(3),\n                        position: 'absolute',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption2.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    iconContainer: {\n                        paddingTop: 1,\n                    },\n                    title: {\n                        alignItems: 'center',\n                        paddingBottom: theme.spacing(1),\n                        paddingLeft: theme.spacing(4),\n                        paddingRight: theme.spacing(2),\n                        paddingTop: theme.spacing(0.75),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption1short.semiBold,\n                        color: theme.palette.text.base,\n                    }),\n                };\n            case 'underline':\n                return {\n                    container: {\n                        borderBottomColor: theme.palette.border.weak,\n                        borderBottomWidth: 1,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        paddingBottom: theme.spacing(5),\n                        paddingLeft: theme.spacing(0.5),\n                        paddingRight: theme.spacing(2),\n                        paddingTop: theme.spacing(4),\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.body3.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingLeft: theme.spacing(0.5),\n                        paddingVertical: theme.spacing(2),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 20.8,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, variant]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","theme","container","backgroundColor","palette","surface","supportive","borderRadius","shape","radius","md","content","borderTopColor","border","weak","borderTopWidth","left","marginHorizontal","spacing","paddingBottom","paddingTop","position","right","contentFont","selector","typography","body3","regular","color","text","base","subTitleFont","caption1","title","alignItems","paddingLeft","paddingRight","paddingVertical","titleFont","_","fontSize","lineHeight","fontFamily","letterSpacing","strong","borderColor","borderWidth","caption2","iconContainer","caption1short","semiBold","borderBottomColor","borderBottomWidth"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { AccordionVariant } from './AccordionProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    content: FountainUiStyle;\n    contentFont: TextStyle;\n    iconContainer?: FountainUiStyle;\n    subTitleFont?: TextStyle;\n    title: FountainUiStyle;\n    titleFont: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: AccordionVariant): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'solid':\n                return {\n                    container: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderRadius: theme.shape.radius.md,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        left: 0,\n                        marginHorizontal: theme.spacing(4),\n                        paddingBottom: theme.spacing(5),\n                        paddingTop: theme.spacing(4),\n                        position: 'absolute',\n                        right: 0,\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.body3.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    subTitleFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption1.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingLeft: theme.spacing(4),\n                        paddingRight: theme.spacing(2),\n                        paddingVertical: theme.spacing(4),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 20.8,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n            case 'line':\n                return {\n                    container: {\n                        borderColor: theme.palette.border.weak,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 1,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        left: 0,\n                        marginHorizontal: theme.spacing(4),\n                        paddingBottom: theme.spacing(4),\n                        paddingTop: theme.spacing(3),\n                        position: 'absolute',\n                        right: 0,\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption2.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    iconContainer: {\n                        paddingTop: 1,\n                    },\n                    title: {\n                        alignItems: 'center',\n                        paddingBottom: theme.spacing(1),\n                        paddingLeft: theme.spacing(4),\n                        paddingRight: theme.spacing(2),\n                        paddingTop: theme.spacing(0.75),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption1short.semiBold,\n                        color: theme.palette.text.base,\n                    }),\n                };\n            case 'underline':\n                return {\n                    container: {\n                        borderBottomColor: theme.palette.border.weak,\n                        borderBottomWidth: 1,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        paddingBottom: theme.spacing(5),\n                        paddingLeft: theme.spacing(0.5),\n                        paddingRight: theme.spacing(2),\n                        paddingTop: theme.spacing(4),\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.body3.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingLeft: theme.spacing(0.5),\n                        paddingVertical: theme.spacing(2),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 20.8,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, variant]);\n}\n"],"mappings":"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"}

package/build/module/BottomSheetTitle/BottomSheetTitle.js

@@ -51,6 +51,7 @@ export default function BottomSheetTitle(props) {
   }), actionButtonProps ? /*#__PURE__*/React.createElement(Button, {
     children: actionButtonProps.title,
     color: 'accent',
+    disabled: actionButtonProps.disabled ?? false,
     disableMinWidth: true,
     onPress: actionButtonProps.onPress,
     size: 'large',