@fountain-ui/core 2.0.0-beta.75 → 2.0.0-beta.76

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport type { TabVariant } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The color of tab indicator\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { TabIndicatorColor } from './TabIndicatorProps';\nimport type { TabVariant, TabIndicatorSize } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * The color of tab indicator\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Callback function executed when a Tab is selected.\n     * Executed even if the index does not change when a Tab is pressed.\n     * Receives the next tab index and the current tab index as parameters.\n     */\n    onTabSelected?: (newIndex: number, currentIndex: number) => void;\n}> {}\n"],"mappings":""}

package/build/typescript/Modal/ModalProps.d.ts

@@ -21,6 +21,16 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     disableAnimation?: boolean;
+    /**
+     * The number of milliseconds to enter animation.
+     * @default 300
+     */
+    enterDuration?: number;
+    /**
+     * The number of milliseconds to exit animation.
+     * @default 150
+     */
+    exitDuration?: number;
     /**
      * If `true`, the backdrop is not rendered.
      * @default false

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { TabIndicatorColor } from './TabProps';
-declare const _default: React.MemoExoticComponent<({ color }: {
+import type { TabIndicatorColor, TabIndicatorSize } from './TabProps';
+declare const _default: React.MemoExoticComponent<({ indicatorSize, color }: {
+    indicatorSize: TabIndicatorSize;
     color: TabIndicatorColor;
 }) => JSX.Element>;
 export default _default;

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 export declare type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';
 export declare type TabIndicatorColor = 'primary' | 'secondary';
+export declare type TabIndicatorSize = 'full' | 'fit-content';
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
     /**
      * If `true`, the badge is visible.
@@ -12,7 +14,7 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
     /**
      * The label of the Tab.
      */
-    children: string;
+    children: string | React.ReactElement;
     /**
      * If `true`, the indicator is enabled.
      * @default false
@@ -32,6 +34,13 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * @default 'primary'
      */
     indicatorColor?: TabIndicatorColor;
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
     /**
      * If supplied, use this icon on selected state.
      */
@@ -41,5 +50,9 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * @default 'primary'
      */
     variant?: TabVariant;
+    /**
+     * Function to be passed to the child component's onLayout prop.
+     */
+    onTabInnerLayout?: (event: LayoutChangeEvent) => void;
 }> {
 }

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

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

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

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

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

@@ -1,7 +1,7 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
 import type { TabIndicatorColor } from './TabIndicatorProps';
-import type { TabVariant } from '../Tab';
+import type { TabVariant, TabIndicatorSize } from '../Tab';
 import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
@@ -20,6 +20,13 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      * @default 'primary'
      */
     indicatorColor?: TabIndicatorColor;
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
     /**
      * Index of initial tab that should be selected.
      * @default 0
@@ -53,5 +60,11 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      * @default 'primary'
      */
     variant?: TabVariant;
+    /**
+     * Callback function executed when a Tab is selected.
+     * Executed even if the index does not change when a Tab is pressed.
+     * Receives the next tab index and the current tab index as parameters.
+     */
+    onTabSelected?: (newIndex: number, currentIndex: number) => void;
 }> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.75",
+  "version": "2.0.0-beta.76",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "474e7eda06ca67e0986459cb8426e9323eb328a5"
+  "gitHead": "cc48805efae8ceeab7e10b5e39dba30136d3a6e4"
 }

package/src/Dialog/Dialog.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { useEffect } from 'react';
+import { useWindowDimensions, Animated } from 'react-native';
 import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Column from '../Column';
 import Modal from '../Modal';
 import Paper from '../Paper';
+import { useAnimatedValue } from '../hooks';
+import { isNotAndroid12 } from '../utils';
 import { useTheme } from '../styles';
 import type DialogProps from './DialogProps';
 
@@ -20,6 +22,10 @@ type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
 const DIALOG_MAX_WIDTH = 328;
 
+const fadeInDuration = 300;
+const fadeOutDuration = 100;
+const fadeAnimationDelay = 50;
+
 const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
     const theme = useTheme();
 
