@medway-ui/native 1.1.2 → 1.3.0

package/src/editor/index.ts

@@ -0,0 +1,13 @@
+export { default as NoteEditor } from "./NoteEditor";
+export type { NoteEditorHandle } from "./NoteEditor";
+export type { WebViewMessageEvent } from "react-native-webview";
+
+export {
+  EDITOR_PROTOCOL_VERSION,
+  EDITOR_RECEIVE_HANDLER,
+  isEditorMessage,
+} from "./protocol";
+export type {
+  EditorToNativeMessage,
+  NativeToEditorMessage,
+} from "./protocol";

package/src/editor/protocol.ts

@@ -0,0 +1,184 @@
+/**
+ * Transport between React Native and the Tiptap editor inside the WebView. Both
+ * sides compile against this file — the bundle imports it through the `@/`
+ * alias in `editor-bundle/vite.config.ts`.
+ *
+ * Invariants:
+ * - The document never crosses the bridge on keystrokes: the editor emits
+ *   `change` with a revision counter, and the native side asks with
+ *   `getDocument`.
+ * - Every message is validated on arrival (`isEditorMessage`: envelope plus the
+ *   required fields of its variant) — the WebView renders student content, so
+ *   its output is untrusted input. Documents get a second pass through
+ *   `normalizeDocument` before reaching the host.
+ */
+
+import type {
+  EditorCommand,
+  EditorDocument,
+  EditorSelectionState,
+  EditorTheme,
+  SlashCommandId,
+  SlashMenuState,
+} from '@medway-ui/notes-core';
+
+/**
+ * Bumped whenever the message shapes below change. The native side refuses to
+ * talk to a bundle that reports a different version, which turns a stale
+ * `editorHtml.generated.ts` into a clear error instead of silent breakage.
+ */
+export const EDITOR_PROTOCOL_VERSION = 3;
+
+/** Name of the global the WebView bundle installs to receive native messages. */
+export const EDITOR_RECEIVE_HANDLER = '__medwayNoteEditorReceive';
+
+export type NativeToEditorMessage =
+  /**
+   * `reset` rebuilds the editor instance instead of replacing the running one's
+   * content — required when opening a *different* note, since replacing content
+   * carries the previous note's undo stack over.
+   *
+   * `doc` accepts HTML as well as JSON; parse (`generateJSON`) and whitelist
+   * (`normalizeDocument`) happen bundle-side, the only side with a DOM.
+   *
+   * `focusPosition` defaults to `"end"`. `imageDeleteGraceMs` seeds the bundle's
+   * image-removal bookkeeping; read once, not reactive.
+   */
+  | {
+      type: 'setContent';
+      doc: EditorDocument | string;
+      focus: boolean;
+      focusPosition?: 'start' | 'end';
+      reset?: boolean;
+      imageDeleteGraceMs?: number;
+      /**
+       * Read only on the `reset` path. Set here instead of creating editable
+       * and following up with `setEditable`, which would let a read-only note
+       * flash as editable for one frame. Defaults to `true`.
+       */
+      editable?: boolean;
+    }
+  | { type: 'setEditable'; editable: boolean }
+  | { type: 'setTheme'; theme: EditorTheme }
+  /**
+   * `embedded` means the editor is inside a native scroll container: it stops
+   * filling the viewport and starts reporting `resize`, so React Native can
+   * size the WebView to the document instead of nesting two scrollers.
+   */
+  | { type: 'setLayout'; embedded: boolean }
+  | { type: 'scrollCaretIntoView' }
+  | { type: 'command'; command: EditorCommand }
+  | { type: 'getDocument'; requestId: string }
+  | { type: 'runSlashCommand'; commandId: SlashCommandId }
+  | { type: 'dismissSlash' }
+  | { type: 'focus'; position: 'start' | 'end' }
+  | { type: 'blur' }
+  /**
+   * Inserts an image node at the current selection, once the host's
+   * `onImageUpload` resolved with a `src`. The bundle also starts tracking that
+   * `src` as "uploaded this session" — see `imageRemoved` below.
+   */
+  | { type: 'insertImage'; src: string; alt?: string | null };
+
+export type EditorToNativeMessage =
+  | { type: 'ready'; protocol: number }
+  | { type: 'state'; state: EditorSelectionState }
+  /** Content changed. `revision` increases monotonically, never resets. */
+  | { type: 'change'; revision: number }
+  | {
+      type: 'document';
+      requestId: string;
+      revision: number;
+      doc: EditorDocument;
+    }
+  | { type: 'slash'; slash: SlashMenuState }
+  /**
+   * Height of the rendered document, in CSS pixels. Only meaningful when
+   * embedded: the WebView does not scroll there, so React Native has to size it
+   * to its content.
+   */
+  | { type: 'resize'; height: number }
+  /** A link inside the note was tapped; the native side decides what to open. */
+  | { type: 'linkPress'; href: string }
+  /**
+   * Backspace with the selection collapsed at the first cursor position of the
+   * document. `NoteEditor` uses this to hand focus back to its title field —
+   * the inverse of the title's own Enter handler.
+   */
+  | { type: 'backspaceAtDocStart' }
+  /**
+   * A `src` that `insertImage` added this session left the document and stayed
+   * out past the grace period (`imageDeleteGraceMs`).
+   */
+  | { type: 'imageRemoved'; src: string }
+  | { type: 'error'; message: string };
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const isString = (value: unknown): value is string => typeof value === 'string';
+
+/** Rejects `NaN` and the infinities, which `JSON.parse` can still produce. */
+const isFiniteNumber = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value);
+
+/*
+ * `Record<Union, …>` rather than an array so it is exhaustive: adding a variant
+ * to `EditorToNativeMessage` without listing it here stops compiling, instead
+ * of letting `isEditorMessage` reject the new type at runtime — which would
+ * look like the message never arrived, not like a build error.
+ *
+ * Each entry checks the fields its own variant declares, so narrowing to the
+ * union is backed by the payload and not by `type` alone: a `document` without
+ * `doc`/`requestId`, or a `ready` without `protocol`, is rejected here instead
+ * of blowing up at the use site.
+ *
+ * `state`, `slash` and `doc` are checked as objects rather than field by field:
+ * their shapes belong to `@medway-ui/notes-core` and are validated there — for
+ * `doc`, by the `normalizeDocument` pass the native side runs before handing a
+ * document to the host.
+ */
+const EDITOR_MESSAGE_VALIDATORS: Record<
+  EditorToNativeMessage['type'],
+  (message: Record<string, unknown>) => boolean
+> = {
+  ready: (message) => isFiniteNumber(message.protocol),
+  state: (message) => isRecord(message.state),
+  change: (message) => isFiniteNumber(message.revision),
+  document: (message) =>
+    isString(message.requestId) &&
+    isFiniteNumber(message.revision) &&
+    isRecord(message.doc),
+  slash: (message) => isRecord(message.slash),
+  resize: (message) => isFiniteNumber(message.height),
+  linkPress: (message) => isString(message.href),
+  backspaceAtDocStart: () => true,
+  imageRemoved: (message) => isString(message.src),
+  error: (message) => isString(message.message),
+};
+
+/**
+ * Guard for anything arriving from the WebView: checks the envelope *and* the
+ * required fields of the variant its `type` names. Establishes the shape, not
+ * the contents — a `document` payload's `doc` still goes through
+ * `normalizeDocument` before the native side hands it to the host.
+ */
+export const isEditorMessage = (
+  value: unknown
+): value is EditorToNativeMessage => {
+  if (!isRecord(value)) return false;
+
+  const { type } = value;
+  if (typeof type !== 'string') return false;
+
+  // `hasOwnProperty`, not `in`: `in` walks the prototype chain, so a `type` of
+  // `"toString"` or `"constructor"` matches any plain object literal.
+  // `Object.hasOwn` would read better but is ES2022 and `lib` here is ES2020.
+  if (!Object.prototype.hasOwnProperty.call(EDITOR_MESSAGE_VALIDATORS, type)) {
+    return false;
+  }
+
+  return EDITOR_MESSAGE_VALIDATORS[type as EditorToNativeMessage['type']](
+    value
+  );
+};

