@mrmeg/expo-ui 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,124 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.17.0]
+
+### Added
+
+- **`mono` font variant.** `StyledText` accepts `variant="mono"` (plus a
+  `MonoText` convenience alias) for code, IDs, and tabular figures. Defaults
+  to the platform's system monospace (Menlo on iOS, `monospace` on Android, a
+  `ui-monospace` stack on web); host apps swap in their own faces via the new
+  `mono` group in `setFonts`.
+
+- **Per-weight-partial font override groups.** `setFonts` families are now
+  partial at both levels: per group (`sansSerif` alone leaves `serif`/`mono`
+  at their defaults, as before) and per weight — weights missing from an
+  overridden group fall back to that group's `regular`, never to a package
+  face. Registering only Regular + Medium is enough. `serif` also gained the
+  full weight range (previously `regular`/`bold` only, and `SerifText`
+  ignored the requested weight; it now resolves per weight).
+
+- **`useResources` skips the Inter download when `sansSerif` is overridden.**
+  A host app that forwards its own sans faces owns loading them; nothing
+  would reference the packaged Inter, so the native `.ttf` fetch and the web
+  Google-Fonts stylesheet are skipped. Call `setFonts` before the hook mounts
+  for the skip to apply; the Feather icon font always loads. Without
+  overrides, loading is unchanged.
+
+- **`setShape` — shape injection, completing the `setColors`/`setFonts`
+  trio.** Grouped per component for future growth; currently covers Button:
+
+  ```ts
+  useThemeStore.getState().setShape({
+    button: { borderRadius: 9999, withShadow: false },
+  });
+  ```
+
+  `borderRadius` applies to every Button preset (package default stays 12);
+  `withShadow` controls the `default` preset's resting shadow (default stays
+  on). Precedence is caller-wins throughout: the per-instance `withShadow`
+  prop and caller `style` beat the global override, which beats the package
+  default. `setShape({})` clears back to the defaults.
+
+- **Every text-rendering component now resolves families through the theme
+  store.** Button labels, Label, Switch track labels, InputOTP cells, and
+  TextInput previously hardcoded Inter family constants in their static
+  styles, so `setFonts` re-skinned `StyledText` but left control chrome on
+  Inter. They now share one resolver (`resolveFontStyle`, surfaced to
+  components as the `useFontStyle` hook, both exported), so a `setFonts` call
+  re-skins the whole package at once.
+
+- Exported `FontVariant`, `FontFamilyOverride`, `ResolvedFontStyle`,
+  `resolveFontStyle` (from `constants`), `useFontStyle` (from `hooks`),
+  `ShapeOverrides` (from `state`), and `MonoText` (from `components`).
+
+### Why
+
+A consuming app rethemed to a new design language (custom sans/serif/mono
+faces, pill buttons, flat surfaces) and hit the package's remaining hardcoded
+Inter references, the fixed button radius, and the always-on default-preset
+shadow — none of which were themable. Fully backward compatible: with no
+`setFonts`/`setShape` call, fonts, radii, and shadows are identical to 0.16.0.
+
+## [0.16.0]
+
+### Added
+
+- **`setFonts` — font injection, mirroring `setColors`.** A host app can now
+  forward its own bundled faces to the package:
+
+  ```ts
+  useThemeStore.getState().setFonts({
+    families: { sansSerif: { light: "…", regular: "…", medium: "…",
+                             semibold: "…", bold: "…" } },
+    webWeightStrategy: "family",
+  });
+  ```
+
+  Overrides are partial and per-group — pass `sansSerif` alone and `serif`
+  keeps the package default. `setFonts({})` clears back to the defaults.
+  `StyledText` subscribes to the store, so a call after mount re-renders
+  rather than leaving stale families on screen.
+
+- **`webWeightStrategy` — `"numeric" | "family"`.** Declares how a family map
+  expresses weight. `"numeric"` (the package default on web) assumes one
+  multi-weight CSS family where a numeric `fontWeight` selects the
+  `@font-face` variant. `"family"` means each weight is its own
+  separately-registered single-face family, so the family name alone carries
+  the weight and `StyledText` suppresses the numeric `fontWeight`. Native is
+  always `"family"`, unchanged.
+
+  Apps loading per-weight faces through `expo-font` need `"family"` on web:
+  `expo-font` registers each file as its own family there too, so the previous
+  always-numeric behaviour synthesised a second layer of bold on top of an
+  already-bold face.
+
+- Exported `FontFamilyMap`, `FontFamilyWeight`, `FontOverrides`,
+  `FontWeightStrategy`, and `defaultWebWeightStrategy` from `constants/fonts`.
+
+- **`createThemedStyles` — SSR-safe themed style registration**, exported from
+  `lib`. Wraps a `(theme: Theme) => styles` factory so both base themes are
+  registered with react-native-web at module scope — before expo-router
+  snapshots the server-side stylesheet — instead of lazily during render via
+  `useMemo`, which left SSR HTML referencing class names with no rules
+  (unstyled first paint until hydration). Override themes are cached per theme
+  object identity. The package's own components (Badge, Button, Card,
+  EmptyState, InputOTP, Label, Notification, Skeleton, TextInput) now use it.
+
+### Why
+
+`fontFamilies` was a module-level `const` with no injection point, so the only
+way for a consumer to use its own type was to patch `dist/` inside
+`node_modules`. Bun keys `patchedDependencies` on an exact `name@version`, so
+those patches stop applying — silently, with no warning — the moment the
+package version is bumped. Two consumer apps hit exactly that and shipped
+fallback fonts without noticing. Colors already had `setColors` for this
+reason; fonts now match.
+
+Fully backward compatible: with no `setFonts` call, font resolution is
+identical to 0.15.0.
+
 ## [0.15.0]
 
 ### Added

