@mrmeg/expo-ui 0.6.1 → 0.7.0

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, };

package/dist/components/TextInput.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { type ReactNode, type Ref } from "react";
 import { TextInput as RNTextInput, ViewStyle, TextStyle, TextInputProps, StyleProp } from "react-native";
 /**
  * Size variants for TextInput
@@ -9,6 +9,10 @@ export type TextInputSize = "sm" | "md" | "lg";
  */
 export type TextInputVariant = "outline" | "filled" | "underlined";
 interface TextInputCustomProps extends TextInputProps {
+    /**
+     * Forwarded ref to the underlying RNTextInput element.
+     */
+    ref?: Ref<RNTextInput>;
     /**
      * Visual variant
      * @default "outline"
@@ -116,5 +120,5 @@ interface TextInputCustomProps extends TextInputProps {
  * />
  * ```
  */
-export declare const TextInput: React.ForwardRefExoticComponent<TextInputCustomProps & React.RefAttributes<RNTextInput>>;
+export declare function TextInput({ variant, size, label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable, ref, ...rest }: TextInputCustomProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
@@ -70,7 +70,7 @@ const SIZE_CONFIGS = {
  * />
  * ```
  */
-export const TextInput = React.forwardRef(({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ...rest }, ref) => {
+export function TextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ref, ...rest }) {
     const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
     const styles = useMemo(() => createStyles(theme, variant, size), [theme, variant, size]);
     const [focused, setFocused] = useState(false);
@@ -116,18 +116,18 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
         ? "#1f2937"
         : getContrastingColor(backgroundColor === "transparent" ? theme.colors.background : backgroundColor, theme.colors.text, palette.white);
     const shouldScroll = multiline && rest.scrollEnabled !== false && contentHeight > 100;
-    const handleFocus = (e) => {
+    const showInputFocusRing = (e) => {
         setFocused(true);
         onFocus?.(e);
     };
-    const handleBlur = (e) => {
+    const hideInputFocusRing = (e) => {
         setFocused(false);
         onBlur?.(e);
     };
     const togglePasswordVisible = () => {
         setPasswordVisible(v => !v);
     };
-    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [styles.wrapper, focused && getFocusRingStyle()], children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: handleFocus, onBlur: handleBlur, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [styles.wrapper, focused && getFocusRingStyle()], children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: showInputFocusRing, onBlur: hideInputFocusRing, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
                             styles.input,
                             {
                                 backgroundColor,
@@ -156,8 +156,7 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
                     styles.helperText,
                     hasError && styles.errorText,
                 ], children: errorText || helperText }))] }));
-});
-TextInput.displayName = "TextInput";
+}
 const createStyles = (theme, variant, size) => StyleSheet.create({
     wrapper: {
         width: "100%",

package/dist/components/Toggle.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as TogglePrimitive from "@rn-primitives/toggle";
@@ -102,15 +102,11 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
     const isDisabled = props.disabled || loading;
     const children = props.children;
     return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TogglePrimitive.Root, { ...props, disabled: isDisabled, style: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: spacing.sm,
+                    ...styles.root,
                     height: sizeConfig.height,
                     minWidth: sizeConfig.minWidth,
                     paddingHorizontal: iconOnly ? sizeConfig.height / 2 - sizeConfig.iconSize / 2 : sizeConfig.paddingHorizontal,
                     borderRadius: getBorderRadius(),
-                    borderWidth: 1,
                     // Base variant styles
                     ...(variant === "default" && !props.pressed && {
                         backgroundColor: "transparent",
@@ -146,7 +142,16 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
                 }, children: loading ? (_jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })) : typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }));
 }
 function ToggleIcon({ name, size, color }) {
-    const contextColor = React.useContext(TextColorContext);
+    const contextColor = React.use(TextColorContext);
     return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
 }
+const styles = StyleSheet.create({
+    root: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.sm,
+        borderWidth: 1,
+    },
+});
 export { Toggle, ToggleIcon };

package/dist/components/ToggleGroup.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
 import * as React from "react";
-import { Platform } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 const DEFAULT_HIT_SLOP = 8;
 // Size configurations (same as Toggle)
 const TOGGLE_GROUP_SIZES = {
@@ -33,7 +33,7 @@ const TOGGLE_GROUP_SIZES = {
 };
 const ToggleGroupContext = React.createContext(null);
 function useToggleGroupContext() {
-    const context = React.useContext(ToggleGroupContext);
+    const context = React.use(ToggleGroupContext);
     if (context === null) {
         throw new Error("ToggleGroup compound components cannot be rendered outside the ToggleGroup component");
     }
@@ -65,6 +65,7 @@ function useToggleGroupContext() {
  */
 function ToggleGroup({ variant = "default", size = "default", children, ...props }) {
     const { theme } = useTheme();
+    const contextValue = React.useMemo(() => ({ variant, size }), [variant, size]);
     // Count valid children for first/last detection
     const childrenArray = React.Children.toArray(children);
     const validChildren = childrenArray.filter((child) => React.isValidElement(child) && child.type === ToggleGroupItem);
@@ -97,7 +98,7 @@ function ToggleGroup({ variant = "default", size = "default", children, ...props
             ...(Platform.OS === "web" && {
                 width: "fit-content",
             }),
-        }, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size }, children: enhancedChildren }) }));
+        }, children: _jsx(ToggleGroupContext.Provider, { value: contextValue, children: enhancedChildren }) }));
 }
 /**
  * ToggleGroupItem Component
@@ -124,15 +125,10 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
         ? getContrastingColor(itemBgColor, theme.colors.foreground, theme.colors.background)
         : theme.colors.foreground;
     return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(ToggleGroupPrimitive.Item, { ...props, style: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: spacing.sm,
+                    ...styles.item,
                     height: sizeConfig.height,
                     minWidth: sizeConfig.minWidth,
                     paddingHorizontal: sizeConfig.paddingHorizontal,
-                    borderWidth: 1,
-                    flexShrink: 0,
                     // Base variant styles
                     ...(context.variant === "default" && !isSelected && {
                         backgroundColor: "transparent",
@@ -184,7 +180,17 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
                 }, hitSlop: DEFAULT_HIT_SLOP, children: typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }));
 }
 function ToggleGroupIcon({ name, size, color }) {
-    const contextColor = React.useContext(TextColorContext);
+    const contextColor = React.use(TextColorContext);
     return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
 }
+const styles = StyleSheet.create({
+    item: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.sm,
+        borderWidth: 1,
+        flexShrink: 0,
+    },
+});
 export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };

package/dist/components/Tooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as TooltipPrimitive from "@rn-primitives/tooltip";