@suphark/ui 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.4.2] — 2026-09-19
+
+### Added
+
+- **`ConfirmDialog`** (barrel) — กล่องยืนยันมาตรฐานบน `AlertDialog` ของแพ็กเกจ ใช้แทน `window.confirm` (webview/automation บางตัวปิด window.confirm ทิ้ง กดแล้วไม่เกิดอะไร และไม่เข้า design system): controlled `open`/`onOpenChange`, `title?` (ค่าเริ่มต้น `UiText.confirmTitle`), `description`, `confirmLabel?` (ค่าเริ่มต้น `UiText.confirm`), `cancelLabel?`, `destructive` (ปุ่มยืนยันสีแดง), `pending` (ปุ่มหมุน + ปิดไม่ได้ชั่วคราว), `onConfirm`; พร้อม type `ConfirmSpec` (= `string | { title?, description, confirmLabel?, cancelLabel? }`) และ `normalizeConfirm()`
+- **`ConfirmActionButton`** (`@suphark/ui/next`) — ปุ่มเดี่ยว + ConfirmDialog + server action ในตัว (`confirm`, `action`, `data`, `onDone?` + props ของ ActionButton เช่น `variant`/`icon`/`permission`) รอ action เสร็จแล้ว `router.refresh()` — ใช้แทน `<form action>` + window.confirm ที่ Pi Auth มี (ชื่อไม่ใช้ `ConfirmButton` เพราะมีปุ่มธรรมดาชื่อนั้นอยู่แล้วใน standard buttons)
+- `UiText.confirm` / `UiText.confirmTitle` (optional มีค่าเริ่มต้นไทย/อังกฤษ) — แอปที่ส่ง UiText เองไม่ต้องเพิ่ม
+- export type `RowActionItem` (รายการที่ไม่ใช่ separator)
+
+### Changed
+
+- **`RowActions` / `RowMenu` prop `confirm`** เปิด `ConfirmDialog` แทน `window.confirm` (ขอจาก Pi Auth ผ่าน Pi Mail) — รับ `ConfirmSpec`: string เดิมยังใช้ได้ (= description, title/ปุ่มค่าเริ่มต้น) หรือ object กำหนด `title`/`confirmLabel`/`cancelLabel`; ปุ่มยืนยันสีแดงเมื่อ `destructive`; dropdown ปิดก่อน dialog เปิด และ dialog render นอก DropdownMenu (กัน focus trap ของ Base UI ชนกัน); กดยืนยันแล้วค่อยรัน `href`/`onSelect`/`action` ใน transition เหมือนเดิม — โค้ดเรียกเดิมไม่ต้องแก้
+- ไม่มี `window.confirm` เหลือในแพ็กเกจ
+- showcase: หน้า `/components/confirm-dialog` (ConfirmDialog + ConfirmActionButton) และ `/components/row-actions` ใช้ confirm แบบ object
+
+## [0.4.1] — 2026-09-19
+
+### Added
+
+- **`SwitcherChevron`** (barrel) — ลูกศร ⇅ มาตรฐานท้าย trigger แบบ switcher/select: `ChevronsUpDown` ขนาด `size-3` (12px) `shrink-0 text-muted-foreground opacity-70` aria-hidden (เล็กบางแบบ Clerk) รับ `className` ทับได้ — ใช้ตัวเดียวทั้งแพ็กเกจ/แอป (`OrganizationSwitcher` ใน @suphark/auth-ui จะย้ายมาใช้ด้วย)
+
+### Fixed
+
+- `HeaderCrumb`: ลูกศรใหญ่ 24px ในแอปปลายทาง (Pi Auth) — เดิมใช้ `size-3.5!` ซึ่ง Tailwind ของแอปที่ scan ผ่าน `@source` ไม่ generate class แบบ `!` → svg ไม่มีขนาดจึงตกไป 24px ของ lucide; เปลี่ยนเป็น `SwitcherChevron` (ไม่ใช้ `!`)
+
+### Changed
+
+- ลูกศรของ `UserMenu`, `Combobox`, `MultiSelectCombobox`, `FormFieldCombobox`, `FormFieldSelect` เปลี่ยนมาใช้ `SwitcherChevron` (เดิม h-4 w-4 opacity-50 ปนกันหลายขนาด) — ทุกจุดได้ 12px จางเท่ากัน; ไอคอน sort ใน `DataTableColumnHeader` ไม่ใช่ switcher คงเดิม; `components/ui/searchable-select.tsx` เป็นไฟล์ shadcn ไม่แตะ
+- นโยบาย: หลีกเลี่ยง `!` บน utility ในแพ็กเกจถ้าไม่จำเป็น (เหลือเฉพาะ `group-data-[collapsible=icon]:p-0!` ใน `AppBrand` ซึ่ง `sidebar.tsx` ของ shadcn generate class เดียวกันอยู่แล้ว)
+
 ## [0.4.0] — 2026-09-19
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "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/header-crumb.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { cn } from "@suphark/ui/lib/utils";
-import { ChevronsUpDown } from "lucide-react";
 import { type ComponentProps, Fragment, type ReactNode } from "react";
 
 /**
@@ -50,7 +50,7 @@ export function HeaderCrumb({
         </span>
       )}
       {children}
-      {chevron && <ChevronsUpDown className="size-3.5! text-muted-foreground" aria-hidden="true" />}
+      {chevron && <SwitcherChevron />}
     </button>
   );
 }

package/src/components/app-shell/user-menu.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Initials } from "@suphark/ui/components/shared/initials";
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -12,7 +13,7 @@ import {
   DropdownMenuTrigger,
 } from "@suphark/ui/components/ui/dropdown-menu";
 import { cn } from "@suphark/ui/lib/utils";
-import { ChevronsUpDown, LogOut } from "lucide-react";
+import { LogOut } from "lucide-react";
 import { type ReactNode, useTransition } from "react";
 
 export interface UserMenuUser {
@@ -82,10 +83,8 @@ export function UserMenu({
             <span className="truncate text-muted-foreground text-xs">{description}</span>
           )}
         </span>
-        <ChevronsUpDown
-          aria-hidden="true"
+        <SwitcherChevron
           className={cn(
-            "text-muted-foreground",
             variant === "sidebar" ? "group-data-[collapsible=icon]:hidden" : "hidden xl:block",
           )}
         />

package/src/components/shared/button/confirm-action-button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import {
+  ConfirmDialog,
+  type ConfirmSpec,
+  normalizeConfirm,
+} from "@suphark/ui/components/shared/confirm-dialog";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+
+/**
+ * ปุ่มเดี่ยวที่ถามยืนยัน (ConfirmDialog) ก่อนเรียก server action — ใช้แทน `<form action>` + window.confirm
+ * `confirm` เหมือน `RowAction.confirm`; `action` + `data` เหมือน RowAction; refresh หน้าเมื่อเสร็จ
+ * ต้องการ next/navigation → export จาก `@suphark/ui/next`
+ */
+export function ConfirmActionButton({
+  confirm,
+  action,
+  data,
+  onDone,
+  variant,
+  children,
+  ...props
+}: Omit<ActionButtonProps, "onClick" | "isLoading" | "type"> & {
+  confirm: ConfirmSpec;
+  action: (formData: FormData) => Promise<unknown>;
+  data?: Record<string, string>;
+  /** เรียกหลัง action สำเร็จ (ก่อน refresh) เช่น toast */
+  onDone?: () => void;
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [pending, start] = useTransition();
+  const spec = normalizeConfirm(confirm);
+  const destructive = variant === "destructive";
+  return (
+    <>
+      <ActionButton
+        type="button"
+        variant={variant}
+        isLoading={pending}
+        onClick={() => setOpen(true)}
+        {...props}
+      >
+        {children}
+      </ActionButton>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title={spec.title}
+        description={spec.description}
+        confirmLabel={spec.confirmLabel}
+        cancelLabel={spec.cancelLabel}
+        destructive={destructive}
+        pending={pending}
+        onConfirm={() => {
+          const fd = new FormData();
+          for (const [k, v] of Object.entries(data ?? {})) fd.set(k, v);
+          start(async () => {
+            await action(fd);
+            onDone?.();
+            setOpen(false);
+            router.refresh();
+          });
+        }}
+      />
+    </>
+  );
+}

package/src/components/shared/combobox.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
@@ -11,7 +12,7 @@ import {
 } from "@suphark/ui/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check } from "lucide-react";
 import * as React from "react";
 
 interface ComboboxProps {
@@ -75,12 +76,8 @@ export function Combobox({
         >
           {value ? options.find((option) => option.value === value)?.label : placeholder}
         </span>
-        <ChevronsUpDown
-          className={cn(
-            "ml-2 h-4 w-4 shrink-0 opacity-50 print:hidden",
-            wrapText && "self-start",
-            disabled && "hidden",
-          )}
+        <SwitcherChevron
+          className={cn("ml-2 print:hidden", wrapText && "self-start", disabled && "hidden")}
         />
       </PopoverTrigger>
       <PopoverContent className="w-[--anchor-width] p-0">

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

@@ -0,0 +1,81 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@suphark/ui/components/ui/alert-dialog";
+import { Loader2 } from "lucide-react";
+import type { ReactNode } from "react";
+import { useUiText } from "./ui-text";
+
+/** สเปกการยืนยัน — string = description อย่างเดียว (title/ปุ่มใช้ค่าเริ่มต้นจาก UiText) */
+export type ConfirmSpec =
+  | string
+  | {
+      title?: ReactNode;
+      description: ReactNode;
+      confirmLabel?: string;
+      cancelLabel?: string;
+    };
+
+/** แปลง ConfirmSpec เป็น object เสมอ */
+export function normalizeConfirm(spec: ConfirmSpec): Exclude<ConfirmSpec, string> {
+  return typeof spec === "string" ? { description: spec } : spec;
+}
+
+/**
+ * กล่องยืนยันมาตรฐานของแพ็กเกจ (AlertDialog) — ใช้แทน `window.confirm` ทุกที่
+ * (webview/automation บางตัวปิด window.confirm ทิ้ง กดแล้วไม่เกิดอะไร และไม่เข้า design system)
+ * controlled: `open`/`onOpenChange`; `pending` = กำลังรัน action → ปุ่มยืนยันหมุน ปิดไม่ได้ชั่วคราว
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  destructive = false,
+  pending = false,
+  onConfirm,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: ReactNode;
+  description: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** ปุ่มยืนยันสีแดง (ลบ/เพิกถอน) */
+  destructive?: boolean;
+  pending?: boolean;
+  onConfirm: () => void;
+}) {
+  const text = useUiText();
+  return (
+    <AlertDialog open={open} onOpenChange={(o) => !pending && onOpenChange(o)}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title ?? text.confirmTitle ?? "ยืนยันการทำรายการ"}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>{cancelLabel ?? text.cancel}</AlertDialogCancel>
+          <AlertDialogAction
+            variant={destructive ? "destructive" : "default"}
+            disabled={pending}
+            onClick={onConfirm}
+          >
+            {pending && <Loader2 className="animate-spin" aria-hidden="true" />}
+            {confirmLabel ?? text.confirm ?? "ยืนยัน"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
@@ -18,7 +19,7 @@ import {
 } from "@suphark/ui/components/ui/form";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check } from "lucide-react";
 import * as React from "react";
 import { useEffect, useState, useTransition } from "react";
 import type { FieldValues, Path } from "react-hook-form";
@@ -119,7 +120,7 @@ export function FormFieldCombobox<T extends FieldValues>({
                       ? "Loading..."
                       : placeholder}
                 </span>
-                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                <SwitcherChevron className="ml-2" />
               </PopoverTrigger>
               <PopoverContent className="w-[--anchor-width] p-0">
                 <Command>

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { MultiSelectCombobox } from "@suphark/ui/components/shared/multi-select-combobox";
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
@@ -26,7 +27,7 @@ import {
   SelectValue,
 } from "@suphark/ui/components/ui/select";
 import { cn } from "@suphark/ui/lib/utils";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check } from "lucide-react";
 import * as React from "react";
 import type { ControllerRenderProps, FieldValues, Path, PathValue } from "react-hook-form";
 
@@ -126,7 +127,7 @@ function ComboboxContent<T extends FieldValues>({
           disabled={disabled}
         >
           <span className="truncate">{selectedLabel}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <SwitcherChevron className="ml-2" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[--anchor-width] p-0">

package/src/components/shared/multi-select-combobox.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Badge } from "@suphark/ui/components/ui/badge";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
@@ -13,7 +14,7 @@ import {
 } from "@suphark/ui/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
+import { Check, Plus, X } from "lucide-react";
 import * as React from "react";
 
 export interface MultiSelectOption {
@@ -259,9 +260,7 @@ export function MultiSelectCombobox({
               <X className="size-3.5" />
             </span>
           )}
-          <ChevronsUpDown
-            className={cn("size-4 shrink-0 opacity-50 print:hidden", disabled && "hidden")}
-          />
+          <SwitcherChevron className={cn("print:hidden", disabled && "hidden")} />
         </div>
       </PopoverTrigger>
       <PopoverContent className="w-[--anchor-width] min-w-[220px] p-0" align="start">

package/src/components/shared/row-actions.tsx

@@ -11,83 +11,110 @@ import {
 import { MoreHorizontalIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
+import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
-export type RowAction =
-  | {
-      type?: "item";
-      label: string;
-      href?: string;
-      onSelect?: () => void;
-      destructive?: boolean;
-      confirm?: string;
-      action?: (formData: FormData) => Promise<unknown>;
-      data?: Record<string, string>;
-      disabled?: boolean;
-    }
-  | { type: "separator" };
+export type RowActionItem = {
+  type?: "item";
+  label: string;
+  href?: string;
+  onSelect?: () => void;
+  destructive?: boolean;
+  /** ถามยืนยันก่อน (ConfirmDialog ของแพ็กเกจ — ไม่ใช่ window.confirm): string = ข้อความ หรือ object กำหนด title/ปุ่ม */
+  confirm?: ConfirmSpec;
+  action?: (formData: FormData) => Promise<unknown>;
+  data?: Record<string, string>;
+  disabled?: boolean;
+};
+
+export type RowAction = RowActionItem | { type: "separator" };
 
 /**
  * เมนู "…" ท้ายแถว — รวมการกระทำรองไว้ที่เดียวแทนปุ่ม/ฟอร์มหลายอันในแถว
  * รายการเรียก server action ได้โดยตรง (`action` + `data`) หรือไปหน้าอื่น (`href`) หรือเปิด dialog (`onSelect`)
- * `confirm` = ถามยืนยันก่อน (ใช้กับสิ่งที่ย้อนกลับไม่ได้)
+ * `confirm` = ถามยืนยันก่อนด้วย ConfirmDialog (ใช้กับสิ่งที่ย้อนกลับไม่ได้) — dialog render นอก DropdownMenu กัน focus trap ชนกัน
  */
 export function RowActions({ items, label }: { items: RowAction[]; label?: string }) {
   const router = useRouter();
   const text = useUiText();
   const [pending, start] = useTransition();
   const [open, setOpen] = useState(false);
+  const [confirming, setConfirming] = useState<RowActionItem | null>(null);
+
+  function run(it: RowActionItem) {
+    if (it.href) {
+      router.push(it.href);
+      return;
+    }
+    if (it.onSelect) {
+      it.onSelect();
+      return;
+    }
+    if (it.action) {
+      const fd = new FormData();
+      for (const [k, v] of Object.entries(it.data ?? {})) fd.set(k, v);
+      const act = it.action;
+      start(async () => {
+        await act(fd);
+        router.refresh();
+      });
+    }
+  }
+
+  const spec = confirming?.confirm ? normalizeConfirm(confirming.confirm) : null;
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger
-        render={
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label={label ?? text.actions}
-            disabled={pending}
-          />
-        }
-      >
-        <MoreHorizontalIcon />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-52">
-        {items.map((it, i) =>
-          it.type === "separator" ? (
-            // biome-ignore lint/suspicious/noArrayIndexKey: separator ไม่มี identity
-            <DropdownMenuSeparator key={`sep-${i}`} />
-          ) : (
-            <DropdownMenuItem
-              key={it.label}
-              variant={it.destructive ? "destructive" : "default"}
-              disabled={it.disabled}
-              onClick={() => {
-                setOpen(false);
-                if (it.confirm && !window.confirm(it.confirm)) return;
-                if (it.href) {
-                  router.push(it.href);
-                  return;
-                }
-                if (it.onSelect) {
-                  it.onSelect();
-                  return;
-                }
-                if (it.action) {
-                  const fd = new FormData();
-                  for (const [k, v] of Object.entries(it.data ?? {})) fd.set(k, v);
-                  const run = it.action;
-                  start(async () => {
-                    await run(fd);
-                    router.refresh();
-                  });
-                }
-              }}
-            >
-              {it.label}
-            </DropdownMenuItem>
-          ),
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={label ?? text.actions}
+              disabled={pending}
+            />
+          }
+        >
+          <MoreHorizontalIcon />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-52">
+          {items.map((it, i) =>
+            it.type === "separator" ? (
+              // biome-ignore lint/suspicious/noArrayIndexKey: separator ไม่มี identity
+              <DropdownMenuSeparator key={`sep-${i}`} />
+            ) : (
+              <DropdownMenuItem
+                key={it.label}
+                variant={it.destructive ? "destructive" : "default"}
+                disabled={it.disabled}
+                onClick={() => {
+                  setOpen(false);
+                  if (it.confirm) setConfirming(it);
+                  else run(it);
+                }}
+              >
+                {it.label}
+              </DropdownMenuItem>
+            ),
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {spec && confirming && (
+        <ConfirmDialog
+          open
+          onOpenChange={(o) => !o && setConfirming(null)}
+          title={spec.title}
+          description={spec.description}
+          confirmLabel={spec.confirmLabel}
+          cancelLabel={spec.cancelLabel}
+          destructive={confirming.destructive}
+          onConfirm={() => {
+            const it = confirming;
+            setConfirming(null);
+            run(it);
+          }}
+        />
+      )}
+    </>
   );
 }

package/src/components/shared/switcher-chevron.tsx

@@ -0,0 +1,19 @@
+import { cn } from "@suphark/ui/lib/utils";
+import { ChevronsUpDown } from "lucide-react";
+import type { ComponentProps } from "react";
+
+/**
+ * ลูกศร ⇅ มาตรฐานท้าย trigger แบบ switcher/select (HeaderCrumb, UserMenu, Combobox, OrganizationSwitcher …)
+ * เล็กบางแบบ Clerk: 12px จาง — ใช้ตัวเดียวทั้งแพ็กเกจเพื่อให้ขนาดเท่ากันทุกจุด
+ * ไม่ใช้ `!` บน utility (แอปที่ scan ผ่าน @source อาจไม่ generate class นั้น); ปุ่มที่มี
+ * `[&_svg:not([class*='size-'])]:size-4` จะไม่ทับเพราะ class มี `size-3` อยู่แล้ว
+ */
+export function SwitcherChevron({ className, ...props }: ComponentProps<typeof ChevronsUpDown>) {
+  return (
+    <ChevronsUpDown
+      aria-hidden="true"
+      className={cn("size-3 shrink-0 text-muted-foreground opacity-70", className)}
+      {...props}
+    />
+  );
+}

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

@@ -14,6 +14,10 @@ export interface UiText {
   success: string;
   /** EnvSnippet: คัดลอกอัตโนมัติไม่ได้ (optional — มีค่าเริ่มต้นในตัว) */
   copyFailed?: string;
+  /** ConfirmDialog: ปุ่มยืนยัน (optional — ค่าเริ่มต้น "ยืนยัน") */
+  confirm?: string;
+  /** ConfirmDialog: หัวกล่อง (optional — ค่าเริ่มต้น "ยืนยันการทำรายการ") */
+  confirmTitle?: string;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -26,6 +30,8 @@ export const UI_TEXT_TH: UiText = {
   showOnce: "แสดงครั้งเดียว — คัดลอกเก็บไว้ทันที",
   success: "สำเร็จ",
   copyFailed: "คัดลอกอัตโนมัติไม่ได้ — เลือกข้อความให้แล้ว กด Ctrl+C / ⌘C",
+  confirm: "ยืนยัน",
+  confirmTitle: "ยืนยันการทำรายการ",
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -38,6 +44,8 @@ export const UI_TEXT_EN: UiText = {
   showOnce: "Shown once — copy it now",
   success: "Done",
   copyFailed: "Automatic copy is blocked — text selected, press Ctrl+C / ⌘C",
+  confirm: "Confirm",
+  confirmTitle: "Please confirm",
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/index.ts

@@ -16,6 +16,11 @@ export { toast } from "sonner";
 export * from "./components/shared/button";
 export { ClientRedirect } from "./components/shared/client-redirect";
 export { Combobox } from "./components/shared/combobox";
+export {
+  ConfirmDialog,
+  type ConfirmSpec,
+  normalizeConfirm,
+} from "./components/shared/confirm-dialog";
 export { DataList, DataRow } from "./components/shared/data-list";
 export { DateRangePicker } from "./components/shared/date/date-range-picker";
 export { DescriptionList } from "./components/shared/description-list";
@@ -63,6 +68,7 @@ export { SecretReveal } from "./components/shared/secret-reveal";
 export { SectionCard } from "./components/shared/section-card";
 export { Stat } from "./components/shared/stat";
 export { StatusBadge, statusTone, type Tone } from "./components/shared/status-badge";
+export { SwitcherChevron } from "./components/shared/switcher-chevron";
 export {
   PrimarySecondaryText,
   type PrimarySecondaryTextProps,

package/src/next.ts

@@ -6,6 +6,7 @@
 // ---------- app shell (sidebar + header + เนื้อหา) ----------
 export * from "./components/app-shell";
 export { LinkButton, type LinkButtonProps } from "./components/shared/button/base/link-button";
+export { ConfirmActionButton } from "./components/shared/button/confirm-action-button";
 export { RefreshButton } from "./components/shared/button/refresh-button";
 export { FormDialog } from "./components/shared/form-dialog";
 export { PageShell } from "./components/shared/layout/page-shell";
@@ -14,7 +15,7 @@ export {
   PageBreadcrumb,
   type PageBreadcrumbItem,
 } from "./components/shared/navigation/page-breadcrumb";
-export { type RowAction, RowActions } from "./components/shared/row-actions";
+export { type RowAction, type RowActionItem, RowActions } from "./components/shared/row-actions";
 export { RowMenu, type RowMenuDialog, type RowMenuItem } from "./components/shared/row-menu";
 export {
   TABLE_PARAM,