@mrmeg/expo-ui 0.13.0 → 0.15.0

package/dist/components/StyledText.js

@@ -1,6 +1,6 @@
 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 { translateText } from "../lib/i18n.js";
@@ -25,11 +25,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 +50,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 +76,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
@@ -80,14 +102,20 @@ export function StyledText(props) {
     const finalFontWeight = semanticConfig?.weight ?? fontWeight ?? "regular";
     // Get font family based on variant and weight
     const fontFamilyWeight = getFontFamilyWeight(finalFontWeight);
-    // DM Serif Display only has regular — use it regardless of requested weight
+    // Georgia (serif) only has one weight — use it regardless of requested weight
     const fontFamily = variant === "serif"
         ? fontFamilies.serif.regular
         : fontFamilies.sansSerif[fontFamilyWeight] ?? fontFamilies.sansSerif.regular;
+    // Web ships one Inter family for every weight, so a numeric fontWeight picks
+    // the right @font-face variant. Native ships a discrete static font file per
+    // weight (see constants/fonts.ts) — the family name alone carries the
+    // weight there, and adding a numeric fontWeight on top would faux-bold an
+    // already-bold file, so this stays web-only.
+    const resolvedFontWeight = Platform.OS === "web" ? 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 +135,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 +148,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 +219,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

@@ -146,7 +146,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 +171,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 }))] }));
@@ -327,7 +327,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 +378,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,
     },

package/dist/components/Toggle.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { useState } from "react";
 import { Icon } from "./Icon.js";
 import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as TogglePrimitive from "@rn-primitives/toggle";
-import { Platform, StyleSheet, ActivityIndicator } from "react-native";
+import { Platform, StyleSheet, ActivityIndicator, Animated } from "react-native";
 import { palette } from "../constants/colors.js";
 const DEFAULT_HIT_SLOP = 8;
 // Size configurations
@@ -73,8 +74,10 @@ const TOGGLE_SIZES = {
  * ```
  */
 function Toggle({ variant = "default", size = "default", shape = "default", loading = false, iconOnly = false, style: styleOverride, ...props }) {
-    const { theme, getContrastingColor, withAlpha } = useTheme();
+    const { theme, getContrastingColor, getFocusRingStyle, withAlpha } = useTheme();
     const sizeConfig = TOGGLE_SIZES[size];
+    const focusRingStyle = getFocusRingStyle();
+    const [focused, setFocused] = useState(false);
     // Calculate text color based on state and variant
     const getTextColor = () => {
         if (props.pressed) {
@@ -101,45 +104,69 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
     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: {
-                    ...styles.root,
-                    height: sizeConfig.height,
-                    minWidth: sizeConfig.minWidth,
-                    paddingHorizontal: iconOnly ? sizeConfig.height / 2 - sizeConfig.iconSize / 2 : sizeConfig.paddingHorizontal,
-                    borderRadius: getBorderRadius(),
-                    // Base variant styles
-                    ...(variant === "default" && !props.pressed && {
-                        backgroundColor: "transparent",
-                        borderColor: theme.colors.border,
-                    }),
-                    ...(variant === "default" && props.pressed && {
-                        backgroundColor: withAlpha(theme.colors.primary, 0.1),
-                        borderColor: theme.colors.primary,
-                    }),
-                    // Outline variant styles
-                    ...(variant === "outline" && !props.pressed && {
-                        backgroundColor: "transparent",
-                        borderColor: theme.colors.primary,
-                    }),
-                    ...(variant === "outline" && props.pressed && {
-                        backgroundColor: theme.colors.primary,
-                        borderColor: theme.colors.primary,
-                    }),
-                    // Disabled state
-                    opacity: isDisabled ? 0.5 : 1,
-                    // Web-specific styles
-                    ...(Platform.OS === "web" && {
-                        cursor: isDisabled ? "not-allowed" : "pointer",
-                        transition: "all 150ms",
-                        userSelect: "none",
-                    }),
-                    // Apply custom style override
-                    ...(flattenedStyle || {}),
-                }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "button", accessibilityState: {
-                    selected: props.pressed,
-                    disabled: !!isDisabled,
-                    busy: loading,
-                }, 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 })) }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!isDisabled,
+        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);
+    };
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(TogglePrimitive.Root, { ...props, disabled: isDisabled, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                        ...styles.root,
+                        height: sizeConfig.height,
+                        minWidth: sizeConfig.minWidth,
+                        paddingHorizontal: iconOnly ? sizeConfig.height / 2 - sizeConfig.iconSize / 2 : sizeConfig.paddingHorizontal,
+                        borderRadius: getBorderRadius(),
+                        // Base variant styles
+                        ...(variant === "default" && !props.pressed && {
+                            backgroundColor: "transparent",
+                            borderColor: theme.colors.border,
+                        }),
+                        ...(variant === "default" && props.pressed && {
+                            backgroundColor: withAlpha(theme.colors.primary, 0.1),
+                            borderColor: theme.colors.primary,
+                        }),
+                        // Outline variant styles
+                        ...(variant === "outline" && !props.pressed && {
+                            backgroundColor: "transparent",
+                            borderColor: theme.colors.primary,
+                        }),
+                        ...(variant === "outline" && props.pressed && {
+                            backgroundColor: theme.colors.primary,
+                            borderColor: theme.colors.primary,
+                        }),
+                        // Disabled state
+                        opacity: isDisabled ? 0.5 : 1,
+                        // Web-specific styles
+                        ...(Platform.OS === "web" && {
+                            cursor: isDisabled ? "not-allowed" : "pointer",
+                            transition: "all 150ms",
+                            userSelect: "none",
+                        }),
+                        ...(focused && !isDisabled ? focusRingStyle : null),
+                        // Apply custom style override
+                        ...(flattenedStyle || {}),
+                    }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "button", accessibilityState: {
+                        selected: props.pressed,
+                        disabled: !!isDisabled,
+                        busy: loading,
+                    }, 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.use(TextColorContext);