@mrmeg/expo-ui 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,66 @@
 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

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

@@ -165,9 +165,10 @@ import { ThemeColorScope } from "@mrmeg/expo-ui/state";
 
 ### Font overrides
 
-The package bundles Inter (sans) and Georgia (serif). 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:
+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";
@@ -175,19 +176,40 @@ import { useThemeStore } from "@mrmeg/expo-ui/state";
 useThemeStore.getState().setFonts({
   families: {
     sansSerif: {
-      light: "HankenGrotesk_300Light",
       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 and per-group: pass `sansSerif` alone and `serif` keeps
-the package default. `setFonts({})` clears back to the defaults.
+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:
 
@@ -207,6 +229,26 @@ Native always behaves as `"family"` regardless of this setting.
 > `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
@@ -223,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/Button.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { use, useCallback, useState } from "react";
+import { use, useCallback, useMemo, useState } from "react";
 import { Pressable, StyleSheet, View, Platform, ActivityIndicator, Animated, } from "react-native";
 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: {
@@ -76,11 +77,21 @@ function ButtonRoot(props) {
     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;
@@ -170,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,
@@ -191,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,
@@ -283,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,

package/dist/components/InputOTP.js

@@ -3,13 +3,11 @@ 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.
@@ -98,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,
@@ -127,8 +119,9 @@ 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,
     },

package/dist/components/Label.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 = {
@@ -39,8 +39,12 @@ export function Label({ children, nativeID, required, size = "md", error, disabl
     const { theme } = useTheme();
     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: {

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

package/dist/components/StyledText.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
-import { Platform, Text as RNText, StyleSheet } from "react-native";
+import { Text as RNText, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
-import { fontFamilies, defaultWebWeightStrategy } from "../constants/fonts.js";
+import { resolveFontStyle } from "../constants/fonts.js";
 import { useThemeStore } from "../state/themeStore.js";
 import { translateText } from "../lib/i18n.js";
 import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context";
@@ -55,22 +55,6 @@ const SEMANTIC_CONFIGS = {
     // and the textTransform applied in StyledText below.
     eyebrow: { size: "sm", weight: "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
  * Uses theme colors automatically - text by default
@@ -104,31 +88,12 @@ 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. 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);
-    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"
-        ? 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 font family (+ numeric fontWeight under the web "numeric" strategy)
+    // based on variant and weight. Host apps replace the package's bundled
+    // faces via `setFonts`; resolution — including the per-group merge and the
+    // numeric-vs-family weight strategy — lives in `resolveFontStyle`
+    // (constants/fonts.ts), shared with the control components' `useFontStyle`.
+    const { fontFamily, fontWeight: resolvedFontWeight } = resolveFontStyle(fontOverrides, variant, finalFontWeight);
     // Get fontSize and lineHeight from size variant
     const fontSize = FONT_SIZES[finalSize];
     const lineHeight = LINE_HEIGHTS[finalSize];
@@ -177,6 +142,15 @@ export function SerifText(props) {
 export function SansSerifText(props) {
     return _jsx(StyledText, { ...props, variant: "sansSerif" });
 }
+/**
+ * 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 function MonoText(props) {
+    return _jsx(StyledText, { ...props, variant: "mono" });
+}
 /**
  * Serif Bold Text Component
  * Uses the serif font family — Georgia's only shipped weight is regular

package/dist/components/Switch.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { palette } from "../constants/colors.js";
-import { fontFamilies } from "../constants/fonts.js";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { hapticLight } from "../lib/haptics.js";
@@ -119,8 +118,7 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                         left: labelHorizontalInset,
                         right: thumbInset + thumbSize + labelGap,
                         opacity: props.checked ? 1 : 0,
-                    }, children: _jsx(StyledText, { selectable: false, style: {
-                            fontFamily: fontFamilies.sansSerif.bold,
+                    }, children: _jsx(StyledText, { selectable: false, fontWeight: "bold", style: {
                             fontSize: labelFontSize,
                             color: labelOnColor,
                             userSelect: "none",
@@ -143,8 +141,7 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                         left: thumbInset + thumbSize + labelGap,
                         right: labelHorizontalInset,
                         opacity: props.checked ? 0 : 1,
-                    }, children: _jsx(StyledText, { selectable: false, style: {
-                            fontFamily: fontFamilies.sansSerif.bold,
+                    }, children: _jsx(StyledText, { selectable: false, fontWeight: "bold", style: {
                             fontSize: labelFontSize,
                             color: theme.colors.text,
                             userSelect: "none",

package/dist/components/TextInput.js

@@ -4,7 +4,7 @@ import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from
 import { Host, TextInput as ExpoTextInput, useNativeState, } from "@expo/ui";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
-import { fontFamilies } from "../constants/fonts.js";
+import { useFontStyle } from "../hooks/useFontStyle.js";
 import { StyledText } from "./StyledText.js";
 import { Icon } from "./Icon.js";
 import { hapticLight } from "../lib/haptics.js";
@@ -93,6 +93,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 = themedStyles(theme)[variant][size];
+    const inputFont = useFontStyle("regular");
     const [focused, setFocused] = useState(false);
     const [contentHeight, setContentHeight] = useState(0);
     const [passwordVisible, setPasswordVisible] = useState(false);
@@ -149,6 +150,9 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
     };
     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,
+                            // Resolved through the theme store so `setFonts` overrides apply;
+                            // identical to the old hardcoded regular family by default.
+                            inputFont,
                             {
                                 backgroundColor,
                                 borderColor,
@@ -199,6 +203,7 @@ function NativeTextInput({ variant = "outline", size = "md", label, helperText,
 leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const { theme, getContrastingColor } = useTheme();
     const styles = themedStyles(theme)[variant][size];
+    const inputFont = useFontStyle("regular");
     const [passwordVisible, setPasswordVisible] = useState(false);
     const hasError = error || !!errorText;
     const sizeConfig = SIZE_CONFIGS[size];
@@ -319,10 +324,12 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     // @expo/ui passes the family verbatim to SwiftUI's Font.custom / Compose,
     // where no such font exists — the fallback ignores fontSize and renders at
     // the 17pt default, blowing up text and secure-entry dots. Omit the family
-    // so the native side uses the system font at our requested size.
-    const nativeFontFamily = fontFamilies.sansSerif.regular === "System"
+    // so the native side uses the system font at our requested size. The family
+    // itself resolves through the theme store (`useFontStyle` above) so
+    // `setFonts` overrides reach the native field too.
+    const nativeFontFamily = inputFont.fontFamily === "System"
         ? undefined
-        : fontFamilies.sansSerif.regular;
+        : inputFont.fontFamily;
     const textStyle = {
         color: textColor,
         fontSize: sizeConfig.fontSize,
@@ -353,7 +360,8 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
         justifyContent: "center",
     },
     input: {
-        fontFamily: fontFamilies.sansSerif.regular,
+        // fontFamily is resolved per-render through the theme store (see
+        // `useFontStyle("regular")` in WebTextInput) so `setFonts` applies.
         borderRadius: spacing.radiusMd,
         borderWidth: 1,
         ...(Platform.OS === "web" && { outlineStyle: "none" }),

package/dist/constants/fonts.d.ts

@@ -27,13 +27,15 @@ export type FontFamilyWeight = "light" | "regular" | "medium" | "semibold" | "bo
  * registers each file as its own family on web too — must declare `"family"`.
  */
 export type FontWeightStrategy = "numeric" | "family";
-export type FontFamilyMap = {
-    serif: {
-        regular: string;
-        bold: string;
-    };
-    sansSerif: Record<FontFamilyWeight, string>;
-};
+/** The font variants text components can render. */
+export type FontVariant = "sansSerif" | "serif" | "mono";
+export type FontFamilyMap = Record<FontVariant, Record<FontFamilyWeight, string>>;
+/**
+ * A per-variant override group. Partial per weight: missing weights fall back
+ * to the group's own `regular` (not the package default), so an app that
+ * registers only Regular + Medium never leaks a package face into its brand.
+ */
+export type FontFamilyOverride = Partial<Record<FontFamilyWeight, string>>;
 /**
  * Font overrides a host app can inject to brand the package.
  *
@@ -43,10 +45,11 @@ export type FontFamilyMap = {
  * app's — and the only remaining lever is patching `node_modules`, which is
  * keyed to an exact version and silently stops applying on the next bump.
  *
- * Partial by design: override `sansSerif` alone and `serif` keeps its default.
+ * Partial by design: override `sansSerif` alone and `serif`/`mono` keep their
+ * defaults.
  */
 export type FontOverrides = {
-    families?: Partial<FontFamilyMap>;
+    families?: Partial<Record<FontVariant, FontFamilyOverride>>;
     /** Defaults to the package's own per-platform behaviour when omitted. */
     webWeightStrategy?: FontWeightStrategy;
 };
@@ -58,6 +61,28 @@ export declare const fontFamilies: FontFamilyMap;
  * `"family"` regardless of this value.
  */
 export declare const defaultWebWeightStrategy: FontWeightStrategy;
+export type ResolvedFontStyle = {
+    fontFamily: string;
+    /** Present only under the `"numeric"` weight strategy (web). */
+    fontWeight?: "400" | "500" | "600" | "700";
+};
+/**
+ * Resolve the `fontFamily` (+ optional numeric `fontWeight`) for a variant and
+ * weight, honouring any host-app `setFonts` overrides.
+ *
+ * This is the single source of truth every text-rendering component goes
+ * through — `StyledText` directly, control components via `useFontStyle` —
+ * so a host override re-skins package text everywhere at once.
+ *
+ * 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.
+ */
+export declare function resolveFontStyle(overrides: FontOverrides, variant: FontVariant, weight: FontFamilyWeight): ResolvedFontStyle;
 /**
  * Typography scale — Tailwind-matching sizes for consistent text hierarchy.
  * Components can progressively adopt these tokens.

package/dist/constants/fonts.js

@@ -8,9 +8,45 @@ const WEB_FONT_STACK = "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-
 // both environments, so the value is stable.
 const isWebRuntime = Platform.OS === "web";
 const isReactNativeRuntime = Platform.OS !== "web";
+// Georgia ships as one face per platform; every weight slot points at the
+// same family and weight differentiation only appears when a host app
+// overrides serif with real per-weight faces via `setFonts`.
+const webSerifFamily = "Georgia, 'Times New Roman', serif";
 const serifFamilies = isWebRuntime
-    ? { regular: "Georgia, 'Times New Roman', serif", bold: "Georgia, 'Times New Roman', serif" }
-    : { regular: "Georgia", bold: "Georgia" };
+    ? {
+        light: webSerifFamily,
+        regular: webSerifFamily,
+        medium: webSerifFamily,
+        semibold: webSerifFamily,
+        bold: webSerifFamily,
+    }
+    : {
+        light: "Georgia",
+        regular: "Georgia",
+        medium: "Georgia",
+        semibold: "Georgia",
+        bold: "Georgia",
+    };
+// Same single-face story as serif: the package doesn't bundle a mono font, it
+// leans on each platform's system monospace. Menlo on iOS ("monospace" isn't
+// a resolvable family name there); Android resolves "monospace" natively.
+const WEB_MONO_STACK = "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
+const nativeMonoFamily = Platform.OS === "ios" ? "Menlo" : "monospace";
+const monoFamilies = isWebRuntime
+    ? {
+        light: WEB_MONO_STACK,
+        regular: WEB_MONO_STACK,
+        medium: WEB_MONO_STACK,
+        semibold: WEB_MONO_STACK,
+        bold: WEB_MONO_STACK,
+    }
+    : {
+        light: nativeMonoFamily,
+        regular: nativeMonoFamily,
+        medium: nativeMonoFamily,
+        semibold: nativeMonoFamily,
+        bold: nativeMonoFamily,
+    };
 // Web ships one Inter CSS family for every weight — weight differentiation
 // comes from a numeric `fontWeight` set alongside this family (see
 // StyledText's getFontFamilyWeight). Native ships four discrete Inter static
@@ -46,6 +82,7 @@ const sansSerifFamilies = isWebRuntime
 export const fontFamilies = {
     serif: serifFamilies,
     sansSerif: sansSerifFamilies,
+    mono: monoFamilies,
 };
 /**
  * The package's own web weight strategy: one multi-weight "Inter" family, so
@@ -53,6 +90,48 @@ export const fontFamilies = {
  * `"family"` regardless of this value.
  */
 export const defaultWebWeightStrategy = "numeric";
+/**
+ * Web-only numeric weights, used under the `"numeric"` strategy to pick the
+ * right `@font-face` variant out of a single multi-weight CSS family.
+ * `light` has no loaded 300 weight (mirrors the native light->regular file
+ * mapping above), so it renders at 400 like `regular`.
+ */
+const WEB_FONT_WEIGHTS = {
+    light: "400",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+};
+/**
+ * Resolve the `fontFamily` (+ optional numeric `fontWeight`) for a variant and
+ * weight, honouring any host-app `setFonts` overrides.
+ *
+ * This is the single source of truth every text-rendering component goes
+ * through — `StyledText` directly, control components via `useFontStyle` —
+ * so a host override re-skins package text everywhere at once.
+ *
+ * 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.
+ */
+export function resolveFontStyle(overrides, variant, weight) {
+    const defaults = fontFamilies[variant];
+    const overrideGroup = overrides.families?.[variant];
+    const fontFamily = overrideGroup
+        ? overrideGroup[weight] ?? overrideGroup.regular ?? defaults[weight]
+        : defaults[weight];
+    const strategy = Platform.OS === "web"
+        ? overrides.webWeightStrategy ?? defaultWebWeightStrategy
+        : "family";
+    return strategy === "numeric"
+        ? { fontFamily, fontWeight: WEB_FONT_WEIGHTS[weight] }
+        : { fontFamily };
+}
 export const typography = {
     xs: { fontSize: 12, lineHeight: 16 },
     sm: { fontSize: 14, lineHeight: 20 },

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./useDimensions";
+export * from "./useFontStyle";
 export * from "./useReduceMotion";
 export * from "./useResources";
 export * from "./useScalePress";

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
 export * from "./useDimensions.js";
+export * from "./useFontStyle.js";
 export * from "./useReduceMotion.js";
 export * from "./useResources.js";
 export * from "./useScalePress.js";

package/dist/hooks/useFontStyle.d.ts

@@ -0,0 +1,11 @@
+import { type FontFamilyWeight, type FontVariant, type ResolvedFontStyle } from "../constants/fonts";
+/**
+ * Resolve a `{ fontFamily, fontWeight? }` style through the theme store's
+ * font overrides, re-rendering when a host app calls `setFonts`.
+ *
+ * For control components (Button, Label, TextInput, …) whose typography is
+ * a fixed weight rather than caller-driven. With no overrides set, the result
+ * is identical to the package's hardcoded families, so layering it after a
+ * static themed style changes nothing by default.
+ */
+export declare function useFontStyle(weight?: FontFamilyWeight, variant?: FontVariant): ResolvedFontStyle;

package/dist/hooks/useFontStyle.js

@@ -0,0 +1,17 @@
+import { resolveFontStyle, } from "../constants/fonts.js";
+import { useThemeStore } from "../state/themeStore.js";
+/**
+ * Resolve a `{ fontFamily, fontWeight? }` style through the theme store's
+ * font overrides, re-rendering when a host app calls `setFonts`.
+ *
+ * For control components (Button, Label, TextInput, …) whose typography is
+ * a fixed weight rather than caller-driven. With no overrides set, the result
+ * is identical to the package's hardcoded families, so layering it after a
+ * static themed style changes nothing by default.
+ */
+export function useFontStyle(weight = "regular", variant = "sansSerif") {
+    // Subscribed, not read via getState(), so a `setFonts` call after mount
+    // re-renders instead of leaving stale families on screen.
+    const fontOverrides = useThemeStore((s) => s.fontOverrides);
+    return resolveFontStyle(fontOverrides, variant, weight);
+}

package/dist/hooks/useResources.d.ts

@@ -9,6 +9,13 @@ interface LoadResourcesResult {
  * @expo-google-fonts/inter) so StyledText's weight range resolves to real
  * font files. Web loads Inter from Google Fonts as a single CSS family;
  * weight differentiation there comes from a numeric fontWeight instead.
+ *
+ * A host app that overrides the sans-serif families via `setFonts` owns
+ * loading its own faces (typically through `expo-font`), so the Inter fetch
+ * is skipped entirely — nothing would reference those files. For the skip to
+ * apply, call `setFonts` before this hook mounts (module scope or ahead of
+ * rendering the root); a later call still re-skins text, it just doesn't
+ * un-download Inter. The Feather icon font always loads.
  */
 export declare const useResources: () => LoadResourcesResult;
 export {};

package/dist/hooks/useResources.js

@@ -3,6 +3,7 @@ import * as Font from "expo-font";
 import Feather from "@expo/vector-icons/Feather";
 import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold, Inter_700Bold, } from "@expo-google-fonts/inter";
 import { Platform } from "react-native";
+import { useThemeStore } from "../state/themeStore.js";
 // Eager, module-scope load so expo-font registers Feather in its SSR
 // serverContext. When the server renders the HTML document, expo-font emits
 // an @font-face <style> into the head — without this kickoff, server-rendered
@@ -56,18 +57,28 @@ function ensureWebFontStylesheet() {
  * @expo-google-fonts/inter) so StyledText's weight range resolves to real
  * font files. Web loads Inter from Google Fonts as a single CSS family;
  * weight differentiation there comes from a numeric fontWeight instead.
+ *
+ * A host app that overrides the sans-serif families via `setFonts` owns
+ * loading its own faces (typically through `expo-font`), so the Inter fetch
+ * is skipped entirely — nothing would reference those files. For the skip to
+ * apply, call `setFonts` before this hook mounts (module scope or ahead of
+ * rendering the root); a later call still re-skins text, it just doesn't
+ * un-download Inter. The Feather icon font always loads.
  */
 export const useResources = () => {
     const [loaded, setLoaded] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {
         let timeoutId;
+        // Read once at mount, not subscribed: font loading is a one-shot startup
+        // effect and cannot be undone by a later override.
+        const sansSerifOverridden = !!useThemeStore.getState().fontOverrides.families?.sansSerif;
         async function loadResourcesAndDataAsync() {
             try {
                 const fontPromise = Promise.all([
                     Font.loadAsync(Feather.font),
-                    loadNativeInterFonts(),
-                    ensureWebFontStylesheet(),
+                    sansSerifOverridden ? Promise.resolve() : loadNativeInterFonts(),
+                    sansSerifOverridden ? Promise.resolve() : ensureWebFontStylesheet(),
                 ]);
                 // Timeout after 5 seconds — proceed with system fallback fonts
                 const timeoutPromise = new Promise((_, reject) => {

package/dist/state/themeStore.d.ts

@@ -20,6 +20,27 @@ export type ColorOverrides = {
     light?: Partial<ThemeColors>;
     dark?: Partial<ThemeColors>;
 };
+/**
+ * Shape overrides a host app can inject, grouped per component so future
+ * shape knobs (card radius, input radius, …) slot in without reshaping the
+ * API. Every field is optional; omitted fields keep the package default.
+ */
+export type ShapeOverrides = {
+    button?: {
+        /**
+         * Border radius applied to every Button preset. Package default:
+         * `spacing.radiusMd` (12). Use 9999 for pill buttons. A caller `style`
+         * still wins over this, as it always has.
+         */
+        borderRadius?: number;
+        /**
+         * Whether the `default` preset renders its shadow. Package default: true.
+         * Other presets stay flat regardless; the per-instance `withShadow` prop
+         * still wins over this.
+         */
+        withShadow?: boolean;
+    };
+};
 export type ThemeStore = {
     userTheme: ThemePreference;
     systemTheme: ResolvedTheme;
@@ -35,6 +56,12 @@ export type ThemeStore = {
      * exactly as before this field existed (fully backward compatible).
      */
     fontOverrides: FontOverrides;
+    /**
+     * App-injected shape overrides (button radius, default-preset shadow).
+     * Same contract as the other override slots: empty by default, fully
+     * backward compatible when unset.
+     */
+    shapeOverrides: ShapeOverrides;
     setTheme: (theme: ThemePreference) => void;
     setSystemTheme: (theme: ResolvedTheme) => void;
     /**
@@ -52,6 +79,11 @@ export type ThemeStore = {
      * `webWeightStrategy: "family"` — see `FontWeightStrategy`.
      */
     setFonts: (overrides: FontOverrides) => void;
+    /**
+     * Replace the active shape overrides. Pass `{}` to clear them and fall back
+     * to the package defaults (button radius 12, default-preset shadow on).
+     */
+    setShape: (overrides: ShapeOverrides) => void;
     loadTheme: () => void;
 };
 export declare function resolveThemePreference(userTheme: ThemePreference, systemTheme: ResolvedTheme): ResolvedTheme;

package/dist/state/themeStore.js

@@ -22,12 +22,17 @@ export const useThemeStore = create((set) => ({
     // Same contract as `colorOverrides`: the package renders with its bundled
     // faces until a host app calls `setFonts`.
     fontOverrides: {},
+    // And again for shape: package geometry until a host app calls `setShape`.
+    shapeOverrides: {},
     setColors: (overrides) => {
         set({ colorOverrides: overrides ?? {} });
     },
     setFonts: (overrides) => {
         set({ fontOverrides: overrides ?? {} });
     },
+    setShape: (overrides) => {
+        set({ shapeOverrides: overrides ?? {} });
+    },
     setTheme: (theme) => {
         set({
             userTheme: theme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [