@suphark/ui 0.45.2 → 0.53.0

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

@@ -1,21 +1,36 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/shared/button/button";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Calendar } from "@suphark/ui/components/ui/calendar";
+import { Calendar, CalendarDayButton } from "@suphark/ui/components/ui/calendar";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
 } from "@suphark/ui/components/ui/input-group";
-import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { formatRelativeCalendarDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
 import { cn } from "@suphark/ui/lib/utils";
-import { addDays, addMonths, addWeeks, addYears } from "date-fns";
-import { CalendarIcon, Check, InfoIcon, X } from "lucide-react";
-import { useMemo, useState } from "react";
+import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays } from "date-fns";
+import {
+  CalendarIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  X,
+} from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
 
 /**
  * Smart date parser supporting intuitive Thai & international date inputs:
@@ -179,6 +194,7 @@ interface DatePickerBaseProps {
   allowClear?: boolean;
   /** @deprecated 0.42.0 — ปุ่มทางลัดถูกแทนด้วยการพิมพ์ลัด (`t`, `t+3`, `t+1m` …) ใส่ได้แต่ไม่มีผล */
   showPresets?: boolean;
+  /** พิมพ์ในช่องได้ (ค่าเริ่มต้น true) · false = ช่องอ่านอย่างเดียว กดแล้วเปิดปฏิทิน */
   showSmartInput?: boolean;
 }
 
