@suphark/ui 0.26.1 → 0.27.1

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [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
+
+- **`Button`: tooltip อัตโนมัติสำหรับปุ่มไอคอน** — มาตรฐานใหม่ของทุกโครงการ (เจ้าของสั่ง 2026-10-05): ไอคอนที่ไม่มีข้อความกำกับต้องบอกได้ว่าคืออะไรเมื่อวางเมาส์ ถ้า `Button` มี `aria-label` และ children ไม่มีข้อความ (ไอคอน/`sr-only` ไม่นับ) จะห่อ `Tooltip` ให้เองจาก `aria-label` — ทำที่ `Button` ชั้นในสุดที่เดียว **call site ทุกที่ของทุกแอปได้ทันทีโดยไม่ต้องแก้โค้ด** รวมถึงปุ่มที่ส่งเข้า `render=`/`trigger` ของ `FormDialog`/`SimpleDialog`/`DropdownMenu`/`RowActions` (เคสที่ห่อ `SimpleTooltip` เองไม่ได้เพราะ trigger ส่ง ref/props ให้)
+  - props ใหม่: `tooltip` (ทับข้อความ, `false` = ปิด), `tooltipSide`, `tooltipDelay` — ไม่ต้องมี `TooltipProvider` ใน tree (ใส่ได้ถ้าอยากคุม delay ร่วมกัน)
+  - `SimpleTooltip` ปิด tooltip อัตโนมัติของ `Button` ที่ห่ออยู่ให้แล้ว (ไม่ขึ้นสองชั้น) — แอปที่ห่อ tooltip ด้วยกลไกอื่นใช้ `ButtonTooltipSuppress` (export ใหม่) หรือ `tooltip={false}`
+  - barrel export `Button` จาก `components/shared/button/button.tsx` (ครอบ `components/ui/button.tsx` ที่ยังเป็นไฟล์ shadcn ดิบ ไม่ถูกแก้มือ); `buttonVariants` เหมือนเดิม; props อื่นและหน้าตาไม่เปลี่ยน
+- `DataTablePagination`: ปุ่มเลื่อนหน้าทั้ง 4 ใช้ `aria-label` จาก `UiText` (เดิมเป็นข้อความอังกฤษตายตัวใน `sr-only`); `ThemeToggle` ใช้ `aria-label` จาก `UiText.theme.label` แทน `title` (เลิก tooltip ซ้อนของเบราว์เซอร์)
+- README หัวข้อ "ปุ่มไอคอน — tooltip มาให้เอง (มาตรฐานทุกโครงการ)" + แถวใหม่ใน `docs/agent-rules.md`
+- ใช้ข้อความใน `<span className="sr-only">` (รูปแบบของ shadcn) เป็น tooltip ได้เมื่อไม่มี `aria-label`
+- **ปุ่มไอคอนในแพ็กเกจเองได้ tooltip ครบ**: `RowActions`, `ActionMenu`, `SimpleDialog`/`SimpleSheet` (ปุ่มปิด), `SimplePagination`, `DataTablePagination`, `DataTableToolbar`, `CommandPalette`, `ThemeToggle`/`ThemeSwitch`, `Notice`, `UploadList`, `SecretReveal`, `TimePicker`, `MonthStepper`, `RuleBuilder`, `ResourcePropertyFilter`, `AuthParts` (17 ไฟล์เปลี่ยนมา import `Button` ตัวที่มี tooltip)
+- `UiText.pagination` เพิ่ม `first` / `last` (หน้าแรก/หน้าสุดท้าย)
+- showcase: หน้า `/components/button` เพิ่มแถวปุ่มไอคอน (auto / `tooltip="…"` / `tooltip={false}` / trigger ของ dialog / ห่อ `SimpleTooltip`)
+
 ## [0.26.1] — 2026-10-03
 
 แก้ตามผล audit 2026-10-03 (`docs/reports/audit-2026-10-03.md`) — ไม่เปลี่ยน props

package/README.md

@@ -154,6 +154,34 @@ export default async function Layout({ children }) {
 <div style={{ "--brand": tenant.color, "--brand-foreground": "oklch(0.985 0 0)" } as React.CSSProperties}>…</div>
 ```
 
+### ปุ่มไอคอน — tooltip มาให้เอง (มาตรฐานทุกโครงการ)
+
+ไอคอนที่ไม่มีข้อความกำกับ ต้องบอกได้ว่าคืออะไรเมื่อวางเมาส์ — `Button` ของแพ็กเกจ **ห่อ `Tooltip` ให้เองเมื่อมี `aria-label` และ children ไม่มีข้อความ** (ไอคอนหรือ `<span className="sr-only">` ไม่นับเป็นข้อความ) ทุก call site จึงได้ทันทีโดยไม่ต้องแก้อะไร รวมถึงปุ่มที่เป็น trigger ของ dialog/menu เพราะปุ่มอยู่ชั้นในสุดของ `render=`
+
+```tsx
+<Button variant="ghost" size="icon-sm" aria-label="ดู client secret"><KeySquareIcon /></Button>
+// → hover/focus แล้วขึ้น "ดู client secret" โดยไม่ต้องห่อ SimpleTooltip
+
+<FormDialog trigger={<Button size="icon-sm" aria-label="แก้ไข"><PencilIcon /></Button>} … />
+// → ได้ tooltip ด้วย (ไม่ต้องมี prop ใหม่ที่ FormDialog/RowActions)
+```
+
+| ต้องการ | เขียน |
+| --- | --- |
+| ข้อความอื่นที่ไม่ใช่ `aria-label` (หรือปุ่มที่มีข้อความแล้วแต่อยากอธิบายเพิ่ม) | `tooltip="ตรวจสอบอีกครั้ง"` |
+| ปิด (เช่นปุ่มในเมนูที่มีข้อความอยู่แล้ว) | `tooltip={false}` |
+| เปลี่ยนด้าน / หน่วงเวลา | `tooltipSide="bottom"`, `tooltipDelay={0}` |
+
+- **ไม่ต้องมี `TooltipProvider`** — Base UI ไม่บังคับ; ใส่ที่ root layout ได้ถ้าอยากคุม delay ร่วมกันทุก tooltip (ค่าเริ่มต้นของ Base UI = 600ms, `TooltipProvider` ของแพ็กเกจตั้ง 0)
+- ปุ่มที่ถูกห่อ `SimpleTooltip` อยู่แล้ว **ไม่ขึ้นสองชั้น** (`SimpleTooltip` ปิดตัวอัตโนมัติให้ด้วย `ButtonTooltipSuppress`) — ถ้าแอปห่อ tooltip ด้วยกลไกอื่นเอง ครอบ `<ButtonTooltipSuppress>` หรือใส่ `tooltip={false}`
+- จอสัมผัสไม่มี hover — `aria-label` ยังทำหน้าที่เดิมให้ screen reader; ข้อความที่ "ต้องอ่านได้ทุกคน" อย่าเก็บไว้ใน tooltip เท่านั้น
+- ไม่มี `aria-label` แต่ใช้รูปแบบ shadcn `<span className="sr-only">ข้อความ</span>` ข้างไอคอน ก็ใช้ข้อความนั้นเป็น tooltip ให้เหมือนกัน
+- ปุ่มที่ `disabled` ไม่ขึ้น tooltip (ปุ่มที่ปิดอยู่ไม่รับ pointer ตามสไตล์ของ shadcn) — ถ้าต้องอธิบายว่าทำไมกดไม่ได้ ให้ห่อ `SimpleTooltip` ที่ `<span>` ครอบปุ่มแทน
+- มี `title="…"` อยู่เดิมให้เอาออก ไม่งั้นจะได้ tooltip ซ้อนกับของเบราว์เซอร์
+- `<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`
 
 webview/automation บางตัวปิด `window.confirm` ทิ้ง (กดแล้วไม่เกิดอะไร) และไม่เข้า design system — ใช้ 3 ตัวนี้แทน

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.26.1",
+  "version": "0.27.1",
   "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/command-palette.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 {
   Command,
   CommandDialog,

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   Select,
   SelectContent,
@@ -23,6 +24,7 @@ export function DataTablePagination<TData>({
   pageSizeOptions = [10, 20, 30, 40, 50],
   onPageSizeChange,
 }: DataTablePaginationProps<TData>) {
+  const text = useUiText();
   const isRowSelectionEnabled = table.options.enableRowSelection !== false;
 
   return (
@@ -71,40 +73,40 @@ export function DataTablePagination<TData>({
             variant="outline"
             size="icon"
             className="hidden size-8 lg:flex"
+            aria-label={text.pagination?.first ?? "หน้าแรก"}
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className="sr-only">Go to first page</span>
             <ChevronsLeft />
           </Button>
           <Button
             variant="outline"
             size="icon"
             className="size-8"
+            aria-label={text.pagination?.previous ?? "ก่อนหน้า"}
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className="sr-only">Go to previous page</span>
             <ChevronLeft />
           </Button>
           <Button
             variant="outline"
             size="icon"
             className="size-8"
+            aria-label={text.pagination?.next ?? "ถัดไป"}
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            <span className="sr-only">Go to next page</span>
             <ChevronRight />
           </Button>
           <Button
             variant="outline"
             size="icon"
             className="hidden size-8 lg:flex"
+            aria-label={text.pagination?.last ?? "หน้าสุดท้าย"}
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
-            <span className="sr-only">Go to last page</span>
             <ChevronsRight />
           </Button>
         </div>

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,7 @@ export function DataTableRowActions<TData>({
   nameKey = "name" as keyof TData,
   idKey = "id" as keyof TData,
 }: DataTableRowActionsProps<TData>) {
+  const text = useUiText();
   const item = row.original;
   const itemRecord = item as Record<string, unknown>;
   const itemName = String(
@@ -105,10 +107,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}

package/src/components/data-table/data-table-toolbar.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 {
   InputGroup,
   InputGroupAddon,

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/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/action-menu.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/shared/auth-parts.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 {
   InputGroup,
   InputGroupAddon,

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

@@ -0,0 +1,117 @@
+"use client";
+
+import { Button as ButtonBase } from "@suphark/ui/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
+import {
+  Children,
+  type ComponentProps,
+  createContext,
+  Fragment,
+  isValidElement,
+  type ReactNode,
+  useContext,
+} from "react";
+
+export type ButtonTooltipSide = "top" | "bottom" | "left" | "right";
+
+export interface ButtonProps extends ComponentProps<typeof ButtonBase> {
+  /**
+   * ข้อความ tooltip — ไม่ใส่ = ใช้ `aria-label` (หรือ `<span className="sr-only">` แบบ shadcn)
+   * ให้เองเมื่อปุ่ม "มีแต่ไอคอน" (ไม่มี children ที่เป็นข้อความ)
+   * ใส่ข้อความ = ทับค่าอัตโนมัติ (ใช้กับปุ่มที่มีข้อความแล้วแต่ยังอยากอธิบายเพิ่ม) · `false` = ปิด
+   */
+  tooltip?: ReactNode | false;
+  tooltipSide?: ButtonTooltipSide;
+  /** หน่วงก่อนโชว์ (ms) — ไม่ใส่ = ตาม `TooltipProvider` ของแอป หรือ 600 ตามค่าของ Base UI */
+  tooltipDelay?: number;
+}
+
+const NoAutoTooltip = createContext(false);
+
+/**
+ * ปิด tooltip อัตโนมัติของ `Button` ทั้งซับทรี — `SimpleTooltip` ใส่ให้แล้ว
+ * (ปุ่มที่ถูกห่อ tooltip อยู่แล้วจะไม่ขึ้นสองชั้น) ใช้เองได้เมื่อแอปห่อ tooltip ด้วยกลไกอื่น
+ */
+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;
+  Children.forEach(children, (child) => {
+    if (found || !isValidElement(child)) return;
+    const props = child.props as { className?: unknown; children?: ReactNode };
+    if (child.type === Fragment) {
+      found = srOnlyText(props.children);
+      return;
+    }
+    if (typeof props.className !== "string" || !props.className.split(/\s+/).includes("sr-only"))
+      return;
+    if (typeof props.children === "string" && props.children.trim() !== "")
+      found = props.children.trim();
+  });
+  return found;
+}
+
+/** มี children ที่เป็นข้อความจริง ๆ ไหม (ไอคอน/`<span className="sr-only">` ไม่นับ) */
+function hasTextChild(children: ReactNode): boolean {
+  let found = false;
+  Children.forEach(children, (child) => {
+    if (found) return;
+    if (typeof child === "string") {
+      if (child.trim() !== "") found = true;
+      return;
+    }
+    if (typeof child === "number") {
+      found = true;
+      return;
+    }
+    // <>{icon} ข้อความ</> — Children.forEach ไม่ไล่เข้า fragment ให้
+    if (isValidElement(child) && child.type === Fragment) {
+      const inner = (child.props as { children?: ReactNode }).children;
+      if (hasTextChild(inner)) found = true;
+    }
+  });
+  return found;
+}
+
+/**
+ * ปุ่มของแพ็กเกจ = `Button` ของ shadcn + **tooltip อัตโนมัติสำหรับปุ่มไอคอน**
+ * มาตรฐานของทุกโครงการ: ไอคอนที่ไม่มีข้อความกำกับ ต้องบอกได้ว่าคืออะไรเมื่อวางเมาส์
+ * → ถ้ามี `aria-label` และ children ไม่มีข้อความ จะห่อ `Tooltip` ให้เอง (ทำที่นี่ที่เดียว
+ * call site ทุกที่จึงได้ทันที รวมถึงปุ่มที่เป็น trigger ของ dialog/menu เพราะปุ่มอยู่ชั้นในสุด)
+ * ปิดเป็นรายปุ่มด้วย `tooltip={false}`; ทับข้อความด้วย `tooltip="…"`
+ * ไฟล์ shadcn ดิบอยู่ที่ `components/ui/button.tsx` (ห้ามแก้มือ) — barrel export ตัวนี้
+ */
+export function Button({ tooltip, tooltipSide = "top", tooltipDelay, ...props }: ButtonProps) {
+  const suppressed = useContext(NoAutoTooltip);
+  const label =
+    typeof props["aria-label"] === "string" && props["aria-label"].trim() !== ""
+      ? props["aria-label"]
+      : (renderLabel(props.render) ?? srOnlyText(props.children));
+  const explicit = tooltip !== undefined && tooltip !== null && tooltip !== "";
+  const auto =
+    !suppressed &&
+    tooltip === undefined &&
+    typeof label === "string" &&
+    !hasTextChild(props.children);
+  const content = tooltip === false ? null : explicit ? tooltip : auto ? label : null;
+
+  if (content === null || content === undefined) return <ButtonBase {...props} />;
+  return (
+    <Tooltip>
+      <TooltipTrigger delay={tooltipDelay} render={<ButtonBase {...props} />} />
+      <TooltipContent side={tooltipSide} className="max-w-xs text-pretty">
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

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";

package/src/components/shared/button/floating-save-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 { cn } from "@suphark/ui/lib/utils";
 import { Check, Loader2, Save, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";

package/src/components/shared/button/index.ts

@@ -4,6 +4,12 @@
  */
 export { AddNewButton } from "./add-new-button";
 export { ActionButton, type ActionButtonProps } from "./base/action-button";
+export {
+  Button,
+  type ButtonProps,
+  type ButtonTooltipSide,
+  ButtonTooltipSuppress,
+} from "./button";
 export { CancelButton } from "./cancel-button";
 export { ConfirmButton } from "./confirm-button";
 export { CopyButton, type CopyButtonProps } from "./copy-button";

package/src/components/shared/combobox.tsx

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

package/src/components/shared/date/date-range-picker.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 { Calendar } from "@suphark/ui/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { Separator } from "@suphark/ui/components/ui/separator";

package/src/components/shared/dropzone.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 { formatBytes } from "@suphark/ui/lib/formatters";
 import { cn } from "@suphark/ui/lib/utils";
 import { UploadCloud } from "lucide-react";

package/src/components/shared/env-snippet.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 { copyText, selectContents } from "@suphark/ui/lib/copy-text";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useRef, useState } from "react";

package/src/components/shared/filter-bar.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 { NativeSelect, NativeSelectOption } from "@suphark/ui/components/ui/native-select";
 import { cn } from "@suphark/ui/lib/utils";
 import { XIcon } from "lucide-react";

package/src/components/shared/form/date-time-picker.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 { Calendar } from "@suphark/ui/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { useMounted } from "@suphark/ui/hooks/use-mounted";

package/src/components/shared/form/form-field-combobox.tsx

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

package/src/components/shared/form/form-field-select.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { MultiSelectCombobox } from "@suphark/ui/components/shared/multi-select-combobox";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
   CommandEmpty,

package/src/components/shared/form/time-picker.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 {
   InputGroup,
   InputGroupAddon,

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SecretReveal } from "@suphark/ui/components/shared/secret-reveal";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Dialog,
   DialogContent,

package/src/components/shared/language/language-switch.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 {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/shared/layout/error-state.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, buttonVariants } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { buttonVariants } from "@suphark/ui/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
 import { AlertTriangle, Home, LogIn, RotateCcw } from "lucide-react";

package/src/components/shared/month-stepper.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 {
   compareMonth,
   currentMonthKey,

package/src/components/shared/multi-select-combobox.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 { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
   CommandEmpty,

package/src/components/shared/notice.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
-import { Button } from "@suphark/ui/components/ui/button";
 import { cn } from "@suphark/ui/lib/utils";
 import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { type ComponentProps, type ReactNode, useState } from "react";

package/src/components/shared/resource-property-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 { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import { Empty, EmptyHeader, EmptyTitle } from "@suphark/ui/components/ui/empty";
 import { Field, FieldGroup, FieldLabel } from "@suphark/ui/components/ui/field";

package/src/components/shared/row-actions.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/shared/rule-builder.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 {
   NativeSelect,
   NativeSelectOptGroup,

package/src/components/shared/secret-reveal.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 { copyText } from "@suphark/ui/lib/copy-text";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";

package/src/components/shared/selection-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 { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps } from "react";
 

package/src/components/shared/simple-dialog.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 {
   Dialog,
   DialogClose,

package/src/components/shared/simple-pagination.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 { ChevronLeft, ChevronRight } from "lucide-react";
 import { useUiText } from "./ui-text";

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

@@ -11,12 +11,14 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ReactElement, ReactNode } from "react";
+import { ButtonTooltipSuppress } from "./button/button";
 
 type Side = "top" | "bottom" | "left" | "right";
 
 /**
  * tooltip สำเร็จรูป: ห่อ element เดียว + ข้อความ (แทน Tooltip/TooltipTrigger/TooltipContent 3 ชิ้น)
  * `content` ว่าง = ไม่มี tooltip (ไม่ต้องเขียนเงื่อนไขเอง) · ปุ่มไอคอนอย่างเดียวยังต้องมี aria-label ของตัวเอง
+ * ปุ่มไอคอน (`Button` + `aria-label`) **ไม่ต้องห่อตัวนี้แล้ว** ตั้งแต่ 0.27.0 — ห่อได้ถ้าอยากใช้ข้อความอื่น
  * คำอธิบายยาวหลังไอคอน (i) ใช้ `InfoHint`
  *
  *   <SimpleTooltip content="คัดลอกลิงก์"><Button size="icon" aria-label="คัดลอกลิงก์"><Copy /></Button></SimpleTooltip>
@@ -34,13 +36,16 @@ export function SimpleTooltip({
   className?: string;
 }) {
   if (content === null || content === undefined || content === "") return children;
+  // ลูกที่เป็น `Button` ของแพ็กเกจจะไม่สร้าง tooltip อัตโนมัติซ้อนขึ้นมาอีกชั้น
   return (
-    <Tooltip>
-      <TooltipTrigger render={children} />
-      <TooltipContent side={side} className={cn("max-w-xs text-pretty", className)}>
-        {content}
-      </TooltipContent>
-    </Tooltip>
+    <ButtonTooltipSuppress>
+      <Tooltip>
+        <TooltipTrigger render={children} />
+        <TooltipContent side={side} className={cn("max-w-xs text-pretty", className)}>
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </ButtonTooltipSuppress>
   );
 }
 

package/src/components/shared/step-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 { Spinner } from "@suphark/ui/components/ui/spinner";
 import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { cn } from "@suphark/ui/lib/utils";

package/src/components/shared/theme/theme-switch.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 { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";

package/src/components/shared/theme/theme-toggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -30,6 +31,8 @@ export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps)
     lastPersisted.current = persistedTheme;
   }, [persistedTheme]);
 
+  const text = useUiText();
+
   const handleThemeChange = async (newTheme: ThemeValue) => {
     setTheme(newTheme);
     await onThemeChange?.(newTheme);
@@ -43,13 +46,12 @@ export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps)
             variant="ghost"
             size="icon"
             className="relative h-9 w-9 rounded-md hover:bg-accent hover:text-accent-foreground"
-            title="Change theme"
+            aria-label={text.theme?.label ?? "Change theme"}
           />
         }
       >
         <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
         <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-        <span className="sr-only">Change theme</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-36">
         <DropdownMenuItem

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

@@ -43,6 +43,8 @@ export interface UiText {
   switcher?: Partial<{ choose: string; organization: string }>;
   /** UserMenu: aria-label ปุ่มเปิดเมนู (optional — "เมนูผู้ใช้") */
   userMenu?: string;
+  /** AppShell: ปุ่มย่อ/ขยายเมนูข้าง (optional — "ย่อ/ขยายเมนู") */
+  toggleSidebar?: string;
   /** UserMenu: ปุ่มออกจากระบบ (optional — "ออกจากระบบ") */
   signOut?: string;
   /** ThemeMenuItems: หัวกลุ่ม + ตัวเลือก (optional) */
@@ -81,8 +83,15 @@ export interface UiText {
   }>;
   /** ChatThread (optional) */
   chat?: Partial<{ placeholder: string; send: string; typing: string; scrollToLatest: string }>;
-  /** SimplePagination (optional) */
-  pagination?: Partial<{ previous: string; next: string; label: string; page: string }>;
+  /** SimplePagination / DataTablePagination (optional) */
+  pagination?: Partial<{
+    previous: string;
+    next: string;
+    first: string;
+    last: string;
+    label: string;
+    page: string;
+  }>;
   /** TableSkeleton/ListSkeleton/CardSkeleton (optional) — ข้อความสำหรับ screen reader */
   loading?: string;
   /** สถานะออนไลน์ของ UserIdentity/Initials (optional) */
@@ -141,6 +150,7 @@ export const UI_TEXT_TH: UiText = {
   },
   switcher: { choose: "เลือกองค์กร", organization: "องค์กร" },
   userMenu: "เมนูผู้ใช้",
+  toggleSidebar: "ย่อ/ขยายเมนู",
   signOut: "ออกจากระบบ",
   theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
   sectionNav: { tabs: "แท็บย่อย" },
@@ -174,7 +184,14 @@ export const UI_TEXT_TH: UiText = {
     typing: "กำลังพิมพ์…",
     scrollToLatest: "ไปข้อความล่าสุด",
   },
-  pagination: { previous: "ก่อนหน้า", next: "ถัดไป", label: "แบ่งหน้า", page: "หน้า" },
+  pagination: {
+    previous: "ก่อนหน้า",
+    next: "ถัดไป",
+    first: "หน้าแรก",
+    last: "หน้าสุดท้าย",
+    label: "แบ่งหน้า",
+    page: "หน้า",
+  },
   loading: "กำลังโหลด…",
   presence: { online: "ออนไลน์", away: "ไม่อยู่", busy: "ไม่ว่าง", offline: "ออฟไลน์" },
   characterCount: "พิมพ์แล้ว {count} จาก {max} ตัวอักษร",
@@ -231,6 +248,7 @@ export const UI_TEXT_EN: UiText = {
   },
   switcher: { choose: "Choose organization", organization: "Organization" },
   userMenu: "User menu",
+  toggleSidebar: "Toggle sidebar",
   signOut: "Sign out",
   theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
   sectionNav: { tabs: "Section tabs" },
@@ -264,7 +282,14 @@ export const UI_TEXT_EN: UiText = {
     typing: "Typing…",
     scrollToLatest: "Jump to latest",
   },
-  pagination: { previous: "Previous", next: "Next", label: "Pagination", page: "Page" },
+  pagination: {
+    previous: "Previous",
+    next: "Next",
+    first: "First page",
+    last: "Last page",
+    label: "Pagination",
+    page: "Page",
+  },
   loading: "Loading…",
   presence: { online: "Online", away: "Away", busy: "Busy", offline: "Offline" },
   characterCount: "{count} of {max} characters",

package/src/components/shared/upload-list.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 { formatBytes } from "@suphark/ui/lib/formatters";
 import { cn } from "@suphark/ui/lib/utils";
 import { AlertCircle, Check, ChevronDown, RotateCcw, X } from "lucide-react";

package/src/index.ts

@@ -40,6 +40,12 @@ export {
   SaveButton,
   SubmitButton,
 } from "./components/shared/button";
+export {
+  Button,
+  type ButtonProps,
+  type ButtonTooltipSide,
+  ButtonTooltipSuppress,
+} from "./components/shared/button/button";
 export {
   type CalendarDayContext,
   type CalendarDayState,
@@ -296,7 +302,7 @@ export {
   BreadcrumbSeparator,
 } from "./components/ui/breadcrumb";
 export { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "./components/ui/bubble";
-export { Button, buttonVariants } from "./components/ui/button";
+export { buttonVariants } from "./components/ui/button";
 export {
   ButtonGroup,
   ButtonGroupSeparator,