@suphark/ui 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 รูปแบบตาม [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
+
+- **`CopyButton`** (barrel) — ปุ่มคัดลอกข้อความ: ไอคอน Copy → ✓ (`text-success`) ชั่วครู่แล้วกลับ, ใช้ `useCopyToClipboard` (มี fallback `execCommand` สำหรับ webview ที่บล็อก clipboard API) แอปไม่ต้องเขียน state เอง (Pi Auth เขียนซ้ำ 12 ไฟล์, Pi Config ใน `RevealedValues`): `value`, `children` (ไม่ส่ง = ปุ่มไอคอนล้วน), `label`/`copiedLabel` (ค่าเริ่มต้น `UiText.copy`/`copied` — เป็น aria-label เมื่อไม่มี children และเป็น `title` เสมอ), `toast` (ค่าเริ่มต้น **false** เพราะปุ่มแสดง ✓ อยู่แล้ว — ส่ง `true` หรือข้อความของแอปได้), `timeout`, `onCopied`, props อื่นของ `Button` (variant/size/className) ส่งผ่านหมด
+- **`CodeBlock`** (barrel, สเปกจาก Pi Config — ของเดิมอยู่ `features/docs/code-block.tsx` ใช้ 2 ไฟล์; Pi Auth มีแบบเดียวกัน ~9 จุด) — บล็อกโค้ด/คำสั่ง: หัวแถบ `title ?? lang ?? "shell"` (mono, `title={false}` = ไม่มีหัวแถบ) + `CopyButton`, เนื้อเป็น `<pre><code>` mono เลื่อนแนวนอน; `copyText` เมื่อคัดลอกไม่เท่ากับที่แสดง (เช่นคัดลอกเฉพาะค่า token ไม่เอา `KEY=`), `copyLabel`, `showCopy`, `wrap` (ตัดบรรทัดแทนเลื่อน), `maxHeightClassName`; ไม่มี syntax highlight โดยตั้งใจ (ไม่เพิ่ม dependency)
+- `SearchInput`: ใช้แบบ **uncontrolled** ได้แล้ว — ไม่ส่ง `value` = คุมค่าในตัวเองจาก `defaultValue` (ปุ่มล้าง/Escape ยังทำงาน) จึงวางใน `<form>` ที่ submit ไป server action/URL param พร้อม `name` ได้ (คำถามจาก Pi Auth: `/console/logs`, `/platform/users`); `onValueChange` ยังเรียกทุกตัวอักษรทั้งสองโหมด — **ไม่มี debounce ในตัว** (ให้แอป debounce เอง) จดไว้ใน docstring แล้ว
+- showcase: หน้า `/components/copy-button`, `/components/code-block` — 101 หน้า; tests 5 กรณีเพิ่ม (รวม 146)
+- test: `date-picker.test.tsx` ตั้ง timeout 20s (เปิด popup = render ปฏิทินทั้งเดือนใน jsdom ช้าเป็นครั้งคราวเกิน 5s ตอนรันทั้งชุด — ทำให้ `pnpm verify`/CI แดงสุ่ม ๆ)
+
 ## [0.16.0] — 2026-09-30
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.16.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/button/copy-button.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Button } from "@suphark/ui/components/ui/button";
+import { useCopyToClipboard } from "@suphark/ui/hooks/use-copy-to-clipboard";
+import { cn } from "@suphark/ui/lib/utils";
+import { Check, Copy } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
+export interface CopyButtonProps
+  extends Omit<ComponentProps<typeof Button>, "onClick" | "children" | "value"> {
+  /** ข้อความที่จะคัดลอก */
+  value: string;
+  /** ป้ายบนปุ่ม — ไม่ส่ง = ปุ่มไอคอนล้วน (ใช้ `label` เป็น aria-label) */
+  children?: ReactNode;
+  /** aria-label/title ของปุ่ม (ค่าเริ่มต้น `UiText.copy`) */
+  label?: string;
+  /** aria-label/title หลังคัดลอกแล้ว (ค่าเริ่มต้น `UiText.copied`) */
+  copiedLabel?: string;
+  /** toast ของ `useCopyToClipboard` — ค่าเริ่มต้น `false` เพราะปุ่มนี้แสดง ✓ อยู่แล้ว */
+  toast?: boolean | { success?: string; failed?: string };
+  /** ms ที่ไอคอน ✓ ค้างไว้ (ค่าเริ่มต้น 2000) */
+  timeout?: number;
+  onCopied?: (value: string) => void;
+}
+
+/**
+ * ปุ่มคัดลอกข้อความ: ไอคอน Copy → ✓ ชั่วครู่หลังคัดลอก (แอปไม่ต้องเขียน state/clipboard เอง)
+ * ใช้ `useCopyToClipboard` ที่มี fallback `execCommand` สำหรับ webview ที่บล็อก clipboard API
+ *
+ *   <CopyButton value={token} />                                  // ปุ่มไอคอน
+ *   <CopyButton value={url} variant="outline" size="sm">คัดลอกลิงก์</CopyButton>
+ */
+export function CopyButton({
+  value,
+  children,
+  label,
+  copiedLabel,
+  toast = false,
+  timeout = 2000,
+  onCopied,
+  variant = "ghost",
+  size,
+  className,
+  disabled,
+  ...props
+}: CopyButtonProps) {
+  const text = useUiText();
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ toast, timeout });
+  const idle = label ?? text.copy;
+  const done = copiedLabel ?? text.copied;
+  const title = isCopied ? done : idle;
+
+  return (
+    <Button
+      {...props}
+      type="button"
+      variant={variant}
+      size={size ?? (children ? "sm" : "icon-sm")}
+      disabled={disabled}
+      aria-label={children ? undefined : title}
+      title={title}
+      className={cn(isCopied && "text-success", className)}
+      onClick={async () => {
+        if (await copyToClipboard(value)) onCopied?.(value);
+      }}
+    >
+      {isCopied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+      {children}
+    </Button>
+  );
+}

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

