@studio-piot/native-ui 0.17.0 → 0.20.0

package/docs/components/tabs.md

@@ -0,0 +1,85 @@
+# Tabs — usage
+
+Underline tabs that switch between views of the same screen, for example **Planned** and **Completed** on an Activities list. Equal-width labels sit on a hairline, and an underline slides to the active tab.
+
+Tabs change what one screen shows; they don't navigate. For a choice inside a form, use [SegmentedControl](./segmented-control.md). For the app's main sections, use the native tab bar.
+
+## Basic usage
+
+```tsx
+import { Page, Tabs } from "@studio-piot/native-ui";
+import { useState } from "react";
+
+type View = "planned" | "completed";
+
+export default function Activities() {
+  const [view, setView] = useState<View>("planned");
+
+  return (
+    <Page>
+      <Tabs
+        value={view}
+        onChange={setView}
+        tabs={[
+          { value: "planned", label: "Planned" },
+          { value: "completed", label: "Completed" },
+        ]}
+      />
+      {view === "planned" ? <PlannedList /> : <CompletedList />}
+    </Page>
+  );
+}
+```
+
+- **Controlled.** Hold `value` in state; `onChange` gets the tapped tab's value.
+- **Width.** Tabs fill their parent and share it equally. Inside a padded `Page`, the line runs between the page margins.
+- **Edge-to-edge line.** To run the hairline across the whole screen while the tabs stay in line with the content, take the row to the edges with `PageBleed` and set `inset` to the page margin:
+
+  ```tsx
+  const { screen } = useThemeSpacing();
+
+  <PageBleed>
+    <Tabs inset={screen} value={view} onChange={setView} tabs={tabs} />
+  </PageBleed>
+  ```
+- **Icons.** Give a tab an `icon` render function, like `Button`'s, to show it left of the label. It gets the label's colour (active or inactive) and size 17; it's hidden from screen readers.
+
+  ```tsx
+  { value: "planned", label: "Planned", icon: ({ color, size }) => <SymbolView name="calendar" size={size} tintColor={color} /> }
+  ```
+- **Disabled tabs** show at 40% and can't be pressed.
+
+## Accessibility
+
+The row is a tab list and each tab is a tab, with `selected` on the active one, so VoiceOver reads "Planned, tab, selected, 1 of 2".
+
+## Theme roles
+
+| Usage | Role |
+|---|---|
+| Hairline under the tabs | `tabsBorder` |
+| Inactive label | `tabsLabel` |
+| Active label | `tabsActiveLabel` |
+| Sliding underline | `tabsIndicator` |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `value` | `T` | — | Required. The active tab |
+| `onChange` | `(value: T) => void` | — | Required |
+| `tabs` | `TabItem<T>[]` | — | Required. `{ value, label, icon?, disabled? }`. Empty renders nothing |
+| `inset` | `number` | `0` | Space each side for the tabs and underline; the hairline still spans the full width |
+| `borderColor` | `string` | theme `tabsBorder` | Optional override |
+| `labelColor` | `string` | theme `tabsLabel` | Optional override |
+| `activeLabelColor` | `string` | theme `tabsActiveLabel` | Optional override |
+| `indicatorColor` | `string` | theme `tabsIndicator` | Optional override |
+| `style` | view style | — | The tab row |
+
+Layout: labels 15pt semibold with 12pt above and below; the underline is 2pt and slides over 300ms. Uses `react-native-reanimated`, already a peer for `SegmentedControl` and `Select`.
+
+## Imports
+
+```ts
+import { Tabs, TABS_THEME_ROLES, type TabItem, type TabsProps } from "@studio-piot/native-ui";
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-piot/native-ui",
-  "version": "0.17.0",
+  "version": "0.20.0",
   "description": "Shared React Native components for Studio Piot apps.",
   "homepage": "https://github.com/Studio-Piot/studio-native-ui#readme",
   "bugs": {
@@ -29,6 +29,13 @@
       "import": "./dist/components/index.js",
       "require": "./dist/components/index.js",
       "default": "./dist/components/index.js"
+    },
+    "./date-time": {
+      "types": "./dist/date-time.d.ts",
+      "react-native": "./dist/date-time.js",
+      "import": "./dist/date-time.js",
+      "require": "./dist/date-time.js",
+      "default": "./dist/date-time.js"
     }
   },
   "typesVersions": {
@@ -50,6 +57,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@expo/ui": ">=57.0.0",
     "@gorhom/bottom-sheet": "^5.2.14",
     "@react-native-community/slider": "^5.2.0",
     "react": ">=19.0.0",
@@ -67,9 +75,10 @@
     "clean": "rm -rf dist *.tsbuildinfo",
     "dev": "tsc --watch",
     "prepare": "tsc",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "pnpm run build"
   },
   "devDependencies": {
+    "@expo/ui": "~57.0.19",
     "@gorhom/bottom-sheet": "^5.2.14",
     "@react-native-community/slider": "^5.2.0",
     "@types/react": "^19.2.2",
@@ -81,5 +90,10 @@
     "react-native-screens": "~4.26.0",
     "react-native-svg": "^15.15.4",
     "typescript": "^5.9.3"
+  },
+  "peerDependenciesMeta": {
+    "@expo/ui": {
+      "optional": true
+    }
   }
 }

package/src/components/DateTime/DateTimePresenter.android.tsx

@@ -0,0 +1,76 @@
+import { DatePickerDialog, Host, TimePickerDialog } from "@expo/ui/jetpack-compose";
+import { useEffect, useState } from "react";
+import { withDay, withTime } from "./dateTimeValue";
+import type { DateTimePresenterProps } from "./types";
+
+type Step = "date" | "time" | null;
+
+/** Android: the system date dialog, then the time dialog (for datetime). */
+export function DateTimePresenter({
+  open,
+  value,
+  mode,
+  minimumDate,
+  maximumDate,
+  colors,
+  onConfirm,
+  onClose,
+}: DateTimePresenterProps) {
+  const [step, setStep] = useState<Step>(null);
+  const [draft, setDraft] = useState(value);
+
+  useEffect(() => {
+    if (open) {
+      setDraft(value);
+      setStep(mode === "time" ? "time" : "date");
+    } else {
+      setStep(null);
+    }
+    // Restart from the value only when opened.
+  }, [open]);
+
+  const close = () => {
+    setStep(null);
+    onClose();
+  };
+
+  if (step === "date") {
+    return (
+      <Host>
+        <DatePickerDialog
+          color={colors.accent}
+          initialDate={draft.toISOString()}
+          onDateSelected={(day) => {
+            const next = withDay(draft, day);
+            if (mode === "datetime") {
+              setDraft(next);
+              setStep("time");
+            } else {
+              setStep(null);
+              onConfirm(next);
+            }
+          }}
+          onDismissRequest={close}
+          selectableDates={{ start: minimumDate, end: maximumDate }}
+        />
+      </Host>
+    );
+  }
+  if (step === "time") {
+    return (
+      <Host>
+        <TimePickerDialog
+          color={colors.accent}
+          initialDate={draft.toISOString()}
+          is24Hour
+          onDateSelected={(time) => {
+            setStep(null);
+            onConfirm(withTime(draft, time));
+          }}
+          onDismissRequest={close}
+        />
+      </Host>
+    );
+  }
+  return null;
+}

package/src/components/DateTime/DateTimePresenter.ios.tsx

@@ -0,0 +1,122 @@
+import { DatePicker, Host } from "@expo/ui/swift-ui";
+import { datePickerStyle, tint } from "@expo/ui/swift-ui/modifiers";
+import { useEffect, useState } from "react";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SHEET_TOP_RADIUS } from "../../layout/sheet";
+import type { DateTimePresenterProps } from "./types";
+
+const BACKDROP = "rgba(0, 0, 0, 0.4)";
+
+/**
+ * iOS: a bottom panel in a React Native Modal with SwiftUI's picker — a
+ * calendar for dates, wheels for times — and Done. Tapping outside keeps
+ * the old value. A Modal (not a bottom-sheet modal) so it opens from
+ * anywhere, including inside another sheet or a native modal.
+ */
+export function DateTimePresenter({
+  open,
+  value,
+  mode,
+  minimumDate,
+  maximumDate,
+  title,
+  doneLabel,
+  colors,
+  onConfirm,
+  onClose,
+}: DateTimePresenterProps) {
+  const insets = useSafeAreaInsets();
+  const [draft, setDraft] = useState(value);
+
+  useEffect(() => {
+    // Start from the field's value each time the picker opens.
+    if (open) setDraft(value);
+  }, [open]);
+
+  const components: ("date" | "hourAndMinute")[] =
+    mode === "date" ? ["date"] : mode === "time" ? ["hourAndMinute"] : ["date", "hourAndMinute"];
+
+  return (
+    <Modal
+      animationType="slide"
+      onRequestClose={onClose}
+      transparent
+      visible={open}
+    >
+      <View style={styles.root}>
+        <Pressable
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          onPress={onClose}
+          style={[StyleSheet.absoluteFill, { backgroundColor: BACKDROP }]}
+        />
+        <View
+          style={[
+            styles.panel,
+            { backgroundColor: colors.background, paddingBottom: insets.bottom + 16 },
+          ]}
+        >
+          <View style={styles.header}>
+            <Text accessibilityRole="header" style={[styles.title, { color: colors.text }]}>
+              {title}
+            </Text>
+            <Pressable accessibilityRole="button" hitSlop={8} onPress={() => onConfirm(draft)}>
+              <Text style={[styles.done, { color: colors.accent }]}>{doneLabel}</Text>
+            </Pressable>
+          </View>
+          <View style={[styles.divider, { backgroundColor: colors.border }]} />
+          <View style={styles.picker}>
+            <Host matchContents>
+              <DatePicker
+                displayedComponents={components}
+                modifiers={[
+                  datePickerStyle(mode === "date" ? "graphical" : "wheel"),
+                  tint(colors.accent),
+                ]}
+                onDateChange={setDraft}
+                range={{ start: minimumDate, end: maximumDate }}
+                selection={draft}
+              />
+            </Host>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  panel: {
+    borderTopLeftRadius: SHEET_TOP_RADIUS,
+    borderTopRightRadius: SHEET_TOP_RADIUS,
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  title: {
+    flex: 1,
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  done: {
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+  },
+  picker: {
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+});

package/src/components/DateTime/DateTimePresenter.tsx

@@ -0,0 +1,6 @@
+import type { DateTimePresenterProps } from "./types";
+
+/** Web and other platforms: no native picker; the field shows its value only. */
+export function DateTimePresenter(_props: DateTimePresenterProps) {
+  return null;
+}

package/src/components/DateTime/FieldDateTime.tsx

@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { buttonRadiusValue } from "../Button/buttonRadius";
+import { useErrorBannerDismiss, useErrorBannerField } from "../ErrorBanner";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import { DateTimePresenter } from "./DateTimePresenter";
+import { DATE_TIME_THEME_ROLES } from "./dateTimeThemeRoles";
+import { clampDate, formatDateTimeValue } from "./dateTimeValue";
+import type { FieldDateTimeProps } from "./types";
+
+/**
+ * A date, time, or date-and-time field. Looks like Select: label, value,
+ * description or error. Tapping opens the native picker — a sheet with
+ * Done on iOS, the system dialogs on Android. Needs `@expo/ui`.
+ */
+export function FieldDateTime({
+  name,
+  value,
+  onChange,
+  mode = "datetime",
+  label,
+  description,
+  error,
+  placeholder = mode === "time" ? "Choose a time" : "Choose a date",
+  minimumDate,
+  maximumDate,
+  formatValue,
+  sheetTitle,
+  doneLabel = "Done",
+  radius = "xl",
+  editable = true,
+  backgroundColor: backgroundColorProp,
+  textColor: textColorProp,
+  placeholderColor: placeholderColorProp,
+  labelColor: labelColorProp,
+  descriptionColor: descriptionColorProp,
+  borderColor: borderColorProp,
+  errorColor: errorColorProp,
+  accentColor: accentColorProp,
+  style,
+}: FieldDateTimeProps) {
+  const backgroundColor = useResolvedFieldColor(backgroundColorProp, DATE_TIME_THEME_ROLES.backgroundColor);
+  const textColor = useResolvedFieldColor(textColorProp, DATE_TIME_THEME_ROLES.textColor);
+  const placeholderColor = useResolvedFieldColor(placeholderColorProp, DATE_TIME_THEME_ROLES.placeholderColor);
+  const labelColor = useResolvedFieldColor(labelColorProp, DATE_TIME_THEME_ROLES.labelColor);
+  const descriptionColor = useResolvedFieldColor(descriptionColorProp, DATE_TIME_THEME_ROLES.descriptionColor);
+  const borderColor = useResolvedFieldColor(borderColorProp, DATE_TIME_THEME_ROLES.borderColor);
+  const errorColor = useResolvedFieldColor(errorColorProp, DATE_TIME_THEME_ROLES.errorColor);
+  const accentColor = useResolvedFieldColor(accentColorProp, DATE_TIME_THEME_ROLES.accentColor);
+
+  const [open, setOpen] = useState(false);
+  const dismissBanner = useErrorBannerDismiss();
+  const { viewRef, listed } = useErrorBannerField(name, () => setOpen(true));
+  const hasError = Boolean(error) || Boolean(listed);
+  const inlineError = listed ? undefined : error;
+  const display = value
+    ? (formatValue ?? ((date: Date) => formatDateTimeValue(date, mode)))(value)
+    : placeholder;
+
+  return (
+    <View
+      ref={viewRef}
+      collapsable={false}
+      style={[styles.column, !editable && styles.blocked, style]}
+    >
+      {label ? <Text style={[styles.label, { color: labelColor }]}>{label}</Text> : null}
+      <Pressable
+        accessibilityHint={listed?.message ?? "Opens a date and time picker"}
+        accessibilityLabel={label ? `${label}. ${display}` : display}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !editable }}
+        disabled={!editable}
+        onPress={() => setOpen(true)}
+        style={[
+          styles.trigger,
+          {
+            backgroundColor,
+            borderColor: hasError ? errorColor : borderColor,
+            borderRadius: buttonRadiusValue(radius),
+          },
+        ]}
+      >
+        <Text
+          numberOfLines={1}
+          style={[styles.triggerText, { color: value ? textColor : placeholderColor }]}
+        >
+          {display}
+        </Text>
+        <Text
+          accessibilityElementsHidden
+          importantForAccessibility="no"
+          style={[styles.chevron, { color: placeholderColor }]}
+        >
+          ›
+        </Text>
+      </Pressable>
+      {inlineError ? (
+        <Text style={[styles.helper, { color: errorColor }]}>{inlineError}</Text>
+      ) : description ? (
+        <Text style={[styles.helper, { color: descriptionColor }]}>{description}</Text>
+      ) : null}
+
+      <DateTimePresenter
+        colors={{
+          background: backgroundColor,
+          text: textColor,
+          handle: placeholderColor,
+          border: borderColor,
+          accent: accentColor,
+        }}
+        doneLabel={doneLabel}
+        maximumDate={maximumDate}
+        minimumDate={minimumDate}
+        mode={mode}
+        onClose={() => setOpen(false)}
+        onConfirm={(next) => {
+          setOpen(false);
+          onChange(clampDate(next, minimumDate, maximumDate));
+          dismissBanner();
+        }}
+        open={open}
+        title={sheetTitle ?? label ?? "Date and time"}
+        value={clampDate(value ?? new Date(), minimumDate, maximumDate)}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  column: {
+    gap: 6,
+    width: "100%",
+  },
+  blocked: {
+    opacity: 0.4,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+  },
+  trigger: {
+    alignItems: "center",
+    borderWidth: 1,
+    flexDirection: "row",
+    gap: 8,
+    minHeight: 48,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    width: "100%",
+  },
+  triggerText: {
+    flex: 1,
+    fontSize: 17,
+  },
+  chevron: {
+    fontSize: 22,
+    fontWeight: "300",
+    lineHeight: 24,
+    transform: [{ rotate: "90deg" }],
+  },
+  helper: {
+    fontSize: 13,
+  },
+});

package/src/components/DateTime/dateTimeThemeRoles.test.ts

@@ -0,0 +1,18 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { DATE_TIME_THEME_ROLES } from "./dateTimeThemeRoles.ts";
+
+describe("DATE_TIME_THEME_ROLES", () => {
+  it("shares the Field roles, plus the Select accent for Done", () => {
+    assert.deepEqual(DATE_TIME_THEME_ROLES, {
+      backgroundColor: "fieldBackground",
+      textColor: "fieldText",
+      placeholderColor: "fieldPlaceholder",
+      labelColor: "fieldLabel",
+      descriptionColor: "fieldDescription",
+      borderColor: "fieldBorder",
+      errorColor: "fieldError",
+      accentColor: "fieldSelectSelected",
+    });
+  });
+});

package/src/components/DateTime/dateTimeThemeRoles.ts

@@ -0,0 +1,13 @@
+/** The same roles as FieldText and Select, so date fields match the form. */
+export const DATE_TIME_THEME_ROLES = {
+  backgroundColor: "fieldBackground",
+  textColor: "fieldText",
+  placeholderColor: "fieldPlaceholder",
+  labelColor: "fieldLabel",
+  descriptionColor: "fieldDescription",
+  borderColor: "fieldBorder",
+  errorColor: "fieldError",
+  accentColor: "fieldSelectSelected",
+} as const;
+
+export type DateTimeThemeColorProp = keyof typeof DATE_TIME_THEME_ROLES;

package/src/components/DateTime/dateTimeValue.test.ts

@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { clampDate, formatDateTimeValue, withDay, withTime } from "./dateTimeValue.ts";
+
+const value = new Date(2026, 9, 3, 8, 5);
+
+describe("formatDateTimeValue", () => {
+  it("shows the parts the mode picks", () => {
+    assert.equal(formatDateTimeValue(value, "date"), "Sat 3 Oct 2026");
+    assert.equal(formatDateTimeValue(value, "time"), "08:05");
+    assert.equal(formatDateTimeValue(value, "datetime"), "Sat 3 Oct 2026 · 08:05");
+  });
+});
+
+describe("withDay and withTime", () => {
+  it("takes the day from one date and keeps the time of the other", () => {
+    const next = withDay(value, new Date(2026, 11, 25, 17, 30));
+    assert.deepEqual(
+      [next.getFullYear(), next.getMonth(), next.getDate(), next.getHours(), next.getMinutes()],
+      [2026, 11, 25, 8, 5],
+    );
+  });
+
+  it("takes the time from one date and keeps the day of the other", () => {
+    const next = withTime(value, new Date(2020, 0, 1, 19, 45, 30));
+    assert.deepEqual(
+      [next.getFullYear(), next.getMonth(), next.getDate(), next.getHours(), next.getMinutes(), next.getSeconds()],
+      [2026, 9, 3, 19, 45, 0],
+    );
+  });
+});
+
+describe("clampDate", () => {
+  const min = new Date(2026, 9, 3, 9, 0);
+  const max = new Date(2026, 9, 10, 9, 0);
+
+  it("keeps a date in range", () => {
+    assert.equal(clampDate(new Date(2026, 9, 5), min, max).getTime(), new Date(2026, 9, 5).getTime());
+  });
+
+  it("moves an earlier or later date to the limit", () => {
+    assert.equal(clampDate(value, min, max).getTime(), min.getTime());
+    assert.equal(clampDate(new Date(2027, 0, 1), min, max).getTime(), max.getTime());
+  });
+
+  it("ignores a missing limit", () => {
+    assert.equal(clampDate(value, undefined, undefined).getTime(), value.getTime());
+  });
+});

package/src/components/DateTime/dateTimeValue.ts

@@ -0,0 +1,36 @@
+/** Which parts of the value the field edits. */
+export type DateTimeMode = "date" | "time" | "datetime";
+
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const pad = (value: number) => String(value).padStart(2, "0");
+
+/** Default display: "Sat 3 Oct 2026", "08:05" or "Sat 3 Oct 2026 · 08:05", local time. Pure. */
+export function formatDateTimeValue(value: Date, mode: DateTimeMode): string {
+  const day = `${WEEKDAYS[value.getDay()]} ${value.getDate()} ${MONTHS[value.getMonth()]} ${value.getFullYear()}`;
+  const time = `${pad(value.getHours())}:${pad(value.getMinutes())}`;
+  if (mode === "date") return day;
+  if (mode === "time") return time;
+  return `${day} · ${time}`;
+}
+
+/** `value` moved to the calendar day of `day`, keeping its time. */
+export function withDay(value: Date, day: Date): Date {
+  const next = new Date(value);
+  next.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
+  return next;
+}
+
+/** `value` at the hour and minute of `time`, keeping its day. */
+export function withTime(value: Date, time: Date): Date {
+  const next = new Date(value);
+  next.setHours(time.getHours(), time.getMinutes(), 0, 0);
+  return next;
+}
+
+/** `value` moved inside the optional limits. */
+export function clampDate(value: Date, minimum?: Date, maximum?: Date): Date {
+  if (minimum && value < minimum) return new Date(minimum);
+  if (maximum && value > maximum) return new Date(maximum);
+  return value;
+}

package/src/components/DateTime/index.ts

@@ -0,0 +1,4 @@
+export { FieldDateTime } from "./FieldDateTime";
+export { DATE_TIME_THEME_ROLES, type DateTimeThemeColorProp } from "./dateTimeThemeRoles";
+export { formatDateTimeValue, type DateTimeMode } from "./dateTimeValue";
+export type { FieldDateTimeProps } from "./types";

package/src/components/DateTime/types.ts

@@ -0,0 +1,58 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+import type { DateTimeMode } from "./dateTimeValue";
+
+export type FieldDateTimeProps = {
+  /** Matches `FieldError.field` for the error banner. */
+  name?: string;
+  value: Date | null;
+  onChange: (value: Date) => void;
+  /** Default `"datetime"`. */
+  mode?: DateTimeMode;
+  label?: string;
+  description?: string;
+  error?: string;
+  /** Shown while `value` is null. Default "Choose a date" / "Choose a time". */
+  placeholder?: string;
+  minimumDate?: Date;
+  maximumDate?: Date;
+  /** Field text. Default: "Sat 3 Oct 2026 · 08:05" style. */
+  formatValue?: (value: Date) => string;
+  /** iOS sheet title. Defaults to `label`. */
+  sheetTitle?: string;
+  /** Default "Done". */
+  doneLabel?: string;
+  radius?: ButtonRadius;
+  editable?: boolean;
+  backgroundColor?: string;
+  textColor?: string;
+  placeholderColor?: string;
+  labelColor?: string;
+  descriptionColor?: string;
+  borderColor?: string;
+  errorColor?: string;
+  /** Done button (iOS) and picker tint. */
+  accentColor?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Platform picker opened by the field. */
+export type DateTimePresenterProps = {
+  open: boolean;
+  /** Starting point: the value, or now within the limits. */
+  value: Date;
+  mode: DateTimeMode;
+  minimumDate?: Date;
+  maximumDate?: Date;
+  title: string;
+  doneLabel: string;
+  colors: {
+    background: string;
+    text: string;
+    handle: string;
+    border: string;
+    accent: string;
+  };
+  onConfirm: (value: Date) => void;
+  onClose: () => void;
+};