@lotics/ui 1.10.0 → 1.11.1

package/src/calendar/layout.ts

@@ -0,0 +1,142 @@
+import { dayDiff } from "./dates";
+import type { CalendarEvent, EventColumn } from "./types";
+
+/** A horizontal banner placement: which day column it starts on, how many days
+ *  it spans, and which lane (row) it sits in. Used by the month grid and the
+ *  week's all-day row. */
+export interface LaneBar<T = unknown> {
+  event: CalendarEvent<T>;
+  startCol: number;
+  span: number;
+  lane: number;
+}
+
+/**
+ * Pack day-spanning events into horizontal lanes across a `numDays` window
+ * starting at `rangeStart`. Greedy first-fit: an event takes the topmost lane
+ * whose last bar ends before this event starts, else a new lane. Multi-day
+ * events become wide bars; single-day events are span-1 bars. Deterministic.
+ */
+export function packEventLanes<T>(
+  events: CalendarEvent<T>[],
+  rangeStart: Date,
+  numDays: number,
+): { bars: LaneBar<T>[]; lanes: number } {
+  const items = events
+    .map((event) => ({
+      event,
+      startCol: Math.max(0, dayDiff(rangeStart, event.start)),
+      endCol: Math.min(numDays - 1, dayDiff(rangeStart, event.end ?? event.start)),
+    }))
+    .filter((it) => it.endCol >= 0 && it.startCol <= numDays - 1 && it.endCol >= it.startCol)
+    .sort((a, b) => a.startCol - b.startCol || b.endCol - a.endCol);
+
+  const laneEnds: number[] = [];
+  const bars = items.map((it) => {
+    let lane = laneEnds.findIndex((end) => end < it.startCol);
+    if (lane === -1) {
+      lane = laneEnds.length;
+      laneEnds.push(it.endCol);
+    } else {
+      laneEnds[lane] = it.endCol;
+    }
+    return { event: it.event, startCol: it.startCol, span: it.endCol - it.startCol + 1, lane };
+  });
+  return { bars, lanes: laneEnds.length };
+}
+
+const MINUTES_PER_DAY = 1440;
+/** Short events still need a tappable height; floor the rendered span. */
+const MIN_EVENT_MINUTES = 20;
+
+function minutesInto(day: Date, t: Date): number {
+  const ms = t.getTime() - day.getTime();
+  return ms / 60000;
+}
+
+/**
+ * Position timed events for a single grid day into side-by-side columns.
+ *
+ * The defining piece of a real calendar: when events overlap in time they must
+ * share the day's width rather than stack on top of each other. We
+ *   1. clamp each event to the [0, 1440] minute window of `day`,
+ *   2. split events into overlap *clusters* (a maximal run where each event
+ *      overlaps at least one earlier event in the run — transitive),
+ *   3. greedily first-fit each cluster's events into columns (a column is free
+ *      once its last event ends at/before the next one starts),
+ *   4. give every event in a cluster the same `columns` count (the cluster's
+ *      column total) so widths line up: width = 1/columns, left = column/columns.
+ *
+ * Pure and deterministic — input order doesn't matter (we sort). All-day events
+ * are the caller's concern (the all-day row); pass only timed events here.
+ */
+export function layoutDayColumns<T>(
+  day: Date,
+  events: CalendarEvent<T>[],
+): EventColumn<T>[] {
+  const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+
+  const placed = events
+    .map((event) => {
+      const rawTop = minutesInto(dayStart, event.start);
+      const rawEnd = event.end ? minutesInto(dayStart, event.end) : rawTop + MIN_EVENT_MINUTES;
+      const topMinutes = Math.max(0, Math.min(MINUTES_PER_DAY, rawTop));
+      const endMinutes = Math.max(topMinutes, Math.min(MINUTES_PER_DAY, rawEnd));
+      return {
+        event,
+        topMinutes,
+        endMinutes,
+        heightMinutes: Math.max(MIN_EVENT_MINUTES, endMinutes - topMinutes),
+      };
+    })
+    // Earliest first; on a tie the longer event leads so it anchors column 0.
+    .sort((a, b) => a.topMinutes - b.topMinutes || b.heightMinutes - a.heightMinutes);
+
+  const result: EventColumn<T>[] = [];
+  let cluster: typeof placed = [];
+  let clusterEnd = -1;
+
+  const flush = () => {
+    if (cluster.length === 0) return;
+    // First-fit column assignment within the cluster.
+    const columnEnds: number[] = []; // running end-minute per column
+    const assigned = cluster.map((item) => {
+      // The visual span (incl. the min-height floor) is what must not collide,
+      // otherwise a short event floored to 20min could overlap the next chip.
+      const itemVisualEnd = item.topMinutes + item.heightMinutes;
+      let col = columnEnds.findIndex((end) => end <= item.topMinutes);
+      if (col === -1) {
+        col = columnEnds.length;
+        columnEnds.push(itemVisualEnd);
+      } else {
+        columnEnds[col] = itemVisualEnd;
+      }
+      return { item, col };
+    });
+    const columns = columnEnds.length;
+    for (const { item, col } of assigned) {
+      result.push({
+        event: item.event,
+        topMinutes: item.topMinutes,
+        heightMinutes: item.heightMinutes,
+        column: col,
+        columns,
+      });
+    }
+    cluster = [];
+    clusterEnd = -1;
+  };
+
+  for (const item of placed) {
+    const visualEnd = item.topMinutes + item.heightMinutes;
+    if (cluster.length > 0 && item.topMinutes >= clusterEnd) {
+      // No overlap with anything still open → previous cluster is closed.
+      flush();
+    }
+    cluster.push(item);
+    clusterEnd = Math.max(clusterEnd, visualEnd);
+  }
+  flush();
+
+  return result;
+}

