@fountain-ui/core 2.0.0-beta.15 → 2.0.0-beta.18

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

@@ -0,0 +1,6 @@
+import type { ScrollViewProps } from 'react-native';
+import TabCoordinate from './TabCoordinate';
+export interface ScrollableTabsViewProps extends ScrollViewProps {
+    coordinates: TabCoordinate[];
+}
+export default function ScrollableTabsView(props: ScrollableTabsViewProps): JSX.Element;

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

@@ -1,5 +1,4 @@
 import type { ViewProps } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
 import type { OverridableComponentProps } from '../types';
 import type TabCoordinate from './TabCoordinate';
 export default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {
@@ -12,12 +11,12 @@ export default interface TabIndicatorProps extends OverridableComponentProps<Vie
      */
     disabled: boolean;
     /**
-     * If `true`, the tab will be able to scroll.
+     * Initial index.
      */
-    scrollable: boolean;
+    initialIndex: number;
     /**
-     * Shared index value for using animated interpolation.
+     * If `true`, the tab will be able to scroll.
      */
-    sharedIndex: SharedValue<number>;
+    scrollable: boolean;
 }> {
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import type TabsProps from './TabsProps';
-import type { TabsInstance } 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" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "variant" | "keyboardShouldPersistTaps" | "onChange" | "disableIndicator" | "initialIndex" | "scrollable" | "UNSTABLE_sharedIndex"> & React.RefAttributes<TabsInstance>>;
 export default Tabs;

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

@@ -1,21 +1,8 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
 import type { TabVariant } from '../Tab';
-import type { OverridableComponentProps } from '../types';
-export declare type KeyboardDismissMode = 'none' | 'on-drag' | 'interactive';
-export declare type KeyboardShouldPersistTaps = 'never' | boolean | 'always' | 'handled';
-export interface TabsInstance {
-    /**
-     * Get current tab index.
-     */
-    getCurrentIndex: () => number;
-    /**
-     * Function to scroll to a specific tab. Invalid index is ignored.
-     * @param index
-     */
-    setTab: (index: number) => void;
-}
+import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
+import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
     ref?: Ref<TabsInstance>;
     /**
@@ -54,7 +41,7 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
     /**
      * Unstable API.
      */
-    UNSTABLE_sharedIndex?: SharedValue<number>;
+    UNSTABLE_sharedIndex?: SyncAnimatedValue;
     /**
      * The variant to use.
      * @default 'primary'

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

@@ -1,2 +1,3 @@
 export { default } from './Tabs';
-export type { default as TabsProps, TabsInstance } from './TabsProps';
+export type { default as TabsProps } from './TabsProps';
+export type { TabsInstance } from './types';

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

@@ -0,0 +1,9 @@
+export declare type KeyboardDismissMode = 'none' | 'on-drag' | 'interactive';
+export declare type KeyboardShouldPersistTaps = 'never' | boolean | 'always' | 'handled';
+export interface TabsInstance {
+    /**
+     * Function to scroll to a specific tab. Invalid index is ignored.
+     * @param index
+     */
+    setTab: (index: number) => void;
+}

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

@@ -0,0 +1,3 @@
+import type { MonoStore } from '../store';
+import type { SyncAnimatedValue } from '../types';
+export default function useIndexStore(value: SyncAnimatedValue): MonoStore<number>;

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

@@ -1,9 +1,8 @@
 import type { MutableRefObject } from 'react';
 import type { ScrollView, ViewProps } from 'react-native';
-import { SharedValue } from 'react-native-reanimated';
 import type TabCoordinate from './TabCoordinate';
 export interface UseScrollViewReaction {
     scrollViewRef: MutableRefObject<ScrollView | null>;
     onLayout: ViewProps['onLayout'];
 }
-export default function useScrollViewReaction(sharedIndex: SharedValue<number>, coordinates: TabCoordinate[]): UseScrollViewReaction;
+export default function useScrollViewReaction(coordinates: TabCoordinate[]): UseScrollViewReaction;

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

@@ -3,5 +3,6 @@ export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';
 export { default as useContentContainerStyle } from './useContentContainerStyle';
 export { default as useElevationStyle } from './useElevationStyle';
 export { default as useFadeInAppBar } from './useFadeInAppBar';
+export { default as useSyncAnimatedValue } from './useSyncAnimatedValue';
 export { default as useThrottle } from './useThrottle';
 export { default as useValidWindowDimensions } from './useValidWindowDimensions';

package/build/typescript/hooks/useSyncAnimatedValue.d.ts

@@ -0,0 +1,6 @@
+import type { SyncAnimatedValue } from '../types';
+export interface SyncAnimatedValueConfig {
+    initialValue: number;
+    shouldSyncAlways?: boolean;
+}
+export default function useSyncAnimatedValue(config: SyncAnimatedValueConfig): SyncAnimatedValue;

