@suphark/ui 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.8.0] — 2026-09-21
+
+รอบ feedback หลังทุกแอปย้ายมา 0.7.0 ครบ 6/6 — สเปกจาก Pi Done (ColorPicker, CommandPalette client-side), Pi Mail (ActionForm), Pi Files (file explorer 4 ตัว) ทำรวดเดียว; minor ทั้งหมด ไม่เปลี่ยน API เดิม
+
+### Added
+
+- **`ColorPicker<T>`** + **`ColorSwatch`** (barrel) — กริดเลือกสีจากชุดที่แอปส่ง `colors[{ value, label, swatchClassName? | swatch? (CSS) }]` (แพ็กเกจไม่ bundle palette): ปุ่ม `aria-pressed` + `aria-label`/`title`, ที่เลือก = `ring-2 ring-primary ring-offset-1` + ✓ ขาว, hover scale-105, roving tabindex + ลูกศร ↑↓←→/Home/End (จำนวนคอลัมน์อ่านจาก grid จริง), `columnsClassName` (grid-cols-5), `size` sm|md (size-7/size-8), `language`/`text`; `ColorSwatch` จุดสี size-3.5 สำหรับ trigger/badge (`color` CSS หรือ class) — ไม่มี popover ในตัว แอปครอบเองแบบ IconPicker (สเปกจาก Pi Done แทน metadata-color-picker 9 จุด)
+- **`CommandPalette` โหมด client-side / controlled** (ขอจาก Pi Done): `filter(query) => CommandPaletteSection[]` คำนวณฝั่งแอปทุกครั้งที่ query เปลี่ยน (เรียกแม้ query ว่าง — ใช้แสดง action/ล่าสุด, ไม่ debounce) แสดงก่อนผลจาก `search`; item ใน section รับ `onSelect()` (action ล้วน `href` ไม่บังคับแล้ว; มีทั้งคู่เรียก onSelect ก่อนแล้วไป href) + `shortcut` (ป้ายท้ายรายการ); `open`/`onOpenChange` คุมจากภายนอก, `showTrigger={false}` ซ่อนปุ่มของแพ็กเกจ, `shortcut={null}` ไม่ดักคีย์ลัด (แอปดักเอง); type `CommandPaletteSectionItem`
+- **`ActionForm`** (ข้อสังเกตจาก Pi Mail): `hideSuccessMessage` ซ่อนข้อความสำเร็จเมื่อแอปแจ้งผลเอง (ใน compact ข้อความดันปุ่มตกบรรทัด — ยังแสดง error), `submitDisabled` + `submitProps` (variant/size/className ของปุ่มส่ง); **`FormState<TData>`** — `ok: true` มี `data?: TData` และ `ActionForm<TData>`/`FormDialog<TData>`/`FormAction<TData>` generic → `onSuccess(s)` ได้ `s.data` ไม่ต้อง cast (`TData` ค่าเริ่มต้น `undefined` — โค้ดเดิมไม่ต้องแก้)
+- **`TreeView`** (barrel, สเปกจาก Pi Files) — ต้นไม้ทั่วไป `role=tree` ตาม WAI-ARIA (treeitem มี aria-level/expanded/selected, roving tabindex): `nodes[{ id, label, icon?, hasChildren?, children?, disabled?, badge? }]`, `selectedId`/`onSelect(id, node)`, `expandedIds`/`defaultExpandedIds`/`onExpandedChange` (controlled ได้), `loadChildren(id, node)` โหลดลูก lazy (Spinner ระหว่างโหลด, cache ในตัว, error = ลูกว่าง), `onDrop(targetId, e, node)`/`canDrop` HTML5 dnd ไฮไลต์ node (`data-drop-target`), `renderLabel(node, { expanded, selected, level })`, คีย์บอร์ด ↑↓ เลื่อน → ขยาย/เข้าไปลูกแรก ← ยุบ/กลับแม่ Home/End Enter/Space เลือก, `indent` (12px/ระดับ), `emptyState`, `label`; สีตาม token ของ Sidebar (เลือก = `bg-sidebar-accent`) — ลูกศรยุบ/ขยายไม่ใช่ button (ไม่ซ้อน focusable ใน treeitem)
+- **`Dropzone`** (barrel, สเปกจาก Pi Files) — พื้นที่ลากวางไฟล์: การ์ดเดี่ยว (เส้นประ + ไอคอน + ข้อความ + ปุ่มเลือกไฟล์; คลิกการ์ด/ปุ่ม/Enter เปิด picker) หรือ `overlay` ห่อ `children` แสดงชั้น "วางไฟล์ที่นี่" เฉพาะตอนลากไฟล์เข้าหน้า (ฟัง window + กัน browser เปิดไฟล์เมื่อวางนอกโซน); `onFiles(File[])`, `multiple` (true), `accept` (นามสกุล/กลุ่ม/mime — export `matchesAccept`), `maxBytes`, `onRejected(files, "size" | "type" | "multiple")`, `disabled`, `directory` (`webkitdirectory` + วางโฟลเดอร์ไล่อ่านไฟล์ข้างในผ่าน `webkitGetAsEntry`), `hint` (ค่าเริ่มต้นแสดง maxBytes), `icon`, `language`/`text`; data-attribute `data-active`/`data-disabled`
+- **`UploadList`** (barrel, สเปกจาก Pi Files) — รายการอัปโหลด `items[{ id, name, sizeBytes, progress 0–1, status queued|uploading|done|error|aborted, error?, mime? }]` พร้อม `ProgressBar` ต่อแถว (queued จาง), `FileTypeIcon`, สรุป "x/y เสร็จ"/"เสร็จทั้งหมด" (aria-live), `onCancel`/`onRetry`/`onClearDone`/`onClose`, ยุบ/ขยาย (`defaultCollapsed`), `floating` มุมล่างขวาแบบ Drive (w-80 ไม่เกินจอ), `title`, `language`/`text`; `items` ว่าง = ไม่ render
+- **`FileTypeIcon`** + **`getFileKind(mime, filename)`** (barrel) — ไอคอน lucide ตามชนิดไฟล์ (folder/image/video/audio/pdf/doc/sheet/slides/zip/code/text/default) จาก mime ก่อน นามสกุลสำรอง สีตาม token (pdf destructive, sheet success, folder/slides warning, สื่อ primary), `size` px, `data-kind`; **`formatBytes(bytes, locale)`** (lib/formatters) ฐาน 1024 "1.5 KB"/"12 MB"
+- showcase: หน้า `color-picker` (กริด + ครอบ Popover), `tree-view` (lazy + drop ไฟล์จริง), `dropzone` (การ์ด + overlay), `upload-list` (mock progress + ลอย), `file-type-icon`; `command-palette` เพิ่มแบบ client-side คุม open เอง; `action-form` เพิ่ม hideSuccessMessage/submitDisabled/data (SecretReveal) — 95 หน้า; tests 17 กรณีเพิ่ม (รวม 119)
+
 ## [0.7.0] — 2026-09-20
 
 component ระดับแอปที่ Pi Auth และ Pi Done เขียนซ้ำกัน — สเปกจาก Pi Auth ออกแบบให้ทั้งสองแอปใช้ร่วม (ไม่พึ่ง i18n/auth ของแอป ทุกข้อความรับเป็น prop หรือ `UiText`)

