@mrmeg/expo-ui 0.6.1 → 0.7.1

package/dist/components/Slider.js

@@ -2,17 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { hapticLight } from "../lib/haptics.js";
-import { useCallback, useEffect, useRef } from "react";
-import { Platform, StyleSheet, View } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, PanResponder, Platform, StyleSheet, View } from "react-native";
 import { StyledText } from "./StyledText.js";
 const SIZES = {
     sm: { track: 4, thumb: 16 },
     md: { track: 6, thumb: 20 },
 };
 function clampAndSnap(raw, min, max, step) {
-    "worklet";
     const clamped = Math.min(Math.max(raw, min), max);
     const stepped = Math.round((clamped - min) / step) * step + min;
     // Avoid floating-point drift
@@ -37,76 +34,70 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
             ? withAlpha(palette.white, 0.32)
             : theme.colors.mutedForeground
         : theme.colors.accent;
-    // Track layout width captured via onLayout
-    const trackWidth = useSharedValue(0);
-    // Thumb position in pixels along the track
-    const thumbX = useSharedValue(0);
-    // Last snapped value (worklet-side) to detect step changes for haptics
-    const lastSnappedValue = useSharedValue(value);
-    // Keep a ref to onValueChange so the worklet always calls the latest version
-    const onValueChangeRef = useRef(onValueChange);
-    onValueChangeRef.current = onValueChange;
-    const jsOnValueChange = useCallback((v) => {
-        onValueChangeRef.current?.(v);
-    }, []);
-    const jsHaptic = useCallback(() => {
-        hapticLight();
-    }, []);
-    // Sync external value prop changes after render. Reanimated warns when shared
-    // values are read or written while React is rendering.
+    const [trackWidth, setTrackWidth] = useState(0);
+    const trackWidthRef = useRef(0);
+    const thumbX = useRef(new Animated.Value(0)).current;
+    const lastSnappedValue = useRef(value);
+    const updateFromPosition = useCallback((rawX) => {
+        const width = trackWidthRef.current;
+        const x = Math.min(Math.max(rawX, 0), width);
+        thumbX.stopAnimation();
+        thumbX.setValue(x);
+        const ratio = width > 0 ? x / width : 0;
+        const raw = min + ratio * (max - min);
+        const snapped = clampAndSnap(raw, min, max, step);
+        if (snapped !== lastSnappedValue.current) {
+            lastSnappedValue.current = snapped;
+            hapticLight();
+        }
+        onValueChange?.(snapped);
+    }, [max, min, onValueChange, step, thumbX]);
+    const handleGesture = useCallback((event) => {
+        updateFromPosition(event.nativeEvent.locationX);
+    }, [updateFromPosition]);
+    const panResponder = useMemo(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onPanResponderGrant: handleGesture,
+        onPanResponderMove: handleGesture,
+    }), [disabled, handleGesture]);
     useEffect(() => {
         const ratio = getValueRatio(value, min, max);
-        const width = trackWidth.value;
+        const width = trackWidthRef.current;
         if (width > 0) {
-            thumbX.value = withTiming(ratio * width, { duration: 80 });
+            Animated.timing(thumbX, {
+                toValue: ratio * width,
+                duration: 80,
+                useNativeDriver: true,
+            }).start();
         }
-        lastSnappedValue.value = value;
-    }, [lastSnappedValue, max, min, thumbX, trackWidth, value]);
+        lastSnappedValue.current = value;
+    }, [max, min, thumbX, value]);
     const onTrackLayout = useCallback((e) => {
         const w = e.nativeEvent.layout.width;
-        trackWidth.value = w;
+        trackWidthRef.current = w;
+        setTrackWidth(w);
         // Set initial thumb position without animation
         const ratio = getValueRatio(value, min, max);
-        thumbX.value = ratio * w;
-    }, [max, min, thumbX, trackWidth, value]);
-    const panGesture = Gesture.Pan()
-        .enabled(!disabled)
-        .onBegin((e) => {
-        "worklet";
-        // Jump to touch position
-        const x = Math.min(Math.max(e.x, 0), trackWidth.value);
-        thumbX.value = x;
-        const ratio = trackWidth.value > 0 ? x / trackWidth.value : 0;
-        const raw = min + ratio * (max - min);
-        const snapped = clampAndSnap(raw, min, max, step);
-        if (snapped !== lastSnappedValue.value) {
-            lastSnappedValue.value = snapped;
-            runOnJS(jsHaptic)();
-        }
-        runOnJS(jsOnValueChange)(snapped);
-    })
-        .onUpdate((e) => {
-        "worklet";
-        const x = Math.min(Math.max(e.x, 0), trackWidth.value);
-        thumbX.value = x;
-        const ratio = trackWidth.value > 0 ? x / trackWidth.value : 0;
-        const raw = min + ratio * (max - min);
-        const snapped = clampAndSnap(raw, min, max, step);
-        if (snapped !== lastSnappedValue.value) {
-            lastSnappedValue.value = snapped;
-            runOnJS(jsHaptic)();
-        }
-        runOnJS(jsOnValueChange)(snapped);
+        thumbX.stopAnimation();
+        thumbX.setValue(ratio * w);
+    }, [max, min, thumbX, value]);
+    const safeTrackWidth = Math.max(trackWidth, 1);
+    const fillScale = thumbX.interpolate({
+        inputRange: [0, safeTrackWidth],
+        outputRange: [0, 1],
+        extrapolate: "clamp",
+    });
+    const thumbTranslateX = thumbX.interpolate({
+        inputRange: [0, safeTrackWidth],
+        outputRange: [-dims.thumb / 2, safeTrackWidth - dims.thumb / 2],
+        extrapolate: "clamp",
+    });
+    const labelTranslateX = thumbX.interpolate({
+        inputRange: [0, safeTrackWidth],
+        outputRange: [-14, safeTrackWidth - 14],
+        extrapolate: "clamp",
     });
