@suphark/ui 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.18.0] — 2026-09-30
+
+> 0.17.0 ถูก publish ตอนที่ `LanguageSwitch` ยังไม่เข้า (commit ถัดไป) — ของชิ้นนี้จึงออกเป็น 0.18.0
+
+### Added
+
+- **`LanguageSwitch`** + **`LanguageMenuItems`** (barrel) — สลับภาษาที่ Pi PDF (`language-selector.tsx`) / Pi Config (`locale-toggle.tsx` + `locale-menu-items.tsx`) / Pi Auth เขียนซ้ำ; แพ็กเกจไม่รู้จัก i18n ของแอป → แอปส่ง `locales[{ value, label, hint?, flag? }]` + `value` + `onValueChange` เอง (เขียน cookie/เรียก server action/`router.refresh()` ฝั่งแอป):
+  - `LanguageSwitch` (นอกเมนู เช่น header/หน้าก่อนล็อกอิน — คู่กับ `ThemeToggle`): `mode` `auto` (ค่าเริ่มต้น: ≤2 ภาษา = ปุ่มเดียววนรอบแสดงชื่อภาษาถัดไป, >2 = เมนูพร้อมธง/บรรทัดรอง) / `toggle` / `menu`, `showLabel` (menu = รหัสภาษาตัวใหญ่, false = ปุ่มไอคอน), `label` (ค่าเริ่มต้น **`UiText.language.label`** — key ใหม่), `align`, props ของ `Button` ส่งผ่านหมด; `locales` ว่าง = ไม่ render
+  - `LanguageMenuItems` (ในเมนูผู้ใช้ — คู่กับ `ThemeMenuItems`): `DropdownMenuRadioGroup` + หัวกลุ่มจาก `UiText.language`, `disabled` ปิดระหว่าง pending
+- `useCopyToClipboard`: `copyToClipboard(text, key?, labels?)` — ทับข้อความ toast เฉพาะครั้งนั้นได้ (ข้อสังเกตจาก Pi Config: `RevealedValues` มีข้อความต่างกันทุกปุ่ม "คัดลอกคีย์ X / ค่าของ X / ทั้งชุด N ค่า" แต่เดิม hook รับข้อความเดียวตอนสร้าง จึงต้องปิด toast แล้วเรียก `toast.success()` เอง)
+- `SimpleSelect`: **`emptyValue`** — บอกว่า option ไหนหมายถึง "ไม่เลือก/ไม่มี" แล้วคอมโพเนนต์ส่ง **ค่าว่าง** ใน FormData แทน sentinel (Base UI ไม่รับ `value=""`) — เดิม `name` ใช้ได้เฉพาะเคสที่ค่าที่เลือก = ค่าที่ส่ง 1:1 แอปที่มี "ไม่มีกลุ่ม" ต้องทำ hidden input แปลงค่าเอง (รายงานจาก Pi Config `SectionSelect`: `__none__` หลุดเข้า server action); ใช้คู่ `required` ไม่ได้ (hidden input ไม่เข้า constraint validation) ให้ตรวจที่ schema
+- `SearchInput`: ส่ง `aria-label` ตรง ๆ ได้แล้ว (เดิมคอมโพเนนต์เขียนทับเงียบ ๆ หลัง `{...props}` ต้องใช้ `label` เท่านั้น — รายงานจาก Pi PDF)
+- showcase: หน้า `/components/language-switch` — 102 หน้า; tests 8 กรณีเพิ่ม (รวม 154)
+
 ## [0.17.0] — 2026-09-30
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.17.0",
+  "version": "0.18.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/shared/form/search-input.tsx

@@ -21,7 +21,7 @@ export interface SearchInputProps
   onClear?: () => void;
   /** xs = h-7, sm = h-8 (ค่าเริ่มต้น), default = h-9 */
   size?: "xs" | "sm" | "default";
-  /** aria-label ของช่อง (ค่าเริ่มต้น `UiText.search.label`) */
+  /** aria-label ของช่อง (ค่าเริ่มต้น `UiText.search.label`) — ส่ง `aria-label` ตรง ๆ ก็ได้ ชนะ `label` */
   label?: string;
   /** aria-label ของปุ่มล้าง (ค่าเริ่มต้น `UiText.search.clear`) */
   clearLabel?: string;
