@fountain-ui/core 3.0.0-alpha.21 → 3.0.0-alpha.22

package/build/commonjs/Accordion/Accordion.js

@@ -33,6 +33,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG = {
@@ -64,7 +66,9 @@ function Accordion(props) {
     RightIcon,
     LeftComponent,
     isInitialExpanded = false,
-    variant = 'solid'
+    style: styleProp,
+    variant = 'solid',
+    ...otherProps
   } = props;
   const styles = useStyles();
   const theme = (0, _styles2.useTheme)();
@@ -116,10 +120,10 @@ function Accordion(props) {
     animatedHeight.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
     animatedOpacity.value = isExpanded ? (0, _reactNativeReanimated.withDelay)(CONTENT_OPACITY_DELAY_MILLIS, (0, _reactNativeReanimated.withTiming)(1, ANIMATION_CONFIG)) : (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
   }, [isExpanded, contentHeight]);
-  const rootStyle = (0, _styles.css)([styles.root, containerStyle]);
-  return /*#__PURE__*/_react.default.createElement(_Column.default, {
+  const rootStyle = (0, _styles.css)([styles.root, containerStyle, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_Column.default, _extends({
     style: rootStyle
-  }, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
     onPress: onPress
   }, /*#__PURE__*/_react.default.createElement(_Row.default, {
     style: titleStyle

package/build/commonjs/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","variant","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","useVariantStyleMap","rotate","useSharedValue","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay","rootStyle","css"],"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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"}
+{"version":3,"names":["ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","style","styleProp","variant","otherProps","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","useVariantStyleMap","rotate","useSharedValue","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay","rootStyle","css"],"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        style: styleProp,\n        variant = 'solid' as AccordionVariant,\n        ...otherProps\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        styleProp,\n    ]);\n\n    return (\n        <Column\n            style={rootStyle}\n            {...otherProps}\n        >\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/commonjs/Accordion/AccordionProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["accordionVariants"],"sources":["AccordionProps.ts"],"sourcesContent":["import React from 'react';\n\nexport const accordionVariants = ['solid', 'line', 'underline'] as const;\nexport type AccordionVariant = typeof accordionVariants[number];\n\nexport default interface AccordionProps {\n    /**\n     * The title of the component.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The subtitle of the component. (Only for solid variant)\n     */\n    subTitle?: string | React.ReactNode;\n\n    /**\n     * The component to the left of the title.\n     */\n    LeftComponent?: React.ReactNode;\n\n    /**\n     * The icon to the right of the title.\n     */\n    RightIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * The initial state of expanding\n     * @default false\n     */\n    isInitialExpanded?: boolean;\n\n    /**\n     * Determines design variations of the component.\n     * @default 'solid'\n     */\n    variant: AccordionVariant;\n}\n"],"mappings":";;;;;;AAEO,MAAMA,iBAAiB,GAAG,CAAC,OAAD,EAAU,MAAV,EAAkB,WAAlB,CAA1B"}
+{"version":3,"names":["accordionVariants"],"sources":["AccordionProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ColumnProps } from '../Column';\nimport type { OverridableComponentProps } from '../types';\n\nexport const accordionVariants = ['solid', 'line', 'underline'] as const;\nexport type AccordionVariant = typeof accordionVariants[number];\n\nexport default interface AccordionProps extends OverridableComponentProps<Omit<ColumnProps, 'children'>, {\n    /**\n     * The title of the component.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The subtitle of the component. (Only for solid variant)\n     */\n    subTitle?: string | React.ReactNode;\n\n    /**\n     * The component to the left of the title.\n     */\n    LeftComponent?: React.ReactNode;\n\n    /**\n     * The icon to the right of the title.\n     */\n    RightIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * The initial state of expanding\n     * @default false\n     */\n    isInitialExpanded?: boolean;\n\n    /**\n     * Determines design variations of the component.\n     * @default 'solid'\n     */\n    variant: AccordionVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,iBAAiB,GAAG,CAAC,OAAD,EAAU,MAAV,EAAkB,WAAlB,CAA1B"}

package/build/commonjs/AppBar/AppBar.js

@@ -39,7 +39,7 @@ const AppBar = /*#__PURE__*/_react.default.forwardRef(function AppBar(props, ref
   const isDesktop = (0, _hooks.useBreakpointUp)('md', true, false);
   const styles = useStyles();
   const backgroundColorMap = {
-    default: theme.palette.background.default,
+    default: theme.palette.background.base,
     alt: theme.palette.background.alt
   };
   const paperStyle = (0, _styles.css)([styles.root, {

package/build/commonjs/AppBar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","React","forwardRef","props","ref","color","style","otherProps","isDesktop","useBreakpointUp","styles","backgroundColorMap","default","palette","background","alt","paperStyle","css","backgroundColor","paddingHorizontal","undefined"],"sources":["AppBar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\nimport type { AppBarColor } from './AppBarProps';\n\ntype AppBarStyleKeys = 'root';\n\ntype AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;\n\nconst useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            flexShrink: 0,\n            width: '100%',\n            zIndex: theme.zIndex.appBar,\n        },\n    };\n};\n\nconst AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {\n    const {\n        color = 'default',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    const styles = useStyles();\n\n    const backgroundColorMap: Record<AppBarColor, string> = {\n        default: theme.palette.background.default,\n        alt: theme.palette.background.alt,\n    };\n\n    const paperStyle = css([\n        styles.root,\n        { backgroundColor: backgroundColorMap[color] },\n        isDesktop ? { paddingHorizontal: 8 } : undefined,\n        style,\n    ]);\n\n    return (\n        <View\n            ref={ref}\n            style={paperStyle}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAQA,MAAMA,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,QADb;MAEFC,UAAU,EAAE,CAFV;MAGFC,KAAK,EAAE,MAHL;MAIFC,MAAM,EAAEN,KAAK,CAACM,MAAN,CAAaC;IAJnB;EADH,CAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGC,cAAA,CAAMC,UAAN,CAAoC,SAASF,MAAT,CAAgBG,KAAhB,EAAuBC,GAAvB,EAA4B;EAC3E,MAAM;IACFC,KAAK,GAAG,SADN;IAEFC,KAFE;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMX,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMe,SAAS,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAlB;EAEA,MAAMC,MAAM,GAAGnB,SAAS,EAAxB;EAEA,MAAMoB,kBAA+C,GAAG;IACpDC,OAAO,EAAEpB,KAAK,CAACqB,OAAN,CAAcC,UAAd,CAAyBF,OADkB;IAEpDG,GAAG,EAAEvB,KAAK,CAACqB,OAAN,CAAcC,UAAd,CAAyBC;EAFsB,CAAxD;EAKA,MAAMC,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnBP,MAAM,CAAChB,IADY,EAEnB;IAAEwB,eAAe,EAAEP,kBAAkB,CAACN,KAAD;EAArC,CAFmB,EAGnBG,SAAS,GAAG;IAAEW,iBAAiB,EAAE;EAArB,CAAH,GAA8BC,SAHpB,EAInBd,KAJmB,CAAJ,CAAnB;EAOA,oBACI,6BAAC,iBAAD;IACI,GAAG,EAAEF,GADT;IAEI,KAAK,EAAEY;EAFX,GAGQT,UAHR,EADJ;AAOH,CAhCc,CAAf;;eAkCeP,M"}
+{"version":3,"names":["useStyles","theme","useTheme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","React","forwardRef","props","ref","color","style","otherProps","isDesktop","useBreakpointUp","styles","backgroundColorMap","default","palette","background","base","alt","paperStyle","css","backgroundColor","paddingHorizontal","undefined"],"sources":["AppBar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\nimport type { AppBarColor } from './AppBarProps';\n\ntype AppBarStyleKeys = 'root';\n\ntype AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;\n\nconst useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            flexShrink: 0,\n            width: '100%',\n            zIndex: theme.zIndex.appBar,\n        },\n    };\n};\n\nconst AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {\n    const {\n        color = 'default',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    const styles = useStyles();\n\n    const backgroundColorMap: Record<AppBarColor, string> = {\n        default: theme.palette.background.base,\n        alt: theme.palette.background.alt,\n    };\n\n    const paperStyle = css([\n        styles.root,\n        { backgroundColor: backgroundColorMap[color] },\n        isDesktop ? { paddingHorizontal: 8 } : undefined,\n        style,\n    ]);\n\n    return (\n        <View\n            ref={ref}\n            style={paperStyle}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAQA,MAAMA,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,QADb;MAEFC,UAAU,EAAE,CAFV;MAGFC,KAAK,EAAE,MAHL;MAIFC,MAAM,EAAEN,KAAK,CAACM,MAAN,CAAaC;IAJnB;EADH,CAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGC,cAAA,CAAMC,UAAN,CAAoC,SAASF,MAAT,CAAgBG,KAAhB,EAAuBC,GAAvB,EAA4B;EAC3E,MAAM;IACFC,KAAK,GAAG,SADN;IAEFC,KAFE;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMX,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMe,SAAS,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAlB;EAEA,MAAMC,MAAM,GAAGnB,SAAS,EAAxB;EAEA,MAAMoB,kBAA+C,GAAG;IACpDC,OAAO,EAAEpB,KAAK,CAACqB,OAAN,CAAcC,UAAd,CAAyBC,IADkB;IAEpDC,GAAG,EAAExB,KAAK,CAACqB,OAAN,CAAcC,UAAd,CAAyBE;EAFsB,CAAxD;EAKA,MAAMC,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnBR,MAAM,CAAChB,IADY,EAEnB;IAAEyB,eAAe,EAAER,kBAAkB,CAACN,KAAD;EAArC,CAFmB,EAGnBG,SAAS,GAAG;IAAEY,iBAAiB,EAAE;EAArB,CAAH,GAA8BC,SAHpB,EAInBf,KAJmB,CAAJ,CAAnB;EAOA,oBACI,6BAAC,iBAAD;IACI,GAAG,EAAEF,GADT;IAEI,KAAK,EAAEa;EAFX,GAGQV,UAHR,EADJ;AAOH,CAhCc,CAAf;;eAkCeP,M"}

package/build/commonjs/ButtonBase/ButtonBase.js

@@ -26,7 +26,7 @@ const ORIGINAL_OPACITY = 1;
 exports.ORIGINAL_OPACITY = ORIGINAL_OPACITY;
 const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
-const MINIFIED_SCALE = .96; // at "node_modules/react-native/Libraries/Pressability.js"
+const MINIFIED_SCALE = .98; // at "node_modules/react-native/Libraries/Pressability.js"
 // const DEFAULT_MIN_PRESS_DURATION = 130;
 
 const SCALE_EFFECT_PRESS_IN_DELAY = 130;

package/build/commonjs/ButtonBase/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["ORIGINAL_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","SCALE_EFFECT_PRESS_IN_DELAY","OPACITY_EFFECT_PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","Animated","timing","duration","useNativeDriver","isNotAndroid12","start","ButtonBase","props","children","disabled","disableThrottle","onPress","_onPress","onPressOut","pressEffect","pressDelay","pressDelayOrNil","style","styleProp","throttleMillis","otherProps","useCallback","handlePress","useThrottle","periodMillis","callback","opacity","useAnimatedValue","scale","startScaleAnimation","pressIn","isHover","startOpacityAnimation","setValue","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","defaultPressDelay","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue, useThrottle } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n    (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst SCALE_EFFECT_PRESS_IN_DELAY = 130;\nconst OPACITY_EFFECT_PRESS_IN_DELAY = 0;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n    value: TimingAnimationValue,\n    toValue: TimingAnimationToValue,\n) => {\n    Animated.timing(value, {\n        toValue,\n        duration: 150,\n        useNativeDriver: isNotAndroid12,\n    }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress: _onPress,\n        onPressOut,\n        pressEffect = 'opacity',\n        pressDelay: pressDelayOrNil,\n        style: styleProp,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const onPress = useCallback(() => _onPress?.(), [_onPress]);\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = useAnimatedValue(ORIGINAL_OPACITY);\n    const scale = useAnimatedValue(ORIGINAL_SCALE);\n\n    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n        if (!isHover) {\n            startTimingAnimationWithDefaults(\n                scale,\n                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n            );\n        }\n    }, []);\n\n    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n        if (pressIn) {\n            opacity.setValue(ACTIVE_OPACITY);\n        } else {\n            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n        }\n    }, []);\n\n    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n        if (pressEffect === 'scale') {\n            startScaleAnimation(pressIn, isHover);\n        } else if (pressEffect === 'opacity') {\n            startOpacityAnimation(pressIn, isHover);\n        }\n    }, [pressEffect]);\n\n    const handlePressIn = useCallback(() => {\n        startPressAnimation(true, false);\n    }, [startPressAnimation]);\n\n    const handlePressOut = useCallback(() => {\n        onPressOut && onPressOut();\n\n        startPressAnimation(false, false);\n    }, [startPressAnimation, onPressOut]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ scale }],\n    };\n\n    const defaultPressDelay = pressEffect === 'scale'\n        ? SCALE_EFFECT_PRESS_IN_DELAY\n        : OPACITY_EFFECT_PRESS_IN_DELAY;\n    const pressDelay = pressDelayOrNil ?? defaultPressDelay;\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={handlePressIn}\n            onPressOut={handlePressOut}\n            style={[\n                animatedStyle,\n                styleProp,\n            ]}\n            unstable_pressDelay={pressDelay}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startPressAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["ORIGINAL_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","SCALE_EFFECT_PRESS_IN_DELAY","OPACITY_EFFECT_PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","Animated","timing","duration","useNativeDriver","isNotAndroid12","start","ButtonBase","props","children","disabled","disableThrottle","onPress","_onPress","onPressOut","pressEffect","pressDelay","pressDelayOrNil","style","styleProp","throttleMillis","otherProps","useCallback","handlePress","useThrottle","periodMillis","callback","opacity","useAnimatedValue","scale","startScaleAnimation","pressIn","isHover","startOpacityAnimation","setValue","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","defaultPressDelay","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue, useThrottle } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n    (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .98;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst SCALE_EFFECT_PRESS_IN_DELAY = 130;\nconst OPACITY_EFFECT_PRESS_IN_DELAY = 0;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n    value: TimingAnimationValue,\n    toValue: TimingAnimationToValue,\n) => {\n    Animated.timing(value, {\n        toValue,\n        duration: 150,\n        useNativeDriver: isNotAndroid12,\n    }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress: _onPress,\n        onPressOut,\n        pressEffect = 'opacity',\n        pressDelay: pressDelayOrNil,\n        style: styleProp,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const onPress = useCallback(() => _onPress?.(), [_onPress]);\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = useAnimatedValue(ORIGINAL_OPACITY);\n    const scale = useAnimatedValue(ORIGINAL_SCALE);\n\n    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n        if (!isHover) {\n            startTimingAnimationWithDefaults(\n                scale,\n                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n            );\n        }\n    }, []);\n\n    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n        if (pressIn) {\n            opacity.setValue(ACTIVE_OPACITY);\n        } else {\n            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n        }\n    }, []);\n\n    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n        if (pressEffect === 'scale') {\n            startScaleAnimation(pressIn, isHover);\n        } else if (pressEffect === 'opacity') {\n            startOpacityAnimation(pressIn, isHover);\n        }\n    }, [pressEffect]);\n\n    const handlePressIn = useCallback(() => {\n        startPressAnimation(true, false);\n    }, [startPressAnimation]);\n\n    const handlePressOut = useCallback(() => {\n        onPressOut && onPressOut();\n\n        startPressAnimation(false, false);\n    }, [startPressAnimation, onPressOut]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ scale }],\n    };\n\n    const defaultPressDelay = pressEffect === 'scale'\n        ? SCALE_EFFECT_PRESS_IN_DELAY\n        : OPACITY_EFFECT_PRESS_IN_DELAY;\n    const pressDelay = pressDelayOrNil ?? defaultPressDelay;\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={handlePressIn}\n            onPressOut={handlePressOut}\n            style={[\n                animatedStyle,\n                styleProp,\n            ]}\n            unstable_pressDelay={pressDelay}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startPressAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAOO,MAAMA,gBAAgB,GAAG,CAAzB;;AACP,MAAMC,cAAc,GAAG,GAAvB;AAEA,MAAMC,cAAc,GAAG,CAAvB;AACA,MAAMC,cAAc,GAAG,GAAvB,C,CAEA;AACA;;AACA,MAAMC,2BAA2B,GAAG,GAApC;AACA,MAAMC,6BAA6B,GAAG,CAAtC;;AAKA,MAAMC,gCAAgC,GAAG,CACrCC,KADqC,EAErCC,OAFqC,KAGpC;EACDC,qBAAA,CAASC,MAAT,CAAgBH,KAAhB,EAAuB;IACnBC,OADmB;IAEnBG,QAAQ,EAAE,GAFS;IAGnBC,eAAe,EAAEC;EAHE,CAAvB,EAIGC,KAJH;AAKH,CATD;;AAWe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,eAAe,GAAG,KAHhB;IAIFC,OAAO,EAAEC,QAJP;IAKFC,UALE;IAMFC,WAAW,GAAG,SANZ;IAOFC,UAAU,EAAEC,eAPV;IAQFC,KAAK,EAAEC,SARL;IASFC,cAAc,GAAG,GATf;IAUF,GAAGC;EAVD,IAWFb,KAXJ;EAaA,MAAMI,OAAO,GAAG,IAAAU,kBAAA,EAAY,MAAMT,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,EAA1B,EAAgC,CAACA,QAAD,CAAhC,CAAhB;EACA,MAAMU,WAAW,GAAG,IAAAC,kBAAA,EAAY;IAC5BC,YAAY,EAAEd,eAAe,GAAG,CAAH,GAAOS,cADR;IAE5BM,QAAQ,EAAEd;EAFkB,CAAZ,CAApB;EAKA,MAAMe,OAAO,GAAG,IAAAC,uBAAA,EAAiBpC,gBAAjB,CAAhB;EACA,MAAMqC,KAAK,GAAG,IAAAD,uBAAA,EAAiBlC,cAAjB,CAAd;EAEA,MAAMoC,mBAAmB,GAAG,IAAAR,kBAAA,EAAiC,CAACS,OAAD,EAAUC,OAAV,KAAsB;IAC/E,IAAI,CAACA,OAAL,EAAc;MACVlC,gCAAgC,CAC5B+B,KAD4B,EAE5BE,OAAO,GAAGpC,cAAH,GAAoBD,cAFC,CAAhC;IAIH;EACJ,CAP2B,EAOzB,EAPyB,CAA5B;EASA,MAAMuC,qBAAqB,GAAG,IAAAX,kBAAA,EAAkCS,OAAD,IAAa;IACxE,IAAIA,OAAJ,EAAa;MACTJ,OAAO,CAACO,QAAR,CAAiBzC,cAAjB;IACH,CAFD,MAEO;MACHK,gCAAgC,CAAC6B,OAAD,EAAUnC,gBAAV,CAAhC;IACH;EACJ,CAN6B,EAM3B,EAN2B,CAA9B;EAQA,MAAM2C,mBAAmB,GAAG,IAAAb,kBAAA,EAAiC,UAACS,OAAD,EAA8B;IAAA,IAApBC,OAAoB,uEAAV,KAAU;;IACvF,IAAIjB,WAAW,KAAK,OAApB,EAA6B;MACzBe,mBAAmB,CAACC,OAAD,EAAUC,OAAV,CAAnB;IACH,CAFD,MAEO,IAAIjB,WAAW,KAAK,SAApB,EAA+B;MAClCkB,qBAAqB,CAACF,OAAD,EAAUC,OAAV,CAArB;IACH;EACJ,CAN2B,EAMzB,CAACjB,WAAD,CANyB,CAA5B;EAQA,MAAMqB,aAAa,GAAG,IAAAd,kBAAA,EAAY,MAAM;IACpCa,mBAAmB,CAAC,IAAD,EAAO,KAAP,CAAnB;EACH,CAFqB,EAEnB,CAACA,mBAAD,CAFmB,CAAtB;EAIA,MAAME,cAAc,GAAG,IAAAf,kBAAA,EAAY,MAAM;IACrCR,UAAU,IAAIA,UAAU,EAAxB;IAEAqB,mBAAmB,CAAC,KAAD,EAAQ,KAAR,CAAnB;EACH,CAJsB,EAIpB,CAACA,mBAAD,EAAsBrB,UAAtB,CAJoB,CAAvB;EAMA,MAAMwB,aAAa,GAAG;IAClBX,OADkB;IAElBY,SAAS,EAAE,CAAC;MAAEV;IAAF,CAAD;EAFO,CAAtB;EAKA,MAAMW,iBAAiB,GAAGzB,WAAW,KAAK,OAAhB,GACpBnB,2BADoB,GAEpBC,6BAFN;EAGA,MAAMmB,UAAU,GAAGC,eAAe,IAAIuB,iBAAtC;EAEA,oBACI,6BAAC,2BAAD;IACI,QAAQ,EAAE9B,QADd;IAEI,OAAO,EAAEa,WAFb;IAGI,SAAS,EAAEa,aAHf;IAII,UAAU,EAAEC,cAJhB;IAKI,KAAK,EAAE,CACHC,aADG,EAEHnB,SAFG,CALX;IASI,mBAAmB,EAAEH;EATzB,GAUQK,UAVR,GAYK,OAAOZ,QAAP,KAAoB,UAApB,GACG,QAAiB;IAAA,IAAhB;MAAEgC;IAAF,CAAgB;;IACb,IAAIA,OAAO,KAAKC,SAAZ,IAAyB,CAAChC,QAA9B,EAAwC;MACpCyB,mBAAmB,CAACM,OAAD,EAAU,IAAV,CAAnB;IACH;;IAED,OAAOhC,QAAP;EACH,CAPJ,GAQGA,QApBR,CADJ;AAwBH;;AAAA"}

package/build/commonjs/Image/Image.js

@@ -35,7 +35,7 @@ const useStyles = function () {
     outlined: {
       borderWidth: _styles.StyleSheet.hairlineWidth,
       borderStyle: 'solid',
-      borderColor: theme.palette.paper.grey
+      borderColor: theme.palette.border.weak
     },
     error: {
       alignItems: 'center',

package/build/commonjs/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","placeholderMode","css","undefined","absoluteFill","zIndex","uri"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n    | 'default'\n    | 'custom'\n    | 'none';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined'\n    | 'error'\n    | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: StyleSheet.hairlineWidth,\n            borderStyle: 'solid',\n            borderColor: theme.palette.paper.grey,\n        },\n        error: {\n            alignItems: 'center',\n            height: '100%',\n            justifyContent: 'center',\n            width: '100%',\n        },\n        errorText: {\n            color: theme.palette.text.primary,\n            fontFamily: 'Inter-Medium',\n            fontSize: 12,\n            letterSpacing: 0,\n            lineHeight: 18,\n            textAlign: 'center',\n        },\n    };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n    if (props.disablePlaceholder) {\n        return 'none';\n    }\n\n    return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n    const {\n        alt,\n        cache = 'immutable',\n        disableDrag,\n        disableLongClick,\n        disableOutline,\n        disablePlaceholder,\n        error,\n        loading = 'lazy',\n        onError: onErrorProp,\n        onLoad: onLoadProp,\n        overlaidChildren,\n        placeholder,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = useState(false);\n\n    const styles = useStyles();\n\n    const onLoad: ImageCoreProps['onLoad'] = () => {\n        setFailed(false);\n\n        onLoadProp?.();\n    };\n\n    const onError: ImageCoreProps['onError'] = () => {\n        setFailed(true);\n\n        onErrorProp?.();\n    };\n\n    const placeholderMode = determinePlaceholderMode(props);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !square ? styles.rounded : undefined,\n                placeholderMode === 'default' ? styles.placeholder : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {placeholderMode === 'custom' ? (\n                <View\n                    style={css([\n                        StyleSheet.absoluteFill,\n                        { zIndex: -1 },\n                    ])}\n                >\n                    {placeholder}\n                </View>\n            ) : null}\n\n            {failed ? (\n                <View style={styles.error}>\n                    {error ?? (\n                        <Text\n                            children={alt}\n                            style={styles.errorText}\n                        />\n                    )}\n                </View>\n            ) : source.uri ? (\n                <ImageCore\n                    alt={alt}\n                    cache={cache}\n                    disableDrag={disableDrag}\n                    disableLongClick={disableLongClick}\n                    height={'100%'}\n                    loading={loading}\n                    onError={onError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={source}\n                    width={'100%'}\n                />\n            ) : null}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n};"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","border","weak","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","placeholderMode","css","undefined","absoluteFill","zIndex","uri"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n    | 'default'\n    | 'custom'\n    | 'none';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined'\n    | 'error'\n    | 'errorText';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: StyleSheet.hairlineWidth,\n            borderStyle: 'solid',\n            borderColor: theme.palette.border.weak,\n        },\n        error: {\n            alignItems: 'center',\n            height: '100%',\n            justifyContent: 'center',\n            width: '100%',\n        },\n        errorText: {\n            color: theme.palette.text.primary,\n            fontFamily: 'Inter-Medium',\n            fontSize: 12,\n            letterSpacing: 0,\n            lineHeight: 18,\n            textAlign: 'center',\n        },\n    };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n    if (props.disablePlaceholder) {\n        return 'none';\n    }\n\n    return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n    const {\n        alt,\n        cache = 'immutable',\n        disableDrag,\n        disableLongClick,\n        disableOutline,\n        disablePlaceholder,\n        error,\n        loading = 'lazy',\n        onError: onErrorProp,\n        onLoad: onLoadProp,\n        overlaidChildren,\n        placeholder,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = useState(false);\n\n    const styles = useStyles();\n\n    const onLoad: ImageCoreProps['onLoad'] = () => {\n        setFailed(false);\n\n        onLoadProp?.();\n    };\n\n    const onError: ImageCoreProps['onError'] = () => {\n        setFailed(true);\n\n        onErrorProp?.();\n    };\n\n    const placeholderMode = determinePlaceholderMode(props);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !square ? styles.rounded : undefined,\n                placeholderMode === 'default' ? styles.placeholder : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {placeholderMode === 'custom' ? (\n                <View\n                    style={css([\n                        StyleSheet.absoluteFill,\n                        { zIndex: -1 },\n                    ])}\n                >\n                    {placeholder}\n                </View>\n            ) : null}\n\n            {failed ? (\n                <View style={styles.error}>\n                    {error ?? (\n                        <Text\n                            children={alt}\n                            style={styles.errorText}\n                        />\n                    )}\n                </View>\n            ) : source.uri ? (\n                <ImageCore\n                    alt={alt}\n                    cache={cache}\n                    disableDrag={disableDrag}\n                    disableLongClick={disableLongClick}\n                    height={'100%'}\n                    loading={loading}\n                    onError={onError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={source}\n                    width={'100%'}\n                />\n            ) : null}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n};"],"mappings":"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"}

package/build/commonjs/Pagination/NumberPagination.js

@@ -60,7 +60,9 @@ function NumberPagination(props) {
   return /*#__PURE__*/_react.default.createElement(_Row.default, {
     style: styles.root
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: currentFontStyle
+    style: [currentFontStyle, {
+      fontVariant: ['tabular-nums']
+    }]
   }, currentPage + 1), /*#__PURE__*/_react.default.createElement(_Divider.default, {
     style: styles.divider,
     vertical: true

package/build/commonjs/Pagination/NumberPagination.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","backgroundColor","commonColors","static","weakOpacity","borderRadius","shape","radius","full","paddingHorizontal","spacing","paddingVertical","divider","alignSelf","borderColor","weakOpacityInverse","height","NumberPagination","props","currentPage","maxPage","styles","typography","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","currentFontStyle","createFontStyle","selector","_","color","strongInverse","countFontStyle","baseOpacityInverse"],"sources":["NumberPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport Divider from '../Divider';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type PaginationProps from './PaginationProps';\n\ntype NumberPaginationStyles = NamedStylesStringUnion<'root' | 'divider'>;\n\nconst useStyles: UseStyles<NumberPaginationStyles> = function (): NumberPaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: commonColors.static.weakOpacity,\n            borderRadius: theme.shape.radius.full,\n            paddingHorizontal: theme.spacing(1.25),\n            paddingVertical: theme.spacing(0.5),\n        },\n        divider: {\n            alignSelf: 'center',\n            borderColor: commonColors.static.weakOpacityInverse,\n            height: 6,\n        },\n    };\n};\n\ninterface NumberPaginationProps {\n    currentPage: PaginationProps['page'];\n    maxPage: PaginationProps['count'];\n}\n\nexport default function NumberPagination(props: NumberPaginationProps) {\n    const {\n        currentPage,\n        maxPage,\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const typography = typographyOf({\n        fontSize: 9.5,\n        lineHeight: 11.4,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: -0.19,\n    });\n\n    const currentFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.strongInverse,\n    });\n\n    const countFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.baseOpacityInverse,\n    });\n\n    return (\n        <Row style={styles.root}>\n            <Text style={currentFontStyle}>\n                {currentPage + 1}\n            </Text>\n\n            <Divider\n                style={styles.divider}\n                vertical={true}\n            />\n\n            <Text style={countFontStyle}>\n                {maxPage}\n            </Text>\n        </Row>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEC,oBAAA,CAAaC,MAAb,CAAoBC,WADnC;MAEFC,YAAY,EAAEP,KAAK,CAACQ,KAAN,CAAYC,MAAZ,CAAmBC,IAF/B;MAGFC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,IAAd,CAHjB;MAIFC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,GAAd;IAJf,CADH;IAOHE,OAAO,EAAE;MACLC,SAAS,EAAE,QADN;MAELC,WAAW,EAAEZ,oBAAA,CAAaC,MAAb,CAAoBY,kBAF5B;MAGLC,MAAM,EAAE;IAHH;EAPN,CAAP;AAaH,CAhBD;;AAuBe,SAASC,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,WADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGxB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAMuB,UAAU,GAAG,IAAAC,oBAAA,EAAa;IAC5BC,QAAQ,EAAE,GADkB;IAE5BC,UAAU,EAAE,IAFgB;IAG5BC,UAAU,EAAE,wBAHgB;IAI5BC,aAAa,EAAE,CAAC;EAJY,CAAb,CAAnB;EAOA,MAAMC,gBAAgB,GAAG,IAAAC,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC5CgC,QAAQ,EAAGC,CAAD,IAAOT,UAD2B;IAE5CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoB8B;EAFiB,CAAvB,CAAzB;EAKA,MAAMC,cAAc,GAAG,IAAAL,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC1CgC,QAAQ,EAAGC,CAAD,IAAOT,UADyB;IAE1CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoBgC;EAFe,CAAvB,CAAvB;EAKA,oBACI,6BAAC,YAAD;IAAK,KAAK,EAAEd,MAAM,CAACrB;EAAnB,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE4B;EAAb,GACKT,WAAW,GAAG,CADnB,CADJ,eAKI,6BAAC,gBAAD;IACI,KAAK,EAAEE,MAAM,CAACT,OADlB;IAEI,QAAQ,EAAE;EAFd,EALJ,eAUI,6BAAC,iBAAD;IAAM,KAAK,EAAEsB;EAAb,GACKd,OADL,CAVJ,CADJ;AAgBH"}
+{"version":3,"names":["useStyles","theme","useTheme","root","backgroundColor","commonColors","static","weakOpacity","borderRadius","shape","radius","full","paddingHorizontal","spacing","paddingVertical","divider","alignSelf","borderColor","weakOpacityInverse","height","NumberPagination","props","currentPage","maxPage","styles","typography","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","currentFontStyle","createFontStyle","selector","_","color","strongInverse","countFontStyle","baseOpacityInverse","fontVariant"],"sources":["NumberPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport Divider from '../Divider';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type PaginationProps from './PaginationProps';\n\ntype NumberPaginationStyles = NamedStylesStringUnion<'root' | 'divider'>;\n\nconst useStyles: UseStyles<NumberPaginationStyles> = function (): NumberPaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: commonColors.static.weakOpacity,\n            borderRadius: theme.shape.radius.full,\n            paddingHorizontal: theme.spacing(1.25),\n            paddingVertical: theme.spacing(0.5),\n        },\n        divider: {\n            alignSelf: 'center',\n            borderColor: commonColors.static.weakOpacityInverse,\n            height: 6,\n        },\n    };\n};\n\ninterface NumberPaginationProps {\n    currentPage: PaginationProps['page'];\n    maxPage: PaginationProps['count'];\n}\n\nexport default function NumberPagination(props: NumberPaginationProps) {\n    const {\n        currentPage,\n        maxPage,\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const typography = typographyOf({\n        fontSize: 9.5,\n        lineHeight: 11.4,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: -0.19,\n    });\n\n    const currentFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.strongInverse,\n    });\n\n    const countFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.baseOpacityInverse,\n    });\n\n    return (\n        <Row style={styles.root}>\n            <Text\n                style={[\n                    currentFontStyle,\n                    { fontVariant: ['tabular-nums'] },\n                ]}\n            >\n                {currentPage + 1}\n            </Text>\n\n            <Divider\n                style={styles.divider}\n                vertical={true}\n            />\n\n            <Text style={countFontStyle}>\n                {maxPage}\n            </Text>\n        </Row>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEC,oBAAA,CAAaC,MAAb,CAAoBC,WADnC;MAEFC,YAAY,EAAEP,KAAK,CAACQ,KAAN,CAAYC,MAAZ,CAAmBC,IAF/B;MAGFC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,IAAd,CAHjB;MAIFC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,GAAd;IAJf,CADH;IAOHE,OAAO,EAAE;MACLC,SAAS,EAAE,QADN;MAELC,WAAW,EAAEZ,oBAAA,CAAaC,MAAb,CAAoBY,kBAF5B;MAGLC,MAAM,EAAE;IAHH;EAPN,CAAP;AAaH,CAhBD;;AAuBe,SAASC,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,WADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGxB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAMuB,UAAU,GAAG,IAAAC,oBAAA,EAAa;IAC5BC,QAAQ,EAAE,GADkB;IAE5BC,UAAU,EAAE,IAFgB;IAG5BC,UAAU,EAAE,wBAHgB;IAI5BC,aAAa,EAAE,CAAC;EAJY,CAAb,CAAnB;EAOA,MAAMC,gBAAgB,GAAG,IAAAC,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC5CgC,QAAQ,EAAGC,CAAD,IAAOT,UAD2B;IAE5CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoB8B;EAFiB,CAAvB,CAAzB;EAKA,MAAMC,cAAc,GAAG,IAAAL,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC1CgC,QAAQ,EAAGC,CAAD,IAAOT,UADyB;IAE1CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoBgC;EAFe,CAAvB,CAAvB;EAKA,oBACI,6BAAC,YAAD;IAAK,KAAK,EAAEd,MAAM,CAACrB;EAAnB,gBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,CACH4B,gBADG,EAEH;MAAEQ,WAAW,EAAE,CAAC,cAAD;IAAf,CAFG;EADX,GAMKjB,WAAW,GAAG,CANnB,CADJ,eAUI,6BAAC,gBAAD;IACI,KAAK,EAAEE,MAAM,CAACT,OADlB;IAEI,QAAQ,EAAE;EAFd,EAVJ,eAeI,6BAAC,iBAAD;IAAM,KAAK,EAAEsB;EAAb,GACKd,OADL,CAfJ,CADJ;AAqBH"}

package/build/commonjs/Tab/useVariantStyleMap.js

@@ -76,7 +76,7 @@ function useVariantStyleMap(variant, selected, size) {
             height: 49,
             justifyContent: 'flex-start',
             paddingTop: 10.5,
-            width: 48
+            maxWidth: 48
           },
           iconContainer: {
             padding: 0.75

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

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

package/build/commonjs/Tabs/Tabs.js

@@ -82,8 +82,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
   const realInitialIndex = sharedIndex.initialValue;
   const currentIndexRef = (0, _react.useRef)(initialIndex);
   const {
-    container: containerStyle
-  } = (0, _useTabsStyle.default)(variant, size);
+    container: containerStyle,
+    contentContainer: contentContainerStyle
+  } = (0, _useTabsStyle.default)(variant, size, scrollable);
 
   const setTab = newIndex => {
     const currentIndex = currentIndexRef.current;
@@ -168,6 +169,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     }; // @ts-ignore
 
 
+    const tabStyle = child.props.style; // @ts-ignore
+
     const tabElement = /*#__PURE__*/(0, _react.cloneElement)(child, {
       enableIndicator: !disableIndicator && !canRenderIndicator,
       onTabInnerLayout,
@@ -177,7 +180,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
       size,
       variant,
       indicatorSize,
-      style: scrollable ? undefined : styles.fixedTab
+      style: (0, _styles.css)([scrollable ? undefined : styles.fixedTab, tabStyle])
     });
     return /*#__PURE__*/_react.default.createElement(_IndexAwareTab.default, {
       children: tabElement,
@@ -205,7 +208,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)([scrollViewContentContainerStyle]),
+    contentContainerStyle: (0, _styles.css)([contentContainerStyle, 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","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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"}
+{"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","contentContainer","contentContainerStyle","useTabsStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerContentsWidthList","updateInnerContentsWidth","useTabInnerContentsWidth","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabStyle","tabElement","cloneElement","enableIndicator","css","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { 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 {\n        container: containerStyle,\n        contentContainer: contentContainerStyle,\n    } = useTabsStyle(variant, size, scrollable);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (outerCoordinates.length === 0) {\n            return [];\n        }\n\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { 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 tabStyle = child.props.style;\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            size,\n            variant,\n            indicatorSize,\n            style: css([\n                scrollable ? undefined : styles.fixedTab,\n                tabStyle,\n            ]),\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n        />\n    ) : null;\n\n    const backgroundColorMap: Record<TabsColor, string> = {\n        default: theme.palette.background.base,\n        alt: theme.palette.background.alt,\n    };\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    containerStyle,\n                    { backgroundColor: backgroundColorMap[color] },\n                    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                            contentContainerStyle,\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

package/build/commonjs/Tabs/useTabsStyle.js

@@ -11,44 +11,69 @@ var _hooks = require("../hooks");
 
 var _styles = require("../styles");
 
-function useTabsStyle(variant, size) {
+function useTabsStyle(variant, size, scrollable) {
   const theme = (0, _styles.useTheme)();
   const isTablet = (0, _hooks.useBreakpointUp)('md', true, false);
   return (0, _react.useMemo)(() => {
     switch (variant) {
       case 'circular':
-        return {
-          container: {
-            paddingBottom: 8,
-            paddingHorizontal: isTablet ? 20 : size === 'small' ? 8 : 12
-          }
-        };
+        {
+          const paddingHorizontal = isTablet ? 20 : size === 'small' ? 8 : 12;
+          return {
+            container: {
+              paddingBottom: 8,
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
 
       case 'circular-home':
-        return {
-          container: {
-            paddingBottom: 8,
-            paddingHorizontal: isTablet ? 20 : 8
-          }
-        };
+        {
+          const paddingHorizontal = isTablet ? 20 : 8;
+          return {
+            container: {
+              paddingBottom: 8,
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
 
       case 'bottom-navigation':
-        return {
-          container: {
-            borderTopColor: theme.palette.border.base,
-            borderTopWidth: 0.5,
-            paddingHorizontal: 24
-          }
-        };
+        {
+          const paddingHorizontal = 24;
+          return {
+            container: {
+              borderTopColor: theme.palette.border.base,
+              borderTopWidth: 0.5,
+              justifyContent: 'space-between',
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
 
       case 'default':
       default:
-        return {
-          container: {
-            paddingHorizontal: isTablet ? 14 : 6
-          }
-        };
+        {
+          const paddingHorizontal = isTablet ? 14 : 6;
+          return {
+            container: {
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
     }
-  }, [theme, variant, isTablet, size]);
+  }, [theme, variant, isTablet, size, scrollable]);
 }
 //# sourceMappingURL=useTabsStyle.js.map

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

@@ -1 +1 @@
-{"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: 24,\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"}
+{"version":3,"names":["useTabsStyle","variant","size","scrollable","theme","useTheme","isTablet","useBreakpointUp","useMemo","paddingHorizontal","container","paddingBottom","contentContainer","borderTopColor","palette","border","base","borderTopWidth","justifyContent"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n    contentContainer?: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {\n    const theme = useTheme();\n\n    const isTablet = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular': {\n                const paddingHorizontal = isTablet ? 20 : (size === 'small' ? 8 : 12);\n\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'circular-home': {\n                const paddingHorizontal = isTablet ? 20 : 8;\n\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'bottom-navigation': {\n                const paddingHorizontal = 24;\n\n                return {\n                    container: {\n                        borderTopColor: theme.palette.border.base,\n                        borderTopWidth: 0.5,\n                        justifyContent: 'space-between',\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'default':\n            default: {\n                const paddingHorizontal = isTablet ? 14 : 6;\n\n                return {\n                    container: {\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n        }\n    }, [theme, variant, isTablet, size, scrollable]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAQe,SAASA,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0DC,UAA1D,EAA+E;EAC1F,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAjB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQP,OAAR;MACI,KAAK,UAAL;QAAiB;UACb,MAAMQ,iBAAiB,GAAGH,QAAQ,GAAG,EAAH,GAASJ,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB,EAAlE;UAEA,OAAO;YACHQ,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,eAAL;QAAsB;UAClB,MAAMA,iBAAiB,GAAGH,QAAQ,GAAG,EAAH,GAAQ,CAA1C;UAEA,OAAO;YACHI,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,mBAAL;QAA0B;UACtB,MAAMA,iBAAiB,GAAG,EAA1B;UAEA,OAAO;YACHC,SAAS,EAAE;cACPG,cAAc,EAAET,KAAK,CAACU,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;cAEPC,cAAc,EAAE,GAFT;cAGPC,cAAc,EAAE,eAHT;cAIPT,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAJ7B,CADR;YAOHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UAPf,CAAP;QAWH;;MACD,KAAK,SAAL;MACA;QAAS;UACL,MAAMA,iBAAiB,GAAGH,QAAQ,GAAG,EAAH,GAAQ,CAA1C;UAEA,OAAO;YACHI,SAAS,EAAE;cACPD,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAD7B,CADR;YAIHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UAJf,CAAP;QAQH;IAtDL;EAwDH,CAzDM,EAyDJ,CAACL,KAAD,EAAQH,OAAR,EAAiBK,QAAjB,EAA2BJ,IAA3B,EAAiCC,UAAjC,CAzDI,CAAP;AA0DH"}