-    const fillStyle = useAnimatedStyle(() => ({
-        width: thumbX.value,
-    }));
-    const thumbAnimatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateX: thumbX.value - dims.thumb / 2 }],
-    }));
-    const valueLabelStyle = useAnimatedStyle(() => ({
-        transform: [{ translateX: thumbX.value - 14 }],
-    }));
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
     // Accessibility action handler
     const handleAccessibilityAction = useCallback((event) => {
@@ -132,42 +123,44 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
                         width: 28,
                         alignItems: "center",
                     },
-                    valueLabelStyle,
+                    { transform: [{ translateX: labelTranslateX }] },
                     { pointerEvents: "none" },
                 ], children: _jsx(StyledText, { selectable: false, style: {
-                        fontSize: 11,
+                        fontSize: 12,
                         color: theme.colors.textDim,
                         userSelect: "none",
-                    }, children: value }) })), _jsx(GestureDetector, { gesture: panGesture, children: _jsxs(View, { style: {
-                        height: dims.thumb,
-                        justifyContent: "center",
-                        ...(Platform.OS === "web" && { cursor: disabled ? "default" : "pointer" }),
-                    }, onLayout: onTrackLayout, children: [_jsx(View, { style: {
-                                height: dims.track,
-                                borderRadius: dims.track / 2,
-                                backgroundColor: inactiveTrackColor,
-                                overflow: "hidden",
-                            }, children: _jsx(Animated.View, { style: [
-                                    {
-                                        height: dims.track,
-                                        borderRadius: dims.track / 2,
-                                        backgroundColor: activeTrackColor,
-                                    },
-                                    fillStyle,
-                                ] }) }), _jsx(Animated.View, { style: [
+                    }, children: value }) })), _jsxs(View, { style: {
+                    height: dims.thumb,
+                    justifyContent: "center",
+                    ...(Platform.OS === "web" && { cursor: disabled ? "default" : "pointer" }),
+                }, onLayout: onTrackLayout, ...panResponder.panHandlers, children: [_jsx(View, { style: {
+                            height: dims.track,
+                            borderRadius: dims.track / 2,
+                            backgroundColor: inactiveTrackColor,
+                            overflow: "hidden",
+                        }, children: _jsx(Animated.View, { style: [
                                 {
-                                    position: "absolute",
-                                    top: 0,
-                                    left: 0,
-                                    width: dims.thumb,
-                                    height: dims.thumb,
-                                    borderRadius: dims.thumb / 2,
-                                    backgroundColor: thumbBackgroundColor,
-                                    borderWidth: 1,
-                                    borderColor: thumbBorderColor,
-                                    ...getShadowStyle("subtle"),
+                                    width: "100%",
+                                    height: dims.track,
+                                    borderRadius: dims.track / 2,
+                                    backgroundColor: activeTrackColor,
+                                    transformOrigin: "left",
                                 },
-                                thumbAnimatedStyle,
-                            ] })] }) })] }));
+                                { transform: [{ scaleX: fillScale }] },
+                            ] }) }), _jsx(Animated.View, { style: [
+                            {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: dims.thumb,
+                                height: dims.thumb,
+                                borderRadius: dims.thumb / 2,
+                                backgroundColor: thumbBackgroundColor,
+                                borderWidth: 1,
+                                borderColor: thumbBorderColor,
+                                ...getShadowStyle("subtle"),
+                            },
+                            { transform: [{ translateX: thumbTranslateX }] },
+                        ] })] })] }));
 }
 export { Slider };