package/build/typescript/index.d.ts

@@ -2,6 +2,7 @@ export * from './styles';
 export * from './types';
 export * from './hooks';
 export * from './utils';
+export * from './store';
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 export { default as AppBar } from './AppBar';

package/build/typescript/store/MockStore.d.ts

@@ -0,0 +1,6 @@
+import { MonoStore, StoreSubscription } from './types';
+export default class MockStore<T> implements MonoStore<T> {
+    dispatch(data: T): void;
+    removeAllListeners(): void;
+    subscribe(listener: (data: T) => void): StoreSubscription;
+}

package/build/typescript/store/SimpleStore.d.ts

@@ -0,0 +1,9 @@
+import { MonoStore, StoreSubscription } from './types';
+export default class SimpleStore<T> implements MonoStore<T> {
+    private data;
+    private listeners;
+    constructor(initialData: T);
+    subscribe(listener: (data: T) => void): StoreSubscription;
+    dispatch(data: T): void;
+    removeAllListeners(): void;
+}

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

@@ -0,0 +1,3 @@
+export { default as SimpleStore } from './SimpleStore';
+export { default as MockStore } from './MockStore';
+export type { MonoStore } from './types';

package/build/typescript/store/types.d.ts

@@ -0,0 +1,8 @@
+export interface StoreSubscription {
+    (): void;
+}
+export interface MonoStore<T> {
+    dispatch: (data: T) => void;
+    subscribe: (listener: (data: T) => void) => StoreSubscription;
+    removeAllListeners: () => void;
+}

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

@@ -1,3 +1,4 @@
+import type { Animated } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 export declare type ExtendedStyle<StyleType extends FountainUiStyle = FountainUiStyle> = StyleType;
 export declare type ComponentProps<P = {}> = BaseProps & Readonly<P>;
@@ -8,3 +9,8 @@ export interface BaseProps extends Readonly<{
 }
 export type { Theme } from '@fountain-ui/styles';
 export declare type CommonComponentColor = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'accent';
+export interface SyncAnimatedValue {
+    animatedValue: Animated.Value;
+    initialValue: number;
+    getCurrentValue: () => number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.18",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,8 +14,8 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^2.0.0-beta.7",
-    "@fountain-ui/utils": "^2.0.0-beta.3"
+    "@fountain-ui/styles": "^2.0.0-beta.8",
+    "@fountain-ui/utils": "^2.0.0-beta.4"
   },
   "peerDependencies": {
     "@react-native-community/slider": "^4.1.6",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "efb9e6cc7cc65e52d1084a0c3664f419dc171240"
+  "gitHead": "9c4af6d69493666d86b7736892f778af775a3c80"
 }

package/src/Tabs/IndexAwareTab.tsx

@@ -1,30 +1,27 @@
 import type { ReactElement } from 'react';
-import React, { cloneElement, useState } from 'react';
-import type { SharedValue } from 'react-native-reanimated';
-import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import React, { cloneElement, useContext, useEffect, useState } from 'react';
+import InternalContext from './InternalContext';
 
 export interface IndexAwareTabProps {
     children: ReactElement;
     index: number;
-    sharedIndex: SharedValue<number>;
 }
 
 export default function IndexAwareTab(props: IndexAwareTabProps) {
     const {
         children,
         index,
-        sharedIndex,
     } = props;
 
-    const [selected, setSelected] = useState(index === sharedIndex.value);
+    const [selected, setSelected] = useState(false);
 
-    useAnimatedReaction(
-        () => index === sharedIndex.value,
-        (result) => {
-            runOnJS(setSelected)(result);
-        },
-        [index],
-    );
+    const { indexStore } = useContext(InternalContext);
+
+    useEffect(() => {
+        return indexStore.subscribe((currentIndex) => {
+            setSelected(currentIndex === index);
+        });
+    }, [indexStore, index]);
 
     return cloneElement(children, { selected });
 };

package/src/Tabs/InternalContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { MonoStore } from '../store';
+import { MockStore } from '../store';
+
+export interface InternalContextValue {
+    indexStore: MonoStore<number>;
+}
+
+const InternalContext = createContext<InternalContextValue>({
+    indexStore: new MockStore(),
+});
+
+export default InternalContext;

package/src/Tabs/ScrollableTabsView.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ScrollViewProps } from 'react-native';
+import { ScrollView } from 'react-native';
+import TabCoordinate from './TabCoordinate';
+import useScrollViewReaction from './useScrollViewReaction';
+
+export interface ScrollableTabsViewProps extends ScrollViewProps {
+    coordinates: TabCoordinate[];
+}
+
+export default function ScrollableTabsView(props: ScrollableTabsViewProps) {
+    const {
+        coordinates,
+        ...scrollViewProps
+    } = props;
+
+    const { scrollViewRef, onLayout } = useScrollViewReaction(coordinates);
+
+    return (
+        <ScrollView
+            ref={scrollViewRef}
+            onLayout={onLayout}
+            {...scrollViewProps}
+        />
+    );
+};