package/src/calendar/month_view.tsx

@@ -0,0 +1,159 @@
+import { useMemo } from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import { Text } from "../text";
+import { colors } from "../colors";
+import { packEventLanes } from "./layout";
+import { daysInView, isSameMonth, isToday, weekdayShort } from "./dates";
+import type { CalendarEvent, Weekday } from "./types";
+
+const LANE_H = 19;
+const LANE_GAP = 2;
+const MAX_LANES = 3; // visible event lanes per week before "+N more"
+
+export interface MonthViewProps<T = unknown> {
+  date: Date;
+  events: CalendarEvent<T>[];
+  weekStartsOn?: Weekday;
+  locale?: string;
+  /** Overflow chip label, e.g. (3) => "+3 more". Defaults to English. */
+  moreLabel?: (count: number) => string;
+  onEventPress?: (event: CalendarEvent<T>) => void;
+  onDayPress?: (day: Date) => void;
+}
+
+export function MonthView<T = unknown>(props: MonthViewProps<T>) {
+  const { date, events, weekStartsOn = 1, locale, moreLabel = (n) => `+${n} more`, onEventPress, onDayPress } = props;
+  const days = useMemo(() => daysInView("month", date, weekStartsOn), [date, weekStartsOn]);
+  const weeks = useMemo(() => Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)), [days]);
+  const weekdayLabels = useMemo(() => days.slice(0, 7).map((d) => weekdayShort(d, locale)), [days, locale]);
+  const now = new Date();
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.weekdayHeader}>
+        {weekdayLabels.map((label, i) => (
+          <View key={i} style={styles.weekdayCell}>
+            <Text size="xs" color="muted">{label.toUpperCase()}</Text>
+          </View>
+        ))}
+      </View>
+
+      {weeks.map((weekDays, w) => {
+        const { bars } = packEventLanes(events, weekDays[0], 7);
+        const visible = bars.filter((b) => b.lane < MAX_LANES);
+        const overflow = Array.from({ length: 7 }, () => 0);
+        for (const b of bars) {
+          if (b.lane >= MAX_LANES) {
+            for (let c = b.startCol; c < b.startCol + b.span && c < 7; c++) overflow[c]++;
+          }
+        }
+
+        return (
+          <View key={w} style={styles.weekRow}>
+            {/* Date numbers */}
+            <View style={styles.dateRow}>
+              {weekDays.map((day) => {
+                const inMonth = isSameMonth(day, date);
+                const today = isToday(day, now);
+                return (
+                  <Pressable
+                    key={day.toISOString()}
+                    onPress={onDayPress ? () => onDayPress(day) : undefined}
+                    accessibilityRole={onDayPress ? "button" : undefined}
+                    style={styles.dateCell}
+                  >
+                    <View style={[styles.dateBadge, today && { backgroundColor: colors.teal[600] }]}>
+                      <Text
+                        size="xs"
+                        weight={today ? "semibold" : "regular"}
+                        style={{ color: today ? colors.white : inMonth ? colors.zinc[800] : colors.zinc[400] }}
+                      >
+                        {day.getDate()}
+                      </Text>
+                    </View>
+                  </Pressable>
+                );
+              })}
+            </View>
+
+            {/* Event lanes */}
+            <View style={styles.laneArea}>
+              {weekDays.map((_, i) =>
+                i === 0 ? null : (
+                  <View
+                    key={i}
+                    style={{ position: "absolute", left: `${(i / 7) * 100}%`, top: -2, bottom: 0, borderLeftWidth: 1, borderLeftColor: colors.zinc[100] }}
+                  />
+                ),
+              )}
+              {visible.map((bar) => {
+                const accent = bar.event.color || colors.teal[600];
+                const banner = bar.span > 1 || !!bar.event.allDay;
+                return (
+                  <Pressable
+                    key={bar.event.id}
+                    onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
+                    accessibilityRole={onEventPress ? "button" : undefined}
+                    accessibilityLabel={bar.event.title}
+                    style={{
+                      position: "absolute",
+                      top: bar.lane * (LANE_H + LANE_GAP),
+                      height: LANE_H,
+                      left: `${(bar.startCol / 7) * 100}%`,
+                      width: `${(bar.span / 7) * 100}%`,
+                      paddingHorizontal: 2,
+                    }}
+                  >
+                    <View
+                      style={{
+                        flex: 1,
+                        borderRadius: 4,
+                        backgroundColor: banner ? accent : "transparent",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        paddingHorizontal: 5,
+                        gap: 5,
+                      }}
+                    >
+                      {!banner ? <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: accent }} /> : null}
+                      <Text
+                        size="xs"
+                        weight={banner ? "medium" : "regular"}
+                        numberOfLines={1}
+                        style={{ color: banner ? colors.white : colors.zinc[700], flex: 1 }}
+                      >
+                        {bar.event.title}
+                      </Text>
+                    </View>
+                  </Pressable>
+                );
+              })}
+              {weekDays.map((day, col) =>
+                overflow[col] > 0 ? (
+                  <Pressable
+                    key={`o${col}`}
+                    onPress={onDayPress ? () => onDayPress(day) : undefined}
+                    style={{ position: "absolute", top: MAX_LANES * (LANE_H + LANE_GAP), left: `${(col / 7) * 100}%`, width: `${100 / 7}%`, paddingHorizontal: 6 }}
+                  >
+                    <Text size="xs" color="muted">{moreLabel(overflow[col])}</Text>
+                  </Pressable>
+                ) : null,
+              )}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.white },
+  weekdayHeader: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 6 },
+  weekdayCell: { flex: 1, alignItems: "center" },
+  weekRow: { flex: 1, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] },
+  dateRow: { flexDirection: "row", paddingTop: 4 },
+  dateCell: { flex: 1, alignItems: "center" },
+  dateBadge: { minWidth: 22, height: 22, borderRadius: 11, alignItems: "center", justifyContent: "center", paddingHorizontal: 4 },
+  laneArea: { flex: 1, position: "relative", marginTop: 2 },
+});

