npm - @lotics/ui - Versions diffs - 16.1.0 → 17.0.0 - Mend

@lotics/ui 16.1.0 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/MIGRATION.md +47 -0
package/docs/catalog.md +51 -30
package/docs/composition.md +3 -1
package/docs/data_entry.md +41 -15
package/docs/templates.md +13 -9
package/examples/tpl_item_list.tsx +47 -44
package/examples/tpl_record.tsx +87 -50
package/examples/tpl_task_board.tsx +7 -1
package/package.json +2 -2
package/src/capture_row.tsx +7 -2
package/src/check_circle.tsx +62 -18
package/src/date_picker.tsx +21 -0
package/src/detail_row.tsx +14 -4
package/src/form_date_picker.tsx +3 -1
package/src/form_field.tsx +4 -1
package/src/icon.tsx +2 -0
package/src/inline_edit.tsx +35 -25
package/src/locale.tsx +2 -2
package/src/task.tsx +285 -0
package/src/checklist.tsx +0 -119

package/src/inline_edit.tsx CHANGED Viewed

@@ -90,6 +90,34 @@ export function useInlineEdit<T>(opts: {
   return { editing, draft, setDraft, saving, error, begin, cancel, commit };
 }
+/**
+ * Keyboard TAB-ORDER continuity for any inline editor: when edit mode closes
+ * while its input still holds focus (Enter, Escape, a ✓/✕), the unmount drops
+ * focus to `<body>` and the next Tab would restart from the top of the page —
+ * so `restore` is called to put focus back on the RESTING control.
+ *
+ * Gated on KEYBOARD modality: a POINTER close also drops focus to `<body>`, but
+ * restoring there both steals focus from a mouse user AND — because a bare
+ * `.focus()` scrolls the target into view — jumps the scroll position. A mouse
+ * user has no "next Tab" to preserve. A Tab-away blur-commit leaves focus on the
+ * next field (not `<body>`), so this never steals focus back either.
+ */
+export function useInlineEditFocusRestore(editing: boolean, restore: () => void) {
+  const wasEditing = useRef(editing);
+  useEffect(() => {
+    if (
+      wasEditing.current &&
+      !editing &&
+      typeof document !== "undefined" &&
+      document.activeElement === document.body &&
+      shouldRestoreFocusOnClose(getInteractionModality())
+    ) {
+      restore();
+    }
+    wasEditing.current = editing;
+  }, [editing, restore]);
+}
 /** Which surface an inline editor lives on — the ONE axis that separates a FORM
  *  field from a data-grid CELL:
  *  - `"form"` (default): the zinc-50 chip at rest + a hover-BORDER. THE editability
@@ -243,7 +271,6 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
   const viewRef = useRef<View>(null);
   const suppressedAt = useRef<number | null>(null);
-  const wasEditing = useRef(editing);
   // Keyboard focus opens edit mode immediately; the input's own `autoFocus`
   // then moves focus into it. Pointer focus never lands here (mousedown records
@@ -255,32 +282,15 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     onBegin();
   }, [disabled, onBegin]);
-  // When edit mode closes while its input (or a ✓/✕ button) still holds focus —
-  // Enter, Escape, the buttons — the unmount drops focus to <body> and the next
-  // Tab would restart from the top of the page. Return focus to the view button,
-  // arming the suppression window so the programmatic focus doesn't re-open the
-  // editor it just closed. A Tab-away blur-commit leaves focus on the next field
-  // (not <body>), so this never steals focus back.
-  //
-  // Gate on KEYBOARD modality: this restore exists solely for keyboard Tab-order
-  // continuity. A POINTER close (click ✓/✕, or click away onto non-focusable
-  // space) also drops focus to <body>, but restoring it there both steals focus
-  // from a mouse user AND — because a bare `.focus()` scrolls the target into
-  // view — jumps the scroll position (often to the top of the page). A mouse
-  // user has no "next Tab" to preserve, so skip the restore for pointer closes.
-  useEffect(() => {
-    if (
-      wasEditing.current &&
-      !editing &&
-      typeof document !== "undefined" &&
-      document.activeElement === document.body &&
-      shouldRestoreFocusOnClose(getInteractionModality())
-    ) {
+  // Focus returns to the view button on a keyboard close, arming the suppression
+  // window so the programmatic focus doesn't re-open the editor it just closed.
+  useInlineEditFocusRestore(
+    editing,
+    useCallback(() => {
       suppressedAt.current = Date.now();
       viewRef.current?.focus();
-    }
-    wasEditing.current = editing;
-  }, [editing]);
+    }, []),
+  );
   if (!editing) {
     return (

package/src/locale.tsx CHANGED Viewed

@@ -162,7 +162,7 @@ export const en: LoticsLocale = {
     descending: ", descending",
   },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
-  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date" },
+  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
@@ -260,7 +260,7 @@ export const vi: LoticsLocale = {
     descending: " (giảm dần)",
   },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
-  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ" },
+  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },

package/src/task.tsx ADDED Viewed

@@ -0,0 +1,285 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+/**
+ * The TASK compound — a list of things to be done, at any depth and any layout.
+ *
+ * It replaces `Checklist`/`ChecklistRow`, which was a configuration object: eight slot props,
+ * a `trailing`/`meta` pair that was mutually exclusive BY TYPE so an author had to predict
+ * "wide surface" or "narrow" when writing the JSX, and a `subtasks` array of
+ * `{label, checked}` a child could never outgrow. Every new task layout arrived as another
+ * prop. Composition takes those decisions back:
+ *
+ *   <TaskList fieldsWidth={168}>
+ *     <TaskItem>
+ *       <TaskStatus><CheckCircle …/></TaskStatus>
+ *       <TaskTitle><InlineTextInput variant="cell" struck={done} …/></TaskTitle>
+ *       <TaskFields><InlineDatePicker …/><InlineMemberSelect …/></TaskFields>
+ *       <TaskActions><ActionMenu …/></TaskActions>
+ *       <TaskCaption>Waiting on the signed copy</TaskCaption>
+ *       <TaskDetail>…</TaskDetail>
+ *       <TaskList>…</TaskList>          ← subtasks ARE tasks
+ *     </TaskItem>
+ *   </TaskList>
+ *
+ * Two properties follow from the shape rather than from props:
+ *
+ * **A subtask is a task.** Nesting a `TaskList` inside a `TaskItem` makes the child recursive
+ * by construction, so it carries a due date, a menu, its own children — everything the parent
+ * has. The old array shape made "subtasks need X" a permanent ticket queue.
+ *
+ * **The row reflows on its own.** `TaskTitle` claims a readable minimum width; when the row
+ * cannot seat the title and the fields together, flex-wrap drops `TaskFields` onto its own
+ * line. That is intrinsic — no viewport query, no measurement — so it behaves the same in a
+ * drawer, a split pane and a phone, which a breakpoint cannot.
+ *
+ * **A value and a sentence are different things.** `TaskFields` holds the cells the reader
+ * edits and scans DOWN a column (due, assignee), sized once by the list so they stay a column;
+ * `TaskCaption` holds a sentence ABOUT the row ("Needs: Carrier, Vehicle plate") on its own
+ * line under the title. The first cut of this family merged them, which pushed prose into the
+ * value column where it aligned with nothing.
+ *
+ * There is deliberately no `note` slot. A task's free text is its title, a caption, or detail;
+ * a fourth place to write invited writing it twice.
+ */
+interface TaskListContextValue {
+  /** Width of the leading control column — nested lists and detail blocks indent by it. */
+  controlWidth: number;
+  /** Shared width of every row's field cluster, so the cells form a COLUMN. */
+  fieldsWidth?: number;
+  /** 0 at the root. Any value above 0 means "I am rendered inside a task". */
+  depth: number;
+  density: TaskDensity;
+}
+export type TaskDensity = "comfortable" | "dense";
+const TaskListContext = createContext<TaskListContextValue>({
+  controlWidth: 20,
+  depth: 0,
+  density: "comfortable",
+});
+/** Below this a title is unreadable, so the fields take their own line instead. */
+const TITLE_MIN_WIDTH = 180;
+/** The minimum comfortable tap target — a finger, not a pointer. */
+const TOUCH_TARGET = 44;
+/** A pointer-driven register trades the target for rows on screen. */
+const DENSE_ROW = 32;
+/** Horizontal rhythm between the row's slots. */
+const ROW_GAP = 12;
+/**
+ * The inline controls rest inside 8px of horizontal padding, so a `variant="cell"` title's
+ * TEXT starts 8px inside its box. Everything that hangs beneath a row — the caption, the
+ * detail, a nested list — adds the same inset, so it lines up with the words rather than with
+ * the editor's invisible box. A plain-`Text` title should carry it too (`TASK_TEXT_INSET`),
+ * or its caption will sit 8px to its right.
+ */
+export const TASK_TEXT_INSET = 8;
+export interface TaskListProps {
+  children: ReactNode;
+  /**
+   * Width of every row's leading control — `CheckCircle` 20 (the default), `CheckboxInput`
+   * 24. Detail blocks and nested lists indent by it so they sit on the title's text edge.
+   * Set on the ROOT list; a nested list inherits it.
+   */
+  controlWidth?: number;
+  /**
+   * `comfortable` (the default) gives every row a 44px minimum so a finger can hit it;
+   * `dense` drops to 32px for a pointer-driven register. Density belongs to the SURFACE, so
+   * it is set once here and inherited by nested lists.
+   */
+  density?: TaskDensity;
+  /**
+   * Fixed width for every row's `TaskFields`, so the due/assignee cells line up as a COLUMN
+   * down the list instead of drifting with each title's length. Set it once here — a row
+   * with fewer cells still reserves the width, which is what keeps the column straight.
+   * Omit it and each cluster hugs its own content (fine for a single row, jittery in a list).
+   */
+  fieldsWidth?: number;
+  accessibilityLabel?: string;
+}
+/**
+ * The list — owns geometry (control column, indent, density) for every descendant. Nest one
+ * inside a `TaskItem` and its rows become that task's subtasks, indented one column.
+ */
+export function TaskList(props: TaskListProps) {
+  const parent = useContext(TaskListContext);
+  const isNested = parent.depth > 0;
+  const controlWidth = props.controlWidth ?? parent.controlWidth;
+  const density = props.density ?? parent.density;
+  const fieldsWidth = props.fieldsWidth ?? parent.fieldsWidth;
+  return (
+    <TaskListContext.Provider value={{ controlWidth, depth: parent.depth + 1, density, fieldsWidth }}>
+      <View
+        style={[
+          styles.list,
+          // A nested list is a child-step list: indent it to the parent's title text edge.
+          isNested && { flexBasis: "100%", marginTop: 2, marginBottom: 2 },
+        ]}
+        role="list"
+        accessibilityLabel={props.accessibilityLabel}
+      >
+        {props.children}
+      </View>
+    </TaskListContext.Provider>
+  );
+}
+/**
+ * One task. Its children lay out as a WRAPPING row — `TaskStatus`, `TaskTitle`, `TaskFields`,
+ * `TaskActions` — while `TaskDetail` and a nested `TaskList` are full-width and fall beneath
+ * it. Order in JSX is order on screen; nothing inspects child types.
+ */
+export function TaskItem(props: { children: ReactNode }) {
+  const { controlWidth } = useContext(TaskListContext);
+  // The control is taken OUT of the wrapping flow and pinned to the left gutter, so the row's
+  // content — title, fields, caption, detail, a nested list — all share ONE column. Anything
+  // that wraps therefore lands under the title instead of under the checkbox, which is what
+  // made a wrapped field cluster read as a row of its own, belonging to nothing.
+  //
+  // The minimum tap target is the ROW's, not each slot's: boxing every slot at 44px centred
+  // the title in it and pushed the caption ~13px below the words it describes.
+  return (
+    <View
+      style={[styles.item, { minHeight: useRowMinHeight(), paddingLeft: controlWidth + ROW_GAP }]}
+      role="listitem"
+    >
+      {props.children}
+    </View>
+  );
+}
+function useRowMinHeight(): number {
+  const { density } = useContext(TaskListContext);
+  return density === "dense" ? DENSE_ROW : TOUCH_TARGET;
+}
+/** The leading control — a `CheckCircle`, a `CheckboxInput`, a status dot. Pinned to the
+ *  list's control column so every title starts on the same edge. */
+export function TaskStatus(props: { children: ReactNode }) {
+  const { controlWidth } = useContext(TaskListContext);
+  // Pinned to the gutter and sized to the FIRST line, so it stays beside the title however
+  // tall the row grows underneath it.
+  return (
+    <View style={[styles.status, { width: controlWidth, height: useRowMinHeight() }]}>
+      {props.children}
+    </View>
+  );
+}
+/** The task's identity — plain `Text` or an inline editor. Takes the row's spare width and
+ *  claims a readable minimum, which is what makes `TaskFields` wrap rather than crush it. */
+export function TaskTitle(props: { children: ReactNode }) {
+  return (
+    <View style={styles.title}>{props.children}</View>
+  );
+}
+/**
+ * The descriptor cluster — due date, assignee, chips, counts. Sits inline after the title
+ * while the row has room and takes its own line when it does not.
+ *
+ * Replaces the old `trailing` (wide) / `meta` (narrow) pair, which made the author pick one
+ * at authoring time and be wrong on the other surface.
+ */
+export function TaskFields(props: { children: ReactNode }) {
+  const { fieldsWidth } = useContext(TaskListContext);
+  return (
+    <View
+      style={[
+        styles.fields,
+        // A reserved width is what makes a COLUMN: every row gives its cells the same box,
+        // so a row missing a due date does not pull its assignee leftward out of line.
+        fieldsWidth !== undefined && { width: fieldsWidth },
+      ]}
+    >
+      {props.children}
+    </View>
+  );
+}
+/**
+ * A second line under the title — what this task's STATE is, in words: "Needs: Carrier,
+ * Vehicle plate", "Waiting on the yard", "3 of 5 papers received".
+ *
+ * Deliberately NOT part of `TaskFields`. A field is a VALUE the reader edits and scans down a
+ * column; a caption is a SENTENCE about this row. Merging them (as the first cut of this
+ * family did) pushes prose into the value column, where it aligns with nothing and squeezes
+ * the cells. It always takes its own line, on the title's text edge — never inline, never
+ * behind a disclosure, because a state the reader must open to see is a state they will miss.
+ */
+export function TaskCaption(props: { children: ReactNode }) {
+  return (
+    <View style={[styles.caption, { paddingLeft: TASK_TEXT_INSET }]}>{props.children}</View>
+  );
+}
+/** The row's actions — an `ActionMenu`, an `IconButton`. A destructive item belongs behind
+ *  the menu, never as a bare ✕ on the row, so a stray tap cannot destroy a task. */
+export function TaskActions(props: { children: ReactNode }) {
+  return (
+    <View style={styles.actions}>{props.children}</View>
+  );
+}
+/** A block beneath the row, indented to the title's text edge — an inline editor, a
+ *  drill-down, the task's own fields. Render it only while open. */
+export function TaskDetail(props: { children: ReactNode }) {
+  return (
+    <View style={[styles.detail, { marginLeft: TASK_TEXT_INSET }]}>{props.children}</View>
+  );
+}
+const styles = StyleSheet.create({
+  // No gap: every row already carries the density's min-height, so the rhythm is the ROW,
+  // not the space between rows. A gap on top of it made the list read as loose pairs.
+  list: { gap: 0 },
+  item: {
+    position: "relative",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    // `align-items` centres within a LINE; with `flex-wrap: wrap` it is `align-content` that
+    // places the lines in the box. Without it a short row (a plain-text subtask, 20px) sat at
+    // the top of its 44px target while the gutter control centred — the control read as
+    // belonging to the row below.
+    alignContent: "center",
+    columnGap: ROW_GAP,
+    // Lines inside ONE task are the same thought (title → caption → detail), so they sit
+    // tight; `gap` would have applied the 12px column rhythm vertically too.
+    rowGap: 2,
+  },
+  status: { position: "absolute", left: 0, top: 0, justifyContent: "center", alignItems: "flex-start" },
+  // flexBasis at the minimum (not 0) is what drives the wrap: once title + fields cannot
+  // both fit, the fields — which never shrink — are pushed to the next line.
+  title: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: TITLE_MIN_WIDTH,
+    minWidth: TITLE_MIN_WIDTH,
+    justifyContent: "center",
+  },
+  fields: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    // NOWRAP: the cluster is a ROW of cells, and it wraps as a UNIT under the title. Letting
+    // it wrap internally split the cells across two lines with the ⋯ stranded between them.
+    // Too little room means the cells compress, never that they stack.
+    flexWrap: "nowrap",
+    gap: 8,
+    // Shrinkable, so a narrow container compresses the cells instead of shoving the ⋯ onto a
+    // line of its own. `fieldsWidth` still pins the column when a list wants one.
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  // `flexBasis: "100%"` is the whole trick: the caption always breaks to its own line.
+  caption: { flexBasis: "100%" },
+  actions: { flexGrow: 0, flexShrink: 0, justifyContent: "center" },
+  detail: { flexBasis: "100%", borderLeftWidth: 1, borderLeftColor: colors.border, paddingLeft: ROW_GAP },
+});

