@suphark/ui 0.38.0 → 0.40.1

package/CHANGELOG.md

@@ -2,7 +2,57 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
-## [0.38.0] — 2026-10-07
+## [0.40.1] — 2026-10-07
+
+### Fixed
+
+- `DatePicker`: ปฏิทินใน popup มีที่ว่างซ้ายขวามาก (เจ้าของแจ้ง) — กล่องกว้างตายตัว 320–340px แต่ช่องวันที่ 28px ปฏิทินจึงกว้างแค่ ~200px · ตอนนี้ช่องวันที่ 40px (กดง่ายขึ้นด้วย) และกล่องกว้างพอดีปฏิทิน 306px (commit แรกหลุด format ของ biome — แก้ในรุ่นเดียวกัน)
+
+## [0.40.0] — 2026-10-07
+
+> ประกาศพร้อม publish แล้ว แต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.40.1
+
+
+### Added
+
+- **`DatePicker` ใช้ในฟอร์มและหลายภาษาได้** (ขอจาก Pi Auth — `<input type="date">` แสดง "10/02/2027" อ่านได้ทั้ง 2 ต.ค. และ 10 ก.พ.):
+  - `locale` (BCP 47): แสดงผ่าน Intl `{ day, month: "short", year }` ทั้งในช่อง ปฏิทิน และวันที่สัมพัทธ์ — `"en-GB"` = "2 Oct 2027", `"en"` = "Oct 2, 2027", `"th"` = "2 ต.ค. 2570" · ไม่ส่ง = รูปแบบไทยเดิม
+  - `name` (+ `defaultValue` แบบไม่ควบคุม, `value`/`onChange` ไม่บังคับแล้ว): ส่ง `YYYY-MM-DD` ตามวันที่ local ไปกับ FormData ของ `<form action>` · `required` ทำงานกับการตรวจของเบราว์เซอร์และตาข่ายฟอร์ม (ชื่อช่องจาก `LabeledField`)
+  - `showRelative` (ค่าเริ่มต้น true) · `toDateInputValue(date)` export ให้ใช้เอง · type `DatePickerProps`
+  - `UiText.datePicker` (placeholder, ทางลัด, ปุ่ม) ไทย/อังกฤษในตัว
+
+### Changed
+
+- `DatePicker` ย้ายไป `components/shared/date/date-picker.tsx` — ไม่ได้มาจาก shadcn CLI (registry ของ base-nova ไม่มี date-picker) แต่ยกมาจาก supplychain; `components/ui/date-picker` ยัง re-export ให้ import path เดิมใช้ได้
+- ข้อความเดิมที่ฝังไว้ย้ายไป UiText: placeholder ค่าเริ่มต้นจาก "เลือกวันที่อ้างอิงราคา..." (ของ supplychain) เป็น "เลือกวันที่", ทางลัดเป็นภาษาไทย ("วันนี้", "+1 สัปดาห์" …) แทนอังกฤษปนไทย, หัวข้อ "Quick Preset" → "ทางลัด"
+- สีดิบ (slate/emerald) → semantic token · ปุ่ม "ตกลง" ของช่องพิมพ์วันที่เป็น `type="button"` (เดิม submit — ส่งฟอร์มแม่ได้ถ้าไม่ได้กด Enter) · ปุ่มล้างมี `aria-label` และกดด้วยคีย์บอร์ดได้
+
+### Fixed
+
+- `value="YYYY-MM-DD"` อ่านเป็น UTC แล้วเลื่อนวันในโซนเวลาตะวันตก → อ่านเป็นวันที่ local
+- วันที่สัมพัทธ์ ("(พรุ่งนี้)") แสดงหลัง mount — ขึ้นกับวันของเครื่องผู้ใช้ จึง hydration mismatch ได้ข้ามวัน/โซนเวลา (ค้างใน todo)
+- showcase: `/components/date-picker` เพิ่มตัวอย่างในฟอร์ม server action (`name` + `locale="en-GB"` + `required`)
+
+
+### Added
+
+- **`SortableProvider freeLayout` — ชั้นบนสุดจัดได้อิสระ** (เจ้าของแจ้งว่าเดิม "ล็อก" ให้รายการไม่มีกลุ่มอยู่บนเสมอ กลุ่มอยู่ล่างเสมอ): กลุ่มกับรายการไม่มีกลุ่มสลับที่กันได้ทุกแบบ — กลุ่มขึ้นไปเหนือรายการ, รายการไปอยู่ระหว่างกลุ่ม, เอารายการออกจากกลุ่มไปวางก่อนกลุ่มไหนก็ได้ · หัวกลุ่ม: **ครึ่งบน = วางก่อนกลุ่ม, ครึ่งล่าง = เข้ากลุ่มเป็นตัวแรก** · ระหว่างลากทุกอย่างในชั้นบนสุดเลื่อนหลบเป็นก้อน (กลุ่ม = หัว + รายการ) · โซนท้ายตาราง = วางท้ายสุด · ไม่เปิด = แบบเดิม (แอปที่ยังเรนเดอร์รายการไม่มีกลุ่มก่อนไม่เปลี่ยนพฤติกรรม)
+- `SortableOrder.root` (optional) + `rootEntries(order)` (ลำดับชั้นบนสุดสำหรับวนเรนเดอร์), `moveRootEntry`, `moveItemToRoot`, type `SortableRootEntry` · `sortableOrderToPayload(order).root` + `sortableOrderOf(..., { root })` สำหรับบันทึก/โหลด — `groups` / `items[UNGROUPED]` ยังตรงกับ root เสมอ (payload เดิมใช้ต่อได้)
+- showcase: `/components/sortable-list` เปิด `freeLayout` และเรนเดอร์ตาม `rootEntries`
+
+### Fixed
+
+- (จาก 0.38.1 ที่ไม่ได้ขึ้น npm แยก) ลากรายการเข้ากลุ่มแล้ววางเป็นรายการแรกไม่ได้ — ดูด้านล่าง
+- โซน "ท้ายตาราง" (`useSortableDropZone(UNGROUPED)`) ถูก collision เปลี่ยนเป้าหมายเป็นรายการไม่มีกลุ่มตัวแรก → วางแล้วไปโผล่บนสุดแทนท้ายสุด
+
+## [0.38.1] — 2026-10-07
+
+> ประกาศพร้อม publish แล้ว แต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.39.0
+
+### Fixed
+
+- **`@suphark/ui/sortable` ลากรายการเข้ากลุ่มแล้ววางเป็นรายการแรกไม่ได้** (เจ้าของแจ้ง): ระหว่างลากขึ้นเป็นตัวแรกถูก แต่พอปล่อยกลับไปเป็นตัวที่สอง — ตอนชี้หัวกลุ่ม collision เลือก "รายการที่ใกล้ที่สุดที่ไม่ใช่ตัวที่ลาก" (= ตัวแรกเดิม) แล้ว `onDragEnd` ย้ายไปแทนที่ตัวนั้น · ตอนนี้ชี้หัวกลุ่ม = รายการแรกที่แสดงอยู่ **รวมตัวที่ลากเอง** · ยืนยันบน demo: ลากจากนอกกลุ่ม / จากกลุ่มอื่น / จากท้ายกลุ่มเดียวกันขึ้นหัวกลุ่ม → เป็นตัวแรกทุกกรณี, วางครึ่งล่างของแถวยังไปอยู่ "หลัง" แถวนั้นตามเดิม (ทำซ้ำบน production v0.38.0 ได้ก่อนแก้)
+
 
 ### Fixed
 

