rnnovaui 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/Accordion/UIAccordionContent.js

@@ -3,7 +3,6 @@ import React, { memo, useEffect, useRef, useState } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 
 import { useUIAccordion } from "./UIAccordion";
-
 import { useUIAccordionItem } from "./UIAccordionItem";
 
 export const UIAccordionContent = memo(function UIAccordionContent({
@@ -14,88 +13,205 @@ export const UIAccordionContent = memo(function UIAccordionContent({
   innerStyle,
 
   testID,
+
+  onLayout,
 }) {
   const accordion = useUIAccordion();
 
   const item = useUIAccordionItem();
 
-  const progress = useRef(new Animated.Value(item.open ? 1 : 0)).current;
+  const heightAnimation = useRef(new Animated.Value(item.open ? 1 : 0)).current;
+
+  const opacityAnimation = useRef(
+    new Animated.Value(item.open ? 1 : 0),
+  ).current;
+
+  const [contentHeight, setContentHeight] = useState(0);
 
   const [mounted, setMounted] = useState(item.open);
 
+  /*
+   * ------------------------------------------------
+   * MEASURE CONTENT
+   * ------------------------------------------------
+   */
+
+  const handleLayout = (event) => {
+    const height = event.nativeEvent.layout.height;
+
+    if (height !== contentHeight) {
+      setContentHeight(height);
+    }
+
+    onLayout?.(event);
+  };
+
+  /*
+   * ------------------------------------------------
+   * OPEN / CLOSE
+   * ------------------------------------------------
+   */
+
   useEffect(() => {
     if (item.open) {
+      /*
+       * Mount before opening.
+       */
       setMounted(true);
 
       if (!accordion.animated) {
-        progress.setValue(1);
+        heightAnimation.setValue(1);
+
+        opacityAnimation.setValue(1);
+
         return;
       }
 
-      Animated.timing(progress, {
-        toValue: 1,
+      /*
+       * Smooth opening.
+       */
+      Animated.parallel([
+        Animated.timing(heightAnimation, {
+          toValue: 1,
 
-        duration: accordion.animationDuration,
+          duration: accordion.animationDuration,
 
-        useNativeDriver: false,
-      }).start();
+          useNativeDriver: false,
+        }),
+
+        Animated.timing(opacityAnimation, {
+          toValue: 1,
+
+          duration: Math.min(accordion.animationDuration, 180),
+
+          useNativeDriver: false,
+        }),
+      ]).start();
 
       return;
     }
 
+    /*
+     * ------------------------------------------------
+     * CLOSE
+     * ------------------------------------------------
+     */
+
     if (!accordion.animated) {
-      progress.setValue(0);
+      heightAnimation.setValue(0);
+
+      opacityAnimation.setValue(0);
+
       setMounted(false);
+
       return;
     }
 
-    Animated.timing(progress, {
-      toValue: 0,
+    /*
+     * Animate to zero first.
+     */
+    Animated.parallel([
+      Animated.timing(heightAnimation, {
+        toValue: 0,
 
-      duration: accordion.animationDuration,
+        duration: accordion.animationDuration,
 
-      useNativeDriver: false,
-    }).start(() => {
-      setMounted(false);
-    });
-  }, [item.open, accordion.animated, accordion.animationDuration, progress]);
+        useNativeDriver: false,
+      }),
+
+      Animated.timing(opacityAnimation, {
+        toValue: 0,
+
+        duration: Math.min(accordion.animationDuration, 160),
 
-  if (!mounted) {
-    return null;
+        useNativeDriver: false,
+      }),
+    ]).start(({ finished }) => {
+      if (finished) {
+        setMounted(false);
+      }
+    });
+  }, [
+    item.open,
+    accordion.animated,
+    accordion.animationDuration,
+    heightAnimation,
+    opacityAnimation,
+  ]);
+
+  /*
+   * ------------------------------------------------
+   * CLOSED
+   * ------------------------------------------------
+   */
+
+  if (!mounted && !item.open) {
+    return (
+      <View
+        style={{
+          position: "absolute",
+
+          opacity: 0,
+
+          pointerEvents: "none",
+        }}
+      >
+        <View onLayout={handleLayout}>{children}</View>
+      </View>
+    );
   }
 
+  /*
+   * ------------------------------------------------
+   * ANIMATED HEIGHT
+   * ------------------------------------------------
+   */
+
+  const animatedHeight =
+    contentHeight > 0
+      ? heightAnimation.interpolate({
+          inputRange: [0, 1],
+
+          outputRange: [0, contentHeight],
+        })
+      : undefined;
+
+  /*
+   * ------------------------------------------------
+   * RENDER
+   * ------------------------------------------------
+   */
+
   return (
     <Animated.View
       testID={testID}
       style={[
-        styles.animatedContainer,
+        styles.container,
 
         {
-          opacity: progress,
-
-          maxHeight: progress.interpolate({
-            inputRange: [0, 1],
+          height: animatedHeight,
 
-            outputRange: [0, 1000],
-          }),
+          opacity: opacityAnimation,
         },
 
         style,
       ]}
     >
-      <View style={[styles.inner, innerStyle]}>{children}</View>
+      <View style={[styles.content, innerStyle]} onLayout={handleLayout}>
+        {children}
+      </View>
     </Animated.View>
   );
 });
 
 const styles = StyleSheet.create({
-  animatedContainer: {
+  container: {
     width: "100%",
 
     overflow: "hidden",
   },
 
-  inner: {
+  content: {
     width: "100%",
   },
 });

package/src/components/Tabs/UITabs.js

@@ -1,7 +1,5 @@
 import React, {
-  Children,
   createContext,
-  isValidElement,
   memo,
   useCallback,
   useContext,
@@ -12,31 +10,80 @@ import React, {
 import { StyleSheet, View } from "react-native";
 
 import { useUITheme } from "../../theme";
-import { UITabsList } from "./UITabsList";
-import { UITabsTrigger } from "./UITabsTrigger";
-import { UITabsContent } from "./UITabsContent";
-import { UITabsIndicator } from "./UITabsIndicator";
 
-const TabsContext = createContext(null);
+const UITabsContext = createContext(null);
 
-const UI_TABS_SIZES = {
+const TAB_SIZES = {
   sm: "sm",
   md: "md",
   lg: "lg",
 };
 
+const ANIMATION_PRESETS = {
+  none: {
+    indicator: "none",
+    content: "none",
+    press: "none",
+  },
+
+  subtle: {
+    indicator: "slide",
+    content: "fade",
+    press: "scale",
+  },
+
+  smooth: {
+    indicator: "slide",
+    content: "fadeSlide",
+    press: "scale",
+  },
+
+  snappy: {
+    indicator: "spring",
+    content: "slideFade",
+    press: "scale",
+  },
+
+  spring: {
+    indicator: "spring",
+    content: "slideScale",
+    press: "scale",
+  },
+
+  bouncy: {
+    indicator: "spring",
+    content: "springScale",
+    press: "scale",
+  },
+};
+
 export const UITabs = memo(function UITabs({
   children,
 
   value,
-  defaultValue,
+  defaultValue = null,
 
   onValueChange,
 
   size = "md",
 
   animated = true,
-  animationDuration = 220,
+
+  animationPreset = "smooth",
+
+  indicatorAnimation,
+  contentAnimation,
+  pressAnimation,
+
+  animationDuration = 260,
+
+  spring = {
+    damping: 18,
+    stiffness: 180,
+    mass: 0.8,
+  },
+
+  directionAware = true,
 
   variant = "default",
 
@@ -44,12 +91,14 @@ export const UITabs = memo(function UITabs({
   inactiveColor,
 
   indicatorColor,
+
   indicatorHeight = 2,
 
   indicatorWidth = "content",
 
   disabled = false,
 
+  style,
   containerStyle,
 
   testID,
@@ -60,25 +109,38 @@ export const UITabs = memo(function UITabs({
 
   const controlled = value !== undefined;
 
-  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
 
   const currentValue = controlled ? value : internalValue;
 
-  const safeSize = UI_TABS_SIZES[size] ? size : "md";
+  const [previousValue, setPreviousValue] = useState(currentValue);
+
+  const safeSize = TAB_SIZES[size] ? size : "md";
+
+  const safePreset =
+    ANIMATION_PRESETS[animationPreset] || ANIMATION_PRESETS.smooth;
+
+  const resolvedIndicatorAnimation = indicatorAnimation ?? safePreset.indicator;
+
+  const resolvedContentAnimation = contentAnimation ?? safePreset.content;
+
+  const resolvedPressAnimation = pressAnimation ?? safePreset.press;
 
   const changeValue = useCallback(
     (nextValue) => {
-      if (disabled) {
+      if (disabled || nextValue === currentValue) {
         return;
       }
 
+      setPreviousValue(currentValue);
+
       if (!controlled) {
         setInternalValue(nextValue);
       }
 
       onValueChange?.(nextValue);
     },
-    [disabled, controlled, onValueChange],
+    [disabled, currentValue, controlled, onValueChange],
   );
 
   const contextValue = useMemo(
@@ -87,6 +149,8 @@ export const UITabs = memo(function UITabs({
 
       value: currentValue,
 
+      previousValue,
+
       setValue: changeValue,
 
       size: safeSize,
@@ -95,11 +159,21 @@ export const UITabs = memo(function UITabs({
 
       animationDuration,
 
+      spring,
+
+      directionAware,
+
+      indicatorAnimation: animated ? resolvedIndicatorAnimation : "none",
+
+      contentAnimation: animated ? resolvedContentAnimation : "none",
+
+      pressAnimation: animated ? resolvedPressAnimation : "none",
+
       variant,
 
       activeColor: activeColor || colors.primary || "#FF5A1F",
 
-      inactiveColor: inactiveColor || colors.textSecondary || "#525252",
+      inactiveColor: inactiveColor || colors.textSecondary || "#737373",
 
       indicatorColor:
         indicatorColor || activeColor || colors.primary || "#FF5A1F",
@@ -113,10 +187,16 @@ export const UITabs = memo(function UITabs({
     [
       colors,
       currentValue,
+      previousValue,
       changeValue,
       safeSize,
       animated,
       animationDuration,
+      spring,
+      directionAware,
+      resolvedIndicatorAnimation,
+      resolvedContentAnimation,
+      resolvedPressAnimation,
       variant,
       activeColor,
       inactiveColor,
@@ -128,31 +208,28 @@ export const UITabs = memo(function UITabs({
   );
 
   return (
-    <TabsContext.Provider value={contextValue}>
-      <View testID={testID} style={[styles.container, containerStyle]}>
-        {Children.map(children, (child) => {
-          if (!isValidElement(child)) {
-            return child;
-          }
-
-          return child;
-        })}
+    <UITabsContext.Provider value={contextValue}>
+      <View testID={testID} style={[styles.container, containerStyle, style]}>
+        {children}
       </View>
-    </TabsContext.Provider>
+    </UITabsContext.Provider>
   );
 });
 
 export function useUITabs() {
-  const context = useContext(TabsContext);
+  const context = useContext(UITabsContext);
 
   if (!context) {
-    throw new Error("UITabs components must be used inside UITabs.");
+    throw new Error("UITabs components must be used inside <UITabs>.");
   }
 
   return context;
 }
 
-export const UITabsSizes = UI_TABS_SIZES;
+export {
+  TAB_SIZES as UITabsSizes,
+  ANIMATION_PRESETS as UITabsAnimationPresets,
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -161,10 +238,3 @@ const styles = StyleSheet.create({
 });
 
 UITabs.displayName = "UITabs";
-UITabs.List = UITabsList;
-
-UITabs.Trigger = UITabsTrigger;
-
-UITabs.Content = UITabsContent;
-
-UITabs.Indicator = UITabsIndicator;

package/src/components/Tabs/UITabsContent.js

@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useRef, useState } from "react";
 
-import { Animated, View } from "react-native";
+import { Animated, StyleSheet } from "react-native";
 
 import { useUITabs } from "./UITabs";
 
@@ -11,6 +11,7 @@ export const UITabsContent = memo(function UITabsContent({
 
   style,
 
+  animation,
   animationDuration,
 
   testID,
@@ -19,96 +20,81 @@ export const UITabsContent = memo(function UITabsContent({
 
   const active = tabs.value === value;
 
+  const animationType = animation ?? tabs.contentAnimation;
+
   const [mounted, setMounted] = useState(active);
 
-  const opacity = useRef(new Animated.Value(active ? 1 : 0)).current;
+  const progress = useRef(new Animated.Value(active ? 1 : 0)).current;
 
-  const translateY = useRef(new Animated.Value(active ? 0 : 5)).current;
+  const direction = getDirection(tabs, value);
 
   useEffect(() => {
+    const duration = animationDuration ?? tabs.animationDuration;
+
     if (active) {
       setMounted(true);
 
-      if (!tabs.animated) {
-        opacity.setValue(1);
-        translateY.setValue(0);
+      progress.setValue(0);
+
+      if (animationType === "none") {
+        progress.setValue(1);
 
         return;
       }
 
-      Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: 1,
-
-          duration: animationDuration ?? tabs.animationDuration,
-
-          useNativeDriver: true,
-        }),
-
-        Animated.timing(translateY, {
-          toValue: 0,
+      Animated.timing(progress, {
+        toValue: 1,
 
-          duration: animationDuration ?? tabs.animationDuration,
+        duration,
 
-          useNativeDriver: true,
-        }),
-      ]).start();
+        useNativeDriver: true,
+      }).start();
 
       return;
     }
 
-    if (!tabs.animated) {
-      opacity.setValue(0);
+    if (animationType === "none") {
+      progress.setValue(0);
+
       setMounted(false);
 
       return;
     }
 
-    Animated.parallel([
-      Animated.timing(opacity, {
-        toValue: 0,
-
-        duration: animationDuration ?? tabs.animationDuration,
-
-        useNativeDriver: true,
-      }),
-
-      Animated.timing(translateY, {
-        toValue: 5,
+    Animated.timing(progress, {
+      toValue: 0,
 
-        duration: animationDuration ?? tabs.animationDuration,
+      duration,
 
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
+      useNativeDriver: true,
+    }).start(() => {
       setMounted(false);
     });
   }, [
     active,
-    tabs.animated,
-    tabs.animationDuration,
+    animationType,
     animationDuration,
-    opacity,
-    translateY,
+    tabs.animationDuration,
+    progress,
   ]);
 
   if (!mounted) {
     return null;
   }
 
+  const transforms = getContentTransforms(animationType, progress, direction);
+
   return (
     <Animated.View
       testID={testID}
       accessibilityRole="tabpanel"
       style={[
+        styles.container,
+
         {
-          opacity,
+          opacity: getOpacity(animationType, progress),
 
-          transform: [
-            {
-              translateY,
-            },
-          ],
+          transform: transforms,
         },
 
         style,
@@ -119,4 +105,86 @@ export const UITabsContent = memo(function UITabsContent({
   );
 });
 
+function getDirection(tabs, value) {
+  if (!tabs.directionAware) {
+    return 1;
+  }
+
+  if (tabs.previousValue === null || tabs.previousValue === undefined) {
+    return 1;
+  }
+
+  return String(value) > String(tabs.previousValue) ? 1 : -1;
+}
+
+function getOpacity(type, progress) {
+  if (type === "slide" || type === "scale") {
+    return 1;
+  }
+
+  return progress;
+}
+
+function getContentTransforms(type, progress, direction) {
+  switch (type) {
+    case "slide":
+      return [
+        {
+          translateX: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [24 * direction, 0],
+          }),
+        },
+      ];
+
+    case "fadeSlide":
+    case "slideFade":
+      return [
+        {
+          translateX: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [20 * direction, 0],
+          }),
+        },
+      ];
+
+    case "scale":
+      return [
+        {
+          scale: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.96, 1],
+          }),
+        },
+      ];
+
+    case "slideScale":
+    case "springScale":
+      return [
+        {
+          translateX: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [18 * direction, 0],
+          }),
+        },
+        {
+          scale: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.97, 1],
+          }),
+        },
+      ];
+
+    case "fade":
+    default:
+      return [];
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+});
+
 UITabsContent.displayName = "UITabs.Content";

package/src/components/Tabs/UITabsIndicator.js

@@ -5,8 +5,9 @@ import { View } from "react-native";
 import { useUITabs } from "./UITabs";
 
 export const UITabsIndicator = memo(function UITabsIndicator({
-  children,
   style,
+
+  children,
 }) {
   const tabs = useUITabs();
 

package/src/components/Tabs/UITabsList.js

@@ -15,19 +15,25 @@ export const UITabsList = memo(function UITabsList({
 
   style,
 
+  backgroundColor,
+
+  borderBottomWidth = 0,
+
+  borderBottomColor,
+
   testID,
 }) {
   const tabs = useUITabs();
 
-  const sizePadding = tabs.size === "sm" ? 8 : tabs.size === "lg" ? 16 : 12;
+  const horizontalPadding =
+    tabs.size === "sm" ? 6 : tabs.size === "lg" ? 14 : 10;
 
-  const content = (
+  const row = (
     <View
       style={[
         styles.row,
-
         {
-          paddingHorizontal: sizePadding,
+          paddingHorizontal: horizontalPadding,
         },
       ]}
     >
@@ -35,25 +41,39 @@ export const UITabsList = memo(function UITabsList({
     </View>
   );
 
+  const containerStyle = [
+    styles.container,
+
+    {
+      backgroundColor: backgroundColor || "transparent",
+
+      borderBottomWidth,
+
+      borderBottomColor: borderBottomColor || tabs.colors.border || "#E5E5E5",
+    },
+
+    style,
+  ];
+
   if (scrollable) {
     return (
       <ScrollView
         testID={testID}
         horizontal
         showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
-        bounces
         keyboardShouldPersistTaps="handled"
+        bounces
         contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
-        style={style}
+        style={containerStyle}
       >
-        {content}
+        {row}
       </ScrollView>
     );
   }
 
   return (
-    <View testID={testID} style={[styles.container, style]}>
-      {content}
+    <View testID={testID} style={containerStyle}>
+      {row}
     </View>
   );
 });
@@ -61,7 +81,6 @@ export const UITabsList = memo(function UITabsList({
 const styles = StyleSheet.create({
   container: {
     width: "100%",
-    overflow: "hidden",
   },
 
   scrollContent: {

package/src/components/Tabs/UITabsTrigger.js

@@ -22,13 +22,26 @@ export const UITabsTrigger = memo(function UITabsTrigger({
   inactiveColor,
 
   style,
+  activeStyle,
+  inactiveStyle,
+
   contentStyle,
+
   textStyle,
+  activeTextStyle,
+  inactiveTextStyle,
+
   iconStyle,
+
   badgeStyle,
+  badgeTextStyle,
 
-  testID,
+  pressAnimation,
+  pressScale = 0.96,
+
+  indicator = true,
 
+  testID,
   accessibilityLabel,
 }) {
   const tabs = useUITabs();
@@ -37,23 +50,45 @@ export const UITabsTrigger = memo(function UITabsTrigger({
 
   const isDisabled = disabled || tabs.disabled;
 
-  const progress = useRef(new Animated.Value(active ? 1 : 0)).current;
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const resolvedPressAnimation = pressAnimation ?? tabs.pressAnimation;
 
   useEffect(() => {
-    if (!tabs.animated) {
-      progress.setValue(active ? 1 : 0);
+    if (resolvedPressAnimation === "none") {
+      scale.setValue(1);
+    }
+  }, [resolvedPressAnimation, scale]);
 
+  const animatePressIn = () => {
+    if (resolvedPressAnimation === "none") {
       return;
     }
 
-    Animated.timing(progress, {
-      toValue: active ? 1 : 0,
+    if (resolvedPressAnimation === "scale") {
+      Animated.spring(scale, {
+        toValue: pressScale,
 
-      duration: tabs.animationDuration,
+        ...tabs.spring,
+
+        useNativeDriver: true,
+      }).start();
+    }
+  };
+
+  const animatePressOut = () => {
+    if (resolvedPressAnimation === "none") {
+      return;
+    }
+
+    Animated.spring(scale, {
+      toValue: 1,
+
+      ...tabs.spring,
 
       useNativeDriver: true,
     }).start();
-  }, [active, tabs.animated, tabs.animationDuration, progress]);
+  };
 
   const handlePress = (event) => {
     if (isDisabled) {
@@ -65,9 +100,9 @@ export const UITabsTrigger = memo(function UITabsTrigger({
     onPress?.(event);
   };
 
-  const resolvedActiveColor = activeColor || tabs.activeColor;
+  const activeTextColor = activeColor || tabs.activeColor;
 
-  const resolvedInactiveColor = inactiveColor || tabs.inactiveColor;
+  const inactiveTextColor = inactiveColor || tabs.inactiveColor;
 
   const iconElement = icon ? (
     <View
@@ -83,124 +118,189 @@ export const UITabsTrigger = memo(function UITabsTrigger({
     </View>
   ) : null;
 
-  const textElement = (
-    <Text
-      numberOfLines={1}
+  return (
+    <Animated.View
       style={[
-        styles.text,
+        styles.animatedWrapper,
 
         {
-          fontSize: tabs.size === "sm" ? 12 : tabs.size === "lg" ? 16 : 14,
-
-          color: active ? resolvedActiveColor : resolvedInactiveColor,
-
-          opacity: isDisabled ? 0.45 : 1,
+          transform: [
+            {
+              scale,
+            },
+          ],
         },
-
-        textStyle,
       ]}
     >
-      {children}
-    </Text>
-  );
-
-  return (
-    <Pressable
-      testID={testID}
-      disabled={isDisabled}
-      onPress={handlePress}
-      accessibilityRole="tab"
-      accessibilityState={{
-        selected: active,
-        disabled: isDisabled,
-      }}
-      accessibilityLabel={accessibilityLabel}
-      style={({ pressed }) => [
-        styles.trigger,
+      <Pressable
+        testID={testID}
+        disabled={isDisabled}
+        onPress={handlePress}
+        onPressIn={animatePressIn}
+        onPressOut={animatePressOut}
+        accessibilityRole="tab"
+        accessibilityState={{
+          selected: active,
+          disabled: isDisabled,
+        }}
+        accessibilityLabel={accessibilityLabel}
+        style={[
+          styles.trigger,
 
-        {
-          minHeight: tabs.size === "sm" ? 42 : tabs.size === "lg" ? 56 : 48,
+          {
+            minHeight: tabs.size === "sm" ? 42 : tabs.size === "lg" ? 58 : 50,
 
-          opacity: pressed ? 0.7 : 1,
-        },
+            opacity: isDisabled ? 0.45 : 1,
+          },
 
-        style,
-      ]}
-    >
-      <View
-        style={[
-          styles.content,
+          inactiveStyle,
 
-          iconPosition === "right" ? styles.contentRight : null,
+          active ? activeStyle : null,
 
-          contentStyle,
+          style,
         ]}
       >
-        {iconPosition === "left" ? iconElement : null}
-
-        {textElement}
-
-        {iconPosition === "right" ? iconElement : null}
+        <View style={[styles.content, contentStyle]}>
+          {iconPosition === "left" ? iconElement : null}
 
-        {badge !== undefined ? (
-          <View
+          <Text
+            numberOfLines={1}
             style={[
-              styles.badge,
+              styles.text,
 
               {
-                backgroundColor: active
-                  ? resolvedActiveColor
-                  : tabs.colors.surfaceSecondary || "#F1F1F1",
+                fontSize:
+                  tabs.size === "sm" ? 12 : tabs.size === "lg" ? 16 : 14,
+
+                color: active ? activeTextColor : inactiveTextColor,
               },
 
-              badgeStyle,
+              textStyle,
+
+              inactiveTextStyle,
+
+              active ? activeTextStyle : null,
             ]}
           >
-            <Text
+            {children}
+          </Text>
+
+          {iconPosition === "right" ? iconElement : null}
+
+          {badge !== undefined ? (
+            <View
               style={[
-                styles.badgeText,
+                styles.badge,
 
                 {
-                  color: active
-                    ? tabs.colors.onPrimary || "#FFFFFF"
-                    : tabs.colors.textSecondary || "#525252",
+                  backgroundColor: active
+                    ? activeTextColor
+                    : tabs.colors.surfaceSecondary || "#EEEEEE",
                 },
+
+                badgeStyle,
               ]}
             >
-              {badge}
-            </Text>
+              <Text
+                style={[
+                  styles.badgeText,
+
+                  {
+                    color: active
+                      ? tabs.colors.onPrimary || "#FFFFFF"
+                      : tabs.colors.textSecondary || "#525252",
+                  },
+
+                  badgeTextStyle,
+                ]}
+              >
+                {badge}
+              </Text>
+            </View>
+          ) : null}
+        </View>
+
+        {indicator ? (
+          <View style={styles.indicatorContainer}>
+            <AnimatedIndicator active={active} />
           </View>
         ) : null}
-      </View>
+      </Pressable>
+    </Animated.View>
+  );
+});
 
-      <Animated.View
-        style={[
-          styles.indicator,
+function AnimatedIndicator({ active }) {
+  const tabs = useUITabs();
 
-          {
-            backgroundColor: tabs.indicatorColor,
+  const progress = useRef(new Animated.Value(active ? 1 : 0)).current;
+
+  useEffect(() => {
+    if (tabs.indicatorAnimation === "none") {
+      progress.setValue(active ? 1 : 0);
 
-            height: tabs.indicatorHeight,
+      return;
+    }
 
-            opacity: progress,
+    if (tabs.indicatorAnimation === "spring") {
+      Animated.spring(progress, {
+        toValue: active ? 1 : 0,
 
-            transform: [
-              {
-                scaleX: progress,
-              },
-            ],
-          },
+        ...tabs.spring,
 
-          tabs.indicatorWidth === "full"
-            ? styles.indicatorFull
-            : styles.indicatorContent,
-        ]}
-      />
-    </Pressable>
+        useNativeDriver: true,
+      }).start();
+
+      return;
+    }
+
+    Animated.timing(progress, {
+      toValue: active ? 1 : 0,
+
+      duration: tabs.animationDuration,
+
+      useNativeDriver: true,
+    }).start();
+  }, [
+    active,
+    tabs.indicatorAnimation,
+    tabs.animationDuration,
+    tabs.spring,
+    progress,
+  ]);
+
+  return (
+    <Animated.View
+      style={[
+        styles.indicator,
+
+        {
+          height: tabs.indicatorHeight,
+
+          backgroundColor: tabs.indicatorColor,
+
+          opacity: progress,
+
+          transform: [
+            {
+              scaleX: progress,
+            },
+          ],
+        },
+
+        tabs.indicatorWidth === "full"
+          ? styles.indicatorFull
+          : styles.indicatorContent,
+      ]}
+    />
   );
-});
+}
 
 const styles = StyleSheet.create({
+  animatedWrapper: {
+    flexShrink: 0,
+  },
+
   trigger: {
     position: "relative",
 
@@ -219,8 +319,10 @@ const styles = StyleSheet.create({
     gap: 6,
   },
 
-  contentRight: {
-    flexDirection: "row",
+  text: {
+    fontWeight: "600",
+
+    includeFontPadding: false,
   },
 
   icon: {
@@ -237,12 +339,6 @@ const styles = StyleSheet.create({
     marginLeft: 2,
   },
 
-  text: {
-    fontWeight: "600",
-
-    includeFontPadding: false,
-  },
-
   badge: {
     minWidth: 18,
     height: 18,
@@ -264,14 +360,18 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
   },
 
-  indicator: {
+  indicatorContainer: {
     position: "absolute",
 
+    left: 0,
+    right: 0,
     bottom: 0,
+  },
 
-    left: 0,
+  indicator: {
+    position: "absolute",
 
-    right: 0,
+    bottom: 0,
   },
 
   indicatorFull: {

package/src/components/Tabs/index.js

@@ -1,9 +1,16 @@
-export { UITabs, UITabsSizes, useUITabs } from "./UITabs";
+import { UITabs } from "./UITabs";
 
-export { UITabsList } from "./UITabsList";
+import { UITabsList } from "./UITabsList";
+import { UITabsTrigger } from "./UITabsTrigger";
+import { UITabsContent } from "./UITabsContent";
+import { UITabsIndicator } from "./UITabsIndicator";
 
-export { UITabsTrigger } from "./UITabsTrigger";
+UITabs.List = UITabsList;
 
-export { UITabsContent } from "./UITabsContent";
+UITabs.Trigger = UITabsTrigger;
 
-export { UITabsIndicator } from "./UITabsIndicator";
+UITabs.Content = UITabsContent;
+
+UITabs.Indicator = UITabsIndicator;
+
+export { UITabs, UITabsList, UITabsTrigger, UITabsContent, UITabsIndicator };

package/src/components/index.js

@@ -118,8 +118,6 @@ export {
 } from "./Accordion";
 export {
   UITabs,
-  UITabsSizes,
-  useUITabs,
   UITabsList,
   UITabsTrigger,
   UITabsContent,

package/src/index.js

@@ -126,8 +126,6 @@ export {
   UIAccordionContent,
   UIAccordionIcon,
   UITabs,
-  UITabsSizes,
-  useUITabs,
   UITabsList,
   UITabsTrigger,
   UITabsContent,