package/src/hooks/useThemeColor.ts

@@ -1,46 +1,77 @@
-import { useColorScheme, useUnstableNativeVariable } from "nativewind";
+import { useColorScheme, useUnstableNativeVariable } from 'nativewind';
 
 /** Token sem prefixo `--color-` (ex.: `gray-foreground`, `primary-background-fill`). */
 type ThemeColorToken = string;
 
 /** Fallback quando NativeWind não resolve cadeias `var()` — light mode. */
 const LIGHT_COLOR_ALIAS_MAP: Record<string, string> = {
-  "content-title": "primary",
-  "content-paragraph": "gray-600",
-  "gray-foreground": "gray-600",
-  "primary-foreground": "primary",
-  "secondary-foreground": "secondary-darken-3",
-  "surface-card": "white",
-  "gray-foreground-muted": "gray-450",
-  "gray-stroke-muted": "gray-100",
-  "gray-background-fill-muted": "gray-400",
-  "gray-background-soft-muted": "gray-30",
-  "primary-foreground-onfill": "white",
-  "primary-background-fill": "primary",
+  'content-title': 'primary',
+  'content-paragraph': 'gray-600',
+  'gray-foreground': 'gray-600',
+  'primary-foreground': 'primary',
+  'secondary-foreground': 'secondary-darken-3',
+  'secondary-stroke-emphasis': 'secondary-darken-1',
+  'surface-card': 'white',
+  'gray-foreground-muted': 'gray-450',
+  'gray-stroke-muted': 'gray-100',
+  'gray-background-fill-muted': 'gray-400',
+  'gray-background-soft-muted': 'gray-30',
+  'primary-foreground-onfill': 'white',
+  'primary-background-fill': 'primary',
+  'red-foreground': 'red-darken-2',
+  'go-foreground': 'go-darken-1',
 };
 
 /** Fallback — dark mode (espelha tokens.css `.dark`). */
 const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
