@suphark/ui 0.6.0 → 0.7.0

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

@@ -182,16 +182,16 @@ function UniqueCheckInput<T extends FieldValues>({
 
   return (
     <div>
-      <InputGroup className={cn(isDuplicate ? "border-red-500 ring-red-500" : "")}>
+      <InputGroup className={cn(isDuplicate ? "border-destructive ring-destructive" : "")}>
         <InputGroupInput
           {...field}
           {...props}
           value={value || ""}
-          className={cn(isDuplicate ? "text-red-600" : "")}
+          className={cn(isDuplicate ? "text-destructive" : "")}
         />
         {isDuplicate && (
           <InputGroupAddon>
-            <CircleAlert className="h-4 w-4 text-red-500" />
+            <CircleAlert className="h-4 w-4 text-destructive" />
           </InputGroupAddon>
         )}
         {enableCopy && (
@@ -200,12 +200,12 @@ function UniqueCheckInput<T extends FieldValues>({
             type="button"
             title="Copy to clipboard"
           >
-            {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+            {isCopied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
           </InputGroupButton>
         )}
       </InputGroup>
       {isDuplicate && (
-        <p className="mt-1 font-medium text-[0.8rem] text-red-500">{uniqueErrorMessage}</p>
+        <p className="mt-1 font-medium text-[0.8rem] text-destructive">{uniqueErrorMessage}</p>
       )}
     </div>
   );
@@ -224,7 +224,7 @@ function CopyableInput(props: ComponentProps<typeof InputGroupInput>) {
         type="button"
         title="Copy to clipboard"
       >
-        {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+        {isCopied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
       </InputGroupButton>
     </InputGroup>
   );

package/src/components/shared/form/form-field-radio-cards.tsx

@@ -33,6 +33,8 @@ interface FormFieldRadioCardsProps<T extends FieldValues = any> {
    * `row` = การ์ดแนวนอน: ปุ่มวิทยุจริงซ้าย, ไอคอน+ชื่อบรรทัดบน, คำอธิบายบรรทัดล่าง (แบบ Pi Auth เลือกประเภทแอป)
    */
   layout?: "grid" | "row";
+  /** ชื่อกลุ่มสำหรับ screen reader เมื่อไม่แสดง `label` (ส่งต่อไป RadioGroup) */
+  "aria-label"?: string;
 }
 
 export function FormFieldRadioCards<T extends FieldValues = any>({
@@ -47,6 +49,7 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
   className,
   size = "md",
   layout = "grid",
+  "aria-label": ariaLabel,
 }: FormFieldRadioCardsProps<T>) {
   const baseId = useId();
 
@@ -59,6 +62,7 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
       {label && <Label className="block font-semibold text-base">{label}</Label>}
       <RadioGroup
         name={groupName}
+        aria-label={label ? undefined : ariaLabel}
         onValueChange={(val) => {
           if (val !== null) onChange(String(val));
         }}

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

@@ -19,6 +19,7 @@ export function LabeledField({
   error,
   children,
   className,
+  htmlFor,
 }: {
   label: ReactNode;
   /** ข้อความช่วยใต้ช่อง — ซ่อนเมื่อมี error */
@@ -26,7 +27,27 @@ export function LabeledField({
   error?: ReactNode;
   children: ReactNode;
   className?: string;
+  /**
+   * id ของ control — ส่งมาแล้ว label จะไม่ครอบ control (ใช้ `htmlFor` แทน) เพื่อให้ accessible name ชัดใน tooling
+   * ที่ไม่คำนวณ label แบบ nested; ไม่ส่ง = label ครอบ control (ถูกต้องตาม HTML คลิก label แล้ว focus ได้)
+   */
+  htmlFor?: string;
 }) {
+  if (htmlFor) {
+    return (
+      <Field className={cn("gap-1.5", className)} data-invalid={error ? true : undefined}>
+        <FieldLabel htmlFor={htmlFor} className="font-medium text-sm">
+          {label}
+        </FieldLabel>
+        {children}
+        {error ? (
+          <FieldError className="text-xs">{error}</FieldError>
+        ) : (
+          hint && <FieldDescription className="text-xs">{hint}</FieldDescription>
+        )}
+      </Field>
+    );
+  }
   return (
     <Field className={cn("gap-1.5", className)} data-invalid={error ? true : undefined}>
       <FieldLabel className="w-full flex-col items-stretch gap-1.5 font-normal [&_[data-slot=native-select-wrapper]]:w-full">

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

@@ -20,7 +20,13 @@ import {
   useEffect,
   useState,
 } from "react";
-import { type FormAction, FormMessage, type FormState } from "./form-message";
+import {
+  type FormAction,
+  FormMessage,
+  type FormRenderContext,
+  type FormState,
+  formRenderContext,
+} from "./form-message";
 import { useUiText } from "./ui-text";
 
 /**
@@ -45,7 +51,8 @@ export function FormDialog({
   description?: ReactNode;
   action: FormAction;
   submitLabel?: string;
-  children: ReactNode;
+  /** เนื้อฟอร์ม — เป็นฟังก์ชันได้เพื่อรับ `{ state, pending, errors, fieldError }` */
+  children: ReactNode | ((ctx: FormRenderContext) => ReactNode);
   /** ควบคุมจากภายนอก (เช่นเปิดจาก RowActions) */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -95,7 +102,9 @@ export function FormDialog({
             {description && <DialogDescription>{description}</DialogDescription>}
           </DialogHeader>
           <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-1">
-            {children}
+            {typeof children === "function"
+              ? children(formRenderContext(state, pending))
+              : children}
           </div>
           <FormMessage state={state} />
           <DialogFooter>

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

@@ -3,7 +3,31 @@
 import { cn } from "@suphark/ui/lib/utils";
 import { useUiText } from "./ui-text";
 
-export type FormState = { ok: true; message?: string } | { ok: false; error: string } | null;
+export type FormState =
+  | { ok: true; message?: string }
+  | {
+      ok: false;
+      /** ข้อความรวม (แสดงใน FormMessage) */
+      error: string;
+      /** error รายช่อง (key = ชื่อ input) — ส่งให้ LabeledField ผ่าน render-prop ของ ActionForm/FormDialog */
+      errors?: Record<string, string | undefined>;
+    }
+  | null;
+
+/** ค่าที่ ActionForm/FormDialog ส่งให้ children แบบฟังก์ชัน */
+export interface FormRenderContext {
+  state: FormState;
+  pending: boolean;
+  /** error รายช่องจาก state ล่าสุด (ว่างเมื่อสำเร็จ/ยังไม่ส่ง) */
+  errors: Record<string, string | undefined>;
+  /** helper: `error={fieldError("email")}` */
+  fieldError: (name: string) => string | undefined;
+}
+
+export function formRenderContext(state: FormState, pending: boolean): FormRenderContext {
+  const errors = state && !state.ok ? (state.errors ?? {}) : {};
+  return { state, pending, errors, fieldError: (name) => errors[name] };
+}
 
 /** server action สำหรับ FormDialog/ActionForm: (state ก่อนหน้า, FormData) → FormState */
 export type FormAction = (prev: FormState, formData: FormData) => Promise<FormState>;
@@ -21,11 +45,7 @@ export function FormMessage({
   return (
     <p
       role={state.ok ? "status" : "alert"}
-      className={cn(
-        "text-xs",
-        state.ok ? "text-emerald-700 dark:text-emerald-300" : "text-destructive",
-        className,
-      )}
+      className={cn("text-xs", state.ok ? "text-success" : "text-destructive", className)}
     >
       {state.ok ? (state.message ?? text.success) : state.error}
     </p>

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

@@ -0,0 +1,192 @@
+"use client";
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { cn } from "@suphark/ui/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import { Search, X } from "lucide-react";
+import { type CSSProperties, useDeferredValue, useId, useMemo, useState } from "react";
+import { SelectionButton } from "./selection-button";
+
+export interface IconPickerItem<T extends string = string> {
+  name: T;
+  icon: LucideIcon;
+  labelTh: string;
+  labelEn: string;
+  keywords?: readonly string[];
+}
+
+export interface IconPickerText {
+  searchPlaceholder: string;
+  searchLabel: string;
+  clear: string;
+  preview: string;
+  /** รับชื่อคำค้น */
+  empty: (query: string) => string;
+  showAll: string;
+}
+
+const TEXT: Record<"th" | "en", IconPickerText> = {
+  th: {
+    searchPlaceholder: "ค้นหาไอคอน (เช่น บ้าน, house, รถ)…",
+    searchLabel: "ค้นหาไอคอน",
+    clear: "ล้างการค้นหา",
+    preview: "ตัวอย่างไอคอนและสี",
+    empty: (q) => `ไม่พบไอคอนที่ตรงกับ “${q}”`,
+    showAll: "แสดงไอคอนทั้งหมด",
+  },
+  en: {
+    searchPlaceholder: "Search icons (e.g. house, car, coffee)…",
+    searchLabel: "Search icons",
+    clear: "Clear search",
+    preview: "Icon & color preview",
+    empty: (q) => `No icons found for “${q}”`,
+    showAll: "Show all icons",
+  },
+};
+
+export interface IconPickerProps<T extends string = string> {
+  value: T | null | undefined;
+  onChange: (name: T) => void;
+  /** ชุดไอคอนของแอป (แพ็กเกจไม่ bundle ชุดใด — ไม่ดึง lucide ทั้งก้อน) */
+  icons: ReadonlyArray<IconPickerItem<T>>;
+  /** ภาษาของ label/ข้อความ (ค่าเริ่มต้น th) */
+  language?: "th" | "en";
+  /** ทับข้อความบางส่วน */
+  text?: Partial<IconPickerText>;
+  /** สีของประเภทรายการ (dynamic จากผู้ใช้) — ไอคอนที่เลือกและ preview ใช้ inline style จากสีนี้ */
+  accentColor?: string;
+  /** ความสูงของกริด (ค่าเริ่มต้น h-36) */
+  heightClassName?: string;
+  /** คอลัมน์ของกริด (ค่าเริ่มต้น grid-cols-6 sm:grid-cols-8) */
+  columnsClassName?: string;
+  className?: string;
+}
+
+/**
+ * เลือกไอคอนจากชุดที่แอปส่งมา: ค้นหา (labelTh/labelEn/keywords/name, ผ่าน useDeferredValue) + กริด SelectionButton
+ * + preview ไอคอนที่เลือกพร้อมสี — ยกจาก DueBell ให้ Pi Done (metadata icon) ใช้ร่วม
+ */
+export function IconPicker<T extends string = string>({
+  value,
+  onChange,
+  icons,
+  language = "th",
+  text: textProp,
+  accentColor,
+  heightClassName = "h-36",
+  columnsClassName = "grid-cols-6 sm:grid-cols-8",
+  className,
+}: IconPickerProps<T>) {
+  const text: IconPickerText = { ...TEXT[language], ...textProp };
+  const [query, setQuery] = useState("");
+  const deferred = useDeferredValue(query);
+  const listId = useId();
+  const selected = icons.find((i) => i.name === value);
+  const labelOf = (i: IconPickerItem<T>) => (language === "en" ? i.labelEn : i.labelTh);
+
+  const filtered = useMemo(() => {
+    const q = deferred.trim().toLowerCase();
+    if (!q) return icons;
+    return icons.filter(
+      (i) =>
+        i.name.toLowerCase().includes(q) ||
+        i.labelTh.toLowerCase().includes(q) ||
+        i.labelEn.toLowerCase().includes(q) ||
+        (i.keywords ?? []).some((k) => k.toLowerCase().includes(q)),
+    );
+  }, [icons, deferred]);
+
+  const accentStyle: CSSProperties | undefined = accentColor
+    ? { backgroundColor: `${accentColor}18`, borderColor: `${accentColor}99`, color: accentColor }
+    : undefined;
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {selected && (
+        <div className="flex items-center gap-3 rounded-xl border p-2.5">
+          <span
+            className="grid size-10 shrink-0 place-items-center rounded-xl border bg-primary/10 text-primary"
+            style={accentStyle}
+          >
+            <selected.icon className="size-5" aria-hidden="true" />
+          </span>
+          <div className="min-w-0">
+            <p className="font-semibold text-[0.625rem] text-muted-foreground/70 uppercase tracking-wider">
+              {text.preview}
+            </p>
+            <p className="truncate font-bold text-foreground text-xs">{labelOf(selected)}</p>
+          </div>
+        </div>
+      )}
+
+      <InputGroup className="h-9">
+        <InputGroupAddon>
+          <Search aria-hidden="true" />
+        </InputGroupAddon>
+        <InputGroupInput
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={text.searchPlaceholder}
+          aria-label={text.searchLabel}
+          aria-controls={listId}
+          autoComplete="off"
+          spellCheck={false}
+        />
+        {query && (
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton onClick={() => setQuery("")} aria-label={text.clear}>
+              <X aria-hidden="true" />
+            </InputGroupButton>
+          </InputGroupAddon>
+        )}
+      </InputGroup>
+
+      <div
+        id={listId}
+        role="group"
+        aria-label={text.searchLabel}
+        className={cn(
+          "grid content-start gap-2 overflow-y-auto rounded-xl border bg-muted/40 p-2",
+          heightClassName,
+          columnsClassName,
+        )}
+      >
+        {filtered.length > 0 ? (
+          filtered.map((item) => {
+            const isSelected = value === item.name;
+            const title = `${labelOf(item)} (${item.name})`;
+            return (
+              <SelectionButton
+                key={item.name}
+                selected={isSelected}
+                onClick={() => onChange(item.name)}
+                className="aspect-square h-auto w-full p-0"
+                aria-label={title}
+                title={title}
+                style={isSelected ? accentStyle : undefined}
+              >
+                <item.icon className="size-4" aria-hidden="true" />
+              </SelectionButton>
+            );
+          })
+        ) : (
+          <div className="col-span-full flex min-h-24 flex-col items-center justify-center gap-1.5 py-4 text-center text-muted-foreground">
+            <p className="text-xs">{text.empty(deferred.trim())}</p>
+            <button
+              type="button"
+              onClick={() => setQuery("")}
+              className="text-primary text-xs underline-offset-4 hover:underline"
+            >
+              {text.showAll}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/shared/notice.tsx

@@ -1,3 +1,4 @@
+/* ui-audit-ok-file: โทน info/success/warning/danger ใช้ palette 50/900 คู่ dark โดยตั้งใจ — รอตัดสินใจ token ระดับ tone (todo) */
 import { Alert, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps, ReactNode } from "react";

package/src/components/shared/progress-bar.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import {
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressValue,
+} from "@suphark/ui/components/ui/progress";
+import { cn } from "@suphark/ui/lib/utils";
+import type { CSSProperties, ReactNode } from "react";
+
+export type ProgressTone = "default" | "success" | "warning" | "destructive";
+
+const TONE: Record<ProgressTone, string> = {
+  default: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+};
+
+/**
+ * แถบความคืบหน้าที่ตั้งสี/ความสูง/ป้ายได้จาก props — ใช้แทนการประกอบ `Progress` ของ shadcn เอง
+ * (`Progress` ต่อท้าย Track+Indicator ให้เสมอ ส่ง children เข้าไปจะได้ 2 แถบ) — ยกจาก DueBell
+ */
+export function ProgressBar({
+  value,
+  max = 100,
+  label,
+  showValue = false,
+  format,
+  tone = "default",
+  size = "sm",
+  trackClassName,
+  indicatorClassName,
+  indicatorStyle,
+  className,
+  ...props
+}: Omit<ProgressPrimitive.Root.Props, "value" | "max" | "children" | "format"> & {
+  value: number | null;
+  max?: number;
+  label?: ReactNode;
+  /** แสดงตัวเลข (ค่าเริ่มต้น "N%") */
+  showValue?: boolean;
+  /** ปรับข้อความตัวเลข เช่น (v) => `${v} / ${max}` */
+  format?: (value: number | null, max: number) => ReactNode;
+  tone?: ProgressTone;
+  /** sm = h-1 (ค่าเริ่มต้น), md = h-2, lg = h-3 */
+  size?: "sm" | "md" | "lg";
+  trackClassName?: string;
+  /** ใส่ class สีเอง (เช่นสี dynamic ของผู้ใช้ผ่าน indicatorStyle) */
+  indicatorClassName?: string;
+  indicatorStyle?: CSSProperties;
+}) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      max={max}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-2", className)}
+      {...props}
+    >
+      {(label || showValue) && (
+        <div className="flex w-full items-center gap-2">
+          {label && <ProgressLabel>{label}</ProgressLabel>}
+          {showValue &&
+            (format ? (
+              <span className="ml-auto text-muted-foreground text-sm tabular-nums">
+                {format(value, max)}
+              </span>
+            ) : (
+              <ProgressValue />
+            ))}
+        </div>
+      )}
+      <ProgressTrack
+        className={cn(size === "md" ? "h-2" : size === "lg" ? "h-3" : "h-1", trackClassName)}
+      >
+        <ProgressIndicator className={cn(TONE[tone], indicatorClassName)} style={indicatorStyle} />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  );
+}

package/src/components/shared/selection-button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps } from "react";
+
+/**
+ * ปุ่มตัวเลือกแบบกดเลือก/ไม่เลือก (toggle) — `aria-pressed` + สีเน้นเมื่อเลือก
+ * ใช้เป็นช่องในตาราง IconPicker, ตัวเลือกสี/ประเภท, chip filter (ยกจาก DueBell)
+ */
+export function SelectionButton({
+  selected,
+  className,
+  type = "button",
+  ...props
+}: Omit<ComponentProps<typeof Button>, "aria-pressed" | "variant"> & { selected: boolean }) {
+  return (
+    <Button
+      {...props}
+      type={type}
+      variant="outline"
+      aria-pressed={selected}
+      className={cn(
+        "transition-colors aria-pressed:border-primary aria-pressed:bg-primary/10 aria-pressed:text-primary",
+        className,
+      )}
+    />
+  );
+}

package/src/components/shared/status-badge.tsx

@@ -1,3 +1,4 @@
+/* ui-audit-ok-file: โทน badge ใช้ palette 50/800 คู่ dark โดยตั้งใจ — รอตัดสินใจ token ระดับ tone (todo) */
 import { Badge } from "@suphark/ui/components/ui/badge";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps } from "react";

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

@@ -9,32 +9,49 @@ import {
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import type { ReactNode } from "react";
+import { useUiText } from "../ui-text";
 import type { Theme } from "./theme-provider";
 
-const OPTIONS: Array<{ value: Theme; label: string; icon: ReactNode }> = [
-  { value: "light", label: "สว่าง", icon: <SunIcon /> },
-  { value: "dark", label: "มืด", icon: <MoonIcon /> },
-  { value: "system", label: "ตามระบบ", icon: <MonitorIcon /> },
-];
+const ICONS: Record<Theme, ReactNode> = {
+  light: <SunIcon />,
+  dark: <MoonIcon />,
+  system: <MonitorIcon />,
+};
+const ORDER: Theme[] = ["light", "dark", "system"];
 
-/** กลุ่มตัวเลือกธีมสำหรับใส่ใน DropdownMenu (เช่นเมนูผู้ใช้) — ยกจาก Pi Auth มาบน next-themes */
+/**
+ * กลุ่มตัวเลือกธีมสำหรับใส่ใน DropdownMenu (เช่นเมนูผู้ใช้) — ยกจาก Pi Auth มาบน next-themes
+ * ข้อความค่าเริ่มต้นจาก `UiText.theme`; `onThemeChange` ให้แอปบันทึกธีมเป็น preference ของบัญชี (ซิงก์ข้ามเครื่อง)
+ */
 export function ThemeMenuItems({
-  label = "ธีม",
+  label,
   labels,
+  onThemeChange,
 }: {
   label?: ReactNode;
-  /** ข้อความแต่ละตัวเลือก (ค่าเริ่มต้นภาษาไทย) */
+  /** ข้อความแต่ละตัวเลือก (ค่าเริ่มต้นจาก UiText.theme / ไทย) */
   labels?: Partial<Record<Theme, ReactNode>>;
+  /** เรียกหลัง setTheme — เช่น server action บันทึก preference */
+  onThemeChange?: (theme: Theme) => void | Promise<void>;
 }) {
   const { theme = "system", setTheme } = useTheme();
+  const text = useUiText().theme;
   return (
     <DropdownMenuGroup>
-      <DropdownMenuLabel className="text-muted-foreground">{label}</DropdownMenuLabel>
-      <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v as Theme)}>
-        {OPTIONS.map((o) => (
-          <DropdownMenuRadioItem key={o.value} value={o.value}>
-            {o.icon}
-            {labels?.[o.value] ?? o.label}
+      <DropdownMenuLabel className="text-muted-foreground">
+        {label ?? text?.label ?? "ธีม"}
+      </DropdownMenuLabel>
+      <DropdownMenuRadioGroup
+        value={theme}
+        onValueChange={(v) => {
+          setTheme(v as Theme);
+          void onThemeChange?.(v as Theme);
+        }}
+      >
+        {ORDER.map((value) => (
+          <DropdownMenuRadioItem key={value} value={value}>
+            {ICONS[value]}
+            {labels?.[value] ?? text?.[value] ?? value}
           </DropdownMenuRadioItem>
         ))}
       </DropdownMenuRadioGroup>

package/src/components/shared/theme/theme-toggle.tsx

@@ -56,21 +56,21 @@ export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps)
           onClick={() => handleThemeChange("light")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Sun className="h-4 w-4 text-amber-500" />
+          <Sun className="h-4 w-4 text-warning" />
           <span>Light</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => handleThemeChange("dark")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Moon className="h-4 w-4 text-blue-500" />
+          <Moon className="h-4 w-4 text-primary" />
           <span>Dark</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => handleThemeChange("system")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Laptop className="h-4 w-4 text-slate-500" />
+          <Laptop className="h-4 w-4 text-muted-foreground" />
           <span>System</span>
         </DropdownMenuItem>
       </DropdownMenuContent>

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

@@ -30,6 +30,23 @@ export interface UiText {
   chooseTitle?: string;
   /** DialogsProvider: หัวกล่อง checklist (optional — ค่าเริ่มต้น "เลือกรายการ") */
   checklistTitle?: string;
+  /** CommandPalette (optional — ค่าเริ่มต้นไทยในตัว) */
+  palette?: Partial<{
+    placeholder: string;
+    title: string;
+    description: string;
+    empty: string;
+    searching: string;
+    pages: string;
+  }>;
+  /** OrganizationSwitcher (optional) */
+  switcher?: Partial<{ choose: string; organization: string }>;
+  /** UserMenu: aria-label ปุ่มเปิดเมนู (optional — "เมนูผู้ใช้") */
+  userMenu?: string;
+  /** UserMenu: ปุ่มออกจากระบบ (optional — "ออกจากระบบ") */
+  signOut?: string;
+  /** ThemeMenuItems: หัวกลุ่ม + ตัวเลือก (optional) */
+  theme?: Partial<{ label: string; light: string; dark: string; system: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -50,6 +67,18 @@ export const UI_TEXT_TH: UiText = {
   promptTitle: "กรอกข้อมูล",
   chooseTitle: "เลือกการทำรายการ",
   checklistTitle: "เลือกรายการ",
+  palette: {
+    placeholder: "ค้นหาหรือสั่งงาน…",
+    title: "ค้นหา",
+    description: "พิมพ์เพื่อค้นหาหน้าและข้อมูล",
+    empty: "ไม่พบผลลัพธ์",
+    searching: "กำลังค้นหา…",
+    pages: "หน้า",
+  },
+  switcher: { choose: "เลือกองค์กร", organization: "องค์กร" },
+  userMenu: "เมนูผู้ใช้",
+  signOut: "ออกจากระบบ",
+  theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -70,6 +99,18 @@ export const UI_TEXT_EN: UiText = {
   promptTitle: "Input required",
   chooseTitle: "Choose an action",
   checklistTitle: "Choose options",
+  palette: {
+    placeholder: "Search or jump to…",
+    title: "Search",
+    description: "Type to search pages and records",
+    empty: "No results",
+    searching: "Searching…",
+    pages: "Pages",
+  },
+  switcher: { choose: "Choose organization", organization: "Organization" },
+  userMenu: "User menu",
+  signOut: "Sign out",
+  theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);