package/dist/components/StyledText.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { StyleProp, TextStyle } from "react-native";
+export declare const TextClassContext: React.Context<string | undefined>;
+export declare const TextColorContext: React.Context<string | undefined>;
+export declare const TextStyleContext: React.Context<StyleProp<TextStyle>>;
+export declare const TextSelectabilityContext: React.Context<boolean | undefined>;

package/dist/components/StyledText.context.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const TextClassContext = React.createContext(undefined);
+export const TextColorContext = React.createContext(undefined);
+export const TextStyleContext = React.createContext(undefined);
+export const TextSelectabilityContext = React.createContext(undefined);

package/dist/components/StyledText.d.ts

@@ -1,25 +1,5 @@
-import React from "react";
-import { Text as RNText, TextProps as RNTextProps, StyleProp, TextStyle } from "react-native";
-/**
- * TextClassContext provides className context for nested text components
- * Used by @rn-primitives to apply consistent styling through the component tree
- */
-export declare const TextClassContext: React.Context<string | undefined>;
-/**
- * TextColorContext provides color context for nested text components
- * Allows parent components (like Button) to override text color for all children
- */
-export declare const TextColorContext: React.Context<string | undefined>;
-/**
- * TextStyleContext allows controls such as Button to pass sizing typography to
- * nested StyledText children without forcing consumers to use the `text` prop.
- */
-export declare const TextStyleContext: React.Context<StyleProp<TextStyle>>;
-/**
- * Allows interactive controls to disable text selection for nested StyledText
- * without changing the package-wide default for readable content.
- */
-export declare const TextSelectabilityContext: React.Context<boolean | undefined>;
+import { type Ref } from "react";
+import { Text as RNText, TextProps as RNTextProps } from "react-native";
 /**
  * Font size variants following the DM Sans / DM Serif Display scale
  */