package/src/checklist.tsx DELETED Viewed

@@ -1,119 +0,0 @@
-import { createContext, useContext, type ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
-import { ActionMenu, type ActionMenuItem } from "./action_menu";
-// The record-scoped CHECKLIST — the compound that owns the list's GEOMETRY
-// (row height, control/title alignment, the meta/expansion indent, one
-// trailing column width) while the CONTENT stays composed: tasks (a
-// `CheckCircle` in `control`, a struck `InlineTextInput` title) and PICKER
-// rows (a `CheckboxInput` in `control` — set `controlWidth={24}` — with a
-// readiness `meta` line and a fill editor in `expansion`) are the same
-// anatomy. `menu` carries the row's ⋯ options (Delete lives BEHIND the menu
-// — indirection that prevents
-// accidental destructive taps). Suggested tasks are NOT rows: offer the record
-// type's commons as `SuggestionChip`s under the list (tap = materialize,
-// ✕ = dismiss) — a pill can't be mistaken for a task. `CaptureRow` closes the
-// list as its add affordance. There is deliberately NO monolithic Task
-// component — richer task-management rows (expand affordances, tag/clip meta,
-// board cards) compose their own anatomy directly.
-//
-//   <Checklist trailingWidth={140}>
-//     <ChecklistRow control={<CheckCircle …/>} trailing={<InlineMemberSelect …/>}
-//                   menu={{ items: [{ key: "delete", label: "Delete task", danger: true, … }],
-//                           accessibilityLabel: "Task options: …" }}>
-//       <InlineTextInput variant="cell" struck={done} … />
-//     </ChecklistRow>
-//     <SuggestionChip label="Verify the tax ID" onAdd={materialize} onDismiss={dismiss} />
-//     <CaptureRow … />
-//   </Checklist>
-interface ChecklistContextValue {
-  trailingWidth?: number;
-  controlWidth: number;
-}
-const ChecklistContext = createContext<ChecklistContextValue>({ controlWidth: 20 });
-export interface ChecklistProps {
-  /** Fixed width of every row's trailing cell (an assignee select) — set it
-   *  once so the column lines up; omit when rows carry no trailing. */
-  trailingWidth?: number;
-  /** Width of every row's leading control — `CheckCircle` 20 (the default),
-   *  `CheckboxInput` 24. The `meta`/`expansion` indent derives from it, so
-   *  the second line always sits on the title's text edge. */
-  controlWidth?: number;
-  children: ReactNode;
-}
-export function Checklist(props: ChecklistProps) {
-  const { trailingWidth, controlWidth = 20, children } = props;
-  return (
-    <ChecklistContext.Provider value={{ trailingWidth, controlWidth }}>
-      <View style={styles.list}>{children}</View>
-    </ChecklistContext.Provider>
-  );
-}
-interface ChecklistRowBaseProps {
-  /** The leading toggle — a `CheckCircle` (omit `onChange` for a read-only ring). */
-  control: ReactNode;
-  /** The title — a struck transparent `InlineTextInput`, or plain `Text`. */
-  children: ReactNode;
-  /** The row's ⋯ options menu (destructive items last, `danger: true`) —
-   *  Delete lives HERE, never as a bare ✕ on the row, so a stray tap can't
-   *  destroy a task. Name the task in the label ("Task options: Book the
-   *  carrier"). The ⋯ column aligns only when every row in the list carries
-   *  a menu — keep its presence uniform per list. */
-  menu?: { items: ActionMenuItem[]; accessibilityLabel: string };
-  /** A BLOCK slot under the row (below `meta`), indented to the title's text
-   *  edge — a transient inline fill editor, a drill-down. Render it only
-   *  while open; the list's geometry (the indent) is owned here. */
-  expansion?: ReactNode;
-}
-/** `trailing` (wide surfaces) and `meta` (narrow) are exclusive by type. */
-export type ChecklistRowProps = ChecklistRowBaseProps &
-  (
-    | {
-        /** The trailing cell (an `InlineMemberSelect`); sized by the list's `trailingWidth`. */
-        trailing?: ReactNode;
-        meta?: never;
-      }
-    | {
-        /** SECOND line under the title (indented past the ring) for a NARROW
-         *  surface — a drawer or popover checklist: put the assignee/due
-         *  editors here so the title keeps the full width and stays readable. */
-        meta?: ReactNode;
-        trailing?: never;
-      }
-  );
-/** One checklist line: control · title (flex) · the aligned trailing cell · ⋯,
- *  with an optional indented `meta` line below for narrow surfaces and an
- *  optional `expansion` block under that (both sit on the title's text edge). */
-export function ChecklistRow(props: ChecklistRowProps) {
-  const { control, children, trailing, menu, meta, expansion } = props;
-  const { trailingWidth, controlWidth } = useContext(ChecklistContext);
-  // Indent past the control + the row gap so meta/expansion align with the title.
-  const indent = controlWidth + 12;
-  return (
-    <View>
-      <View style={styles.row}>
-        {control}
-        <View style={styles.title}>{children}</View>
-        {trailing != null ? <View style={trailingWidth != null ? { width: trailingWidth } : null}>{trailing}</View> : null}
-        {menu != null ? <ActionMenu items={menu.items} accessibilityLabel={menu.accessibilityLabel} /> : null}
-      </View>
-      {meta != null ? <View style={[styles.meta, { paddingLeft: indent }]}>{meta}</View> : null}
-      {expansion != null ? <View style={[styles.expansion, { paddingLeft: indent }]}>{expansion}</View> : null}
-    </View>
-  );
-}
-const styles = StyleSheet.create({
-  list: { gap: 4 },
-  row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 32 },
-  title: { flex: 1 },
-  meta: { paddingBottom: 4, flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 2 },
-  expansion: { paddingTop: 2, paddingBottom: 6 },
-});