rnnovaui 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.9.0",
+  "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

@@ -0,0 +1,240 @@
+import React, {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+import { StyleSheet, View } from "react-native";
+
+import { useUITheme } from "../../theme";
+
+const UITabsContext = createContext(null);
+
+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 = null,
+
+  onValueChange,
+
+  size = "md",
+
+  animated = true,
+
+  animationPreset = "smooth",
+
+  indicatorAnimation,
+  contentAnimation,
+  pressAnimation,
+
+  animationDuration = 260,
+
+  spring = {
+    damping: 18,
+    stiffness: 180,
+    mass: 0.8,
+  },
+
+  directionAware = true,
+
+  variant = "default",
+
+  activeColor,
+  inactiveColor,
+
+  indicatorColor,
+
+  indicatorHeight = 2,
+
+  indicatorWidth = "content",
+
+  disabled = false,
+
+  style,
+  containerStyle,
+
+  testID,
+}) {
+  const { theme } = useUITheme();
+
+  const colors = theme?.colors || {};
+
+  const controlled = value !== undefined;
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+
+  const currentValue = controlled ? value : internalValue;
+
+  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 || nextValue === currentValue) {
+        return;
+      }
+
+      setPreviousValue(currentValue);
+
+      if (!controlled) {
+        setInternalValue(nextValue);
+      }
+
+      onValueChange?.(nextValue);
+    },
+    [disabled, currentValue, controlled, onValueChange],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      colors,
+
+      value: currentValue,
+
+      previousValue,
+
+      setValue: changeValue,
+
+      size: safeSize,
+
+      animated,
+
+      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 || "#737373",
+
+      indicatorColor:
+        indicatorColor || activeColor || colors.primary || "#FF5A1F",
+
+      indicatorHeight,
+
+      indicatorWidth,
+
+      disabled,
+    }),
+    [
+      colors,
+      currentValue,
+      previousValue,
+      changeValue,
+      safeSize,
+      animated,
+      animationDuration,
+      spring,
+      directionAware,
+      resolvedIndicatorAnimation,
+      resolvedContentAnimation,
+      resolvedPressAnimation,
+      variant,
+      activeColor,
+      inactiveColor,
+      indicatorColor,
+      indicatorHeight,
+      indicatorWidth,
+      disabled,
+    ],
+  );
+
+  return (
+    <UITabsContext.Provider value={contextValue}>
+      <View testID={testID} style={[styles.container, containerStyle, style]}>
+        {children}
+      </View>
+    </UITabsContext.Provider>
+  );
+});
+
+export function useUITabs() {
+  const context = useContext(UITabsContext);
+
+  if (!context) {
+    throw new Error("UITabs components must be used inside <UITabs>.");
+  }
+
+  return context;
+}
+
+export {
+  TAB_SIZES as UITabsSizes,
+  ANIMATION_PRESETS as UITabsAnimationPresets,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+});
+
+UITabs.displayName = "UITabs";

package/src/components/Tabs/UITabsContent.js