package/README.md

@@ -60,6 +60,7 @@ import { ThemeProvider, Toaster } from "@suphark/ui";
 ```ts
 // ทุกอย่างที่ไม่พึ่ง Next — primitives, shared, theme, hooks, cn
 import { Button, Card, FormFieldInput, StatusBadge, ThemeToggle, ConfirmDialog, useConfirm, cn } from "@suphark/ui";
+// file explorer / picker: TreeView, Dropzone, UploadList, FileTypeIcon, ColorPicker, IconPicker, CalendarMonthGrid ก็อยู่ barrel
 
 // ของที่ใช้ next/navigation หรือ next/link + โครงแอป
 import { AppShell, UserMenu, filterNav, FormDialog, RowActions, LinkButton, RefreshButton, PageShell } from "@suphark/ui/next";
@@ -82,12 +83,12 @@ import { ChartContainer } from "@suphark/ui/components/ui/chart";
 | โฟลเดอร์ | คืออะไร | กติกา |
 |---|---|---|
 | `src/components/ui/*` | shadcn/ui ต้นฉบับ 59 ตัว (+ `__tests__`) | **ห้ามแก้มือ** — เพิ่ม/อัปเดตด้วย `pnpm dlx shadcn@latest add <name>` ใน `packages/ui` (`components.json` ตั้ง alias ไว้แล้ว) |
-| `src/components/shared/*` | ของที่เราประกอบเอง: ปุ่มมาตรฐาน (`button/`), form-field บน react-hook-form (`form/`), layout, theme, combobox, และชุดจาก Pi Auth (FormDialog, NameIdFields, StatusBadge, RowMenu, …) | แก้ได้ แต่คง props เดิมให้มากที่สุด (minor = เพิ่ม, major = เปลี่ยน) |
+| `src/components/shared/*` | ของที่เราประกอบเอง: ปุ่มมาตรฐาน (`button/`), form-field บน react-hook-form (`form/`), layout, theme, combobox, ชุดจาก Pi Auth (FormDialog, NameIdFields, StatusBadge, RowMenu, …), picker (IconPicker/ColorPicker/CalendarMonthGrid), file explorer (TreeView/Dropzone/UploadList/FileTypeIcon) | แก้ได้ แต่คง props เดิมให้มากที่สุด (minor = เพิ่ม, major = เปลี่ยน) |
 | `src/components/data-table/*` | DataTable บน tanstack (toolbar, faceted filter, pagination, view options, row actions, ลากเรียงแถว) | entry `@suphark/ui/data-table` |
 | `src/components/pwa/*` | PWA: ลงทะเบียน/อัปเดต service worker, การ์ดชวนติดตั้ง, ดึงลงเพื่อรีเฟรช | entry `@suphark/ui/pwa` |
 | `src/components/app-shell/*` | AppShell (sidebar + header + เนื้อหา), AppNav, AppBrand, UserMenu, HeaderBreadcrumbs, NavLink, filterNav/searchNav | export ผ่าน `@suphark/ui/next` (ใช้ next/link, next/navigation) |
 | `src/components/design-system/*` | หน้า showcase (render ใน `apps/showcase`) | ไม่อยู่ใน barrel |
-| `src/lib/*`, `src/hooks/*` | `cn`, formatter วันที่ไทย, สีสถานะ, permission context, `useIsMobile`, `useCopyToClipboard` | |
+| `src/lib/*`, `src/hooks/*` | `cn`, formatter วันที่ไทย + `formatBytes`, สีสถานะ, permission context, `useIsMobile`, `useCopyToClipboard`, `useMounted`, `useTicker` | |
 | `src/styles.css` | token (slate + success/warning/sidebar/chart), radius, ฟอนต์, scrollbar, dark variant | |
 | `scripts/*.mjs` | audit บังคับ: Base UI props (`default*`/`onSelect`), typography scale | แอปปลายทางรันได้จาก `node_modules/@suphark/ui/scripts` |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

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

@@ -17,7 +17,7 @@ import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { cn } from "@suphark/ui/lib/utils";
 import { Search } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { type ReactNode, useEffect, useMemo, useState, useTransition } from "react";
+import { type ReactNode, useEffect, useMemo, useRef, useState, useTransition } from "react";
 
 export interface CommandPaletteItem {
   href: string;
@@ -29,10 +29,23 @@ export interface CommandPaletteItem {
   keywords?: string[];
 }
 
+export interface CommandPaletteSectionItem {
+  id: string;
+  /** ไปหน้า (router.push / `onNavigate`) — ไม่ส่งถ้าเป็น action ล้วน */
+  href?: string;
+  /** action ฝั่ง client (สร้างงาน, สลับ sidebar …) — เรียกหลังปิดกล่อง; ถ้ามีทั้งคู่ เรียก onSelect ก่อนแล้วไป href */
+  onSelect?: () => void;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  /** ป้ายคีย์ลัดท้ายรายการ (แสดงอย่างเดียว เช่น "G H") */
+  shortcut?: string;
+}
+
 export interface CommandPaletteSection {
   key: string;
   heading: string;
-  items: Array<{ id: string; href: string; label: string; description?: string; icon?: ReactNode }>;
+  items: CommandPaletteSectionItem[];
 }
 
 export interface CommandPaletteText {
@@ -65,7 +78,9 @@ function useModKeyLabel(mounted: boolean): string {
 
 /**
  * ค้นหาแบบ ⌘K / Ctrl+K ทั้งแอป: หน้าในเมนู (แอปกรองสิทธิ์มาแล้ว) กรองฝั่ง client + ส่วนจาก server action
- * (`search`) เมื่อพิมพ์ ≥ `minQuery` ตัว (debounce; ผลของ query ล่าสุดเท่านั้นที่แสดง)
+ * (`search`) เมื่อพิมพ์ ≥ `minQuery` ตัว (debounce; ผลของ query ล่าสุดเท่านั้นที่แสดง) + ส่วนที่แอปคำนวณเองฝั่ง client
+ * (`filter(query)` — ข้อมูลใน memory/offline-first, รายการ action ที่มี `onSelect`) แสดงก่อนผลจาก server
+ * เปิด/ปิดคุมจากภายนอกได้ (`open`/`onOpenChange`) และซ่อนปุ่มเรียกของแพ็กเกจ (`showTrigger={false}`) เมื่อแอปมีปุ่ม/คีย์ลัดเอง
  * ปุ่มเรียก: `compact` = ไอคอนใน header, ค่าเริ่มต้น = ปุ่มเต็มกว้าง + Kbd ใน `sidebarHeader` ของ AppShell
  * ข้อความรับเป็น prop `text` (ค่าเริ่มต้นจาก `UiText.palette` หรือไทย) — ไม่พึ่ง i18n ของแอป
  * ยกจาก Pi Auth (features/console/command-palette) ให้ Pi Done/DueBell ใช้ร่วม
@@ -73,7 +88,11 @@ function useModKeyLabel(mounted: boolean): string {
 export function CommandPalette({
   pages,
   search,
+  filter,
   compact = false,
+  showTrigger = true,
+  open: controlledOpen,
+  onOpenChange,
   shortcut = "k",
   minQuery = 2,
   debounceMs = 150,
@@ -84,9 +103,19 @@ export function CommandPalette({
   pages: CommandPaletteItem[];
   /** server action ของแอป — คืน section ตามลำดับที่ต้องการแสดง */
   search?: (query: string) => Promise<CommandPaletteSection[]>;
+  /**
+   * section ที่แอปคำนวณเองฝั่ง client ทุกครั้งที่ query เปลี่ยน (query ว่างก็เรียก — ใช้แสดงรายการ action/ล่าสุด);
+   * ไม่ debounce เพราะไม่มี IO — ให้ memo ฝั่งแอปถ้าชุดข้อมูลใหญ่
+   */
+  filter?: (query: string) => CommandPaletteSection[];
   compact?: boolean;
-  /** ตัวอักษรคีย์ลัดร่วมกับ ⌘/Ctrl (ค่าเริ่มต้น "k") */
-  shortcut?: string;
+  /** ซ่อนปุ่มเรียกของแพ็กเกจ (แอปเปิดเองผ่าน `open` หรือคีย์ลัด) */
+  showTrigger?: boolean;
+  /** คุมการเปิดจากภายนอก (ใช้คู่ `onOpenChange`) — ไม่ส่ง = คุมเองในตัว */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** ตัวอักษรคีย์ลัดร่วมกับ ⌘/Ctrl (ค่าเริ่มต้น "k"); `null` = ไม่ดักคีย์ลัด (แอปดักเอง) */
+  shortcut?: string | null;
   minQuery?: number;
   debounceMs?: number;
   text?: Partial<CommandPaletteText>;
@@ -99,7 +128,12 @@ export function CommandPalette({
   const router = useRouter();
   const mounted = useMounted();
   const mod = useModKeyLabel(mounted);
-  const [open, setOpen] = useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = (next: boolean) => {
+    if (controlledOpen === undefined) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
   const [query, setQuery] = useState("");
   const [result, setResult] = useState<{ query: string; sections: CommandPaletteSection[] } | null>(
     null,
@@ -107,12 +141,17 @@ export function CommandPalette({
   const [pending, start] = useTransition();
 
   // คีย์ลัดจากที่ไหนก็ได้ในแอป
+  const openRef = useRef(open);
+  openRef.current = open;
+  const setOpenRef = useRef(setOpen);
+  setOpenRef.current = setOpen;
   useEffect(() => {
+    if (!shortcut) return;
     const key = shortcut.toLowerCase();
     const onKey = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === key) {
         e.preventDefault();
-        setOpen((o) => !o);
+        setOpenRef.current(!openRef.current);
       }
     };
     window.addEventListener("keydown", onKey);
@@ -138,7 +177,9 @@ export function CommandPalette({
     return () => clearTimeout(handle);
   }, [q, search, shouldSearch, debounceMs]);
 
-  const sections = shouldSearch && result?.query === q ? result.sections : [];
+  const localSections = filter ? filter(q) : [];
+  const remoteSections = shouldSearch && result?.query === q ? result.sections : [];
+  const sections = [...localSections, ...remoteSections];
   const ql = q.toLowerCase();
   const visiblePages = ql
     ? pages.filter((p) =>
@@ -158,18 +199,26 @@ export function CommandPalette({
     if (onNavigate) onNavigate(href);
     else router.push(href);
   }
+  function pick(item: CommandPaletteSectionItem) {
+    close();
+    item.onSelect?.();
+    if (item.href) {
+      if (onNavigate) onNavigate(item.href);
+      else router.push(item.href);
+    }
+  }
 
-  const shortcutLabel = `${mod}${shortcut.toUpperCase()}`;
+  const shortcutLabel = `${mod}${(shortcut ?? "k").toUpperCase()}`;
 
   return (
     <>
-      {compact ? (
+      {!showTrigger ? null : compact ? (
         <Button
           type="button"
           variant="ghost"
           size="icon"
           aria-label={text.placeholder}
-          title={`${text.placeholder} (${shortcutLabel})`}
+          title={shortcut ? `${text.placeholder} (${shortcutLabel})` : text.placeholder}
           className={cn("text-muted-foreground", className)}
           onClick={() => setOpen(true)}
         >
@@ -188,7 +237,7 @@ export function CommandPalette({
         >
           <Search />
           <span className="flex-1 truncate text-left">{text.placeholder}</span>
-          <Kbd className="hidden sm:inline-flex">{shortcutLabel}</Kbd>
+          {shortcut && <Kbd className="hidden sm:inline-flex">{shortcutLabel}</Kbd>}
         </Button>
       )}
       <CommandDialog
@@ -229,7 +278,7 @@ export function CommandPalette({
                       <CommandItem
                         key={it.id}
                         value={`${s.key}:${it.id}`}
-                        onSelect={() => go(it.href)}
+                        onSelect={() => pick(it)}
                       >
                         <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">
                           {it.icon}
@@ -240,6 +289,7 @@ export function CommandPalette({
                             <span className="text-muted-foreground"> · {it.description}</span>
                           )}
                         </span>
+                        {it.shortcut && <CommandShortcut>{it.shortcut}</CommandShortcut>}
                       </CommandItem>
                     ))}
                   </CommandGroup>

package/src/components/app-shell/index.ts

@@ -5,6 +5,7 @@ export {
   CommandPalette,
   type CommandPaletteItem,
   type CommandPaletteSection,
+  type CommandPaletteSectionItem,
   type CommandPaletteText,
 } from "./command-palette";
 export { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";

package/src/components/shared/action-form.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@suphark/ui/components/ui/button";
 import { Card, CardContent } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
-import { type ReactNode, startTransition, useActionState } from "react";
+import { type ComponentProps, type ReactNode, startTransition, useActionState } from "react";
 import {
   type FormAction,
   FormMessage,
@@ -24,8 +24,9 @@ import { useUiText } from "./ui-text";
  *   </ActionForm>
  *   // error รายช่อง: action คืน { ok: false, error: "…", errors: { email: "รูปแบบไม่ถูกต้อง" } }
  *   <ActionForm action={save}>{({ fieldError }) => <LabeledField label="อีเมล" error={fieldError("email")}>…</LabeledField>}</ActionForm>
+ *   // payload เมื่อสำเร็จ: action คืน { ok: true, data: { key } } → <ActionForm<{ key: string }> onSuccess={(s) => setKey(s.data?.key)}>
  */
-export function ActionForm({
+export function ActionForm<TData = undefined>({
   action,
   title,
   submitLabel,
@@ -33,8 +34,11 @@ export function ActionForm({
   compact = false,
   className,
   onSuccess,
+  hideSuccessMessage = false,
+  submitDisabled = false,
+  submitProps,
 }: {
-  action: FormAction;
+  action: FormAction<TData>;
   title?: ReactNode;
   submitLabel?: ReactNode;
   /** เนื้อฟอร์ม — เป็นฟังก์ชันได้เพื่อรับ `{ state, pending, errors, fieldError }` (error รายช่องจาก `FormState.errors`) */
@@ -42,15 +46,24 @@ export function ActionForm({
   /** ฟอร์มเล็กในแถวตาราง — ไม่มีกรอบ Card, ปุ่ม size sm, จัดแนวนอน wrap */
   compact?: boolean;
   className?: string;
-  /** เรียกเมื่อ action คืน `ok: true` (เช่น router.refresh, toast) */
-  onSuccess?: (state: Extract<FormState, { ok: true }>) => void;
+  /** เรียกเมื่อ action คืน `ok: true` (เช่น router.refresh, toast) — `state.data` คือ payload ของ `FormState<TData>` */
+  onSuccess?: (state: Extract<FormState<TData>, { ok: true }>) => void;
+  /** ไม่แสดงข้อความสำเร็จใต้ฟอร์ม (แอปแจ้งผลด้วย toast/Notice เอง — ใน compact ข้อความจะดันปุ่มตกบรรทัด) ยังแสดง error */
+  hideSuccessMessage?: boolean;
+  /** ปิดปุ่มส่งตามเงื่อนไขของแอป (เช่น ยังไม่มีรายการให้เลือก) — รวมกับ pending */
+  submitDisabled?: boolean;
+  /** props เพิ่มของปุ่มส่ง (variant, size, className, …) */
+  submitProps?: Omit<ComponentProps<typeof Button>, "type" | "disabled" | "children">;
 }) {
   const text = useUiText();
-  const [state, formAction, pending] = useActionState<FormState, FormData>(async (prev, fd) => {
-    const next = await action(prev, fd);
-    if (next?.ok) onSuccess?.(next);
-    return next;
-  }, null);
+  const [state, formAction, pending] = useActionState<FormState<TData>, FormData>(
+    async (prev, fd) => {
+      const next = await action(prev, fd);
+      if (next?.ok) onSuccess?.(next);
+      return next;
+    },
+    null,
+  );
 
   const form = (
     <form
@@ -66,12 +79,15 @@ export function ActionForm({
     >
       {title && !compact && <h2 className="font-semibold text-sm">{title}</h2>}
       {typeof children === "function" ? children(formRenderContext(state, pending)) : children}
-      <FormMessage state={state} className={compact ? "basis-full" : undefined} />
+      {!(hideSuccessMessage && state?.ok) && (
+        <FormMessage state={state} className={compact ? "basis-full" : undefined} />
+      )}
       <Button
-        type="submit"
         size={compact ? "sm" : "default"}
-        disabled={pending}
         className={compact ? undefined : "self-start"}
+        {...submitProps}
+        type="submit"
+        disabled={pending || submitDisabled}
       >
         {submitLabel ?? text.save}
       </Button>

package/src/components/shared/color-picker.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { Check } from "lucide-react";
+import {
+  type ComponentProps,
+  type CSSProperties,
+  type KeyboardEvent,
+  useRef,
+  useState,
+} from "react";
+
+export interface ColorPickerItem<T extends string = string> {
+  value: T;
+  label: string;
+  /** class สีพื้น เช่น `bg-amber-500` (แอปเป็นคนเลือก palette — แพ็กเกจไม่ bundle) */
+  swatchClassName?: string;
+  /** สี CSS ตรง ๆ (hex/oklch) เมื่อไม่ใช้ class เช่นสีที่ผู้ใช้กำหนดเอง */
+  swatch?: string;
+}
+
+export interface ColorPickerText {
+  /** ป้ายกลุ่ม (aria-label ของกริด) */
+  label: string;
+  /** ต่อท้าย aria-label ของช่องที่เลือกอยู่ */
+  selected: string;
+  ariaLabel: (label: string) => string;
+}
+
+const TEXT: Record<"th" | "en", ColorPickerText> = {
+  th: { label: "เลือกสี", selected: "เลือกอยู่", ariaLabel: (l) => `สี ${l}` },
+  en: { label: "Choose color", selected: "selected", ariaLabel: (l) => `${l} color` },
+};
+
+export interface ColorPickerProps<T extends string = string> {
+  value: T | null | undefined;
+  onChange: (value: T) => void;
+  colors: ReadonlyArray<ColorPickerItem<T>>;
+  /** คอลัมน์ของกริด (ค่าเริ่มต้น grid-cols-5) */
+  columnsClassName?: string;
+  /** sm = ช่อง size-7, md = size-8 (ค่าเริ่มต้น) */
+  size?: "sm" | "md";
+  language?: "th" | "en";
+  text?: Partial<ColorPickerText>;
+  className?: string;
+}
+
+function swatchStyle(item: { swatch?: string }): CSSProperties | undefined {
+  return item.swatch ? { backgroundColor: item.swatch } : undefined;
+}
+
+/**
+ * จุดสีเล็กสำหรับ trigger/badge/รายการ — ใช้ `color` (CSS) หรือ class สี (`className="bg-amber-500"`)
+ *   <ColorSwatch color="#f59e0b" /> · <ColorSwatch className="bg-amber-500" />
+ */
+export function ColorSwatch({
+  color,
+  className,
+  style,
+  ...props
+}: ComponentProps<"span"> & { color?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-block size-3.5 shrink-0 rounded-full border border-black/10",
+        className,
+      )}
+      style={color ? { backgroundColor: color, ...style } : style}
+      {...props}
+    />
+  );
+}
+
+/**
+ * กริดเลือกสีจากชุดที่แอปส่ง (แทน metadata-color-picker ของ Pi Done) — ปุ่มสี่เหลี่ยม `aria-pressed`,
+ * ที่เลือก = ring + ✓, คีย์บอร์ดเลื่อนในกริดด้วยลูกศร (roving tabindex; คอลัมน์อ่านจาก grid จริง)
+ * ไม่มี trigger/popover ในตัว — แอปครอบ Popover เองแบบเดียวกับ IconPicker
+ */
+export function ColorPicker<T extends string = string>({
+  value,
+  onChange,
+  colors,
+  columnsClassName = "grid-cols-5",
+  size = "md",
+  language = "th",
+  text: textProp,
+  className,
+}: ColorPickerProps<T>) {
+  const text: ColorPickerText = { ...TEXT[language], ...textProp };
+  const gridRef = useRef<HTMLDivElement>(null);
+  // ช่องที่รับ Tab: ค่าที่เลือก ไม่มีก็ช่องแรก; เปลี่ยนตามลูกศรโดยไม่ต้องเปลี่ยน value
+  const [focusIndex, setFocusIndex] = useState<number | null>(null);
+  const selectedIndex = colors.findIndex((c) => c.value === value);
+  const tabIndexAt = focusIndex ?? (selectedIndex >= 0 ? selectedIndex : 0);
+
+  function columnCount(): number {
+    const el = gridRef.current;
+    if (!el) return 1;
+    const cols = getComputedStyle(el).gridTemplateColumns.split(" ").filter(Boolean).length;
+    return cols > 0 ? cols : 1;
+  }
+
+  function moveFocus(e: KeyboardEvent<HTMLButtonElement>, from: number) {
+    const cols = columnCount();
+    const last = colors.length - 1;
+    let next: number | null = null;
+    switch (e.key) {
+      case "ArrowRight":
+        next = Math.min(from + 1, last);
+        break;
+      case "ArrowLeft":
+        next = Math.max(from - 1, 0);
+        break;
+      case "ArrowDown":
+        next = Math.min(from + cols, last);
+        break;
+      case "ArrowUp":
+        next = Math.max(from - cols, 0);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = last;
+        break;
+    }
+    if (next === null) return;
+    e.preventDefault();
+    setFocusIndex(next);
+    const buttons = gridRef.current?.querySelectorAll<HTMLButtonElement>("button");
+    buttons?.[next]?.focus();
+  }
+
+  return (
+    <div
+      ref={gridRef}
+      role="group"
+      aria-label={text.label}
+      className={cn("grid w-fit gap-1.5", columnsClassName, className)}
+    >
+      {colors.map((item, index) => {
+        const isSelected = item.value === value;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            tabIndex={index === tabIndexAt ? 0 : -1}
+            aria-pressed={isSelected}
+            aria-label={
+              isSelected
+                ? `${text.ariaLabel(item.label)} (${text.selected})`
+                : text.ariaLabel(item.label)
+            }
+            title={item.label}
+            onClick={() => onChange(item.value)}
+            onKeyDown={(e) => moveFocus(e, index)}
+            onFocus={() => setFocusIndex(index)}
+            className={cn(
+              "relative flex items-center justify-center rounded-md border border-black/10 outline-none transition-[transform,box-shadow] hover:scale-105",
+              "focus-visible:ring-2 focus-visible:ring-ring/50",
+              "aria-pressed:ring-2 aria-pressed:ring-primary aria-pressed:ring-offset-1 aria-pressed:ring-offset-background",
+              size === "sm" ? "size-7" : "size-8",
+              item.swatchClassName,
+            )}
+            style={swatchStyle(item)}
+          >
+            {isSelected && (
+              <Check
+                className="size-4 text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.6)]"
+                strokeWidth={3}
+                aria-hidden="true"
+              />
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}