@suphark/ui 0.39.0 → 0.40.1

package/CHANGELOG.md

@@ -2,7 +2,37 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
-## [0.39.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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.39.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",

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

@@ -1,308 +1,10 @@
-"use client";
-
-import { Button } from "@suphark/ui/components/ui/button";
-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 { 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)
+ * ย้ายไป `components/shared/date/date-picker.tsx` แล้ว (0.40.0) — ไฟล์นี้ไม่ได้มาจาก shadcn CLI
+ * (registry ของ base-nova ไม่มี date-picker) แต่ยกมาจาก supplychain · คงไว้ให้ import path เดิมใช้ได้
  */
-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;
-}
-
-interface DatePickerProps {
-  id?: string;
-  value: Date | string | number | null | undefined;
-  onChange: (date: Date | null) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-  allowClear?: boolean;
-  showPresets?: boolean;
-  showSmartInput?: boolean;
-}
-
-export function DatePicker({
-  id,
-  value,
-  onChange,
-  placeholder = "เลือกวันที่อ้างอิงราคา...",
-  disabled = false,
-  className,
-  allowClear = true,
-  showPresets = true,
-  showSmartInput = true,
-}: DatePickerProps) {
-  const [open, setOpen] = useState(false);
-  const [smartText, setSmartText] = useState("");
-
-  const selectedDate = value ? new Date(value) : undefined;
-  const isValidDate = selectedDate && !Number.isNaN(selectedDate.getTime());
-
-  const parsedSmartDate = useMemo(() => parseSmartDateInput(smartText), [smartText]);
-
-  const handleSelectDate = (date: Date | undefined) => {
-    onChange(date || null);
-    setOpen(false);
-    setSmartText("");
-  };
-
-  const applyPreset = (date: Date | null) => {
-    onChange(date);
-    setOpen(false);
-    setSmartText("");
-  };
-
-  const handleSmartSubmit = () => {
-    if (parsedSmartDate) {
-      onChange(parsedSmartDate);
-      setOpen(false);
-      setSmartText("");
-    }
-  };
-
-  const today = new Date();
-  const displayMonth = parsedSmartDate || (isValidDate ? selectedDate : undefined);
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={(o) => {
-        setOpen(o);
-        if (!o) setSmartText("");
-      }}
-    >
-      <PopoverTrigger
-        render={
-          <Button
-            id={id}
-            variant="outline"
-            disabled={disabled}
-            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-slate-500" />
-          <span className="truncate">
-            {isValidDate ? (
-              <>
-                <span className="font-medium text-foreground">
-                  {formatThaiFullDate(selectedDate)}
-                </span>
-                <span className="ml-1 text-muted-foreground text-xs">
-                  ({formatRelativeThaiDate(selectedDate)})
-                </span>
-              </>
-            ) : (
-              <span>{placeholder}</span>
-            )}
-          </span>
-        </div>
-        {allowClear && isValidDate && !disabled && (
-          <span
-            role="button"
-            tabIndex={0}
-            className="ml-1 cursor-pointer rounded p-0.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
-            onClick={(e) => {
-              e.stopPropagation();
-              onChange(null);
-            }}
-          >
-            <X className="h-3.5 w-3.5" />
-          </span>
-        )}
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-[320px] border bg-background p-3 shadow-xl sm:w-[340px]"
-        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="เช่น 1/7, 1/7/25, 1-7-2568..."
-                className="h-8 text-xs"
-              />
-              <InputGroupAddon align="inline-end">
-                <InputGroupButton
-                  type="submit"
-                  variant="default"
-                  size="xs"
-                  onClick={handleSmartSubmit}
-                  disabled={!parsedSmartDate}
-                >
-                  ตกลง
-                </InputGroupButton>
-              </InputGroupAddon>
-            </InputGroup>
-            {parsedSmartDate && (
-              <span className="flex items-center gap-1 font-medium text-emerald-600 text-xs">
-                <Check className="size-3" />
-                {formatThaiFullDate(parsedSmartDate)}
-              </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" />
-              Quick Preset
-            </div>
-            <div className="flex flex-wrap items-center gap-1.5">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(today)}
-              >
-                Today
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(subDays(today, 1))}
-              >
-                Yesterday
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(addDays(today, 1))}
-              >
-                Tomorrow
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(addWeeks(today, 1))}
-              >
-                +1 Week
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(subWeeks(today, 1))}
-              >
-                -1 Week
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(addMonths(today, 1))}
-              >
-                +1 Month
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
-                onClick={() => applyPreset(subMonths(today, 1))}
-              >
-                -1 Month
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {/* Visual DayPicker Calendar */}
-        <div className="flex w-full justify-center">
-          <Calendar
-            mode="single"
-            selected={isValidDate ? selectedDate : undefined}
-            onSelect={handleSelectDate}
-            disabled={disabled}
-            captionLayout="dropdown"
-            startMonth={new Date(1990, 0)}
-            endMonth={new Date(2040, 11)}
-            defaultMonth={displayMonth}
-            className="p-0"
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+export {
+  DatePicker,
+  type DatePickerProps,
+  parseSmartDateInput,
+  toDateInputValue,
+} from "@suphark/ui/components/shared/date/date-picker";

package/src/index.ts

@@ -76,6 +76,12 @@ export {
 } from "./components/shared/confirm-dialog";
 export { CountBadge } from "./components/shared/count-badge";
 export { DataList, DataRow } from "./components/shared/data-list";
+export {
+  DatePicker,
+  type DatePickerProps,
+  parseSmartDateInput,
+  toDateInputValue,
+} from "./components/shared/date/date-picker";
 export { DateRangePicker } from "./components/shared/date/date-range-picker";
 export { DescriptionList } from "./components/shared/description-list";
 export {
@@ -403,7 +409,6 @@ export {
   ContextMenuSubTrigger,
   ContextMenuTrigger,
 } from "./components/ui/context-menu";
-export { DatePicker, parseSmartDateInput } from "./components/ui/date-picker";
 export {
   Dialog,
   DialogClose,