@suphark/ui 0.28.0 → 0.30.0

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

@@ -22,6 +22,49 @@ export interface UiText {
   actionFailed?: string;
   /** InlineEdit: ปุ่มดินสอ (optional — "แก้ไข") */
   edit?: string;
+  /** SortableList (optional) — ที่จับลาก + คำอธิบายสำหรับ screen reader */
+  sortable?: Partial<{
+    handle: string;
+    instructions: string;
+    /** ใช้ `{index}` / `{total}` */
+    started: string;
+    moved: string;
+    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}` */
@@ -36,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;
@@ -153,7 +203,49 @@ 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: "ลากเพื่อจัดลำดับ",
+    instructions: "กด Space เพื่อเริ่มลาก ใช้ปุ่มลูกศรเลื่อน แล้วกด Space อีกครั้งเพื่อวาง (Esc = ยกเลิก)",
+    started: "เริ่มลากรายการที่ {index} จาก {total}",
+    moved: "ย้ายไปตำแหน่งที่ {index} จาก {total}",
+    dropped: "วางที่ตำแหน่งที่ {index} จาก {total}",
+    cancelled: "ยกเลิกการลาก",
+  },
   table: {
     rowsPerPage: "แถวต่อหน้า",
     pageOf: "หน้า {page} จาก {pages}",
@@ -164,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: "แจ้งให้ทราบ",
@@ -264,7 +362,50 @@ 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",
+    instructions:
+      "Press Space to start dragging, use arrow keys to move, Space again to drop (Esc to cancel)",
+    started: "Picked up item {index} of {total}",
+    moved: "Moved to position {index} of {total}",
+    dropped: "Dropped at position {index} of {total}",
+    cancelled: "Dragging cancelled",
+  },
   table: {
     rowsPerPage: "Rows per page",
     pageOf: "Page {page} of {pages}",
@@ -275,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",