@mrmeg/expo-ui 0.27.1 → 0.28.0

package/dist/constants/fonts.d.ts

@@ -34,8 +34,39 @@ 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.
+ *
+ * `italic` maps weights to real italic faces. An italic weight that is missing
+ * falls back to the group's italic `regular`; a group with no `italic` map
+ * renders italic as `fontStyle: "italic"` on the upright face (the OS or
+ * browser synthesizes the slant).
+ */
+export type FontFamilyOverride = Partial<Record<FontFamilyWeight, string>> & {
+    italic?: Partial<Record<FontFamilyWeight, string>>;
+};
+/**
+ * The package's serif. `"georgia"` (default) is the single system face on
+ * every platform; `"newsreader"` is a real serif family — four weights and a
+ * 400 italic — that `useResources({ serif: "newsreader" })` loads and turns on.
+ * Nothing about Newsreader ships to an app that keeps the default.
  */
-export type FontFamilyOverride = Partial<Record<FontFamilyWeight, string>>;
+export type SerifPreset = "georgia" | "newsreader";
+/**
+ * The Newsreader faces the `"newsreader"` preset resolves to. Native names
+ * match `@expo-google-fonts/newsreader`'s per-weight exports, which the app
+ * registers through `useResources({ serif: "newsreader", serifFonts })`; web
+ * is one stack the injected Google Fonts stylesheet serves, weight numeric.
+ */
+export declare const newsreaderFamilies: {
+    readonly web: "\"Newsreader\", Georgia, 'Times New Roman', serif";
+    readonly native: {
+        light: string;
+        regular: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    readonly nativeItalic: "Newsreader_400Regular_Italic";
+};
 /**
  * Font overrides a host app can inject to brand the package.
  *
@@ -65,6 +96,14 @@ export type ResolvedFontStyle = {
     fontFamily: string;
     /** Present only under the `"numeric"` weight strategy (web). */
     fontWeight?: "400" | "500" | "600" | "700";
+    /** Present only when italic was asked for and no italic face exists. */
+    fontStyle?: "italic";
+};
+export type FontStyleOptions = {
+    /** Render italic: a real italic face when one exists, else a synthesized slant. */
+    italic?: boolean;
+    /** The active serif preset (`useThemeStore().serifPreset`); defaults to Georgia. */
+    serifPreset?: SerifPreset;
 };
 /**
  * Resolve the `fontFamily` (+ optional numeric `fontWeight`) for a variant and
@@ -82,7 +121,7 @@ export type ResolvedFontStyle = {
  * 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;
+export declare function resolveFontStyle(overrides: FontOverrides, variant: FontVariant, weight: FontFamilyWeight, options?: FontStyleOptions): ResolvedFontStyle;
 /**
  * Typography scale — Tailwind-matching sizes for consistent text hierarchy.
  * Components can progressively adopt these tokens.

package/dist/constants/fonts.js

@@ -79,6 +79,23 @@ const sansSerifFamilies = isWebRuntime
             semibold: "sans-serif",
             bold: "sans-serif",
         };
+/**
+ * The Newsreader faces the `"newsreader"` preset resolves to. Native names
+ * match `@expo-google-fonts/newsreader`'s per-weight exports, which the app
+ * registers through `useResources({ serif: "newsreader", serifFonts })`; web
+ * is one stack the injected Google Fonts stylesheet serves, weight numeric.
+ */
+export const newsreaderFamilies = {
+    web: "\"Newsreader\", Georgia, 'Times New Roman', serif",
+    native: {
+        light: "Newsreader_400Regular",
+        regular: "Newsreader_400Regular",
+        medium: "Newsreader_500Medium",
+        semibold: "Newsreader_600SemiBold",
+        bold: "Newsreader_700Bold",
+    },
+    nativeItalic: "Newsreader_400Regular_Italic",
+};
 /** The package's built-in families. Override per-app via `setFonts`. */
 export const fontFamilies = {
     serif: serifFamilies,
@@ -120,18 +137,40 @@ const WEB_FONT_WEIGHTS = {
  * 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];
+export function resolveFontStyle(overrides, variant, weight, options = {}) {
+    const { italic = false, serifPreset = "georgia" } = options;
+    const isWeb = Platform.OS === "web";
     const overrideGroup = overrides.families?.[variant];
-    const fontFamily = overrideGroup
+    // Precedence for the upright face: app override → serif preset → package default.
+    const preset = variant === "serif" && serifPreset === "newsreader" && !overrideGroup;
+    const defaults = preset
+        ? isWeb
+            ? { light: newsreaderFamilies.web, regular: newsreaderFamilies.web, medium: newsreaderFamilies.web, semibold: newsreaderFamilies.web, bold: newsreaderFamilies.web }
+            : newsreaderFamilies.native
+        : fontFamilies[variant];
+    const upright = overrideGroup
         ? overrideGroup[weight] ?? overrideGroup.regular ?? defaults[weight]
         : defaults[weight];
-    const strategy = Platform.OS === "web"
+    // A real italic face: the app's for this weight, else its italic regular,
+    // else the preset's native italic file. Web preset italics ride on
+    // `fontStyle` (the stylesheet serves the 400 italic under one family).
+    const italicFace = !italic
+        ? undefined
+        : overrideGroup?.italic
+            ? overrideGroup.italic[weight] ?? overrideGroup.italic.regular
+            : preset && !isWeb
+                ? newsreaderFamilies.nativeItalic
+                : undefined;
+    const fontFamily = italicFace ?? upright;
+    const synthesized = italic && italicFace === undefined;
+    const strategy = isWeb
         ? overrides.webWeightStrategy ?? defaultWebWeightStrategy
         : "family";
-    return strategy === "numeric"
-        ? { fontFamily, fontWeight: WEB_FONT_WEIGHTS[weight] }
-        : { fontFamily };
+    return {
+        fontFamily,
+        ...(strategy === "numeric" && { fontWeight: WEB_FONT_WEIGHTS[weight] }),
+        ...(synthesized && { fontStyle: "italic" }),
+    };
 }
 export const typography = {
     xs: { fontSize: 12, lineHeight: 16 },

package/dist/constants/index.d.ts

@@ -1,4 +1,5 @@
-export * from "./colors";
-export * from "./fonts";
-export * from "./motion";
-export * from "./spacing";
+export * from "./colors.js";
+export * from "./fonts.js";
+export * from "./motion.js";
+export * from "./spacing.js";
+export * from "./interaction.js";

package/dist/constants/index.js

@@ -2,3 +2,4 @@ export * from "./colors.js";
 export * from "./fonts.js";
 export * from "./motion.js";
 export * from "./spacing.js";
+export * from "./interaction.js";

package/dist/constants/interaction.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Interaction state tokens.
+ *
+ * One opacity for "pressed", one for "disabled", and the two press scales the
+ * kit's pressables share, so a Button, a pressable Card and a row read as the
+ * same system under the finger. Components layer these after their base
+ * styles; a caller `style` still wins.
+ */
+export declare const interaction: {
+    /** Opacity of a filled surface while pressed. */
+    readonly pressedOpacity: 0.85;
+    /** Opacity of a disabled control and its label. */
+    readonly disabledOpacity: 0.5;
+    /** Press scale for large surfaces (Button, Card, Item). */
+    readonly pressedScale: 0.97;
+    /** Press scale for small controls (Switch, Checkbox, Toggle). */
+    readonly controlPressedScale: 0.92;
+};

package/dist/constants/interaction.js

@@ -0,0 +1,18 @@
+/**
+ * Interaction state tokens.
+ *
+ * One opacity for "pressed", one for "disabled", and the two press scales the
+ * kit's pressables share, so a Button, a pressable Card and a row read as the
+ * same system under the finger. Components layer these after their base
+ * styles; a caller `style` still wins.
+ */
+export const interaction = {
+    /** Opacity of a filled surface while pressed. */
+    pressedOpacity: 0.85,
+    /** Opacity of a disabled control and its label. */
+    disabledOpacity: 0.5,
+    /** Press scale for large surfaces (Button, Card, Item). */
+    pressedScale: 0.97,
+    /** Press scale for small controls (Switch, Checkbox, Toggle). */
+    controlPressedScale: 0.92,
+};

package/dist/constants/spacing.d.ts

@@ -30,6 +30,7 @@ export declare const spacing: {
     readonly cardPadding: 16;
     readonly dialogPadding: 20;
     readonly touchTarget: 44;
+    readonly minTarget: 24;
     readonly buttonPadding: 10;
     readonly inputPadding: 10;
     readonly listItemSpacing: 8;
@@ -47,5 +48,5 @@ export declare const spacing: {
     readonly iconLg: 32;
     readonly iconXl: 48;
 };
-export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 10, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
+export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, minTarget: 24, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 10, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
 export declare const space: (multiplier: number) => number;

package/dist/constants/spacing.js

@@ -34,6 +34,7 @@ export const spacing = {
     cardPadding: 16, // Default card / stat card padding
     dialogPadding: 20, // Default dialog / alert dialog padding
     touchTarget: 44, // Minimum comfortable native touch target
+    minTarget: 24, // Smallest pointer target the kit draws on web (WCAG 2.5.8 minimum)
     // Component-specific
     buttonPadding: 10, // Default button padding
     inputPadding: 10, // Default input padding
@@ -55,6 +56,6 @@ export const spacing = {
     iconXl: 48,
 };
 // Export individual constants for convenience
-export const { base, xxs, xs, sm, smd, md, mdl, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, sectionSpacing, rowPaddingY, rowPaddingX, rowGap, rowMinHeight, formRowMinHeight, cardPadding, dialogPadding, touchTarget, buttonPadding, inputPadding, listItemSpacing, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
+export const { base, xxs, xs, sm, smd, md, mdl, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, sectionSpacing, rowPaddingY, rowPaddingX, rowGap, rowMinHeight, formRowMinHeight, cardPadding, dialogPadding, touchTarget, minTarget, buttonPadding, inputPadding, listItemSpacing, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
 // Helper function to multiply base spacing
 export const space = (multiplier) => spacing.base * multiplier;

package/dist/design-system.json

@@ -1,7 +1,7 @@
 {
-  "schemaVersion": 1,
+  "schemaVersion": 2,
   "package": "@mrmeg/expo-ui",
-  "version": "0.27.1",
+  "version": "0.28.0",
   "tokens": {
     "spacing": {
       "entries": [
@@ -97,6 +97,10 @@
           "name": "touchTarget",
           "value": 44
         },
+        {
+          "name": "minTarget",
+          "value": 24
+        },
         {
           "name": "buttonPadding",
           "value": 10
@@ -170,6 +174,50 @@
           "value": 48
         }
       ]
+    },
+    "typography": {
+      "entries": [
+        {
+          "name": "xs",
+          "value": 11,
+          "lineHeight": 16.5
+        },
+        {
+          "name": "sm",
+          "value": 12,
+          "lineHeight": 18
+        },
+        {
+          "name": "base",
+          "value": 14,
+          "lineHeight": 21
+        },
+        {
+          "name": "body",
+          "value": 15,
+          "lineHeight": 24.75
+        },
+        {
+          "name": "lg",
+          "value": 18,
+          "lineHeight": 27
+        },
+        {
+          "name": "xl",
+          "value": 22,
+          "lineHeight": 26.4
+        },
+        {
+          "name": "xxl",
+          "value": 28,
+          "lineHeight": 33.6
+        },
+        {
+          "name": "display",
+          "value": 34,
+          "lineHeight": 40.8
+        }
+      ]
     }
   },
   "palette": {
@@ -450,6 +498,86 @@
     "serif",
     "mono"
   ],
+  "fonts": {
+    "families": {
+      "serif": {
+        "light": [
+          "Georgia, 'Times New Roman', serif",
+          "Georgia"
+        ],
+        "regular": [
+          "Georgia, 'Times New Roman', serif",
+          "Georgia"
+        ],
+        "medium": [
+          "Georgia, 'Times New Roman', serif",
+          "Georgia"
+        ],
+        "semibold": [
+          "Georgia, 'Times New Roman', serif",
+          "Georgia"
+        ],
+        "bold": [
+          "Georgia, 'Times New Roman', serif",
+          "Georgia"
+        ]
+      },
+      "sansSerif": {
+        "light": [
+          "\"Inter\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+          "Inter_400Regular",
+          "sans-serif"
+        ],
+        "regular": [
+          "\"Inter\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+          "Inter_400Regular",
+          "sans-serif"
+        ],
+        "medium": [
+          "\"Inter\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+          "Inter_500Medium",
+          "sans-serif"
+        ],
+        "semibold": [
+          "\"Inter\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+          "Inter_600SemiBold",
+          "sans-serif"
+        ],
+        "bold": [
+          "\"Inter\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+          "Inter_700Bold",
+          "sans-serif"
+        ]
+      },
+      "mono": {
+        "light": [
+          "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+          "Menlo",
+          "monospace"
+        ],
+        "regular": [
+          "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+          "Menlo",
+          "monospace"
+        ],
+        "medium": [
+          "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+          "Menlo",
+          "monospace"
+        ],
+        "semibold": [
+          "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+          "Menlo",
+          "monospace"
+        ],
+        "bold": [
+          "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+          "Menlo",
+          "monospace"
+        ]
+      }
+    }
+  },
   "components": [
     {
       "name": "Accordion",
@@ -1297,6 +1425,14 @@
       "variantValues": null,
       "sizeValues": null
     },
+    {
+      "name": "Hydrated",
+      "file": "Hydrated.tsx",
+      "hasSize": false,
+      "variantProp": null,
+      "variantValues": null,
+      "sizeValues": null
+    },
     {
       "name": "Icon",
       "file": "Icon.tsx",
@@ -1321,6 +1457,14 @@
       "variantValues": null,
       "sizeValues": null
     },
+    {
+      "name": "ItemGroup",
+      "file": "Item.tsx",
+      "hasSize": false,
+      "variantProp": null,
+      "variantValues": null,
+      "sizeValues": null
+    },
     {
       "name": "ItemMedia",
       "file": "Item.tsx",
@@ -1404,6 +1548,14 @@
       "variantValues": null,
       "sizeValues": null
     },
+    {
+      "name": "Screen",
+      "file": "Screen.tsx",
+      "hasSize": false,
+      "variantProp": null,
+      "variantValues": null,
+      "sizeValues": null
+    },
     {
       "name": "Popover",
       "file": "Popover.tsx",

package/dist/hooks/index.d.ts

@@ -1,7 +1,12 @@
-export * from "./useDimensions";
-export * from "./useFontStyle";
-export * from "./useReduceMotion";
-export * from "./useResources";
-export * from "./useScalePress";
-export * from "./useStaggeredEntrance";
-export * from "./useTheme";
+export * from "./useDimensions.js";
+export * from "./useFocusVisible.js";
+export * from "./useFontStyle.js";
+export * from "./useReduceMotion.js";
+export * from "./useResources.js";
+export * from "./useScalePress.js";
+export * from "./useShape.js";
+export * from "./useStaggeredEntrance.js";
+export * from "./useTheme.js";
+export { useHydrated } from "./useHydrated.js";
+export { useNotificationOffset } from "./useNotificationOffset.js";
+export { useWindowInsets } from "./useWindowInsets.js";

package/dist/hooks/index.js

@@ -1,7 +1,12 @@
 export * from "./useDimensions.js";
+export * from "./useFocusVisible.js";
 export * from "./useFontStyle.js";
 export * from "./useReduceMotion.js";
 export * from "./useResources.js";
 export * from "./useScalePress.js";
+export * from "./useShape.js";
 export * from "./useStaggeredEntrance.js";
 export * from "./useTheme.js";
+export { useHydrated } from "./useHydrated.js";
+export { useNotificationOffset } from "./useNotificationOffset.js";
+export { useWindowInsets } from "./useWindowInsets.js";

package/dist/hooks/useDimensions.d.ts

@@ -4,7 +4,7 @@
  *   1. A desktop visitor sees no reflow — their real viewport lands in the
  *      same breakpoint.
  *   2. A mobile visitor gets one frame of desktop-styled content before the
- *      post-mount effect snaps to real dimensions — better than the inverse
+ *      post-hydration update snaps to real dimensions — better than the inverse
  *      (every desktop visitor seeing mobile-tiny, then snapping).
  *   3. It matches the frame the app hands `SafeAreaProvider`, and it is the
  *      value the HTML shell `expo export` renders in Node is built from, so
@@ -29,13 +29,18 @@ type WindowDimensions = {
 * Provides a consistent way to access window dimensions and screen size
 * information across mobile and web.
 *
-* On web the first render can't read the window: server-side there is no DOM,
-* and reading it during the browser's first render would disagree with the
-* markup it hydrates. The width comes from `SsrViewportContext` when the host
-* provides a per-request value (server render + first client render must
-* provide the same one), falling back to `DEFAULT_VIEWPORT_WIDTH` / `_HEIGHT`.
-* A post-mount effect swaps in the real viewport and follows resize from
-* there.
+* On web the server render and the browser's hydration pass can't read the
+* window: server-side there is no DOM, and reading it while hydrating would
+* disagree with the markup. Both use the width from `SsrViewportContext` when
+* the host provides a per-request value (server render + first client render
+* must provide the same one), falling back to `DEFAULT_VIEWPORT_WIDTH` /
+* `_HEIGHT`. Right after hydration the real viewport takes over, and resize
+* is followed from there. Every consumer shares one window listener and one
+* snapshot, re-renders only when the width or height changes, and a component
+* that mounts after hydration reads the current viewport straight away.
+*
+* The platform branch is chosen once, at module load (`Platform.OS` never
+* changes at runtime), so each platform calls exactly one set of hooks.
 */
 export declare const useDimensions: () => WindowDimensions;
 export {};