package/LLM_USAGE.md

@@ -164,6 +164,15 @@ React context, scoped keys win over the global brand inside it, and nested
 scopes merge (inner wins, outer fills in). With no override at either layer,
 `useTheme()` returns the base theme by reference.
 
+Fonts and shape have matching global injection points. `setFonts({ families:
+{ sansSerif?, serif?, mono? }, webWeightStrategy? })` replaces the bundled
+faces (Inter/Georgia/system-mono) everywhere text renders; groups and weights
+are partial, missing weights fall back to the group's `regular`, and an
+overridden `sansSerif` makes `useResources` skip downloading Inter (call
+`setFonts` before mount for the skip). `setShape({ button: { borderRadius?,
+withShadow? } })` re-shapes Buttons globally (e.g. pill radius 9999, shadow
+off). Per-instance props and caller `style` always win over both.
+
 ## Component Use-Case Index
 
 Use this table before creating a new app-local primitive.

package/README.md

@@ -163,6 +163,92 @@ import { ThemeColorScope } from "@mrmeg/expo-ui/state";
 </ThemeColorScope>
 ```
 
+### Font overrides
+
+The package bundles Inter (sans), Georgia (serif), and the platform's system
+monospace (mono). Most apps ship their own faces — forward them with
+`setFonts`, the font counterpart to `setColors`. Call it once at startup,
+after your fonts are registered:
+
+```tsx
+import { useThemeStore } from "@mrmeg/expo-ui/state";
+
+useThemeStore.getState().setFonts({
+  families: {
+    sansSerif: {
+      regular: "HankenGrotesk_400Regular",
+      medium: "HankenGrotesk_500Medium",
+      semibold: "HankenGrotesk_600SemiBold",
+      bold: "HankenGrotesk_700Bold",
+    },
+    serif: {
+      regular: "Newsreader_400Regular",
+      semibold: "Newsreader_600SemiBold",
+    },
+    mono: {
+      regular: "JetBrainsMono_400Regular",
+      medium: "JetBrainsMono_500Medium",
+    },
+  },
+  webWeightStrategy: "family",
+});
+```
+
+Overrides are partial at both levels:
+
+- **Per group** — pass `sansSerif` alone and `serif`/`mono` keep the package
+  defaults.
+- **Per weight** — within an overridden group, weights you don't provide fall
+  back to that group's `regular` (never to a package face), so registering
+  only Regular + Medium is enough.
+
+`setFonts({})` clears back to the defaults.
+
+When `sansSerif` is overridden, `useResources` skips downloading the packaged
+Inter faces entirely (native `.ttf`s and the web Google-Fonts stylesheet) —
+your app owns loading its own families, and nothing would reference Inter.
+For the skip to apply, call `setFonts` before the hook mounts (module scope,
+or ahead of rendering the root); a later call still re-skins all text, it
+just doesn't prevent the Inter download. The Feather icon font always loads.
+
+**Pick the right `webWeightStrategy`** — this is the one non-obvious part:
+
+| Strategy | Use when | Effect |
+|---|---|---|
+| `"numeric"` (default) | You ship **one multi-weight CSS family** (a variable font, or Google Fonts' single `"Inter"` family) | A numeric `fontWeight` selects the `@font-face` variant |
+| `"family"` | You load **per-weight faces via `expo-font`** | The family name alone carries the weight; the numeric `fontWeight` is suppressed |
+
+If you load fonts through `expo-font` / `@expo-google-fonts`, choose
+`"family"`. `expo-font` registers each weight as its own single-face family on
+web as well as native, so emitting a numeric weight on top makes the browser
+synthesise a *second* layer of bold over an already-bold face.
+
+Native always behaves as `"family"` regardless of this setting.
+
+> Prefer `setFonts` over patching `node_modules`. Bun keys
+> `patchedDependencies` to an exact `name@version`, so a font patch silently
+> stops applying the next time you bump the package — with no warning.
+
+### Shape overrides
+
+`setShape` is the geometry counterpart to `setColors`/`setFonts`, grouped per
+component. It currently covers Button:
+
+```tsx
+import { useThemeStore } from "@mrmeg/expo-ui/state";
+
+useThemeStore.getState().setShape({
+  button: {
+    borderRadius: 9999, // pill buttons everywhere; package default is 12
+    withShadow: false,  // flatten the `default` preset; package default is true
+  },
+});
+```
+
+Precedence is unchanged and caller-wins: a per-instance `style={{ borderRadius }}`
+or `withShadow` prop still beats the global override, which beats the package
+default. `setShape({})` clears back to the defaults.
+
 Use `StyledText` for theme-aware text:
 
 ```tsx
@@ -179,7 +265,8 @@ Useful `StyledText` props:
 - `semantic`: `title`, `heading`, `subheading`, `body`, `caption`, `label`
 - `size`: `xs`, `sm`, `base`, `body`, `lg`, `xl`, `xxl`, `display`
 - `fontWeight`: `light`, `regular`, `medium`, `semibold`, `bold`
-- `variant`: `sansSerif`, `serif`
+- `variant`: `sansSerif`, `serif`, `mono` (or the `MonoText` alias for code,
+  IDs, and tabular figures)
 - `align`, `tx`, `txOptions`
 - `selectable`: defaults to `true` for readable copy; package controls disable
   selection for labels and other interactive chrome where accidental drag

package/dist/components/Badge.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from "react";
+import React from "react";
 import { View, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * Badge Component
  *
@@ -19,7 +20,7 @@ import { StyledText } from "./StyledText.js";
  */
 function Badge({ children, text, variant = "default", style: styleOverride }) {
     const { theme } = useTheme();
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     const badgeContent = text ?? children;
     const textStyle = [
         styles.text,
@@ -74,4 +75,5 @@ const createStyles = (theme) => StyleSheet.create({
         userSelect: "none",
     },
 });
+const themedStyles = createThemedStyles(createStyles);
 export { Badge };

package/dist/components/Button.js

@@ -5,10 +5,12 @@ import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
 import { Icon } from "./Icon.js";
 import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context";
-import { fontFamilies } from "../constants/fonts.js";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFontStyle } from "../hooks/useFontStyle.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { useThemeStore } from "../state/themeStore.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 const SIZE_CONFIGS = {
     sm: {
         paddingVertical: spacing.xxs,
@@ -72,14 +74,24 @@ const getNativeHitSlop = (sizeConfig) => Math.ceil(Math.max(0, spacing.touchTarg
 function ButtonRoot(props) {
     const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow: withShadowProp, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, ...rest } = props;
     const { theme, getContrastingColor, getFocusRingStyle, getShadowStyle } = useTheme();
-    const styles = useMemo(() => createStyles(theme, size), [theme, size]);
+    const styles = themedStyles(theme)[size];
     const shadowStyle = getShadowStyle("subtle");
     const sizeConfig = SIZE_CONFIGS[size];
+    // Host-app shape overrides (radius, default-preset shadow) — see `setShape`.
+    const buttonShape = useThemeStore((s) => s.shapeOverrides.button);
     // Filled (`default`) buttons float by default; ghost/outline/link stay flat
     // (transparent background reads oddly with a shadow), and destructive/secondary
-    // keep the old opt-in behavior. Callers can still override via `withShadow`.
-    const withShadow = withShadowProp ?? preset === "default";
+    // keep the old opt-in behavior. Precedence: the per-instance `withShadow`
+    // prop, then the host app's `setShape` flag, then the preset default.
+    const withShadow = withShadowProp
+        ?? (preset === "default" ? buttonShape?.withShadow ?? true : false);
     const focusRingStyle = getFocusRingStyle();
+    // Label typography resolves through the theme store so `setFonts` re-skins
+    // button labels along with everything else. Provided via TextStyleContext
+    // (after the static size styles) so nested Button.Text / StyledText children
+    // inherit it too, exactly like the previous hardcoded family did.
+    const labelFontStyle = useFontStyle("medium");
+    const labelTextStyle = useMemo(() => [styles.text, { fontFamily: labelFontStyle.fontFamily, fontWeight: labelFontStyle.fontWeight }], [styles.text, labelFontStyle.fontFamily, labelFontStyle.fontWeight]);
     // Pre-compute background color for contrast calculation
     // Always flatten to handle both array styles (from Slot) and RegisteredStyle
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
@@ -169,8 +181,12 @@ function ButtonRoot(props) {
             return nextWidth;
         });
     }, [fullWidth, loading]);
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: styles.text, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: labelTextStyle, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
                                 styles.button,
+                                // Host-app radius override (see `setShape`). Sits right
+                                // after the static radius so presets, state styles, and —
+                                // critically — the caller `style` spread below still win.
+                                buttonShape?.borderRadius !== undefined && { borderRadius: buttonShape.borderRadius },
                                 preset === "default" && styles.buttonDefault,
                                 preset === "outline" && styles.buttonOutline,
                                 preset === "ghost" && styles.buttonGhost,
@@ -190,7 +206,7 @@ function ButtonRoot(props) {
                                 // Spread array styles from Slot to prevent nested arrays on web
                                 ...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
                             ], onLayout: handleButtonLayout, children: [loading && (_jsx(View, { style: [styles.loaderOverlay, { pointerEvents: "none" }], children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { style: [styles.content, loading && styles.loadingContent, { pointerEvents: loading ? "none" : "auto" }], children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
-                                                styles.text,
+                                                labelTextStyle,
                                                 state.pressed && styles.pressedText,
                                                 state.pressed && pressedTextStyleOverride,
                                                 isDisabled && disabledTextStyleOverride,
@@ -282,15 +298,11 @@ const createStyles = (theme, size) => {
             width: "100%",
         },
         text: {
-            // Button labels render at medium weight. On native, the family itself
-            // carries the weight (a real static Inter_500Medium file) — pairing it
-            // with a numeric fontWeight would faux-bold on top of that file. Web
-            // shares one "Inter" family across weights, so it needs the numeric
-            // fontWeight to pick the right @font-face variant. (Same rule as
-            // StyledText's getFontFamilyWeight / WEB_FONT_WEIGHTS.)
-            fontFamily: fontFamilies.sansSerif.medium,
+            // Button labels render at medium weight. The fontFamily (+ numeric
+            // fontWeight on web) is NOT set here: it's resolved per-render through
+            // the theme store (`useFontStyle("medium")` in ButtonRoot) and layered
+            // right after this style, so `setFonts` overrides reach button labels.
             fontSize: sizeConfig.fontSize,
-            ...(Platform.OS === "web" && { fontWeight: "500" }),
             textAlign: "center",
             lineHeight: sizeConfig.fontSize * 1.4,
             flexShrink: 0,
@@ -321,6 +333,11 @@ const createStyles = (theme, size) => {
         },
     });
 };
+const themedStyles = createThemedStyles((theme) => ({
+    sm: createStyles(theme, "sm"),
+    md: createStyles(theme, "md"),
+    lg: createStyles(theme, "lg"),
+}));
 /**
  * Button with explicit subcomponents.
  * - `Button.Text` for label text (inherits control typography)

package/dist/components/Card.js

@@ -5,6 +5,7 @@ import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import { spacing } from "../constants/spacing.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * Card Component
  *
@@ -30,15 +31,15 @@ import { spacing } from "../constants/spacing.js";
 const CardContext = createContext(null);
 function useCardContext() {
     const ctx = use(CardContext);
-    // useTheme must run unconditionally (Rules of Hooks); createCardStyles is a
+    // useTheme must run unconditionally (Rules of Hooks); themedStyles is a
     // plain function, so the `??` keeps the fallback styles lazy.
     const { theme } = useTheme();
     // Fallback for standalone usage without a Card parent.
-    return ctx ?? { theme, styles: createCardStyles(theme) };
+    return ctx ?? { theme, styles: themedStyles(theme) };
 }
 function Card({ children, style: styleOverride, variant = "default", onPress, disabled }) {
     const { theme, getShadowStyle } = useTheme();
-    const styles = createCardStyles(theme);
+    const styles = themedStyles(theme);
     const shadowStyle = getShadowStyle("subtle");
     const ctx = { theme, styles };
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
@@ -122,4 +123,5 @@ const createCardStyles = (theme) => StyleSheet.create({
         lineHeight: 20,
     },
 });
+const themedStyles = createThemedStyles(createCardStyles);
 export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription };

package/dist/components/EmptyState.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { SansSerifBoldText, SansSerifText } from "./StyledText.js";
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * EmptyState Component
  *
@@ -25,7 +25,7 @@ import { spacing } from "../constants/spacing.js";
  */
 export function EmptyState({ icon, iconSize = spacing.iconMd, title, description, actionLabel, onAction, actionPreset = "default", style, children, bordered = false, }) {
     const { theme } = useTheme();
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     return (_jsxs(View, { style: [styles.container, bordered && styles.bordered, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, size: "lg", style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, size: "base", style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, text: actionLabel, style: styles.action }))] }));
 }
 const MEDIA_SIZE = 56;
@@ -74,3 +74,4 @@ const createStyles = (theme) => StyleSheet.create({
         alignSelf: "center",
     },
 });
+const themedStyles = createThemedStyles(createStyles);

package/dist/components/InputOTP.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState, useCallback } from "react";
+import { useRef, useState, useCallback } from "react";
 import { View, TextInput as RNTextInput, Pressable, StyleSheet, Platform, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
-import { fontFamilies } from "../constants/fonts.js";
 import { StyledText } from "./StyledText.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 const CELL_WIDTH = 36;
 const CELL_HEIGHT = 40;
 const CELL_FONT_SIZE = 20;
-const CELL_FONT_WEIGHT = "600";
 const BULLET = "\u2022";
 /**
  * OTP/verification code input with individual character cells.
@@ -30,7 +29,7 @@ function InputOTP({ length = 6, value = "", onChangeText, onComplete, error = fa
     const { theme } = useTheme();
     const inputRef = useRef(null);
     const [focused, setFocused] = useState(false);
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     const hasError = error || !!errorText;
     // Active cell index: next empty cell, or last cell when full
     const activeIndex = Math.min(value.length, length - 1);
@@ -97,14 +96,8 @@ function OTPCell({ index, total, char, isActive, hasError, disabled, theme, onPr
                     opacity: disabled ? 0.5 : 1,
                     borderColor,
                 },
-            ], children: _jsx(StyledText, { selectable: false, style: {
+            ], children: _jsx(StyledText, { selectable: false, fontWeight: "semibold", style: {
                     fontSize: CELL_FONT_SIZE,
-                    // Semibold weight: the family carries it on native (a real static
-                    // Inter_600SemiBold file); web shares one "Inter" family across
-                    // weights, so it needs the numeric fontWeight to pick the right
-                    // @font-face variant (same rule as StyledText's WEB_FONT_WEIGHTS).
-                    ...(Platform.OS === "web" && { fontWeight: CELL_FONT_WEIGHT }),
-                    fontFamily: fontFamilies.sansSerif.semibold,
                     color: theme.colors.text,
                     textAlign: "center",
                     lineHeight: CELL_FONT_SIZE * 1.2,
@@ -126,10 +119,12 @@ const createStyles = (theme) => StyleSheet.create({
         gap: spacing.sm,
     },
     errorText: {
+        // Regular weight — StyledText's default resolves the family through the
+        // theme store, so no hardcoded fontFamily here.
         fontSize: 12,
-        fontFamily: fontFamilies.sansSerif.regular,
         color: theme.colors.destructive,
         marginTop: spacing.xs,
     },
 });
+const themedStyles = createThemedStyles(createStyles);
 export { InputOTP };

package/dist/components/Label.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { StyleSheet, Platform } from "react-native";
 import * as LabelPrimitive from "@rn-primitives/label";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFontStyle } from "../hooks/useFontStyle.js";
 import { spacing } from "../constants/spacing.js";
-import { fontFamilies } from "../constants/fonts.js";
 import { StyledText } from "./StyledText.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 const SIZE_CONFIGS = {
     sm: { fontSize: 12 },
     md: { fontSize: 14 },
@@ -37,10 +37,14 @@ const SIZE_CONFIGS = {
  */
 export function Label({ children, nativeID, required, size = "md", error, disabled, style, onPress, }) {
     const { theme } = useTheme();
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     const sizeConfig = SIZE_CONFIGS[size];
+    // Resolved through the theme store so `setFonts` overrides apply; identical
+    // to the old hardcoded medium family when no override is set.
+    const labelFont = useFontStyle("medium");
     const textStyle = StyleSheet.flatten([
         styles.label,
+        labelFont,
         { fontSize: sizeConfig.fontSize },
         error && styles.errorLabel,
         disabled && styles.disabledLabel,
@@ -49,26 +53,23 @@ export function Label({ children, nativeID, required, size = "md", error, disabl
     return (_jsx(LabelPrimitive.Root, { nativeID: nativeID, onPress: onPress, style: {
             ...styles.root,
             ...(Platform.OS === "web" && onPress && { cursor: "pointer" }),
-        }, children: _jsxs(LabelPrimitive.Text, { style: textStyle, children: [children, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) }));
+        }, children: _jsxs(LabelPrimitive.Text, { style: textStyle, children: [children, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) }));
 }
 const createStyles = (theme) => StyleSheet.create({
     root: {
         marginBottom: spacing.xs,
     },
     label: {
-        // Medium weight: the family carries it on native (a real static
-        // Inter_500Medium file); web shares one "Inter" family across weights,
-        // so it needs the numeric fontWeight to pick the right @font-face
-        // variant. Setting fontWeight on native would faux-bold on top of the
-        // already-medium file (same rule as StyledText's WEB_FONT_WEIGHTS).
-        fontFamily: fontFamilies.sansSerif.medium,
-        ...(Platform.OS === "web" && { fontWeight: "500" }),
+        // Medium weight — the fontFamily (+ numeric fontWeight on web) is
+        // resolved per-render through the theme store (`useFontStyle("medium")`
+        // in Label) so `setFonts` overrides apply here too.
         color: theme.colors.text,
         userSelect: "none",
     },
     required: {
+        // Bold weight comes from the StyledText `fontWeight="bold"` prop, which
+        // resolves the family through the theme store.
         color: theme.colors.destructive,
-        fontFamily: fontFamilies.sansSerif.bold,
         userSelect: "none",
     },
     errorLabel: {
@@ -78,3 +79,4 @@ const createStyles = (theme) => StyleSheet.create({
         opacity: 0.6,
     },
 });
+const themedStyles = createThemedStyles(createStyles);

package/dist/components/Notification.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback, use, useEffect, useEffectEvent, useRef } from "react";
+import { useCallback, use, useEffect, useEffectEvent, useRef } from "react";
 import { Animated, Easing, StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 import { Icon } from "./Icon.js";
@@ -10,6 +10,7 @@ import { durations } from "../constants/motion.js";
 import { StyledText } from "./StyledText.js";
 import { palette } from "../constants/colors.js";
 import { translateText } from "../lib/i18n.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 import { globalUIStore } from "../state/globalUIStore.js";
 const timingIn = { duration: durations.fast, easing: Easing.out(Easing.quad), useNativeDriver: true };
 const timingOut = { duration: durations.instant, easing: Easing.in(Easing.quad), useNativeDriver: true };
@@ -36,7 +37,7 @@ export const Notification = () => {
     const reduceMotion = useReducedMotion();
     const insets = use(SafeAreaInsetsContext);
     const { alert, hide } = globalUIStore();
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const styles = themedStyles(theme);
     const position = alert?.position ?? "top";
     const isBottom = position === "bottom";
     // Just opacity + translateY — no scale (scale = bouncy feel)
@@ -301,3 +302,4 @@ const createStyles = (theme) => StyleSheet.create({
         ...(Platform.OS === "web" && { cursor: "pointer" }),
     },
 });
+const themedStyles = createThemedStyles(createStyles);

package/dist/components/Skeleton.js

@@ -4,6 +4,7 @@ import { View, StyleSheet, Animated } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
+import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * Skeleton Component
  *
@@ -72,7 +73,7 @@ export function SkeletonAvatar({ size = 40, style }) {
  */
 export function SkeletonCard({ showImage = true, imageHeight = 140, showAvatar = true, textLines = 3, style, }) {
     const { theme, getShadowStyle } = useTheme();
-    const styles = createCardStyles(theme);
+    const styles = themedStyles(theme);
     return (_jsxs(View, { style: [styles.card, getShadowStyle("subtle"), style], children: [showImage && (_jsx(Skeleton, { width: "100%", height: imageHeight, borderRadius: 0 })), _jsxs(View, { style: styles.body, children: [showAvatar && (_jsxs(View, { style: styles.avatarRow, children: [_jsx(SkeletonAvatar, { size: 36 }), _jsxs(View, { style: styles.avatarText, children: [_jsx(Skeleton, { width: "50%", height: 14 }), _jsx(Skeleton, { width: "30%", height: 12 })] })] })), _jsx(SkeletonText, { lines: textLines })] })] }));
 }
 const createCardStyles = (theme) => StyleSheet.create({
@@ -97,3 +98,4 @@ const createCardStyles = (theme) => StyleSheet.create({
         gap: spacing.xs,
     },
 });
+const themedStyles = createThemedStyles(createCardStyles);

package/dist/components/StyledText.d.ts

@@ -1,5 +1,6 @@
 import { type Ref } from "react";
 import { Text as RNText, TextProps as RNTextProps } from "react-native";
+import { type FontVariant } from "../constants/fonts";
 /**
  * Font size variants for the type scale (Inter sans-serif / Georgia serif)
  */
@@ -18,9 +19,10 @@ export type FontWeight = "light" | "regular" | "medium" | "semibold" | "bold";
 export type TextAlign = "left" | "center" | "right" | "justify" | "auto";
 export type TextProps = RNTextProps & {
     /**
-     * Font variant - serif (Georgia) or sans-serif (Inter)
+     * Font variant - serif (Georgia), sans-serif (Inter), or mono (the
+     * platform's system monospace). Host apps swap the families via `setFonts`.
      */
-    variant?: "serif" | "sansSerif";
+    variant?: FontVariant;
     /**
      * Font weight - light, regular, medium, semibold, bold
      */
@@ -83,6 +85,13 @@ export declare function SerifText(props: TextProps): import("react").JSX.Element
  * Uses the sans-serif font family (Inter)
  */
 export declare function SansSerifText(props: TextProps): import("react").JSX.Element;
+/**
+ * Mono Text Component
+ * Uses the monospace font family (the platform's system monospace by
+ * default; host apps swap in their own via `setFonts`) — for code, IDs,
+ * and tabular figures
+ */
+export declare function MonoText(props: TextProps): import("react").JSX.Element;
 /**
  * Serif Bold Text Component
  * Uses the serif font family — Georgia's only shipped weight is regular