@@ -222,8 +238,10 @@ export interface DatePickerRangeProps extends DatePickerBaseProps {
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 
 /**
- * เลือกวันที่ — วันเดียว (ค่าเริ่มต้น) หรือ `mode="range"` เป็นช่วง (คลิกวันเริ่มแล้ววันสุดท้าย
- * หรือพิมพ์ "1/7-5/7") · พิมพ์ "15/3", "15/3/69" ได้ · มีทางลัด · ใช้ในฟอร์มด้วย `name`
+ * เลือกวันที่ — วันเดียว (ค่าเริ่มต้น) หรือ `mode="range"` เป็นช่วง · **พิมพ์ในช่องได้เลย**
+ * ("15/3", "15/3/69", "t+3", "t+1m", ช่วง "1/7-5/7", "t-7..t") เห็นผลที่อ่านออกทันทีใต้ช่อง
+ * กด Enter หรือกดผลนั้นเพื่อยืนยัน · ปฏิทินเป็นตัวช่วย (คลิกวัน / คลิกวันเริ่มแล้ววันสุดท้าย)
+ * ใช้ในฟอร์มด้วย `name` · `showSmartInput={false}` = ช่องอ่านอย่างเดียว เปิดปฏิทินอย่างเดียว (แบบเดิม)
  */
 export function DatePicker(props: DatePickerProps) {
   return props.mode === "range" ? <RangeDatePicker {...props} /> : <SingleDatePicker {...props} />;
@@ -241,7 +259,7 @@ function FormValue({
   required: boolean;
   disabled: boolean;
 }) {
-  // อยู่หลังปุ่มเสมอ: label ที่ครอบ (LabeledField) คลิกแล้วไปที่ปุ่ม ไม่ใช่ช่องนี้ · ตาข่ายฟอร์มอ่านชื่อจาก label เดียวกัน
+  // อยู่หลังช่องพิมพ์เสมอ: label ที่ครอบ (LabeledField) คลิกแล้วไปที่ช่องพิมพ์ ไม่ใช่ช่องนี้ · ตาข่ายฟอร์มอ่านชื่อจาก label เดียวกัน
   return (
     <input
       name={name}
@@ -256,6 +274,580 @@ function FormValue({
   );
 }
 
+// ---------- ช่องพิมพ์ + ป๊อปอัปปฏิทิน (ใช้ร่วมกันทั้งวันเดียวและช่วง) ----------
+
+const WEEKDAY_TH = ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"];
+const WEEKDAY_TH_DOT = ["อา.", "จ.", "อ.", "พ.", "พฤ.", "ศ.", "ส."];
+const isThai = (locale?: string) => !locale || locale.toLowerCase().startsWith("th");
+
+/** "จ." / "Mon" ตาม locale — ไม่ส่ง locale = ไทย */
+function weekdayShort(date: Date, locale?: string): string {
+  return isThai(locale)
+    ? (WEEKDAY_TH_DOT[date.getDay()] ?? "")
+    : date.toLocaleString(locale, { weekday: "short" });
+}
+
+/**
+ * ปฏิทินใช้ locale เดียวกับช่อง (ชื่อเดือน/ปี/วัน) — เดิมไม่ส่ง locale แล้วปฏิทินขึ้น "Oct 2026" อังกฤษ
+ * ทั้งที่ช่องแสดง พ.ศ. ไทย · หัวคอลัมน์วันไทยใช้ 2 ตัว (อา จ อ พ พฤ ศ ส) เพราะตัวเดียว "อ"/"พ" กำกวม
+ */
+function calendarFormatters(locale?: string) {
+  const tag = locale ?? "th";
+  return {
+    formatMonthDropdown: (d: Date) => d.toLocaleString(tag, { month: "short" }),
+    formatYearDropdown: (d: Date) => d.toLocaleString(tag, { year: "numeric" }),
+    formatWeekdayName: (d: Date) =>
+      isThai(locale) ? (WEEKDAY_TH[d.getDay()] ?? "") : d.toLocaleString(tag, { weekday: "short" }),
+    formatCaption: (d: Date) => d.toLocaleString(tag, { month: "long", year: "numeric" }),
+  };
+}
+
+/**
+ * ปุ่มวันของปฏิทินที่ย้ายโฟกัสจริงตามลูกศรคีย์บอร์ด — `CalendarDayButton` ของ shadcn (ไฟล์ห้ามแก้มือ) มี effect สั่ง
+ * `ref.current?.focus()` แต่ไม่เคยผูก `ref` กับปุ่ม ลูกศรจึงเลื่อนได้แค่สถานะภายในของ react-day-picker โฟกัสจริงอยู่ที่เดิม
+ * (ใช้เลือกวันด้วยคีย์บอร์ดไม่ได้) — ผูก ref ผ่าน `{...props}` ที่ CalendarDayButton ส่งต่อให้ปุ่ม
+ */
+function FocusableDayButton(props: ComponentProps<typeof CalendarDayButton>) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const focused = props.modifiers.focused;
+  useEffect(() => {
+    if (focused) ref.current?.focus();
+  }, [focused]);
+  // React 19: ref เป็น prop ธรรมดาที่ถูก spread ต่อไปถึง <Button> — แต่ type ของ react-day-picker ไม่ประกาศ ref
+  return <CalendarDayButton {...props} {...({ ref } as Record<string, unknown>)} />;
+}
+
+/** คลิกชื่อเดือนในหัวปฏิทิน → สลับไปตารางเลือกเดือน/ปี (อยู่ใน shell) */
+const OpenMonthsContext = createContext<(() => void) | null>(null);
+
+/** หัวปฏิทินแบบ "ตุลาคม 2569 ▾" เป็นปุ่มเดียว (แทนเมนูเลือกเดือน/ปีสองอัน) */
+function CaptionButton({ children }: ComponentProps<"span">) {
+  const open = useContext(OpenMonthsContext);
+  if (!open) return <span>{children}</span>;
+  return (
+    <button
+      type="button"
+      onClick={open}
+      className="inline-flex items-center gap-1 rounded-md px-2 py-1 font-semibold text-sm outline-none hover:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50"
+    >
+      {children}
+      <ChevronDownIcon className="size-3.5 text-muted-foreground" aria-hidden />
+    </button>
+  );
+}
+
+/** ตารางเลือกเดือน (12 ช่อง) + ปีเลื่อนซ้าย/ขวา — ใช้แทนปฏิทินชั่วคราวเมื่อกดหัวปฏิทิน */
+function MonthGrid({
+  month,
+  locale,
+  onPick,
+}: {
+  month: Date;
+  locale: string | undefined;
+  onPick: (month: Date) => void;
+}) {
+  const tag = locale ?? "th";
+  const [year, setYear] = useState(month.getFullYear());
+  const today = new Date();
+  const yearLabel = (y: number) => new Date(y, 0, 1).toLocaleString(tag, { year: "numeric" });
+  const step =
+    "flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50";
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex h-8 items-center justify-between">
+        <button type="button" aria-label="-" className={step} onClick={() => setYear(year - 1)}>
+          <ChevronLeftIcon className="size-4" />
+        </button>
+        <span className="font-semibold text-sm">{yearLabel(year)}</span>
+        <button type="button" aria-label="+" className={step} onClick={() => setYear(year + 1)}>
+          <ChevronRightIcon className="size-4" />
+        </button>
+      </div>
+      <div className="grid grid-cols-3 gap-1">
+        {Array.from({ length: 12 }, (_, m) => {
+          const current = year === month.getFullYear() && m === month.getMonth();
+          const thisMonth = year === today.getFullYear() && m === today.getMonth();
+          const label = new Date(2000, m, 1).toLocaleString(tag, { month: "short" });
+          return (
+            <button
+              key={label}
+              type="button"
+              onClick={() => onPick(new Date(year, m, 1))}
+              className={cn(
+                "h-[3.25rem] rounded-md text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+                current ? "bg-primary font-semibold text-primary-foreground" : "hover:bg-accent",
+                !current && thisMonth && "bg-muted font-medium",
+              )}
+            >
+              {label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/** ผลอ่านจากข้อความที่พิมพ์ — `label` ที่คนอ่านออก + เดือนที่ปฏิทินควรเลื่อนไปแสดง */
+interface DatePreview {
+  label: string;
+  month: Date;
+}
+interface SinglePreview extends DatePreview {
+  date: Date;
+}
+interface RangePreview extends DatePreview {
+  range: DatePickerRange;
+}
+
+interface ShellApi<T extends DatePreview> {
+  month: Date;
+  setMonth: (month: Date) => void;
+  /** ผลอ่านของข้อความที่กำลังพิมพ์ (null = ไม่ได้พิมพ์/อ่านไม่ออก) */
+  preview: T | null;
+  /** ปิดป๊อปอัปและจบการพิมพ์ (เรียกหลังเลือกจากปฏิทิน) */
+  close: () => void;
+}
+
+interface ShellProps<T extends DatePreview> {
+  id?: string;
+  locale?: string;
+  disabled: boolean;
+  className?: string;
+  required: boolean;
+  placeholder: string;
+  /** false = ช่องอ่านอย่างเดียว กดแล้วเปิดปฏิทิน (`showSmartInput={false}`) */
+  typing: boolean;
+  /** ข้อความของค่าที่เลือกอยู่ ("" = ว่าง) */
+  display: string;
+  relative: string | null;
+  allowClear: boolean;
+  onClear: () => void;
+  /** เดือนที่ปฏิทินเปิดเมื่อไม่มีอะไรให้โฟกัส (ค่าที่เลือกอยู่ หรือวันนี้) */
+  initialMonth: Date;
+  parse: (text: string) => T | null;
+  /** ยืนยันข้อความ — คืน false = ใช้ไม่ได้ (อ่านไม่ออก) · ข้อความว่าง = ล้างค่า */
+  commit: (text: string) => boolean;
+  chips: string[];
+  sheet: Array<{ code: string; text: string }>;
+  onClose?: () => void;
+  children: (api: ShellApi<T>) => ReactNode;
+}
+
+function DateFieldShell<T extends DatePreview>({
+  id,
+  locale,
+  disabled,
+  className,
+  required,
+  placeholder,
+  typing,
+  display,
+  relative,
+  allowClear,
+  onClear,
+  initialMonth,
+  parse,
+  commit,
+  chips,
+  sheet,
+  onClose,
+  children,
+}: ShellProps<T>) {
+  const text = useUiText().datePicker;
+  const previewId = useId();
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState(false);
+  // ผูกกับ state แบบทันที — onFocus ที่ถูกเรียกในจังหวะเดียวกับ fill()/onChange ต้องเห็นว่ากำลังพิมพ์อยู่แล้ว
+  // (อ่านจาก state จะได้ค่าเก่า แล้วเขียนทับข้อความที่เพิ่งเติมด้วยค่าเดิม)
+  const editingRef = useRef(false);
+  const markEditing = (value: boolean) => {
+    editingRef.current = value;
+    setEditing(value);
+  };
+  const [draft, setDraft] = useState("");
+  const [showSheet, setShowSheet] = useState(false);
+  const [view, setView] = useState<"days" | "months">("days");
+  const [month, setMonth] = useState<Date>(initialMonth);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  // กดเมาส์ในช่องตอน "ยังไม่ได้อยู่ในโหมดพิมพ์" (โฟกัสใหม่ หรือโฟกัสค้างอยู่หลังกด Enter) — เลือกทั้งข้อความตอน
+  // mouseup ให้พิมพ์ทับได้ (เลือกตอน mousedown/focus ไม่ได้ผล: เบราว์เซอร์เคลียร์ทิ้งเมื่อปล่อยเมาส์ แล้วพิมพ์ต่อท้ายค่าเดิม)
+  // โฟกัสด้วย Tab ไม่มี mouseup เลือกได้ทันที
+  const pointerFocus = useRef(false);
+  // โฟกัสที่เราคืนให้ช่องเองหลังเลือกจากปฏิทิน — ห้ามเริ่ม "โหมดพิมพ์" ใหม่ (draft จะเป็นค่าเก่าก่อนยืนยัน)
+  const returningFocus = useRef(false);
+
+  const shown = editing ? draft : display;
+  const trimmed = draft.trim();
+  const preview = typing && editing && trimmed !== "" ? parse(draft) : null;
+  const unreadable = typing && editing && trimmed !== "" && preview === null;
+  const example = chips[1] ?? chips[0] ?? "15/3";
+
+  const shut = () => {
+    setOpen(false);
+    setShowSheet(false);
+    setView("days");
+    onClose?.();
+  };
+  const openCalendar = () => {
+    if (disabled) return;
+    if (!open) setMonth(preview?.month ?? initialMonth);
+    setOpen(true);
+  };
+  /** จบการพิมพ์: ข้อความใช้ได้และต่างจากเดิม = ยืนยัน · อ่านไม่ออก = คืนค่าเดิม */
+  const settle = () => {
+    if (editing && trimmed !== display.trim()) commit(draft);
+    markEditing(false);
+  };
+  const apply = () => {
+    if (!editing || trimmed === display.trim() || commit(draft)) {
+      markEditing(false);
+      shut();
+      selectSoon();
+    }
+  };
+  const refocusInput = () => {
+    returningFocus.current = true;
+    inputRef.current?.focus();
+    returningFocus.current = false;
+  };
+  /**
+   * ยืนยัน/ยกเลิกแล้วช่องยังโฟกัสอยู่ — เลือกข้อความรอไว้ ให้พิมพ์ครั้งต่อไปทับค่าเดิมเลย (ไม่ใช่ต่อท้าย)
+   * รอเฟรมถัดไปให้ช่องแสดงค่าใหม่ก่อน · ข้ามถ้าผู้ใช้เริ่มพิมพ์ไปแล้ว
+   */
+  const selectSoon = () => {
+    requestAnimationFrame(() => {
+      const el = inputRef.current;
+      if (el && document.activeElement === el && !editingRef.current) el.select();
+    });
+  };
+  /** คีย์บอร์ด: ลูกศรลงตอนปฏิทินเปิดอยู่ = ย้ายโฟกัสเข้าปฏิทิน (ลูกศร/Enter เลือกวันได้ตามปกติของ DayPicker) */
+  const focusCalendar = () => {
+    const popup = popupRef.current;
+    const day =
+      popup?.querySelector<HTMLElement>("button[data-day][tabindex='0']") ??
+      popup?.querySelector<HTMLElement>("button[data-day]:not([disabled])");
+    day?.focus();
+  };
+  const fill = (value: string) => {
+    markEditing(true);
+    setDraft(value);
+    const next = parse(value);
+    if (next) setMonth(next.month);
+    inputRef.current?.focus();
+  };
+
+  return (
+    <PopoverPrimitive.Root
+      open={open}
+      onOpenChange={(next, details) => {
+        if (next) return;
+        // คลิกในช่อง/ปุ่มปฏิทินของเราเองนับเป็น "outside press" ของ popover — ไม่ปิด (ไม่งั้นปิดแล้วเปิดกระพริบ)
+        const target = details.event?.target;
+        if (
+          details.reason === "outside-press" &&
+          target instanceof Node &&
+          wrapperRef.current?.contains(target)
+        ) {
+          details.cancel();
+          return;
+        }
+        settle();
+        shut();
+        // Escape ตอนโฟกัสอยู่ในปฏิทิน: คืนโฟกัสให้ช่อง ไม่ให้หลุดไป body
+        if (details.reason === "escape-key") refocusInput();
+      }}
+    >
+      <InputGroup
+        ref={wrapperRef}
+        className={className}
+        onKeyDownCapture={(event) => {
+          // Tab ออกจากช่อง = ปิดป๊อปอัป "ก่อน" เบราว์เซอร์ย้ายโฟกัส: ระหว่างเปิด Base UI วางตัวดักโฟกัส
+          // (<span tabindex=0>) ต่อท้ายช่อง ถ้ายังอยู่ Tab จะตกไปที่มันแล้วโฟกัสหลุดไป body ไม่ไปช่องถัดไป
+          // (ป๊อปอัปไม่มี animation ตอนปิดโดยตั้งใจ — Base UI รอ animation จบก่อนถอด ตัวดักจึงค้างอยู่ระหว่างนั้น)
+          if (event.key === "Tab" && !event.shiftKey && open) {
+            settle();
+            shut();
+          }
+        }}
+        onBlur={(event) => {
+          const next = event.relatedTarget;
+          if (
+            next instanceof Node &&
+            (wrapperRef.current?.contains(next) || popupRef.current?.contains(next))
+          )
+            return;
+          settle();
+          shut();
+        }}
+      >
+        <InputGroupInput
+          id={id}
+          ref={inputRef}
+          value={shown}
+          readOnly={!typing}
+          disabled={disabled}
+          placeholder={placeholder}
+          autoComplete="off"
+          role="combobox"
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-required={required || undefined}
+          aria-describedby={open && editing && trimmed !== "" ? previewId : undefined}
+          onMouseDown={() => {
+            pointerFocus.current = !editingRef.current;
+          }}
+          onMouseUp={(event) => {
+            if (!pointerFocus.current) return;
+            pointerFocus.current = false;
+            if (typing && !disabled) {
+              if (!editingRef.current) {
+                markEditing(true);
+                setDraft(display);
+              }
+              event.preventDefault();
+              inputRef.current?.select();
+            }
+          }}
+          onFocus={() => {
+            if (!typing || disabled || returningFocus.current) return;
+            if (!editingRef.current) {
+              markEditing(true);
+              setDraft(display);
+            }
+            // โฟกัสด้วย Tab = เลือกทั้งข้อความทันที (พิมพ์ทับได้เลย) · ด้วยเมาส์ เลือกตอน mouseup (ด้านบน)
+            // ไม่เปิดปฏิทินตอนโฟกัส — เปิดเมื่อพิมพ์/คลิก/กดลูกศรลง
+            if (!pointerFocus.current) inputRef.current?.select();
+          }}
+          onClick={openCalendar}
+          onChange={(event) => {
+            const value = event.target.value;
+            markEditing(true);
+            setDraft(value);
+            const next = parse(value);
+            if (next) setMonth(next.month);
+            setShowSheet(false);
+            setOpen(true);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              if (open) focusCalendar();
+              else openCalendar();
+            } else if (event.key === "Enter") {
+              // ยืนยันค่าที่พิมพ์ — ไม่ปล่อยให้ Enter ส่งฟอร์มแม่ระหว่างพิมพ์
+              if (editing && typing) {
+                event.preventDefault();
+                apply();
+              } else if (open) {
+                event.preventDefault();
+                shut();
+              }
+            } else if (event.key === "Escape" && (open || editing)) {
+              event.preventDefault();
+              event.stopPropagation();
+              markEditing(false);
+              shut();
+              selectSoon();
+            }
+          }}
+        />
+        <InputGroupAddon align="inline-start">
+          <InputGroupButton
+            type="button"
+            size="icon-xs"
+            disabled={disabled}
+            aria-label={text?.openCalendar ?? "เปิดปฏิทิน"}
+            aria-expanded={open}
+            onClick={() => {
+              if (open) {
+                settle();
+                shut();
+              } else {
+                openCalendar();
+                inputRef.current?.focus();
+              }
+            }}
+          >
+            <CalendarIcon />
+          </InputGroupButton>
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">
+          {editing && typing && preview && (
+            <kbd className="rounded border px-1 font-mono text-caption text-muted-foreground leading-4">
+              Enter
+            </kbd>
+          )}
+          {relative && !editing && (
+            <span className="whitespace-nowrap text-caption text-muted-foreground">
+              ({relative})
+            </span>
+          )}
+          {allowClear && display !== "" && !disabled && (
+            <InputGroupButton
+              type="button"
+              size="icon-xs"
+              aria-label={text?.clear ?? "ล้างวันที่"}
+              onClick={() => {
+                markEditing(false);
+                onClear();
+              }}
+            >
+              <X />
+            </InputGroupButton>
+          )}
+        </InputGroupAddon>
+      </InputGroup>
+
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Positioner
+          anchor={wrapperRef}
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          // พลิกได้เฉพาะบน↔ล่าง ห้ามข้ามไปวางข้างช่อง: ป๊อปอัปสูง ~400px ถ้าที่ว่างไม่พอทั้งบนและล่าง
+          // ค่าเริ่มต้นของ Base UI จะย้ายไปทางซ้าย ซึ่งไปทับเนื้อหาข้างช่อง (หน้าเลื่อนได้ ไม่ต้องบีบให้พอดีจอ)
+          collisionAvoidance={{ side: "flip", align: "shift", fallbackAxisSide: "none" }}
+          className="isolate z-50"
+        >
+          {/* ใช้ primitive ตรง ๆ ไม่ผ่าน PopoverContent ของ shadcn (ห้ามแก้ไฟล์นั้น): ต้องผูกกับช่องพิมพ์ด้วย `anchor`
+              และ `initialFocus={false}` ให้โฟกัสอยู่ที่ช่อง พิมพ์ต่อได้ตอนปฏิทินเปิด */}
+          <PopoverPrimitive.Popup
+            ref={popupRef}
+            data-slot="popover-content"
+            initialFocus={false}
+            finalFocus={false}
+            // กดในป๊อปอัปไม่ดึงโฟกัสออกจากช่องพิมพ์ (ยกเว้น <select> เดือน/ปี ที่ต้องรับโฟกัสถึงจะเปิดรายการ)
+            onMouseDown={(event) => {
+              if (!(event.target as Element).closest("select, option, input, textarea")) {
+                event.preventDefault();
+              }
+            }}
+            className="z-50 flex w-[306px] origin-(--transform-origin) flex-col gap-2 text-sm text-popover-foreground outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95"
+          >
+            {typing && trimmed !== "" && editing && (
+              <div id={previewId} role="status">
+                {preview ? (
+                  <button
+                    type="button"
+                    onClick={apply}
+                    className="flex w-full items-center gap-2 rounded-lg border border-success-border bg-success-subtle px-2.5 py-1.5 text-left text-body text-success-subtle-foreground shadow-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                  >
+                    <CheckIcon className="size-3.5 shrink-0" aria-hidden />
+                    <span className="min-w-0 flex-1 truncate font-semibold">{preview.label}</span>
+                  </button>
+                ) : (
+                  unreadable && (
+                    <p className="rounded-lg border border-destructive-border bg-destructive-subtle px-2.5 py-1.5 text-caption text-destructive-subtle-foreground shadow-sm">
+                      {(text?.cannotRead ?? "อ่านไม่ออก — ลองพิมพ์ {example}").replace(
+                        "{example}",
+                        example,
+                      )}
+                    </p>
+                  )
+                )}
+              </div>
+            )}
+
+            <div className="flex flex-col gap-2 rounded-xl bg-popover p-3 shadow-md ring-1 ring-foreground/10">
+              {showSheet ? (
+                <div className="flex flex-col gap-1.5">
+                  <div className="flex items-center justify-between font-semibold text-caption">
+                    {text?.allShortcuts ?? "พิมพ์ลัดทั้งหมด"}
+                    <span className="font-normal text-muted-foreground">
+                      {text?.tapToFill ?? "กดเพื่อเติมในช่อง"}
+                    </span>
+                  </div>
+                  {sheet.map((row) => (
+                    <div
+                      key={row.code}
+                      className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 text-caption"
+                    >
+                      <button
+                        type="button"
+                        onClick={() => {
+                          fill(row.code.split(" · ")[0] ?? row.code);
+                          setShowSheet(false);
+                        }}
+                        className="justify-self-start whitespace-nowrap rounded-md border bg-muted px-1.5 py-0.5 font-mono outline-none hover:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50"
+                      >
+                        {row.code}
+                      </button>
+                      <span className="text-muted-foreground">{row.text}</span>
+                    </div>
+                  ))}
+                </div>
+              ) : view === "months" ? (
+                <MonthGrid
+                  month={month}
+                  locale={locale}
+                  onPick={(next) => {
+                    setMonth(next);
+                    setView("days");
+                  }}
+                />
+              ) : (
+                <OpenMonthsContext.Provider value={() => setView("months")}>
+                  {children({
+                    month,
+                    setMonth,
+                    preview,
+                    close: () => {
+                      markEditing(false);
+                      shut();
+                      refocusInput();
+                      selectSoon();
+                    },
+                  })}
+                </OpenMonthsContext.Provider>
+              )}
+
+              {typing && (
+                <div className="flex flex-wrap items-center gap-1.5 border-t pt-2 text-caption text-muted-foreground">
+                  {showSheet ? (
+                    <button
+                      type="button"
+                      onClick={() => setShowSheet(false)}
+                      className="font-medium text-foreground outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                    >
+                      ‹ {text?.backToCalendar ?? "ปฏิทิน"}
+                    </button>
+                  ) : (
+                    <>
+                      <span className="whitespace-nowrap">{text?.shortcutsLabel ?? "พิมพ์ลัด"}</span>
+                      {chips.map((chip) => (
+                        <button
+                          key={chip}
+                          type="button"
+                          onClick={() => fill(chip)}
+                          className="whitespace-nowrap rounded-full border bg-background px-2 font-mono text-foreground outline-none hover:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50"
+                        >
+                          {chip}
+                        </button>
+                      ))}
+                      <button
+                        type="button"
+                        onClick={() => setShowSheet(true)}
+                        className="ms-auto whitespace-nowrap font-medium text-foreground outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                      >
+                        {text?.showAll ?? "ทั้งหมด"} ›
+                      </button>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          </PopoverPrimitive.Popup>
+        </PopoverPrimitive.Positioner>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}
+
+// ---------- วันเดียว ----------
+
 function SingleDatePicker({
   id,
   value,
@@ -266,149 +858,100 @@ function SingleDatePicker({
   locale,
   placeholder,
   disabled = false,
-  className,
   allowClear = true,
+  className,
   showSmartInput = true,
   showRelative = true,
 }: DatePickerSingleProps) {
   const text = useUiText().datePicker;
   const mounted = useMounted();
-  const [open, setOpen] = useState(false);
-  const [smartText, setSmartText] = useState("");
   // ไม่ควบคุม = มี defaultValue หรือไม่มีทั้ง value และ onChange (เช่นใช้แค่ name ในฟอร์ม)
   const controlled = value !== undefined || (defaultValue === undefined && onChange !== undefined);
   const [own, setOwn] = useState<Date | null>(() => toDate(defaultValue) ?? null);
-
   const selectedDate = controlled ? toDate(value) : (own ?? undefined);
-  const isValidDate = selectedDate !== undefined;
-
-  const parsedSmartDate = useMemo(() => parseSmartDateInput(smartText), [smartText]);
 
   const change = (date: Date | null) => {
     if (!controlled) setOwn(date);
     onChange?.(date);
   };
 
-  const handleSelectDate = (date: Date | undefined) => {
-    change(date ?? null);
-    setOpen(false);
-    setSmartText("");
+  const parse = (input: string): SinglePreview | null => {
+    const date = parseSmartDateInput(input);
+    if (!date) return null;
+    return {
+      date,
+      month: date,
+      label: `${weekdayShort(date, locale)} ${formatDate(date, locale)} · ${formatRelative(date, locale)}`,
+    };
   };
 
-  const handleSmartSubmit = () => {
-    if (parsedSmartDate) {
-      change(parsedSmartDate);
-      setOpen(false);
-      setSmartText("");
-    }
-  };
-
-  const displayMonth = parsedSmartDate || selectedDate;
-  // ปฏิทินใช้ locale เดียวกับช่อง (ชื่อเดือน/วัน/ปี) — ไม่ส่ง locale = ค่าเดิมของ Calendar
-  const calendarFormatters = locale
-    ? {
-        formatMonthDropdown: (d: Date) => d.toLocaleString(locale, { month: "short" }),
-        formatYearDropdown: (d: Date) => d.toLocaleString(locale, { year: "numeric" }),
-        formatWeekdayName: (d: Date) => d.toLocaleString(locale, { weekday: "narrow" }),
-        formatCaption: (d: Date) => d.toLocaleString(locale, { month: "long", year: "numeric" }),
-      }
-    : undefined;
+  const sheet = [
+    { code: "15/3", text: text?.helpDate ?? "15 มี.ค. ปีนี้ (ไม่ใส่ปี = ปีปัจจุบัน)" },
+    { code: "15/3/69 · 15/3/2026", text: text?.helpYear ?? "ใส่ปี พ.ศ. หรือ ค.ศ. ได้ (2 หรือ 4 หลัก)" },
+    { code: "t", text: text?.helpToday ?? "วันนี้" },
+    { code: "t+3 · t-2", text: text?.helpDays ?? "อีก 3 วัน · 2 วันก่อน (d = วัน)" },
+    { code: "t+2w · t+1m · t+1y", text: text?.helpUnits ?? "สัปดาห์ · เดือน · ปี" },
+  ];
 
   return (
     <>
-      <Popover
-        open={open}
-        onOpenChange={(o) => {
-          setOpen(o);
-          if (!o) setSmartText("");
+      <DateFieldShell<SinglePreview>
+        id={id}
+        locale={locale}
+        disabled={disabled}
+        className={className}
+        required={required}
+        typing={showSmartInput}
+        placeholder={
+          placeholder ??
+          (showSmartInput
+            ? (text?.smartPlaceholder ?? "เช่น 15/3, t+3, t+1m")
+            : (text?.placeholder ?? "เลือกวันที่"))
+        }
+        display={selectedDate ? formatDate(selectedDate, locale) : ""}
+        // วันที่สัมพัทธ์ขึ้นกับ "วันนี้" ของเครื่องผู้ใช้ — แสดงหลัง mount กัน hydration mismatch
+        relative={
+          showRelative && mounted && selectedDate ? formatRelative(selectedDate, locale) : null
+        }
+        allowClear={allowClear}
+        onClear={() => change(null)}
+        initialMonth={selectedDate ?? new Date()}
+        parse={parse}
+        commit={(input) => {
+          if (input.trim() === "") {
+            if (!allowClear) return false;
+            change(null);
+            return true;
+          }
+          const next = parse(input);
+          if (!next) return false;
+          change(next.date);
+          return true;
         }}
+        chips={["t", "t+3", "t+1m", "15/3"]}
+        sheet={sheet}
       >
-        <PopoverTrigger
-          render={
-            <Button
-              id={id}
-              variant="outline"
-              disabled={disabled}
-              aria-required={required || undefined}
-              className={cn(
-                "h-8 w-full justify-between bg-background pr-2 pl-3 text-left font-normal text-xs",
-                !isValidDate && "text-muted-foreground",
-                className,
-              )}
-            />
-          }
-        >
-          <div className="flex items-center gap-2 truncate">
-            <CalendarIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            <span className="truncate">
-              {isValidDate ? (
-                <>
-                  <span className="font-medium text-foreground">
-                    {formatDate(selectedDate, locale)}
-                  </span>
-                  {/* วันที่สัมพัทธ์ขึ้นกับ "วันนี้" ของเครื่องผู้ใช้ — แสดงหลัง mount กัน hydration mismatch */}
-                  {showRelative && mounted && (
-                    <span className="ml-1 text-muted-foreground text-xs">
-                      ({formatRelative(selectedDate, locale)})
-                    </span>
-                  )}
-                </>
-              ) : (
-                <span>{placeholder ?? text?.placeholder ?? "เลือกวันที่"}</span>
-              )}
-            </span>
-          </div>
-          {allowClear && isValidDate && !disabled && (
-            <span
-              role="button"
-              tabIndex={0}
-              aria-label={text?.clear ?? "ล้างวันที่"}
-              className="ml-1 cursor-pointer rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-              onClick={(e) => {
-                e.stopPropagation();
-                change(null);
-              }}
-              onKeyDown={(e) => {
-                if (e.key !== "Enter" && e.key !== " ") return;
-                e.preventDefault();
-                e.stopPropagation();
-                change(null);
-              }}
-            >
-              <X className="h-3.5 w-3.5" />
-            </span>
-          )}
-        </PopoverTrigger>
-        {/* กว้างพอดีปฏิทิน: ช่องวันที่ 40px × 7 + p-3 + ขอบ (เดิมกล่อง 320–340px แต่ช่อง 28px → ว่างซ้ายขวามาก) */}
-        <PopoverContent className="w-[306px] border bg-background p-3 shadow-xl" align="start">
-          {showSmartInput && (
-            <SmartInput
-              value={smartText}
-              onChange={setSmartText}
-              onSubmit={handleSmartSubmit}
-              preview={parsedSmartDate ? formatDate(parsedSmartDate, locale) : null}
-              placeholder={text?.smartPlaceholder ?? "เช่น 15/3, t+3, t+1m"}
-              range={false}
-            />
-          )}
-
-          {/* Visual DayPicker Calendar */}
-          <div className="flex w-full justify-center">
-            <Calendar
-              mode="single"
-              selected={selectedDate}
-              onSelect={handleSelectDate}
-              disabled={disabled}
-              captionLayout="dropdown"
-              startMonth={new Date(1990, 0)}
-              endMonth={new Date(2040, 11)}
-              defaultMonth={displayMonth}
-              formatters={calendarFormatters}
-              className="p-0 [--cell-size:--spacing(10)]"
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
+        {(api) => (
+          <Calendar
+            mode="single"
+            // ข้อความที่พิมพ์อยู่ไฮไลต์ในปฏิทินทันที — คลิกวันที่ไฮไลต์อยู่ = ยืนยันวันนั้น (ไม่ใช่ล้างค่าแบบ toggle)
+            selected={api.preview?.date ?? selectedDate}
+            onSelect={(date) => {
+              change(date ?? api.preview?.date ?? selectedDate ?? null);
+              api.close();
+            }}
+            month={api.month}
+            onMonthChange={api.setMonth}
+            disabled={disabled}
+            captionLayout="label"
+            startMonth={new Date(1990, 0)}
+            endMonth={new Date(2040, 11)}
+            formatters={calendarFormatters(locale)}
+            components={{ DayButton: FocusableDayButton, CaptionLabel: CaptionButton }}
+            className="p-0 [--cell-size:--spacing(10)]"
+          />
+        )}
+      </DateFieldShell>
       {name !== undefined && (
         <FormValue
           name={name}
@@ -421,6 +964,8 @@ function SingleDatePicker({
   );
 }
 
+// ---------- ช่วงวันที่ ----------
+
 /** "1 – 5 ก.ค. 2569" / "1–5 Jul 2026" — ใช้ formatRange ของ Intl (ย่อเดือน/ปีที่ซ้ำให้เอง) */
 function formatRange(range: DatePickerRange, locale: string | undefined): string {
   const fmt = new Intl.DateTimeFormat(locale ?? "th-TH", {
@@ -453,139 +998,117 @@ function RangeDatePicker({
   showSmartInput = true,
 }: DatePickerRangeProps) {
   const text = useUiText().datePicker;
-  const [open, setOpen] = useState(false);
-  const [smartText, setSmartText] = useState("");
   const controlled = value !== undefined || (defaultValue === undefined && onChange !== undefined);
   const [own, setOwn] = useState<DatePickerRange | null>(() => toRange(defaultValue) ?? null);
   // ระหว่างคลิกเลือก: คลิกแรก = วันเริ่ม (ยังไม่ปิด) คลิกที่สอง = วันสุดท้าย แล้วปิด
   const [start, setStart] = useState<Date | null>(null);
-
   const selected = controlled ? toRange(value) : (own ?? undefined);
-  const parsed = useMemo(() => parseSmartDateRange(smartText), [smartText]);
 
-  const close = () => {
-    setOpen(false);
-    setSmartText("");
-    setStart(null);
-  };
   const change = (range: DatePickerRange | null) => {
     if (!controlled) setOwn(range);
     onChange?.(range);
   };
-  const commit = (range: DatePickerRange | null) => {
-    change(range);
-    close();
+
+  const parse = (input: string): RangePreview | null => {
+    // พิมพ์วันเดียว ("t", "15/3") ในช่องช่วง = ช่วงหนึ่งวัน
+    const range =
+      parseSmartDateRange(input) ??
+      (() => {
+        const day = parseSmartDateInput(input);
+        return day ? { from: day, to: day } : null;
+      })();
+    if (!range) return null;
+    const days = differenceInCalendarDays(range.to, range.from) + 1;
+    return {
+      range,
+      month: range.from,
+      label:
+        days === 1
+          ? `${weekdayShort(range.from, locale)} ${formatDate(range.from, locale)}`
+          : `${formatRange(range, locale)} · ${(text?.dayCount ?? "{count} วัน").replace("{count}", String(days))}`,
+    };
   };
 
-  const calendarFormatters = locale
-    ? {
-        formatMonthDropdown: (d: Date) => d.toLocaleString(locale, { month: "short" }),
-        formatYearDropdown: (d: Date) => d.toLocaleString(locale, { year: "numeric" }),
-        formatWeekdayName: (d: Date) => d.toLocaleString(locale, { weekday: "narrow" }),
-        formatCaption: (d: Date) => d.toLocaleString(locale, { month: "long", year: "numeric" }),
-      }
-    : undefined;
-  const calendarSelected = start ? { from: start, to: undefined } : selected;
+  const sheet = [
+    { code: "t-7..t", text: text?.helpRangeShortcut ?? "ช่วงจากตัวย่อ (คั่นด้วย .. ~ ถึง to)" },
+    { code: "1/7-5/7 · 1-5/7", text: text?.helpRange ?? "1–5 ก.ค." },
+    { code: "15/3", text: text?.helpDate ?? "15 มี.ค. ปีนี้ (ไม่ใส่ปี = ปีปัจจุบัน)" },
+    { code: "t+3 · t-2", text: text?.helpDays ?? "อีก 3 วัน · 2 วันก่อน (d = วัน)" },
+    { code: "t+2w · t+1m · t+1y", text: text?.helpUnits ?? "สัปดาห์ · เดือน · ปี" },
+  ];
 
   return (
     <>
-      <Popover
-        open={open}
-        onOpenChange={(o) => {
-          if (o) setOpen(true);
-          else close();
+      <DateFieldShell<RangePreview>
+        id={id}
+        locale={locale}
+        disabled={disabled}
+        className={className}
+        required={required}
+        typing={showSmartInput}
+        placeholder={
+          placeholder ??
+          (showSmartInput
+            ? (text?.rangeSmartPlaceholder ?? "เช่น 1/7-5/7, t-7..t")
+            : (text?.rangePlaceholder ?? "เลือกช่วงวันที่"))
+        }
+        display={selected ? formatRange(selected, locale) : ""}
+        relative={null}
+        allowClear={allowClear}
+        onClear={() => change(null)}
+        initialMonth={selected?.from ?? new Date()}
+        parse={parse}
+        commit={(input) => {
+          if (input.trim() === "") {
+            if (!allowClear) return false;
+            change(null);
+            return true;
+          }
+          const next = parse(input);
+          if (!next) return false;
+          change(next.range);
+          return true;
         }}
+        chips={["t-7..t", "1/7-5/7", "t ~ t+1m"]}
+        sheet={sheet}
+        onClose={() => setStart(null)}
       >
-        <PopoverTrigger
-          render={
-            <Button
-              id={id}
-              variant="outline"
-              disabled={disabled}
-              aria-required={required || undefined}
-              className={cn(
-                "h-8 w-full justify-between bg-background pr-2 pl-3 text-left font-normal text-xs",
-                !selected && "text-muted-foreground",
-                className,
-              )}
-            />
-          }
-        >
-          <div className="flex items-center gap-2 truncate">
-            <CalendarIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            <span className="truncate">
-              {selected ? (
-                <span className="font-medium text-foreground">{formatRange(selected, locale)}</span>
-              ) : (
-                <span>{placeholder ?? text?.rangePlaceholder ?? "เลือกช่วงวันที่"}</span>
-              )}
-            </span>
-          </div>
-          {allowClear && selected && !disabled && (
-            <span
-              role="button"
-              tabIndex={0}
-              aria-label={text?.clear ?? "ล้างวันที่"}
-              className="ml-1 cursor-pointer rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-              onClick={(e) => {
-                e.stopPropagation();
-                change(null);
-              }}
-              onKeyDown={(e) => {
-                if (e.key !== "Enter" && e.key !== " ") return;
-                e.preventDefault();
-                e.stopPropagation();
-                change(null);
-              }}
-            >
-              <X className="h-3.5 w-3.5" />
-            </span>
-          )}
-        </PopoverTrigger>
-        <PopoverContent className="w-[306px] border bg-background p-3 shadow-xl" align="start">
-          {showSmartInput && (
-            <SmartInput
-              value={smartText}
-              onChange={setSmartText}
-              onSubmit={() => parsed && commit(parsed)}
-              preview={parsed ? formatRange(parsed, locale) : null}
-              placeholder={text?.rangeSmartPlaceholder ?? "เช่น 1/7-5/7, t-7..t"}
-              range
-            />
-          )}
-
-          <div className="flex w-full justify-center">
+        {(api) => (
+          <>
             <Calendar
               mode="range"
-              selected={calendarSelected}
+              selected={start ? { from: start, to: undefined } : (api.preview?.range ?? selected)}
               onSelect={(_range, day) => {
                 // คุมสองคลิกเอง: react-day-picker คลิกแรกให้ from = to (ช่วงหนึ่งวัน) จึงแยกคลิกแรกไม่ออก
                 if (!start) {
                   setStart(day);
                   return;
                 }
-                commit(
+                change(
                   day.getTime() < start.getTime()
                     ? { from: day, to: start }
                     : { from: start, to: day },
                 );
+                api.close();
               }}
+              month={api.month}
+              onMonthChange={api.setMonth}
               disabled={disabled}
-              captionLayout="dropdown"
+              captionLayout="label"
               startMonth={new Date(1990, 0)}
               endMonth={new Date(2040, 11)}
-              defaultMonth={parsed?.from ?? start ?? selected?.from}
-              formatters={calendarFormatters}
+              formatters={calendarFormatters(locale)}
+              components={{ DayButton: FocusableDayButton, CaptionLabel: CaptionButton }}
               className="p-0 [--cell-size:--spacing(10)]"
             />
-          </div>
-          {start && (
-            <p className="mt-2 text-center text-muted-foreground text-xs">
-              {text?.pickEnd ?? "เลือกวันสุดท้ายของช่วง"}
-            </p>
-          )}
-        </PopoverContent>
-      </Popover>
+            {start && (
+              <p className="text-center text-caption text-muted-foreground">
+                {text?.pickEnd ?? "เลือกวันสุดท้ายของช่วง"}
+              </p>
+            )}
+          </>
+        )}
+      </DateFieldShell>
       {name !== undefined && (
         <>
           <FormValue
@@ -605,95 +1128,3 @@ function RangeDatePicker({
     </>
   );
 }
-
-/**
- * ช่องพิมพ์วันที่ + ปุ่ม (i) เปิดวิธีพิมพ์ — คำอธิบายแสดงในกล่องเดียวกัน (ไม่ใช่ tooltip: popup ซ้อน popup
- * และจอสัมผัสเปิด tooltip ไม่ได้)
- */
-function SmartInput({
-  value,
-  onChange,
-  onSubmit,
-  preview,
-  placeholder,
-  range,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  onSubmit: () => void;
-  preview: string | null;
-  placeholder: string;
-  range: boolean;
-}) {
-  const text = useUiText().datePicker;
-  const [help, setHelp] = useState(false);
-  const rows: Array<[string, string]> = [
-    ["15/3", text?.helpDate ?? "15 มี.ค. ปีนี้ (ไม่ใส่ปี = ปีปัจจุบัน)"],
-    ["15/3/69 · 15/3/2026", text?.helpYear ?? "ใส่ปี พ.ศ. หรือ ค.ศ. ได้ (2 หรือ 4 หลัก)"],
-    ["t", text?.helpToday ?? "วันนี้"],
-    ["t+3 · t-2", text?.helpDays ?? "อีก 3 วัน · 2 วันก่อน (d = วัน)"],
-    ["t+2w · t+1m · t+1y", text?.helpUnits ?? "สัปดาห์ · เดือน · ปี"],
-    ...(range
-      ? ([
-          ["1/7-5/7 · 1-5/7", text?.helpRange ?? "1–5 ก.ค."],
-          ["t-7..t · t ~ t+1m", text?.helpRangeShortcut ?? "ช่วงจากตัวย่อ (คั่นด้วย .. ~ ถึง to)"],
-        ] as Array<[string, string]>)
-      : []),
-  ];
-  return (
-    <div className="mb-3 flex flex-col gap-1.5 border-b pb-2.5">
-      <InputGroup className="h-8">
-        <InputGroupInput
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") {
-              event.preventDefault();
-              event.stopPropagation();
-              onSubmit();
-            }
-          }}
-          placeholder={placeholder}
-          className="h-8 text-xs"
-        />
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            type="button"
-            size="icon-xs"
-            aria-label={text?.help ?? "วิธีพิมพ์วันที่"}
-            aria-expanded={help}
-            onClick={() => setHelp((v) => !v)}
-            className={help ? "text-foreground" : "text-muted-foreground"}
-          >
-            <InfoIcon />
-          </InputGroupButton>
-          <InputGroupButton
-            type="button"
-            variant="default"
-            size="xs"
-            onClick={onSubmit}
-            disabled={!preview}
-          >
-            {text?.apply ?? "ตกลง"}
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-      {preview && (
-        <span className="flex items-center gap-1 font-medium text-success text-xs">
-          <Check className="size-3" />
-          {preview}
-        </span>
-      )}
-      {help && (
-        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md bg-muted/60 p-2 text-xs">
-          {rows.map(([example, meaning]) => (
-            <div key={example} className="contents">
-              <dt className="font-mono text-foreground">{example}</dt>
-              <dd className="text-muted-foreground">{meaning}</dd>
-            </div>
-          ))}
-        </dl>
-      )}
-    </div>
-  );
-}