@suphark/ui 0.27.1 → 0.28.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.28.0] — 2026-10-05
+
+### Added
+
+- **`ActivityFeed`** — เส้นเวลา "ใครทำอะไรเมื่อไหร่" จาก array เดียว (audit log ของ Pi Auth, ประวัติงานของ Pi Done, timeline ของเอกสาร): avatar ของผู้ทำหรือไอคอน+โทนสำหรับเหตุการณ์ของระบบ, เวลาสัมพัทธ์ที่คำนวณฝั่ง client หลัง mount (ไม่ทำ hydration mismatch) และช่องใส่ปุ่ม/ป้ายท้ายแถว
+- **`InlineEdit`** — แก้ค่าในที่: คลิกดินสอ → ช่องกรอก (เลือกข้อความเดิมไว้ให้พิมพ์ทับได้ทันที) → Enter/✓ บันทึก, Esc/✕ ยกเลิก พร้อม `validate`, สถานะกำลังบันทึก และ toast เมื่อล้มเหลว (ถือ `{ ok: false, error }` เป็นล้มเหลว, `redirect()` เป็นสำเร็จ) — ใช้กับค่าสั้น ๆ ที่ไม่คุ้มเปิด `FormDialog`
+- **`SelectionBar`** — แถบคำสั่งหมู่ "เลือก N รายการ" + ปุ่มคำสั่ง + ปุ่มล้าง (`floating` กลางล่างจอ หรือ `inline` ในหน้า) ใช้คู่ `DataTable` หรือ `SimpleTable`; ข้อความจาก `UiText.selection`
+- **`SimpleTable` เลือกหลายแถวได้** — `selected` + `onSelectedChange` เปิดช่องติ๊กหน้าแถวและหัวตาราง (เลือกบางส่วนแสดงเป็นขีด), แถวที่เลือกมีพื้นจาง; คลิกช่องติ๊กไม่ไปโดน `onRowClick`
+- `SimpleTabs`: แท็บล้นความกว้างแล้วเลื่อนแนวนอนได้ (ซ่อนแถบเลื่อน) + เงาขอบบอกว่ายังมีแท็บต่อ
+- `UiText` คีย์ใหม่: `edit`, `selection.{selected,clear}`, `table.{rowsPerPage,pageOf,rowsSelected,noResults,deleteTitle,deleteDescription,deleting,deleted,delete}`
+
+### Fixed
+
+- **`DataTable` เลิกใช้ข้อความอังกฤษตายตัว** — "Rows per page", "Page X of Y", "N of M row(s) selected", "No results.", เมนู Edit/Delete, กล่องยืนยันลบ และ toast ตอนลบ ทั้งหมดมาจาก `UiText.table` (ค่าเริ่มต้นภาษาไทย) — `resourceName` แทรกผ่าน `{resource}`
+
 ## [0.27.1] — 2026-10-05
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.27.1",
+  "version": "0.28.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/data-table/data-table-pagination.tsx