package/src/Tabs/TabIndicator.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import Animated, { Easing, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
 import type TabIndicatorProps from './TabIndicatorProps';
 import { defaultCoordinate } from './TabCoordinate';
+import InternalContext from './InternalContext';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;
 
@@ -31,49 +31,65 @@ const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles
     };
 };
 
-const ANIMATION_CONFIG: Readonly<WithTimingConfig> = {
-    duration: 300,
-    easing: Easing.out(Easing.exp),
+const startAnimation = (value: Animated.Value, toValue: number) => {
+    Animated.timing(value, {
+        toValue: toValue,
+        duration: 300,
+        easing: Easing.bezier(0.25, 1, 0.5, 1),
+        useNativeDriver: true,
+    }).start();
 };
 
 export default function TabIndicator(props: TabIndicatorProps) {
     const {
         coordinates,
         disabled,
+        initialIndex,
         scrollable,
-        sharedIndex,
         style,
         ...otherProps
     } = props;
 
     const styles = useStyles();
 
-    const animatedStyle = useAnimatedStyle(() => {
-        const index = sharedIndex.value;
-
-        const { x1, x2 } = coordinates[index] ?? defaultCoordinate;
+    const computeAnimationValues = useCallback((currentIndex: number) => {
+        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;
 
         const tabWidth = x2 - x1;
 
-        const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
 
         const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
-        const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;
-
-        return {
-            transform: [
-                { translateX: withTiming(translateX, ANIMATION_CONFIG) },
-                { scaleX: withTiming(scaleX, ANIMATION_CONFIG) },
-            ],
-        };
+        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
+
+        return { tx: nextTranslateX, sx: nextScaleX };
     }, [coordinates, scrollable]);
 
+    const {
+        tx: initialTx,
+        sx: initialSx,
+    } = computeAnimationValues(initialIndex);
+
+    const translateX = useRef(new Animated.Value(initialTx)).current;
+    const scaleX = useRef(new Animated.Value(initialSx)).current;
+
+    const { indexStore } = useContext(InternalContext);
+
+    useEffect(() => {
+        return indexStore.subscribe(currentIndex => {
+            const { tx, sx } = computeAnimationValues(currentIndex);
+
+            startAnimation(translateX, tx);
+            startAnimation(scaleX, sx);
+        });
+    }, [indexStore, computeAnimationValues]);
+
     return (
         <Animated.View
             style={[
                 styles.root,
                 disabled ? styles.disabled : undefined,
-                animatedStyle,
+                { transform: [{ translateX }, { scaleX }] },
                 style,
             ]}
             {...otherProps}

package/src/Tabs/TabIndicatorProps.ts

@@ -1,5 +1,4 @@
 import type { ViewProps } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
 import type { OverridableComponentProps } from '../types';
 import type TabCoordinate from './TabCoordinate';
 
@@ -15,12 +14,12 @@ export default interface TabIndicatorProps extends OverridableComponentProps<Vie
     disabled: boolean;
 
     /**
-     * If `true`, the tab will be able to scroll.
+     * Initial index.
      */
-    scrollable: boolean;
+    initialIndex: number;
 
     /**
-     * Shared index value for using animated interpolation.
+     * If `true`, the tab will be able to scroll.
      */
-    sharedIndex: SharedValue<number>;
+    scrollable: boolean;
 }> {}

package/src/Tabs/Tabs.tsx

@@ -1,15 +1,17 @@
 import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';
 import type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';
-import { ScrollView, View } from 'react-native';
-import { useSharedValue } from 'react-native-reanimated';
+import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
+import { useSyncAnimatedValue } from '../hooks';
 import type TabsProps from './TabsProps';
-import type { TabsInstance } from './TabsProps';
+import type { TabsInstance } from './types';
 import TabIndicator from './TabIndicator';
+import ScrollableTabsView from './ScrollableTabsView';
 import IndexAwareTab from './IndexAwareTab';
 import useTabCoordinates from './useTabCoordinates';
-import useScrollViewReaction from './useScrollViewReaction';
+import useIndexStore from './useIndexStore';
+import InternalContext from './InternalContext';
 
 type TabsStyleKeys =
     | 'root'
@@ -50,20 +52,17 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         UNSTABLE_sharedIndex,
     } = props;
 
-    const fallbackSharedIndex = useSharedValue<number>(initialIndex);
+    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });
 
     const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
 
-    const getCurrentIndex = (): number => sharedIndex.value;
-
     const setTab = (newIndex: number) => {
-        sharedIndex.value = newIndex;
+        sharedIndex.animatedValue.setValue(newIndex);
     };
 
     useImperativeHandle(
         ref,
         () => ({
-            getCurrentIndex,
             setTab,
         }),
         [sharedIndex],
@@ -73,7 +72,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const { coordinates, updateCoordinate } = useTabCoordinates(children);
 
-    const { scrollViewRef, onLayout } = useScrollViewReaction(sharedIndex, coordinates);
+    const indexStore = useIndexStore(sharedIndex);
 
     const isReadyToRenderIndicator = coordinates.length > 0;
 
@@ -112,7 +111,6 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             <IndexAwareTab
                 children={tabElement}
                 index={index}
-                sharedIndex={sharedIndex}
             />
         );
     });