@@ -6,6 +6,7 @@ export { AddNewButton } from "./add-new-button";
 export { ActionButton, type ActionButtonProps } from "./base/action-button";
 export { CancelButton } from "./cancel-button";
 export { ConfirmButton } from "./confirm-button";
+export { CopyButton, type CopyButtonProps } from "./copy-button";
 export { DeleteButton } from "./delete-button";
 export { FloatingSaveButton } from "./floating-save-button";
 export { PrintButton } from "./print-button";

package/src/components/shared/form/search-input.tsx

@@ -9,18 +9,19 @@ import {
 } from "@suphark/ui/components/ui/input-group";
 import { cn } from "@suphark/ui/lib/utils";
 import { Search, X } from "lucide-react";
-import { type ComponentProps, useRef } from "react";
+import { type ComponentProps, useRef, useState } from "react";
 
 export interface SearchInputProps
   extends Omit<ComponentProps<"input">, "size" | "value" | "onChange" | "type"> {
-  value: string;
-  /** รับค่าใหม่ตรง ๆ (ไม่ใช่ event) — ปุ่มล้างก็เรียกด้วย `""` */
-  onValueChange: (value: string) => void;
+  /** ไม่ส่ง = uncontrolled (คุมค่าในตัวเอง จาก `defaultValue`) — ใช้กับฟอร์มที่ submit เองได้ */
+  value?: string;
+  /** รับค่าใหม่ตรง ๆ (ไม่ใช่ event) — ปุ่มล้างก็เรียกด้วย `""`; uncontrolled ก็ยังเรียกให้ */
+  onValueChange?: (value: string) => void;
   /** เรียกเพิ่มหลังกดปุ่มล้าง/Escape (เช่นรีเซ็ตหน้า pagination) */
   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;
@@ -32,14 +33,18 @@ export interface SearchInputProps
 
 /**
  * ช่องค้นหามาตรฐาน: ไอคอนแว่นขยายซ้าย + ปุ่มล้าง (X) ขวาเมื่อมีข้อความ + Escape ล้างค่า
- * เป็น controlled ล้วน (แอปคุม state/debounce เอง) — ซ้ำอยู่ใน Pi Auth/Pi PDF/DueBell จึงยกมาไว้ที่นี่
+ * ใช้ได้ทั้ง controlled (`value` + `onValueChange` — แอปคุม state/debounce เอง) และ uncontrolled
+ * (`defaultValue` + `name` ในฟอร์มที่ submit ไป server action/URL param) — ซ้ำอยู่ใน Pi Auth/Pi PDF/DueBell
+ * `onValueChange` ยิงทุกตัวอักษร (ไม่มี debounce ในตัว — ให้แอป debounce เองถ้าต้องยิง query)
  *
  *   const [q, setQ] = useState("");
  *   <SearchInput value={q} onValueChange={setQ} placeholder="ค้นหาสมาชิก…" />
+ *   <form action={search}><SearchInput name="q" defaultValue={q} /></form>
  */
 export function SearchInput({
-  value,
+  value: valueProp,
   onValueChange,
+  defaultValue,
   onClear,
   size = "sm",
   label,
@@ -51,13 +56,23 @@ export function SearchInput({
   disabled,
   onKeyDown,
   ref,
+  "aria-label": ariaLabelProp,
   ...props
 }: SearchInputProps) {
   const text = useUiText();
   const inputRef = useRef<HTMLInputElement>(null);
+  // uncontrolled: เก็บค่าเองเพื่อให้ปุ่มล้าง/Escape ทำงาน และรู้ว่าจะโชว์ปุ่มล้างไหม
+  const [uncontrolled, setUncontrolled] = useState(String(defaultValue ?? ""));
+  const value = valueProp ?? uncontrolled;
+
+  function change(next: string) {
+    if (valueProp === undefined) setUncontrolled(next);
+    onValueChange?.(next);
+  }
 
   function clear() {
-    onValueChange("");
+    change("");
+    if (valueProp === undefined && inputRef.current) inputRef.current.value = "";
     onClear?.();
     inputRef.current?.focus();
   }
@@ -81,10 +96,10 @@ 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) => onValueChange(e.target.value)}
+        onChange={(e) => change(e.target.value)}
         onKeyDown={(e) => {
           onKeyDown?.(e);
           if (clearOnEscape && e.key === "Escape" && value && !e.defaultPrevented) {

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/text/code-block.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { CopyButton } from "@suphark/ui/components/shared/button/copy-button";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+export interface CodeBlockProps {
+  /** โค้ด/คำสั่งที่แสดง */
+  code: string;
+  /** ป้ายหัวแถบ (ค่าเริ่มต้น `lang` หรือ "shell") — ส่ง `false` เพื่อซ่อนหัวแถบทั้งแถว */
+  title?: ReactNode | false;
+  /** ชื่อภาษา — เป็นป้ายเฉย ๆ ไม่มี syntax highlight */
+  lang?: string;
+  /** สิ่งที่คัดลอกจริงเมื่อต่างจากที่แสดง (เช่นคัดลอกเฉพาะค่า token ไม่เอา `KEY=`) */
+  copyText?: string;
+  /** aria-label ของปุ่มคัดลอก */
+  copyLabel?: string;
+  showCopy?: boolean;
+  /** ตัดบรรทัดแทนเลื่อนแนวนอน */
+  wrap?: boolean;
+  /** จำกัดความสูงแล้วเลื่อน เช่น `"max-h-72"` */
+  maxHeightClassName?: string;
+  className?: string;
+}
+
+/**
+ * บล็อกโค้ด/คำสั่งพร้อมปุ่มคัดลอก — หัวแถบชื่อไฟล์/ภาษา + `<pre><code>` mono เลื่อนแนวนอนได้
+ * ไม่มี syntax highlight โดยตั้งใจ (คำสั่ง/ค่า config ไม่ต้องการ และเลี่ยง dependency)
+ *
+ *   <CodeBlock code="pnpm add @suphark/ui" />
+ *   <CodeBlock title="API_TOKEN" code={`API_TOKEN=${token}`} copyText={token} />
+ */
+export function CodeBlock({
+  code,
+  title,
+  lang,
+  copyText,
+  copyLabel,
+  showCopy = true,
+  wrap = false,
+  maxHeightClassName,
+  className,
+}: CodeBlockProps) {
+  const heading = title === false ? null : (title ?? lang ?? "shell");
+  const showHeader = heading !== null || showCopy;
+
+  return (
+    <div
+      data-slot="code-block"
+      className={cn("min-w-0 overflow-hidden rounded-lg border bg-card", className)}
+    >
+      {showHeader && (
+        <div className="flex items-center justify-between gap-2 border-b bg-muted px-3 py-1.5">
+          <span className="min-w-0 truncate font-mono text-muted-foreground text-xs">
+            {heading}
+          </span>
+          {showCopy && (
+            <CopyButton
+              value={copyText ?? code}
+              label={copyLabel}
+              variant="outline"
+              size="icon-xs"
+              className="shrink-0"
+            />
+          )}
+        </div>
+      )}
+      <pre
+        className={cn(
+          "px-3 py-2 font-mono text-xs leading-relaxed",
+          wrap ? "whitespace-pre-wrap break-words" : "overflow-x-auto",
+          maxHeightClassName && cn("overflow-y-auto", maxHeightClassName),
+        )}
+      >
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

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,
@@ -134,6 +142,7 @@ export { SelectionButton } from "./components/shared/selection-button";
 export { Stat } from "./components/shared/stat";
 export { StatusBadge, statusTone, type Tone } from "./components/shared/status-badge";
 export { SwitcherChevron } from "./components/shared/switcher-chevron";
+export { CodeBlock, type CodeBlockProps } from "./components/shared/text/code-block";
 export {
   PrimarySecondaryText,
   type PrimarySecondaryTextProps,