-  "content-title": "white",
-  "content-paragraph": "gray-150",
-  "gray-foreground": "gray-100",
-  "primary-foreground": "gray-100",
-  "secondary-foreground": "secondary-lighten-1",
-  "surface-card": "gray-850",
-  "gray-foreground-muted": "gray-150",
-  "gray-stroke-muted": "gray-700",
-  "gray-background-fill-muted": "gray-300",
-  "gray-background-soft-muted": "gray-700",
-  "primary-foreground-onfill": "primary",
-  "primary-background-fill": "gray-70",
+  'content-title': 'white',
+  'content-paragraph': 'gray-150',
+  'gray-foreground': 'gray-100',
+  'primary-foreground': 'gray-100',
+  'secondary-foreground': 'secondary-lighten-1',
+  'secondary-stroke-emphasis': 'secondary',
+  'surface-card': 'gray-850',
+  'gray-foreground-muted': 'gray-150',
+  'gray-stroke-muted': 'gray-700',
+  'gray-background-fill-muted': 'gray-300',
+  'gray-background-soft-muted': 'gray-700',
+  'primary-foreground-onfill': 'primary',
+  'primary-background-fill': 'gray-70',
+  'red-foreground': 'red-lighten-3',
+  'go-foreground': 'go-lighten-5',
 };
 