@@ -74,16 +80,32 @@ export default function Dialog(props: DialogProps) {
 
     const styles = useStyles();
     const theme = useTheme();
+    const animatedOpacity = useAnimatedValue(fullScreen ? 1 : 0);
+
+    useEffect(() => {
+        if(!fullScreen){
+            Animated.timing(animatedOpacity, {
+                toValue: visible ? 1 : 0,
+                duration: visible ? fadeInDuration: fadeOutDuration,
+                delay: visible ? fadeAnimationDelay : 0,
+                useNativeDriver: isNotAndroid12,
+            }).start();
+        }
+    }, [fullScreen, visible]);
 
     return (
         <Modal
             animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}
             onClose={onClose}
+            exitDuration={fullScreen ? 150 : 300}
             visible={visible}
             style={styles.root}
             {...otherProps}
         >
-            <React.Fragment>
+            <Animated.View
+                needsOffscreenAlphaCompositing={true}
+                style={{ opacity: animatedOpacity }}
+            >
                 {topElement ? (
                     <Column style={fullScreen ? undefined : styles.topElementSize}>
                         <Column style={styles.topElementPosition}>
@@ -103,7 +125,7 @@ export default function Dialog(props: DialogProps) {
                 >
                     {children}
                 </Paper>
-            </React.Fragment>
+            </Animated.View>
         </Modal>
     );
 };

package/src/Modal/Modal.tsx

@@ -14,6 +14,9 @@ export interface ModalCloseEvent {
     };
 }
 
+const defaultEnterDuration = 300;
+const defaultExitDuration = 150;
+
 export const createModalCloseEvent = (reason: ModalCloseReasonType) => ({
     metadata: {
         reason,
@@ -26,6 +29,8 @@ export default function Modal(props: ModalProps) {
         backdropOpacity = 0.5,
         children,
         disableAnimation = false,
+        enterDuration = defaultEnterDuration,
+        exitDuration = defaultExitDuration,
         hideBackdrop = false,
         onClose,
         style,
@@ -68,7 +73,8 @@ export default function Modal(props: ModalProps) {
             {!disableAnimation ? (
                 <Slide
                     appear={visible}
-                    exitDuration={150}
+                    enterDuration={enterDuration}
+                    exitDuration={exitDuration}
                     onEnter={() => setExited(false)}
                     onExited={() => setExited(true)}
                     style={animationStyle}

package/src/Modal/ModalProps.ts

@@ -26,6 +26,18 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      */
     disableAnimation?: boolean;
 
+    /**
+     * The number of milliseconds to enter animation.
+     * @default 300
+     */
+    enterDuration?: number;
+
+    /**
+     * The number of milliseconds to exit animation.
+     * @default 150
+     */
+    exitDuration?: number;
+
     /**
      * If `true`, the backdrop is not rendered.
      * @default false

package/src/Snackbar/Snackbar.tsx

@@ -1,14 +1,20 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useEffect } from 'react';
+import { Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Slide from '../Slide';
 import SnackbarContent from '../SnackbarContent';
+import { useAnimatedValue } from '../hooks';
 import { useTheme } from '../styles';
+import { isNotAndroid12 } from '../utils';
 import type SnackbarProps from './SnackbarProps';
 
 type SnackBarStyles = NamedStylesStringUnion<'root'>;
 
+const fadeInDuration = 300;
+const fadeOutDuration = 110;
+const fadeAnimationDelay = 100;
+
 const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
@@ -75,16 +81,32 @@ export default function Snackbar(props: SnackbarProps) {
 
     const [exited, setExited] = React.useState(true);
 
+    const animatedOpacity = useAnimatedValue(0);
+
+    const animatedStyle = {
+        opacity: animatedOpacity,
+    };
+
+    useEffect(() => {
+        Animated.timing(animatedOpacity, {
+            toValue: visible ? 1 : 0,
+            duration: visible ? fadeInDuration : fadeOutDuration,
+            delay: visible ? fadeAnimationDelay : 0,
+            useNativeDriver: isNotAndroid12,
+        }).start();
+    }, [visible]);
+
     if (!visible && exited) {
         return null;
     }
 
     return (
-        <View
-            style={css([
+        <Animated.View
+            style={[
+                animatedStyle,
                 styles.root,
                 style,
-            ])}
+            ]}
             {...otherProps}
         >
             <Slide
@@ -103,6 +125,6 @@ export default function Snackbar(props: SnackbarProps) {
                     />
                 )}
             </Slide>
-        </View>
+        </Animated.View>
     );
 };

package/src/Tab/Tab.tsx

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import { Platform, Text } from 'react-native';
+import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
 import TabBase from '../TabBase';
 import type TabProps from './TabProps';
@@ -10,16 +10,14 @@ const styles = StyleSheet.create({
     root: {
         // TODO: Remove redundant platform checking
         ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),
-    },
-    primary: {
-        minHeight: 40,
-    },
-    secondary: {
         minHeight: 40,
     },
     bottomNavigation: {
         minHeight: 56,
     },
+    filledInner: {
+        justifyContent: 'center',
+    }
 });
 
 export default function Tab(props: TabProps) {
@@ -29,10 +27,12 @@ export default function Tab(props: TabProps) {
         enableIndicator = false,
         icon: defaultIcon,
         indicatorColor = 'primary',
+        indicatorSize = 'full',
         selected = false,
         selectedIcon,
         variant = 'primary',
         style,
+        onTabInnerLayout,
         ...otherProps
     } = props;
 
@@ -44,12 +44,15 @@ export default function Tab(props: TabProps) {
 
     const tabBaseStyle = css([
         styles.root,
-        variant === 'primary'
-            ? styles.primary
-            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),
+        variant === 'bottom-navigation' && styles.bottomNavigation,
         style,
     ]);
 
+    const tabInnerStyle = css([
+        styles.root,
+        styles.filledInner,
+    ]);
+
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => variant === 'primary'
             ? typo.h2
@@ -62,13 +65,12 @@ export default function Tab(props: TabProps) {
     const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
     const iconElement = icon ? cloneElement(icon, { fill: color }) : null;
 
-    return (
-        <TabBase
-            pressEffect={pressEffect}
-            style={tabBaseStyle}
-            vertical={vertical}
-            {...otherProps}
-        >
+    const tabElement = typeof children !== 'string' ? (
+        React.cloneElement(children, {
+            selected,
+        })
+    ) : (
+        <React.Fragment>
             <Badge
                 children={iconElement}
                 invisible={!badgeVisible}
@@ -78,8 +80,32 @@ export default function Tab(props: TabProps) {
                 children={children}
                 style={css(fontStyle)}
             />
+        </React.Fragment>
+    );
+    const tabIndicator = (enableIndicator && selected)
+        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>
+        : null;
+
+    return (
+        <TabBase
+            pressEffect={pressEffect}
+            style={tabBaseStyle}
+            vertical={vertical}
+            {...otherProps}
+        >
+            {indicatorSize === 'fit-content' ? (
+                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>
+                    {tabElement}
+
+                    {tabIndicator}
+                </View>
+            ) : (
+                <React.Fragment>
+                    {tabElement}
 
-            {(enableIndicator && selected) ? <TabIndicator color={indicatorColor}/> : null}
+                    {tabIndicator}
+                </React.Fragment>
+            )}
         </TabBase>
     );
 };

package/src/Tab/TabIndicator.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
-import type { TabIndicatorColor } from './TabProps';
+import type { TabIndicatorColor, TabIndicatorSize } from './TabProps';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root'>;
 
-const useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =
-    function (color: TabIndicatorColor): TabIndicatorStyles {
+const useStyles: (color: TabIndicatorColor, indicatorSize: TabIndicatorSize) => TabIndicatorStyles =
+    function (color: TabIndicatorColor, indicatorSize): TabIndicatorStyles {
         const theme = useTheme();
 
         return {
@@ -15,15 +15,15 @@ const useStyles: (color: TabIndicatorColor) => TabIndicatorStyles =
                 backgroundColor: theme.palette[color].main,
                 bottom: 0,
                 height: 2,
-                left: 12,
-                right: 12,
+                left: indicatorSize === 'fit-content' ? 0 : 12,
+                right: indicatorSize === 'fit-content' ? 0 : 12,
                 position: 'absolute',
             },
         };
     };
 
-const TabIndicator = function TabIndicator({ color }: { color: TabIndicatorColor }) {
-    const styles = useStyles(color);
+const TabIndicator = function TabIndicator({ indicatorSize, color }: { indicatorSize: TabIndicatorSize; color: TabIndicatorColor }) {
+    const styles = useStyles(color, indicatorSize);
 
     return (
         <View

package/src/Tab/TabProps.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
 import type { TabBaseProps } from '../TabBase';
 import type { OverridableComponentProps } from '../types';
 
 export type TabVariant = 'primary' | 'secondary' | 'bottom-navigation';
 export type TabIndicatorColor = 'primary' | 'secondary'
+export type TabIndicatorSize = 'full' | 'fit-content';
 
 export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
     /**
@@ -15,7 +17,7 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
     /**
      * The label of the Tab.
      */
-    children: string;
+    children: string | React.ReactElement;
 
     /**
      * If `true`, the indicator is enabled.
@@ -40,6 +42,14 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      */
     indicatorColor?: TabIndicatorColor;
 
+    /**
+     * The size of tab indicator.
+     * 'full' adjusts the indicator to the size of the Tab,
+     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
+     * @default 'full'
+     */
+    indicatorSize?: TabIndicatorSize;
+
     /**
      * If supplied, use this icon on selected state.
      */
@@ -50,4 +60,9 @@ export default interface TabProps extends OverridableComponentProps<TabBaseProps
      * @default 'primary'
      */
     variant?: TabVariant;
+
+    /**
+     * Function to be passed to the child component's onLayout prop.
+     */
+    onTabInnerLayout?: (event: LayoutChangeEvent) => void;
 }> {}

package/src/Tab/index.ts

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

package/src/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
@@ -45,6 +45,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         indicatorColor = 'primary',
         initialIndex = 0,
         disableIndicator = false,
+        indicatorSize = 'full',
         keyboardDismissMode = 'none',
         keyboardShouldPersistTaps = 'never',
         onChange,
@@ -52,13 +53,19 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         style,
         variant = 'primary',
         UNSTABLE_sharedIndex,
+        onTabSelected,
     } = props;
 
     const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });
     const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
     const realInitialIndex = sharedIndex.initialValue;
 
+    const currentIndexRef = useRef(initialIndex);
+
     const setTab = (newIndex: number) => {
+        const currentIndex = currentIndexRef.current;
+        onTabSelected?.(newIndex, currentIndex);
+
         sharedIndex.animatedValue.setValue(newIndex);
     };
 
@@ -72,19 +79,48 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const styles = useStyles();
 
-    const [coordinates, updateCoordinate] = useTabCoordinates(children);
+    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
+    const [innerCoordinates, updateInnerCoordinate] = useTabCoordinates(children);
 
-    const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);
+    const canRenderIndicator = indicatorSize === 'fit-content'
+        ? isEveryTabCoordinatesDefined(innerCoordinates, children)
+        : isEveryTabCoordinatesDefined(outerCoordinates, children);
 
     const indexStore = useIndexStore(sharedIndex);
 
+    const coordinates = useMemo(() => {
+        if (indicatorSize !== 'fit-content') {
+            return outerCoordinates;
+        }
+
+        return innerCoordinates.map((coordinate, idx) => {
+            const { x1, x2 } = coordinate;
+            const { x1: outerX1 } = outerCoordinates[idx];
+            return {
+                x1: x1 + outerX1,
+                x2: x2 + outerX1,
+            }
+        });
+    }, [outerCoordinates, innerCoordinates, variant]);
+
     useEffect(() => {
         return indexStore.subscribe(newIndex => {
             onChange?.(newIndex);
+            currentIndexRef.current = newIndex;
         });
     }, [indexStore, onChange]);
 
     const tabElements = React.Children.map(children, (child, index) => {
+        if (!child) {
+            return null;
+        }
+
+        const onTabInnerLayout = (event: LayoutChangeEvent) => {
+            const { x, width } = event.nativeEvent.layout;
+
+            updateInnerCoordinate(index, x, width);
+        };
+
         const onLayout = (event: LayoutChangeEvent) => {
             const { x, width } = event.nativeEvent.layout;
 
@@ -111,10 +147,12 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         const tabElement = cloneElement(child, {
             enableIndicator: !disableIndicator && !canRenderIndicator,
             indicatorColor,
+            onTabInnerLayout,
             onLayout,
             onPress,
             onMouseDown,
             variant,
+            indicatorSize,
             style: scrollable ? undefined : styles.fixedTab,
         });
 
@@ -125,7 +163,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                 initialIndex={realInitialIndex}
             />
         );
-    });
+    })?.filter(Boolean);
 
     const tabIndicator = canRenderIndicator ? (
         <TabIndicator