package/src/calendar/time_grid_view.tsx

@@ -0,0 +1,263 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { View, ScrollView, Pressable, StyleSheet, Text as RNText } from "react-native";
+import { Text } from "../text";
+import { colors } from "../colors";
+import { layoutDayColumns, packEventLanes } from "./layout";
+import {
+  daysInView,
+  formatTime,
+  hourLabel,
+  isSameDay,
+  isToday,
+  minutesSinceMidnight,
+  startOfDay,
+  weekdayShort,
+} from "./dates";
+import type { CalendarEvent, Weekday } from "./types";
+
+const HOUR_HEIGHT = 44;
+const PX_PER_MIN = HOUR_HEIGHT / 60;
+const GRID_HEIGHT = 24 * HOUR_HEIGHT;
+const GUTTER = 56;
+const ALLDAY_LANE_H = 24;
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const COL_GAP = 2;
+
+export interface TimeGridViewProps<T = unknown> {
+  mode: "week" | "day";
+  date: Date;
+  events: CalendarEvent<T>[];
+  weekStartsOn?: Weekday;
+  locale?: string;
+  /** Hour to scroll to on mount. Default: an hour before now (clamped). */
+  scrollToHour?: number;
+  /** All-day lane label; defaults to English ("all-day"). */
+  allDayLabel?: string;
+  onEventPress?: (event: CalendarEvent<T>) => void;
+}
+
+function EventBlock<T>({
+  event,
+  top,
+  height,
+  leftPct,
+  widthPct,
+  onPress,
+  locale,
+}: {
+  event: CalendarEvent<T>;
+  top: number;
+  height: number;
+  leftPct: number;
+  widthPct: number;
+  onPress?: (e: CalendarEvent<T>) => void;
+  locale?: string;
+}) {
+  const accent = event.color || colors.teal[600];
+  const compact = height < 34;
+  return (
+    <Pressable
+      onPress={onPress ? () => onPress(event) : undefined}
+      accessibilityRole={onPress ? "button" : undefined}
+      accessibilityLabel={event.title}
+      style={{
+        position: "absolute",
+        top,
+        height: Math.max(height - 1, 14),
+        left: `${leftPct}%`,
+        width: `${widthPct}%`,
+        paddingHorizontal: COL_GAP,
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          borderRadius: 6,
+          backgroundColor: accent + "1f",
+          borderLeftWidth: 3,
+          borderLeftColor: accent,
+          paddingHorizontal: 6,
+          paddingVertical: compact ? 1 : 3,
+          overflow: "hidden",
+        }}
+      >
+        <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.zinc[800] }}>
+          {event.title}
+        </Text>
+        {!compact ? (
+          <Text size="xs" numberOfLines={1} style={{ color: colors.zinc[500] }}>
+            {formatTime(event.start, locale)}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+export function TimeGridView<T = unknown>(props: TimeGridViewProps<T>) {
+  const { mode, date, events, weekStartsOn = 1, locale, onEventPress } = props;
+  const days = useMemo(
+    () => daysInView(mode, date, weekStartsOn),
+    [mode, date, weekStartsOn],
+  );
+
+  // Live now-indicator: tick each minute.
+  const [now, setNow] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 60_000);
+    return () => clearInterval(id);
+  }, []);
+
+  const scrollRef = useRef<ScrollView>(null);
+  useEffect(() => {
+    const hour = props.scrollToHour ?? Math.max(0, now.getHours() - 1);
+    const id = setTimeout(() => scrollRef.current?.scrollTo({ y: hour * HOUR_HEIGHT, animated: false }), 0);
+    return () => clearTimeout(id);
+    // Only on mount / mode change — not every minute.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode]);
+
+  const { timedByDay, allDay } = useMemo(() => {
+    const timed: CalendarEvent<T>[] = [];
+    const banner: CalendarEvent<T>[] = [];
+    for (const e of events) {
+      const multiDay = e.end ? !isSameDay(e.start, e.end) : false;
+      if (e.allDay || multiDay) banner.push(e);
+      else timed.push(e);
+    }
+    const byDay = days.map((day) =>
+      timed.filter((e) => {
+        const s = startOfDay(e.start);
+        return s.getTime() === day.getTime();
+      }),
+    );
+    return { timedByDay: byDay, allDay: banner };
+  }, [events, days]);
+
+  const allDayPacked = useMemo(() => packEventLanes(allDay, days[0], days.length), [allDay, days]);
+
+  return (
+    <View style={styles.root}>
+      {/* Header: day columns */}
+      <View style={styles.headerRow}>
+        <View style={{ width: GUTTER }} />
+        {days.map((day) => {
+          const today = isToday(day, now);
+          return (
+            <View key={day.toISOString()} style={styles.headerCell}>
+              <Text size="xs" style={{ color: today ? colors.teal[600] : colors.zinc[500] }}>
+                {weekdayShort(day, locale).toUpperCase()}
+              </Text>
+              <View style={[styles.dateBadge, today && { backgroundColor: colors.teal[600] }]}>
+                <Text size="sm" weight={today ? "semibold" : "medium"} style={{ color: today ? colors.white : colors.zinc[800] }}>
+                  {day.getDate()}
+                </Text>
+              </View>
+            </View>
+          );
+        })}
+      </View>
+
+      {/* All-day banner row */}
+      {allDayPacked.lanes > 0 ? (
+        <View style={[styles.allDayRow, { height: allDayPacked.lanes * (ALLDAY_LANE_H + 2) + 6 }]}>
+          <View style={{ width: GUTTER, justifyContent: "center" }}>
+            <Text size="xs" style={{ color: colors.zinc[400], textAlign: "right", paddingRight: 6 }}>
+              {props.allDayLabel ?? "all-day"}
+            </Text>
+          </View>
+          <View style={{ flex: 1 }}>
+            {allDayPacked.bars.map((bar) => {
+              const accent = bar.event.color || colors.teal[600];
+              return (
+                <Pressable
+                  key={bar.event.id}
+                  onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
+                  accessibilityRole={onEventPress ? "button" : undefined}
+                  accessibilityLabel={bar.event.title}
+                  style={{
+                    position: "absolute",
+                    top: bar.lane * (ALLDAY_LANE_H + 2) + 3,
+                    height: ALLDAY_LANE_H,
+                    left: `${(bar.startCol / days.length) * 100}%`,
+                    width: `${(bar.span / days.length) * 100}%`,
+                    paddingHorizontal: COL_GAP,
+                  }}
+                >
+                  <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8 }}>
+                    <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>
+                      {bar.event.title}
+                    </Text>
+                  </View>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      ) : null}
+
+      {/* Scrollable time grid */}
+      <ScrollView ref={scrollRef} style={{ flex: 1 }} showsVerticalScrollIndicator>
+        <View style={{ flexDirection: "row", height: GRID_HEIGHT }}>
+          {/* Hour gutter */}
+          <View style={{ width: GUTTER }}>
+            {HOURS.map((h) =>
+              h === 0 ? null : (
+                <RNText
+                  key={h}
+                  style={{
+                    position: "absolute",
+                    top: h * HOUR_HEIGHT - 7,
+                    right: 6,
+                    fontSize: 11,
+                    color: colors.zinc[400],
+                  }}
+                >
+                  {hourLabel(h)}
+                </RNText>
+              ),
+            )}
+          </View>
+          {/* Day columns */}
+          {days.map((day, dayIdx) => {
+            const placed = layoutDayColumns(day, timedByDay[dayIdx]);
+            const today = isToday(day, now);
+            return (
+              <View key={day.toISOString()} style={styles.dayColumn}>
+                {HOURS.map((h) => (
+                  <View key={h} style={{ position: "absolute", top: h * HOUR_HEIGHT, left: 0, right: 0, borderTopWidth: 1, borderTopColor: colors.zinc[100] }} />
+                ))}
+                {placed.map((c) => (
+                  <EventBlock
+                    key={c.event.id}
+                    event={c.event}
+                    top={c.topMinutes * PX_PER_MIN}
+                    height={c.heightMinutes * PX_PER_MIN}
+                    leftPct={(c.column / c.columns) * 100}
+                    widthPct={(1 / c.columns) * 100}
+                    onPress={onEventPress}
+                    locale={locale}
+                  />
+                ))}
+                {today ? (
+                  <View style={{ position: "absolute", top: minutesSinceMidnight(now) * PX_PER_MIN, left: 0, right: 0, height: 2, backgroundColor: colors.red[500] }}>
+                    <View style={{ position: "absolute", left: -4, top: -3, width: 8, height: 8, borderRadius: 4, backgroundColor: colors.red[500] }} />
+                  </View>
+                ) : null}
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.white },
+  headerRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 6 },
+  headerCell: { flex: 1, alignItems: "center", gap: 3 },
+  dateBadge: { minWidth: 26, height: 26, borderRadius: 13, alignItems: "center", justifyContent: "center", paddingHorizontal: 4 },
+  allDayRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 3 },
+  dayColumn: { flex: 1, borderLeftWidth: 1, borderLeftColor: colors.zinc[100] },
+});

package/src/calendar/types.ts

@@ -0,0 +1,67 @@
+/**
+ * Calendar primitive — data model. Mirrors the minimum shape every calendar API
+ * converges on ({title, start, end}) plus the layered extras (all-day, color).
+ * `data` carries the consumer's row so render/press callbacks stay typed.
+ */
+export interface CalendarEvent<T = unknown> {
+  id: string;
+  title: string;
+  /** Event start (local time). For an all-day event, the day it begins. */
+  start: Date;
+  /** Exclusive end. Null/undefined → a zero-length point (treated as 30 min in the time grid). */
+  end?: Date | null;
+  /** All-day / multi-day banner event (rendered in the all-day row, not the time grid). */
+  allDay?: boolean;
+  /** Hex or design-token color for the event chip. */
+  color?: string | null;
+  data?: T;
+}
+
+export type CalendarViewMode = "month" | "week" | "day";
+
+/**
+ * User-facing chrome strings. Primitives default to English and take these as a
+ * prop — i18n is the consumer's responsibility (see the @lotics/ui convention in
+ * grid/data_grid.tsx). Dates/weekday/month names come from `locale` via Intl and
+ * are not part of this set.
+ */
+export interface CalendarLabels {
+  today: string;
+  month: string;
+  week: string;
+  day: string;
+  previous: string;
+  next: string;
+  allDay: string;
+  /** Month-cell overflow chip, e.g. (3) => "+3 more". */
+  more: (count: number) => string;
+}
+
+export const DEFAULT_CALENDAR_LABELS: CalendarLabels = {
+  today: "Today",
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  previous: "Previous",
+  next: "Next",
+  allDay: "all-day",
+  more: (n) => `+${n} more`,
+};
+
+/** 0 = Sunday … 6 = Saturday. */
+export type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+/**
+ * Geometry produced by the overlap layout for one timed event: which column it
+ * occupies and how many columns its overlap cluster spans. width = 1/columns,
+ * left = column/columns — concurrent events render side-by-side, FullCalendar-style.
+ */
+export interface EventColumn<T = unknown> {
+  event: CalendarEvent<T>;
+  /** Minutes from midnight of the grid day (clamped to [0, 1440]). */
+  topMinutes: number;
+  /** Height in minutes (>= a floor so very short events stay tappable). */
+  heightMinutes: number;
+  column: number;
+  columns: number;
+}

package/src/checkbox_input.tsx

@@ -2,6 +2,11 @@ import { useCallback } from "react";
 import { Pressable } from "react-native";
 import { Checkbox } from "./checkbox";
 interface CheckboxInputProps {
+  /**
+   * Accessible name. Required because an unlabelled checkbox only announces
+   * its state, leaving the user with no idea what is being checked.
+   */
+  accessibilityLabel: string;
   checked: boolean;
   onChange?: (checked: boolean) => void;
   disabled?: boolean;
@@ -10,7 +15,7 @@ interface CheckboxInputProps {
 }
 
 export function CheckboxInput(props: CheckboxInputProps) {
-  const { indeterminate, checked, onChange, disabled, testID } = props;
+  const { accessibilityLabel, indeterminate, checked, onChange, disabled, testID } = props;
 
   const handlePress = useCallback(() => {
     if (!disabled) {
@@ -24,8 +29,9 @@ export function CheckboxInput(props: CheckboxInputProps) {
       onPress={handlePress}
       disabled={disabled}
       style={{ opacity: disabled ? 0.5 : 1 }}
-      role="checkbox"
-      aria-checked={checked}
+      accessibilityRole="checkbox"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ checked: indeterminate ? "mixed" : checked, disabled: !!disabled }}
     >
       <Checkbox checked={checked} indeterminate={indeterminate} />
     </Pressable>