@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Compass/LiveActivity.tsx

@@ -0,0 +1,60 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { blockClass, compassText } from "./Compass.shared.tsx";
+import { type LiveActivityProps } from "./Compass.types.ts";
+
+/** The lock screen Live Activity and the home screen widget layouts. */
+export function LiveActivity({
+  label,
+  elapsed,
+  place,
+  nextShift,
+  nextTime,
+  onBreak = false,
+  onToggleBreak,
+  onClockOut,
+}: LiveActivityProps): ReactElement {
+  const t = useT();
+  return (
+    <div className={cx("xos-compass flex flex-col gap-12", compassText)}>
+      <div
+        role="group"
+        aria-label={t("live.label")}
+        className="flex flex-col gap-8 w-(--ui-compass-card) max-w-full box-border p-16 rounded-widget bg-bg-raised shadow-menu"
+      >
+        <div className="flex items-center justify-between">
+          <span className="flex items-center gap-6">
+            <Icon
+              name={onBreak ? "Coffee" : "Clock"}
+              size={16}
+              className={onBreak ? "text-warning" : "text-success"}
+            />
+            <strong>{label}</strong>
+          </span>
+          <span className="text-heading-24 font-semibold tabular-nums">{elapsed}</span>
+        </div>
+        <span className="text-text-secondary">{place}</span>
+        <div className="flex gap-8">
+          <Button size="lg" className={blockClass} onClick={onToggleBreak}>
+            {t(onBreak ? "clock.endBreak" : "clock.break")}
+          </Button>
+          <Button size="lg" variant="primary" className={blockClass} onClick={onClockOut}>
+            {t("clock.out")}
+          </Button>
+        </div>
+      </div>
+      <div
+        role="group"
+        aria-label={t("widget.label")}
+        className="flex flex-col justify-end gap-2 size-(--ui-widget) box-border p-16 rounded-widget bg-bg-raised shadow-menu"
+      >
+        <span className="text-text-secondary">{t("widget.nextShift")}</span>
+        <strong>{nextShift}</strong>
+        <span className="tabular-nums">{nextTime}</span>
+      </div>
+    </div>
+  );
+}

package/src/Compass/OfflineBanner.tsx

