@suphark/ui 0.23.0 → 0.25.0

package/src/components/shared/skeletons.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { Skeleton } from "@suphark/ui/components/ui/skeleton";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+import { useUiText } from "./ui-text";
+
+/** ความกว้างสลับกันให้ดูเป็นข้อความจริง (คงที่ทุก render — ไม่ใช้ random กัน hydration mismatch) */
+const WIDTHS = ["w-3/4", "w-1/2", "w-2/3", "w-5/6", "w-2/5"] as const;
+const widthAt = (i: number) => WIDTHS[i % WIDTHS.length];
+
+const GRID_COLS: Record<number, string> = {
+  1: "",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+};
+
+/** กล่องนอกของ skeleton: role=status + ข้อความ "กำลังโหลด…" สำหรับ screen reader */
+function LoadingRegion({
+  slot,
+  label,
+  className,
+  children,
+}: {
+  slot: string;
+  label?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  const text = useUiText().loading ?? "กำลังโหลด…";
+  return (
+    <div data-slot={slot} role="status" aria-busy="true" className={className}>
+      <span className="sr-only">{label ?? text}</span>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * โครงตารางระหว่างโหลด (loading.tsx ของหน้ารายการ) — หัวตาราง + แถวตามจำนวน คอลัมน์แรกกว้างกว่า
+ *
+ *   export default function Loading() { return <TableSkeleton rows={8} columns={5} /> }
+ */
+export function TableSkeleton({
+  rows = 5,
+  columns = 4,
+  header = true,
+  label,
+  className,
+}: {
+  rows?: number;
+  columns?: number;
+  /** แสดงแถวหัวตาราง */
+  header?: boolean;
+  /** ข้อความ screen reader (ค่าเริ่มต้น UiText.loading) */
+  label?: string;
+  className?: string;
+}) {
+  const template = { gridTemplateColumns: `2fr repeat(${Math.max(columns - 1, 0)}, 1fr)` };
+  const cols = Array.from({ length: columns }, (_, c) => c);
+  return (
+    <LoadingRegion
+      slot="table-skeleton"
+      label={label}
+      className={cn("overflow-hidden rounded-lg border", className)}
+    >
+      {header && (
+        <div className="grid items-center gap-4 border-b bg-muted/50 px-3 py-2.5" style={template}>
+          {cols.map((c) => (
+            <Skeleton key={c} className="h-3.5 w-1/2" />
+          ))}
+        </div>
+      )}
+      {Array.from({ length: rows }, (_, r) => (
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: แถวโครงคงที่ ไม่มีการเรียงใหม่
+          key={r}
+          className="grid items-center gap-4 border-b px-3 py-3 last:border-b-0"
+          style={template}
+        >
+          {cols.map((c) => (
+            <Skeleton key={c} className={cn("h-4", widthAt(r + c))} />
+          ))}
+        </div>
+      ))}
+    </LoadingRegion>
+  );
+}
+
+/**
+ * โครงรายการระหว่างโหลด — avatar (เลือกได้) + ข้อความ 1–2 บรรทัดต่อแถว
+ *
+ *   <ListSkeleton rows={4} avatar lines={2} />
+ */
+export function ListSkeleton({
+  rows = 5,
+  avatar = true,
+  lines = 2,
+  label,
+  className,
+}: {
+  rows?: number;
+  avatar?: boolean;
+  /** จำนวนบรรทัดข้อความต่อแถว (1 หรือ 2) */
+  lines?: 1 | 2;
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <LoadingRegion
+      slot="list-skeleton"
+      label={label}
+      className={cn("flex flex-col gap-4", className)}
+    >
+      {Array.from({ length: rows }, (_, r) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: แถวโครงคงที่ ไม่มีการเรียงใหม่
+        <div key={r} className="flex items-center gap-3">
+          {avatar && <Skeleton className="size-9 shrink-0 rounded-full" />}
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <Skeleton className={cn("h-4", widthAt(r))} />
+            {lines === 2 && <Skeleton className={cn("h-3", widthAt(r + 2))} />}
+          </div>
+        </div>
+      ))}
+    </LoadingRegion>
+  );
+}
+
+/**
+ * โครงการ์ดระหว่างโหลด — การ์ดตัวเลข (`variant="stat"` ค่าเริ่มต้น แบบ StatGrid) หรือการ์ดเนื้อหา (`variant="content"`)
+ *
+ *   <CardSkeleton count={4} />   <CardSkeleton count={3} variant="content" />
+ */
+export function CardSkeleton({
+  count = 3,
+  variant = "stat",
+  label,
+  className,
+}: {
+  count?: number;
+  variant?: "stat" | "content";
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <LoadingRegion
+      slot="card-skeleton"
+      label={label}
+      className={cn("grid gap-4", GRID_COLS[Math.min(Math.max(count, 1), 4)], className)}
+    >
+      {Array.from({ length: count }, (_, i) => (
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: การ์ดโครงคงที่ ไม่มีการเรียงใหม่
+          key={i}
+          className="flex flex-col gap-3 rounded-xl border bg-card p-4"
+        >
+          {variant === "stat" ? (
+            <>
+              <Skeleton className="h-3.5 w-1/2" />
+              <Skeleton className="h-7 w-2/3" />
+              <Skeleton className="h-3 w-1/3" />
+            </>
+          ) : (
+            <>
+              <Skeleton className="h-5 w-2/3" />
+              <Skeleton className="h-3.5 w-full" />
+              <Skeleton className={cn("h-3.5", widthAt(i))} />
+              <Skeleton className="mt-2 h-8 w-24" />
+            </>
+          )}
+        </div>
+      ))}
+    </LoadingRegion>
+  );
+}

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>
+  );
+}

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

