@suphark/ui 0.24.0 → 0.25.0

package/src/components/shared/form/time-picker.tsx

@@ -0,0 +1,421 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { Calendar } from "@suphark/ui/components/ui/calendar";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import { cn } from "@suphark/ui/lib/utils";
+import { CalendarClockIcon, ClockIcon } from "lucide-react";
+import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
+import { th } from "react-day-picker/locale";
+import { useUiText } from "../ui-text";
+
+/** "HH:mm" 24 ชั่วโมง */
+export type TimeValue = string;
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+/**
+ * แปลงข้อความที่พิมพ์เป็น "HH:mm": "14:30" "14.30" "1430" "930" "9" "9:5" → null ถ้าไม่ใช่เวลาที่ถูกต้อง
+ */
+export function parseTimeInput(input: string): TimeValue | null {
+  const s = input.trim().replace(/\s*(น\.|นาฬิกา)$/, "");
+  if (!s) return null;
+  let h: number;
+  let m: number;
+  const sep = s.match(/^(\d{1,2})[:.](\d{1,2})$/);
+  if (sep) {
+    h = Number(sep[1]);
+    m = Number(sep[2]);
+  } else if (/^\d{1,4}$/.test(s)) {
+    if (s.length <= 2) {
+      h = Number(s);
+      m = 0;
+    } else {
+      h = Number(s.slice(0, s.length - 2));
+      m = Number(s.slice(-2));
+    }
+  } else {
+    return null;
+  }
+  if (h > 23 || m > 59) return null;
+  return `${pad(h)}:${pad(m)}`;
+}
+
+function splitTime(value: TimeValue | null | undefined): [number, number] | null {
+  const parsed = value ? parseTimeInput(value) : null;
+  if (!parsed) return null;
+  const [h, m] = parsed.split(":").map(Number);
+  return [h ?? 0, m ?? 0];
+}
+
+/** คอลัมน์เลือกค่า (listbox): คลิก หรือโฟกัสแล้วใช้ลูกศรขึ้น/ลง Home/End */
+function TimeColumn({
+  label,
+  options,
+  selected,
+  onSelect,
+}: {
+  label: string;
+  options: number[];
+  selected: number | null;
+  onSelect: (value: number) => void;
+}) {
+  const baseId = useId();
+  const listRef = useRef<HTMLDivElement>(null);
+  const optionId = (v: number) => `${baseId}-${v}`;
+
+  // เลื่อนให้ค่าที่เลือกอยู่กลางคอลัมน์ทุกครั้งที่เปลี่ยน
+  useEffect(() => {
+    if (selected == null) return;
+    const el = listRef.current?.querySelector<HTMLElement>(`[data-value="${selected}"]`);
+    el?.scrollIntoView?.({ block: "center" });
+  }, [selected]);
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const i = selected == null ? -1 : options.indexOf(selected);
+    let next: number | undefined;
+    if (e.key === "ArrowDown") next = options[Math.min(i + 1, options.length - 1)];
+    else if (e.key === "ArrowUp") next = options[Math.max(i - 1, 0)];
+    else if (e.key === "Home") next = options[0];
+    else if (e.key === "End") next = options[options.length - 1];
+    if (next !== undefined) {
+      e.preventDefault();
+      onSelect(next);
+    }
+  };
+
+  return (
+    <div
+      ref={listRef}
+      role="listbox"
+      tabIndex={0}
+      aria-label={label}
+      aria-activedescendant={selected == null ? undefined : optionId(selected)}
+      onKeyDown={onKeyDown}
+      className="no-scrollbar flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-md p-0.5 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+    >
+      {options.map((v) => (
+        <div
+          key={v}
+          id={optionId(v)}
+          role="option"
+          aria-selected={v === selected}
+          data-value={v}
+          tabIndex={-1}
+          onClick={() => onSelect(v)}
+          className={cn(
+            "flex h-8 shrink-0 cursor-default items-center justify-center rounded-md text-sm tabular-nums select-none hover:bg-muted",
+            v === selected && "bg-primary text-primary-foreground hover:bg-primary",
+          )}
+        >
+          {pad(v)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** คอลัมน์ชั่วโมง + นาที (ใช้ใน TimePicker / DateTimePicker) */
+export function TimeColumns({
+  value,
+  onValueChange,
+  minuteStep = 5,
+  className,
+}: {
+  value: TimeValue | null | undefined;
+  onValueChange: (value: TimeValue) => void;
+  /** ระยะห่างนาทีในคอลัมน์ (ค่านาทีที่ไม่ลงตัวยังแสดงถ้าเลือกอยู่) */
+  minuteStep?: number;
+  className?: string;
+}) {
+  const text = useUiText().time;
+  const current = splitTime(value);
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+  if (current && !minutes.includes(current[1])) {
+    minutes.push(current[1]);
+    minutes.sort((a, b) => a - b);
+  }
+  const set = (h: number, m: number) => onValueChange(`${pad(h)}:${pad(m)}`);
+  return (
+    <div data-slot="time-columns" className={cn("flex gap-1", className)}>
+      <TimeColumn
+        label={text?.hour ?? "ชั่วโมง"}
+        options={hours}
+        selected={current?.[0] ?? null}
+        onSelect={(h) => set(h, current?.[1] ?? 0)}
+      />
+      <TimeColumn
+        label={text?.minute ?? "นาที"}
+        options={minutes}
+        selected={current?.[1] ?? null}
+        onSelect={(m) => set(current?.[0] ?? 0, m)}
+      />
+    </div>
+  );
+}
+
+function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (v: T) => void) {
+  const [inner, setInner] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : inner;
+  const set = (v: T) => {
+    if (!controlled) setInner(v);
+    onChange?.(v);
+  };
+  return [current, set] as const;
+}
+
+const nowTime = (): TimeValue => {
+  const d = new Date();
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
+
+/**
+ * ช่องเวลา 24 ชม. — พิมพ์ได้เลย ("1430", "9.15", "14:30") หรือกดไอคอนนาฬิกาเลือกจากคอลัมน์ชั่วโมง/นาที
+ * ค่าเป็น string "HH:mm" (หรือ null) — `name` ส่งใน FormData ได้; พิมพ์ผิดรูปแบบช่องจะเป็นสีแดงจนแก้
+ *
+ *   <TimePicker name="remindAt" defaultValue="09:00" minuteStep={15} aria-label="เวลาเตือน" />
+ */
+export function TimePicker({
+  value,
+  defaultValue = null,
+  onValueChange,
+  minuteStep = 5,
+  name,
+  id,
+  required,
+  disabled,
+  placeholder,
+  className,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+}: {
+  value?: TimeValue | null;
+  defaultValue?: TimeValue | null;
+  onValueChange?: (value: TimeValue | null) => void;
+  minuteStep?: number;
+  name?: string;
+  id?: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** ค่าเริ่มต้น "--:--" */
+  placeholder?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+}) {
+  const ui = useUiText();
+  const text = ui.time;
+  const [time, setTime] = useControllable<TimeValue | null>(value, defaultValue, onValueChange);
+  const [draft, setDraft] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+  const draftInvalid = draft != null && draft.trim() !== "" && parseTimeInput(draft) == null;
+
+  const commitDraft = () => {
+    if (draft == null) return;
+    if (draft.trim() === "") {
+      setTime(null);
+      setDraft(null);
+      return;
+    }
+    const parsed = parseTimeInput(draft);
+    if (parsed) {
+      setTime(parsed);
+      setDraft(null);
+    }
+  };
+
+  return (
+    <InputGroup data-slot="time-picker" className={cn("w-32", className)}>
+      <InputGroupInput
+        id={id}
+        inputMode="numeric"
+        autoComplete="off"
+        placeholder={placeholder ?? "--:--"}
+        value={draft ?? time ?? ""}
+        disabled={disabled}
+        required={required}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={draftInvalid || ariaInvalid || undefined}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onBlur={commitDraft}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commitDraft();
+          }
+        }}
+        className="tabular-nums"
+      />
+      {name && <input type="hidden" name={name} value={time ?? ""} />}
+      <InputGroupAddon align="inline-end">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger
+            render={
+              <InputGroupButton
+                size="icon-xs"
+                disabled={disabled}
+                aria-label={text?.choose ?? "เลือกเวลา"}
+              />
+            }
+          >
+            <ClockIcon />
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-auto gap-2 p-2">
+            <TimeColumns
+              value={time}
+              minuteStep={minuteStep}
+              onValueChange={(v) => {
+                setTime(v);
+                setDraft(null);
+              }}
+            />
+            <div className="flex justify-between gap-2 border-t pt-2">
+              <Button
+                type="button"
+                size="xs"
+                variant="ghost"
+                onClick={() => {
+                  setTime(nowTime());
+                  setDraft(null);
+                }}
+              >
+                {text?.now ?? "ตอนนี้"}
+              </Button>
+              <Button type="button" size="xs" onClick={() => setOpen(false)}>
+                {ui.done}
+              </Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}
+
+/** "YYYY-MM-DDTHH:mm" ตามเวลาท้องถิ่น (รูปแบบเดียวกับ input datetime-local) — ใช้เป็นค่าใน FormData */
+export function toLocalDateTimeString(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+/**
+ * เลือกวัน + เวลาในกล่องเดียว (ปฏิทิน + คอลัมน์ชั่วโมง/นาที) — นัดหมาย, กำหนดส่ง, เวลาเตือน
+ * ค่าเป็น `Date | null`; เลือกวันก่อนเวลา = ใช้ `defaultTime`; `name` ส่ง "YYYY-MM-DDTHH:mm" (เวลาท้องถิ่น) ใน FormData
+ *
+ *   <DateTimePicker value={dueAt} onValueChange={setDueAt} minuteStep={15} />
+ */
+export function DateTimePicker({
+  value,
+  defaultValue = null,
+  onValueChange,
+  minuteStep = 5,
+  defaultTime = "09:00",
+  name,
+  id,
+  disabled,
+  placeholder,
+  className,
+  "aria-label": ariaLabel,
+  "aria-invalid": ariaInvalid,
+}: {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (value: Date | null) => void;
+  minuteStep?: number;
+  /** เวลาที่ใช้เมื่อเลือกวันครั้งแรก */
+  defaultTime?: TimeValue;
+  name?: string;
+  id?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-invalid"?: boolean;
+}) {
+  const ui = useUiText();
+  const text = ui.time;
+  const [date, setDate] = useControllable<Date | null>(value, defaultValue, onValueChange);
+  const [open, setOpen] = useState(false);
+  const time = date ? `${pad(date.getHours())}:${pad(date.getMinutes())}` : null;
+
+  const withTime = (day: Date, t: TimeValue) => {
+    const [h, m] = splitTime(t) ?? [9, 0];
+    const d = new Date(day);
+    d.setHours(h, m, 0, 0);
+    return d;
+  };
+
+  const label = date
+    ? date.toLocaleString("th-TH", { dateStyle: "medium", timeStyle: "short" })
+    : (placeholder ?? text?.dateTimePlaceholder ?? "เลือกวันและเวลา");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            id={id}
+            type="button"
+            variant="outline"
+            disabled={disabled}
+            aria-label={ariaLabel}
+            aria-invalid={ariaInvalid || undefined}
+            data-slot="date-time-picker"
+            className={cn(
+              "w-full justify-start gap-2 font-normal",
+              !date && "text-muted-foreground",
+              className,
+            )}
+          />
+        }
+      >
+        <CalendarClockIcon className="text-muted-foreground" />
+        <span className="truncate">{label}</span>
+      </PopoverTrigger>
+      {name && <input type="hidden" name={name} value={date ? toLocalDateTimeString(date) : ""} />}
+      <PopoverContent align="start" className="w-auto gap-0 p-0">
+        <div className="flex flex-col sm:flex-row">
+          <Calendar
+            mode="single"
+            locale={th}
+            selected={date ?? undefined}
+            defaultMonth={date ?? undefined}
+            onSelect={(day) => day && setDate(withTime(day, time ?? defaultTime))}
+            className="p-3"
+          />
+          <div className="flex justify-center border-t p-2 sm:border-t-0 sm:border-l">
+            <TimeColumns
+              value={time}
+              minuteStep={minuteStep}
+              onValueChange={(t) => setDate(withTime(date ?? new Date(), t))}
+            />
+          </div>
+        </div>
+        <div className="flex justify-between gap-2 border-t p-2">
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            disabled={!date}
+            onClick={() => setDate(null)}
+          >
+            {text?.clear ?? "ล้าง"}
+          </Button>
+          <Button type="button" size="xs" onClick={() => setOpen(false)}>
+            {ui.done}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/shared/step-form.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { cn } from "@suphark/ui/lib/utils";
+import { CheckIcon } from "lucide-react";
+import { type FormEvent, type ReactNode, useEffect, useRef, useState } from "react";
+import { useUiText } from "./ui-text";
+
+export interface StepFormStep {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** ช่องกรอกของขั้นนี้ — ใส่ `name` ตามปกติ ค่าทุกขั้นรวมใน FormData เดียวตอนส่ง */
+  content: ReactNode;
+  /** ตรวจเพิ่มจาก required/pattern ของ input — คืน string = ข้อความ error (ไม่ไปต่อ) */
+  validate?: (formData: FormData) => string | null | undefined | Promise<string | null | undefined>;
+}
+
+const CONTROLS = "input, select, textarea";
+
+/**
+ * ตรวจ constraint ของ input ในกล่อง (required, pattern, min…) — แสดง bubble ของเบราว์เซอร์ที่ช่องแรกที่ผิด
+ * input ที่ซ่อนไว้ (ตัวแทนของ Base UI เช่น NumberField, aria-hidden) แสดง bubble ไม่ได้ → คืนข้อความให้แสดงใต้ฟอร์มแทน
+ * คืน true = ผ่าน, string = ข้อความ error, false = แสดง bubble แล้ว
+ */
+function reportSection(section: HTMLElement | null): true | false | string {
+  if (!section) return true;
+  for (const el of section.querySelectorAll<HTMLInputElement>(CONTROLS)) {
+    if (el.type === "hidden" || el.disabled) continue;
+    if (!el.checkValidity()) {
+      if (el.getAttribute("aria-hidden") === "true") {
+        // โฟกัสช่องที่มองเห็นในกลุ่มเดียวกัน (ถ้ามี)
+        el.parentElement?.querySelector<HTMLElement>("input:not([aria-hidden=true])")?.focus();
+        return el.validationMessage || "ค่าไม่ถูกต้อง";
+      }
+      el.reportValidity();
+      el.focus();
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * ฟอร์มหลายขั้น (wizard) สำเร็จรูป — แถบขั้นตอน + เนื้อหาทีละขั้น + ปุ่มย้อนกลับ/ถัดไป/ส่ง ในตัว
+ * ทุกขั้นอยู่ใน `<form>` เดียว (ขั้นที่ไม่แสดงถูกซ่อนไว้ ค่ายังอยู่) → `onSubmit(formData)` ได้ค่าครบทุกขั้น ส่งต่อ server action ได้ตรง ๆ
+ * กด "ถัดไป" ตรวจ required/pattern ของขั้นนั้น + `validate` ก่อนไปต่อ; ขั้นที่ผ่านแล้วกดที่แถบเพื่อย้อนกลับได้
+ * ขั้นสุดท้ายใช้เป็นหน้าตรวจทานได้ (content อ่านค่าจาก state ของแอปเอง)
+ *
+ *   <StepForm onSubmit={createApp} submitLabel="สร้างแอป" steps={[
+ *     { id: "basics", title: "ข้อมูลพื้นฐาน", content: <LabeledField label="ชื่อ"><Input name="name" required /></LabeledField> },
+ *     { id: "oauth", title: "OAuth", content: <TagsInput name="redirectUris" /> ,
+ *       validate: (fd) => (fd.getAll("redirectUris").length ? null : "ต้องมี redirect URI อย่างน้อย 1 รายการ") },
+ *   ]} />
+ */
+export function StepForm({
+  steps,
+  onSubmit,
+  submitLabel,
+  initialStep = 0,
+  onStepChange,
+  footer,
+  className,
+}: {
+  steps: ReadonlyArray<StepFormStep>;
+  /** เรียกเมื่อกดส่งที่ขั้นสุดท้าย — throw / reject = แสดงข้อความ error ใต้ฟอร์ม */
+  onSubmit: (formData: FormData) => unknown | Promise<unknown>;
+  submitLabel?: ReactNode;
+  initialStep?: number;
+  onStepChange?: (index: number, id: string) => void;
+  /** ต่อท้ายแถวปุ่มฝั่งซ้าย เช่น ปุ่มยกเลิก */
+  footer?: ReactNode;
+  className?: string;
+}) {
+  const ui = useUiText();
+  const text = ui.stepForm;
+  const [current, setCurrent] = useState(initialStep);
+  const [reached, setReached] = useState(initialStep);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const formRef = useRef<HTMLFormElement>(null);
+  const sectionRefs = useRef<(HTMLElement | null)[]>([]);
+  const headingRefs = useRef<(HTMLHeadingElement | null)[]>([]);
+  const moved = useRef(false);
+  const last = steps.length - 1;
+  const step = steps[current];
+
+  // ย้ายโฟกัสไปหัวข้อของขั้นใหม่ (screen reader รู้ว่าเปลี่ยนขั้น) — ไม่ทำตอน mount
+  useEffect(() => {
+    if (!moved.current) return;
+    headingRefs.current[current]?.focus();
+  }, [current]);
+
+  const go = (index: number) => {
+    moved.current = true;
+    setError(null);
+    setCurrent(index);
+    setReached((r) => Math.max(r, index));
+    const target = steps[index];
+    if (target) onStepChange?.(index, target.id);
+  };
+
+  /** ตรวจขั้น index — คืน true ถ้าผ่าน */
+  const check = async (index: number): Promise<boolean> => {
+    const native = reportSection(sectionRefs.current[index] ?? null);
+    if (native !== true) {
+      if (typeof native === "string") setError(native);
+      return false;
+    }
+    const s = steps[index];
+    if (s?.validate && formRef.current) {
+      const message = await s.validate(new FormData(formRef.current));
+      if (message) {
+        setError(message);
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (pending) return;
+    setError(null);
+    if (current < last) {
+      if (await check(current)) go(current + 1);
+      return;
+    }
+    // ขั้นสุดท้าย: ตรวจทุกขั้นอีกครั้งแบบเงียบ ขั้นไหนไม่ผ่านพากลับไปขั้นนั้นแล้วค่อยแสดงจุดที่ผิด
+    for (let i = 0; i <= last; i++) {
+      const section = sectionRefs.current[i];
+      const invalid = section
+        ? [...section.querySelectorAll<HTMLInputElement>(CONTROLS)].some(
+            (el) => el.type !== "hidden" && !el.disabled && !el.checkValidity(),
+          )
+        : false;
+      const s = steps[i];
+      const message =
+        !invalid && s?.validate && formRef.current
+          ? await s.validate(new FormData(formRef.current))
+          : null;
+      if (invalid || message) {
+        if (i !== current) go(i);
+        if (message) setError(message);
+        else
+          requestAnimationFrame(() => {
+            const native = reportSection(sectionRefs.current[i] ?? null);
+            if (typeof native === "string") setError(native);
+          });
+        return;
+      }
+    }
+    if (!formRef.current) return;
+    setPending(true);
+    try {
+      await onSubmit(new FormData(formRef.current));
+    } catch (err) {
+      setError(
+        err instanceof Error && err.message ? err.message : (ui.actionFailed ?? "ดำเนินการไม่สำเร็จ"),
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <form
+      ref={formRef}
+      noValidate
+      onSubmit={handleSubmit}
+      data-slot="step-form"
+      className={cn("flex flex-col gap-6", className)}
+    >
+      <nav aria-label={text?.label ?? "ขั้นตอน"}>
+        <p className="mb-2 text-muted-foreground text-xs sm:hidden">
+          {(text?.progress ?? "ขั้นที่ {current} จาก {total}")
+            .replace("{current}", String(current + 1))
+            .replace("{total}", String(steps.length))}
+        </p>
+        <ol className="flex items-center gap-2">
+          {steps.map((s, i) => {
+            const done = i < reached;
+            const active = i === current;
+            const clickable = i <= reached && !active && !pending;
+            return (
+              <li
+                key={s.id}
+                className={cn("flex min-w-0 items-center gap-2", i < last && "flex-1")}
+              >
+                <button
+                  type="button"
+                  disabled={!clickable}
+                  aria-current={active ? "step" : undefined}
+                  onClick={() => go(i)}
+                  className="flex min-w-0 items-center gap-2 rounded-md text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-default"
+                >
+                  <span
+                    className={cn(
+                      "flex size-7 shrink-0 items-center justify-center rounded-full border text-sm tabular-nums transition-colors",
+                      active && "border-primary bg-primary text-primary-foreground",
+                      !active && done && "border-primary text-primary",
+                      !active && !done && "text-muted-foreground",
+                    )}
+                  >
+                    {!active && done ? <CheckIcon className="size-4" /> : i + 1}
+                  </span>
+                  <span
+                    className={cn(
+                      "hidden truncate text-sm sm:inline",
+                      active ? "font-medium" : "text-muted-foreground",
+                    )}
+                  >
+                    {s.title}
+                  </span>
+                </button>
+                {i < last && (
+                  <span
+                    aria-hidden
+                    className={cn("h-px min-w-4 flex-1", i < reached ? "bg-primary" : "bg-border")}
+                  />
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+
+      {steps.map((s, i) => (
+        <section
+          key={s.id}
+          ref={(el) => {
+            sectionRefs.current[i] = el;
+          }}
+          hidden={i !== current}
+          aria-labelledby={`${s.id}-step-title`}
+          className="flex flex-col gap-4"
+        >
+          <div className="flex flex-col gap-1">
+            <h2
+              id={`${s.id}-step-title`}
+              ref={(el) => {
+                headingRefs.current[i] = el;
+              }}
+              tabIndex={-1}
+              className="font-semibold text-base outline-none"
+            >
+              {s.title}
+            </h2>
+            {s.description && <p className="text-muted-foreground text-sm">{s.description}</p>}
+          </div>
+          {s.content}
+        </section>
+      ))}
+
+      {error && (
+        <p role="alert" className="text-destructive text-sm">
+          {error}
+        </p>
+      )}
+
+      <div className="flex flex-wrap items-center gap-2 border-t pt-4">
+        {footer}
+        <div className="ml-auto flex gap-2">
+          {current > 0 && (
+            <Button
+              type="button"
+              variant="outline"
+              disabled={pending}
+              onClick={() => go(current - 1)}
+            >
+              {text?.previous ?? "ย้อนกลับ"}
+            </Button>
+          )}
+          <Button type="submit" disabled={pending || !step}>
+            {pending && <Spinner />}
+            {current < last ? (text?.next ?? "ถัดไป") : (submitLabel ?? text?.submit ?? "ส่ง")}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}