@studio-piot/native-ui 0.16.0 → 0.20.0

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;
+};

package/src/components/Select/Select.tsx

@@ -21,7 +21,7 @@ import {
   type BottomSheetBackdropProps,
   type BottomSheetHandleProps,
 } from "@gorhom/bottom-sheet";
-import { FullWindowOverlay } from "react-native-screens";
+import { SheetContainer } from "../../layout/SheetContainer";
 import { SHEET_TOP_RADIUS } from "../../layout/sheet";
 import { buttonRadiusValue } from "../Button/buttonRadius";
 import {
@@ -36,14 +36,6 @@ import type { SelectOption, SelectProps } from "./types";
 
 const BACKDROP_OPACITY = 0.72;
 
-/** Renders the sheet above React Navigation native modals (iOS). */
-function SheetContainer({ children }: { children?: ReactNode }) {
-  if (Platform.OS === "ios") {
-    return <FullWindowOverlay>{children}</FullWindowOverlay>;
-  }
-  return <>{children}</>;
-}
-
 export function Select({
   name,
   value,