@suphark/ui 0.19.0 → 0.20.0

package/src/components/shared/month-stepper.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  compareMonth,
+  currentMonthKey,
+  formatMonthKey,
+  type MonthKey,
+  shiftMonth,
+} from "@suphark/ui/lib/month";
+import { cn } from "@suphark/ui/lib/utils";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useUiText } from "./ui-text";
+
+export interface MonthStepperProps {
+  /** เดือนที่เลือก `"YYYY-MM"` */
+  value: MonthKey;
+  onValueChange: (value: MonthKey) => void;
+  /** เดือนแรก/สุดท้ายที่เลือกได้ (ปุ่ม ‹ › ปิดเมื่อถึงขอบ) */
+  min?: MonthKey;
+  max?: MonthKey;
+  /** `th-TH` = พ.ศ. (ค่าเริ่มต้น), `th-TH-u-ca-gregory` = ไทย ค.ศ., `en-US` */
+  locale?: string;
+  /** ชื่อเดือนเต็ม/ย่อ (มือถือแคบ ๆ ใช้ short) */
+  format?: "long" | "short";
+  /** ข้อความกลางเอง (เช่น "รอบบิล ต.ค. 69") — ไม่ส่ง = ชื่อเดือนตาม locale */
+  formatLabel?: (value: MonthKey) => string;
+  /** กดชื่อเดือนแล้วกลับเดือนปัจจุบัน (ค่าเริ่มต้น true) */
+  resetToCurrent?: boolean;
+  className?: string;
+}
+
+/**
+ * เลือกเดือนแบบ ‹ เดือน › — กดชื่อเดือนเพื่อกลับเดือนนี้ (ยกจาก DueBell `MonthSelector`)
+ * ใช้คู่กับ `CalendarMonthGrid month` ได้เลย (รูปแบบ `"YYYY-MM"` เดียวกัน)
+ *
+ *   const { month, setMonth } = useMonthCursor();
+ *   <MonthStepper value={month} onValueChange={setMonth} />
+ */
+export function MonthStepper({
+  value,
+  onValueChange,
+  min,
+  max,
+  locale = "th-TH",
+  format = "long",
+  formatLabel,
+  resetToCurrent = true,
+  className,
+}: MonthStepperProps) {
+  const text = useUiText().month;
+  const prev = shiftMonth(value, -1);
+  const next = shiftMonth(value, 1);
+  const canPrev = !min || compareMonth(prev, min) >= 0;
+  const canNext = !max || compareMonth(next, max) <= 0;
+  const now = currentMonthKey();
+  const nowInRange = (!min || compareMonth(now, min) >= 0) && (!max || compareMonth(now, max) <= 0);
+  const label = formatLabel ? formatLabel(value) : formatMonthKey(value, locale, format);
+  const isCurrent = value === now;
+
+  return (
+    <div
+      data-slot="month-stepper"
+      className={cn("inline-flex items-center gap-1 rounded-lg border bg-card p-1", className)}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        disabled={!canPrev}
+        onClick={() => onValueChange(prev)}
+        aria-label={text?.previous ?? "เดือนก่อน"}
+      >
+        <ChevronLeft />
+      </Button>
+      {resetToCurrent ? (
+        <Button
+          type="button"
+          variant="ghost"
+          disabled={isCurrent || !nowInRange}
+          // ปุ่มกลางแสดงชื่อเดือนเสมอ — ปิดเมื่ออยู่เดือนนี้แล้วแต่ยังต้องอ่านออก ไม่ให้จางแบบ disabled ปกติ
+          className="min-w-32 gap-2 tabular-nums disabled:opacity-100"
+          onClick={() => onValueChange(now)}
+          title={isCurrent ? undefined : (text?.current ?? "กลับไปเดือนนี้")}
+          aria-live="polite"
+        >
+          <CalendarDays className="text-muted-foreground" />
+          {label}
+        </Button>
+      ) : (
+        <span
+          className="flex min-w-32 items-center justify-center gap-2 px-2 font-medium text-sm tabular-nums"
+          aria-live="polite"
+        >
+          <CalendarDays className="size-4 text-muted-foreground" />
+          {label}
+        </span>
+      )}
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        disabled={!canNext}
+        onClick={() => onValueChange(next)}
+        aria-label={text?.next ?? "เดือนถัดไป"}
+      >
+        <ChevronRight />
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * state เดือนปัจจุบัน + ตัวเลื่อน — `initial` ไม่ส่ง = เดือนนี้
+ * ต้องการเก็บใน URL ให้ใช้ `useTableSearchParams`/searchParams ของแอปแทน แล้วส่ง value/onValueChange เอง
+ */
+export function useMonthCursor(initial?: MonthKey) {
+  const [month, setMonth] = useState<MonthKey>(() => initial ?? currentMonthKey());
+  const previous = useCallback(() => setMonth((m) => shiftMonth(m, -1)), []);
+  const next = useCallback(() => setMonth((m) => shiftMonth(m, 1)), []);
+  const reset = useCallback(() => setMonth(currentMonthKey()), []);
+  return { month, setMonth, previous, next, reset };
+}

package/src/components/shared/segmented-control.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ToggleGroup, ToggleGroupItem } from "@suphark/ui/components/ui/toggle-group";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+import { CountBadge } from "./count-badge";
+
+export interface SegmentedOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** จำนวนท้ายตัวเลือก เช่นจำนวนรายการในตัวกรองนั้น */
+  count?: number;
+  disabled?: boolean;
+}
+
+/**
+ * ตัวเลือกแบบปุ่มติดกัน "เลือกได้ทีละหนึ่ง และต้องมีค่าเสมอ" (ตัวกรองสถานะ, มุมมอง รายการ/ตาราง)
+ * ต่างจาก ToggleGroup ตรง ๆ: กดตัวที่เลือกอยู่แล้วไม่หลุดเป็นค่าว่าง และ value เป็น string ไม่ใช่ array
+ * (DueBell bill-list-filter / PDF ตัวกรองโปรเจกต์ เขียนเองพร้อมตัวเลขนับ)
+ *
+ *   <SegmentedControl value={status} onValueChange={setStatus} label="สถานะ"
+ *     options={[{ value: "all", label: "ทั้งหมด", count: 12 }, { value: "due", label: "ใกล้ครบกำหนด", count: 3 }]} />
+ */
+export function SegmentedControl<T extends string>({
+  value,
+  onValueChange,
+  options,
+  label,
+  size = "default",
+  fullWidth = false,
+  className,
+}: {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: ReadonlyArray<SegmentedOption<T>>;
+  /** aria-label ของกลุ่ม */
+  label: string;
+  size?: "sm" | "default";
+  fullWidth?: boolean;
+  className?: string;
+}) {
+  return (
+    <ToggleGroup
+      aria-label={label}
+      value={[value]}
+      onValueChange={(next) => {
+        // กดตัวที่เลือกอยู่ → Base UI คืน [] — คงค่าเดิมไว้ (ต้องมีค่าเสมอ)
+        const v = next[0];
+        if (v !== undefined && v !== value) onValueChange(v as T);
+      }}
+      variant="outline"
+      size={size === "sm" ? "sm" : "default"}
+      spacing={0}
+      className={cn(fullWidth && "w-full", className)}
+    >
+      {options.map((o) => (
+        <ToggleGroupItem
+          key={o.value}
+          value={o.value}
+          disabled={o.disabled}
+          className={cn("gap-1.5", fullWidth && "flex-1")}
+        >
+          {o.icon}
+          {o.label}
+          {o.count !== undefined && (
+            <CountBadge value={o.count} showZero tone={o.value === value ? "primary" : "muted"} />
+          )}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}

package/src/components/shared/settings-layout.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { type ReactNode, useEffect, useId, useMemo, useRef, useState } from "react";
+import { SearchInput } from "./form/search-input";
+import { useUiText } from "./ui-text";
+
+export interface SettingsSection {
+  id: string;
+  label: string;
+  description?: ReactNode;
+  icon?: ReactNode;
+  /** คำค้นเพิ่ม (ทั้งไทย/อังกฤษ) — ค้นจาก label + description แบบข้อความ + keywords */
+  keywords?: ReadonlyArray<string>;
+  /** ท้ายรายการ เช่น `<CountBadge>` / `<StatusBadge>` */
+  badge?: ReactNode;
+  content: ReactNode;
+}
+
+/**
+ * หน้าตั้งค่าหลายหัวข้อ (ยกจาก DueBell settings + PDF app-settings-form):
+ * - จอกว้าง: สารบัญซ้าย (sticky) + เนื้อหาหัวข้อที่เลือกทางขวา
+ * - มือถือ: รายการหัวข้อ → แตะแล้วเข้าหน้าหัวข้อพร้อมปุ่ม "กลับ" (master-detail)
+ * - `searchable`: ช่องค้นหาหัวข้อเหนือสารบัญ (ค้น label / description / keywords)
+ *
+ * state ของหัวข้อที่เลือกอยู่ในตัว (`initialSection`) หรือคุมเองผ่าน `value`/`onValueChange`
+ * (เช่นเก็บใน `?tab=` ของ URL) — แต่ละหัวข้อเป็น content ที่ render ไว้แล้ว ไม่ใช่หน้าแยก
+ */
+export function SettingsLayout({
+  sections,
+  value: valueProp,
+  onValueChange,
+  initialSection,
+  searchable = false,
+  searchPlaceholder,
+  className,
+}: {
+  sections: ReadonlyArray<SettingsSection>;
+  value?: string;
+  onValueChange?: (id: string) => void;
+  /** หัวข้อเริ่มต้นแบบ uncontrolled (ค่าเริ่มต้น: หัวข้อแรก) */
+  initialSection?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  className?: string;
+}) {
+  const text = useUiText();
+  const headingId = useId();
+  const [inner, setInner] = useState(initialSection ?? sections[0]?.id ?? "");
+  const active = valueProp ?? inner;
+  // มือถือ: false = เห็นรายการหัวข้อ, true = อยู่ในหน้าหัวข้อ (จอกว้างเห็นทั้งสองฝั่งเสมอ)
+  const [mobileDetail, setMobileDetail] = useState(false);
+  const [query, setQuery] = useState("");
+  const headingRef = useRef<HTMLHeadingElement>(null);
+
+  const visible = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return sections;
+    return sections.filter((s) =>
+      [s.label, typeof s.description === "string" ? s.description : "", ...(s.keywords ?? [])]
+        .join(" ")
+        .toLowerCase()
+        .includes(q),
+    );
+  }, [sections, query]);
+
+  const current = sections.find((s) => s.id === active) ?? sections[0];
+
+  const select = (id: string) => {
+    if (valueProp === undefined) setInner(id);
+    onValueChange?.(id);
+    setMobileDetail(true);
+  };
+
+  // เข้าหน้าหัวข้อบนมือถือ → ย้ายโฟกัสไปหัวข้อ ให้ screen reader รู้ว่าเนื้อหาเปลี่ยน
+  useEffect(() => {
+    if (mobileDetail) headingRef.current?.focus({ preventScroll: true });
+  }, [mobileDetail]);
+
+  if (!current) return null;
+
+  return (
+    <div
+      data-slot="settings-layout"
+      data-view={mobileDetail ? "detail" : "list"}
+      className={cn("grid gap-6 md:grid-cols-[14rem_minmax(0,1fr)] lg:gap-8", className)}
+    >
+      <nav
+        aria-label={text.settings?.label ?? "หัวข้อการตั้งค่า"}
+        className={cn(
+          "flex flex-col gap-3 md:sticky md:top-20 md:self-start",
+          mobileDetail && "hidden md:flex",
+        )}
+      >
+        {searchable && (
+          <SearchInput value={query} onValueChange={setQuery} placeholder={searchPlaceholder} />
+        )}
+        {visible.length === 0 ? (
+          <p className="px-2 py-4 text-muted-foreground text-sm">
+            {text.settings?.empty ?? "ไม่พบหัวข้อที่ตรงกับคำค้น"}
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-0.5 rounded-xl border bg-card p-1 md:border-0 md:bg-transparent md:p-0">
+            {visible.map((s) => {
+              const selected = s.id === current.id;
+              return (
+                <li key={s.id}>
+                  <button
+                    type="button"
+                    onClick={() => select(s.id)}
+                    aria-current={selected ? "page" : undefined}
+                    className={cn(
+                      "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring md:py-2",
+                      selected && "md:bg-accent md:font-medium md:text-accent-foreground",
+                    )}
+                  >
+                    {s.icon && (
+                      <span className="text-muted-foreground [&_svg]:size-4" aria-hidden>
+                        {s.icon}
+                      </span>
+                    )}
+                    <span className="flex min-w-0 flex-1 flex-col">
+                      <span className="truncate">{s.label}</span>
+                      {s.description && (
+                        <span className="truncate text-muted-foreground text-xs md:hidden">
+                          {s.description}
+                        </span>
+                      )}
+                    </span>
+                    {s.badge}
+                    <ChevronRight className="size-4 text-muted-foreground md:hidden" aria-hidden />
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </nav>
+
+      <section
+        aria-labelledby={headingId}
+        className={cn("flex min-w-0 flex-col gap-4", !mobileDetail && "hidden md:flex")}
+      >
+        <button
+          type="button"
+          onClick={() => setMobileDetail(false)}
+          className="-ml-1 flex w-fit items-center gap-1 rounded-md px-1 py-1 text-muted-foreground text-sm outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+        >
+          <ChevronLeft className="size-4" aria-hidden />
+          {text.settings?.back ?? "กลับ"}
+        </button>
+        <header className="flex flex-col gap-1">
+          <h2
+            id={headingId}
+            ref={headingRef}
+            tabIndex={-1}
+            className="font-semibold text-title outline-none"
+          >
+            {current.label}
+          </h2>
+          {current.description && (
+            <p className="text-caption text-muted-foreground">{current.description}</p>
+          )}
+        </header>
+        {current.content}
+      </section>
+    </div>
+  );
+}

package/src/components/shared/setup-checklist.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { cn } from "@suphark/ui/lib/utils";
+import { CheckIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { SectionCard } from "./section-card";
+import { useUiText } from "./ui-text";
+
+export interface SetupChecklistStep {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  done: boolean;
+  /** ขั้นเสริม — ไม่นับในความคืบหน้า และไม่ทำให้กล่องค้าง */
+  optional?: boolean;
+  /**
+   * ปุ่มไปทำขั้นนี้ (แอปส่งเอง เช่น `LinkButton` จาก `@suphark/ui/next`) — รับ `current` เพื่อเน้นขั้นถัดไป:
+   * `action: ({ current, done }) => <LinkButton href="…" variant={current ? "default" : "ghost"} size="sm">ตั้งค่า</LinkButton>`
+   */
+  action?: ReactNode | ((state: { current: boolean; done: boolean }) => ReactNode);
+}
+
+/**
+ * รายการ "ต้องตั้งอะไรให้ครบ" แบบเรียงขั้น (ยกจาก Pi Auth `SetupSteps`): เลขขั้น → ✓ เมื่อทำแล้ว,
+ * ขั้นบังคับถัดไปที่ยังไม่ทำถูกเน้น, ทำครบทุกขั้นบังคับแล้ว**ซ่อนทั้งกล่อง** (`hideWhenComplete`)
+ * ต่างจาก `Stepper` ที่เป็น wizard ทีละหน้า — ตัวนี้คือ checklist ที่ทำข้ามลำดับได้
+ */
+export function SetupChecklist({
+  title,
+  description,
+  steps,
+  hideWhenComplete = true,
+  className,
+}: {
+  title: ReactNode;
+  /** ไม่ส่ง = "ทำแล้ว {done} จาก {total} ขั้น" (UiText `setup.progress`) */
+  description?: ReactNode;
+  steps: SetupChecklistStep[];
+  hideWhenComplete?: boolean;
+  className?: string;
+}) {
+  const ui = useUiText();
+  const text = ui.setup;
+  const required = steps.filter((s) => !s.optional);
+  const doneCount = required.filter((s) => s.done).length;
+  if (hideWhenComplete && doneCount === required.length) return null;
+  const currentId = steps.find((s) => !s.done && !s.optional)?.id;
+  const progress = (text?.progress ?? "ทำแล้ว {done} จาก {total} ขั้น")
+    .replace("{done}", String(doneCount))
+    .replace("{total}", String(required.length));
+
+  return (
+    <SectionCard
+      title={title}
+      description={description ?? progress}
+      contentClassName="p-0"
+      className={className}
+    >
+      <ol className="divide-y">
+        {steps.map((step, i) => {
+          const current = step.id === currentId;
+          const action =
+            typeof step.action === "function"
+              ? step.action({ current, done: step.done })
+              : step.action;
+          return (
+            <li
+              key={step.id}
+              aria-current={current ? "step" : undefined}
+              className={cn(
+                "flex flex-wrap items-center gap-3 px-4 py-3",
+                current && "bg-accent/40",
+                step.done && "opacity-70",
+              )}
+            >
+              <span
+                aria-hidden
+                className={cn(
+                  "flex size-7 shrink-0 items-center justify-center rounded-full border font-semibold text-label",
+                  step.done && "border-success bg-success text-success-foreground",
+                  current && "border-primary text-primary",
+                )}
+              >
+                {step.done ? <CheckIcon className="size-4" /> : i + 1}
+              </span>
+              <span className="flex min-w-0 flex-1 flex-col">
+                <span className="flex flex-wrap items-center gap-2 font-medium text-sm">
+                  {step.title}
+                  {step.optional && <Badge variant="outline">{text?.optional ?? "ไม่บังคับ"}</Badge>}
+                  {step.done && <span className="sr-only">({ui.done})</span>}
+                </span>
+                {step.description && (
+                  <span className="text-muted-foreground text-xs">{step.description}</span>
+                )}
+              </span>
+              {action}
+            </li>
+          );
+        })}
+      </ol>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,172 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@suphark/ui/components/ui/dialog";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@suphark/ui/components/ui/sheet";
+import { cn } from "@suphark/ui/lib/utils";
+import { XIcon } from "lucide-react";
+import { type ReactElement, type ReactNode, useState } from "react";
+import { useUiText } from "./ui-text";
+
+const DIALOG_SIZE = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-2xl",
+  full: "sm:max-w-[min(64rem,calc(100%-2rem))]",
+} as const;
+
+interface SimpleOverlayProps {
+  /** ปุ่มเปิด (เช่น `<Button>`) — ไม่ส่งก็ได้ถ้าคุมด้วย open/onOpenChange */
+  trigger?: ReactElement;
+  title: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  /**
+   * ปุ่มท้ายกล่อง — ReactNode หรือฟังก์ชันที่ได้ `close()` (เช่นปุ่ม "บันทึก" ที่ปิดเองหลังทำเสร็จ)
+   * ไม่ส่ง = ไม่มี footer
+   */
+  footer?: ReactNode | ((close: () => void) => ReactNode);
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** ซ่อนปุ่ม X มุมขวาบน */
+  hideClose?: boolean;
+  className?: string;
+}
+
+/** state เปิด/ปิดแบบ controlled หรือในตัว — ใช้ร่วม Dialog/Sheet */
+function useOpenState(open?: boolean, onOpenChange?: (open: boolean) => void) {
+  const [inner, setInner] = useState(false);
+  const value = open ?? inner;
+  const set = (next: boolean) => {
+    if (open === undefined) setInner(next);
+    onOpenChange?.(next);
+  };
+  return [value, set] as const;
+}
+
+/**
+ * กล่องโต้ตอบสำเร็จรูป: trigger + หัวข้อ + คำอธิบาย + เนื้อหา + ปุ่มท้าย ในคอมโพเนนต์เดียว
+ * (แทน Dialog/DialogTrigger/DialogContent/DialogHeader/DialogTitle/DialogDescription/DialogFooter 7 ชิ้น)
+ * ปุ่ม X มี aria-label จาก UiText (`close`) — แปลภาษาได้ ต่างจาก DialogContent ของ shadcn
+ * ฟอร์มที่ส่ง server action ใช้ `FormDialog`, การยืนยันใช้ `ConfirmDialog`/`useConfirm`
+ *
+ *   <SimpleDialog trigger={<Button>ดูรายละเอียด</Button>} title="ใบสั่งซื้อ PO-001" size="lg">
+ *     …เนื้อหา…
+ *   </SimpleDialog>
+ */
+export function SimpleDialog({
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  open,
+  onOpenChange,
+  hideClose = false,
+  size = "md",
+  className,
+}: SimpleOverlayProps & {
+  /** ความกว้างบนจอ ≥ sm (มือถือเต็มจอลบขอบเสมอ) */
+  size?: keyof typeof DIALOG_SIZE;
+}) {
+  const text = useUiText();
+  const [isOpen, setOpen] = useOpenState(open, onOpenChange);
+  const close = () => setOpen(false);
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger render={trigger} />}
+      <DialogContent
+        showCloseButton={false}
+        className={cn("flex max-h-[calc(100dvh-2rem)] flex-col", DIALOG_SIZE[size], className)}
+      >
+        <DialogHeader className="pr-8">
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        {children !== undefined && (
+          <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-1">
+            {children}
+          </div>
+        )}
+        {footer && (
+          <DialogFooter>{typeof footer === "function" ? footer(close) : footer}</DialogFooter>
+        )}
+        {!hideClose && (
+          <DialogClose
+            render={<Button variant="ghost" size="icon-sm" className="absolute top-2 right-2" />}
+          >
+            <XIcon />
+            <span className="sr-only">{text.close ?? "ปิด"}</span>
+          </DialogClose>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * แผงเลื่อนจากขอบจอสำเร็จรูป (ตัวกรองขั้นสูง, รายละเอียดแถว, ฟอร์มยาว) — props เดียวกับ SimpleDialog + `side`
+ * เนื้อหาเลื่อนได้ หัว/ท้ายตรึง
+ */
+export function SimpleSheet({
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  open,
+  onOpenChange,
+  hideClose = false,
+  side = "right",
+  className,
+}: SimpleOverlayProps & {
+  side?: "right" | "left" | "top" | "bottom";
+}) {
+  const text = useUiText();
+  const [isOpen, setOpen] = useOpenState(open, onOpenChange);
+  const close = () => setOpen(false);
+  return (
+    <Sheet open={isOpen} onOpenChange={setOpen}>
+      {trigger && <SheetTrigger render={trigger} />}
+      <SheetContent side={side} showCloseButton={false} className={cn("gap-0", className)}>
+        <SheetHeader className="border-b pr-12">
+          <SheetTitle>{title}</SheetTitle>
+          {description && <SheetDescription>{description}</SheetDescription>}
+        </SheetHeader>
+        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">{children}</div>
+        {footer && (
+          <SheetFooter className="border-t">
+            {typeof footer === "function" ? footer(close) : footer}
+          </SheetFooter>
+        )}
+        {!hideClose && (
+          <SheetClose
+            render={<Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />}
+          >
+            <XIcon />
+            <span className="sr-only">{text.close ?? "ปิด"}</span>
+          </SheetClose>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}