@mrmeg/expo-ui 0.14.0 → 0.16.0

package/dist/components/StyledText.d.ts

@@ -1,13 +1,13 @@
 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
+ * Font size variants for the type scale (Inter sans-serif / Georgia serif)
  */
 export type FontSize = "xs" | "sm" | "base" | "body" | "lg" | "xl" | "xxl" | "display";
 /**
  * Semantic text variants for different use cases
  */
-export type SemanticVariant = "title" | "heading" | "subheading" | "body" | "caption" | "label";
+export type SemanticVariant = "title" | "heading" | "subheading" | "body" | "caption" | "label" | "eyebrow";
 /**
  * Font weight options
  */
@@ -18,7 +18,7 @@ export type FontWeight = "light" | "regular" | "medium" | "semibold" | "bold";
 export type TextAlign = "left" | "center" | "right" | "justify" | "auto";
 export type TextProps = RNTextProps & {
     /**
-     * Font variant - serif (DM Serif Display) or sans-serif (DM Sans)
+     * Font variant - serif (Georgia) or sans-serif (Inter)
      */
     variant?: "serif" | "sansSerif";
     /**
@@ -62,9 +62,12 @@ export type TextProps = RNTextProps & {
  *
  * Features:
  * - Size variants (xs, sm, base, body, lg, xl, xxl, display)
- * - Semantic variants (title, heading, subheading, body, caption, label)
+ * - Semantic variants (title, heading, subheading, body, caption, label, eyebrow)
  * - Text alignment prop
- * - Font weight options (light, regular, medium, semibold, bold)
+ * - Font weight options (light, regular, medium, semibold, bold) — resolves to
+ *   real Inter font files on native, and family + numeric fontWeight on web
+ * - Per-size letter-spacing scale (tight on large headings, positive on micro
+ *   labels); explicit `style` letterSpacing always wins
  * - Text selection enabled by default; pass `selectable={false}` for control
  *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
@@ -72,27 +75,28 @@ export type TextProps = RNTextProps & {
 export declare function StyledText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Text Component
- * Uses serif font family (DM Serif Display)
+ * Uses the serif font family (Georgia)
  */
 export declare function SerifText(props: TextProps): import("react").JSX.Element;
 /**
  * Sans-Serif Text Component
- * Uses sans-serif font family (DM Sans)
+ * Uses the sans-serif font family (Inter)
  */
 export declare function SansSerifText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Bold Text Component
- * Uses serif font family — DM Serif Display only has regular weight
+ * Uses the serif font family — Georgia's only shipped weight is regular
  */
 export declare function SerifBoldText(props: TextProps): import("react").JSX.Element;
 /**
  * Sans-Serif Bold Text Component
- * Uses sans-serif font family with semibold weight (DM Sans 600)
+ * Uses the sans-serif font family at semibold weight (Inter 600)
  */
 export declare function SansSerifBoldText(props: TextProps): import("react").JSX.Element;
 /**
  * Display Text Component
- * Uses DM Serif Display at display size — for hero text and splash screens
+ * Uses the serif font family (Georgia) at display size — for hero text and
+ * splash screens
  */
 export declare function DisplayText(props: TextProps): import("react").JSX.Element;
 /**
@@ -119,3 +123,9 @@ export declare function CaptionText(props: TextProps): import("react").JSX.Eleme
  * Label Text - Medium weight text for form labels
  */
 export declare function LabelText(props: TextProps): import("react").JSX.Element;
+/**
+ * Eyebrow Text - Small, semibold, uppercase section label with wide positive
+ * tracking (the overline idiom above a heading). Consumed by the SectionHeader
+ * primitive (separate spec).
+ */
+export declare function EyebrowText(props: TextProps): import("react").JSX.Element;

package/dist/components/StyledText.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
-import { Text as RNText, StyleSheet } from "react-native";
+import { Platform, Text as RNText, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
-import { fontFamilies } from "../constants/fonts.js";
+import { fontFamilies, defaultWebWeightStrategy } from "../constants/fonts.js";
+import { useThemeStore } from "../state/themeStore.js";
 import { translateText } from "../lib/i18n.js";
 import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context";
 const FONT_SIZES = {
@@ -25,11 +26,24 @@ const LINE_HEIGHTS = {
     xxl: 33.6,
     display: 40.8,
 };
+// Per-size tracking (px), derived from em targets (em × fontSize, rounded to
+// 2 decimals): tight tracking on large headings, neutral through body text,
+// positive tracking on small/micro labels so they don't read cramped at size.
+// RN's `letterSpacing` is px, not em, hence the pre-multiplied values here.
 const LETTER_SPACING = {
-    sm: 0,
-    xxl: 0,
-    display: 0,
+    xs: 0.11, // +0.01em × 11
+    sm: 0.06, // +0.005em × 12
+    base: 0,
+    body: 0,
+    lg: -0.09, // -0.005em × 18
+    xl: -0.22, // -0.01em × 22
+    xxl: -0.42, // -0.015em × 28
+    display: -0.68, // -0.02em × 34
 };
+// Eyebrow/overline tracking is deliberately wider than the "sm" default
+// above — it's a distinct uppercase-label treatment, not the same tracking
+// used for ordinary small text at that size. +0.08em × 12px (sm fontSize).
+const EYEBROW_LETTER_SPACING = 0.96;
 const SEMANTIC_CONFIGS = {
     title: { size: "xxl", weight: "semibold" },
     heading: { size: "xl", weight: "semibold" },
@@ -37,19 +51,25 @@ const SEMANTIC_CONFIGS = {
     body: { size: "body", weight: "regular" },
     caption: { size: "sm", weight: "regular" },
     label: { size: "base", weight: "medium" },
+    // Section-label idiom (uppercase, widely tracked) — see EYEBROW_LETTER_SPACING
+    // and the textTransform applied in StyledText below.
+    eyebrow: { size: "sm", weight: "semibold" },
 };
-// Map font weights to actual font family weight keys
-// DM Sans has: light, regular, medium, semibold
-// DM Serif Display has: regular only
-const getFontFamilyWeight = (weight) => {
-    if (!weight || weight === "regular")
-        return "regular";
-    if (weight === "light")
-        return "light";
-    if (weight === "medium")
-        return "medium";
-    // semibold and bold both map to semibold (DM Sans's heaviest weight)
-    return "semibold";
+// Font family weight keys now map 1:1 onto FontWeight — every weight has a
+// real family entry (native: a distinct static Inter file; web: shared
+// "Inter" family + numeric fontWeight, see WEB_FONT_WEIGHTS). Defaults to
+// "regular" when no weight is requested.
+const getFontFamilyWeight = (weight) => weight ?? "regular";
+// Web-only: the numeric fontWeight that picks the right @font-face variant
+// out of the single shared "Inter" CSS family. "light" has no loaded 300
+// weight (mirrors the native light->regular mapping in constants/fonts.ts),
+// so it renders at 400 like "regular".
+const WEB_FONT_WEIGHTS = {
+    light: "400",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
 };
 /**
  * Base Text component with theme and variant support
@@ -57,9 +77,12 @@ const getFontFamilyWeight = (weight) => {
  *
  * Features:
  * - Size variants (xs, sm, base, body, lg, xl, xxl, display)
- * - Semantic variants (title, heading, subheading, body, caption, label)
+ * - Semantic variants (title, heading, subheading, body, caption, label, eyebrow)
  * - Text alignment prop
- * - Font weight options (light, regular, medium, semibold, bold)
+ * - Font weight options (light, regular, medium, semibold, bold) — resolves to
+ *   real Inter font files on native, and family + numeric fontWeight on web
+ * - Per-size letter-spacing scale (tight on large headings, positive on micro
+ *   labels); explicit `style` letterSpacing always wins
  * - Text selection enabled by default; pass `selectable={false}` for control
  *   chrome such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
@@ -67,6 +90,9 @@ const getFontFamilyWeight = (weight) => {
 export function StyledText(props) {
     const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, size, semantic, align, selectable, children, ref, ...otherProps } = props;
     const { theme } = useTheme();
+    // Subscribed, not read via getState(), so a `setFonts` call after mount
+    // re-renders text instead of leaving stale families on screen.
+    const fontOverrides = useThemeStore((s) => s.fontOverrides);
     // Check if there's a color override from parent context (e.g., Button)
     const contextColor = use(TextColorContext);
     const contextTextStyle = use(TextStyleContext);
@@ -78,16 +104,35 @@ export function StyledText(props) {
     const semanticConfig = semantic ? SEMANTIC_CONFIGS[semantic] : undefined;
     const finalSize = semanticConfig?.size ?? size ?? "body";
     const finalFontWeight = semanticConfig?.weight ?? fontWeight ?? "regular";
-    // Get font family based on variant and weight
+    // Get font family based on variant and weight. Host apps can replace the
+    // package's bundled faces via `setFonts` (see constants/fonts.ts); merging
+    // per-group means an app overriding only `sansSerif` keeps the default serif.
     const fontFamilyWeight = getFontFamilyWeight(finalFontWeight);
-    // DM Serif Display only has regular — use it regardless of requested weight
+    const overriddenFamilies = fontOverrides.families;
+    const serifFamilies = overriddenFamilies?.serif ?? fontFamilies.serif;
+    const sansSerifFamilies = overriddenFamilies?.sansSerif ?? fontFamilies.sansSerif;
+    // The serif slot has a single usable weight — use it regardless of the
+    // requested weight.
     const fontFamily = variant === "serif"
-        ? fontFamilies.serif.regular
-        : fontFamilies.sansSerif[fontFamilyWeight] ?? fontFamilies.sansSerif.regular;
+        ? serifFamilies.regular
+        : sansSerifFamilies[fontFamilyWeight] ?? sansSerifFamilies.regular;
+    // Weight is carried either by a numeric `fontWeight` (one multi-weight CSS
+    // family) or by the family name itself (discrete per-weight faces). Native
+    // is always the latter: adding a numeric weight on top of an already-bold
+    // file faux-bolds it. Web defaults to numeric for the package's own single
+    // "Inter" family, but an app loading per-weight faces through `expo-font`
+    // gets its own family per weight on web too, and must declare
+    // `webWeightStrategy: "family"` to avoid a second synthesised layer of bold.
+    const weightStrategy = Platform.OS === "web"
+        ? fontOverrides.webWeightStrategy ?? defaultWebWeightStrategy
+        : "family";
+    const resolvedFontWeight = weightStrategy === "numeric"
+        ? WEB_FONT_WEIGHTS[finalFontWeight]
+        : undefined;
     // Get fontSize and lineHeight from size variant
     const fontSize = FONT_SIZES[finalSize];
     const lineHeight = LINE_HEIGHTS[finalSize];
-    const letterSpacing = LETTER_SPACING[finalSize];
+    const letterSpacing = semantic === "eyebrow" ? EYEBROW_LETTER_SPACING : LETTER_SPACING[finalSize];
     // If style overrides fontSize without lineHeight, drop the preset lineHeight
     // so RN uses its default (avoids clipping text with a mismatched lineHeight)
     const flatStyle = style ? StyleSheet.flatten(style) : undefined;
@@ -107,10 +152,12 @@ export function StyledText(props) {
                 color,
                 fontFamily,
                 fontSize,
+                ...(resolvedFontWeight !== undefined && { fontWeight: resolvedFontWeight }),
                 ...(resolvedLineHeight !== undefined && { lineHeight: resolvedLineHeight }),
                 userSelect: resolvedSelectable ? "auto" : "none",
                 ...(letterSpacing !== undefined && { letterSpacing }),
                 ...(align && { textAlign: align }),
+                ...(semantic === "eyebrow" && { textTransform: "uppercase" }),
             },
             resolvedContextTextStyle,
             style,
@@ -118,35 +165,36 @@ export function StyledText(props) {
 }
 /**
  * Serif Text Component
- * Uses serif font family (DM Serif Display)
+ * Uses the serif font family (Georgia)
  */
 export function SerifText(props) {
     return _jsx(StyledText, { ...props, variant: "serif" });
 }
 /**
  * Sans-Serif Text Component
- * Uses sans-serif font family (DM Sans)
+ * Uses the sans-serif font family (Inter)
  */
 export function SansSerifText(props) {
     return _jsx(StyledText, { ...props, variant: "sansSerif" });
 }
 /**
  * Serif Bold Text Component
- * Uses serif font family — DM Serif Display only has regular weight
+ * Uses the serif font family — Georgia's only shipped weight is regular
  */
 export function SerifBoldText(props) {
     return _jsx(StyledText, { ...props, variant: "serif", fontWeight: "regular" });
 }
 /**
  * Sans-Serif Bold Text Component
- * Uses sans-serif font family with semibold weight (DM Sans 600)
+ * Uses the sans-serif font family at semibold weight (Inter 600)
  */
 export function SansSerifBoldText(props) {
     return _jsx(StyledText, { ...props, variant: "sansSerif", fontWeight: "semibold" });
 }
 /**
  * Display Text Component
- * Uses DM Serif Display at display size — for hero text and splash screens
+ * Uses the serif font family (Georgia) at display size — for hero text and
+ * splash screens
  */
 export function DisplayText(props) {
     return _jsx(StyledText, { ...props, variant: "serif", size: "display" });
@@ -188,3 +236,11 @@ export function CaptionText(props) {
 export function LabelText(props) {
     return _jsx(StyledText, { ...props, semantic: "label" });
 }
+/**
+ * Eyebrow Text - Small, semibold, uppercase section label with wide positive
+ * tracking (the overline idiom above a heading). Consumed by the SectionHeader
+ * primitive (separate spec).
+ */
+export function EyebrowText(props) {
+    return _jsx(StyledText, { ...props, semantic: "eyebrow" });
+}

package/dist/components/Switch.js

@@ -5,15 +5,41 @@ import { spacing } from "../constants/spacing.js";
 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 { useCallback, useEffect, useRef, useState } from "react";
 import { ActivityIndicator, Platform, StyleSheet, View, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useScalePress } from "../hooks/useScalePress.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();
+    const { theme, getContrastingColor, getShadowStyle, getFocusRingStyle, withAlpha } = useTheme();
     const reduceMotion = useReducedMotion();
     const hasMounted = useRef(false);
+    const [focused, setFocused] = useState(false);
+    const focusRingStyle = getFocusRingStyle();
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.92,
+        haptic: false,
+    });
+    const showFocusRing = (event) => {
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
+    };
+    const hideFocusRing = () => {
+        setFocused(false);
+    };
     // Fire haptic on user-initiated toggles (skip initial mount)
     const wrappedOnCheckedChange = useCallback((checked) => {
         if (hasMounted.current)
@@ -67,61 +93,62 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
     const labelFontSize = size.height / 3;
     // Flatten style override for web compatibility
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    return (_jsxs(SwitchPrimitives.Root, { ...props, onCheckedChange: wrappedOnCheckedChange, style: {
-            position: "relative",
-            width: size.width,
-            height: size.height,
-            borderRadius: size.height / 2,
-            justifyContent: "center",
-            opacity: props.disabled ? 0.5 : 1,
-            ...(Platform.OS === "web" && { cursor: props.disabled ? "not-allowed" : "pointer" }),
-            ...(flattenedStyle || {}),
-        }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "switch", accessibilityState: {
-            checked: props.checked,
-            disabled: !!props.disabled,
-            busy: loading,
-        }, children: [_jsx(View, { style: {
-                    ...StyleSheet.absoluteFill,
-                    borderRadius: size.height / 2,
-                    backgroundColor: trackBg,
-                    borderWidth: 1,
-                    borderColor: trackBorderColor,
-                    pointerEvents: "none",
-                } }), labelOn && !isIOS && (_jsx(View, { style: {
-                    ...styles.label,
-                    left: labelHorizontalInset,
-                    right: thumbInset + thumbSize + labelGap,
-                    opacity: props.checked ? 1 : 0,
-                }, children: _jsx(StyledText, { selectable: false, style: {
-                        fontFamily: fontFamilies.sansSerif.bold,
-                        fontSize: labelFontSize,
-                        color: labelOnColor,
-                        userSelect: "none",
-                    }, children: labelOn }) })), _jsx(SwitchPrimitives.Thumb, { children: _jsx(Animated.View, { style: [
-                        {
-                            width: thumbSize,
-                            height: thumbSize,
-                            marginLeft: thumbInset,
-                            borderRadius: thumbSize / 2,
-                            backgroundColor: thumbBackgroundColor,
-                            borderWidth: 1,
-                            borderColor: thumbBorderColor,
-                            justifyContent: "center",
-                            alignItems: "center",
-                            ...getShadowStyle("subtle"),
-                        },
-                        thumbAnimatedStyle,
-                    ], children: loading && (_jsx(ActivityIndicator, { size: "small", color: thumbIndicatorColor })) }) }), labelOff && !isIOS && (_jsx(View, { style: {
-                    ...styles.label,
-                    left: thumbInset + thumbSize + labelGap,
-                    right: labelHorizontalInset,
-                    opacity: props.checked ? 0 : 1,
-                }, children: _jsx(StyledText, { selectable: false, style: {
-                        fontFamily: fontFamilies.sansSerif.bold,
-                        fontSize: labelFontSize,
-                        color: theme.colors.text,
-                        userSelect: "none",
-                    }, children: labelOff }) }))] }));
+    return (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(SwitchPrimitives.Root, { ...props, onCheckedChange: wrappedOnCheckedChange, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                position: "relative",
+                width: size.width,
+                height: size.height,
+                borderRadius: size.height / 2,
+                justifyContent: "center",
+                opacity: props.disabled ? 0.5 : 1,
+                ...(Platform.OS === "web" && { cursor: props.disabled ? "not-allowed" : "pointer" }),
+                ...(focused && !props.disabled ? focusRingStyle : null),
+                ...(flattenedStyle || {}),
+            }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "switch", accessibilityState: {
+                checked: props.checked,
+                disabled: !!props.disabled,
+                busy: loading,
+            }, children: [_jsx(View, { style: {
+                        ...StyleSheet.absoluteFill,
+                        borderRadius: size.height / 2,
+                        backgroundColor: trackBg,
+                        borderWidth: 1,
+                        borderColor: trackBorderColor,
+                        pointerEvents: "none",
+                    } }), labelOn && !isIOS && (_jsx(View, { style: {
+                        ...styles.label,
+                        left: labelHorizontalInset,
+                        right: thumbInset + thumbSize + labelGap,
+                        opacity: props.checked ? 1 : 0,
+                    }, children: _jsx(StyledText, { selectable: false, style: {
+                            fontFamily: fontFamilies.sansSerif.bold,
+                            fontSize: labelFontSize,
+                            color: labelOnColor,
+                            userSelect: "none",
+                        }, children: labelOn }) })), _jsx(SwitchPrimitives.Thumb, { children: _jsx(Animated.View, { style: [
+                            {
+                                width: thumbSize,
+                                height: thumbSize,
+                                marginLeft: thumbInset,
+                                borderRadius: thumbSize / 2,
+                                backgroundColor: thumbBackgroundColor,
+                                borderWidth: 1,
+                                borderColor: thumbBorderColor,
+                                justifyContent: "center",
+                                alignItems: "center",
+                                ...getShadowStyle("subtle"),
+                            },
+                            thumbAnimatedStyle,
+                        ], children: loading && (_jsx(ActivityIndicator, { size: "small", color: thumbIndicatorColor })) }) }), labelOff && !isIOS && (_jsx(View, { style: {
+                        ...styles.label,
+                        left: thumbInset + thumbSize + labelGap,
+                        right: labelHorizontalInset,
+                        opacity: props.checked ? 0 : 1,
+                    }, children: _jsx(StyledText, { selectable: false, style: {
+                            fontFamily: fontFamilies.sansSerif.bold,
+                            fontSize: labelFontSize,
+                            color: theme.colors.text,
+                            userSelect: "none",
+                        }, children: labelOff }) }))] }) }));
 }
 const styles = StyleSheet.create({
     label: {

package/dist/components/Tabs.js

@@ -7,6 +7,7 @@ import { TextClassContext, TextColorContext } from "./StyledText.context";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import { spacing } from "../constants/spacing.js";
 // ============================================================================
 // Size configs
@@ -56,7 +57,7 @@ function TabsList({ style, children, ...props }) {
     return (_jsx(TabsPrimitive.List, { style: StyleSheet.flatten([listStyle, style]), ...props, children: children }));
 }
 function TabsTriggerInner({ icon, style, children, value, ...props }) {
-    const { theme, getShadowStyle } = useTheme();
+    const { theme, getShadowStyle, getFocusRingStyle } = useTheme();
     const { variant, size } = useTabsContext();
     const sizeConfig = SIZE_CONFIGS[size];
     const reduceMotion = useReducedMotion();
@@ -77,6 +78,31 @@ function TabsTriggerInner({ icon, style, children, value, ...props }) {
         : isSelected
             ? theme.colors.foreground
             : theme.colors.mutedForeground;
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = React.useState(false);
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: isDisabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    const showFocusRing = (event) => {
+        let ringVisible = true;
+        if (Platform.OS === "web") {
+            const target = event?.nativeEvent?.target;
+            if (target && typeof target.matches === "function") {
+                try {
+                    ringVisible = target.matches(":focus-visible");
+                }
+                catch {
+                    ringVisible = true;
+                }
+            }
+        }
+        setFocused(ringVisible);
+    };
+    const hideFocusRing = () => {
+        setFocused(false);
+    };
     const triggerBaseStyle = {
         flex: 1,
         // Allow the trigger to shrink below its content's intrinsic width so long
@@ -97,17 +123,22 @@ 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 })), children] }), variant === "underline" && (_jsx(Animated.View, { style: [
-                            {
-                                position: "absolute",
-                                bottom: 0,
-                                left: 0,
-                                right: 0,
-                                height: 2,
-                                backgroundColor: theme.colors.foreground,
-                            },
-                            { opacity: activeOpacity },
-                        ] }))] }) }) }));
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: [{ flex: 1, minWidth: 0 }, scaleStyle], children: _jsxs(TabsPrimitive.Trigger, { value: value, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: StyleSheet.flatten([
+                        triggerBaseStyle,
+                        pillActiveStyle,
+                        focused && !isDisabled && focusRingStyle,
+                        style,
+                    ]), 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,
+                                    left: 0,
+                                    right: 0,
+                                    height: 2,
+                                    backgroundColor: theme.colors.foreground,
+                                },
+                                { opacity: activeOpacity },
+                            ] }))] }) }) }) }));
 }
 const TabsTrigger = TabsTriggerInner;
 /**

package/dist/components/TextInput.js

@@ -8,6 +8,7 @@ import { fontFamilies } from "../constants/fonts.js";
 import { StyledText } from "./StyledText.js";
 import { Icon } from "./Icon.js";
 import { hapticLight } from "../lib/haptics.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 import { palette } from "../constants/colors.js";
 import { clearKeyboardFocusedInputLayout, setKeyboardFocusedInputLayout, } from "./keyboardFocusRegistry.js";
 const NUMERIC_REGEX = /^[0-9]*$/;
@@ -91,7 +92,7 @@ export function TextInput(props) {
  */
 function WebTextInput({ 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 styles = themedStyles(theme)[variant][size];
     const [focused, setFocused] = useState(false);
     const [contentHeight, setContentHeight] = useState(0);
     const [passwordVisible, setPasswordVisible] = useState(false);
@@ -146,7 +147,7 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
     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: showInputFocusRing, onBlur: hideInputFocusRing, 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, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", 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,
@@ -171,7 +172,7 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
                         }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) })), showClearButton && rightElement && !hasSecureToggle && (_jsxs(View, { style: styles.rightElements, children: [_jsx(Pressable, { onPress: () => {
                                     hapticLight();
                                     onChangeText?.("");
-                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: [styles.errorIcon, { pointerEvents: "none" }], accessibilityLabel: "Error", children: _jsx(Icon, { name: "alert-circle", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [
+                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: [styles.errorIcon, { pointerEvents: "none" }], accessibilityLabel: "Error", children: _jsx(Icon, { name: "alert-circle", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [
                     styles.helperText,
                     hasError && styles.errorText,
                 ], children: errorText || helperText }))] }));
@@ -197,7 +198,7 @@ function NativeTextInput({ variant = "outline", size = "md", label, helperText,
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const { theme, getContrastingColor } = useTheme();
-    const styles = useMemo(() => createStyles(theme, variant, size), [theme, variant, size]);
+    const styles = themedStyles(theme)[variant][size];
     const [passwordVisible, setPasswordVisible] = useState(false);
     const hasError = error || !!errorText;
     const sizeConfig = SIZE_CONFIGS[size];
@@ -327,7 +328,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         fontSize: sizeConfig.fontSize,
         ...(nativeFontFamily ? { fontFamily: nativeFontFamily } : null),
     };
-    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, { ref: surfaceRef, style: [surfaceStyle, hasSecureToggle && styles.nativeRow], onLayout: syncFocusedInputLayout, children: [_jsx(Host, { matchContents: { vertical: true }, style: hasSecureToggle ? styles.nativeHostFlex : styles.nativeHost, children: _jsx(ExpoTextInput, { ...rest, ref: innerRef, value: state, defaultValue: defaultValue, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: effectiveSecureTextEntry, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: () => setPasswordVisible((v) => !v), accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { ref: surfaceRef, style: [surfaceStyle, hasSecureToggle && styles.nativeRow], onLayout: syncFocusedInputLayout, children: [_jsx(Host, { matchContents: { vertical: true }, style: hasSecureToggle ? styles.nativeHostFlex : styles.nativeHost, children: _jsx(ExpoTextInput, { ...rest, ref: innerRef, value: state, defaultValue: defaultValue, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: effectiveSecureTextEntry, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: () => setPasswordVisible((v) => !v), accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
 }
 const createStyles = (theme, variant, size) => StyleSheet.create({
     nativeHost: {
@@ -378,18 +379,17 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
         marginBottom: spacing.xs,
     },
     label: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontWeight: "500",
-        fontSize: 14,
+        // fontFamily/fontSize/fontWeight now come from StyledText's
+        // size="base" fontWeight="medium" props (see JSX below), which resolve
+        // the platform-correct family + weight instead of a hardcoded pair.
         color: theme.colors.text,
     },
     required: {
+        // fontFamily/fontWeight now come from StyledText's fontWeight="bold" prop.
         color: theme.colors.destructive,
-        fontFamily: fontFamilies.sansSerif.bold,
     },
     helperText: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontSize: 12,
+        // fontFamily/fontSize now come from StyledText's size="sm" prop (see JSX below).
         color: theme.colors.textDim,
         marginTop: spacing.xs,
     },
@@ -444,3 +444,9 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
         zIndex: 1,
     },
 });
+const VARIANT_KEYS = ["outline", "filled", "underlined"];
+const SIZE_KEYS = ["sm", "md", "lg"];
+const themedStyles = createThemedStyles((theme) => Object.fromEntries(VARIANT_KEYS.map((variant) => [
+    variant,
+    Object.fromEntries(SIZE_KEYS.map((size) => [size, createStyles(theme, variant, size)])),
+])));