package/README.md

@@ -235,6 +235,7 @@ const [order, setOrder] = useState(() =>
 - `onCommit` ล้มเหลว (throw หรือ `{ ok: false, error }`) = คืนลำดับเดิม + toast; ถ้าอยากจัดการ error เองใส่ `onCommitError`
 - การ์ดลอยตามเมาส์: `renderOverlay={(drag) => drag.kind === "item" ? <ItemCard id={drag.id} /> : <GroupCard id={drag.id} />}` (วาดใน portal จึงเป็น `div` ได้ ไม่ต้องเป็น `<tr>`) — ไม่ใส่ = แถวขยับเองแบบเดิม · โฟลเดอร์ที่ย่ออยู่: `useSortableDropZone(id, { onDwell: collapsed ? open : undefined })` ลากค้าง 600ms แล้วเปิดให้ · วางบนหัวกลุ่ม = ขึ้นบนสุดของกลุ่ม, วางบนโซนของ `UNGROUPED` = ต่อท้าย
 - เลือกหลายรายการแล้วลากพร้อมกัน: `SortableProvider multiSelect` แล้วกระจาย `row.selectProps` ลงแถว (ทำสีด้วย `data-[selected]:bg-primary/10`) — ⌘/Ctrl+คลิก, Shift+คลิก, ที่จับกด `x` / ⌘/Ctrl+A, Esc ล้าง · แถบนับใช้ `SelectionBar` + `useSortableState().selected/clearSelection` · `renderOverlay` ได้ `drag.ids` ไว้ทำการ์ดซ้อน
+- จัดชั้นบนสุดอิสระ (กลุ่มกับรายการไม่มีกลุ่มสลับกันได้): `SortableProvider freeLayout` + เรนเดอร์ตาม `rootEntries(order)` (ครอบทั้งหมดด้วย `<SortableGroup itemIds={order.items[UNGROUPED]}>` แล้วแต่ละกลุ่มมี `SortableGroup` ของตัวเองข้างใน) + บันทึก `payload.root` และส่งกลับ `sortableOrderOf(..., { root })` ตอนโหลด · หัวกลุ่มครึ่งบน = ก่อนกลุ่ม, ครึ่งล่าง = เข้ากลุ่ม
 - `sortableOrderToPayload(order)` คืน `{ groups, items }` — `groups` คือลำดับของกลุ่ม, `items` คือรายการในแต่ละกลุ่มเรียงตามนั้น (ของที่ยังไม่มีกลุ่มมาก่อนด้วย `groupId: null`)
 - `SortableProvider disabled` (เช่นระหว่างกรอง ซึ่งลำดับที่เห็นไม่ใช่ลำดับจริง) ทำให้ `DragHandle` จางลงและกดไม่ได้ — ไม่อยากให้เห็นเลยใส่ `hideWhenDisabled`
 - ข้อความ screen reader: ใส่ `announcements`/`screenReaderInstructions` เป็น prop (callback ได้ `{ id, kind, groupId, index, total }`) หรือปล่อยให้ใช้แม่แบบจาก `UiText.sortable`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.38.0",
+  "version": "0.40.1",
   "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/design-system/sections/showcase-forms.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from "@suphark/ui/components/shared/button/button";
 import { Combobox } from "@suphark/ui/components/shared/combobox";
+import { DatePicker } from "@suphark/ui/components/shared/date/date-picker";
 import { MultiSelectCombobox } from "@suphark/ui/components/shared/multi-select-combobox";
 import { Badge } from "@suphark/ui/components/ui/badge";
 import {
@@ -11,7 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@suphark/ui/components/ui/card";
-import { DatePicker } from "@suphark/ui/components/ui/date-picker";
 import {
   Field,
   FieldDescription,

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

@@ -0,0 +1,377 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Calendar } 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 { formatRelativeThaiDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
+import { cn } from "@suphark/ui/lib/utils";
+import { addDays, addMonths, addWeeks, subDays, subMonths, subWeeks } from "date-fns";
+import { CalendarIcon, Check, Clock, X } from "lucide-react";
+import { useMemo, useState } from "react";
+
+/**
+ * Smart date parser supporting intuitive Thai & international date inputs:
+ * - "1/7" -> 1 July of current year
+ * - "1/7/25" -> 1 July 2025 CE
+ * - "1/7/68" -> 1 July 2025 CE (BE 2568)
+ * - "1/7/2568" -> 1 July 2025 CE (BE 2568)
+ */
+export function parseSmartDateInput(input: string): Date | null {
+  if (!input?.trim()) return null;
+  const clean = input.trim().replace(/\s+/g, "");
+
+  const parts = clean.split(/[/\-.]/);
+  if (parts.length < 2 || parts.length > 3) return null;
+
+  const day = parseInt(parts[0] ?? "", 10);
+  const month = parseInt(parts[1] ?? "", 10);
+  if (Number.isNaN(day) || Number.isNaN(month) || day < 1 || day > 31 || month < 1 || month > 12) {
+    return null;
+  }
+
+  const currentYear = new Date().getFullYear();
+  let year = currentYear;
+
+  if (parts.length === 3 && parts[2]) {
+    const rawYear = parseInt(parts[2], 10);
+    if (Number.isNaN(rawYear)) return null;
+
+    if (rawYear > 2400) {
+      // Full Buddhist Era year (e.g. 2568 -> 2025 CE)
+      year = rawYear - 543;
+    } else if (rawYear >= 50 && rawYear < 100) {
+      // Short BE year (e.g. 68 -> 2568 -> 2025 CE)
+      year = 2500 + rawYear - 543;
+    } else if (rawYear < 50) {
+      // Short AD year (e.g. 25 -> 2025 CE)
+      year = 2000 + rawYear;
+    } else {
+      year = rawYear;
+    }
+  }
+
+  const d = new Date(year, month - 1, day);
+  if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {
+    return d;
+  }
+
+  return null;
+}
+
+type DateInput = Date | string | number | null | undefined;
+
+/**
+ * แปลงค่าที่รับมาเป็น Date — `"YYYY-MM-DD"` อ่านเป็นวันที่ local
+ * (`new Date("2027-10-02")` อ่านเป็น UTC เที่ยงคืน → ฝั่งตะวันตกของ UTC กลายเป็นวันก่อนหน้า)
+ */
+function toDate(value: DateInput): Date | undefined {
+  if (value === null || value === undefined || value === "") return undefined;
+  if (typeof value === "string") {
+    const ymd = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+    if (ymd) return new Date(Number(ymd[1]), Number(ymd[2]) - 1, Number(ymd[3]));
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+/** `YYYY-MM-DD` ตามวันที่ local (ไม่ใช่ toISOString ที่เลื่อนวันตาม timezone) — ค่าที่ส่งในฟอร์ม */
+export function toDateInputValue(date: Date | null | undefined): string {
+  if (!date) return "";
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+/** "2 Oct 2027" / "2 ต.ค. 2570" ตาม locale — ไม่ส่ง locale = รูปแบบไทยเดิม (เดือนย่อ + พ.ศ.) */
+function formatDate(date: Date, locale: string | undefined): string {
+  if (!locale) return formatThaiFullDate(date);
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  }).format(date);
+}
+
+/** "พรุ่งนี้" / "in 3 days" — นับเป็นวันตามปฏิทิน */
+function formatRelative(date: Date, locale: string | undefined): string {
+  if (!locale) return formatRelativeThaiDate(date);
+  const startOf = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const days = Math.round((startOf(date) - startOf(new Date())) / 86_400_000);
+  return new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(days, "day");
+}
+
+export interface DatePickerProps {
+  id?: string;
+  /** ควบคุมจากภายนอก (`"YYYY-MM-DD"` อ่านเป็นวันที่ local) — ใช้แบบไม่ควบคุมให้ส่ง `defaultValue` แทน */
+  value?: DateInput;
+  /** ค่าเริ่มต้นแบบไม่ควบคุม (ใช้คู่ `name` ใน `<form action>`) — `null` = เริ่มว่าง */
+  defaultValue?: DateInput;
+  onChange?: (date: Date | null) => void;
+  /**
+   * ชื่อฟิลด์ในฟอร์ม — ส่งค่า `YYYY-MM-DD` (วันที่ local) ไปกับ FormData ของ `<form action>`/server action
+   * ว่าง = ส่ง `""`
+   */
+  name?: string;
+  /** ต้องเลือกวันที่ก่อนส่งฟอร์ม — ไม่เลือกแล้วกดส่ง เบราว์เซอร์บล็อกและตาข่ายฟอร์มบอกชื่อช่องให้ */
+  required?: boolean;
+  /**
+   * ภาษาของวันที่ (BCP 47 เช่น "en", "th") — แสดงแบบ "2 Oct 2027" / "2 ต.ค. 2570" ทั้งในช่อง ปฏิทิน และวันที่สัมพัทธ์
+   * ไม่ส่ง = รูปแบบไทยเดิม · ข้อความอื่นมาจาก `UiText.datePicker`
+   */
+  locale?: string;
+  /** ไม่ส่ง = `UiText.datePicker.placeholder` */
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  allowClear?: boolean;
+  showPresets?: boolean;
+  showSmartInput?: boolean;
+  /** แสดงวันที่สัมพัทธ์ต่อท้าย เช่น "(พรุ่งนี้)" — ค่าเริ่มต้น true */
+  showRelative?: boolean;
+}
+
+export function DatePicker({
+  id,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  required = false,
+  locale,
+  placeholder,
+  disabled = false,
+  className,
+  allowClear = true,
+  showPresets = true,
+  showSmartInput = true,
+  showRelative = true,
+}: DatePickerProps) {
+  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 applyPreset = (date: Date | null) => {
+    change(date);
+    setOpen(false);
+    setSmartText("");
+  };
+
+  const handleSmartSubmit = () => {
+    if (parsedSmartDate) {
+      change(parsedSmartDate);
+      setOpen(false);
+      setSmartText("");
+    }
+  };
+
+  const today = new Date();
+  const displayMonth = parsedSmartDate || selectedDate;
+  const presets: Array<[string, Date]> = [
+    [text?.today ?? "วันนี้", today],
+    [text?.yesterday ?? "เมื่อวาน", subDays(today, 1)],
+    [text?.tomorrow ?? "พรุ่งนี้", addDays(today, 1)],
+    [text?.nextWeek ?? "+1 สัปดาห์", addWeeks(today, 1)],
+    [text?.lastWeek ?? "-1 สัปดาห์", subWeeks(today, 1)],
+    [text?.nextMonth ?? "+1 เดือน", addMonths(today, 1)],
+    [text?.lastMonth ?? "-1 เดือน", subMonths(today, 1)],
+  ];
+  // ปฏิทินใช้ 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;
+
+  return (
+    <>
+      <Popover
+        open={open}
+        onOpenChange={(o) => {
+          setOpen(o);
+          if (!o) setSmartText("");
+        }}
+      >
+        <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">
+          {/* Smart Date Text Input */}
+          {showSmartInput && (
+            <div className="mb-3 flex flex-col gap-1.5 border-b pb-2.5">
+              <InputGroup className="h-8">
+                <InputGroupInput
+                  value={smartText}
+                  onChange={(e) => setSmartText(e.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      handleSmartSubmit();
+                    }
+                  }}
+                  placeholder={text?.smartPlaceholder ?? "เช่น 1/7, 1/7/25, 1-7-2568..."}
+                  className="h-8 text-xs"
+                />
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton
+                    type="button"
+                    variant="default"
+                    size="xs"
+                    onClick={handleSmartSubmit}
+                    disabled={!parsedSmartDate}
+                  >
+                    {text?.apply ?? "ตกลง"}
+                  </InputGroupButton>
+                </InputGroupAddon>
+              </InputGroup>
+              {parsedSmartDate && (
+                <span className="flex items-center gap-1 font-medium text-success text-xs">
+                  <Check className="size-3" />
+                  {formatDate(parsedSmartDate, locale)}
+                </span>
+              )}
+            </div>
+          )}
+
+          {/* Quick Presets Section (Flex Wrap & Clean Spacing) */}
+          {showPresets && (
+            <div className="mb-3 border-b pb-2.5">
+              <div className="mb-1.5 flex items-center gap-1 font-semibold text-muted-foreground text-xs">
+                <Clock className="h-3 w-3" />
+                {text?.presets ?? "ทางลัด"}
+              </div>
+              <div className="flex flex-wrap items-center gap-1.5">
+                {presets.map(([label, date]) => (
+                  <Button
+                    key={label}
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-6 px-2 font-normal text-xs hover:bg-muted"
+                    onClick={() => applyPreset(date)}
+                  >
+                    {label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 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>
+      {name !== undefined && (
+        // ค่าที่ส่งไปกับฟอร์ม — ใช้ input ข้อความที่มองไม่เห็นแทน type="hidden" เพราะ hidden ไม่ถูกตรวจ `required`
+        // อยู่หลังปุ่มเสมอ: label ที่ครอบ (LabeledField) คลิกแล้วไปที่ปุ่ม ไม่ใช่ช่องนี้ · ตาข่ายฟอร์มอ่านชื่อจาก label เดียวกัน
+        <input
+          name={name}
+          value={toDateInputValue(selectedDate)}
+          onChange={() => {}}
+          required={required}
+          disabled={disabled}
+          tabIndex={-1}
+          aria-hidden
+          className="sr-only"
+        />
+      )}
+    </>
+  );
+}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { DatePicker } from "@suphark/ui/components/ui/date-picker";
+import { DatePicker } from "@suphark/ui/components/shared/date/date-picker";
 import {
   FormControl,
   FormField,

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

@@ -175,6 +175,21 @@ export interface UiText {
   characterCount?: string;
   /** NumberInput (optional) */
   number?: Partial<{ increment: string; decrement: string }>;
+  /** DatePicker (optional) — ทางลัดวันที่ + ช่องพิมพ์วันที่ */
+  datePicker?: Partial<{
+    placeholder: string;
+    smartPlaceholder: string;
+    apply: string;
+    presets: string;
+    today: string;
+    yesterday: string;
+    tomorrow: string;
+    nextWeek: string;
+    lastWeek: string;
+    nextMonth: string;
+    lastMonth: string;
+    clear: string;
+  }>;
   /** TimePicker / DateTimePicker (optional) */
   time?: Partial<{
     choose: string;
@@ -340,6 +355,20 @@ export const UI_TEXT_TH: UiText = {
   presence: { online: "ออนไลน์", away: "ไม่อยู่", busy: "ไม่ว่าง", offline: "ออฟไลน์" },
   characterCount: "พิมพ์แล้ว {count} จาก {max} ตัวอักษร",
   number: { increment: "เพิ่ม", decrement: "ลด" },
+  datePicker: {
+    placeholder: "เลือกวันที่",
+    smartPlaceholder: "เช่น 1/7, 1/7/25, 1-7-2568...",
+    apply: "ตกลง",
+    presets: "ทางลัด",
+    today: "วันนี้",
+    yesterday: "เมื่อวาน",
+    tomorrow: "พรุ่งนี้",
+    nextWeek: "+1 สัปดาห์",
+    lastWeek: "-1 สัปดาห์",
+    nextMonth: "+1 เดือน",
+    lastMonth: "-1 เดือน",
+    clear: "ล้างวันที่",
+  },
   time: {
     choose: "เลือกเวลา",
     hour: "ชั่วโมง",
@@ -511,6 +540,20 @@ export const UI_TEXT_EN: UiText = {
   presence: { online: "Online", away: "Away", busy: "Busy", offline: "Offline" },
   characterCount: "{count} of {max} characters",
   number: { increment: "Increase", decrement: "Decrease" },
+  datePicker: {
+    placeholder: "Pick a date",
+    smartPlaceholder: "e.g. 1/7, 1/7/25, 1-7-2025…",
+    apply: "Apply",
+    presets: "Shortcuts",
+    today: "Today",
+    yesterday: "Yesterday",
+    tomorrow: "Tomorrow",
+    nextWeek: "+1 week",
+    lastWeek: "-1 week",
+    nextMonth: "+1 month",
+    lastMonth: "-1 month",
+    clear: "Clear date",
+  },
   time: {
     choose: "Choose time",
     hour: "Hour",