@@ -121,44 +119,45 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         <TabIndicator
             coordinates={coordinates}
             disabled={disableIndicator}
+            initialIndex={sharedIndex.initialValue}
             scrollable={scrollable}
-            sharedIndex={sharedIndex}
         />
     ) : null;
 
     return (
-        <View
-            onLayout={onLayout}
-            style={css([
-                styles.root,
-                scrollable ? undefined : styles.fixedRoot,
-                style,
-            ])}
-        >
-            {scrollable ? (
-                <ScrollView
-                    automaticallyAdjustContentInsets={false}
-                    bounces={false}
-                    contentContainerStyle={styles.scrollableContainer}
-                    directionalLockEnabled={true}
-                    horizontal={true}
-                    ref={scrollViewRef}
-                    scrollsToTop={false}
-                    showsHorizontalScrollIndicator={false}
-                    showsVerticalScrollIndicator={false}
-                    keyboardDismissMode={keyboardDismissMode}
-                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-                >
-                    {tabElements}
-                    {tabIndicator}
-                </ScrollView>
-            ) : (
-                <React.Fragment>
-                    {tabElements}
-                    {tabIndicator}
-                </React.Fragment>
-            )}
-        </View>
+        <InternalContext.Provider value={{ indexStore }}>
+            <View
+                style={css([
+                    styles.root,
+                    scrollable ? undefined : styles.fixedRoot,
+                    style,
+                ])}
+            >
+                {scrollable ? (
+                    <ScrollableTabsView
+                        automaticallyAdjustContentInsets={false}
+                        bounces={false}
+                        contentContainerStyle={styles.scrollableContainer}
+                        coordinates={coordinates}
+                        directionalLockEnabled={true}
+                        horizontal={true}
+                        scrollsToTop={false}
+                        showsHorizontalScrollIndicator={false}
+                        showsVerticalScrollIndicator={false}
+                        keyboardDismissMode={keyboardDismissMode}
+                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                    >
+                        {tabElements}
+                        {tabIndicator}
+                    </ScrollableTabsView>
+                ) : (
+                    <React.Fragment>
+                        {tabElements}
+                        {tabIndicator}
+                    </React.Fragment>
+                )}
+            </View>
+        </InternalContext.Provider>
     );
 });
 

package/src/Tabs/TabsProps.ts

@@ -1,32 +1,8 @@
 import type { ReactNode, Ref } from 'react';
-import type { ViewProps } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
+import type { Animated, ViewProps } from 'react-native';
 import type { TabVariant } from '../Tab';
-import type { OverridableComponentProps } from '../types';
-
-export type KeyboardDismissMode =
-    'none'
-    | 'on-drag'
-    | 'interactive'; // ios only
-
-export type KeyboardShouldPersistTaps =
-    'never'
-    | boolean
-    | 'always'
-    | 'handled'; // app only
-
-export interface TabsInstance {
-    /**
-     * Get current tab index.
-     */
-    getCurrentIndex: () => number;
-
-    /**
-     * Function to scroll to a specific tab. Invalid index is ignored.
-     * @param index
-     */
-    setTab: (index: number) => void;
-}
+import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
+import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
     ref?: Ref<TabsInstance>;
@@ -74,7 +50,7 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
     /**
      * Unstable API.
      */
-    UNSTABLE_sharedIndex?: SharedValue<number>;
+    UNSTABLE_sharedIndex?: SyncAnimatedValue;
 
     /**
      * The variant to use.

package/src/Tabs/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Tabs';
-export type { default as TabsProps, TabsInstance } from './TabsProps';
+export type { default as TabsProps } from './TabsProps';
+export type { TabsInstance } from './types';

package/src/Tabs/types.ts

@@ -0,0 +1,18 @@
+export type KeyboardDismissMode =
+    'none'
+    | 'on-drag'
+    | 'interactive'; // ios only
+
+export type KeyboardShouldPersistTaps =
+    'never'
+    | boolean
+    | 'always'
+    | 'handled'; // app only
+
+export interface TabsInstance {
+    /**
+     * Function to scroll to a specific tab. Invalid index is ignored.
+     * @param index
+     */
+    setTab: (index: number) => void;
+}