@suphark/ui 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 รูปแบบตาม [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
+
+- `Button`: ถ้า `aria-label` ไปอยู่บน element ใน `render=` (เช่น `render={<Link aria-label="…"/>}`) ก็ใช้เป็น tooltip ได้ (เดิมต้องอยู่บน `Button` เท่านั้น — รายงานจาก Pi Auth)
+- เทสต์ชุดใหม่ `button-tooltip-triggers`: ยืนยันว่าปุ่มไอคอนที่ส่งเป็น `render=`/`trigger` ของ `DropdownMenuTrigger` / `PopoverTrigger` / `FormDialog` / `RowActions` ยังได้ tooltip จริง (เช็กจาก popup ที่ขึ้น ไม่ใช่ `data-slot` — `data-slot` ของปุ่มจะกลายเป็นของ trigger ชั้นนอกเสมอ ใช้ชี้วัดไม่ได้)
+
+### Fixed
+
+- **ตัวห่อปุ่มของแพ็กเกจเองหล่น tooltip** (รายงานจาก Pi Auth): `LinkButton`/`ActionButton`/`CopyButton`/`DeleteManyButton`/`FloatingSaveButton`/`SelectionButton`, `DataTable*`, `UserMenu`, `OrganizationSwitcher`, `FilterBar`, `Combobox`, `Dropzone`, `StepForm`, `ActionForm`, `ErrorState`, `EnvSnippet`, `DateRangePicker`, `DateTimePicker`, `FormField*`, `LanguageSwitch`, `PwaInstallCard` และตัวอย่างใน `design-system` — ทั้งหมด import `Button` จากไฟล์ shadcn ดิบ (ไม่มี tooltip) ตอนนี้ย้ายมาใช้ตัวที่ห่อ tooltip แล้ว 33 ไฟล์ (ปุ่มไอคอนอย่าง `<LinkButton aria-label="…"><KeyIcon/></LinkButton>` จึงได้ tooltip ด้วย)
+- `ActionButton` / `LinkButton`: มี `tooltip` ของตัวเองอยู่แล้ว → ส่ง `tooltip={false}` ให้ `Button` ชั้นใน กันขึ้นสองชั้น (props `tooltip`/`tooltipSide` ของ `ActionButton` ยังเป็นแบบเดิมทุกประการ)
+- `DataTableRowActions`: ปุ่ม "…" ใช้ `aria-label` จาก `UiText.actions` แทน `sr-only` อังกฤษ "Open menu"
+- **กฎใหม่กันพลาดซ้ำ**: `pnpm check:button` (อยู่ใน `verify` และ CI) ห้ามไฟล์ในแพ็กเกจ import `Button` จาก `components/ui/button` ยกเว้นไฟล์ shadcn เองกับตัวห่อ
+- **`AppShell` ปุ่มย่อ/ขยายเมนู**: ปุ่มในหัวเรื่อง (`SidebarTrigger`) ได้ tooltip เหมือนปุ่มไอคอนอื่น และแถบลาก (`SidebarRail`) เลิกใช้ `title` ของ shadcn ที่ทำ tooltip ของเบราว์เซอร์ซ้อนขึ้นมา — ทั้งคู่ใช้ป้ายภาษาไทยจาก `UiText.toggleSidebar` (คีย์ใหม่, ค่าเริ่มต้น "ย่อ/ขยายเมนู" / EN "Toggle sidebar") แทน "Toggle Sidebar" ที่ฝังอยู่ในไฟล์ shadcn (รายงานจาก Pi Files หลัง bump ^0.27.0 — แก้ที่ `app-shell.tsx` ไม่แตะ `components/ui/sidebar.tsx`)
+
 ## [0.27.0] — 2026-10-05
 
 ### Added

package/README.md

@@ -178,7 +178,8 @@ export default async function Layout({ children }) {
 - ไม่มี `aria-label` แต่ใช้รูปแบบ shadcn `<span className="sr-only">ข้อความ</span>` ข้างไอคอน ก็ใช้ข้อความนั้นเป็น tooltip ให้เหมือนกัน
 - ปุ่มที่ `disabled` ไม่ขึ้น tooltip (ปุ่มที่ปิดอยู่ไม่รับ pointer ตามสไตล์ของ shadcn) — ถ้าต้องอธิบายว่าทำไมกดไม่ได้ ให้ห่อ `SimpleTooltip` ที่ `<span>` ครอบปุ่มแทน
 - มี `title="…"` อยู่เดิมให้เอาออก ไม่งั้นจะได้ tooltip ซ้อนกับของเบราว์เซอร์
-- `<button>` ดิบ (ไม่ผ่าน `Button`) ไม่ได้ของนี้ — อีกเหตุผลที่ห้ามเขียนปุ่มเอง
+- `<button>` ดิบ (ไม่ผ่าน `Button`) ไม่ได้ของนี้ — อีกเหตุผลที่ห้ามเขียนปุ่มเอง · และต้อง import `Button` **จาก `@suphark/ui`** เท่านั้น: `@suphark/ui/components/ui/button` คือไฟล์ shadcn ดิบที่ไม่มี tooltip
+- ตรวจว่าปุ่มมี tooltip ไหม **อย่าดูจาก `data-slot`** — ปุ่มที่เป็น `render=`/`trigger` ของ Dialog/Popover/DropdownMenu จะได้ `data-slot` ของ trigger ชั้นนอก (`dialog-trigger` ฯลฯ) ทั้งที่มี tooltip อยู่ ให้เอาเมาส์ไปวางจริง หรือเช็ก `[data-slot=tooltip-content]` หลัง hover
 - ปุ่มไอคอนของแพ็กเกจเอง (`RowActions`, `ActionMenu`, `SimpleDialog` ปุ่มปิด, `DataTable` แบ่งหน้า, `ThemeToggle`, `Notice`, `UploadList`, `TimePicker`, `MonthStepper`, `SecretReveal`, `CommandPalette` …) ได้ tooltip ไปพร้อมกันตั้งแต่ 0.27.0
 
 ### ยืนยันก่อนทำ — ห้ามใช้ `window.confirm`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.27.0",
+  "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/app-shell/app-shell.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { SimpleTooltip } from "@suphark/ui/components/shared/simple-tooltip";
 import { SkipLink } from "@suphark/ui/components/shared/skip-link";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   InputGroup,
   InputGroupAddon,
@@ -156,6 +158,8 @@ function SidebarShell({
   mobileTabs,
   children,
 }: AppShellProps) {
+  const text = useUiText();
+  const toggleSidebarLabel = text.toggleSidebar ?? "ย่อ/ขยายเมนู";
   const style = brandColor
     ? ({
         "--brand": brandColor,
@@ -203,7 +207,9 @@ function SidebarShell({
               )}
             >
               <div className="flex h-12 min-w-0 flex-1 items-center gap-2 md:h-full">
-                <SidebarTrigger className="-ml-1" />
+                <SimpleTooltip content={toggleSidebarLabel}>
+                  <SidebarTrigger className="-ml-1" aria-label={toggleSidebarLabel} />
+                </SimpleTooltip>
                 {breadcrumbs && (
                   <>
                     <Separator orientation="vertical" className="mr-2 hidden h-4 md:block" />
@@ -379,6 +385,8 @@ function ShellSidebar({
   | "collapsible"
 >) {
   const { state, isMobile } = useSidebar();
+  const text = useUiText();
+  const railLabel = text.toggleSidebar ?? "ย่อ/ขยายเมนู";
   const [query, setQuery] = useState("");
   const collapsed = state === "collapsed" && !isMobile;
   useEffect(() => {
@@ -436,7 +444,8 @@ function ShellSidebar({
         )}
       </SidebarContent>
       {sidebarFooter && <SidebarFooter>{sidebarFooter}</SidebarFooter>}
-      {collapsible !== "none" && <SidebarRail />}
+      {/* title ของ shadcn เป็นอังกฤษและทำ tooltip ของเบราว์เซอร์ซ้อนกับของเรา → ปิดด้วย title={undefined} */}
+      {collapsible !== "none" && <SidebarRail aria-label={railLabel} title={undefined} />}
     </Sidebar>
   );
 }

package/src/components/app-shell/organization-switcher.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/app-shell/user-menu.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Initials } from "@suphark/ui/components/shared/initials";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   DropdownMenu,
   DropdownMenuContent,

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
   CommandEmpty,

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

@@ -1,6 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { DeleteButton } from "@suphark/ui/components/shared/button/delete-button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -10,7 +12,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@suphark/ui/components/ui/alert-dialog";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -74,6 +75,11 @@ export function DataTableRowActions<TData>({
   nameKey = "name" as keyof 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(
@@ -94,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,
       });
     });
@@ -105,10 +111,15 @@ export function DataTableRowActions<TData>({
     <div className="flex justify-end">
       <DropdownMenu>
         <DropdownMenuTrigger
-          render={<Button variant="ghost" className="flex h-8 w-8 p-0 data-popup-open:bg-muted" />}
+          render={
+            <Button
+              variant="ghost"
+              aria-label={text.actions}
+              className="flex h-8 w-8 p-0 data-popup-open:bg-muted"
+            />
+          }
         >
           <Ellipsis className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-[160px]">
           {children}
@@ -118,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>
             )}
 
@@ -130,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>
@@ -146,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-view-option.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,

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/design-system/sections/hero-specimen.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Initials } from "@suphark/ui/components/shared/initials";
 import { StatusBadge } from "@suphark/ui/components/shared/status-badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import {
   InputGroup,

package/src/components/design-system/sections/showcase-data-display.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { FormattedNumber } from "@suphark/ui/components/shared/number/formatted-number";
 import { PrimarySecondaryText } from "@suphark/ui/components/shared/text/primary-secondary-text";
 import {
@@ -13,7 +14,6 @@ import {
   AttachmentTitle,
 } from "@suphark/ui/components/ui/attachment";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-feedback.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Alert, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-forms.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Combobox } from "@suphark/ui/components/shared/combobox";
 import { MultiSelectCombobox } from "@suphark/ui/components/shared/multi-select-combobox";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-guidelines-recipes.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-overlays-navigation.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,7 +21,6 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@suphark/ui/components/ui/breadcrumb";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-overview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-primitives.tsx

@@ -8,6 +8,7 @@ import {
   PrintButton,
   SaveButton,
 } from "@suphark/ui/components/shared/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   Accordion,
   AccordionContent,
@@ -16,7 +17,6 @@ import {
 } from "@suphark/ui/components/ui/accordion";
 import { Avatar, AvatarFallback, AvatarImage } from "@suphark/ui/components/ui/avatar";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import { ButtonGroup, ButtonGroupSeparator } from "@suphark/ui/components/ui/button-group";
 import {
   Card,

package/src/components/pwa/pwa-install-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { cn } from "@suphark/ui/lib/utils";
 import { Check, Download, MonitorSmartphone, Share, Smartphone } from "lucide-react";
 import { useEffect, useState } from "react";

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Card, CardContent } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
 import { type ComponentProps, type ReactNode, startTransition, useActionState } from "react";

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/button/base/action-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
@@ -11,8 +11,11 @@ import { cn } from "@suphark/ui/lib/utils";
 import { Loader2 } from "lucide-react";
 import * as React from "react";
 
-// ดึง Type Props มาจาก Component โดยตรง
-type ButtonProps = React.ComponentProps<typeof Button>;
+// ดึง Type Props มาจาก Component โดยตรง — tooltip ของตัวนี้คุมเอง (ReactNode + side ของ Base UI)
+type ButtonProps = Omit<
+  React.ComponentProps<typeof Button>,
+  "tooltip" | "tooltipSide" | "tooltipDelay"
+>;
 
 type TooltipContentProps = React.ComponentProps<typeof TooltipContent>;
 
@@ -100,6 +103,8 @@ export function ActionButton({
   const buttonContent = (
     <Button
       className={cn(responsive && "max-sm:px-2", className)}
+      // มี tooltip ของตัวเองแล้ว ไม่ให้ Button สร้างซ้อนอีกชั้น (ไม่มี = ปล่อยให้ Button ใช้ aria-label เอง)
+      tooltip={finalTooltip ? false : undefined}
       disabled={isLoading || disabled} // Disable if loading or explicitly disabled
       onClick={onClick}
       variant={variant}

package/src/components/shared/button/base/link-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 // [FIX 1.1] นำเข้าเฉพาะ Button
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
@@ -97,6 +97,8 @@ export function LinkButton({
   const buttonContent = (
     <Button
       className={className}
+      // มี tooltip ของตัวเองแล้ว ไม่ให้ Button สร้างซ้อนอีกชั้น (ไม่มี = ปล่อยให้ Button ใช้ aria-label เอง)
+      tooltip={tooltip ? false : undefined}
       disabled={isPending || disabled} // Disable if pending or explicitly disabled
       onClick={handleClick}
       {...props}

package/src/components/shared/button/button.tsx

@@ -36,6 +36,13 @@ export function ButtonTooltipSuppress({ children }: { children: ReactNode }) {
   return <NoAutoTooltip.Provider value={true}>{children}</NoAutoTooltip.Provider>;
 }
 
+/** `aria-label` ที่เผลอไปอยู่บน element ใน `render=` (เช่น `render={<Link aria-label="…"/>}`) */
+function renderLabel(render: unknown): string | null {
+  if (!isValidElement(render)) return null;
+  const label = (render.props as { "aria-label"?: unknown })["aria-label"];
+  return typeof label === "string" && label.trim() !== "" ? label : null;
+}
+
 /** ข้อความใน `<span className="sr-only">` (รูปแบบของ shadcn ที่ใช้แทน aria-label) */
 function srOnlyText(children: ReactNode): string | null {
   let found: string | null = null;
@@ -89,7 +96,7 @@ export function Button({ tooltip, tooltipSide = "top", tooltipDelay, ...props }:
   const label =
     typeof props["aria-label"] === "string" && props["aria-label"].trim() !== ""
       ? props["aria-label"]
-      : srOnlyText(props.children);
+      : (renderLabel(props.render) ?? srOnlyText(props.children));
   const explicit = tooltip !== undefined && tooltip !== null && tooltip !== "";
   const auto =
     !suppressed &&

package/src/components/shared/button/copy-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Button } from "@suphark/ui/components/ui/button";
 import { useCopyToClipboard } from "@suphark/ui/hooks/use-copy-to-clipboard";
 import { cn } from "@suphark/ui/lib/utils";
 import { Check, Copy } from "lucide-react";