@suphark/ui 0.26.1 → 0.27.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [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,33 @@ 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`) ไม่ได้ของนี้ — อีกเหตุผลที่ห้ามเขียนปุ่มเอง
+- ปุ่มไอคอนของแพ็กเกจเอง (`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.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/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/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-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/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/button.tsx

@@ -0,0 +1,110 @@
+"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>;
+}
+
+/** ข้อความใน `<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"]
+      : 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/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/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/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/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/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/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

@@ -81,8 +81,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) */
@@ -174,7 +181,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} ตัวอักษร",
@@ -264,7 +278,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,