@@ -0,0 +1,190 @@
+import React, { memo, useEffect, useRef, useState } from "react";
+
+import { Animated, StyleSheet } from "react-native";
+
+import { useUITabs } from "./UITabs";
+
+export const UITabsContent = memo(function UITabsContent({
+  children,
+
+  value,
+
+  style,
+
+  animation,
+  animationDuration,
+
+  testID,
+}) {
+  const tabs = useUITabs();
+
+  const active = tabs.value === value;
+
+  const animationType = animation ?? tabs.contentAnimation;
+
+  const [mounted, setMounted] = useState(active);
+
+  const progress = useRef(new Animated.Value(active ? 1 : 0)).current;
+
+  const direction = getDirection(tabs, value);
+
+  useEffect(() => {
+    const duration = animationDuration ?? tabs.animationDuration;
+
+    if (active) {
+      setMounted(true);
+
+      progress.setValue(0);
+
+      if (animationType === "none") {
+        progress.setValue(1);
+
+        return;
+      }
+
+      Animated.timing(progress, {
+        toValue: 1,
+
+        duration,
+
+        useNativeDriver: true,
+      }).start();
+
+      return;
+    }
+
+    if (animationType === "none") {
+      progress.setValue(0);
+
+      setMounted(false);
+
+      return;
+    }
+
+    Animated.timing(progress, {
+      toValue: 0,
+
+      duration,
+
+      useNativeDriver: true,
+    }).start(() => {
+      setMounted(false);
+    });
+  }, [
+    active,
+    animationType,
+    animationDuration,
+    tabs.animationDuration,
+    progress,
+  ]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const transforms = getContentTransforms(animationType, progress, direction);
+
+  return (
+    <Animated.View
+      testID={testID}
+      accessibilityRole="tabpanel"
+      style={[
+        styles.container,
+
+        {
+          opacity: getOpacity(animationType, progress),
+
+          transform: transforms,
+        },
+
+        style,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+});
+
+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

@@ -0,0 +1,35 @@
+import React, { memo } from "react";
+
+import { View } from "react-native";
+
+import { useUITabs } from "./UITabs";
+
+export const UITabsIndicator = memo(function UITabsIndicator({
+  style,
+
+  children,
+}) {
+  const tabs = useUITabs();
+
+  if (children) {
+    return <View style={style}>{children}</View>;
+  }
+
+  return (
+    <View
+      style={[
+        {
+          height: tabs.indicatorHeight,
+
+          backgroundColor: tabs.indicatorColor,
+
+          borderRadius: tabs.indicatorHeight / 2,
+        },
+
+        style,
+      ]}
+    />
+  );
+});
+
+UITabsIndicator.displayName = "UITabs.Indicator";

package/src/components/Tabs/UITabsList.js

@@ -0,0 +1,101 @@
+import React, { memo } from "react";
+
+import { ScrollView, StyleSheet, View } from "react-native";
+
+import { useUITabs } from "./UITabs";
+
+export const UITabsList = memo(function UITabsList({
+  children,
+
+  scrollable = false,
+
+  showsHorizontalScrollIndicator = false,
+
+  contentContainerStyle,
+
+  style,
+
+  backgroundColor,
+
+  borderBottomWidth = 0,
+
+  borderBottomColor,
+
+  testID,
+}) {
+  const tabs = useUITabs();
+
+  const horizontalPadding =
+    tabs.size === "sm" ? 6 : tabs.size === "lg" ? 14 : 10;
+
+  const row = (
+    <View
+      style={[
+        styles.row,
+        {
+          paddingHorizontal: horizontalPadding,
+        },
+      ]}
+    >
+      {children}
+    </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}
+        keyboardShouldPersistTaps="handled"
+        bounces
+        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+        style={containerStyle}
+      >
+        {row}
+      </ScrollView>
+    );
+  }
+
+  return (
+    <View testID={testID} style={containerStyle}>
+      {row}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+
+  scrollContent: {
+    flexGrow: 1,
+  },
+
+  row: {
+    minHeight: 48,
+
+    flexDirection: "row",
+
+    alignItems: "stretch",
+
+    gap: 4,
+  },
+});
+
+UITabsList.displayName = "UITabs.List";

package/src/components/Tabs/UITabsTrigger.js

@@ -0,0 +1,388 @@
+import React, { memo, useEffect, useRef } from "react";
+
+import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+
+import { useUITabs } from "./UITabs";
+
+export const UITabsTrigger = memo(function UITabsTrigger({
+  children,
+
+  value,
+
+  icon,
+  iconPosition = "left",
+
+  badge,
+
+  disabled = false,
+
+  onPress,
+
+  activeColor,
+  inactiveColor,
+
+  style,
+  activeStyle,
+  inactiveStyle,
+
+  contentStyle,
+
+  textStyle,
+  activeTextStyle,
+  inactiveTextStyle,
+
+  iconStyle,
+
+  badgeStyle,
+  badgeTextStyle,
+
+  pressAnimation,
+  pressScale = 0.96,
+
+  indicator = true,
+
+  testID,
+  accessibilityLabel,
+}) {
+  const tabs = useUITabs();
+
+  const active = tabs.value === value;
+
+  const isDisabled = disabled || tabs.disabled;
+
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const resolvedPressAnimation = pressAnimation ?? tabs.pressAnimation;
+
+  useEffect(() => {
+    if (resolvedPressAnimation === "none") {
+      scale.setValue(1);
+    }
+  }, [resolvedPressAnimation, scale]);
+
+  const animatePressIn = () => {
+    if (resolvedPressAnimation === "none") {
+      return;
+    }
+
+    if (resolvedPressAnimation === "scale") {
+      Animated.spring(scale, {
+        toValue: pressScale,
+
+        ...tabs.spring,
+
+        useNativeDriver: true,
+      }).start();
+    }
+  };
+
+  const animatePressOut = () => {
+    if (resolvedPressAnimation === "none") {
+      return;
+    }
+
+    Animated.spring(scale, {
+      toValue: 1,
+
+      ...tabs.spring,
+
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePress = (event) => {
+    if (isDisabled) {
+      return;
+    }
+
+    tabs.setValue(value);
+
+    onPress?.(event);
+  };
+
+  const activeTextColor = activeColor || tabs.activeColor;
+
+  const inactiveTextColor = inactiveColor || tabs.inactiveColor;
+
+  const iconElement = icon ? (
+    <View
+      style={[
+        styles.icon,
+
+        iconPosition === "right" ? styles.iconRight : styles.iconLeft,
+
+        iconStyle,
+      ]}
+    >
+      {icon}
+    </View>
+  ) : null;
+
+  return (
+    <Animated.View
+      style={[
+        styles.animatedWrapper,
+
+        {
+          transform: [
+            {
+              scale,
+            },
+          ],
+        },
+      ]}
+    >
+      <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" ? 58 : 50,
+
+            opacity: isDisabled ? 0.45 : 1,
+          },
+
+          inactiveStyle,
+
+          active ? activeStyle : null,
+
+          style,
+        ]}
+      >
+        <View style={[styles.content, contentStyle]}>
+          {iconPosition === "left" ? iconElement : null}
+
+          <Text
+            numberOfLines={1}
+            style={[
+              styles.text,
+
+              {
+                fontSize:
+                  tabs.size === "sm" ? 12 : tabs.size === "lg" ? 16 : 14,
+
+                color: active ? activeTextColor : inactiveTextColor,
+              },
+
+              textStyle,
+
+              inactiveTextStyle,
+
+              active ? activeTextStyle : null,
+            ]}
+          >
+            {children}
+          </Text>
+
+          {iconPosition === "right" ? iconElement : null}
+
+          {badge !== undefined ? (
+            <View
+              style={[
+                styles.badge,
+
+                {
+                  backgroundColor: active
+                    ? activeTextColor
+                    : tabs.colors.surfaceSecondary || "#EEEEEE",
+                },
+
+                badgeStyle,
+              ]}
+            >
+              <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}
+      </Pressable>
+    </Animated.View>
+  );
+});
+
+function AnimatedIndicator({ active }) {
+  const tabs = useUITabs();
+
+  const progress = useRef(new Animated.Value(active ? 1 : 0)).current;
+
+  useEffect(() => {
+    if (tabs.indicatorAnimation === "none") {
+      progress.setValue(active ? 1 : 0);
+
+      return;
+    }
+
+    if (tabs.indicatorAnimation === "spring") {
+      Animated.spring(progress, {
+        toValue: active ? 1 : 0,
+
+        ...tabs.spring,
+
+        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",
+
+    justifyContent: "center",
+
+    paddingHorizontal: 10,
+  },
+
+  content: {
+    flexDirection: "row",
+
+    alignItems: "center",
+
+    justifyContent: "center",
+
+    gap: 6,
+  },
+
+  text: {
+    fontWeight: "600",
+
+    includeFontPadding: false,
+  },
+
+  icon: {
+    alignItems: "center",
+
+    justifyContent: "center",
+  },
+
+  iconLeft: {
+    marginRight: 2,
+  },
+
+  iconRight: {
+    marginLeft: 2,
+  },
+
+  badge: {
+    minWidth: 18,
+    height: 18,
+
+    paddingHorizontal: 5,
+
+    borderRadius: 9,
+
+    alignItems: "center",
+
+    justifyContent: "center",
+  },
+
+  badgeText: {
+    fontSize: 9,
+
+    fontWeight: "700",
+
+    includeFontPadding: false,
+  },
+
+  indicatorContainer: {
+    position: "absolute",
+
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+
+  indicator: {
+    position: "absolute",
+
+    bottom: 0,
+  },
+
+  indicatorFull: {
+    left: 0,
+    right: 0,
+  },
+
+  indicatorContent: {
+    left: 8,
+    right: 8,
+  },
+});
+
+UITabsTrigger.displayName = "UITabs.Trigger";

package/src/components/Tabs/index.js

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

package/src/components/index.js

@@ -116,3 +116,10 @@ export {
   UIAccordionContent,
   UIAccordionIcon,
 } from "./Accordion";
+export {
+  UITabs,
+  UITabsList,
+  UITabsTrigger,
+  UITabsContent,
+  UITabsIndicator,
+} from "./Tabs";

package/src/index.js

@@ -125,4 +125,9 @@ export {
   UIAccordionTrigger,
   UIAccordionContent,
   UIAccordionIcon,
+  UITabs,
+  UITabsList,
+  UITabsTrigger,
+  UITabsContent,
+  UITabsIndicator,
 } from "./components";