@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/DataTable/DataTableResizer.tsx

@@ -0,0 +1,72 @@
+import { useLayoutEffect, type RefObject } from "react";
+import {
+  columnResizingFeature,
+  columnSizingFeature,
+  tableFeatures,
+  useTable,
+  type ColumnSizingState,
+  type OnChangeFn,
+  type columnResizingState,
+} from "@tanstack/react-table";
+
+/** Starts a pointer resize of one column from its handle's mousedown or touchstart. */
+export type StartResize = (
+  columnId: string,
+  event: { type: string; clientX?: number; touches?: ArrayLike<{ clientX: number }> },
+) => void;
+
+const features = tableFeatures({ columnSizingFeature, columnResizingFeature });
+
+const NO_ROWS: Record<string, unknown>[] = [];
+
+/**
+ * The TanStack Table column engine behind a DataTable's pointer resize. DataTable loads it on the
+ * first interaction with a resize handle (ADR 0027): the table renders from its own column state
+ * until then, and this engine drives the same state, controlled, from that point on. It renders
+ * nothing.
+ */
+export function DataTableResizer({
+  columns,
+  sizing,
+  resizing,
+  onSizingChange,
+  onResizingChange,
+  direction,
+  startRef,
+  onReady,
+}: {
+  columns: { id: string; size: number; minSize: number; maxSize: number }[];
+  sizing: ColumnSizingState;
+  resizing: columnResizingState;
+  onSizingChange: OnChangeFn<ColumnSizingState>;
+  onResizingChange: OnChangeFn<columnResizingState>;
+  direction: "ltr" | "rtl";
+  startRef: RefObject<StartResize | null>;
+  /** Called once the engine can start a resize. */
+  onReady: () => void;
+}): null {
+  const table = useTable({
+    features,
+    columns,
+    data: NO_ROWS,
+    state: { columnSizing: sizing, columnResizing: resizing },
+    onColumnSizingChange: onSizingChange,
+    onColumnResizingChange: onResizingChange,
+    columnResizeMode: "onChange",
+    columnResizeDirection: direction,
+  });
+  useLayoutEffect(() => {
+    startRef.current = (columnId, event) => {
+      const header = table.getFlatHeaders().find((h) => h.column.id === columnId);
+      header?.getResizeHandler()(event);
+    };
+  });
+  useLayoutEffect(() => {
+    onReady();
+    return () => {
+      startRef.current = null;
+    };
+    // Once per mount: the handle that loaded the engine may be waiting to start its drag.
+  }, []);
+  return null;
+}

package/src/DataTable/DataTableVirtualizer.tsx

@@ -0,0 +1,58 @@
+import { useLayoutEffect, type RefObject } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+/** The rows a table renders, inclusive; `end` below `start` when none fit. */
+export interface RowWindow {
+  readonly start: number;
+  readonly end: number;
+}
+
+/**
+ * The TanStack Virtual engine behind a DataTable over its row limit. DataTable loads it on the first
+ * interaction with the table (ADR 0027): until then the first screen of rows needs no engine, and
+ * this one moves the same window from that point on. It renders nothing.
+ */
+export function DataTableVirtualizer({
+  count,
+  rowHeight,
+  overscan,
+  viewport,
+  scrollRef,
+  scrollToRef,
+  onWindow,
+  onReady,
+}: {
+  count: number;
+  rowHeight: number;
+  overscan: number;
+  /** The height the table has measured, until the engine has measured its own. */
+  viewport: number;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  scrollToRef: RefObject<((index: number) => void) | null>;
+  onWindow: (window: RowWindow) => void;
+  /** Called once the engine can scroll. */
+  onReady: () => void;
+}): null {
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+    initialRect: { width: 0, height: viewport },
+    // The first scroll is often what loaded the engine, and it scrolls to its offset as it mounts.
+    initialOffset: () => scrollRef.current?.scrollTop ?? 0,
+  });
+  const items = virtualizer.getVirtualItems();
+  const start = items[0]?.index ?? 0;
+  const end = items[items.length - 1]?.index ?? -1;
+
+  useLayoutEffect(() => onWindow({ start, end }), [onWindow, start, end]);
+  useLayoutEffect(() => {
+    scrollToRef.current = (index) => virtualizer.scrollToIndex(index);
+    onReady();
+    return () => {
+      scrollToRef.current = null;
+    };
+  }, [virtualizer, scrollToRef, onReady]);
+  return null;
+}

