@suphark/ui 0.29.0 → 0.30.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.30.0] — 2026-10-05
+
+### Added
+
+- **ข้อความที่ผู้ใช้เห็นในแพ็กเกจเปลี่ยนภาษาได้ครบแล้ว** — เก็บข้อความไทยที่ฝังตายใน JSX อีก 34 จุดเข้า `UiText`: `DataTableToolbar` (ค้นหา/ล้าง/ตัวกรอง/คำอธิบาย/ปิด), `DataTableFacetedFilter` + `FormFieldCombobox` ("ไม่พบข้อมูล"), `MultiSelectCombobox` (ล้างทั้งหมด/ลบ/เพิ่ม), `ResourcePropertyFilter` (ทั้งแผง 14 จุด), `AppShell`/`SubNav`/`TopTabs` (เมนูหลัก/เมนูย่อย/เลือกหน้า/ไม่พบ/ล้างคำค้นหา), `ErrorState` (เซสชันหมดอายุ) — คีย์ใหม่: `UiText.combobox`, `UiText.filter`, `UiText.nav`, `UiText.sessionExpired` และ `UiText.table.{search,clearSearch,filters,filtersDescription,closeFilters,clearFilter}`
+- **เทสต์กันข้อความฝังตาย** `no-hardcoded-text` (อยู่ใน `pnpm test`/CI): ไล่ JSX ของ `shared`/`app-shell`/`data-table`/`sortable` หาข้อความไทยที่ไม่มีทาง override — ยกเว้นได้แต่ต้องเขียนเหตุผลใน ALLOW; มีชุด "ปลูกการละเมิด" พิสูจน์ว่าตัวตรวจจับของจริงได้และไม่จับของที่ถูกต้อง (คอมเมนต์/JSDoc/`?? "…"`/พจนานุกรมของ component) — ไอเดียจาก Pi Config ที่เจอว่าเทสต์แบบนี้ล้มเหลวเงียบได้ง่าย
+- `SegmentedControl`: `tone` ต่อตัวเลือก (`success` / `warning` / `destructive` / `info`) — ลงสีเฉพาะตัวที่ถูกเลือก ใช้กับตัวกรองที่ "ประเภท" มีความหมายทางสี เช่นรายรับ/รายจ่าย (คำขอจาก DueBell ที่ต้องใช้ไอคอนแทนไปก่อน)
+
+### Fixed
+
+- `MonthStepper`: ปุ่มกลางตอนอยู่เดือนปัจจุบันเคยเป็น `<Button disabled>` ซึ่ง screen reader อ่านว่า "ปุ่ม ปิดใช้งาน" ทั้งที่มันคือป้ายชื่อเดือน — ตอนนี้เรนเดอร์เป็นป้ายธรรมดาเมื่อไม่มีอะไรให้กด (รายงานจาก DueBell) และตอนกดได้ใช้ tooltip ของ `Button` แทน `title` (เลิก tooltip ซ้อนของเบราว์เซอร์)
+
 ## [0.29.0] — 2026-10-05
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.29.0",
+  "version": "0.30.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/scripts/hardcoded-text.d.mts

@@ -0,0 +1,3 @@
+/** ชนิดของ `hardcoded-text.mjs` (สคริปต์เป็น .mjs เพราะ CI/เทสต์เรียกได้ทั้งคู่) */
+export declare function stripComments(source: string): string[];
+export declare function findHardcodedThai(source: string): Array<{ line: number; text: string }>;

package/scripts/hardcoded-text.mjs

