@suphark/ui 0.24.0 → 0.25.1

package/src/components/shared/month-stepper.tsx

@@ -38,6 +38,9 @@ export interface MonthStepperProps {
  *   const { month, setMonth } = useMonthCursor();
  *   <MonthStepper value={month} onValueChange={setMonth} />
  */
+/** "เดือนนี้" ของ MonthStepper/useMonthCursor คิดตามเวลาไทย — แอปของเราใช้ในไทย และต้องได้ค่าเดียวกันทั้ง server และ browser */
+const APP_TIME_ZONE = "Asia/Bangkok";
+
 export function MonthStepper({
   value,
   onValueChange,
@@ -54,7 +57,8 @@ export function MonthStepper({
   const next = shiftMonth(value, 1);
   const canPrev = !min || compareMonth(prev, min) >= 0;
   const canNext = !max || compareMonth(next, max) <= 0;
-  const now = currentMonthKey();
+  // โซนเวลาคงที่: server (UTC) กับ browser ได้เดือนเดียวกัน — ไม่งั้นช่วง 00–07 น. วันที่ 1 จะ hydration mismatch
+  const now = currentMonthKey(undefined, APP_TIME_ZONE);
   const nowInRange = (!min || compareMonth(now, min) >= 0) && (!max || compareMonth(now, max) <= 0);
   const label = formatLabel ? formatLabel(value) : formatMonthKey(value, locale, format);
   const isCurrent = value === now;
@@ -112,13 +116,15 @@ export function MonthStepper({
 }
 
 /**
- * state เดือนปัจจุบัน + ตัวเลื่อน — `initial` ไม่ส่ง = เดือนนี้
+ * state เดือนปัจจุบัน + ตัวเลื่อน — `initial` ไม่ส่ง = เดือนนี้ (ตามเวลาไทย เพื่อให้ server/browser ตรงกัน)
  * ต้องการเก็บใน URL ให้ใช้ `useTableSearchParams`/searchParams ของแอปแทน แล้วส่ง value/onValueChange เอง
  */
 export function useMonthCursor(initial?: MonthKey) {
-  const [month, setMonth] = useState<MonthKey>(() => initial ?? currentMonthKey());
+  const [month, setMonth] = useState<MonthKey>(
+    () => initial ?? currentMonthKey(undefined, APP_TIME_ZONE),
+  );
   const previous = useCallback(() => setMonth((m) => shiftMonth(m, -1)), []);
   const next = useCallback(() => setMonth((m) => shiftMonth(m, 1)), []);
-  const reset = useCallback(() => setMonth(currentMonthKey()), []);
+  const reset = useCallback(() => setMonth(currentMonthKey(undefined, APP_TIME_ZONE)), []);
   return { month, setMonth, previous, next, reset };
 }

package/src/components/shared/row-actions.tsx

@@ -13,7 +13,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
-import { errorMessage } from "./button/confirm-action-button";
+import { errorMessage, failedResult } from "./button/confirm-action-button";
 import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
@@ -58,10 +58,16 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
       for (const [k, v] of Object.entries(it.data ?? {})) fd.set(k, v);
       const act = it.action;
       start(async () => {
+        const fallback = text.actionFailed ?? "ดำเนินการไม่สำเร็จ";
         try {
-          await act(fd);
+          // คืน { ok: false, error } (FormState) ก็ถือว่าล้มเหลวเหมือน throw
+          const failed = failedResult(await act(fd), fallback);
+          if (failed) {
+            toast.error(failed);
+            return;
+          }
         } catch (err) {
-          toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+          toast.error(errorMessage(err, fallback));
           return;
         }
         router.refresh();

package/src/components/shared/settings-layout.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@suphark/ui/lib/utils";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { type ReactNode, useEffect, useId, useMemo, useRef, useState } from "react";
+import { type ReactNode, useId, useMemo, useRef, useState } from "react";
 import { SearchInput } from "./form/search-input";
 import { useUiText } from "./ui-text";
 
@@ -53,6 +53,7 @@ export function SettingsLayout({
   const [mobileDetail, setMobileDetail] = useState(false);
   const [query, setQuery] = useState("");
   const headingRef = useRef<HTMLHeadingElement>(null);
+  const navRef = useRef<HTMLElement>(null);
 
   const visible = useMemo(() => {
     const q = query.trim().toLowerCase();
@@ -71,12 +72,20 @@ export function SettingsLayout({
     if (valueProp === undefined) setInner(id);
     onValueChange?.(id);
     setMobileDetail(true);
+    // มือถือ: รายการหัวข้อถูกซ่อน → ย้ายโฟกัสไปหัวข้อ ให้ screen reader รู้ว่าเนื้อหาเปลี่ยน
+    // (จอกว้างเห็นทั้งสองฝั่ง โฟกัสอยู่ที่รายการต่อได้ — ไม่ย้าย)
+    if (!window.matchMedia?.("(min-width: 48rem)").matches) {
+      requestAnimationFrame(() => headingRef.current?.focus({ preventScroll: true }));
+    }
   };
 
-  // เข้าหน้าหัวข้อบนมือถือ → ย้ายโฟกัสไปหัวข้อ ให้ screen reader รู้ว่าเนื้อหาเปลี่ยน
-  useEffect(() => {
-    if (mobileDetail) headingRef.current?.focus({ preventScroll: true });
-  }, [mobileDetail]);
+  /** มือถือ: กลับไปรายการ — ปุ่ม "กลับ" ถูกซ่อน จึงคืนโฟกัสให้หัวข้อที่เพิ่งเปิด (ไม่งั้นโฟกัสหลุดไป body) */
+  const back = (id: string) => {
+    setMobileDetail(false);
+    requestAnimationFrame(() =>
+      navRef.current?.querySelector<HTMLElement>(`[data-section-id="${CSS.escape(id)}"]`)?.focus(),
+    );
+  };
 
   if (!current) return null;
 
@@ -87,6 +96,7 @@ export function SettingsLayout({
       className={cn("grid gap-6 md:grid-cols-[14rem_minmax(0,1fr)] lg:gap-8", className)}
     >
       <nav
+        ref={navRef}
         aria-label={text.settings?.label ?? "หัวข้อการตั้งค่า"}
         className={cn(
           "flex flex-col gap-3 md:sticky md:top-20 md:self-start",
@@ -108,6 +118,7 @@ export function SettingsLayout({
                 <li key={s.id}>
                   <button
                     type="button"
+                    data-section-id={s.id}
                     onClick={() => select(s.id)}
                     aria-current={selected ? "page" : undefined}
                     className={cn(
@@ -144,7 +155,7 @@ export function SettingsLayout({
       >
         <button
           type="button"
-          onClick={() => setMobileDetail(false)}
+          onClick={() => back(current.id)}
           className="-ml-1 flex w-fit items-center gap-1 rounded-md px-1 py-1 text-muted-foreground text-sm outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring md:hidden"
         >
           <ChevronLeft className="size-4" aria-hidden />

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

@@ -0,0 +1,304 @@
+"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;
+  const controls = [...section.querySelectorAll<HTMLInputElement>(CONTROLS)];
+  for (const [i, el] of controls.entries()) {
+    if (el.type === "hidden" || el.disabled) continue;
+    if (!el.checkValidity()) {
+      if (el.getAttribute("aria-hidden") === "true") {
+        // input ซ่อนของ Base UI อยู่ถัดจากช่องที่มองเห็นของมัน → โฟกัสช่องที่มองเห็นตัวก่อนหน้าที่ใกล้ที่สุด
+        controls
+          .slice(0, i)
+          .reverse()
+          .find((c) => c.getAttribute("aria-hidden") !== "true" && c.type !== "hidden")
+          ?.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);
+  /** กันส่งซ้ำแบบ synchronous (state pending อัปเดตไม่ทันดับเบิลคลิก) */
+  const busy = useRef(false);
+  /** เวลาที่เปลี่ยนขั้นล่าสุด — คลิกที่สองของดับเบิลคลิก "ถัดไป" ตกที่ปุ่ม "ส่ง" ตำแหน่งเดิม */
+  const movedAt = useRef(0);
+  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;
+    movedAt.current = Date.now();
+    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 (busy.current) return;
+    // ปุ่ม "ถัดไป" กลายเป็น "ส่ง" ที่ตำแหน่งเดิม — คลิกที่มาเร็วเกินหลังเปลี่ยนขั้นไม่นับเป็นการส่ง (ผู้ใช้ยังไม่ได้เห็นหน้าตรวจทาน)
+    if (current === last && Date.now() - movedAt.current < 500) return;
+    busy.current = true;
+    try {
+      await submitStep();
+    } finally {
+      busy.current = false;
+    }
+  };
+
+  const submitStep = async () => {
+    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>
+  );
+}

package/src/components/shared/time/client-date-formatter.tsx

@@ -4,7 +4,8 @@ import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { useTicker } from "@suphark/ui/hooks/use-ticker";
 import { getDateTimeFormat } from "@suphark/ui/lib/intl-cache";
 import { formatDistance, type Locale } from "date-fns";
-import { enUS, th } from "date-fns/locale";
+import { enUS } from "date-fns/locale/en-US";
+import { th } from "date-fns/locale/th";
 import { useMemo } from "react";
 
 interface ClientDateFormatterProps {

package/src/components/shared/tree-view.tsx

@@ -88,8 +88,12 @@ export function TreeView({
   className,
 }: TreeViewProps) {
   const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => toSet(defaultExpandedIds));
-  const expanded =
-    controlledExpanded !== undefined ? toSet(controlledExpanded) : uncontrolledExpanded;
+  // Set ใหม่ทุก render ทำให้ memo ของ rows คำนวณใหม่ทุกครั้ง — สร้างเมื่อ prop เปลี่ยนเท่านั้น
+  const controlledSet = useMemo(
+    () => (controlledExpanded !== undefined ? toSet(controlledExpanded) : null),
+    [controlledExpanded],
+  );
+  const expanded = controlledSet ?? uncontrolledExpanded;
   const [loaded, setLoaded] = useState<Map<string, TreeNode[]>>(() => new Map());
   const [loading, setLoading] = useState<Set<string>>(() => new Set());
   const [focusId, setFocusId] = useState<string | null>(null);

package/src/components/shared/ui-text.tsx

@@ -89,6 +89,28 @@ export interface UiText {
   presence?: Partial<{ online: string; away: string; busy: string; offline: string }>;
   /** TextareaField (optional) — ข้อความ screen reader ของตัวนับ ใช้ {count} {max} */
   characterCount?: string;
+  /** NumberInput (optional) */
+  number?: Partial<{ increment: string; decrement: string }>;
+  /** TimePicker / DateTimePicker (optional) */
+  time?: Partial<{
+    choose: string;
+    hour: string;
+    minute: string;
+    now: string;
+    clear: string;
+    dateTimePlaceholder: string;
+    invalid: string;
+  }>;
+  /** TagsInput (optional) — remove ใช้ {tag}, duplicate ใช้ {tag}, max ใช้ {max} */
+  tags?: Partial<{ placeholder: string; remove: string; duplicate: string; max: string }>;
+  /** StepForm (optional) — progress ใช้ {current} {total} */
+  stepForm?: Partial<{
+    label: string;
+    previous: string;
+    next: string;
+    submit: string;
+    progress: string;
+  }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -156,6 +178,29 @@ export const UI_TEXT_TH: UiText = {
   loading: "กำลังโหลด…",
   presence: { online: "ออนไลน์", away: "ไม่อยู่", busy: "ไม่ว่าง", offline: "ออฟไลน์" },
   characterCount: "พิมพ์แล้ว {count} จาก {max} ตัวอักษร",
+  number: { increment: "เพิ่ม", decrement: "ลด" },
+  time: {
+    choose: "เลือกเวลา",
+    hour: "ชั่วโมง",
+    minute: "นาที",
+    now: "ตอนนี้",
+    clear: "ล้าง",
+    dateTimePlaceholder: "เลือกวันและเวลา",
+    invalid: "รูปแบบเวลาไม่ถูกต้อง (เช่น 14:30)",
+  },
+  tags: {
+    placeholder: "พิมพ์แล้วกด Enter",
+    remove: "ลบ {tag}",
+    duplicate: "มี “{tag}” แล้ว",
+    max: "เพิ่มได้สูงสุด {max} รายการ",
+  },
+  stepForm: {
+    label: "ขั้นตอน",
+    previous: "ย้อนกลับ",
+    next: "ถัดไป",
+    submit: "ส่ง",
+    progress: "ขั้นที่ {current} จาก {total}",
+  },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -223,6 +268,29 @@ export const UI_TEXT_EN: UiText = {
   loading: "Loading…",
   presence: { online: "Online", away: "Away", busy: "Busy", offline: "Offline" },
   characterCount: "{count} of {max} characters",
+  number: { increment: "Increase", decrement: "Decrease" },
+  time: {
+    choose: "Choose time",
+    hour: "Hour",
+    minute: "Minute",
+    now: "Now",
+    clear: "Clear",
+    dateTimePlaceholder: "Pick date and time",
+    invalid: "Invalid time (e.g. 14:30)",
+  },
+  tags: {
+    placeholder: "Type and press Enter",
+    remove: "Remove {tag}",
+    duplicate: "“{tag}” is already added",
+    max: "Up to {max} items",
+  },
+  stepForm: {
+    label: "Steps",
+    previous: "Back",
+    next: "Next",
+    submit: "Submit",
+    progress: "Step {current} of {total}",
+  },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/data-table.ts

@@ -7,7 +7,18 @@
  * ```
  * state ของตารางใน URL (`useTableSearchParams`) ต้องใช้ next/navigation → อยู่ที่ `@suphark/ui/next`
  */
-export * from "./components/data-table";
+export {
+  DataTable,
+  DataTableColumnHeader,
+  DataTableDateRangeFilter,
+  DataTableFacetedFilter,
+  DataTablePagination,
+  type DataTableProps,
+  DataTableToolbar,
+  DataTableViewOptions,
+  type FacetedFilterConfig,
+  useDataTable,
+} from "./components/data-table";
 export { DataTableRowActions } from "./components/data-table/data-table-row-actions";
 export { DeleteManyButton } from "./components/shared/button/delete-many-button";
 export {

package/src/hooks/use-table-search-params.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useMemo, useTransition } from "react";
+import { useCallback, useEffect, useMemo, useRef, useTransition } from "react";
 
 /**
  * เก็บ state ของตาราง (หน้า, ขนาดหน้า, การเรียง, คำค้น, ตัวกรอง) ไว้ใน URL
@@ -71,10 +71,18 @@ export function useTableSearchParams(defaults?: { pageSize?: number }) {
     };
   }, [searchParams, defaults?.pageSize]);
 
+  // setter หลายตัวในจังหวะเดียว (เช่น setFilter แล้ว setSort) ต้องต่อจากค่าที่เพิ่งตั้ง ไม่ใช่ searchParams ตอน render
+  // (router.replace ยังไม่ทันเปลี่ยน URL → ตัวหลังเขียนทับตัวแรก) — ล้างเมื่อ URL เปลี่ยนจริงแล้ว
+  const latest = useRef<string | null>(null);
+  useEffect(() => {
+    latest.current = null;
+  }, [searchParams]);
+
   const push = useCallback(
     (mutate: (params: URLSearchParams) => void) => {
-      const params = new URLSearchParams(searchParams.toString());
+      const params = new URLSearchParams(latest.current ?? searchParams.toString());
       mutate(params);
+      latest.current = params.toString();
       startTransition(() => {
         router.replace(`${pathname}?${params.toString()}`, { scroll: false });
       });

package/src/hooks/use-ticker.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
 /**
  * นาฬิกากลางต่อ interval — ทุก component ที่ขอ interval เท่ากันแชร์ `setInterval` ตัวเดียว
@@ -45,9 +45,15 @@ const zero = () => 0;
  */
 export function useTicker(intervalMs: number | undefined): number {
   const active = typeof intervalMs === "number" && intervalMs > 0;
-  return useSyncExternalStore(
-    active ? (l) => subscribe(intervalMs, l) : subscribeNoop,
-    active ? () => getTicker(intervalMs).tick : zero,
-    zero,
+  // subscribe ต้องคงที่ข้าม render — ฟังก์ชันใหม่ทุก render ทำให้ unsubscribe/subscribe ใหม่
+  // (ผู้ใช้ตัวเดียว = clearInterval แล้วเริ่มนับใหม่ทุกครั้งที่ parent render → ถ้า render บ่อยกว่า interval จะไม่ tick เลย)
+  const subscribeActive = useCallback(
+    (listener: () => void) => (active ? subscribe(intervalMs, listener) : subscribeNoop()),
+    [active, intervalMs],
   );
+  const getSnapshot = useCallback(
+    () => (active ? getTicker(intervalMs).tick : 0),
+    [active, intervalMs],
+  );
+  return useSyncExternalStore(subscribeActive, getSnapshot, zero);
 }