@@ -36,13 +36,16 @@ export function DataTablePagination<TData>({
     >
       {isRowSelectionEnabled && (
         <div className="flex-1 text-muted-foreground text-sm max-sm:text-center">
-          {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
+          {(text.table?.rowsSelected ?? "เลือก {selected} จาก {total} แถว")
+            .replace("{selected}", String(table.getFilteredSelectedRowModel().rows.length))
+            .replace("{total}", String(table.getFilteredRowModel().rows.length))}
         </div>
       )}
       <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8">
         <div className="flex items-center gap-2">
-          <p className="font-medium text-sm max-sm:hidden">Rows per page</p>
+          <p className="font-medium text-sm max-sm:hidden">
+            {text.table?.rowsPerPage ?? "แถวต่อหน้า"}
+          </p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
@@ -66,7 +69,9 @@ export function DataTablePagination<TData>({
           </Select>
         </div>
         <div className="flex w-[100px] items-center justify-center font-medium text-sm">
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          {(text.table?.pageOf ?? "หน้า {page} จาก {pages}")
+            .replace("{page}", String(table.getState().pagination.pageIndex + 1))
+            .replace("{pages}", String(table.getPageCount()))}
         </div>
         <div className="flex items-center gap-2">
           <Button

package/src/components/data-table/data-table-row-actions.tsx

@@ -76,6 +76,10 @@ export function DataTableRowActions<TData>({
   idKey = "id" as keyof TData,
 }: DataTableRowActionsProps<TData>) {
   const text = useUiText();
+  // ชื่อชนิดข้อมูล (เช่น "โปรเจกต์") แทรกในข้อความลบ — ไม่ส่งมา = ข้อความไม่มีคำนี้
+  const resource = resourceName ? ` ${resourceName}` : "";
+  const fill = (template: string, name: string) =>
+    template.replace("{resource}", resource).replace("{name}", name);
   const item = row.original;
   const itemRecord = item as Record<string, unknown>;
   const itemName = String(
@@ -96,8 +100,8 @@ export function DataTableRowActions<TData>({
       });
 
       toast.promise(promise, {
-        loading: `Deleting ${resourceName.toLowerCase()} "${itemName}"...`,
-        success: `${resourceName} "${itemName}" deleted successfully.`,
+        loading: fill(text.table?.deleting ?? "กำลังลบ{resource} “{name}”…", itemName),
+        success: fill(text.table?.deleted ?? "ลบ{resource} “{name}” แล้ว", itemName),
         error: (err: Error) => err.message,
       });
     });
@@ -125,7 +129,7 @@ export function DataTableRowActions<TData>({
             {EditDialog && (
               <DropdownMenuItem onClick={() => setIsEditDialogOpen(true)}>
                 <Pen className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-                Edit
+                {text.edit ?? "แก้ไข"}
               </DropdownMenuItem>
             )}
 
@@ -137,7 +141,7 @@ export function DataTableRowActions<TData>({
                 onClick={() => setIsDeleteDialogOpen(true)}
               >
                 <Trash className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-                Delete
+                {text.table?.delete ?? "ลบ"}
               </DropdownMenuItem>
             )}
           </DropdownMenuGroup>
@@ -153,15 +157,16 @@ export function DataTableRowActions<TData>({
         <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
           <AlertDialogContent>
             <AlertDialogHeader>
-              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+              <AlertDialogTitle>{text.table?.deleteTitle ?? "ยืนยันการลบ"}</AlertDialogTitle>
               <AlertDialogDescription>
-                This action cannot be undone. This will permanently delete the{" "}
-                {resourceName.toLowerCase()} &ldquo;{itemName}&rdquo; and remove it from our
-                servers.
+                {fill(
+                  text.table?.deleteDescription ?? "ลบ{resource} “{name}” แล้วกู้คืนไม่ได้",
+                  itemName,
+                )}
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogCancel>{text.cancel}</AlertDialogCancel>
               <DeleteButton onClick={handleDelete} isLoading={isPending} />
             </AlertDialogFooter>
           </AlertDialogContent>

package/src/components/data-table/data-table.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   TableBody,
   TableCell,
@@ -80,6 +81,7 @@ export function DataTable<TData, TValue>({
   onReorder,
   renderCustomView,
 }: DataTableProps<TData, TValue>) {
+  const text = useUiText();
   const { table } = useDataTable({
     columns,
     data,
@@ -221,7 +223,7 @@ export function DataTable<TData, TValue>({
         ) : (
           <TableRow>
             <TableCell colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
-              {emptyStateComponent || "No results."}
+              {emptyStateComponent || (text.table?.noResults ?? "ไม่พบข้อมูล")}
             </TableCell>
           </TableRow>
         )}

package/src/components/shared/activity-feed.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Initials } from "@suphark/ui/components/shared/initials";
+import { ClientDateFormatter } from "@suphark/ui/components/shared/time/client-date-formatter";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+export type ActivityTone = "default" | "info" | "success" | "warning" | "destructive";
+
+export interface ActivityItem {
+  id: string;
+  /** สิ่งที่เกิดขึ้น เช่น "แก้ไขสิทธิ์ของสมชาย" */
+  title: ReactNode;
+  /** รายละเอียดเพิ่ม (ก่อน → หลัง, เหตุผล, IP) */
+  description?: ReactNode;
+  /** ชื่อผู้ทำ — ไม่ส่ง = เหตุการณ์ของระบบ */
+  actor?: string | null;
+  /** รูปผู้ทำ (ไม่มี = ตัวย่อชื่อ) */
+  actorSrc?: string | null;
+  at: Date | string | number;
+  /** ไอคอนแทน avatar (เหตุการณ์ของระบบ เช่น `<KeyIcon />`) */
+  icon?: ReactNode;
+  tone?: ActivityTone;
+  /** มุมขวาของแถว เช่น `<StatusBadge>` หรือปุ่มดูรายละเอียด */
+  action?: ReactNode;
+}
+
+const DOT_TONE: Record<ActivityTone, string> = {
+  default: "bg-muted text-muted-foreground",
+  info: "bg-info-subtle text-info-subtle-foreground",
+  success: "bg-success-subtle text-success-subtle-foreground",
+  warning: "bg-warning-subtle text-warning-subtle-foreground",
+  destructive: "bg-destructive-subtle text-destructive-subtle-foreground",
+};
+
+/**
+ * เส้นเวลา "ใครทำอะไรเมื่อไหร่" จาก array เดียว — audit log (Pi Auth), ประวัติงาน (Pi Done), timeline ของเอกสาร
+ * เวลาคำนวณฝั่ง client หลัง mount (ไม่ทำ hydration mismatch) และอัปเดตเองทุกนาที
+ * รายการที่มี `icon` ใช้ไอคอนแทน avatar; ไม่มีทั้งคู่ = ตัวย่อชื่อผู้ทำ
+ *
+ *   <ActivityFeed items={[{ id: "1", title: "เปลี่ยนสิทธิ์เป็นผู้ดูแล", actor: "สมชาย ใจดี", at: row.createdAt }]} />
+ */
+export function ActivityFeed({
+  items,
+  relative = true,
+  emptyLabel,
+  className,
+}: {
+  items: ReadonlyArray<ActivityItem>;
+  /** true = "5 นาทีที่แล้ว" (ค่าเริ่มต้น) · false = วันที่/เวลาเต็ม */
+  relative?: boolean;
+  /** ไม่มีรายการ (ค่าเริ่มต้น "ยังไม่มีรายการ") */
+  emptyLabel?: ReactNode;
+  className?: string;
+}) {
+  if (items.length === 0) {
+    return (
+      <p className={cn("py-6 text-center text-muted-foreground text-sm", className)}>
+        {emptyLabel ?? "ยังไม่มีรายการ"}
+      </p>
+    );
+  }
+
+  return (
+    <ol data-slot="activity-feed" className={cn("flex flex-col", className)}>
+      {items.map((item, index) => {
+        const tone = item.tone ?? "default";
+        const last = index === items.length - 1;
+        return (
+          <li key={item.id} className="flex gap-3">
+            {/* เส้นแนวตั้ง + จุด/avatar */}
+            <div className="flex flex-col items-center">
+              {item.icon ? (
+                <span
+                  className={cn(
+                    "flex size-7 shrink-0 items-center justify-center rounded-full [&_svg]:size-3.5",
+                    DOT_TONE[tone],
+                  )}
+                >
+                  {item.icon}
+                </span>
+              ) : (
+                <Initials name={item.actor ?? ""} src={item.actorSrc} className="size-7" />
+              )}
+              {!last && <span className="w-px flex-1 bg-border" aria-hidden="true" />}
+            </div>
+            <div className={cn("flex min-w-0 flex-1 gap-3", last ? "pb-0" : "pb-4")}>
+              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <p className="text-sm leading-snug">
+                  {item.actor && <span className="font-medium">{item.actor} </span>}
+                  {item.title}
+                </p>
+                {item.description && (
+                  <div className="text-muted-foreground text-xs">{item.description}</div>
+                )}
+                <ClientDateFormatter
+                  date={item.at}
+                  formatType={relative ? "relative" : "standard"}
+                  options={
+                    relative
+                      ? undefined
+                      : { day: "numeric", month: "short", year: "numeric", timeStyle: "short" }
+                  }
+                  className="text-muted-foreground text-xs"
+                />
+              </div>
+              {item.action && <div className="shrink-0">{item.action}</div>}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/shared/inline-edit.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Input } from "@suphark/ui/components/ui/input";
+import { errorMessage, isNavigationError } from "@suphark/ui/lib/action-result";
+import { cn } from "@suphark/ui/lib/utils";
+import { CheckIcon, Loader2Icon, PencilIcon, XIcon } from "lucide-react";
+import { type ReactNode, useRef, useState } from "react";
+import { toast } from "sonner";
+
+export interface InlineEditProps {
+  value: string;
+  /** บันทึกค่าใหม่ — throw หรือคืน `{ ok: false, error }` = ล้มเหลว (คงโหมดแก้ไขไว้ให้ลองใหม่) */
+  onSave: (value: string) => void | Promise<unknown>;
+  /** ป้ายสำหรับ screen reader ของปุ่มแก้ไข/ช่องกรอก เช่น "ชื่อโปรเจกต์" */
+  label: string;
+  placeholder?: string;
+  /** แสดงแทนค่าว่าง (ค่าเริ่มต้น "—") */
+  emptyLabel?: ReactNode;
+  /** ตรวจก่อนบันทึก — คืนข้อความ = ไม่ผ่าน */
+  validate?: (value: string) => string | null | undefined;
+  /** ค่าเดิมกับค่าใหม่เท่ากัน = ปิดโหมดแก้ไขโดยไม่เรียก `onSave` (ค่าเริ่มต้น true) */
+  skipWhenUnchanged?: boolean;
+  disabled?: boolean;
+  /** sm = ใช้ในแถวตาราง */
+  size?: "sm" | "default";
+  className?: string;
+}
+
+/**
+ * แก้ค่าในที่ — คลิกข้อความ (หรือปุ่มดินสอ) → ช่องกรอก → Enter/✓ บันทึก, Esc/✕ ยกเลิก
+ * ใช้กับค่าสั้น ๆ ที่ไม่คุ้มเปิด dialog (ชื่อโปรเจกต์, ชื่อเล่นของคีย์, หมายเหตุหนึ่งบรรทัด)
+ * ล้มเหลว = ขึ้น toast และคงโหมดแก้ไขไว้ให้ลองใหม่ · ค่ายาว/หลายช่องใช้ `FormDialog`
+ *
+ *   <InlineEdit label="ชื่อโปรเจกต์" value={p.name} onSave={(name) => renameProject(p.id, name)} />
+ */
+export function InlineEdit({
+  value,
+  onSave,
+  label,
+  placeholder,
+  emptyLabel = "—",
+  validate,
+  skipWhenUnchanged = true,
+  disabled = false,
+  size = "default",
+  className,
+}: InlineEditProps) {
+  const text = useUiText();
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [pending, setPending] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // เลือกข้อความทั้งหมดครั้งแรกที่เข้าโหมดแก้ไข — พิมพ์ทับได้ทันที (โฟกัสรอบหลังไม่เลือกซ้ำ)
+  const selectedOnOpen = useRef(false);
+
+  function start() {
+    setDraft(value);
+    selectedOnOpen.current = false;
+    setEditing(true);
+  }
+
+  async function commit() {
+    const next = draft.trim();
+    if (skipWhenUnchanged && next === value.trim()) {
+      setEditing(false);
+      return;
+    }
+    const invalid = validate?.(next);
+    if (invalid) {
+      toast.error(invalid);
+      inputRef.current?.focus();
+      return;
+    }
+    setPending(true);
+    try {
+      const result = await onSave(next);
+      // server action ที่คืน { ok: false, error } ถือว่าล้มเหลวเหมือน throw
+      if (result && typeof result === "object" && "ok" in result && result.ok === false) {
+        const message = "error" in result ? String(result.error) : undefined;
+        toast.error(message || (text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+        return;
+      }
+      setEditing(false);
+    } catch (err) {
+      // action ที่ redirect() = สำเร็จ (Next นำทางให้แล้ว)
+      if (isNavigationError(err)) {
+        setEditing(false);
+        return;
+      }
+      toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+    } finally {
+      setPending(false);
+    }
+  }
+
+  const compact = size === "sm";
+
+  if (!editing) {
+    return (
+      <span
+        data-slot="inline-edit"
+        className={cn("group/inline inline-flex min-w-0 items-center gap-1", className)}
+      >
+        <span
+          className={cn("truncate", compact ? "text-sm" : "", !value && "text-muted-foreground")}
+        >
+          {value || emptyLabel}
+        </span>
+        <Button
+          variant="ghost"
+          size={compact ? "icon-xs" : "icon-sm"}
+          aria-label={`${text.edit ?? "แก้ไข"}: ${label}`}
+          disabled={disabled}
+          onClick={start}
+          className="opacity-0 transition-opacity focus-visible:opacity-100 group-hover/inline:opacity-100"
+        >
+          <PencilIcon />
+        </Button>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      data-slot="inline-edit"
+      className={cn("inline-flex min-w-0 items-center gap-1", className)}
+    >
+      <Input
+        ref={inputRef}
+        // biome-ignore lint/a11y/noAutofocus: เพิ่งกดปุ่มแก้ไข — โฟกัสต่อเนื่องคือสิ่งที่ผู้ใช้คาดหวัง
+        autoFocus
+        aria-label={label}
+        value={draft}
+        placeholder={placeholder}
+        disabled={pending}
+        className={cn("min-w-0", compact && "h-7")}
+        onFocus={(e) => {
+          if (selectedOnOpen.current) return;
+          selectedOnOpen.current = true;
+          e.currentTarget.select();
+        }}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            void commit();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            setEditing(false);
+          }
+        }}
+      />
+      <Button
+        variant="ghost"
+        size={compact ? "icon-xs" : "icon-sm"}
+        aria-label={text.save}
+        disabled={pending}
+        onClick={() => void commit()}
+      >
+        {pending ? <Loader2Icon className="animate-spin" /> : <CheckIcon />}
+      </Button>
+      <Button
+        variant="ghost"
+        size={compact ? "icon-xs" : "icon-sm"}
+        aria-label={text.cancel}
+        disabled={pending}
+        onClick={() => setEditing(false)}
+      >
+        <XIcon />
+      </Button>
+    </span>
+  );
+}

package/src/components/shared/selection-bar.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { cn } from "@suphark/ui/lib/utils";
+import { XIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface SelectionAction {
+  label: string;
+  onClick: () => void;
+  icon?: ReactNode;
+  destructive?: boolean;
+  disabled?: boolean;
+}
+
+export interface SelectionBarProps {
+  /** จำนวนที่เลือก — 0 = ไม่แสดงอะไรเลย */
+  count: number;
+  /** ล้างการเลือก (เช่น `table.resetRowSelection`) */
+  onClear: () => void;
+  /** ปุ่มคำสั่งหมู่ — ใส่เป็น array หรือจะส่ง `children` เป็น element เองก็ได้ */
+  actions?: ReadonlyArray<SelectionAction>;
+  children?: ReactNode;
+  /** ข้อความนับ ใช้ `{count}` เช่น "เลือก {count} รายการ" (ไม่ส่ง = `UiText.selection.selected`) */
+  label?: string;
+  /** floating = แถบลอยกลางล่างจอ (ค่าเริ่มต้น) · inline = แถบในหน้า เหนือตาราง */
+  variant?: "floating" | "inline";
+  className?: string;
+}
+
+/**
+ * แถบคำสั่งหมู่ที่โผล่เมื่อเลือกหลายแถว — "เลือก N รายการ" + ปุ่มคำสั่ง + ปุ่มล้าง
+ * ใช้คู่ `DataTable` (`table.getFilteredSelectedRowModel().rows`) หรือ `SimpleTable` ที่แอปคุม state เอง
+ * คำสั่งที่ย้อนกลับไม่ได้ให้ส่ง element ของ `ConfirmActionButton`/`DeleteManyButton` ผ่าน `children`
+ *
+ *   <SelectionBar count={selected.length} onClear={() => table.resetRowSelection()}
+ *     actions={[{ label: "ส่งออก", onClick: exportRows }, { label: "ลบ", destructive: true, onClick: removeRows }]} />
+ */
+export function SelectionBar({
+  count,
+  onClear,
+  actions,
+  children,
+  label,
+  variant = "floating",
+  className,
+}: SelectionBarProps) {
+  const text = useUiText();
+  if (count <= 0) return null;
+
+  const template = label ?? text.selection?.selected ?? "เลือก {count} รายการ";
+  const message = template.replace("{count}", String(count));
+
+  return (
+    <div
+      data-slot="selection-bar"
+      // อ่านออกเสียงจำนวนที่เลือกให้ screen reader โดยไม่ขัดจังหวะ
+      aria-live="polite"
+      className={cn(
+        "flex items-center gap-2 rounded-xl border bg-card px-3 py-2 shadow-lg",
+        variant === "floating" &&
+          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 max-w-[calc(100vw-2rem)]",
+        className,
+      )}
+    >
+      <span className="shrink-0 font-medium text-sm tabular-nums">{message}</span>
+      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+        {actions?.map((action) => (
+          <Button
+            key={action.label}
+            size="sm"
+            variant={action.destructive ? "destructive" : "outline"}
+            disabled={action.disabled}
+            onClick={action.onClick}
+          >
+            {action.icon}
+            {action.label}
+          </Button>
+        ))}
+        {children}
+      </div>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label={text.selection?.clear ?? "ล้างการเลือก"}
+        onClick={onClear}
+        className="ml-auto shrink-0"
+      >
+        <XIcon />
+      </Button>
+    </div>
+  );
+}

package/src/components/shared/simple-table.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -38,6 +39,10 @@ export function SimpleTable<T>({
   getRowKey,
   empty = "ไม่มีข้อมูล",
   onRowClick,
+  selected,
+  onSelectedChange,
+  selectLabel = "เลือกแถว",
+  selectAllLabel = "เลือกทั้งหมด",
   caption,
   className,
 }: {
@@ -45,6 +50,13 @@ export function SimpleTable<T>({
   rows: ReadonlyArray<T>;
   getRowKey: (row: T, index: number) => string | number;
   empty?: ReactNode;
+  /** คีย์ของแถวที่เลือก — ส่งคู่กับ `onSelectedChange` เพื่อเปิดช่องติ๊กหน้าแถว (ใช้คู่ `SelectionBar`) */
+  selected?: ReadonlyArray<string | number>;
+  onSelectedChange?: (selected: Array<string | number>) => void;
+  /** aria-label ของช่องติ๊กแต่ละแถว (ค่าเริ่มต้น "เลือกแถว") */
+  selectLabel?: string;
+  /** aria-label ของช่องติ๊กบนหัวตาราง (ค่าเริ่มต้น "เลือกทั้งหมด") */
+  selectAllLabel?: string;
   /** คลิกทั้งแถว (เช่นเปิดรายละเอียด) — ปุ่มในแถวควร stopPropagation เอง */
   onRowClick?: (row: T) => void;
   /** คำอธิบายตารางสำหรับ screen reader (sr-only) */
@@ -53,12 +65,37 @@ export function SimpleTable<T>({
 }) {
   const alignClass = (a?: "left" | "center" | "right") =>
     a === "right" ? "text-right tabular-nums" : a === "center" ? "text-center" : undefined;
+
+  const selectable = Boolean(onSelectedChange);
+  const selectedKeys = new Set(selected ?? []);
+  const allKeys = rows.map((row, i) => getRowKey(row, i));
+  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedKeys.has(k));
+  const someSelected = !allSelected && allKeys.some((k) => selectedKeys.has(k));
+
+  function toggleRow(key: string | number, checked: boolean) {
+    const next = new Set(selectedKeys);
+    if (checked) next.add(key);
+    else next.delete(key);
+    onSelectedChange?.([...next]);
+  }
   return (
     <div className={cn("overflow-hidden rounded-xl border bg-card", className)}>
       <Table>
         {caption && <caption className="sr-only">{caption}</caption>}
         <TableHeader>
           <TableRow>
+            {selectable && (
+              <TableHead className="w-10">
+                <Checkbox
+                  aria-label={selectAllLabel}
+                  checked={allSelected}
+                  indeterminate={someSelected}
+                  // ครึ่งหนึ่ง: ซ่อนเครื่องหมายถูก แสดงขีดแทน (ไฟล์ shadcn ไม่มีไอคอนขีด)
+                  className="data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-indeterminate:before:absolute data-indeterminate:before:h-0.5 data-indeterminate:before:w-2 data-indeterminate:before:rounded-full data-indeterminate:before:bg-current [&[data-indeterminate]_svg]:hidden"
+                  onCheckedChange={(checked) => onSelectedChange?.(checked ? allKeys : [])}
+                />
+              </TableHead>
+            )}
             {columns.map((c) => (
               <TableHead key={c.key} className={cn(alignClass(c.align), c.className)}>
                 {c.header}
@@ -68,14 +105,26 @@ export function SimpleTable<T>({
         </TableHeader>
         <TableBody>
           {rows.length === 0 ? (
-            <EmptyRow colSpan={columns.length}>{empty}</EmptyRow>
+            <EmptyRow colSpan={columns.length + (selectable ? 1 : 0)}>{empty}</EmptyRow>
           ) : (
             rows.map((row, i) => (
               <TableRow
                 key={getRowKey(row, i)}
                 onClick={onRowClick ? () => onRowClick(row) : undefined}
-                className={cn(onRowClick && "cursor-pointer")}
+                data-selected={selectedKeys.has(getRowKey(row, i)) || undefined}
+                className={cn(onRowClick && "cursor-pointer", "data-selected:bg-muted/50")}
               >
+                {selectable && (
+                  <TableCell className="w-10">
+                    <Checkbox
+                      aria-label={selectLabel}
+                      checked={selectedKeys.has(getRowKey(row, i))}
+                      onCheckedChange={(checked) => toggleRow(getRowKey(row, i), checked === true)}
+                      // คลิกช่องติ๊กไม่ให้ไปโดน onRowClick ของทั้งแถว
+                      onClick={(event) => event.stopPropagation()}
+                    />
+                  </TableCell>
+                )}
                 {columns.map((c) => (
                   <TableCell key={c.key} className={cn(alignClass(c.align), c.className)}>
                     {c.cell

package/src/components/shared/simple-tabs.tsx

@@ -8,7 +8,7 @@ import {
 } from "@suphark/ui/components/ui/accordion";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@suphark/ui/components/ui/tabs";
 import { cn } from "@suphark/ui/lib/utils";
-import type { ReactNode } from "react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
 export interface SimpleTabItem {
   value: string;
@@ -49,6 +49,26 @@ export function SimpleTabs({
   className?: string;
   listClassName?: string;
 }) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const [edges, setEdges] = useState({ start: false, end: false });
+
+  const updateEdges = useCallback(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    // 4px กันเศษจากการปัดทศนิยม
+    setEdges({ start: el.scrollLeft > 4, end: el.scrollLeft < max - 4 });
+  }, []);
+
+  useEffect(() => {
+    updateEdges();
+    const el = listRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateEdges);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [updateEdges]);
+
   return (
     <Tabs
       value={value}
@@ -57,18 +77,39 @@ export function SimpleTabs({
       onValueChange={(v) => onValueChange?.(String(v))}
       className={className}
     >
-      <TabsList
-        variant={variant}
-        className={cn(fullWidth && "w-full", "max-w-full overflow-x-auto", listClassName)}
-      >
-        {items.map((item) => (
-          <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
-            {item.icon}
-            {item.label}
-            {item.badge}
-          </TabsTrigger>
-        ))}
-      </TabsList>
+      {/* แท็บเยอะเกินความกว้าง = เลื่อนแนวนอนได้ + เงาบอกว่ายังมีต่อ (ซ่อนแถบเลื่อน) */}
+      <div className="relative">
+        <TabsList
+          ref={listRef}
+          onScroll={updateEdges}
+          variant={variant}
+          className={cn(
+            fullWidth && "w-full",
+            "no-scrollbar max-w-full overflow-x-auto scroll-smooth",
+            listClassName,
+          )}
+        >
+          {items.map((item) => (
+            <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
+              {item.icon}
+              {item.label}
+              {item.badge}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {edges.start && (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-y-0 left-0 w-6 rounded-l-lg bg-gradient-to-r from-background to-transparent"
+          />
+        )}
+        {edges.end && (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-y-0 right-0 w-6 rounded-r-lg bg-gradient-to-l from-background to-transparent"
+          />
+        )}
+      </div>
       {items.map((item) => (
         <TabsContent key={item.value} value={item.value}>
           {item.content}

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

@@ -20,6 +20,23 @@ export interface UiText {
   confirmTitle?: string;
   /** RowActions/ConfirmActionButton: action โยน error (optional — ค่าเริ่มต้น "ดำเนินการไม่สำเร็จ") */
   actionFailed?: string;
+  /** InlineEdit: ปุ่มดินสอ (optional — "แก้ไข") */
+  edit?: string;
+  /** SelectionBar (optional) — `selected` ใช้ `{count}` */
+  selection?: Partial<{ selected: string; clear: string }>;
+  /** DataTable (optional) — `rowsSelected` ใช้ `{selected}`/`{total}`, `pageOf` ใช้ `{page}`/`{pages}` */
+  table?: Partial<{
+    rowsPerPage: string;
+    pageOf: string;
+    rowsSelected: string;
+    noResults: string;
+    deleteTitle: string;
+    /** ใช้ `{name}` และ `{resource}` (ชื่อชนิดข้อมูลที่ส่งมาทาง `resourceName`) */
+    deleteDescription: string;
+    deleting: string;
+    deleted: string;
+    delete: string;
+  }>;
   /** DialogsProvider: ปุ่มปิดของ alert (optional — ค่าเริ่มต้น "ตกลง") */
   ok?: string;
   /** DialogsProvider: หัวกล่อง alert (optional — ค่าเริ่มต้น "แจ้งให้ทราบ") */
@@ -135,6 +152,19 @@ export const UI_TEXT_TH: UiText = {
   confirm: "ยืนยัน",
   confirmTitle: "ยืนยันการทำรายการ",
   actionFailed: "ดำเนินการไม่สำเร็จ",
+  edit: "แก้ไข",
+  selection: { selected: "เลือก {count} รายการ", clear: "ล้างการเลือก" },
+  table: {
+    rowsPerPage: "แถวต่อหน้า",
+    pageOf: "หน้า {page} จาก {pages}",
+    rowsSelected: "เลือก {selected} จาก {total} แถว",
+    noResults: "ไม่พบข้อมูล",
+    deleteTitle: "ยืนยันการลบ",
+    deleteDescription: "ลบ{resource} “{name}” แล้วกู้คืนไม่ได้",
+    deleting: "กำลังลบ{resource} “{name}”…",
+    deleted: "ลบ{resource} “{name}” แล้ว",
+    delete: "ลบ",
+  },
   ok: "ตกลง",
   alertTitle: "แจ้งให้ทราบ",
   promptTitle: "กรอกข้อมูล",
@@ -233,6 +263,19 @@ export const UI_TEXT_EN: UiText = {
   confirm: "Confirm",
   confirmTitle: "Please confirm",
   actionFailed: "Action failed",
+  edit: "Edit",
+  selection: { selected: "{count} selected", clear: "Clear selection" },
+  table: {
+    rowsPerPage: "Rows per page",
+    pageOf: "Page {page} of {pages}",
+    rowsSelected: "{selected} of {total} row(s) selected",
+    noResults: "No results",
+    deleteTitle: "Are you sure?",
+    deleteDescription: "Deleting{resource} “{name}” cannot be undone",
+    deleting: "Deleting{resource} “{name}”…",
+    deleted: "“{name}”{resource} deleted",
+    delete: "Delete",
+  },
   ok: "OK",
   alertTitle: "Notice",
   promptTitle: "Input required",

package/src/index.ts

@@ -19,6 +19,11 @@ export {
   type ActionMenuCommand,
   type ActionMenuItem,
 } from "./components/shared/action-menu";
+export {
+  ActivityFeed,
+  type ActivityItem,
+  type ActivityTone,
+} from "./components/shared/activity-feed";
 export { AuthLayout, type AuthLayoutProps } from "./components/shared/auth-layout";
 export {
   AuthDivider,
@@ -144,6 +149,7 @@ export {
 } from "./components/shared/icon-picker";
 export { InfoHint } from "./components/shared/info-hint";
 export { Initials, initialsOf } from "./components/shared/initials";
+export { InlineEdit, type InlineEditProps } from "./components/shared/inline-edit";
 export {
   LanguageMenuItems,
   type LanguageOption,
@@ -192,6 +198,11 @@ export { type SaveState, SaveStatus, type SaveStatusText } from "./components/sh
 export { SecretReveal } from "./components/shared/secret-reveal";
 export { SectionCard } from "./components/shared/section-card";
 export { SegmentedControl, type SegmentedOption } from "./components/shared/segmented-control";
+export {
+  type SelectionAction,
+  SelectionBar,
+  type SelectionBarProps,
+} from "./components/shared/selection-bar";
 export { SelectionButton } from "./components/shared/selection-button";
 export { SettingsLayout, type SettingsSection } from "./components/shared/settings-layout";
 export { DangerZone, SettingsRow, SwitchRow } from "./components/shared/settings-row";