package/src/DataTable/README.md

@@ -0,0 +1,9 @@
+# DataTable
+
+DataTable lists records in 36 px rows with tabular money and NULL-aware totals.
+
+- Densities: `compact` 32 px, default 36 px, `comfortable` 44 px.
+- A column with `wrap` wraps its text instead of widening the table; use it for long text such as descriptions or shared-field lists.
+- A total that includes any unpriced line renders Unpriced; aggregates of blanks are blank.
+- Production adds virtualization, column pinning, resize, grouping and keyboard grid navigation.
+- Over its row limit (100 by default) a table renders its first screen itself, and TanStack Virtual loads when the table is first scrolled, pointed at or focused.

package/src/DatePicker/README.md

@@ -0,0 +1,5 @@
+# DatePicker
+
+DatePicker picks one date from a month grid; dates display as Oct 30, 2026.
+
+- Typed date phrases are handled by QuickAdd.

package/src/DateRangePicker/README.md

@@ -0,0 +1,3 @@
+# DateRangePicker
+
+DateRangePicker picks a start and end date and shows the length in days.

package/src/DaySheetView/README.md

@@ -0,0 +1,3 @@
+# DaySheetView
+
+DaySheetView is the day's schedule and contacts in large touch rows, with one-tap call and message.

package/src/DepartmentChip/README.md

@@ -0,0 +1,3 @@
+# DepartmentChip
+
+DepartmentChip shows the department name first and its class code in a mono chip.

package/src/DepartmentGlyph/README.md

@@ -0,0 +1,18 @@
+# DepartmentGlyph
+
+DepartmentGlyph draws the Lucide icon assigned to each of the 10 department classes.
+
+| Code | Department  | Lucide icon       |
+| ---- | ----------- | ----------------- |
+| 0000 | Executive   | Briefcase         |
+| 1000 | Creative    | Palette           |
+| 2000 | Talent      | MicVocal          |
+| 3000 | Marketing   | Megaphone         |
+| 4000 | Environment | Tent              |
+| 5000 | Production  | SlidersHorizontal |
+| 6000 | Operations  | ClipboardList     |
+| 7000 | Experience  | Sparkles          |
+| 8000 | Hospitality | ConciergeBell     |
+| 9000 | Technology  | Cpu               |
+
+The map is exported as `XOS.glyphs.departments`. Always shown beside the department name, never alone.

package/src/Dialog/README.md

@@ -0,0 +1,3 @@
+# Dialog
+
+Dialog is reserved for irreversible actions; everything else uses Undo.

package/src/DiffViewer/README.md

@@ -0,0 +1,3 @@
+# DiffViewer
+
+DiffViewer shows field-level changes for record history and canon changes, with color and strike or underline.

package/src/Divider/README.md

@@ -0,0 +1,3 @@
+# Divider
+
+Divider separates groups with a 1 px `border-subtle` rule, optionally labeled.

package/src/Drawer/README.md

@@ -0,0 +1,3 @@
+# Drawer
+
+Drawer slides in from an edge for secondary tasks; below md it opens full screen.

package/src/DropdownMenu/README.md

@@ -0,0 +1,3 @@
+# DropdownMenu
+
+DropdownMenu opens a short list of actions from a button.

package/src/EPKViewer/README.md

@@ -0,0 +1,3 @@
+# EPKViewer
+
+EPKViewer presents an artist's press kit: media grid, bio, verified badges and links to plot and rider.

package/src/Editing/ColorPicker.tsx