@@ -56,6 +56,7 @@ export function SearchInput({
   disabled,
   onKeyDown,
   ref,
+  "aria-label": ariaLabelProp,
   ...props
 }: SearchInputProps) {
   const text = useUiText();
@@ -95,7 +96,7 @@ export function SearchInput({
         value={value}
         disabled={disabled}
         placeholder={placeholder ?? text.search?.placeholder ?? "ค้นหา…"}
-        aria-label={label ?? text.search?.label ?? "ค้นหา"}
+        aria-label={ariaLabelProp ?? label ?? text.search?.label ?? "ค้นหา"}
         autoComplete="off"
         spellCheck={false}
         onChange={(e) => change(e.target.value)}

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

@@ -45,6 +45,13 @@ export interface SimpleSelectProps<T extends string = string> {
   name?: string;
   /** บังคับเลือกก่อน submit ฟอร์ม */
   required?: boolean;
+  /**
+   * ค่าของ option ที่หมายถึง "ไม่เลือก/ไม่มี" — Base UI ไม่รับค่าว่างเป็น `value` ของ option แอปจึงต้องใช้
+   * ค่าพิเศษ (เช่น `"__none__"`); ส่ง `emptyValue` มาแล้วคอมโพเนนต์จะส่ง **ค่าว่าง** ใน FormData แทน
+   * ไม่ให้ sentinel ของ UI หลุดไปถึง server action (ขอจาก Pi Config — `SectionSelect` เคยต้องทำ hidden input เอง)
+   * หมายเหตุ: ใช้คู่ `required` ไม่ได้ (hidden input ไม่เข้า constraint validation ของ browser) ให้ตรวจฝั่ง schema
+   */
+  emptyValue?: string;
 }
 
 function isGroupList<T extends string>(
@@ -69,7 +76,12 @@ export function SimpleSelect<T extends string = string>({
   ariaLabel,
   name,
   required,
+  emptyValue,
 }: SimpleSelectProps<T>) {
+  // ส่งค่าเองเมื่อมี emptyValue (ต้องแปลง sentinel → "") — นอกนั้นใช้ hidden input ของ Base UI
+  const ownsHiddenInput = Boolean(name) && emptyValue !== undefined;
+  const [internalValue, setInternalValue] = React.useState<T | undefined>(defaultValue);
+  const currentValue = value ?? internalValue;
   const { flatOptions, groups } = React.useMemo(() => {
     if (isGroupList(options)) {
       const flat = options.flatMap((g) => g.options);
@@ -123,13 +135,13 @@ export function SimpleSelect<T extends string = string>({
       // ผู้เรียกเลือกส่งอย่างใดอย่างหนึ่ง ค่าที่ส่งมาจึงไม่ใช่ค่าที่เปลี่ยนไปมา
       defaultValue={defaultValue}
       onValueChange={(val) => {
-        if (val !== null && onValueChange) {
-          onValueChange(val as T);
-        }
+        if (val === null) return;
+        if (value === undefined) setInternalValue(val as T);
+        onValueChange?.(val as T);
       }}
       disabled={disabled}
-      name={name}
-      required={required}
+      name={ownsHiddenInput ? undefined : name}
+      required={ownsHiddenInput ? undefined : required}
     >
       <SelectTrigger
         size={size}
@@ -155,6 +167,13 @@ export function SimpleSelect<T extends string = string>({
           </React.Fragment>
         ))}
       </SelectContent>
+      {ownsHiddenInput && (
+        <input
+          type="hidden"
+          name={name}
+          value={currentValue === undefined || currentValue === emptyValue ? "" : currentValue}
+        />
+      )}
     </Select>
   );
 }

package/src/components/shared/language/language-menu-items.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import {
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import type { ReactNode } from "react";
+
+export interface LanguageOption {
+  /** รหัสภาษา เช่น "th", "en" */
+  value: string;
+  /** ชื่อภาษา — ควรเขียนเป็นภาษานั้นเอง ("ไทย" / "English") ผู้ใช้จะหาเจอแม้อ่านภาษาปัจจุบันไม่ออก */
+  label: ReactNode;
+  /** บรรทัดรองในเมนู เช่นชื่อภาษาในภาษาปัจจุบัน */
+  hint?: ReactNode;
+  /** ธงหน้าชื่อ (emoji หรือ element) */
+  flag?: ReactNode;
+}
+
+/**
+ * กลุ่มตัวเลือกภาษาสำหรับใส่ใน DropdownMenu (เช่นเมนูผู้ใช้) — คู่กับ `ThemeMenuItems`
+ * แพ็กเกจไม่รู้จัก i18n ของแอป: แอปส่ง `locales` + `value` + `onValueChange` (จะเขียน cookie/เรียก
+ * server action หรือ `router.refresh()` ก็ทำฝั่งแอป) — ยกจาก Pi Config/Pi PDF ที่เขียนเหมือนกัน
+ */
+export function LanguageMenuItems({
+  value,
+  onValueChange,
+  locales,
+  label,
+  disabled = false,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  locales: ReadonlyArray<LanguageOption>;
+  /** หัวกลุ่ม (ค่าเริ่มต้น `UiText.language.label` — "ภาษา") */
+  label?: ReactNode;
+  /** ปิดระหว่างเปลี่ยนภาษา (pending ของ transition) */
+  disabled?: boolean;
+}) {
+  const text = useUiText();
+  return (
+    <DropdownMenuGroup>
+      <DropdownMenuLabel className="text-muted-foreground">
+        {label ?? text.language?.label ?? "ภาษา"}
+      </DropdownMenuLabel>
+      <DropdownMenuRadioGroup value={value} onValueChange={(next) => onValueChange(String(next))}>
+        {locales.map((locale) => (
+          <DropdownMenuRadioItem key={locale.value} value={locale.value} disabled={disabled}>
+            {locale.flag && (
+              <span aria-hidden="true" className="text-base leading-none">
+                {locale.flag}
+              </span>
+            )}
+            <span className="flex min-w-0 flex-col">
+              <span className="truncate">{locale.label}</span>
+              {locale.hint && (
+                <span className="truncate text-muted-foreground text-xs">{locale.hint}</span>
+              )}
+            </span>
+          </DropdownMenuRadioItem>
+        ))}
+      </DropdownMenuRadioGroup>
+    </DropdownMenuGroup>
+  );
+}

package/src/components/shared/language/language-switch.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { cn } from "@suphark/ui/lib/utils";
+import { Languages } from "lucide-react";
+import type { ComponentProps } from "react";
+import { LanguageMenuItems, type LanguageOption } from "./language-menu-items";
+
+export interface LanguageSwitchProps
+  extends Omit<ComponentProps<typeof Button>, "value" | "onChange" | "children"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  locales: ReadonlyArray<LanguageOption>;
+  /**
+   * `toggle` = ปุ่มเดียววนไปภาษาถัดไป (เหมาะกับ 2 ภาษา), `menu` = ปุ่มเปิดเมนูให้เลือก,
+   * `auto` (ค่าเริ่มต้น) = 2 ภาษาใช้ toggle มากกว่านั้นใช้ menu
+   */
+  mode?: "auto" | "toggle" | "menu";
+  /** แสดงข้อความบนปุ่ม (toggle = ชื่อภาษาถัดไป, menu = รหัสภาษาปัจจุบันตัวใหญ่) — false = ปุ่มไอคอนล้วน */
+  showLabel?: boolean;
+  /** aria-label ของปุ่ม + หัวเมนู (ค่าเริ่มต้น `UiText.language.label`) */
+  label?: string;
+  /** ด้านที่เมนูชิด (โหมด menu) */
+  align?: "start" | "center" | "end";
+}
+
+/**
+ * สลับภาษานอกเมนูผู้ใช้ (header, หน้าที่ยังไม่ล็อกอิน) — คู่กับ `ThemeToggle`; ในเมนูใช้ `LanguageMenuItems`
+ * แพ็กเกจไม่รู้จัก i18n ของแอป: แอปส่ง `locales`/`value`/`onValueChange` เอง — ยกจาก Pi Config/Pi PDF
+ *
+ *   <LanguageSwitch value={locale} onValueChange={setLocale} locales={[{ value: "th", label: "ไทย" }, { value: "en", label: "English" }]} />
+ */
+export function LanguageSwitch({
+  value,
+  onValueChange,
+  locales,
+  mode = "auto",
+  showLabel = true,
+  label,
+  align = "end",
+  variant = "ghost",
+  size = "sm",
+  className,
+  disabled,
+  ...props
+}: LanguageSwitchProps) {
+  const text = useUiText();
+  const ariaLabel = label ?? text.language?.label ?? "ภาษา";
+  const index = locales.findIndex((l) => l.value === value);
+  const current = locales[index === -1 ? 0 : index];
+  const next = locales[(index + 1) % Math.max(locales.length, 1)];
+  const asToggle = mode === "toggle" || (mode === "auto" && locales.length <= 2);
+
+  if (locales.length === 0) return null;
+
+  if (asToggle) {
+    return (
+      <Button
+        {...props}
+        type="button"
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        title={ariaLabel}
+        className={className}
+        onClick={() => next && onValueChange(next.value)}
+      >
+        <Languages aria-hidden="true" />
+        {showLabel && next?.label}
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            {...props}
+            type="button"
+            variant={variant}
+            size={size}
+            disabled={disabled}
+            aria-label={ariaLabel}
+            title={ariaLabel}
+            className={cn("font-normal", className)}
+          >
+            <Languages aria-hidden="true" className="text-muted-foreground" />
+            {showLabel && (
+              <span className="font-medium uppercase tracking-wider">
+                {current?.value ?? value}
+              </span>
+            )}
+          </Button>
+        }
+      />
+      <DropdownMenuContent align={align} className="w-52">
+        <LanguageMenuItems
+          value={value}
+          onValueChange={onValueChange}
+          locales={locales}
+          label={ariaLabel}
+          disabled={disabled}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -51,6 +51,8 @@ export interface UiText {
   sectionNav?: Partial<{ tabs: string }>;
   /** SearchInput: placeholder / aria-label ช่อง / aria-label ปุ่มล้าง (optional) */
   search?: Partial<{ placeholder: string; label: string; clear: string }>;
+  /** LanguageSwitch/LanguageMenuItems: หัวกลุ่ม + aria-label ปุ่ม (optional — "ภาษา") */
+  language?: Partial<{ label: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -85,6 +87,7 @@ export const UI_TEXT_TH: UiText = {
   theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
   sectionNav: { tabs: "แท็บย่อย" },
   search: { placeholder: "ค้นหา…", label: "ค้นหา", clear: "ล้างการค้นหา" },
+  language: { label: "ภาษา" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -119,6 +122,7 @@ export const UI_TEXT_EN: UiText = {
   theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
   sectionNav: { tabs: "Section tabs" },
   search: { placeholder: "Search…", label: "Search", clear: "Clear search" },
+  language: { label: "Language" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/hooks/use-copy-to-clipboard.ts

@@ -26,6 +26,7 @@ const DEFAULT_LABELS: CopyToClipboardLabels = {
  *
  *   const { copyToClipboard, copiedKey } = useCopyToClipboard({ toast: { success: "คัดลอกแล้ว", failed: "คัดลอกไม่สำเร็จ" } });
  *   copyToClipboard(row.value, row.id)   // หลายปุ่มในหน้าเดียว → copiedKey บอกว่าปุ่มไหนเพิ่งคัดลอก
+ *   copyToClipboard(all, "all", { success: `คัดลอกทั้งชุด ${n} ค่า` })   // ข้อความเฉพาะครั้งนั้น
  */
 export function useCopyToClipboard(options: UseCopyToClipboardOptions = {}) {
   const { toast = true, timeout = 2000 } = options;
@@ -44,16 +45,21 @@ export function useCopyToClipboard(options: UseCopyToClipboardOptions = {}) {
   const { success, failed } = labels;
 
   const copyToClipboard = useCallback(
-    async (text: string, key = "default"): Promise<boolean> => {
+    async (
+      text: string,
+      key = "default",
+      /** ทับข้อความ toast เฉพาะครั้งนี้ — ปุ่มหลายตัวที่ข้อความต่างกัน (ขอจาก Pi Config) */
+      labels?: Partial<CopyToClipboardLabels>,
+    ): Promise<boolean> => {
       const ok = await copyText(text);
       if (timer.current) clearTimeout(timer.current);
       if (!ok) {
         setCopiedKey(null);
-        if (showToast) sonner.error(failed);
+        if (showToast) sonner.error(labels?.failed ?? failed);
         return false;
       }
       setCopiedKey(key);
-      if (showToast) sonner.success(success);
+      if (showToast) sonner.success(labels?.success ?? success);
       timer.current = setTimeout(() => setCopiedKey(null), timeout);
       return true;
     },

package/src/index.ts

@@ -98,6 +98,14 @@ export {
 } from "./components/shared/icon-picker";
 export { InfoHint } from "./components/shared/info-hint";
 export { Initials, initialsOf } from "./components/shared/initials";
+export {
+  LanguageMenuItems,
+  type LanguageOption,
+} from "./components/shared/language/language-menu-items";
+export {
+  LanguageSwitch,
+  type LanguageSwitchProps,
+} from "./components/shared/language/language-switch";
 export { ErrorState, type RouteError } from "./components/shared/layout/error-state";
 export {
   MultiSelectCombobox,