@multiplatform.one/forms 7.66.0 → 7.68.0

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -10,14 +10,28 @@
  * does a missing `@react-native-community/datetimepicker` (an optional peer,
  * loaded through `loadDateTimePicker`).
  */
-import { useCallback, useState } from "react";
-import { Modal, Pressable, StyleSheet, useColorScheme, Platform } from "react-native";
+import { useCallback, useContext, useState } from "react";
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  useColorScheme,
+  useWindowDimensions,
+  View as RNView,
+} from "react-native";
+import { platform } from "@multiplatform.one/platform";
+import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { useResolvedKnobs, Text } from "@multiplatform.one/theme";
 import { View, XStack, YStack, useTheme, useThemeName } from "tamagui";
+import { ArrowRightIcon } from "@phosphor-icons/react";
+import { IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import { type DateTimePickerEvent, loadDateTimePicker } from "./dateTimePickerLoader";
 import { osDateTimeIosDisplay } from "./osDateTimeIosDisplay";
+import { datePickerHeight, dateSheetBottomPadding, dateSheetMaxHeight } from "./sheetKeyboard";
+import { useKeyboardInset } from "../../shared/useKeyboardInset";
 
 export type OsDateTimeMode = "date" | "time" | "datetime";
 
@@ -52,7 +66,12 @@ export function OsDateTimeSheet({
   const themeVariant = useNativePickerScheme();
   const theme = useTheme();
   const accentColor = theme.accentColor?.val;
-  const isIOS = Platform.OS === "ios";
+  const isIOS = platform.isIos;
+  // MPO-64: the sheet ends ABOVE the keyboard and the picker shrinks to fit.
+  const keyboardInset = useKeyboardInset();
+  const { height: windowHeight } = useWindowDimensions();
+  const topInset = useContext(SafeAreaInsetsContext)?.top ?? initialWindowMetrics?.insets.top ?? 0;
+  const maxHeight = dateSheetMaxHeight(windowHeight, keyboardInset, topInset);
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [temp, setTemp] = useState(value);
   const pickerMode: "date" | "time" =
@@ -148,9 +167,11 @@ export function OsDateTimeSheet({
             <Text color={formCommonColors.muted}>
               {t("Date picker unavailable — requires @react-native-community/datetimepicker")}
             </Text>
-            <Pressable onPress={onCancel} accessibilityRole="button">
-              <Text color="$accentColor">{t("Cancel")}</Text>
-            </Pressable>
+            <IconButton
+              icon={standardActions.cancel.icon}
+              aria-label={t(standardActions.cancel.label)}
+              onPress={onCancel}
+            />
           </YStack>
         </Pressable>
       </Modal>
@@ -172,37 +193,48 @@ export function OsDateTimeSheet({
 
   return (
     <Modal transparent animationType="fade" visible={open} onRequestClose={onCancel}>
-      <Pressable style={styles.modalOverlay} onPress={onCancel}>
-        <View
-          pointerEvents="none"
-          position="absolute"
-          top={0}
-          right={0}
-          bottom={0}
-          left={0}
-          backgroundColor="$shadow6"
-        />
+      {/*
+        A plain padded column, not KeyboardAvoidingView: inside a Modal the
+        latter pads the container while the sheet keeps its own height, so the
+        sheet overflows off the top instead of shrinking (MPO-64).
+      */}
+      <RNView style={[styles.modalOverlay, { paddingBottom: keyboardInset }]}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onCancel}>
+          <View pointerEvents="none" flex={1} backgroundColor="$shadow6" />
+        </Pressable>
         <Pressable onPress={(e) => e.stopPropagation()}>
           <YStack
+            testID="os-date-time-sheet"
             {...knobProps.elevatedSurface}
             borderBottomLeftRadius={0}
             borderBottomRightRadius={0}
+            maxHeight={maxHeight}
+            flexShrink={1}
+            minHeight={0}
+            paddingBottom={dateSheetBottomPadding(keyboardInset, isIOS)}
           >
             <XStack justifyContent="space-between" {...knobProps.panelPadding}>
-              <Pressable onPress={onCancel} accessibilityRole="button">
-                <Text color={formCommonColors.text}>{t("Cancel")}</Text>
-              </Pressable>
+              <IconButton
+                icon={standardActions.cancel.icon}
+                aria-label={t(standardActions.cancel.label)}
+                onPress={onCancel}
+              />
               {mode === "datetime" && !showTimePicker ? (
-                <Pressable onPress={() => setShowTimePicker(true)} accessibilityRole="button">
-                  <Text color="$accentColor">{t("Next")}</Text>
-                </Pressable>
+                <IconButton
+                  icon={ArrowRightIcon}
+                  aria-label={t("Next")}
+                  onPress={() => setShowTimePicker(true)}
+                />
               ) : (
-                <Pressable onPress={confirm} accessibilityRole="button">
-                  <Text color="$accentColor">{t("Done")}</Text>
-                </Pressable>
+                <IconButton
+                  icon={standardActions.done.icon}
+                  plate="primary"
+                  aria-label={t(standardActions.done.label)}
+                  onPress={confirm}
+                />
               )}
             </XStack>
-            <YStack {...knobProps.panelPadding}>
+            <YStack {...knobProps.panelPadding} flexShrink={1} minHeight={0}>
               <DateTimePicker
                 value={temp}
                 mode={pickerMode}
@@ -212,12 +244,12 @@ export function OsDateTimeSheet({
                 onChange={handleIOSChange}
                 minimumDate={mode !== "time" ? minDate : undefined}
                 maximumDate={mode !== "time" ? maxDate : undefined}
-                style={pickerMode === "time" ? styles.wheel : styles.calendar}
+                style={{ width: "100%", height: datePickerHeight(pickerMode, maxHeight) }}
               />
             </YStack>
           </YStack>
         </Pressable>
-      </Pressable>
+      </RNView>
     </Modal>
   );
 }
@@ -227,6 +259,4 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "flex-end",
   },
-  wheel: { height: 216 },
-  calendar: { height: 360 },
 });

package/src/fields/nativeDateTime/sheetKeyboard.spec.ts

@@ -0,0 +1,60 @@
+/**
+ * MPO-64 leftover: the OS date/time iOS sheet must use the same keyboard
+ * cap as FloatingPanel / SheetModal. KeyboardAvoidingView cannot shrink a
+ * fixed-height calendar, so the cap is the only thing that keeps the sheet
+ * above the suggestion strip.
+ */
+import { describe, expect, it } from "vitest";
+import {
+  datePickerHeight,
+  dateSheetBottomPadding,
+  dateSheetMaxHeight,
+  DATE_PICKER_CALENDAR_HEIGHT,
+  DATE_SHEET_BACKDROP_STRIP,
+  DATE_SHEET_MIN_HEIGHT,
+} from "./sheetKeyboard";
+
+describe("dateSheetMaxHeight", () => {
+  it("uses the 85% detent when the keyboard is down", () => {
+    expect(dateSheetMaxHeight(800, 0, 47)).toBe(Math.round(800 * 0.85));
+  });
+
+  it("caps to the space above the keyboard, less the 48pt backdrop strip", () => {
+    expect(dateSheetMaxHeight(800, 400, 0)).toBe(800 - 400 - DATE_SHEET_BACKDROP_STRIP);
+    expect(dateSheetMaxHeight(800, 400, 0)).toBeLessThan(dateSheetMaxHeight(800, 0, 0));
+  });
+
+  it("keeps the backdrop strip below the status bar, not inside it", () => {
+    const windowHeight = 874;
+    const keyboardInset = 335;
+    const topInset = 62;
+    const sheetTop =
+      windowHeight - keyboardInset - dateSheetMaxHeight(windowHeight, keyboardInset, topInset);
+    expect(sheetTop - topInset).toBe(DATE_SHEET_BACKDROP_STRIP);
+  });
+
+  it("never collapses below the minimum sheet height", () => {
+    expect(dateSheetMaxHeight(800, 700, 47)).toBe(DATE_SHEET_MIN_HEIGHT);
+  });
+});
+
+describe("datePickerHeight", () => {
+  it("keeps the calendar grid when the sheet is tall enough", () => {
+    expect(datePickerHeight("date", 700)).toBe(DATE_PICKER_CALENDAR_HEIGHT);
+  });
+
+  it("shrinks the calendar so the sheet can sit above the keyboard", () => {
+    const maxHeight = dateSheetMaxHeight(800, 400, 47);
+    const height = datePickerHeight("date", maxHeight);
+    expect(height).toBeLessThan(DATE_PICKER_CALENDAR_HEIGHT);
+    expect(height).toBeLessThanOrEqual(maxHeight);
+  });
+});
+
+describe("dateSheetBottomPadding", () => {
+  it("drops the home-indicator inset while the keyboard covers it", () => {
+    expect(dateSheetBottomPadding(0, true)).toBe(24);
+    expect(dateSheetBottomPadding(336, true)).toBe(8);
+    expect(dateSheetBottomPadding(0, false)).toBe(16);
+  });
+});

package/src/fields/nativeDateTime/sheetKeyboard.ts

@@ -0,0 +1,45 @@
+/**
+ * MPO-64 leftover: same keyboard cap as FloatingPanel / SheetModal.
+ *
+ * The Date iOS sheet used to give the calendar a fixed 360pt height inside a
+ * Modal. KeyboardAvoidingView cannot shrink that shape — it pads the container
+ * and the sheet overflows off the top. Cap the sheet to the space between the
+ * status bar and the keyboard (less a strip of backdrop) and shrink the picker
+ * to fit.
+ */
+
+export const DATE_SHEET_MAX_HEIGHT_RATIO = 0.85;
+export const DATE_SHEET_BACKDROP_STRIP = 48;
+export const DATE_SHEET_MIN_HEIGHT = 180;
+export const DATE_SHEET_CHROME = 96;
+export const DATE_PICKER_CALENDAR_HEIGHT = 360;
+export const DATE_PICKER_WHEEL_HEIGHT = 216;
+const minPickerHeight = 120;
+
+export function dateSheetMaxHeight(
+  windowHeight: number,
+  keyboardInset: number,
+  topInset: number,
+): number {
+  const available = Math.max(0, windowHeight - keyboardInset);
+  return Math.max(
+    DATE_SHEET_MIN_HEIGHT,
+    Math.round(
+      Math.min(
+        windowHeight * DATE_SHEET_MAX_HEIGHT_RATIO,
+        available - topInset - DATE_SHEET_BACKDROP_STRIP,
+      ),
+    ),
+  );
+}
+
+/** Home-indicator clearance; drop it while the keyboard already covers that band. */
+export function dateSheetBottomPadding(keyboardInset: number, isIos: boolean): number {
+  if (keyboardInset > 0) return 8;
+  return isIos ? 24 : 16;
+}
+
+export function datePickerHeight(mode: "date" | "time", maxHeight: number): number {
+  const preferred = mode === "time" ? DATE_PICKER_WHEEL_HEIGHT : DATE_PICKER_CALENDAR_HEIGHT;
+  return Math.min(preferred, Math.max(minPickerHeight, maxHeight - DATE_SHEET_CHROME));
+}

package/src/index.ts

@@ -112,8 +112,14 @@ export { formatActionLabel } from "./actionLabel";
 export type { ActionLabelParts } from "./actionLabel";
 
 // ── Core Primitives ──────────────────────────────────────────
-export { Button } from "./Button";
-export type { ButtonProps, ButtonActionRole } from "./Button";
+export {
+  Button,
+  IconButton,
+  ICON_BUTTON_GLYPH_PX,
+  ICON_BUTTON_NEUTRAL_GLYPH_PX,
+  ICON_BUTTON_PRESS_OPACITY,
+} from "./Button";
+export type { ButtonProps, ButtonActionRole, IconButtonProps } from "./Button";
 
 export { Input } from "./fields/Input";
 export type { InputProps } from "./fields/Input";
@@ -425,8 +431,23 @@ export {
   withOverlayStack,
 } from "./shared/overlayStack";
 export type { OverlayTier } from "./shared/overlayStack";
+export {
+  createSheetNavigationStore,
+  SheetNavigationProvider,
+  useSheetNavigation,
+  useSheetPageOpen,
+  useSheetPages,
+} from "./shared/sheetNavigation";
+export type { SheetNavigationStore, SheetPage } from "./shared/sheetNavigation";
 export { OverlayWindow } from "./shared/OverlayWindow";
 export type { OverlayWindowProps } from "./shared/OverlayWindow";
+export {
+  SHEET_PANEL_WIDTH,
+  overlaySizeClass,
+  sheetPanelWidth,
+  useOverlaySizeClass,
+} from "./shared/overlaySizeClass";
+export type { OverlaySizeClass } from "./shared/overlaySizeClass";
 
 // ── TanStack Form re-exports ─────────────────────────────────
 export {
@@ -445,3 +466,5 @@ export type {
   PickedMedia,
   MediaPickerErrorCode,
 } from "./MediaPicker/types";
+export { standardActions, standardActionWords } from "./standardActions";
+export type { StandardAction, StandardActionKind } from "./standardActions";

package/src/shared/colorRamps.ts

@@ -101,20 +101,10 @@ export const formCardColors = {
  * step (boards media-01..04 measure 1px dashed rgb(77,77,77) light /
  * rgb(133,133,133) dark) — the `$borderColor` hairline tier measured
  * near-invisible as a dash. Picked files ride IN-ZONE rows parted by the
- * same dashed hairline; each row carries a filled $color12 remove disc with
- * the inverse ✕ ($color1). Disc hover/press step back down the ramp so the
- * dark chrome never flashes the light state-layer fills.
+ * same dashed hairline; each row's remove is a bare ✕ (LC-176 ICON-BUTTON).
  */
 export const formDropzoneColors = {
   border: "$color9",
-  removeDisc: {
-    background: {
-      base: "$color12",
-      hover: "$color11",
-      press: "$color10",
-    },
-    ink: "$color1",
-  },
   // Attachments / media-01 transfer bar (MPO-55): 11px pill, $color4 track,
   // $color11 fill — the same pair the measured attachments row draws.
   progress: {

package/src/shared/overlaySizeClass.spec.ts

@@ -0,0 +1,27 @@
+import { OVERLAY_BREAKPOINT } from "@multiplatform.one/theme";
+import { describe, expect, it } from "vitest";
+import { SHEET_PANEL_WIDTH, overlaySizeClass, sheetPanelWidth } from "./overlaySizeClass";
+
+describe("overlaySizeClass (FZ-8116)", () => {
+  it.each([
+    ["iPad Slide Over", 320, "compact"],
+    ["iPhone", 390, "compact"],
+    ["iPhone Pro Max", 440, "compact"],
+    ["the web pivot itself", OVERLAY_BREAKPOINT, "compact"],
+    ["iPad mini portrait", 744, "regular"],
+    ["iPad Air portrait", 820, "regular"],
+    ["iPad Pro landscape", 1366, "regular"],
+  ])("%s (%ipt) is %s", (_name, width, expected) => {
+    expect(overlaySizeClass(width)).toBe(expected);
+  });
+});
+
+describe("sheetPanelWidth", () => {
+  it("caps the panel where the window has room", () => {
+    expect(sheetPanelWidth(820)).toBe(SHEET_PANEL_WIDTH);
+    expect(sheetPanelWidth(1366)).toBe(SHEET_PANEL_WIDTH);
+  });
+  it("spans a window narrower than the cap, as the compact sheet does", () => {
+    expect(sheetPanelWidth(600)).toBe(600);
+  });
+});

package/src/shared/overlaySizeClass.ts

@@ -0,0 +1,36 @@
+import { OVERLAY_BREAKPOINT, layoutBreakpoints } from "@multiplatform.one/theme";
+import { useWindowDimensions } from "react-native";
+
+/**
+ * The horizontal size class an overlay presents for (FZ-8116, LC-266). It is
+ * read from the window, not the device: an iPad in Slide Over or a narrow
+ * Split View is compact, an iPad full screen or a wide Android window is
+ * regular. The pivot is the web's, so a native window and a browser at the
+ * same width draw the same overlay.
+ *
+ * - `"compact"`: the bottom sheet (FloatingPanel, SheetModal).
+ * - `"regular"`: a FloatingPanel opens over its field (LC-105, LC-112), and a
+ *   SheetModal is a bottom panel, width-capped and centred, that slides up.
+ */
+export type OverlaySizeClass = "compact" | "regular";
+
+export function overlaySizeClass(windowWidth: number): OverlaySizeClass {
+  return windowWidth > OVERLAY_BREAKPOINT ? "regular" : "compact";
+}
+
+export function useOverlaySizeClass(): OverlaySizeClass {
+  return overlaySizeClass(useWindowDimensions().width);
+}
+
+/**
+ * The widest a regular-width sheet panel draws (FZ-8116): a bottom panel that
+ * slides up like the compact sheet, centred, never a wall across an iPad.
+ * Drover's composer sheets set the number, and it is the overlay pivot's own
+ * width (LC-28), so every regular-width window is wider than the panel.
+ */
+export const SHEET_PANEL_WIDTH = layoutBreakpoints.medium;
+
+/** The sheet panel's width in a window: the cap, or the whole window below it. */
+export function sheetPanelWidth(windowWidth: number): number {
+  return Math.max(0, Math.min(SHEET_PANEL_WIDTH, windowWidth));
+}

package/src/shared/sheetNavigation.ts

@@ -0,0 +1,82 @@
+import { createContext, useContext, useSyncExternalStore, type ReactNode } from "react";
+
+/**
+ * A sheet's own navigation stack (LC-262, FZ-7830 round 3). A long choice list
+ * inside a sheet is a Settings row that pushes its checkmark list here, inside
+ * the same sheet, instead of floating a menu over the field (HIG: navigation
+ * within a sheet). The sheet renders the top page in place of its body, with a
+ * back control that pops it.
+ */
+export interface SheetPage {
+  id: string;
+  title: string;
+  content: ReactNode;
+}
+
+export interface SheetNavigationStore {
+  subscribe: (listener: () => void) => () => void;
+  getPages: () => readonly SheetPage[];
+  has: (id: string) => boolean;
+  push: (page: SheetPage) => void;
+  update: (page: SheetPage) => void;
+  remove: (id: string) => void;
+  pop: () => void;
+}
+
+export function createSheetNavigationStore(): SheetNavigationStore {
+  let pages: readonly SheetPage[] = [];
+  const listeners = new Set<() => void>();
+  const set = (next: readonly SheetPage[]) => {
+    pages = next;
+    for (const listener of listeners) listener();
+  };
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    getPages: () => pages,
+    has: (id) => pages.some((page) => page.id === id),
+    push(page) {
+      set([...pages.filter((p) => p.id !== page.id), page]);
+    },
+    update(page) {
+      if (!pages.some((p) => p.id === page.id)) return;
+      set(pages.map((p) => (p.id === page.id ? page : p)));
+    },
+    remove(id) {
+      if (!pages.some((p) => p.id === id)) return;
+      set(pages.filter((p) => p.id !== id));
+    },
+    pop() {
+      if (pages.length) set(pages.slice(0, -1));
+    },
+  };
+}
+
+const SheetNavigationContext = createContext<SheetNavigationStore | undefined>(undefined);
+
+export const SheetNavigationProvider = SheetNavigationContext.Provider;
+
+/** The navigation stack of the sheet this subtree sits in, or undefined outside one. */
+export function useSheetNavigation(): SheetNavigationStore | undefined {
+  return useContext(SheetNavigationContext);
+}
+
+const noPages: readonly SheetPage[] = [];
+const noSubscribe = () => () => {};
+
+/** The pages pushed on `store`, oldest first. */
+export function useSheetPages(store: SheetNavigationStore | undefined): readonly SheetPage[] {
+  return useSyncExternalStore(
+    store?.subscribe ?? noSubscribe,
+    store ? store.getPages : () => noPages,
+    store ? store.getPages : () => noPages,
+  );
+}
+
+/** Whether the page `id` is on `store`. */
+export function useSheetPageOpen(store: SheetNavigationStore | undefined, id: string): boolean {
+  const has = () => store?.has(id) ?? false;
+  return useSyncExternalStore(store?.subscribe ?? noSubscribe, has, has);
+}

package/src/shared/systemControlModules.gnome.ts

@@ -0,0 +1,10 @@
+import type { SystemSegmentedControlComponent, SystemSliderComponent } from "./systemControls";
+
+/** GNOME: the MPO slider and segmented control are the platform form. */
+export function loadSystemSlider(): SystemSliderComponent | null {
+  return null;
+}
+
+export function loadSystemSegmentedControl(): SystemSegmentedControlComponent | null {
+  return null;
+}

package/src/shared/systemControlModules.native.spec.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from "vitest";
+import { loadSystemModule } from "./systemControlModules.native";
+
+const SystemView = () => null;
+const registry = (has: (name: string) => boolean) => ({ hasViewManagerConfig: vi.fn(has) });
+
+// LC-266 (FZ-8118, FZ-8119). An OTA reaches binaries built before a module
+// was added: the JS is in the bundle but the native view is not, and
+// rendering it would crash. A module counts only when both are there.
+describe("loadSystemModule", () => {
+  it("returns the component when the JS and the native view are both present", () => {
+    const views = registry(() => true);
+    expect(loadSystemModule(() => ({ default: SystemView }), "RNCSlider", views)).toBe(SystemView);
+    expect(views.hasViewManagerConfig).toHaveBeenCalledWith("RNCSlider");
+  });
+
+  it("returns null when the binary lacks the native view", () => {
+    const views = registry(() => false);
+    expect(loadSystemModule(() => ({ default: SystemView }), "RNCSlider", views)).toBeNull();
+  });
+
+  it("returns null when the package is not installed", () => {
+    const missing = () => {
+      throw new Error("Cannot find module '@react-native-segmented-control/segmented-control'");
+    };
+    expect(
+      loadSystemModule(
+        missing,
+        "RNCSegmentedControl",
+        registry(() => true),
+      ),
+    ).toBeNull();
+    expect(
+      loadSystemModule(
+        () => undefined,
+        "RNCSegmentedControl",
+        registry(() => true),
+      ),
+    ).toBeNull();
+  });
+
+  it("returns null when the registry lookup throws", () => {
+    const views = registry(() => {
+      throw new Error("unstable_hasComponent: Global function is not registered");
+    });
+    expect(loadSystemModule(() => ({ default: SystemView }), "RNCSlider", views)).toBeNull();
+  });
+
+  it("returns null when the registry has no lookup at all", () => {
+    expect(loadSystemModule(() => ({ default: SystemView }), "RNCSlider", {})).toBeNull();
+  });
+});

package/src/shared/systemControlModules.native.ts

@@ -0,0 +1,66 @@
+import { UIManager } from "react-native";
+import type { SystemSegmentedControlComponent, SystemSliderComponent } from "./systemControls";
+
+/**
+ * The system slider and segmented control are optional native modules: Kitchen
+ * Sink ships `@react-native-community/slider`, One does not yet, and neither
+ * ships `@react-native-segmented-control/segmented-control`. The JS can be in
+ * the bundle while the binary lacks the view (an OTA on an older build), so a
+ * module counts only when its native view is registered too. Anything else
+ * returns null and the field keeps the MPO control. Each `require` sits inside
+ * its own `try` so Metro bundles a missing package as an optional dependency
+ * instead of failing the build, as in dateTimePickerLoader.ts (FZ-7357).
+ */
+export interface NativeViewRegistry {
+  hasViewManagerConfig?: (name: string) => boolean;
+}
+
+function hasNativeView(name: string, registry: NativeViewRegistry): boolean {
+  try {
+    return Boolean(registry.hasViewManagerConfig?.(name));
+  } catch {
+    return false;
+  }
+}
+
+export function loadSystemModule<T>(
+  requireModule: () => { default?: T } | undefined,
+  viewName: string,
+  registry: NativeViewRegistry = UIManager,
+): T | null {
+  try {
+    const component = requireModule()?.default;
+    return component && hasNativeView(viewName, registry) ? component : null;
+  } catch {
+    return null;
+  }
+}
+
+let slider: SystemSliderComponent | null | undefined;
+let segmentedControl: SystemSegmentedControlComponent | null | undefined;
+
+export function loadSystemSlider(): SystemSliderComponent | null {
+  if (slider === undefined) {
+    slider = loadSystemModule<SystemSliderComponent>(() => {
+      try {
+        return require("@react-native-community/slider");
+      } catch {
+        return undefined;
+      }
+    }, "RNCSlider");
+  }
+  return slider;
+}
+
+export function loadSystemSegmentedControl(): SystemSegmentedControlComponent | null {
+  if (segmentedControl === undefined) {
+    segmentedControl = loadSystemModule<SystemSegmentedControlComponent>(() => {
+      try {
+        return require("@react-native-segmented-control/segmented-control");
+      } catch {
+        return undefined;
+      }
+    }, "RNCSegmentedControl");
+  }
+  return segmentedControl;
+}

package/src/shared/systemControlModules.ts

@@ -0,0 +1,10 @@
+import type { SystemSegmentedControlComponent, SystemSliderComponent } from "./systemControls";
+
+/** Web: the MPO slider and segmented control are the platform form. */
+export function loadSystemSlider(): SystemSliderComponent | null {
+  return null;
+}
+
+export function loadSystemSegmentedControl(): SystemSegmentedControlComponent | null {
+  return null;
+}