@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Switch/README.md

@@ -0,0 +1,5 @@
+# Switch
+
+Switch applies a setting immediately, with no save step.
+
+- Use Checkbox inside forms that save; use Switch for settings that apply at once.

package/src/SyncConflictSheet/README.md

@@ -0,0 +1,3 @@
+# SyncConflictSheet
+
+SyncConflictSheet lets a person choose between their offline value and the server value for one field; nothing is silently lost.

package/src/TabBar/README.md

@@ -0,0 +1,7 @@
+# TabBar
+
+TabBar is the five-destination bottom bar for phones: Compass always, Gateway and Atlas below the md breakpoint.
+
+- Destinations and order come from the sitemaps (Section 4.5): Compass Today, Schedule, Scan, Inbox, More, with Scan raised in the center; Gateway Home, Explore, Work, Money, Messages; Atlas Home, Inbox, Search, My Work, Menu.
+- Supervisors get a sixth Compass tab, Crew, only when their role allows it.
+- Targets meet touch-min (48 pt).

package/src/Tabs/README.md

@@ -0,0 +1,6 @@
+# Tabs
+
+Tabs switch between sections of one object, such as project tabs, with an accent underline on the selected tab.
+
+- Optional `count` shows open items in tertiary text.
+- Tab order for projects follows Section 4.5.4 of the build prompt.

package/src/Tag/README.md

@@ -0,0 +1,3 @@
+# Tag
+
+Tag labels a record with a short category; the dot carries tone and the text stays `text-secondary` for contrast.

package/src/TemplateAuth/README.md

@@ -0,0 +1,6 @@
+# TemplateAuth
+
+Auth is the template for sign in, MFA, invite acceptance and passkey setup: a centered 400 px card on the brand background.
+
+- Passwordless first: passkey, Sign in with Apple, Google, magic link. Passwords remain available, never first.
+- Provider buttons (Continue with Google) use the secondary Button at full width, with the catalog label as the accessible name. A provider's mark keeps its own colors on every theme (Google's sign-in branding guidelines), so it is an image file beside the label, never a recolored icon or a color literal (ADR 0036).

package/src/TemplateCollection/README.md

@@ -0,0 +1,6 @@
+# TemplateCollection
+
+Collection is the template for every list, board, timeline, calendar and table: page header with title, view switcher, filter bar and one primary action; a virtualized body; optional side peek.
+
+- View state lives in the query string: `view`, `group`, `sort`, `filter`, `scope`.
+- The switcher offers only views the data supports.

package/src/TemplateDashboard/README.md

@@ -0,0 +1,8 @@
+# TemplateDashboard
+
+Dashboard is the template for Home, report dashboards and the partner console: a header with date range and scope picker, then tiles on the 12-column grid, resizable in grid units.
+
+- Each tile spans whole columns (3 to 12 by default; `minSpan` raises the floor). Below md the grid is one column.
+- With `resize`, a tile's inline-end handle widens or narrows it by drag or by the arrow keys (Home and End jump to the limits); a screen reader hears the new span, and `resize.onChange` receives every span to save. Atlas keeps them in the person's dashboard layout setting.
+- The app supplies the handle and announcement copy, so the library ships no strings for it.
+- Every figure drills through to its records in one click.

package/src/TemplateDocument/README.md

@@ -0,0 +1,5 @@
+# TemplateDocument
+
+Document is the template for SOPs, documents and legal pages: a centered 720 px reading column with an outline sidebar.
+
+- Required acknowledgments sit at the end of the document.

package/src/TemplateGatewayShell/README.md

@@ -0,0 +1,5 @@
+# TemplateGatewayShell
+
+Gateway shell is the template for every Gateway page and token flow: top navigation with the org's or the platform's brand, no sidebar, comfortable density, 14 px base text and the System theme by default.
+
+- Home leads with Up Next, then the feed of things that need the person, each with its action inline.

package/src/TemplateGridEditor/README.md