@@ -0,0 +1,101 @@
+/**
+ * หา "ข้อความที่ผู้ใช้เห็น" ซึ่งฝังภาษาไทยตายไว้ใน JSX ของแพ็กเกจ
+ * ข้อความแบบนั้นแอปสองภาษาแปลไม่ได้เลย — ต้องผ่าน `UiText` (`text.x ?? "ไทย"`) หรือ prop
+ *
+ * ตรวจเฉพาะ **ข้อความใน JSX** สองแบบ (จุดที่ override ไม่ได้จริง ๆ):
+ *   1. attribute ที่ผู้ใช้/screen reader เห็น: `aria-label` `placeholder` `title` `alt` ฯลฯ
+ *   2. ข้อความที่เป็นลูกของ element: `<CommandEmpty>ไม่พบข้อมูล</CommandEmpty>`
+ * ไม่ตรวจ: คอมเมนต์ (รวม JSDoc ตัวอย่างโค้ด), ค่าเริ่มต้นของ prop, พจนานุกรมของ component
+ * (`const TEXT = { th, en }`) และ `text.x ?? "ไทย"` — ทั้งหมดนั้นแอปเปลี่ยนได้อยู่แล้ว
+ *
+ * export เป็นฟังก์ชันล้วนเพื่อให้เทสต์ "ปลูกไฟล์ละเมิด" พิสูจน์ได้ว่าจับได้จริงทั้งสองทาง
+ * (เทสต์ประเภทนี้ล้มเหลวเงียบง่ายมาก — ผ่านเพราะไม่ได้ตรวจอะไร)
+ */
+
+const THAI = "[\\u0E00-\\u0E7F]";
+const VISIBLE_ATTR = new RegExp(
+  `\\s(?:aria-label|aria-description|aria-roledescription|placeholder|title|alt|label)=\\{?["'\`][^"'\`]*${THAI}`,
+);
+const JSX_CHILD = new RegExp(`>\\s*[^<>{}\\n]*${THAI}`);
+const THAI_ANY = new RegExp(THAI);
+
+/** ตัดคอมเมนต์ออกทั้งไฟล์ (`//`, `/* *\/` ทั้งบรรทัดเดียวและหลายบรรทัด) โดยคงจำนวนบรรทัดไว้ */
+export function stripComments(source) {
+  const out = [];
+  let inBlock = false;
+  for (const line of source.split("\n")) {
+    let rest = line;
+    let kept = "";
+    while (rest !== "") {
+      if (inBlock) {
+        const end = rest.indexOf("*/");
+        if (end === -1) {
+          rest = "";
+          break;
+        }
+        inBlock = false;
+        rest = rest.slice(end + 2);
+        continue;
+      }
+      const block = rest.indexOf("/*");
+      const lineComment = rest.indexOf("//");
+      const blockOutside = block !== -1 && balanced(rest.slice(0, block));
+      const lineOutside = lineComment !== -1 && balanced(rest.slice(0, lineComment));
+      if (lineOutside && (!blockOutside || lineComment < block)) {
+        kept += rest.slice(0, lineComment);
+        rest = "";
+        break;
+      }
+      if (!blockOutside) {
+        kept += rest;
+        rest = "";
+        break;
+      }
+      kept += rest.slice(0, block);
+      rest = rest.slice(block + 2);
+      inBlock = true;
+    }
+    out.push(kept);
+  }
+  return out;
+}
+
+/** quote เปิด-ปิดครบไหม (ใช้ตัดสินว่า `//` หรือ `/*` อยู่นอก string เช่น "https://…") */
+function balanced(text) {
+  let quote = null;
+  for (let i = 0; i < text.length; i += 1) {
+    const ch = text[i];
+    if (ch === "\\") {
+      i += 1;
+      continue;
+    }
+    if (quote) {
+      if (ch === quote) quote = null;
+    } else if (ch === '"' || ch === "'" || ch === "`") {
+      quote = ch;
+    }
+  }
+  return quote === null;
+}
+
+/** บรรทัดนี้มีทางให้แอปเปลี่ยนข้อความอยู่แล้วไหม */
+function hasEscapeHatch(line) {
+  // `text.x ?? "ไทย"` / `text?.x?.y ?? "ไทย"` (ค่าเริ่มต้นของ UiText)
+  if (/\?\?\s*["'`]/.test(line)) return true;
+  return false;
+}
+
+/** คืนรายการละเมิดของไฟล์เดียว: `{ line, text }` */
+export function findHardcodedThai(source) {
+  const lines = stripComments(source);
+  const found = [];
+  lines.forEach((line, index) => {
+    if (!THAI_ANY.test(line)) return;
+    if (hasEscapeHatch(line)) return;
+    // บรรทัดที่ไม่มีแท็กเลยไม่ใช่ JSX (เช่น object ของข้อความ หรือ `throw new Error(...)`)
+    const looksJsx = line.includes("<");
+    if (!VISIBLE_ATTR.test(line) && !(looksJsx && JSX_CHILD.test(line))) return;
+    found.push({ line: index + 1, text: line.trim() });
+  });
+  return found;
+}

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

@@ -436,7 +436,7 @@ function ShellSidebar({
                 <InputGroupAddon align="inline-end">
                   <InputGroupButton
                     onClick={() => setQuery("")}
-                    aria-label="ล้างคำค้นหาเมนู"
+                    aria-label={text.nav?.clearSearch ?? "ล้างคำค้นหาเมนู"}
                     className="size-6 p-0 hover:bg-transparent"
                   >
                     <X aria-hidden="true" />

package/src/components/app-shell/sub-nav.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   InputGroup,
   InputGroupAddon,
@@ -30,6 +31,7 @@ export function SubNav({
   searchPlaceholder?: string;
   className?: string;
 }) {
+  const text = useUiText();
   const pathname = usePathname();
   const router = useRouter();
   const [query, setQuery] = useState("");
@@ -66,9 +68,9 @@ export function SubNav({
           className="h-9 rounded-md border bg-background px-2 text-foreground text-sm"
           value={current?.href ?? ""}
           onChange={(e) => e.target.value && router.push(e.target.value)}
-          aria-label={typeof title === "string" ? title : "เมนูย่อย"}
+          aria-label={typeof title === "string" ? title : (text.nav?.sub ?? "เมนูย่อย")}
         >
-          {!current && <option value="">เลือกหน้า…</option>}
+          {!current && <option value="">{text.nav?.choosePage ?? "เลือกหน้า…"}</option>}
           {sections.map((s, si) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: กลุ่มคงที่
             <optgroup key={si} label={s.title ?? ""}>
@@ -84,7 +86,7 @@ export function SubNav({
 
       {/* เดสก์ท็อป */}
       <nav
-        aria-label={typeof title === "string" ? title : "เมนูย่อย"}
+        aria-label={typeof title === "string" ? title : (text.nav?.sub ?? "เมนูย่อย")}
         className={cn(
           "sticky top-28 hidden w-56 shrink-0 flex-col gap-3 self-start lg:flex",
           className,
@@ -142,7 +144,9 @@ export function SubNav({
           </div>
         ))}
         {sections.length === 0 && (
-          <p className="px-2 text-muted-foreground text-xs">ไม่พบ “{query}”</p>
+          <p className="px-2 text-muted-foreground text-xs">
+            {(text.nav?.noResults ?? "ไม่พบ “{query}”").replace("{query}", query)}
+          </p>
         )}
       </nav>
     </>

package/src/components/app-shell/top-tabs.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { cn } from "@suphark/ui/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -34,11 +35,15 @@ export function isTabActive(pathname: string, tab: AppNavItem): boolean {
 
 /** แท็บหลักแนวนอนใต้ header (แบบ Clerk: Overview · Users · …) — active มีเส้นใต้; จอแคบเลื่อนแนวนอน */
 export function TopTabs({ nav, className }: { nav: AppNavGroup[]; className?: string }) {
+  const text = useUiText();
   const pathname = usePathname();
   const tabs = topLevelTabs(nav);
   if (tabs.length === 0) return null;
   return (
-    <nav aria-label="เมนูหลัก" className={cn("no-scrollbar -mb-px flex overflow-x-auto", className)}>
+    <nav
+      aria-label={text.nav?.main ?? "เมนูหลัก"}
+      className={cn("no-scrollbar -mb-px flex overflow-x-auto", className)}
+    >
       {tabs.map((tab) => {
         const active = isTabActive(pathname, tab);
         return (

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { Badge } from "@suphark/ui/components/ui/badge";
 import {
   Command,
@@ -37,6 +38,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   compact = false,
   fullWidth = false,
 }: DataTableFacetedFilterProps<TData, TValue>) {
+  const text = useUiText();
   const facets = column?.getFacetedUniqueValues();
   const filterValue = column?.getFilterValue();
   // Set + ลำดับ memo จากค่า filter จริง (เดิมสร้าง Set ใหม่ทุก render ทำให้ memo ไม่เคย hit)
@@ -109,7 +111,7 @@ export function DataTableFacetedFilter<TData, TValue>({
         <Command>
           {!compact ? <CommandInput placeholder={title} /> : null}
           <CommandList>
-            <CommandEmpty>ไม่พบข้อมูล</CommandEmpty>
+            <CommandEmpty>{text.combobox?.empty ?? "ไม่พบข้อมูล"}</CommandEmpty>
             <CommandGroup>
               {sortedOptions.map((option) => {
                 const valueAsString = String(option.value);

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { Badge } from "@suphark/ui/components/ui/badge";
 import {
   InputGroup,
@@ -43,6 +44,7 @@ export function DataTableToolbar<TData>({
   toolbarFilters,
   preservedFilterIds = [],
 }: DataTableToolbarProps<TData>) {
+  const text = useUiText();
   const globalFilter = table.getState().globalFilter;
   // ค้นหา: เก็บข้อความในช่องเอง แล้วส่งให้ตารางเมื่อหยุดพิมพ์ 250 ms — เดิมกรอง/เรียง/render ทุกแถวทุกตัวอักษร
   // (และถ้าแอปผูก globalFilter กับ URL = router.replace ทุกตัวอักษร)
@@ -121,7 +123,7 @@ export function DataTableToolbar<TData>({
               <Search aria-hidden="true" className="size-4" />
             </InputGroupAddon>
             <InputGroupInput
-              aria-label="ค้นหาข้อมูลในตาราง"
+              aria-label={text.table?.search ?? "ค้นหาข้อมูลในตาราง"}
               name="table-search"
               autoComplete="off"
               placeholder={globalFilterPlaceholder}
@@ -135,7 +137,7 @@ export function DataTableToolbar<TData>({
               <InputGroupAddon align="inline-end">
                 <InputGroupButton
                   variant="ghost"
-                  aria-label="ล้างคำค้นหา"
+                  aria-label={text.table?.clearSearch ?? "ล้างคำค้นหา"}
                   onClick={() => commitSearch("")}
                 >
                   <X aria-hidden="true" className="size-4" />
@@ -166,15 +168,17 @@ export function DataTableToolbar<TData>({
             className="w-[min(24rem,calc(100vw-1rem))] sm:max-w-md"
           >
             <SheetHeader className="border-b pr-12">
-              <SheetTitle>ตัวกรองข้อมูล</SheetTitle>
-              <SheetDescription>เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที</SheetDescription>
+              <SheetTitle>{text.table?.filters ?? "ตัวกรองข้อมูล"}</SheetTitle>
+              <SheetDescription>
+                {text.table?.filtersDescription ?? "เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที"}
+              </SheetDescription>
               <SheetClose
                 render={
                   <Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />
                 }
               >
                 <X />
-                <span className="sr-only">ปิดตัวกรอง</span>
+                <span className="sr-only">{text.table?.closeFilters ?? "ปิดตัวกรอง"}</span>
               </SheetClose>
             </SheetHeader>
             <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-4">
@@ -231,7 +235,10 @@ export function DataTableToolbar<TData>({
                 <span className="font-medium">{displayedLabels}</span>
                 <button
                   type="button"
-                  aria-label={`ล้างตัวกรอง ${config.title}: ${displayedLabels}`}
+                  aria-label={`${(text.table?.clearFilter ?? "ล้างตัวกรอง {name}").replace(
+                    "{name}",
+                    config.title,
+                  )}: ${displayedLabels}`}
                   onClick={() => table.getColumn(filter.id)?.setFilterValue(undefined)}
                   className="ml-1 rounded-full outline-none hover:bg-muted-foreground/20"
                 >

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

@@ -2,6 +2,7 @@
 
 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 {
   Command,
   CommandEmpty,
@@ -68,6 +69,7 @@ export function FormFieldCombobox<T extends FieldValues>({
   autoFocus,
   onSelect,
 }: FormFieldComboboxProps<T>) {
+  const text = useUiText();
   const cacheKey = fetcherKey ?? fetcher;
   const [options, setOptions] = useState<{ label: string; value: string; subLabel?: string }[]>(
     () => cacheGet(cacheKey) || [],
@@ -133,9 +135,14 @@ export function FormFieldCombobox<T extends FieldValues>({
               </PopoverTrigger>
               <PopoverContent className="w-[--anchor-width] p-0">
                 <Command>
-                  <CommandInput placeholder={`ค้นหา ${placeholder.toLowerCase()}...`} />
+                  <CommandInput
+                    placeholder={(text.combobox?.search ?? "ค้นหา {label}…").replace(
+                      "{label}",
+                      placeholder.toLowerCase(),
+                    )}
+                  />
                   <CommandList>
-                    <CommandEmpty>ไม่พบข้อมูล</CommandEmpty>
+                    <CommandEmpty>{text.combobox?.empty ?? "ไม่พบข้อมูล"}</CommandEmpty>
                     <CommandGroup>
                       {options.map((option) => (
                         <CommandItem

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 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";
@@ -55,6 +56,7 @@ export function ErrorState({
   signInHref = "/sign-in",
   className,
 }: ErrorStateProps) {
+  const text = useUiText();
   const [sessionExpired, setSessionExpired] = useState(false);
 
   useEffect(() => {
@@ -100,19 +102,21 @@ export function ErrorState({
                 <LogIn className="h-10 w-10 text-primary" />
               </div>
             </div>
-            <CardTitle className="text-2xl">เซสชันหมดอายุ</CardTitle>
+            <CardTitle className="text-2xl">
+              {text.sessionExpired?.title ?? "เซสชันหมดอายุ"}
+            </CardTitle>
           </CardHeader>
           <CardContent className="space-y-4 text-center">
             <p className="text-muted-foreground">
-              คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง
-              แล้วระบบจะพากลับมาหน้านี้
+              {text.sessionExpired?.description ??
+                "คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง แล้วระบบจะพากลับมาหน้านี้"}
             </p>
             <div className="flex justify-center pt-2">
               {/* full page load เพื่อให้ proxy/เซสชันเริ่มใหม่สะอาด ๆ */}
               {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
               <a href={signInUrl} className={cn(buttonVariants())}>
                 <LogIn className="mr-2 h-4 w-4" />
-                เข้าสู่ระบบ
+                {text.sessionExpired?.signIn ?? "เข้าสู่ระบบ"}
               </a>
             </div>
           </CardContent>

package/src/components/shared/month-stepper.tsx

@@ -62,6 +62,8 @@ export function MonthStepper({
   const nowInRange = (!min || compareMonth(now, min) >= 0) && (!max || compareMonth(now, max) <= 0);
   const label = formatLabel ? formatLabel(value) : formatMonthKey(value, locale, format);
   const isCurrent = value === now;
+  // กดชื่อเดือนเพื่อกลับเดือนนี้ได้ก็ต่อเมื่อยังไม่ได้อยู่เดือนนี้ และเดือนนี้อยู่ในช่วงที่เลือกได้
+  const canReset = resetToCurrent && !isCurrent && nowInRange;
 
   return (
     <div
@@ -78,23 +80,23 @@ export function MonthStepper({
       >
         <ChevronLeft />
       </Button>
-      {resetToCurrent ? (
+      {canReset ? (
         <Button
           type="button"
           variant="ghost"
-          disabled={isCurrent || !nowInRange}
-          // ปุ่มกลางแสดงชื่อเดือนเสมอ — ปิดเมื่ออยู่เดือนนี้แล้วแต่ยังต้องอ่านออก ไม่ให้จางแบบ disabled ปกติ
-          className="min-w-32 gap-2 tabular-nums disabled:opacity-100"
+          className="min-w-32 gap-2 tabular-nums"
           onClick={() => onValueChange(now)}
-          title={isCurrent ? undefined : (text?.current ?? "กลับไปเดือนนี้")}
+          tooltip={text?.current ?? "กลับไปเดือนนี้"}
           aria-live="polite"
         >
           <CalendarDays className="text-muted-foreground" />
           {label}
         </Button>
       ) : (
+        // อยู่เดือนนี้แล้ว (หรือปิด resetToCurrent) = ไม่มีอะไรให้กด — เป็นป้ายชื่อเดือน ไม่ใช่ปุ่มที่ปิดอยู่
+        // (เดิมเป็น <Button disabled> ซึ่ง screen reader อ่านว่า "ปุ่ม, ปิดใช้งาน" ทั้งที่มันคือป้าย — DueBell รายงาน)
         <span
-          className="flex min-w-32 items-center justify-center gap-2 px-2 font-medium text-sm tabular-nums"
+          className="flex h-8 min-w-32 items-center justify-center gap-2 px-2 font-medium text-sm tabular-nums"
           aria-live="polite"
         >
           <CalendarDays className="size-4 text-muted-foreground" />

package/src/components/shared/multi-select-combobox.tsx

@@ -2,6 +2,7 @@
 
 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 { Badge } from "@suphark/ui/components/ui/badge";
 import {
   Command,
@@ -90,6 +91,7 @@ export function MultiSelectCombobox({
   ariaLabel,
   wrapText = false,
 }: MultiSelectComboboxProps) {
+  const text = useUiText();
   const [open, setOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
 
@@ -213,7 +215,10 @@ export function MultiSelectCombobox({
                     <span
                       role="button"
                       tabIndex={0}
-                      aria-label={`ลบ ${getLabel(val)}`}
+                      aria-label={(text.combobox?.remove ?? "ลบ {label}").replace(
+                        "{label}",
+                        getLabel(val),
+                      )}
                       onKeyDown={(e) => {
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
@@ -246,8 +251,8 @@ export function MultiSelectCombobox({
             <span
               role="button"
               tabIndex={0}
-              title="ล้างทั้งหมด"
-              aria-label="ล้างทั้งหมด"
+              title={text.combobox?.clearAll ?? "ล้างทั้งหมด"}
+              aria-label={text.combobox?.clearAll ?? "ล้างทั้งหมด"}
               onClick={handleClearAll}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === " ") {
@@ -378,7 +383,9 @@ export function MultiSelectCombobox({
                     className="flex cursor-pointer items-center gap-2 text-primary"
                   >
                     <Plus className="size-4" />
-                    <span>เพิ่ม "{inputValue}"</span>
+                    <span>
+                      {(text.combobox?.add ?? "เพิ่ม “{value}”").replace("{value}", inputValue)}
+                    </span>
                   </CommandItem>
                 </CommandGroup>
               </>

package/src/components/shared/resource-property-filter.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { Badge } from "@suphark/ui/components/ui/badge";
 import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import { Empty, EmptyHeader, EmptyTitle } from "@suphark/ui/components/ui/empty";
@@ -94,6 +95,7 @@ export function ResourcePropertyFilter({
   triggerLabel = "คุณสมบัติ Resource",
   triggerClassName,
 }: ResourcePropertyFilterProps) {
+  const text = useUiText();
   const idPrefix = useId();
   const [propertySearch, setPropertySearch] = useState("");
   const deferredPropertySearch = useDeferredValue(propertySearch);
@@ -136,8 +138,10 @@ export function ResourcePropertyFilter({
           <PopoverHeader className="border-b p-4">
             <div className="flex items-start justify-between gap-3">
               <div className="flex flex-col gap-1">
-                <PopoverTitle>กรองตามคุณสมบัติ</PopoverTitle>
-                <PopoverDescription>ค่าในคุณสมบัติเดียวกันเป็น OR และคนละคุณสมบัติเป็น AND</PopoverDescription>
+                <PopoverTitle>{text.filter?.title ?? "กรองตามคุณสมบัติ"}</PopoverTitle>
+                <PopoverDescription>
+                  {text.filter?.description ?? "ค่าในคุณสมบัติเดียวกันเป็น OR และคนละคุณสมบัติเป็น AND"}
+                </PopoverDescription>
               </div>
               {activeCount > 0 ? (
                 <Button type="button" variant="ghost" size="xs" onClick={() => onChange({})}>
@@ -155,15 +159,15 @@ export function ResourcePropertyFilter({
               <InputGroupInput
                 value={propertySearch}
                 onChange={(event) => setPropertySearch(event.target.value)}
-                placeholder="ค้นหาชื่อ Property..."
-                aria-label="ค้นหาคุณสมบัติ"
+                placeholder={text.filter?.searchProperty ?? "ค้นหาคุณสมบัติ…"}
+                aria-label={text.filter?.searchProperty ?? "ค้นหาคุณสมบัติ…"}
               />
               {propertySearch ? (
                 <InputGroupAddon align="inline-end">
                   <InputGroupButton
                     size="icon-xs"
                     onClick={() => setPropertySearch("")}
-                    aria-label="ล้างคำค้นหา"
+                    aria-label={text.filter?.clearSearch ?? "ล้างคำค้นหา"}
                   >
                     <X />
                   </InputGroupButton>
@@ -197,7 +201,10 @@ export function ResourcePropertyFilter({
                             variant="ghost"
                             size="icon-xs"
                             onClick={() => clearFilter(definition.propertyTemplateId)}
-                            aria-label={`ล้างตัวกรอง ${definition.propertyName}`}
+                            aria-label={(text.filter?.clearOne ?? "ล้างตัวกรอง {name}").replace(
+                              "{name}",
+                              definition.propertyName,
+                            )}
                           >
                             <X />
                           </Button>
@@ -230,8 +237,11 @@ export function ResourcePropertyFilter({
                               query: event.target.value,
                             })
                           }
-                          placeholder="ค้นหาข้อความ..."
-                          aria-label={`กรอง ${definition.propertyName}`}
+                          placeholder={text.filter?.searchValue ?? "ค้นหาข้อความ…"}
+                          aria-label={(text.filter?.filterOne ?? "กรอง {name}").replace(
+                            "{name}",
+                            definition.propertyName,
+                          )}
                         />
                       )}
                     </Field>
@@ -241,7 +251,7 @@ export function ResourcePropertyFilter({
             ) : (
               <Empty className="min-h-40 rounded-none border-0">
                 <EmptyHeader>
-                  <EmptyTitle>ไม่พบคุณสมบัติ</EmptyTitle>
+                  <EmptyTitle>{text.filter?.noProperties ?? "ไม่พบคุณสมบัติ"}</EmptyTitle>
                 </EmptyHeader>
               </Empty>
             )}
@@ -250,7 +260,10 @@ export function ResourcePropertyFilter({
       </Popover>
 
       {activeCount > 0 ? (
-        <fieldset className="flex flex-wrap gap-1 border-0 p-0" aria-label="ตัวกรองคุณสมบัติที่ใช้งาน">
+        <fieldset
+          className="flex flex-wrap gap-1 border-0 p-0"
+          aria-label={text.filter?.active ?? "ตัวกรองคุณสมบัติที่ใช้งาน"}
+        >
           {definitions.map((definition) => {
             const filter = filters[definition.propertyTemplateId];
             if (!isResourcePropertyFilterActive(filter)) return null;
@@ -265,7 +278,10 @@ export function ResourcePropertyFilter({
                   variant="ghost"
                   size="icon-xs"
                   onClick={() => clearFilter(definition.propertyTemplateId)}
-                  aria-label={`ล้างตัวกรอง ${definition.propertyName}`}
+                  aria-label={(text.filter?.clearOne ?? "ล้างตัวกรอง {name}").replace(
+                    "{name}",
+                    definition.propertyName,
+                  )}
                 >
                   <X />
                 </Button>
@@ -327,6 +343,7 @@ function NumberPropertyField({
   filter?: Extract<ResourcePropertyFilterValue, { dataType: "NUMBER" }>;
   onChange: (filter: Extract<ResourcePropertyFilterValue, { dataType: "NUMBER" }>) => void;
 }) {
+  const text = useUiText();
   const currentFilter = filter ?? {
     dataType: "NUMBER" as const,
     min: "",
@@ -342,8 +359,8 @@ function NumberPropertyField({
         step="any"
         value={currentFilter.min}
         onChange={(event) => onChange({ ...currentFilter, min: event.target.value })}
-        placeholder="ต่ำสุด"
-        aria-label={`${definition.propertyName} ต่ำสุด`}
+        placeholder={text.filter?.min ?? "ต่ำสุด"}
+        aria-label={`${definition.propertyName} ${text.filter?.min ?? "ต่ำสุด"}`}
       />
       <Input
         type="number"
@@ -351,8 +368,8 @@ function NumberPropertyField({
         step="any"
         value={currentFilter.max}
         onChange={(event) => onChange({ ...currentFilter, max: event.target.value })}
-        placeholder="สูงสุด"
-        aria-label={`${definition.propertyName} สูงสุด`}
+        placeholder={text.filter?.max ?? "สูงสุด"}
+        aria-label={`${definition.propertyName} ${text.filter?.max ?? "สูงสุด"}`}
       />
       {definition.units.length > 0 ? (
         <Select
@@ -360,7 +377,7 @@ function NumberPropertyField({
           onValueChange={(unitId) => onChange({ ...currentFilter, unitId })}
         >
           <SelectTrigger className="col-span-2 w-full">
-            <SelectValue placeholder="เลือกหน่วย" />
+            <SelectValue placeholder={text.filter?.unit ?? "เลือกหน่วย"} />
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>

package/src/components/shared/segmented-control.tsx

@@ -5,12 +5,28 @@ import { cn } from "@suphark/ui/lib/utils";
 import type { ReactNode } from "react";
 import { CountBadge } from "./count-badge";
 
+export type SegmentedTone = "default" | "success" | "warning" | "destructive" | "info";
+
+/** สีตอนถูกเลือกเท่านั้น — ตัวที่ไม่ได้เลือกคงหน้าตากลาง ๆ ไม่ให้แถบกลายเป็นรุ้ง */
+const TONE: Record<SegmentedTone, string> = {
+  default: "",
+  success: "aria-pressed:bg-success-subtle aria-pressed:text-success-subtle-foreground",
+  warning: "aria-pressed:bg-warning-subtle aria-pressed:text-warning-subtle-foreground",
+  destructive: "aria-pressed:bg-destructive-subtle aria-pressed:text-destructive-subtle-foreground",
+  info: "aria-pressed:bg-info-subtle aria-pressed:text-info-subtle-foreground",
+};
+
 export interface SegmentedOption<T extends string> {
   value: T;
   label: ReactNode;
   icon?: ReactNode;
   /** จำนวนท้ายตัวเลือก เช่นจำนวนรายการในตัวกรองนั้น */
   count?: number;
+  /**
+   * สีตามความหมายของตัวเลือกนั้นเมื่อถูกเลือก (รายรับ = success, รายจ่าย = destructive)
+   * ไม่ส่ง = พื้นเทาเหมือนเดิม — ใช้เมื่อ "ประเภท" มีความหมายทางสี ไม่ใช่ตกแต่ง
+   */
+  tone?: SegmentedTone;
   disabled?: boolean;
 }
 
@@ -59,7 +75,7 @@ export function SegmentedControl<T extends string>({
           key={o.value}
           value={o.value}
           disabled={o.disabled}
-          className={cn("gap-1.5", fullWidth && "flex-1")}
+          className={cn("gap-1.5", TONE[o.tone ?? "default"], fullWidth && "flex-1")}
         >
           {o.icon}
           {o.label}

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

@@ -32,6 +32,39 @@ export interface UiText {
     dropped: string;
     cancelled: string;
   }>;
+  /** MultiSelectCombobox / FormFieldCombobox (optional) — `search`/`remove` ใช้ `{label}`, `add` ใช้ `{value}` */
+  combobox?: Partial<{
+    search: string;
+    empty: string;
+    clearAll: string;
+    remove: string;
+    add: string;
+  }>;
+  /** ResourcePropertyFilter (optional) — ตัวที่ใช้ `{name}` คือชื่อคุณสมบัติ */
+  filter?: Partial<{
+    title: string;
+    description: string;
+    searchProperty: string;
+    clearSearch: string;
+    noProperties: string;
+    active: string;
+    searchValue: string;
+    filterOne: string;
+    clearOne: string;
+    min: string;
+    max: string;
+    unit: string;
+  }>;
+  /** AppShell เมนู (optional) — `noResults` ใช้ `{query}` */
+  nav?: Partial<{
+    main: string;
+    sub: string;
+    choosePage: string;
+    noResults: string;
+    clearSearch: string;
+  }>;
+  /** ErrorState เซสชันหมดอายุ (optional) */
+  sessionExpired?: Partial<{ title: string; description: string; signIn: string }>;
   /** SelectionBar (optional) — `selected` ใช้ `{count}` */
   selection?: Partial<{ selected: string; clear: string }>;
   /** DataTable (optional) — `rowsSelected` ใช้ `{selected}`/`{total}`, `pageOf` ใช้ `{page}`/`{pages}` */
@@ -46,6 +79,13 @@ export interface UiText {
     deleting: string;
     deleted: string;
     delete: string;
+    search: string;
+    clearSearch: string;
+    filters: string;
+    filtersDescription: string;
+    closeFilters: string;
+    /** ใช้ `{name}` */
+    clearFilter: string;
   }>;
   /** DialogsProvider: ปุ่มปิดของ alert (optional — ค่าเริ่มต้น "ตกลง") */
   ok?: string;
@@ -163,6 +203,40 @@ export const UI_TEXT_TH: UiText = {
   confirmTitle: "ยืนยันการทำรายการ",
   actionFailed: "ดำเนินการไม่สำเร็จ",
   edit: "แก้ไข",
+  combobox: {
+    search: "ค้นหา {label}…",
+    empty: "ไม่พบข้อมูล",
+    clearAll: "ล้างทั้งหมด",
+    remove: "ลบ {label}",
+    add: "เพิ่ม “{value}”",
+  },
+  filter: {
+    title: "กรองตามคุณสมบัติ",
+    description: "ค่าในคุณสมบัติเดียวกันเป็น OR และคนละคุณสมบัติเป็น AND",
+    searchProperty: "ค้นหาคุณสมบัติ…",
+    clearSearch: "ล้างคำค้นหา",
+    noProperties: "ไม่พบคุณสมบัติ",
+    active: "ตัวกรองคุณสมบัติที่ใช้งาน",
+    searchValue: "ค้นหาข้อความ…",
+    filterOne: "กรอง {name}",
+    clearOne: "ล้างตัวกรอง {name}",
+    min: "ต่ำสุด",
+    max: "สูงสุด",
+    unit: "เลือกหน่วย",
+  },
+  nav: {
+    main: "เมนูหลัก",
+    sub: "เมนูย่อย",
+    choosePage: "เลือกหน้า…",
+    noResults: "ไม่พบ “{query}”",
+    clearSearch: "ล้างคำค้นหาเมนู",
+  },
+  sessionExpired: {
+    title: "เซสชันหมดอายุ",
+    description:
+      "คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง แล้วระบบจะพากลับมาหน้านี้",
+    signIn: "เข้าสู่ระบบ",
+  },
   selection: { selected: "เลือก {count} รายการ", clear: "ล้างการเลือก" },
   sortable: {
     handle: "ลากเพื่อจัดลำดับ",
@@ -182,6 +256,12 @@ export const UI_TEXT_TH: UiText = {
     deleting: "กำลังลบ{resource} “{name}”…",
     deleted: "ลบ{resource} “{name}” แล้ว",
     delete: "ลบ",
+    search: "ค้นหาข้อมูลในตาราง",
+    clearSearch: "ล้างคำค้นหา",
+    filters: "ตัวกรองข้อมูล",
+    filtersDescription: "เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที",
+    closeFilters: "ปิดตัวกรอง",
+    clearFilter: "ล้างตัวกรอง {name}",
   },
   ok: "ตกลง",
   alertTitle: "แจ้งให้ทราบ",
@@ -282,6 +362,40 @@ export const UI_TEXT_EN: UiText = {
   confirmTitle: "Please confirm",
   actionFailed: "Action failed",
   edit: "Edit",
+  combobox: {
+    search: "Search {label}…",
+    empty: "No results",
+    clearAll: "Clear all",
+    remove: "Remove {label}",
+    add: "Add “{value}”",
+  },
+  filter: {
+    title: "Filter by property",
+    description: "Values in the same property are OR, different properties are AND",
+    searchProperty: "Search properties…",
+    clearSearch: "Clear search",
+    noProperties: "No properties found",
+    active: "Active property filters",
+    searchValue: "Search values…",
+    filterOne: "Filter {name}",
+    clearOne: "Clear {name} filter",
+    min: "Min",
+    max: "Max",
+    unit: "Select unit",
+  },
+  nav: {
+    main: "Main menu",
+    sub: "Section menu",
+    choosePage: "Choose a page…",
+    noResults: "No match for “{query}”",
+    clearSearch: "Clear menu search",
+  },
+  sessionExpired: {
+    title: "Session expired",
+    description:
+      "You were signed out while working. Unsaved changes are lost — sign in again and we will bring you back to this page.",
+    signIn: "Sign in",
+  },
   selection: { selected: "{count} selected", clear: "Clear selection" },
   sortable: {
     handle: "Drag to reorder",
@@ -302,6 +416,12 @@ export const UI_TEXT_EN: UiText = {
     deleting: "Deleting{resource} “{name}”…",
     deleted: "“{name}”{resource} deleted",
     delete: "Delete",
+    search: "Search the table",
+    clearSearch: "Clear search",
+    filters: "Filters",
+    filtersDescription: "Combine conditions — results update instantly",
+    closeFilters: "Close filters",
+    clearFilter: "Clear {name} filter",
   },
   ok: "OK",
   alertTitle: "Notice",

package/src/index.ts

@@ -197,7 +197,11 @@ export {
 export { type SaveState, SaveStatus, type SaveStatusText } from "./components/shared/save-status";
 export { SecretReveal } from "./components/shared/secret-reveal";
 export { SectionCard } from "./components/shared/section-card";
-export { SegmentedControl, type SegmentedOption } from "./components/shared/segmented-control";
+export {
+  SegmentedControl,
+  type SegmentedOption,
+  type SegmentedTone,
+} from "./components/shared/segmented-control";
 export {
   type SelectionAction,
   SelectionBar,