@@ -83,6 +83,33 @@ export interface UiText {
   chat?: Partial<{ placeholder: string; send: string; typing: string; scrollToLatest: string }>;
   /** SimplePagination (optional) */
   pagination?: Partial<{ previous: string; next: string; label: string; page: string }>;
+  /** TableSkeleton/ListSkeleton/CardSkeleton (optional) — ข้อความสำหรับ screen reader */
+  loading?: string;
+  /** สถานะออนไลน์ของ UserIdentity/Initials (optional) */
+  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;
+  }>;
+  /** 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 = {
@@ -147,6 +174,31 @@ export const UI_TEXT_TH: UiText = {
     scrollToLatest: "ไปข้อความล่าสุด",
   },
   pagination: { previous: "ก่อนหน้า", next: "ถัดไป", label: "แบ่งหน้า", page: "หน้า" },
+  loading: "กำลังโหลด…",
+  presence: { online: "ออนไลน์", away: "ไม่อยู่", busy: "ไม่ว่าง", offline: "ออฟไลน์" },
+  characterCount: "พิมพ์แล้ว {count} จาก {max} ตัวอักษร",
+  number: { increment: "เพิ่ม", decrement: "ลด" },
+  time: {
+    choose: "เลือกเวลา",
+    hour: "ชั่วโมง",
+    minute: "นาที",
+    now: "ตอนนี้",
+    clear: "ล้าง",
+    dateTimePlaceholder: "เลือกวันและเวลา",
+  },
+  tags: {
+    placeholder: "พิมพ์แล้วกด Enter",
+    remove: "ลบ {tag}",
+    duplicate: "มี “{tag}” แล้ว",
+    max: "เพิ่มได้สูงสุด {max} รายการ",
+  },
+  stepForm: {
+    label: "ขั้นตอน",
+    previous: "ย้อนกลับ",
+    next: "ถัดไป",
+    submit: "ส่ง",
+    progress: "ขั้นที่ {current} จาก {total}",
+  },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -211,6 +263,31 @@ export const UI_TEXT_EN: UiText = {
     scrollToLatest: "Jump to latest",
   },
   pagination: { previous: "Previous", next: "Next", label: "Pagination", page: "Page" },
+  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",
+  },
+  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/components/shared/user-avatars.tsx

@@ -0,0 +1,68 @@
+import { AvatarGroup, AvatarGroupCount } from "@suphark/ui/components/ui/avatar";
+import { Initials } from "./initials";
+import type { Presence } from "./presence-dot";
+
+export interface UserAvatarItem {
+  /** key ของ React (ไม่ส่ง = ใช้ชื่อ) */
+  id?: string;
+  name: string | null | undefined;
+  src?: string | null;
+  status?: Presence;
+}
+
+/**
+ * รูปผู้ใช้ซ้อนกัน + "+N" — ผู้รับผิดชอบงาน, สมาชิกทีม, คนที่ดูอยู่ (แทน AvatarGroup + Avatar + AvatarImage + AvatarFallback + AvatarGroupCount)
+ * ไม่มีรูป = ตัวย่อชื่อสีคงที่ต่อชื่อ; ชี้ที่รูปเห็นชื่อ, ที่ "+N" เห็นชื่อที่เหลือ; screen reader อ่านชื่อทั้งหมด
+ * ใช้จาก server component ได้
+ *
+ *   <UserAvatars users={task.assignees} max={3} size="sm" />
+ */
+export function UserAvatars({
+  users,
+  max = 4,
+  size = "default",
+  label,
+  className,
+}: {
+  users: ReadonlyArray<UserAvatarItem>;
+  /** จำนวนรูปที่แสดงก่อนรวบเป็น "+N" (นับรวมช่อง +N) */
+  max?: number;
+  size?: "sm" | "default" | "lg";
+  /** ข้อความนำหน้ารายชื่อสำหรับ screen reader เช่น "ผู้รับผิดชอบ" */
+  label?: string;
+  className?: string;
+}) {
+  const overflow = users.length > max;
+  const shown = overflow ? users.slice(0, Math.max(max - 1, 1)) : users;
+  const rest = users.slice(shown.length);
+  const names = users.map((u) => u.name?.trim() || "—").join(", ");
+  return (
+    <AvatarGroup
+      data-slot="user-avatars"
+      role="group"
+      aria-label={label ? `${label}: ${names}` : names}
+      className={className}
+    >
+      {shown.map((u, i) => (
+        <Initials
+          key={u.id ?? `${u.name ?? ""}-${i}`}
+          name={u.name}
+          src={u.src}
+          status={u.status}
+          size={size}
+          title={u.name ?? undefined}
+          aria-hidden
+        />
+      ))}
+      {rest.length > 0 && (
+        <AvatarGroupCount
+          aria-hidden
+          title={rest.map((u) => u.name?.trim() || "—").join(", ")}
+          className="text-label font-medium"
+        >
+          +{rest.length}
+        </AvatarGroupCount>
+      )}
+    </AvatarGroup>
+  );
+}

package/src/components/shared/user-identity.tsx

@@ -1,6 +1,7 @@
 import { Initials } from "@suphark/ui/components/shared/initials";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ReactNode } from "react";
+import type { Presence } from "./presence-dot";
 
 export interface UserIdentityProps {
   name: string | null | undefined;
@@ -14,6 +15,8 @@ export interface UserIdentityProps {
   hint?: ReactNode;
   /** sm = ใช้ในแถวตาราง (avatar size-7), default = size-9 */
   size?: "sm" | "default";
+  /** จุดสถานะบน avatar: online / away / busy / offline */
+  status?: Presence;
   /** ซ่อน avatar (เมื่อแถวมีรูปอยู่แล้ว) */
   hideAvatar?: boolean;
   className?: string;
@@ -30,6 +33,7 @@ export function UserIdentity({
   badge,
   hint,
   size = "default",
+  status,
   hideAvatar = false,
   className,
 }: UserIdentityProps) {
@@ -43,6 +47,7 @@ export function UserIdentity({
         <Initials
           name={displayName ?? (typeof email === "string" ? email : "")}
           src={src}
+          status={status}
           className={size === "sm" ? "size-7" : "size-9"}
         />
       )}

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 {