+/** Fallback estático quando NativeWind não resolve `var(--color-*)` encadeado. */
+const THEME_COLOR_FALLBACKS: Record<string, string> = {
+  white: '#FFFFFF',
+  primary: 'rgba(0, 32, 91, 1)',
+  'gray-600': 'rgba(49, 57, 73, 1)',
+  'gray-450': 'rgba(90, 105, 135, 1)',
+  'gray-400': 'rgba(122, 133, 151, 1)',
+  'gray-100': 'rgba(231, 233, 239, 1)',
+  'gray-30': 'rgba(249, 250, 251, 1)',
+  'gray-150': 'rgba(206, 211, 222, 1)',
+  'gray-300': 'rgba(133, 146, 173, 1)',
+  'gray-700': 'rgba(33, 38, 49, 1)',
+  'gray-850': 'rgba(16, 19, 24, 1)',
+  'gray-70': 'rgba(240, 241, 245, 1)',
+  'red-darken-2': 'rgba(182, 27, 45, 1)',
+  'red-lighten-3': 'rgba(231, 131, 142, 1)',
+  'go-darken-1': 'rgba(141, 22, 77, 1)',
+  'go-lighten-5': 'rgba(237, 187, 192, 1)',
+  'secondary-darken-1': 'rgba(7, 171, 149, 1)',
+  'secondary-darken-3': 'rgba(13, 104, 92, 1)',
+  'secondary-lighten-1': 'rgba(22, 208, 118, 1)',
+};
+
+const DEFAULT_COLOR = '#3B4958';
+
 function toCssVariable(token: ThemeColorToken): string {
-  return token.startsWith("--") ? token : `--color-${token}`;
+  return token.startsWith('--') ? token : `--color-${token}`;
 }
 
 function toTokenName(token: ThemeColorToken): string {
-  return token.startsWith("--color-") ? token.slice("--color-".length) : token;
+  return token.startsWith('--color-') ? token.slice('--color-'.length) : token;
 }
 
 function toResolvedCssVariable(
@@ -52,17 +83,31 @@ function toResolvedCssVariable(
 }
 
 function isResolvedColor(value: unknown): value is string {
-  return typeof value === "string" && !value.startsWith("var(");
+  return typeof value === 'string' && !value.startsWith('var(');
+}
+
+function getFallbackColor(
+  token: ThemeColorToken,
+  aliasMap: Record<string, string>
+): string {
+  const tokenName = toTokenName(token);
+  const aliasToken = aliasMap[tokenName] ?? tokenName;
+
+  return (
+    THEME_COLOR_FALLBACKS[tokenName] ??
+    THEME_COLOR_FALLBACKS[aliasToken] ??
+    DEFAULT_COLOR
+  );
 }
 
 /**
  * Resolve uma cor semântica do design system (tokens.native.css) em runtime.
  * Use quando a prop `color` for obrigatória (SVG, stroke Reanimated, etc.).
  */
-function useThemeColor(token: ThemeColorToken): string | undefined {
+function useThemeColor(token: ThemeColorToken): string {
   const { colorScheme } = useColorScheme();
   const aliasMap =
-    colorScheme === "dark" ? DARK_COLOR_ALIAS_MAP : LIGHT_COLOR_ALIAS_MAP;
+    colorScheme === 'dark' ? DARK_COLOR_ALIAS_MAP : LIGHT_COLOR_ALIAS_MAP;
 
   const value = useUnstableNativeVariable(toCssVariable(token));
   const resolvedValue = useUnstableNativeVariable(
@@ -72,8 +117,8 @@ function useThemeColor(token: ThemeColorToken): string | undefined {
   if (isResolvedColor(value)) return value;
   if (isResolvedColor(resolvedValue)) return resolvedValue;
 
-  return undefined;
+  return getFallbackColor(token, aliasMap);
 }
 
-export { useThemeColor, toCssVariable };
+export { useThemeColor, toCssVariable, getFallbackColor, DEFAULT_COLOR };
 export type { ThemeColorToken };

package/src/index.ts

@@ -67,6 +67,125 @@ export type { EmptyStateProps } from "@/components/EmptyState";
 export { PageHeader } from "@/components/PageHeader";
 export type { PageHeaderProps } from "@/components/PageHeader";
 
+// Carousel
+export {
+  Carousel,
+  CarouselMediaSlide,
+  CarouselMetricSlide,
+} from "@/components/Carousel";
+export type {
+  CarouselMediaSlideProps,
+  CarouselMetricSlideProps,
+  CarouselProps,
+} from "@/components/Carousel";
+
+// DropdownMenu
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/DropdownMenu";
+export type {
+  DropdownMenuContentProps,
+  DropdownMenuItemProps,
+  DropdownMenuProps,
+  DropdownMenuTriggerProps,
+} from "@/components/DropdownMenu";
+
+// Feed
+export { Feed, FeedComposer, FeedTitle } from "@/components/Feed";
+export type {
+  FeedComposerProps,
+  FeedProps,
+  FeedTitleProps,
+} from "@/components/Feed";
+
+// FeedNotice
+export { FeedNotice } from "@/components/FeedNotice";
+export type { FeedNoticeProps } from "@/components/FeedNotice";
+
+// InvitePopover
+export {
+  InvitePopover,
+  InvitePopoverCard,
+  InvitePopoverClose,
+  InvitePopoverContent,
+  InvitePopoverDivider,
+  InvitePopoverEmailRow,
+  InvitePopoverSendButton,
+  InvitePopoverShareButton,
+  InvitePopoverTitle,
+  InvitePopoverTrigger,
+} from "@/components/InvitePopover";
+export type {
+  InvitePopoverActionProps,
+  InvitePopoverContentProps,
+  InvitePopoverEmailRowProps,
+  InvitePopoverProps,
+  InvitePopoverTriggerProps,
+} from "@/components/InvitePopover";
+
+// LeaderboardCard
+export {
+  LeaderboardCard,
+  LeaderboardCardHeader,
+  LeaderboardCardList,
+} from "@/components/LeaderboardCard";
+export type {
+  LeaderboardCardHeaderProps,
+  LeaderboardCardProps,
+} from "@/components/LeaderboardCard";
+
+// MemberRow
+export { MemberRow, memberRowVariants, rankIndicatorVariants } from "@/components/MemberRow";
+export type { MemberRowProps } from "@/components/MemberRow";
+
+// PostForm
+export {
+  PostForm,
+  PostFormCheckboxOption,
+  PostFormDateTimeField,
+  PostFormDescription,
+  PostFormHeader,
+  PostFormMediaPicker,
+} from "@/components/PostForm";
+export type {
+  PostFormCheckboxOptionProps,
+  PostFormDateTimeFieldProps,
+  PostFormDescriptionProps,
+  PostFormHeaderProps,
+  PostFormMediaPickerProps,
+  PostFormProps,
+} from "@/components/PostForm";
+
+// PrizeCollection
+export {
+  PrizeCollection,
+  PrizeCollectionStats,
+  PrizeCollectionStatsItem,
+  PrizeItem,
+  PrizeRow,
+  PrizeShelf,
+} from "@/components/PrizeCollection";
+export type {
+  PrizeCollectionProps,
+  PrizeCollectionStatsItemProps,
+  PrizeCollectionStatsProps,
+  PrizeItemProps,
+  PrizeShelfProps,
+} from "@/components/PrizeCollection";
+
+// Text (Montserrat weight → fontFamily for RN)
+export { Text, resolveMontserratFamily } from "@/components/Text";
+export type { TextProps } from "@/components/Text";
+
+// SectionHeader
+export { SectionHeader } from "@/components/SectionHeader";
+export type { SectionHeaderProps } from "@/components/SectionHeader";
+
 // Button
 export { Button, buttonVariants, buttonTextVariants } from "@/components/Button";
 export type { ButtonProps } from "@/components/Button";
@@ -107,9 +226,19 @@ export type { LabelProps } from "@/components/Label";
 export { Loading } from "@/components/Loading";
 export type { LoadingProps } from "@/components/Loading";
 
+// Skeleton
+export { Skeleton } from "@/components/Skeleton";
+export type { SkeletonProps } from "@/components/Skeleton";
+
 // RadioGroup
-export { RadioGroup, RadioGroupItem, radioGroupVariants } from "@/components/RadioGroup";
-export type { RadioGroupItemProps } from "@/components/RadioGroup";
+export {
+  RadioGroup,
+  RadioGroupItem,
+  RadioGroupList,
+  RadioGroupListItem,
+  radioGroupVariants,
+} from "@/components/RadioGroup";
+export type { RadioGroupItemProps, RadioGroupListProps } from "@/components/RadioGroup";
 
 // Select
 export {
@@ -134,10 +263,6 @@ export type { SelectProps, SelectItemProps, SelectSize } from "@/components/Sele
 export { Separator } from "@/components/Separator";
 export type { SeparatorProps } from "@/components/Separator";
 
-// Skeleton
-export { Skeleton } from "@/components/Skeleton";
-export type { SkeletonProps } from "@/components/Skeleton";
-
 // Switch
 export { Switch, switchVariants } from "@/components/Switch";
 export type { SwitchProps } from "@/components/Switch";
@@ -221,6 +346,22 @@ export type {
 export { Tag, tagVariants, tagTextVariants } from "@/components/Tag";
 export type { TagProps } from "@/components/Tag";
 
+// Tabs
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  tabsTriggerVariants,
+} from "@/components/Tabs";
+export type {
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsTriggerProps,
+  TabsVariant,
+} from "@/components/Tabs";
+
 // Toast
 export {
   Toast,
@@ -251,3 +392,9 @@ export type { ThemeColorToken } from "@/hooks/useThemeColor";
 // Theme-aware icon helper
 export { ThemedIcon } from "@/components/ThemedIcon";
 export type { ThemedIconProps } from "@/components/ThemedIcon";
+
+// NoteEditor is deliberately absent from this barrel: it pulls in
+// `react-native-webview` (an optional peer) and the 428 KB inlined editor HTML,
+// which Metro does not reliably tree-shake — every consumer of this package
+// would carry both. It ships as the `@medway-ui/native/note-editor` subpath
+// instead. Message types alone live at `@medway-ui/native/editor/protocol`.

package/src/lib/overlay-host.tsx

@@ -0,0 +1,102 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
+
+type HostOrigin = { x: number; y: number };
+
+type OverlayHostContextValue = {
+  mount: (id: string, node: ReactNode) => void;
+  unmount: (id: string) => void;
+  /** Mede a origem do host na janela (para converter pageX/pageY → coords do host). */
+  measureHostOrigin: (callback: (origin: HostOrigin) => void) => void;
+};
+
+const OverlayHostContext = createContext<OverlayHostContextValue | null>(null);
+
+/**
+ * Host de overlay no topo da árvore Medway UI.
+ * Usado pelo DropdownMenu porque o Portal zustand do rn-primitives
+ * não renderiza de forma confiável dentro da stack (RNSScreen) deste app.
+ */
+function OverlayHostProvider({ children }: { children: ReactNode }) {
+  const hostRef = useRef<React.ElementRef<typeof View>>(null);
+  const [nodes, setNodes] = useState<Record<string, ReactNode>>({});
+
+  const mount = useCallback((id: string, node: ReactNode) => {
+    setNodes((prev) => {
+      if (prev[id] === node) {
+        return prev;
+      }
+      return { ...prev, [id]: node };
+    });
+  }, []);
+
+  const unmount = useCallback((id: string) => {
+    setNodes((prev) => {
+      if (!(id in prev)) {
+        return prev;
+      }
+      const next = { ...prev };
+      delete next[id];
+      return next;
+    });
+  }, []);
+
+  const measureHostOrigin = useCallback((callback: (origin: HostOrigin) => void) => {
+    const node = hostRef.current;
+    if (!node) {
+      callback({ x: 0, y: 0 });
+      return;
+    }
+    node.measureInWindow((x, y) => {
+      callback({ x, y });
+    });
+  }, []);
+
+  const value = useMemo(
+    () => ({ mount, unmount, measureHostOrigin }),
+    [mount, unmount, measureHostOrigin]
+  );
+
+  return (
+    <OverlayHostContext.Provider value={value}>
+      <View style={styles.root}>
+        {children}
+        <View ref={hostRef} style={styles.host} pointerEvents="box-none" collapsable={false}>
+          {Object.entries(nodes).map(([id, node]) => (
+            <React.Fragment key={id}>{node}</React.Fragment>
+          ))}
+        </View>
+      </View>
+    </OverlayHostContext.Provider>
+  );
+}
+
+function useOverlayHost() {
+  const ctx = useContext(OverlayHostContext);
+  if (!ctx) {
+    throw new Error('useOverlayHost must be used within OverlayHostProvider (MedwayUiProvider)');
+  }
+  return ctx;
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  host: {
+    ...StyleSheet.absoluteFill,
+    zIndex: 99999,
+    elevation: 99999,
+  },
+});
+
+export { OverlayHostProvider, useOverlayHost };
+export type { HostOrigin };

package/src/lib/typography.ts

@@ -0,0 +1,21 @@
+import type { TextStyle } from 'react-native';
+
+/** Montserrat files registered by the host app (ex.: App.js useFonts). */
+export const fontFamilyRegular = 'MontserratRegular' as const;
+export const fontFamilyMedium = 'MontserratMedium' as const;
+export const fontFamilySemibold = 'MontserratSemiBold' as const;
+
+/** Figma body-sm/medium */
+export const bodySmMediumStyle: TextStyle = {
+  fontFamily: fontFamilyMedium,
+};
+
+/** Figma body-xs/medium */
+export const bodyXsMediumStyle: TextStyle = {
+  fontFamily: fontFamilyMedium,
+};
+
+/** Figma body-sm/semibold */
+export const bodySmSemiboldStyle: TextStyle = {
+  fontFamily: fontFamilySemibold,
+};

package/src/nativewind-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="nativewind/types" />
+
+declare module "*.css";