@myazahq/kyc-sdk-react-native 2.0.2 → 2.1.0

package/src/components/KycSheet.tsx

@@ -1,18 +1,22 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Image, Platform, ScrollView, StatusBar, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 import { StatusBarController } from './StatusBarController';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
 
 import { headerSurface, radius, spacing } from '../config/theme';
+import { useKeyboardInset } from '../lib/use-keyboard-inset';
 import type { SupportedCountry } from '../types/config';
 import { useKycConfig, useTheme } from './runtime';
 import { useBranding } from './useBranding';
 import { MyazaText } from './Typography';
+import { PoweredBy } from './PoweredBy';
 import { StepHeader } from './StepHeader';
 import { StepIndicator } from './StepIndicator';
 import { GlassIconButton } from './GlassIconButton';
 import { GlassSurface } from './glass/GlassSurface';
 import { GlassGroup } from './glass/GlassGroup';
+import { FlashOverlay } from './FlashOverlay';
 
 // Full-screen sheet shell — 1:1 with the Flutter SDK's KycBottomSheet:
 //   • a tinted header block (Liquid Glass on iOS 26) with a bottom border:
@@ -33,6 +37,29 @@ export interface KycSheetProps {
   onClose: () => void;
   /** Hide the persistent brand bar (e.g. on a fatal config-error screen). */
   hideBrand?: boolean;
+  /**
+   * Render the step body as a fixed-height flex container instead of a scroll
+   * view, so the step owns its own scrolling.
+   *
+   * Needed by any step with a PINNED element above a long list — the country
+   * picker's search box, for one. RN gives a nested same-axis ScrollView an
+   * unbounded height, so the inner list grows to fit every row, the outer
+   * content outgrows the viewport, and the outer view scrolls the "pinned"
+   * element off the top. `flexGrow: 1` cannot prevent that: it sets a minimum
+   * height, not a maximum. Flutter hits the same wall and solves it the same
+   * way (`KycBottomSheet.fillsViewport`).
+   */
+  fillsViewport?: boolean;
+  /**
+   * Hand the whole surface to the step — no header, no footer, no padding.
+   *
+   * Used by the live camera, which wants the entire display. It is a PROP
+   * rather than the caller rendering its own tree because the toggle happens
+   * MID-STEP: swapping the step's parent would unmount and remount it, losing
+   * its state (the acknowledged primer, the captured sides) and restarting the
+   * camera. Keeping one stable tree is the whole point.
+   */
+  immersive?: boolean;
 }
 
 export function KycSheet({
@@ -45,10 +72,15 @@ export function KycSheet({
   onBack,
   onClose,
   hideBrand,
+  fillsViewport,
+  immersive = false,
 }: KycSheetProps): React.ReactElement {
   const { colors, mode, toggle } = useTheme();
   const config = useKycConfig();
   const { logoUri, companyName } = useBranding();
+  // Android-only (0 on iOS): the translucent Modal blocks adjustResize there,
+  // so the keyboard height is added to the scroll padding by hand.
+  const keyboardInset = useKeyboardInset();
 
   const tint = headerSurface(colors, mode);
   const showIndicator = progress != null && stepCount != null;
@@ -85,7 +117,7 @@ export function KycSheet({
     Platform.OS === 'android' ? sa?.bottom ?? 0 : iosFullScreen ? 34 : 0;
 
   return (
-    <View style={{ flex: 1, backgroundColor: colors.background }}>
+    <View style={{ flex: 1, backgroundColor: immersive ? '#000000' : colors.background }}>
       {/* The SDK theme drives the status-bar glyph colour so it stays readable on
           the modal background — light glyphs in dark mode, dark in light mode.
           Android: JS StatusBar/SystemBars can't reach the <Modal>'s Dialog window,
@@ -98,8 +130,9 @@ export function KycSheet({
         <StatusBar barStyle={mode === 'dark' ? 'light-content' : 'dark-content'} animated />
       ) : null}
       <View style={{ flex: 1 }}>
-        {/* Header block (glass on iOS 26, tinted surface otherwise) */}
-        <GlassSurface
+        {/* Header block (glass on iOS 26, tinted surface otherwise) — dropped
+            entirely when the step owns the display. */}
+        {immersive ? null : <GlassSurface
           glassStyle="regular"
           fallbackColor={tint}
           style={{ borderBottomWidth: 1, borderBottomColor: colors.border, paddingBottom: spacing.md }}
@@ -169,26 +202,100 @@ export function KycSheet({
               <StepIndicator progress={progress!} stepCount={stepCount!} />
             </View>
           ) : null}
-        </GlassSurface>
+        </GlassSurface>}
 
         {/* Step body */}
-        <ScrollView
-          contentContainerStyle={{ padding: spacing.md, paddingTop: spacing.md, paddingBottom: spacing.xl + bottomInset, flexGrow: 1 }}
-          keyboardShouldPersistTaps="handled"
-        >
-          {children}
-        </ScrollView>
+        {fillsViewport ? (
+          // Only the visual gap here, NOT the scroll variant's `xl`: that
+          // padding exists so scrolled content clears the home indicator, but
+          // in a fixed-height body it just lifts the list off the footer and
+          // reads as a dead band. PoweredBy owns the safe-area inset already.
+          <View style={{ flex: 1, padding: spacing.md, paddingBottom: spacing.md }}>
+            {children}
+          </View>
+        ) : (
+          // IMMERSIVE keeps this a ScrollView rather than swapping in a View.
+          // The toggle happens MID-STEP, and changing the children's parent
+          // element remounts the step — which wiped the acknowledged primer and
+          // bounced the user straight back to it. Same element, different
+          // props: scrolling off and the padding dropped.
+          <ScrollView
+            scrollEnabled={!immersive}
+            contentContainerStyle={
+              immersive
+                ? { flexGrow: 1 }
+                : {
+                    padding: spacing.md,
+                    paddingTop: spacing.md,
+                    paddingBottom: spacing.xl + keyboardInset,
+                    flexGrow: 1,
+                  }
+            }
+            keyboardShouldPersistTaps="handled"
+            // iOS: inset the content by the keyboard AND scroll the focused
+            // input into view — the platform's own handling, which a
+            // KeyboardAvoidingView only approximates. Without this the
+            // keyboard simply covered the bottom of every input step.
+            automaticallyAdjustKeyboardInsets={Platform.OS === 'ios' && !immersive}
+          >
+            {children}
+          </ScrollView>
+        )}
+
+        {/* Vendor attribution — a sibling of the ScrollView, so it stays pinned
+            while a long step scrolls under it. It now owns the bottom safe-area
+            inset that the scroll padding used to carry. */}
+        {immersive ? null : <PoweredBy bottomInset={bottomInset} />}
       </View>
+
+      {/* The flash paints over the WHOLE sheet — header, body and footer — but
+          from inside the sheet's own tree, so its cutout and the camera preview
+          scale together. It subscribes to the store itself, so a colour change
+          re-renders this leaf and not the step (and not the camera).
+
+          LAST sibling, on purpose. As the first child it sat below everything
+          later in the tree, and on Android the header's elevated surface
+          painted over it — the flash lit the body and stopped dead at the
+          header. Last-with-elevation out-stacks the header on both platforms
+          by construction. */}
+      <FlashOverlay />
     </View>
   );
 }
 
+/** Whether a logo URI points at an SVG (extension check, query-safe). */
+function isSvgUri(uri: string): boolean {
+  const path = uri.split('?')[0] ?? uri;
+  return path.toLowerCase().endsWith('.svg');
+}
+
 // Persistent header brand — circular logo avatar + company name. A broken/missing
 // logo image collapses the whole brand bar (mirrors the web SDK's `onError` and
 // Flutter's `errorBuilder`), so the header never shows a broken-image box.
 function BrandBar({ logoUri, companyName }: { logoUri: string; companyName: string }): React.ReactElement | null {
   const { colors } = useTheme();
   const [broken, setBroken] = useState(false);
+  const svg = isSvgUri(logoUri);
+  // SVG logos render through SvgXml with SELF-FETCHED markup — the exact
+  // pipeline the country flags use, which is proven on-device. SvgUri's own
+  // fetch/sizing was flaky here (the favicon rendered at intrinsic size
+  // instead of filling the chip).
+  const [xml, setXml] = useState<string | null>(null);
+  useEffect(() => {
+    if (!svg) return;
+    let cancelled = false;
+    fetch(logoUri)
+      .then((r) => (r.ok ? r.text() : Promise.reject(new Error(String(r.status)))))
+      .then((text) => {
+        if (!cancelled) setXml(text);
+      })
+      .catch(() => {
+        if (!cancelled) setBroken(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [logoUri, svg]);
   if (broken) return null;
   return (
     <>
@@ -198,8 +305,16 @@ function BrandBar({ logoUri, companyName }: { logoUri: string; companyName: stri
           height: 28,
           borderRadius: radius.full,
           backgroundColor: '#FFFFFF',
+          // Light border + soft shadow — the same treatment as the Flutter
+          // SDK's brand chip (black 5% ring, black 6% blur-4 y-1 shadow) and
+          // the web SDK's ring-1 ring-black/5.
           borderWidth: 1,
           borderColor: 'rgba(0,0,0,0.05)',
+          shadowColor: '#000000',
+          shadowOpacity: 0.06,
+          shadowRadius: 4,
+          shadowOffset: { width: 0, height: 1 },
+          elevation: 1,
           overflow: 'hidden',
           marginRight: spacing.sm,
           alignItems: 'center',
@@ -208,13 +323,28 @@ function BrandBar({ logoUri, companyName }: { logoUri: string; companyName: stri
       >
         {/* Fill + cover-crop the circle. The borderRadius is repeated on the
             Image itself because iOS doesn't reliably clip an Image child to a
-            parent's rounded corners (mirrors Flutter's ClipOval + cover). */}
-        <Image
-          source={{ uri: logoUri }}
-          style={{ width: '100%', height: '100%', borderRadius: radius.full }}
-          resizeMode="cover"
-          onError={() => setBroken(true)}
-        />
+            parent's rounded corners (mirrors Flutter's ClipOval + cover).
+            SVG logos (common — the brand import picks up site favicons) can't
+            be decoded by <Image>; the fetched markup renders via SvgXml at
+            the chip's inner size (26 = 28 minus the 1px border each side),
+            slice = cover-crop. */}
+        {svg ? (
+          xml ? (
+            <SvgXml
+              xml={xml}
+              width={26}
+              height={26}
+              preserveAspectRatio="xMidYMid slice"
+            />
+          ) : null
+        ) : (
+          <Image
+            source={{ uri: logoUri }}
+            style={{ width: '100%', height: '100%', borderRadius: radius.full }}
+            resizeMode="cover"
+            onError={() => setBroken(true)}
+          />
+        )}
       </View>
       <MyazaText variant="heading3" numberOfLines={1} color={colors.textDark} style={{ flexShrink: 1, fontSize: 14 }}>
         {companyName}

package/src/components/MediaSourceSheet.tsx

@@ -0,0 +1,163 @@
+import React, { useRef } from 'react';
+import { Modal, Platform, Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { Icon, type IconName } from './Icon';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+/**
+ * The SDK's own "where is the document?" sheet.
+ *
+ * Replaces `ActionSheetIOS` / `Alert.alert`, which were the two NATIVE
+ * choosers — grey system UI with bare uppercase labels, dropped into the
+ * middle of an otherwise fully branded flow. A verification flow trades on
+ * looking deliberate; one stock OS dialog in the middle of it reads as a seam,
+ * and on Android the three-button alert didn't even look like a chooser.
+ *
+ * Same presentation grammar as the SDK's other sheets (select, date picker):
+ * bottom card, backdrop dismiss, org palette, one icon per option so the three
+ * sources are scannable without reading.
+ */
+export interface MediaSourceOption {
+  icon: IconName;
+  label: string;
+  /** One line of what picking this means — the scannable part. */
+  caption: string;
+  onPress: () => void;
+}
+
+export function MediaSourceSheet({
+  open,
+  title,
+  options,
+  onClose,
+}: {
+  open: boolean;
+  title: string;
+  options: MediaSourceOption[];
+  onClose: () => void;
+}): React.ReactElement | null {
+  const { colors } = useTheme();
+
+  // iOS: a picker (photo library / files / camera) is a view controller, and
+  // UIKit REFUSES to present one while this sheet's own modal is still
+  // animating its dismissal — which is precisely when a "close then run the
+  // picker" handler runs. So the chosen action is parked and executed from
+  // the Modal's `onDismiss`, the callback that fires only after the
+  // dismissal has fully completed. That is also why the Modal stays MOUNTED
+  // (`visible` instead of an early null return): unmounting skips the
+  // dismiss lifecycle and onDismiss never fires. Android pickers are
+  // separate activities with no such conflict, so they run immediately.
+  const pendingRef = useRef<(() => void) | null>(null);
+  const choose = (action: () => void): void => {
+    if (Platform.OS === 'ios') {
+      pendingRef.current = action;
+      onClose();
+      return;
+    }
+    onClose();
+    action();
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={open}
+      animationType="fade"
+      onRequestClose={onClose}
+      onDismiss={() => {
+        const run = pendingRef.current;
+        pendingRef.current = null;
+        run?.();
+      }}
+    >
+      <Pressable
+        onPress={onClose}
+        style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }}
+      >
+        {/* Swallow taps on the card so only the backdrop dismisses. */}
+        <Pressable
+          onPress={() => undefined}
+          style={{
+            backgroundColor: colors.background,
+            borderTopLeftRadius: radius.xl,
+            borderTopRightRadius: radius.xl,
+            padding: spacing.md,
+            paddingBottom: spacing.xl,
+          }}
+        >
+          {/* Grab handle — the affordance that says "sheet", and therefore
+              "swipe-away-able", without a close button competing with the
+              options. */}
+          <View
+            style={{
+              alignSelf: 'center',
+              width: 36,
+              height: 4,
+              borderRadius: 2,
+              backgroundColor: colors.border,
+              marginBottom: spacing.md,
+            }}
+          />
+
+          <MyazaText variant="heading3" style={{ textAlign: 'center', marginBottom: spacing.md }}>
+            {title}
+          </MyazaText>
+
+          {options.map((o, i) => (
+            <Pressable
+              key={o.label}
+              onPress={() => choose(o.onPress)}
+              accessibilityRole="button"
+              accessibilityLabel={o.label}
+              style={({ pressed }) => ({
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: spacing.md,
+                paddingVertical: spacing.md,
+                paddingHorizontal: spacing.sm,
+                borderRadius: radius.md,
+                backgroundColor: pressed ? colors.backgroundSecondary : 'transparent',
+                marginTop: i === 0 ? 0 : spacing.xs,
+              })}
+            >
+              {/* Tinted icon disc — the same treatment the flow's info rows
+                  use, so the sheet reads as part of the SDK, not the OS. */}
+              <View
+                style={{
+                  width: 42,
+                  height: 42,
+                  borderRadius: radius.full,
+                  backgroundColor: colors.primary50,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon name={o.icon} size={20} color={colors.primary} />
+              </View>
+              <View style={{ flex: 1 }}>
+                <MyazaText variant="label">{o.label}</MyazaText>
+                <MyazaText variant="bodySmall" color={colors.textMuted}>
+                  {o.caption}
+                </MyazaText>
+              </View>
+              <Icon name="chevron-right" size={18} color={colors.textMuted} />
+            </Pressable>
+          ))}
+
+          <Pressable
+            onPress={onClose}
+            accessibilityRole="button"
+            accessibilityLabel="Cancel"
+            style={{ paddingVertical: spacing.md, alignItems: 'center', marginTop: spacing.xs }}
+          >
+            <MyazaText variant="label" color={colors.textSecondary}>
+              Cancel
+            </MyazaText>
+          </Pressable>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}

package/src/components/MyazaButton.tsx

@@ -85,13 +85,25 @@ export function MyazaButton({
       {loading ? (
         <ActivityIndicator color={effectiveFg} size="small" />
       ) : (
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        // `flexShrink: 1` on the ROW and the label: a Text in a row that cannot
+        // shrink does not wrap, it OVERFLOWS and gets clipped. That was
+        // invisible with the bundled font and cut "Continue" to "Continu" the
+        // moment an org picked a wider one. A button label must never be
+        // truncated by a branding choice, hence the shrink-to-fit as well.
+        <View style={{ flexDirection: 'row', alignItems: 'center', flexShrink: 1 }}>
           {leadingIcon ? (
             <View style={{ marginRight: 8 }}>
               <Icon name={leadingIcon} size={18} color={effectiveFg} />
             </View>
           ) : null}
-          <MyazaText variant="button" color={effectiveFg}>
+          <MyazaText
+            variant="button"
+            color={effectiveFg}
+            numberOfLines={1}
+            adjustsFontSizeToFit
+            minimumFontScale={0.8}
+            style={{ flexShrink: 1 }}
+          >
             {label}
           </MyazaText>
         </View>

package/src/components/MyazaDateField.tsx

@@ -0,0 +1,240 @@
+import React, { useState } from 'react';
+import { Modal, Pressable, ScrollView, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import {
+  MONTH_NAMES,
+  WEEKDAY_INITIALS,
+  addMonth,
+  monthMatrix,
+  parseIsoDate,
+  toIsoDate,
+} from '../lib/calendar';
+import { Icon } from './Icon';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+/**
+ * A date field that opens a REAL calendar picker, replacing the "type
+ * YYYY-MM-DD" text input — nobody should hand-format an ISO date on a phone
+ * keyboard. JS-drawn rather than `@react-native-community/datetimepicker`
+ * because a native module would be a new install step for every SDK consumer,
+ * and a JS calendar themes correctly (org palette, dark mode) for free — the
+ * same reason the Flutter SDK wraps `showDatePicker` in its own theme.
+ *
+ * The value contract is unchanged: emits strict `YYYY-MM-DD`, exactly what the
+ * text input produced and what the server validates.
+ *
+ * Years run NEWEST-FIRST in the year grid: the common date questions are
+ * birthdays and document dates, both reached faster from the recent end.
+ */
+export function MyazaDateField({
+  value,
+  onChange,
+  placeholder,
+  error,
+}: {
+  value?: string;
+  onChange: (iso: string) => void;
+  placeholder?: string;
+  error?: string | null;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [open, setOpen] = useState(false);
+  const selected = parseIsoDate(value);
+
+  return (
+    <>
+      <Pressable
+        onPress={() => setOpen(true)}
+        accessibilityRole="button"
+        accessibilityLabel={selected ? `Date, ${value}` : (placeholder ?? 'Select a date')}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: spacing.md,
+          paddingVertical: spacing.md,
+          borderRadius: radius.sm,
+          // Mirrors MyazaInput's border grammar so the two field kinds sit
+          // side by side without looking like different systems.
+          borderWidth: error ? 1.5 : 1,
+          borderColor: error ? colors.error : colors.border,
+          backgroundColor: colors.background,
+        }}
+      >
+        <Icon name="calendar" size={18} color={colors.textSecondary} />
+        <View style={{ width: spacing.sm }} />
+        <MyazaText variant="body" color={selected ? undefined : colors.textMuted} style={{ flex: 1 }}>
+          {selected ? value! : (placeholder ?? 'Select a date')}
+        </MyazaText>
+        <Icon name="chevron-down" size={18} color={colors.textSecondary} />
+      </Pressable>
+      {error ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.xs }}>
+          {error}
+        </MyazaText>
+      ) : null}
+
+      {open ? (
+        <DatePickerSheet
+          initial={selected}
+          onClose={() => setOpen(false)}
+          onPick={(iso) => {
+            setOpen(false);
+            onChange(iso);
+          }}
+        />
+      ) : null}
+    </>
+  );
+}
+
+/** Same range as the Flutter SDK's picker: 1900 through five years out. */
+const MIN_YEAR = 1900;
+const MAX_YEAR = new Date().getFullYear() + 5;
+
+function DatePickerSheet({
+  initial,
+  onClose,
+  onPick,
+}: {
+  initial: ReturnType<typeof parseIsoDate>;
+  onClose: () => void;
+  onPick: (iso: string) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const today = new Date();
+  const [cursor, setCursor] = useState({
+    year: initial?.year ?? today.getFullYear(),
+    month0: initial?.month0 ?? today.getMonth(),
+  });
+  const [pickingYear, setPickingYear] = useState(false);
+
+  const weeks = monthMatrix(cursor.year, cursor.month0);
+  const isToday = (d: number) =>
+    cursor.year === today.getFullYear() && cursor.month0 === today.getMonth() && d === today.getDate();
+  const isSelected = (d: number) =>
+    !!initial && initial.year === cursor.year && initial.month0 === cursor.month0 && initial.day === d;
+
+  return (
+    <Modal transparent animationType="fade" onRequestClose={onClose}>
+      <Pressable
+        onPress={onClose}
+        style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }}
+      >
+        {/* Stop the backdrop press from closing when the card itself is tapped. */}
+        <Pressable
+          onPress={() => undefined}
+          style={{
+            backgroundColor: colors.background,
+            borderTopLeftRadius: radius.xl,
+            borderTopRightRadius: radius.xl,
+            padding: spacing.md,
+            paddingBottom: spacing.xl,
+          }}
+        >
+          {/* Month header: step, or tap the title to jump years. */}
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: spacing.sm }}>
+            <Pressable
+              onPress={() => setCursor((c) => addMonth(c.year, c.month0, -1))}
+              hitSlop={8}
+              accessibilityLabel="Previous month"
+              style={{ padding: spacing.sm }}
+            >
+              <Icon name="chevron-left" size={20} color={colors.textSecondary} />
+            </Pressable>
+            <Pressable
+              onPress={() => setPickingYear((v) => !v)}
+              accessibilityLabel="Choose year"
+              style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 4 }}
+            >
+              <MyazaText variant="label">{`${MONTH_NAMES[cursor.month0]} ${cursor.year}`}</MyazaText>
+              <Icon name="chevron-down" size={16} color={colors.textSecondary} />
+            </Pressable>
+            <Pressable
+              onPress={() => setCursor((c) => addMonth(c.year, c.month0, 1))}
+              hitSlop={8}
+              accessibilityLabel="Next month"
+              style={{ padding: spacing.sm }}
+            >
+              <Icon name="chevron-right" size={20} color={colors.textSecondary} />
+            </Pressable>
+          </View>
+
+          {pickingYear ? (
+            <ScrollView style={{ height: 280 }}>
+              <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                {Array.from({ length: MAX_YEAR - MIN_YEAR + 1 }, (_, i) => MAX_YEAR - i).map((y) => (
+                  <Pressable
+                    key={y}
+                    onPress={() => {
+                      setCursor((c) => ({ ...c, year: y }));
+                      setPickingYear(false);
+                    }}
+                    style={{ width: '25%', paddingVertical: spacing.sm, alignItems: 'center' }}
+                  >
+                    <MyazaText
+                      variant="body"
+                      color={y === cursor.year ? colors.primary : undefined}
+                      style={y === cursor.year ? { fontWeight: '600' } : undefined}
+                    >
+                      {String(y)}
+                    </MyazaText>
+                  </Pressable>
+                ))}
+              </View>
+            </ScrollView>
+          ) : (
+            <>
+              <View style={{ flexDirection: 'row' }}>
+                {WEEKDAY_INITIALS.map((w, i) => (
+                  <MyazaText
+                    key={`${w}${i}`}
+                    variant="bodySmall"
+                    color={colors.textMuted}
+                    style={{ flex: 1, textAlign: 'center' }}
+                  >
+                    {w}
+                  </MyazaText>
+                ))}
+              </View>
+              {weeks.map((week, wi) => (
+                <View key={wi} style={{ flexDirection: 'row' }}>
+                  {week.map((day, di) =>
+                    day == null ? (
+                      <View key={di} style={{ flex: 1, aspectRatio: 1 }} />
+                    ) : (
+                      <Pressable
+                        key={di}
+                        onPress={() => onPick(toIsoDate({ year: cursor.year, month0: cursor.month0, day }))}
+                        accessibilityRole="button"
+                        accessibilityLabel={`${day} ${MONTH_NAMES[cursor.month0]} ${cursor.year}`}
+                        style={{
+                          flex: 1,
+                          aspectRatio: 1,
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          borderRadius: radius.full,
+                          backgroundColor: isSelected(day) ? colors.primary : undefined,
+                          borderWidth: isToday(day) && !isSelected(day) ? 1 : 0,
+                          borderColor: colors.primary,
+                        }}
+                      >
+                        <MyazaText
+                          variant="body"
+                          color={isSelected(day) ? colors.onPrimary : undefined}
+                        >
+                          {String(day)}
+                        </MyazaText>
+                      </Pressable>
+                    ),
+                  )}
+                </View>
+              ))}
+            </>
+          )}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}