@@ -0,0 +1,3 @@
+# TemplateGridEditor
+
+Grid editor is the template for spreadsheet-speed editing: a full-width grid with a totals row and pinned columns. Used by Budget, rate cards and the Access Grid.

package/src/TemplateRecord/README.md

@@ -0,0 +1,3 @@
+# TemplateRecord
+
+Record is the template for every record full page and the side peek: title row with key, kind and state; content and activity on the left; properties in a 320 px column on the right; related records below.

package/src/TemplateSettings/README.md

@@ -0,0 +1,5 @@
+# TemplateSettings
+
+Settings is the template for org, personal and project settings: a section list on the left, a centered 640 px form column, and a sticky save bar while there are unsaved changes.
+
+- Every setting shows where its current value comes from (personal, project, team, workspace, organization, platform).

package/src/TemplateSplitView/README.md

@@ -0,0 +1,3 @@
+# TemplateSplitView
+
+Split view keeps a resizable list on the left and the selected record on the right: Inbox, Dispatch board, Advancing submissions, Import review.

package/src/TemplateSystem/README.md

@@ -0,0 +1,5 @@
+# TemplateSystem
+
+System is the template for 404, 403 shown as 404, 500, maintenance, offline and archived org: a centered message, an icon from the set and one primary action.
+
+- A page the person may not see returns 404, never 403, so its existence is not disclosed.

package/src/TemplateWizard/README.md

@@ -0,0 +1,3 @@
+# TemplateWizard
+
+Wizard is the template for multi-step creation: onboarding, import, template apply, white-label setup. A stepper across the top, one step per page, Back and Next, progress saved per step.