@@ -71,6 +51,10 @@ export type TextProps = RNTextProps & {
      * as well as explicitly setting locale or translation fallbacks.
      */
     txOptions?: object;
+    /**
+     * Forwarded ref to the underlying RNText element.
+     */
+    ref?: Ref<RNText>;
 };
 /**
  * Base Text component with theme and variant support
@@ -85,42 +69,7 @@ export type TextProps = RNTextProps & {
  *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
-export declare const StyledText: React.ForwardRefExoticComponent<RNTextProps & {
-    /**
-     * Font variant - serif (DM Serif Display) or sans-serif (DM Sans)
-     */
-    variant?: "serif" | "sansSerif";
-    /**
-     * Font weight - light, regular, medium, semibold, bold
-     */
-    fontWeight?: FontWeight;
-    /**
-     * Font size variant
-     */
-    size?: FontSize;
-    /**
-     * Semantic variant - automatically sets size and weight
-     * Overrides individual size/fontWeight if provided
-     */
-    semantic?: SemanticVariant;
-    /**
-     * Text alignment
-     */
-    align?: TextAlign;
-    /**
-     * Text which is looked up via i18n.
-     */
-    tx?: string;
-    /**
-     * The text to display directly, or as fallback text when `tx` is provided.
-     */
-    text?: string;
-    /**
-     * Optional options to pass to i18n. Useful for interpolation
-     * as well as explicitly setting locale or translation fallbacks.
-     */
-    txOptions?: object;
-} & React.RefAttributes<RNText>>;
+export declare function StyledText(props: TextProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Serif Text Component
  * Uses serif font family (DM Serif Display)

package/dist/components/StyledText.js

@@ -1,29 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef } from "react";
+import { use } from "react";
 import { Text as RNText, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { fontFamilies } from "../constants/fonts.js";
 import { translateText } from "../lib/i18n.js";
-/**
- * TextClassContext provides className context for nested text components
- * Used by @rn-primitives to apply consistent styling through the component tree
- */
-export const TextClassContext = React.createContext(undefined);
-/**
- * TextColorContext provides color context for nested text components
- * Allows parent components (like Button) to override text color for all children
- */
-export const TextColorContext = React.createContext(undefined);
-/**
- * TextStyleContext allows controls such as Button to pass sizing typography to
- * nested StyledText children without forcing consumers to use the `text` prop.
- */
-export const TextStyleContext = React.createContext(undefined);
-/**
- * Allows interactive controls to disable text selection for nested StyledText
- * without changing the package-wide default for readable content.
- */
-export const TextSelectabilityContext = React.createContext(undefined);
+import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context";
 const FONT_SIZES = {
     xs: 11,
     sm: 12,
@@ -83,13 +64,13 @@ const getFontFamilyWeight = (weight) => {
  *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
-export const StyledText = forwardRef((props, ref) => {
-    const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, size, semantic, align, selectable, children, ...otherProps } = props;
+export function StyledText(props) {
+    const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, size, semantic, align, selectable, children, ref, ...otherProps } = props;
     const { theme } = useTheme();
     // Check if there's a color override from parent context (e.g., Button)
-    const contextColor = React.useContext(TextColorContext);
-    const contextTextStyle = React.useContext(TextStyleContext);
-    const contextSelectable = React.useContext(TextSelectabilityContext);
+    const contextColor = use(TextColorContext);
+    const contextTextStyle = use(TextStyleContext);
+    const contextSelectable = use(TextSelectabilityContext);
     const resolvedSelectable = selectable ?? contextSelectable ?? true;
     // Use context color if provided, otherwise use theme default
     const color = contextColor ?? theme.colors.text;
@@ -134,8 +115,7 @@ export const StyledText = forwardRef((props, ref) => {
             resolvedContextTextStyle,
             style,
         ], selectable: resolvedSelectable, ...otherProps, children: content }));
-});
-StyledText.displayName = "StyledText";
+}
 /**
  * Serif Text Component
  * Uses serif font family (DM Serif Display)

package/dist/components/Switch.js

@@ -6,9 +6,9 @@ import { useTheme } from "../hooks/useTheme.js";
 import { hapticLight } from "../lib/haptics.js";
 import * as SwitchPrimitives from "@rn-primitives/switch";
 import { useCallback, useEffect, useRef } from "react";
-import { ActivityIndicator, Platform, StyleSheet, View } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, interpolate, useReducedMotion, } from "react-native-reanimated";
+import { ActivityIndicator, Platform, StyleSheet, View, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
 const DEFAULT_HIT_SLOP = 8;
 function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, height: 24 }, thumbSize = 20, loading = false, style: styleOverride, ...props }) {
     const { theme, getContrastingColor, getShadowStyle, withAlpha } = useTheme();
@@ -23,27 +23,31 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
     useEffect(() => {
         hasMounted.current = true;
     }, []);
-    // Single shared value drives everything: 0 = off, 1 = on
-    const progress = useSharedValue(props.checked ? 1 : 0);
+    // Single animated value drives everything: 0 = off, 1 = on
+    const progress = useRef(new Animated.Value(props.checked ? 1 : 0)).current;
     useEffect(() => {
         const target = props.checked ? 1 : 0;
-        if (reduceMotion) {
-            progress.value = withTiming(target, { duration: 0 });
-        }
-        else {
-            progress.value = withTiming(target, { duration: 120 });
-        }
-    }, [props.checked, reduceMotion]);
+        Animated.timing(progress, {
+            toValue: target,
+            duration: reduceMotion ? 0 : 120,
+            useNativeDriver: true,
+        }).start();
+    }, [props.checked, reduceMotion, progress]);
     // Thumb slides from left to right with equal inset on every side.
     const thumbInset = Math.max(2, (size.height - thumbSize) / 2);
     const thumbTravel = Math.max(0, size.width - thumbSize - thumbInset * 2);
     const labelGap = spacing.xs;
     const labelHorizontalInset = spacing.xs;
-    const thumbAnimatedStyle = useAnimatedStyle(() => ({
+    const thumbAnimatedStyle = {
         transform: [
-            { translateX: interpolate(progress.value, [0, 1], [0, thumbTravel]) },
+            {
+                translateX: progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, thumbTravel],
+                }),
+            },
         ],
-    }));
+    };
     const isIOS = variant === "ios";
     const checkedColor = isIOS ? "#34C759" : theme.colors.accent;
     const uncheckedColor = theme.dark ? withAlpha(palette.white, 0.12) : theme.colors.input;
@@ -84,15 +88,10 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                     borderColor: trackBorderColor,
                     pointerEvents: "none",
                 } }), labelOn && !isIOS && (_jsx(View, { style: {
-                    position: "absolute",
-                    top: 0,
-                    bottom: 0,
+                    ...styles.label,
                     left: labelHorizontalInset,
                     right: thumbInset + thumbSize + labelGap,
-                    justifyContent: "center",
-                    alignItems: "center",
                     opacity: props.checked ? 1 : 0,
-                    pointerEvents: "none",
                 }, children: _jsx(StyledText, { selectable: false, style: {
                         fontFamily: fontFamilies.sansSerif.bold,
                         fontSize: labelFontSize,
@@ -113,15 +112,10 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                         },
                         thumbAnimatedStyle,
                     ], children: loading && (_jsx(ActivityIndicator, { size: "small", color: thumbIndicatorColor })) }) }), labelOff && !isIOS && (_jsx(View, { style: {
-                    position: "absolute",
-                    top: 0,
-                    bottom: 0,
+                    ...styles.label,
                     left: thumbInset + thumbSize + labelGap,
                     right: labelHorizontalInset,
-                    justifyContent: "center",
-                    alignItems: "center",
                     opacity: props.checked ? 0 : 1,
-                    pointerEvents: "none",
                 }, children: _jsx(StyledText, { selectable: false, style: {
                         fontFamily: fontFamilies.sansSerif.bold,
                         fontSize: labelFontSize,
@@ -129,4 +123,14 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                         userSelect: "none",
                     }, children: labelOff }) }))] }));
 }
+const styles = StyleSheet.create({
+    label: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        justifyContent: "center",
+        alignItems: "center",
+        pointerEvents: "none",
+    },
+});
 export { Switch };

package/dist/components/Tabs.d.ts

@@ -1,5 +1,7 @@
+import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 import * as TabsPrimitive from "@rn-primitives/tabs";
+import { StyledText } from "./StyledText";
 import { type IconName } from "./Icon";
 type TabsVariant = "underline" | "pill";
 type TabsSize = "sm" | "md";
@@ -17,15 +19,33 @@ export interface TabsTriggerProps extends TabsPrimitive.TriggerProps {
     style?: StyleProp<ViewStyle>;
 }
 declare function TabsTriggerInner({ icon, style, children, value, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare const TabsTrigger: typeof TabsTriggerInner;
+/**
+ * TabsTrigger.Text
+ * Label text for a TabsTrigger. Reads the tab size from context and applies the
+ * matching font size, so callers state their intent explicitly instead of
+ * relying on the trigger to inspect `typeof children`. Text color is inherited
+ * from the trigger via TextColorContext.
+ *
+ * ```tsx
+ * <Tabs.Trigger value="account">
+ *   <Tabs.Trigger.Text>Account</Tabs.Trigger.Text>
+ * </Tabs.Trigger>
+ * ```
+ */
+declare function TabsTriggerText({ style, ...props }: React.ComponentProps<typeof StyledText>): import("react/jsx-runtime").JSX.Element;
 export interface TabsContentProps extends TabsPrimitive.ContentProps {
     style?: StyleProp<ViewStyle>;
 }
 declare function TabsContent({ style, children, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+declare const TabsTriggerCompound: typeof TabsTriggerInner & {
+    Text: typeof TabsTriggerText;
+};
 declare const Tabs: typeof TabsRoot & {
     List: typeof TabsList;
-    Trigger: typeof TabsTriggerInner;
+    Trigger: typeof TabsTriggerInner & {
+        Text: typeof TabsTriggerText;
+    };
     Content: typeof TabsContent;
 };
-export { Tabs, TabsList, TabsTrigger, TabsContent, };
+export { Tabs, TabsList, TabsTriggerCompound as TabsTrigger, TabsTriggerText, TabsContent, };
 export type { TabsVariant, TabsSize, };

package/dist/components/Tabs.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 import * as TabsPrimitive from "@rn-primitives/tabs";
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
-import { StyledText, TextClassContext, TextColorContext } from "./StyledText.js";
+import { StyledText } from "./StyledText.js";
+import { TextClassContext, TextColorContext } from "./StyledText.context";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
 // ============================================================================
 // Size configs
@@ -29,10 +30,11 @@ const TabsContext = React.createContext({
     size: "md",
 });
 function useTabsContext() {
-    return React.useContext(TabsContext);
+    return React.use(TabsContext);
 }
 function TabsRoot({ variant = "underline", size = "md", children, ...props }) {
-    return (_jsx(TabsContext.Provider, { value: { variant, size }, children: _jsx(TabsPrimitive.Root, { ...props, children: children }) }));
+    const contextValue = React.useMemo(() => ({ variant, size }), [variant, size]);
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(TabsPrimitive.Root, { ...props, children: children }) }));
 }
 function TabsList({ style, children, ...props }) {
     const { theme } = useTheme();
@@ -62,15 +64,14 @@ function TabsTriggerInner({ icon, style, children, value, ...props }) {
     // Determine selected state by comparing trigger value with root value
     const rootContext = TabsPrimitive.useRootContext();
     const isSelected = rootContext.value === value;
-    const activeOpacity = useSharedValue(isSelected ? 1 : 0);
+    const activeOpacity = React.useRef(new Animated.Value(isSelected ? 1 : 0)).current;
     React.useEffect(() => {
-        activeOpacity.value = reduceMotion
-            ? (isSelected ? 1 : 0)
-            : withTiming(isSelected ? 1 : 0, { duration: 200 });
-    }, [isSelected, reduceMotion]);
-    const indicatorStyle = useAnimatedStyle(() => ({
-        opacity: activeOpacity.value,
-    }));
+        Animated.timing(activeOpacity, {
+            toValue: isSelected ? 1 : 0,
+            duration: reduceMotion ? 0 : 200,
+            useNativeDriver: true,
+        }).start();
+    }, [isSelected, reduceMotion, activeOpacity]);
     const textColor = isDisabled
         ? theme.colors.mutedForeground
         : isSelected