@@ -0,0 +1,125 @@
+import { useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import {
+  controlClass,
+  errorClass,
+  fieldClass,
+  helpClass,
+  labelClass,
+  useFieldId,
+} from "../Field/Field.tsx";
+import { type ColorCheck, type ColorPickerProps } from "./Editing.types.ts";
+import { contrastRatio, overlaid } from "./contrastRatio.tsx";
+
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+/** A 3-digit hex color as 6 digits, the form a color input takes. */
+function expand(hex: string): string {
+  return hex.length === 4
+    ? `#${hex.slice(1).replace(/./g, "$&$&")}`.toUpperCase()
+    : hex.toUpperCase();
+}
+
+/** The ratio of one check for a color: the color as foreground or background, under any overlay. */
+function measure(check: ColorCheck, color: string): number {
+  const fg = check.fgIsValue ? color : (check.fg ?? color);
+  const fill = check.fgIsValue ? (check.bg ?? color) : color;
+  const bg = check.overlay ? overlaid(fill, check.overlay.color, check.overlay.opacity) : fill;
+  return contrastRatio(fg, bg);
+}
+
+/** A tenant color with live WCAG 2.2 AA checks; a color that fails any check cannot be saved. */
+export function ColorPicker({
+  label,
+  value,
+  checks,
+  onChange,
+  disabled,
+  help,
+  error,
+  id: idProp,
+}: ColorPickerProps): ReactElement {
+  const t = useT();
+  const id = useFieldId(idProp);
+  const [color, setColor] = useState(value);
+  const valid = HEX.test(color);
+  const [swatch, setSwatch] = useState(HEX.test(value) ? expand(value) : "");
+  const results = valid
+    ? checks.map((c) => {
+        const r = measure(c, color);
+        return { ...c, ratio: r, pass: r >= (c.min ?? 4.5) };
+      })
+    : [];
+  const allPass = valid && results.every((r) => r.pass);
+  const set = (next: string) => {
+    setColor(next);
+    const ok = HEX.test(next);
+    if (ok) setSwatch(expand(next));
+    onChange?.(next, ok && checks.every((c) => measure(c, next) >= (c.min ?? 4.5)));
+  };
+  return (
+    <div className={cx(fieldClass, "w-(--layout-property-column)")}>
+      <span id={`${id}-label`} className={labelClass}>
+        {label}
+      </span>
+      <div className="flex items-center gap-8">
+        <input
+          type="color"
+          aria-labelledby={`${id}-label`}
+          value={swatch}
+          disabled={disabled}
+          onChange={(e) => set(e.target.value.toUpperCase())}
+          className="xos-hit h-control-md min-w-control-md p-0 rounded-control border border-border-control bg-transparent cursor-pointer pointer-coarse:min-h-target-coarse pointer-coarse:min-w-target-coarse disabled:opacity-disabled disabled:cursor-not-allowed"
+        />
+        <input
+          id={id}
+          spellCheck={false}
+          aria-label={t("color.hex", { label })}
+          aria-invalid={valid && !error ? undefined : true}
+          aria-describedby={`${id}-status${help ? ` ${id}-help` : ""}`}
+          value={color}
+          disabled={disabled}
+          onChange={(e) => set(e.target.value.trim())}
+          className={cx(controlClass, "flex-1 font-mono")}
+        />
+      </div>
+      {help ? (
+        <span id={`${id}-help`} className={helpClass}>
+          {help}
+        </span>
+      ) : null}
+      <div id={`${id}-status`} aria-live="polite" className="flex flex-col gap-4">
+        {valid ? (
+          results.map((r) => (
+            <div key={r.label} className="flex items-center justify-between gap-8">
+              <span className="text-text-secondary">{r.label}</span>
+              <span className="flex items-center gap-4">
+                <span className="tabular-nums">
+                  {t("contrast.ratio", { r: r.ratio.toFixed(2) })}
+                </span>
+                <span className={r.pass ? "text-success" : "text-danger"}>
+                  <Icon name={r.pass ? "CircleCheck" : "CircleX"} size={14} />
+                </span>
+                <span>{r.pass ? t("contrast.pass") : t("contrast.fail")}</span>
+              </span>
+            </div>
+          ))
+        ) : (
+          <div className={errorClass}>
+            <Icon name="alert" size={12} />
+            {t("color.invalid")}
+          </div>
+        )}
+        {valid && !allPass ? <span className={helpClass}>{t("color.blocked")}</span> : null}
+        {error ? (
+          <div className={errorClass} role="alert">
+            <Icon name="alert" size={12} />
+            {error}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/Editing/DiffViewer.tsx

@@ -0,0 +1,49 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { ScrollRegion } from "../Layout/Layout.tsx";
+import { type DiffViewerProps } from "./Editing.types.ts";
+
+/** Field-level changes with color plus strike-through or underline, so change never relies on color. */
+export function DiffViewer({ caption, rows }: DiffViewerProps): ReactElement {
+  const t = useT();
+  const th = cx(
+    "h-control-lg px-12 text-start font-medium text-text-12 text-text-secondary bg-bg-surface border-b border-border-subtle",
+  );
+  const td = cx("h-row-default px-12 border-b border-border-subtle");
+  return (
+    <ScrollRegion label={caption ?? t("scroll.region")}>
+      <table className="w-full border-collapse text-text-13">
+        {caption ? <caption className="pb-8 text-start font-semibold">{caption}</caption> : null}
+        <thead>
+          <tr>
+            <th scope="col" className={th}>
+              {t("diff.field")}
+            </th>
+            <th scope="col" className={th}>
+              {t("diff.before")}
+            </th>
+            <th scope="col" className={th}>
+              {t("diff.after")}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.field}>
+              <td className={cx(td, "text-text-secondary")}>{r.field}</td>
+              <td className={td}>
+                <del className="line-through text-danger-text">{r.before}</del>
+              </td>
+              <td className={td}>
+                <ins className="underline underline-offset-(length:--space-2) text-success-text">
+                  {r.after}
+                </ins>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </ScrollRegion>
+  );
+}

package/src/Editing/Editing.tsx

@@ -0,0 +1,29 @@
+export {
+  type FilterBuilderProps,
+  type QuickAddProps,
+  type ColorPickerProps,
+  type ColorCheck,
+  type DiffViewerProps,
+  type QuickAddToken,
+  type QuickAddResult,
+  type QuickAddCandidate,
+  type QuickAddParse,
+  type QuickAddResolution,
+  type QuickAddResolver,
+  type QuickAddSpan,
+  type QuickAddTokenType,
+} from "./Editing.types.ts";
+export { parseQuickAdd, type QuickAddOptions } from "./parseQuickAdd.tsx";
+export { finalizeQuickAdd, quickAddKey, zonedInstant } from "./quickAddCore.ts";
+export {
+  loadQuickAddParser,
+  useQuickAdd,
+  type QuickAddController,
+  type UseQuickAddOptions,
+} from "./useQuickAdd.ts";
+export { QuickAddChips, type QuickAddChipsProps, type QuickAddCopy } from "./QuickAddChips.tsx";
+export { contrastRatio } from "./contrastRatio.tsx";
+export { FilterBuilder } from "./FilterBuilder.tsx";
+export { QuickAdd } from "./QuickAdd.tsx";
+export { ColorPicker } from "./ColorPicker.tsx";
+export { DiffViewer } from "./DiffViewer.tsx";

package/src/Editing/Editing.types.ts

@@ -0,0 +1,71 @@
+import type {
+  ColorPickerProps as ReferenceColorPickerProps,
+  DiffViewerProps as ReferenceDiffViewerProps,
+  FilterBuilderProps as ReferenceFilterBuilderProps,
+  QuickAddProps as ReferenceQuickAddProps,
+} from "../types/reference";
+import type { QuickAddCopy } from "./QuickAddChips.tsx";
+import type { QuickAddResolver, QuickAddResult, QuickAddTokenType } from "./quickAddCore.ts";
+
+export type Filter = ReferenceFilterBuilderProps["filters"][number];
+
+export type FilterBuilderProps = ReferenceFilterBuilderProps & {
+  onChange?: (filters: Filter[]) => void;
+  onAdd?: () => void;
+  onSave?: (filters: Filter[]) => void;
+  /** Opens the editor for one filter chip. */
+  onEdit?: (filter: Filter, index: number) => void;
+};
+
+export type QuickAddProps = ReferenceQuickAddProps & {
+  /**
+   * Called with the line to save on Enter. The field clears afterwards unless it returns (or resolves
+   * to) false, for example when the save failed. Without it the field is a preview and chips cannot be
+   * removed.
+   */
+  onSubmit?: (parsed: QuickAddResult) => unknown;
+  /** Reference date for relative phrases such as tomorrow; now by default. */
+  referenceDate?: Date;
+  /** The language date phrases are read in (Spanish for `es-*`); the provider's locale by default. */
+  locale?: string;
+  /** The IANA zone date phrases are read in, such as the org's; the device's by default. */
+  timeZone?: string;
+  /** Resolves people, tags, kinds and scopes to what the person may see; unresolved tokens stay text. */
+  resolve?: QuickAddResolver;
+  /** What each kind of token sets, for chip names and the announcement, such as Owner or Due. */
+  labels?: Partial<Record<QuickAddTokenType, string>>;
+  /** Sentences for chip names, the announcement and candidate lists, from the app's catalog. */
+  copy?: QuickAddCopy;
+  id?: string;
+  disabled?: boolean;
+};
+
+/** One contrast check: the value against a fixed color, as the foreground or the background. */
+export type ColorCheck = ReferenceColorPickerProps["checks"][number] & {
+  /** A state drawn over the background (hover, pressed): `color` at `opacity`, composited first. */
+  overlay?: { color: string; opacity: number };
+};
+
+export type ColorPickerProps = Omit<ReferenceColorPickerProps, "checks"> & {
+  checks: ColorCheck[];
+  /** Called with the value and whether it is a valid hex that passes every check. */
+  onChange?: (value: string, savable: boolean) => void;
+  disabled?: boolean;
+  help?: string;
+  /** A refusal from the server, shown under the checks. */
+  error?: string;
+  id?: string;
+};
+
+export type DiffViewerProps = ReferenceDiffViewerProps;
+
+export type {
+  QuickAddCandidate,
+  QuickAddParse,
+  QuickAddResolution,
+  QuickAddResolver,
+  QuickAddResult,
+  QuickAddSpan,
+  QuickAddToken,
+  QuickAddTokenType,
+} from "./quickAddCore.ts";

package/src/Editing/FilterBuilder.tsx

@@ -0,0 +1,72 @@
+import { useState, type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { chipClass } from "../Chips/Chips.tsx";
+import { type Filter, type FilterBuilderProps } from "./Editing.types.ts";
+
+/**
+ * Filters as chips: each opens its editor, removes with its button, and the set saves as a view. Add
+ * filter is the target of the shell's Open the filters shortcut (data-shortcut="view.filters",
+ * lib/shortcut-targets.ts).
+ */
+export function FilterBuilder({
+  filters,
+  addLabel,
+  saveLabel,
+  onChange,
+  onAdd,
+  onSave,
+  onEdit,
+}: FilterBuilderProps): ReactElement {
+  const t = useT();
+  const [current, setCurrent] = useState(filters);
+  const set = (next: Filter[]) => {
+    setCurrent(next);
+    onChange?.(next);
+  };
+  return (
+    <div role="group" aria-label={t("filter.label")} className="flex flex-wrap items-center gap-6">
+      {current.map((f, i) => (
+        <span key={`${f.field}-${i}`} className={chipClass}>
+          <button
+            type="button"
+            onClick={() => onEdit?.(f, i)}
+            className="xos-hit inline-flex items-center gap-4 p-0 border-0 bg-transparent cursor-pointer text-inherit"
+          >
+            <span className="text-text-secondary">{f.field}</span>{" "}
+            <span className="text-text-secondary">{f.op}</span>{" "}
+            <strong className="font-medium">{f.value}</strong>
+          </button>
+          <button
+            type="button"
+            aria-label={t("filter.remove", { field: f.field })}
+            onClick={() => set(current.filter((_, j) => j !== i))}
+            className="xos-hit inline-grid place-items-center ms-2 p-0 border-0 bg-transparent text-text-tertiary hover:text-text-primary rounded-mark cursor-pointer"
+          >
+            <Icon name="X" size={12} />
+          </button>
+        </span>
+      ))}
+      <Button
+        size="sm"
+        variant="ghost"
+        icon="ListFilter"
+        onClick={onAdd}
+        data-shortcut="view.filters"
+      >
+        {addLabel ?? t("filter.add")}
+      </Button>
+      {current.length ? (
+        <Button size="sm" variant="ghost" onClick={() => set([])}>
+          {t("action.clear")}
+        </Button>
+      ) : null}
+      {saveLabel ? (
+        <Button size="sm" icon="Bookmark" onClick={() => onSave?.(current)}>
+          {saveLabel}
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/Editing/QuickAdd.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState, type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Kbd } from "../Kbd/Kbd.tsx";
+import { type QuickAddProps } from "./Editing.types.ts";
+import { QuickAddChips } from "./QuickAddChips.tsx";
+import { loadQuickAddParser, useQuickAdd } from "./useQuickAdd.ts";
+
+/**
+ * One line that turns date phrases, @person, #tag, /kind and ~scope into chips; Enter saves. With
+ * `resolve`, tokens show what they resolved to and the rest stay in the title. With `onSubmit`, each
+ * chip can be removed, which leaves its text in the title.
+ */
+export function QuickAdd({
+  label,
+  placeholder: hint,
+  value,
+  onSubmit,
+  referenceDate,
+  locale,
+  timeZone,
+  resolve,
+  labels,
+  copy,
+  id,
+  disabled = false,
+}: QuickAddProps): ReactElement {
+  const t = useT();
+  const [text, setText] = useState(value ?? "");
+  const [saving, setSaving] = useState(false);
+  const input = useRef<HTMLInputElement>(null);
+  // A line typed before the page hydrated is in the field but not in state: take it up.
+  useEffect(() => {
+    const early = input.current?.value ?? "";
+    if (early !== "") setText(early);
+  }, []);
+  const quick = useQuickAdd({
+    text,
+    ...(referenceDate ? { referenceDate } : {}),
+    ...(locale ? { locale } : {}),
+    ...(timeZone ? { timeZone } : {}),
+    ...(resolve ? { resolve } : {}),
+  });
+  const submit = async () => {
+    if (!text.trim() || saving || disabled) return;
+    setSaving(true);
+    try {
+      const result = await quick.finalize();
+      const keep = await onSubmit?.(result);
+      if (keep !== false) {
+        setText("");
+        quick.reset();
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+  return (
+    <div className="flex flex-col gap-8 w-(--ui-alert) max-w-full">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          void submit();
+        }}
+        aria-busy={saving || undefined}
+        className="flex items-center gap-8 h-row-default ps-12 pe-8 rounded-control border border-border-control bg-bg-surface focus-within:outline-solid focus-within:outline-stroke-focus focus-within:outline-focus-ring"
+      >
+        <Icon name="Plus" color="var(--color-text-secondary)" />
+        <input
+          ref={input}
+          {...(id ? { id } : {})}
+          aria-label={label ?? t("quickAdd.label")}
+          placeholder={hint}
+          value={text}
+          disabled={disabled}
+          onChange={(e) => setText(e.target.value)}
+          onFocus={() => void loadQuickAddParser().catch(() => undefined)}
+          className="flex-1 min-w-0 border-0 bg-transparent outline-none text-text-primary placeholder:text-text-tertiary pointer-coarse:min-h-target-coarse"
+        />
+        <Kbd>{t("key.enter")}</Kbd>
+      </form>
+      {text ? (
+        <QuickAddChips
+          parse={quick.parse}
+          {...(quick.resolutions ? { resolutions: quick.resolutions } : {})}
+          choices={quick.choices}
+          onChoose={quick.choose}
+          {...(labels ? { labels } : {})}
+          {...(copy ? { copy } : {})}
+          {...(onSubmit
+            ? {
+                onDismiss: (token) => {
+                  quick.dismiss(token);
+                  input.current?.focus();
+                },
+              }
+            : {})}
+        />
+      ) : null}
+    </div>
+  );
+}