package/src/Templates/TemplateAuth.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+import { type TemplateAuthProps } from "./Templates.types.ts";
+
+/** Sign in, MFA, invite acceptance and passkey setup: a centered 400 px card. */
+export function TemplateAuth({ brand, children }: TemplateAuthProps): ReactElement {
+  return (
+    <div data-template="auth" className="grid place-items-center min-h-full p-24 bg-bg-canvas">
+      <div className="flex flex-col gap-24 w-[min(var(--layout-auth),100%)]">
+        {brand ? <div className="flex justify-center">{brand}</div> : null}
+        <div className="flex flex-col gap-16 p-24 bg-bg-raised border border-border-subtle rounded-card">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/Templates/TemplateCollection.tsx

@@ -0,0 +1,35 @@
+import type { ReactElement } from "react";
+import { type TemplateCollectionProps } from "./Templates.types.ts";
+
+/**
+ * Every list, board, timeline, calendar and table. The root (data-template) is the view region of the
+ * shell's view shortcuts (lib/shortcut-targets.ts); Open the filters focuses the filter row unless a
+ * control in the header, such as the filter builder's Add filter, carries data-shortcut="view.filters".
+ */
+export function TemplateCollection({
+  header,
+  filters,
+  children,
+  peek,
+  bulk,
+}: TemplateCollectionProps): ReactElement {
+  return (
+    <div data-template="collection" className="flex flex-col gap-12 min-w-0">
+      {header}
+      {filters ? (
+        <div
+          data-shortcut="view.filters"
+          data-shortcut-focus=""
+          className="flex flex-wrap items-center gap-6"
+        >
+          {filters}
+        </div>
+      ) : null}
+      <div className="min-w-0">{children}</div>
+      {bulk ? (
+        <div className="sticky bottom-16 flex justify-center print:hidden">{bulk}</div>
+      ) : null}
+      {peek}
+    </div>
+  );
+}

package/src/Templates/TemplateDashboard.tsx

@@ -0,0 +1,200 @@
+import {
+  Children,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactElement,
+} from "react";
+import { Direction } from "radix-ui";
+import {
+  type DashboardResize,
+  type DashboardSpans,
+  type DashboardTile,
+  type TemplateDashboardProps,
+} from "./Templates.types.ts";
+
+/** Columns of the dashboard grid (Section 11.6). */
+const COLUMNS = 12;
+const MIN_SPAN = 3;
+
+/** A span kept inside the grid: whole columns from the tile's minimum to the full width. */
+export function clampSpan(span: number, min: number = MIN_SPAN): number {
+  const floor = Math.max(1, Math.min(COLUMNS, Math.round(min)));
+  if (!Number.isFinite(span)) return floor;
+  return Math.max(floor, Math.min(COLUMNS, Math.round(span)));
+}
+
+/** Every tile's span: the saved one when there is one, else its default, each kept inside the grid. */
+export function spansOf(
+  tiles: readonly DashboardTile[],
+  saved: DashboardSpans = {},
+): Record<string, number> {
+  return Object.fromEntries(
+    tiles.map((t) => [t.id, clampSpan(saved[t.id] ?? t.span, t.minSpan ?? MIN_SPAN)]),
+  );
+}
+
+/**
+ * The handle on a tile's inline end: a vertical separator whose value is the span. Arrow keys change
+ * it by one column, Home and End jump to the limits, and a drag snaps to whole columns.
+ */
+function ResizeHandle({
+  tile,
+  span,
+  resize,
+  onSpan,
+  onDone,
+}: {
+  tile: DashboardTile;
+  span: number;
+  resize: DashboardResize;
+  onSpan: (span: number) => void;
+  onDone: () => void;
+}): ReactElement {
+  const dir = Direction.useDirection();
+  const min = clampSpan(tile.minSpan ?? MIN_SPAN, 1);
+  const growKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+  const shrinkKey = growKey === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+
+  const keyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const next =
+      e.key === growKey
+        ? span + 1
+        : e.key === shrinkKey
+          ? span - 1
+          : e.key === "Home"
+            ? min
+            : e.key === "End"
+              ? COLUMNS
+              : null;
+    if (next === null) return;
+    e.preventDefault();
+    const clamped = clampSpan(next, min);
+    if (clamped === span) return;
+    onSpan(clamped);
+    onDone();
+  };
+
+  const pointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const grid = e.currentTarget.parentElement?.parentElement;
+    if (!grid) return;
+    e.preventDefault();
+    const gap = parseFloat(getComputedStyle(grid).columnGap) || 0;
+    // One grid unit: a column and the gap after it.
+    const unit = (grid.clientWidth - (COLUMNS - 1) * gap) / COLUMNS + gap;
+    const start = e.clientX;
+    const startSpan = span;
+    const sign = dir === "rtl" ? -1 : 1;
+    let last = span;
+    const move = (ev: PointerEvent) => {
+      if (unit <= 0) return;
+      const next = clampSpan(startSpan + (sign * (ev.clientX - start)) / unit, min);
+      if (next !== last) {
+        last = next;
+        onSpan(next);
+      }
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      if (last !== startSpan) onDone();
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={resize.label(tile.label)}
+      aria-valuenow={span}
+      aria-valuemin={min}
+      aria-valuemax={COLUMNS}
+      aria-valuetext={resize.describe(tile.label, span)}
+      tabIndex={0}
+      onKeyDown={keyDown}
+      onPointerDown={pointerDown}
+      className="absolute inset-y-8 -end-6 w-(--ui-handle) rounded-full cursor-col-resize touch-none max-md:hidden hover:bg-accent focus-visible:bg-accent"
+    />
+  );
+}
+
+/**
+ * Home, report dashboards and the partner console (Section 11.6): the header with the date range and
+ * scope picker, then tiles on the 12-column grid. Each tile spans whole columns; with `resize`, a
+ * person widens or narrows a tile by dragging its edge or with the arrow keys on its handle, a screen
+ * reader hears the new span, and `resize.onChange` receives every span to save. Below md the grid is
+ * one column, so the handles hide.
+ */
+export function TemplateDashboard({
+  header,
+  controls,
+  tiles,
+  spans,
+  resize,
+  label,
+  children,
+}: TemplateDashboardProps): ReactElement {
+  // Spans changed here since the page rendered; they win over the saved ones until it renders again.
+  const [own, setOwn] = useState<Record<string, number>>({});
+  const [message, setMessage] = useState("");
+  const current = useRef<Record<string, number>>({});
+  const effective = tiles ? spansOf(tiles, { ...spans, ...own }) : {};
+  current.current = effective;
+
+  return (
+    <div data-template="dashboard" className="flex flex-col gap-16 min-w-0">
+      {controls ? (
+        <div className="flex flex-wrap items-start justify-between gap-12">
+          <div className="flex-1 min-w-0">{header}</div>
+          <div className="flex flex-wrap items-center gap-8">{controls}</div>
+        </div>
+      ) : (
+        header
+      )}
+      <div
+        {...(label ? { role: "group", "aria-label": label } : {})}
+        className="grid grid-cols-12 gap-(--layout-gutter-lg)"
+      >
+        {tiles?.map((tile) => {
+          const span = effective[tile.id] ?? tile.span;
+          return (
+            <div
+              key={tile.id}
+              data-tile={tile.id}
+              data-span={span}
+              className="relative flex flex-col min-w-0 col-span-12 md:col-span-(--tile-span) *:flex-1"
+              style={{ "--tile-span": span } as CSSProperties}
+            >
+              {tile.content}
+              {resize ? (
+                <ResizeHandle
+                  tile={tile}
+                  span={span}
+                  resize={resize}
+                  onSpan={(next) => {
+                    current.current = { ...current.current, [tile.id]: next };
+                    setOwn((old) => ({ ...old, [tile.id]: next }));
+                    setMessage(resize.describe(tile.label, next));
+                  }}
+                  onDone={() => resize.onChange({ ...current.current })}
+                />
+              ) : null}
+            </div>
+          );
+        })}
+        {Children.map(children, (child) => (
+          <div className="min-w-0 col-span-12 md:col-span-6 lg:col-span-4">{child}</div>
+        ))}
+      </div>
+      {resize ? (
+        <span aria-live="polite" className="sr-only">
+          {message}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/Templates/TemplateDocument.tsx

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import { type TemplateDocumentProps } from "./Templates.types.ts";
+
+/** SOPs, documents and legal pages: a 720 px reading column beside its outline. */
+export function TemplateDocument({
+  outline,
+  children,
+  acknowledgments,
+}: TemplateDocumentProps): ReactElement {
+  return (
+    <div
+      data-template="document"
+      className="grid grid-cols-[var(--ui-outline)_minmax(0,var(--layout-reading))] max-lg:grid-cols-[minmax(0,1fr)] gap-32"
+    >
+      <div className="max-lg:hidden">{outline}</div>
+      <article className="flex flex-col gap-16 min-w-0 leading-relaxed">
+        {children}
+        {acknowledgments ? (
+          <footer className="pt-16 border-t border-border-subtle">{acknowledgments}</footer>
+        ) : null}
+      </article>
+    </div>
+  );
+}

package/src/Templates/TemplateGatewayShell.tsx

@@ -0,0 +1,36 @@
+import type { ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { type TemplateGatewayShellProps } from "./Templates.types.ts";
+
+/** Every Gateway page: top navigation, no sidebar, comfortable density and 14 px base text. */
+export function TemplateGatewayShell({
+  topNav,
+  aside,
+  children,
+  tabBar,
+}: TemplateGatewayShellProps): ReactElement {
+  return (
+    <div
+      data-template="gateway-shell"
+      className="flex flex-col min-h-full max-md:flex-1 max-md:min-h-0 bg-bg-canvas text-text-14"
+    >
+      <div className="max-md:hidden">{topNav}</div>
+      <main
+        className={cx(
+          "flex-1 p-24 max-md:p-16 min-w-0 max-md:min-h-0 max-md:overflow-y-auto",
+          aside
+            ? "grid grid-cols-[var(--ui-gateway-aside)_minmax(0,1fr)] max-lg:grid-cols-[minmax(0,1fr)] gap-24"
+            : "flex flex-col gap-16",
+        )}
+      >
+        {aside ? <div className="flex flex-col gap-16 min-w-0">{aside}</div> : null}
+        <div className="flex flex-col gap-16 min-w-0">{children}</div>
+      </main>
+      {tabBar ? (
+        <div data-xos-bottom-bar="" className="hidden max-md:block sticky bottom-0 [&_nav]:w-full">
+          {tabBar}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/Templates/TemplateGridEditor.tsx

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { type TemplateGridEditorProps } from "./Templates.types.ts";
+
+/** Spreadsheet-speed editing: a full-width grid under its header. */
+export function TemplateGridEditor({
+  header,
+  children,
+  toolbar,
+}: TemplateGridEditorProps): ReactElement {
+  return (
+    <div data-template="grid-editor" className="flex flex-col gap-12 min-w-0">
+      {header}
+      {toolbar ? <div className="flex flex-wrap items-center gap-8">{toolbar}</div> : null}
+      <div className="min-w-0">{children}</div>
+    </div>
+  );
+}

package/src/Templates/TemplateRecord.tsx

@@ -0,0 +1,31 @@
+import type { ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { type TemplateRecordProps } from "./Templates.types.ts";
+
+/** Every record full page: content and activity beside the 320 px property column. */
+export function TemplateRecord({
+  header,
+  children,
+  properties,
+  related,
+  propertiesLabel,
+}: TemplateRecordProps): ReactElement {
+  return (
+    <article data-template="record" className="flex flex-col gap-16 min-w-0">
+      {header}
+      <div className="grid grid-cols-[minmax(0,1fr)_var(--layout-property-column)] max-lg:grid-cols-[minmax(0,1fr)] gap-24">
+        <div className="flex flex-col gap-16 min-w-0">{children}</div>
+        <aside
+          aria-label={propertiesLabel}
+          className={cx(
+            "min-w-0 ps-20 border-s border-border-subtle",
+            "max-lg:ps-0 max-lg:border-s-0 max-lg:pt-16 max-lg:border-t",
+          )}
+        >
+          {properties}
+        </aside>
+      </div>
+      {related ? <section className="min-w-0">{related}</section> : null}
+    </article>
+  );
+}

package/src/Templates/TemplateSettings.tsx

@@ -0,0 +1,26 @@
+import type { ReactElement } from "react";
+import { type TemplateSettingsProps } from "./Templates.types.ts";
+
+/** Org, personal and project settings: sections beside a centered form column. */
+export function TemplateSettings({
+  sections,
+  children,
+  saveBar,
+}: TemplateSettingsProps): ReactElement {
+  return (
+    <div
+      data-template="settings"
+      className="grid grid-cols-[var(--ui-settings-nav)_minmax(0,var(--layout-form))] max-md:grid-cols-[minmax(0,1fr)] gap-32 max-md:gap-16"
+    >
+      <div className="min-w-0">{sections}</div>
+      <div className="flex flex-col gap-16 min-w-0">
+        {children}
+        {saveBar ? (
+          <div className="sticky bottom-0 flex items-center justify-end gap-8 py-12 bg-bg-canvas border-t border-border-subtle">
+            {saveBar}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/Templates/TemplateSplitView.tsx

@@ -0,0 +1,27 @@
+import type { ReactElement } from "react";
+import { ResizablePanel } from "../Layout/Layout.tsx";
+import { type TemplateSplitViewProps } from "./Templates.types.ts";
+
+/** A resizable list beside the selected record: Inbox, Dispatch, Advancing, Import review. */
+export function TemplateSplitView({
+  list,
+  detail,
+  listWidth = 300,
+  listLabel,
+}: TemplateSplitViewProps): ReactElement {
+  return (
+    <div data-template="split-view" className="flex gap-16 min-w-0 max-lg:flex-col">
+      <div className="max-lg:[&>div]:w-full! max-lg:[&_[role=separator]]:hidden">
+        <ResizablePanel
+          initial={listWidth}
+          min={240}
+          max={480}
+          {...(listLabel ? { label: listLabel } : {})}
+        >
+          {list}
+        </ResizablePanel>
+      </div>
+      <div className="flex-1 min-w-0">{detail}</div>
+    </div>
+  );
+}

package/src/Templates/TemplateSystem.tsx

@@ -0,0 +1,19 @@
+import type { ReactElement } from "react";
+import { Button } from "../Button/Button.tsx";
+import { SystemMessage } from "./TemplateSystemLink.tsx";
+import { type TemplateSystemProps } from "./Templates.types.ts";
+
+/** 404, 500, maintenance, offline and archived org: a centered message and one primary action. */
+export function TemplateSystem({
+  actionLabel,
+  onAction,
+  ...message
+}: TemplateSystemProps): ReactElement {
+  return (
+    <SystemMessage {...message}>
+      <Button variant="primary" onClick={onAction}>
+        {actionLabel}
+      </Button>
+    </SystemMessage>
+  );
+}

package/src/Templates/TemplateSystemLink.tsx

@@ -0,0 +1,55 @@
+import type { ReactElement, ReactNode } from "react";
+import { Icon } from "../Icon/Icon.tsx";
+import { buttonClass } from "../Button/button-class.ts";
+import { type TemplateSystemLinkProps } from "./Templates.types.ts";
+
+/** The System template's centered message, around whatever its one action is. */
+export function SystemMessage({
+  icon,
+  title,
+  sentence,
+  reference,
+  children,
+}: {
+  icon: string;
+  title: string;
+  sentence: string;
+  reference?: string | undefined;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <div
+      data-template="system"
+      className="flex flex-col items-center gap-12 py-48 px-16 text-center"
+    >
+      <span className="text-text-secondary">
+        <Icon name={icon} size={28} />
+      </span>
+      <h1 className="m-0 text-heading-20 font-semibold">{title}</h1>
+      <p className="m-0 max-w-(--layout-auth) text-text-secondary">{sentence}</p>
+      {children}
+      {reference ? (
+        <span className="font-mono text-text-12 text-text-secondary">{reference}</span>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * The System template whose action is a link styled as the primary Button. It uses no hooks or
+ * context, so a server component renders it whole: a not-found boundary built on it sends no
+ * JavaScript, where TemplateSystem's click handler needs a client module (ADR 0027).
+ */
+export function TemplateSystemLink({
+  href,
+  actionLabel,
+  ...message
+}: TemplateSystemLinkProps): ReactElement {
+  return (
+    <SystemMessage {...message}>
+      <a href={href} className={buttonClass("primary")}>
+        {actionLabel}
+      </a>
+    </SystemMessage>
+  );
+}

package/src/Templates/TemplateWizard.tsx

@@ -0,0 +1,43 @@
+import type { ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Stepper } from "../Layout/Layout.tsx";
+import { type TemplateWizardProps } from "./Templates.types.ts";
+
+/** Multi-step creation: a stepper, one step per page, Back and Next. */
+export function TemplateWizard({
+  steps,
+  current,
+  title,
+  children,
+  onBack,
+  onNext,
+  finishLabel,
+  nextDisabled = false,
+}: TemplateWizardProps): ReactElement {
+  const t = useT();
+  const last = current >= steps.length - 1;
+  return (
+    <div
+      data-template="wizard"
+      className="flex flex-col gap-24 w-full max-w-(--layout-form) mx-auto"
+    >
+      <Stepper steps={steps} current={current} />
+      <section className="flex flex-col gap-16">
+        <h1 className="m-0 text-heading-20 font-semibold">{title}</h1>
+        <p className="m-0 text-text-secondary tabular-nums">
+          {t("count.step", { n: current + 1, total: steps.length })}
+        </p>
+        {children}
+      </section>
+      <div className="flex justify-between gap-8">
+        <Button variant="ghost" icon="ChevronLeft" disabled={current === 0} onClick={onBack}>
+          {t("nav.previous")}
+        </Button>
+        <Button variant="primary" disabled={nextDisabled} onClick={onNext}>
+          {last ? (finishLabel ?? t("action.done")) : t("nav.next")}
+        </Button>
+      </div>
+    </div>
+  );
+}