@@ -0,0 +1,31 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { type OfflineBannerProps } from "./Compass.types.ts";
+
+/** Offline state with the count of queued writes (Section 13). */
+export function OfflineBanner({ message, queued, onView }: OfflineBannerProps): ReactElement {
+  const t = useT();
+  return (
+    <div
+      role="status"
+      className={cx(
+        "xos-compass flex items-center gap-8 w-(--ui-tabbar) max-w-full box-border px-12 py-8",
+        "bg-bg-surface border border-warning rounded-card text-text-14 text-text-primary",
+      )}
+    >
+      <Icon name="WifiOff" size={16} className="text-warning" />
+      <span className="flex-1">{message}</span>
+      <span className="inline-flex items-center h-(--ui-chip) px-6 rounded-chip bg-bg-hover text-text-12 font-medium tabular-nums">
+        {t("offline.queued", { n: queued })}
+      </span>
+      {onView ? (
+        <Button size="sm" variant="ghost" onClick={onView}>
+          {t("action.view")}
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/Compass/PhotoCapture.tsx

@@ -0,0 +1,69 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button, IconButton } from "../Button/Button.tsx";
+import { Phone } from "./Compass.shared.tsx";
+import { type PhotoCaptureProps } from "./Compass.types.ts";
+
+/** Photo proof: viewfinder, thumbnails of what is taken, annotate, shutter and Done. */
+export function PhotoCapture({
+  frame,
+  hint,
+  count,
+  onCapture,
+  onAnnotate,
+  onDone,
+  camera,
+}: PhotoCaptureProps): ReactElement {
+  const t = useT();
+  return (
+    <Phone frame={frame}>
+      <div className="flex flex-col">
+        <div
+          role="img"
+          aria-label={t("camera.viewfinder")}
+          className="relative grid place-items-center h-(--ui-photo-view) overflow-hidden bg-camera-bg"
+        >
+          {camera ? <div className="absolute inset-0">{camera}</div> : null}
+          <span className="absolute bottom-16 text-text-14 text-camera-ink">{hint}</span>
+        </div>
+        <div className="flex flex-col gap-12 p-16">
+          <div className="flex flex-wrap gap-8">
+            {Array.from({ length: count }, (_, i) => (
+              <span
+                key={i}
+                role="img"
+                aria-label={t("photo.n", { n: i + 1 })}
+                className="grid place-items-center size-(--ui-thumb) rounded-card bg-bg-hover text-text-tertiary"
+              >
+                <Icon name="Image" size={16} />
+              </span>
+            ))}
+          </div>
+          <div className="flex items-center justify-between">
+            <IconButton
+              icon="PenLine"
+              variant="secondary"
+              label={t("photo.annotate")}
+              onClick={onAnnotate}
+            />
+            <button
+              type="button"
+              aria-label={t("photo.take")}
+              onClick={onCapture}
+              className={cx(
+                "size-(--ui-shutter) rounded-full border-stroke-swatch border-text-primary bg-text-primary cursor-pointer",
+                "ring-(length:--stroke-width-accent) ring-inset ring-bg-canvas",
+                "focus-visible:outline-stroke-focus focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+              )}
+            />
+            <Button variant="primary" onClick={onDone}>
+              {t("action.done")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Phone>
+  );
+}

package/src/Compass/QuickIncidentSheet.tsx

@@ -0,0 +1,46 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Phone, SheetFrame } from "./Compass.shared.tsx";
+import { type QuickIncidentSheetProps } from "./Compass.types.ts";
+
+/** Step one of the three-step incident report: choose the type from a grid. */
+export function QuickIncidentSheet({
+  frame,
+  location,
+  types,
+  onSelect,
+}: QuickIncidentSheetProps): ReactElement {
+  const t = useT();
+  return (
+    <Phone frame={frame}>
+      <SheetFrame title={t("incident.title")} step={t("count.step", { n: 1, total: 3 })}>
+        <div className="grid grid-cols-3 gap-8">
+          {types.map((type) => (
+            <button
+              key={type.label}
+              type="button"
+              onClick={() => onSelect?.(type.label)}
+              className={cx(
+                "flex flex-col items-center justify-center gap-8 min-h-(--ui-compass-thumb) p-8",
+                "border rounded-card bg-bg-surface text-text-primary text-text-14 font-medium cursor-pointer",
+                "active:bg-bg-hover forced-colors:border-[CanvasText]",
+                "focus-visible:outline-stroke-focus focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+                type.critical ? "border-danger" : "border-border-control",
+              )}
+            >
+              <Icon name={type.icon} size={28} className={type.critical ? "text-danger" : ""} />
+              <span>{type.label}</span>
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-6 text-text-secondary">
+          <Icon name="MapPin" size={16} />
+          {location}
+        </div>
+        <p className="m-0 text-text-12 text-text-secondary">{t("incident.help")}</p>
+      </SheetFrame>
+    </Phone>
+  );
+}

package/src/Compass/ScanSheet.tsx

@@ -0,0 +1,83 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button, IconButton } from "../Button/Button.tsx";
+import { SegmentedControl } from "../Navigation/Navigation.tsx";
+import { Phone, blockClass } from "./Compass.shared.tsx";
+import { type ScanSheetProps } from "./Compass.types.ts";
+
+const SCAN_MODES = ["asset", "receiving", "credential"] as const;
+
+/** The scan surface: mode switch, viewfinder, last result, running count and Done. */
+export function ScanSheet({
+  frame,
+  mode,
+  hint,
+  count,
+  countLabel,
+  doneLabel,
+  last,
+  onModeChange,
+  onDone,
+  onNfc,
+  onTorch,
+  camera,
+}: ScanSheetProps): ReactElement {
+  const t = useT();
+  return (
+    <Phone frame={frame}>
+      <div className="flex flex-col">
+        <div className="flex justify-center p-12">
+          <SegmentedControl
+            label={t("scan.mode")}
+            value={mode}
+            options={SCAN_MODES.map((m) => ({ value: m, label: t(`scan.${m}`) }))}
+            onChange={(next) => onModeChange?.(next as ScanSheetProps["mode"])}
+          />
+        </div>
+        <div
+          aria-label={t("camera.viewfinder")}
+          className="relative grid place-items-center h-(--ui-scan-view) overflow-hidden bg-camera-bg"
+        >
+          {camera ? <div className="absolute inset-0">{camera}</div> : null}
+          <span className="relative w-(--ui-reticle-inline) h-(--ui-reticle-block) max-w-full box-border rounded-dialog ring-(length:--stroke-width-focus) ring-camera-ink" />
+          <span className="absolute bottom-16 text-text-14 text-camera-ink">{hint}</span>
+        </div>
+        <div className="flex flex-col gap-12 p-16">
+          {last ? (
+            <div
+              role="status"
+              className={cx(
+                "flex items-center gap-12 p-12 rounded-card bg-bg-surface ring-(length:--ui-hairline-half) ring-inset",
+                last.ok ? "ring-success" : "ring-danger",
+              )}
+            >
+              <Icon
+                name={last.ok ? "CircleCheck" : "CircleX"}
+                size={24}
+                className={last.ok ? "text-success" : "text-danger"}
+              />
+              <div className="flex flex-col">
+                <strong>{last.title}</strong>
+                <span className="font-mono text-mono-12 text-text-secondary">{last.code}</span>
+              </div>
+            </div>
+          ) : null}
+          <div className="flex items-center justify-between">
+            <span role="status">
+              <strong className="text-heading-24 tabular-nums">{count}</strong> {countLabel}
+            </span>
+            <span className="flex items-center gap-8">
+              <IconButton icon="Nfc" label={t("scan.nfc")} onClick={onNfc} />
+              <IconButton icon="Flashlight" label={t("scan.torch")} onClick={onTorch} />
+            </span>
+          </div>
+          <Button variant="primary" size="lg" className={blockClass} onClick={onDone}>
+            {doneLabel}
+          </Button>
+        </div>
+      </div>
+    </Phone>
+  );
+}

package/src/Compass/ShiftCard.tsx

@@ -0,0 +1,55 @@
+import { type ReactElement, type ReactNode } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { StateChip } from "../Chips/Chips.tsx";
+import { compassText } from "./Compass.shared.tsx";
+import { type ShiftCardProps } from "./Compass.types.ts";
+
+function Fact({ icon, children }: { icon: string; children: ReactNode }): ReactElement {
+  return (
+    <span className="flex items-center gap-6">
+      <Icon name={icon} size={16} className="text-text-secondary" />
+      {children}
+    </span>
+  );
+}
+
+/** A shift with its state, countdown, role, date, time and place, and up to two actions. */
+export function ShiftCard({
+  state,
+  stateLabel,
+  countdown,
+  role,
+  date,
+  time,
+  place,
+  actions,
+}: ShiftCardProps): ReactElement {
+  return (
+    <article
+      className={cx(
+        "xos-compass flex flex-col gap-12 w-(--ui-compass-card) max-w-full box-border p-16",
+        "bg-bg-raised border border-border-subtle rounded-dialog forced-colors:border-[CanvasText]",
+        compassText,
+      )}
+    >
+      <header className="flex items-center justify-between gap-8">
+        <StateChip state={state} label={stateLabel} />
+        {countdown ? <span className="text-text-secondary tabular-nums">{countdown}</span> : null}
+      </header>
+      <strong className="text-heading-16 font-semibold">{role}</strong>
+      <div className="flex flex-col gap-6">
+        <Fact icon="Calendar">{date}</Fact>
+        <Fact icon="Clock">
+          <span className="tabular-nums">{time}</span>
+        </Fact>
+        <Fact icon="MapPin">{place}</Fact>
+      </div>
+      {actions ? (
+        <footer className="flex items-center gap-8 *:flex-1 *:justify-center *:min-h-touch-min">
+          {actions}
+        </footer>
+      ) : null}
+    </article>
+  );
+}

package/src/Compass/SignaturePad.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Button } from "../Button/Button.tsx";
+import { compassText } from "./Compass.shared.tsx";
+import { type SignaturePadProps } from "./Compass.types.ts";
+
+/** A drawn signature with its attestation; pointer input covers finger, stylus and mouse. */
+export function SignaturePad({ label, attestation, onChange }: SignaturePadProps): ReactElement {
+  const t = useT();
+  const ref = useRef<HTMLCanvasElement>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    const canvas = ref.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    let down = false;
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+    ctx.strokeStyle = getComputedStyle(canvas).color;
+    const pos = (e: PointerEvent): [number, number] => {
+      const r = canvas.getBoundingClientRect();
+      return [
+        ((e.clientX - r.left) * canvas.width) / (r.width || 1),
+        ((e.clientY - r.top) * canvas.height) / (r.height || 1),
+      ];
+    };
+    canvas.onpointerdown = (e) => {
+      down = true;
+      const [x, y] = pos(e);
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+    };
+    canvas.onpointermove = (e) => {
+      if (!down) return;
+      const [x, y] = pos(e);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+    };
+    canvas.onpointerup = canvas.onpointerleave = () => {
+      if (!down) return;
+      down = false;
+      onChangeRef.current?.(canvas.toDataURL("image/png"));
+    };
+  }, []);
+  const clear = () => {
+    const canvas = ref.current;
+    canvas?.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
+    onChange?.(null);
+  };
+  return (
+    <div className={cx("xos-compass flex flex-col gap-6 w-(--ui-field) max-w-full", compassText)}>
+      <span className="text-label-13 font-medium">{label}</span>
+      <canvas
+        ref={ref}
+        width={720}
+        height={240}
+        role="img"
+        aria-label={t("signature.area")}
+        className="w-full h-(--ui-sigpad) bg-bg-surface border border-dashed border-border-strong rounded-card touch-none cursor-crosshair text-text-primary"
+      />
+      <div className="flex items-center justify-between gap-8">
+        <span className="text-text-12 text-text-secondary">{attestation}</span>
+        <Button size="sm" variant="ghost" onClick={clear}>
+          {t("action.clear")}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/Compass/SyncConflictSheet.tsx

@@ -0,0 +1,60 @@
+import { useId, useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Phone, SheetFrame, blockClass } from "./Compass.shared.tsx";
+import { type SyncConflictSheetProps } from "./Compass.types.ts";
+
+/** Resolves an offline write that collided with a newer server value. */
+export function SyncConflictSheet({
+  frame,
+  message,
+  field,
+  mine,
+  mineMeta,
+  theirs,
+  theirsMeta,
+  onKeep,
+}: SyncConflictSheetProps): ReactElement {
+  const t = useT();
+  const [choice, setChoice] = useState<"mine" | "theirs">("mine");
+  const name = useId();
+  const options = [
+    { value: "mine" as const, who: t("conflict.yours"), value_: mine, meta: mineMeta },
+    { value: "theirs" as const, who: t("conflict.server"), value_: theirs, meta: theirsMeta },
+  ];
+  return (
+    <Phone frame={frame}>
+      <SheetFrame title={t("conflict.title")}>
+        <p className="m-0 text-text-secondary">{message}</p>
+        <span className="text-label-13 font-medium">{field}</span>
+        {options.map((o) => (
+          <label
+            key={o.value}
+            className={cx(
+              "flex items-center gap-12 p-12 border rounded-card cursor-pointer",
+              choice === o.value ? "border-accent bg-bg-hover" : "border-border-control",
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              checked={choice === o.value}
+              onChange={() => setChoice(o.value)}
+              className="size-icon-20 accent-(--color-accent-default)"
+            />
+            <div className="flex flex-col">
+              <span className="text-text-secondary">
+                {o.who} · {o.meta}
+              </span>
+              <strong>{o.value_}</strong>
+            </div>
+          </label>
+        ))}
+        <Button variant="primary" size="lg" className={blockClass} onClick={() => onKeep?.(choice)}>
+          {t("conflict.keep")}
+        </Button>
+      </SheetFrame>
+    </Phone>
+  );
+}