@@ -92,7 +93,7 @@ function TabsTriggerInner({ icon, style, children, value, ...props }) {
         borderRadius: spacing.radiusSm,
         ...getShadowStyle("subtle"),
     } : {};
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(TabsPrimitive.Trigger, { value: value, style: StyleSheet.flatten([triggerBaseStyle, pillActiveStyle, style]), ...props, children: [_jsxs(View, { style: triggerContentStyles.container, children: [icon && (_jsx(Icon, { name: icon, size: sizeConfig.iconSize, color: textColor, decorative: true })), typeof children === "string" ? (_jsx(StyledText, { selectable: false, style: { fontSize: sizeConfig.fontSize }, children: children })) : children] }), variant === "underline" && (_jsx(Animated.View, { style: [
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(TabsPrimitive.Trigger, { value: value, style: StyleSheet.flatten([triggerBaseStyle, pillActiveStyle, style]), ...props, children: [_jsxs(View, { style: triggerContentStyles.container, children: [icon && (_jsx(Icon, { name: icon, size: sizeConfig.iconSize, color: textColor, decorative: true })), children] }), variant === "underline" && (_jsx(Animated.View, { style: [
                             {
                                 position: "absolute",
                                 bottom: 0,
@@ -101,10 +102,28 @@ function TabsTriggerInner({ icon, style, children, value, ...props }) {
                                 height: 2,
                                 backgroundColor: theme.colors.foreground,
                             },
-                            indicatorStyle,
+                            { opacity: activeOpacity },
                         ] }))] }) }) }));
 }
 const TabsTrigger = TabsTriggerInner;
+/**
+ * TabsTrigger.Text
+ * Label text for a TabsTrigger. Reads the tab size from context and applies the
+ * matching font size, so callers state their intent explicitly instead of
+ * relying on the trigger to inspect `typeof children`. Text color is inherited
+ * from the trigger via TextColorContext.
+ *
+ * ```tsx
+ * <Tabs.Trigger value="account">
+ *   <Tabs.Trigger.Text>Account</Tabs.Trigger.Text>
+ * </Tabs.Trigger>
+ * ```
+ */
+function TabsTriggerText({ style, ...props }) {
+    const { size } = useTabsContext();
+    const { fontSize } = SIZE_CONFIGS[size];
+    return _jsx(StyledText, { selectable: false, style: [{ fontSize }, style], ...props });
+}
 function TabsContent({ style, children, ...props }) {
     return (_jsx(TabsPrimitive.Content, { style: StyleSheet.flatten([{ marginTop: spacing.md }, style]), ...props, children: children }));
 }
@@ -122,9 +141,12 @@ const triggerContentStyles = StyleSheet.create({
 // ============================================================================
 // Compound Export
 // ============================================================================
+const TabsTriggerCompound = Object.assign(TabsTrigger, {
+    Text: TabsTriggerText,
+});
 const Tabs = Object.assign(TabsRoot, {
     List: TabsList,
-    Trigger: TabsTrigger,
+    Trigger: TabsTriggerCompound,
     Content: TabsContent,
 });
-export { Tabs, TabsList, TabsTrigger, TabsContent, };
+export { Tabs, TabsList, TabsTriggerCompound as TabsTrigger, TabsTriggerText, TabsContent, };