@suphark/ui 0.53.0 → 0.59.1

package/src/components/pwa/pull-to-refresh.tsx

@@ -1,13 +1,21 @@
 "use client";
 
 import { cn } from "@suphark/ui/lib/utils";
-import { Loader2, RefreshCw } from "lucide-react";
+import { ArrowDown, Loader2, RefreshCw } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 
-const ACTIVATION_DISTANCE = 72;
-const MAX_PULL_DISTANCE = 112;
+/** ระยะเริ่มทำงาน / สูงสุด / แรงต้าน (px) ต่อแบบ — circle ดึงสั้นกว่า หนักมือกว่า */
+const DIMS = {
+  pill: { activation: 72, max: 112, resistance: 0.62 },
+  circle: { activation: 64, max: 104, resistance: 0.5 },
+} as const;
+/** circle: ขนาดวงและที่พักใต้ขอบบนของ root ตอนกำลังรีเฟรช */
+const CIRCLE_SIZE = 40;
+const CIRCLE_REST = 16;
 const MOBILE_BREAKPOINT = 768;
+/** หมุนอย่างน้อยเท่านี้ — refresh ที่เสร็จทันทีจะไม่กะพริบหายไปเลย */
+const MIN_SPIN_MS = 500;
 
 export interface PullToRefreshText {
   pull: string;
@@ -28,20 +36,35 @@ export const PULL_TO_REFRESH_TEXT_EN: PullToRefreshText = {
 };
 
 /**
- * ดึงลงเพื่อรีเฟรช (มือถือ, < 768px) — เรียก `router.refresh()` เมื่อดึงเกินระยะ
- * ใส่ `data-pull-to-refresh-root` บน element ที่เลื่อนได้ของหน้า (ดึงได้เมื่อเลื่อนอยู่บนสุดเท่านั้น)
+ * ดึงลงเพื่อรีเฟรช (มือถือ, < 768px) — เรียก `onRefresh` (ไม่ส่ง = `router.refresh()`) เมื่อดึงเกินระยะ
+ * ใส่ `data-pull-to-refresh-root` บน element ที่เลื่อนได้ของหน้า — ดึงได้เมื่อแตะ "ในนั้น" และเลื่อนอยู่บนสุดเท่านั้น
+ * (sheet/dialog ที่ portal ออกไปนอก root จึงปัดลงของตัวเองได้ ไม่ถูกแย่งไปรีเฟรชหน้า) · วงโผล่ใต้ขอบบนของ root
+ * (ไม่จมใต้ header ที่ sticky) และหมุนจนกว่า `onRefresh` จะเสร็จ (ขั้นต่ำ 500ms)
  *
  *   <main data-pull-to-refresh-root className="overflow-y-auto">…</main>
- *   <PullToRefresh />
+ *   <PullToRefresh />                                  // รีเฟรช server component
+ *   <PullToRefresh onRefresh={() => store.sync()} />   // แอป local-first / ดึงข้อมูลเอง
  */
 export function PullToRefresh({
   text = PULL_TO_REFRESH_TEXT_TH,
   rootSelector = "[data-pull-to-refresh-root]",
+  onRefresh,
+  variant = "pill",
 }: {
   text?: PullToRefreshText;
   rootSelector?: string;
+  /** รีเฟรชเอง (คืน promise = หมุนจนเสร็จ) — ไม่ส่ง = `router.refresh()` แล้วหมุน 700ms */
+  onRefresh?: () => Promise<unknown> | void;
+  /**
+   * `pill` (ค่าเริ่มต้น) = แคปซูลมีข้อความ · `circle` = วงกลม 40px ไอคอนล้วน (ลูกศร → หมุน) อยู่กลาง พักที่ 16px ใต้ขอบบนของ root
+   * ข้อความยังอยู่เป็น `sr-only` + `role="status"` สำหรับ screen reader
+   */
+  variant?: "pill" | "circle";
 }) {
   const router = useRouter();
+  const onRefreshRef = useRef(onRefresh);
+  onRefreshRef.current = onRefresh;
+  const [rootTop, setRootTop] = useState(0);
   const startRef = useRef<{ x: number; y: number } | null>(null);
   const isPullingRef = useRef(false);
   const [pullDistance, setPullDistance] = useState(0);
@@ -53,6 +76,7 @@ export function PullToRefresh({
   isRefreshingRef.current = isRefreshing;
 
   useEffect(() => {
+    const dims = DIMS[variant];
     const isRefreshing = () => isRefreshingRef.current;
     const isMobileViewport = () => window.innerWidth < MOBILE_BREAKPOINT;
     const getRoot = () => document.querySelector<HTMLElement>(rootSelector);
@@ -81,6 +105,13 @@ export function PullToRefresh({
         resetPull();
         return;
       }
+      // root ปกติ = ต้องแตะ "ในนั้น" (portal ของ sheet/dialog อยู่นอก root จึงไม่เริ่มดึง) · root เป็น <html>/<body> ครอบทุกอย่างอยู่แล้ว
+      const whole = root === document.documentElement || root === document.body;
+      if (!whole && !(event.target instanceof Node && root.contains(event.target))) {
+        resetPull();
+        return;
+      }
+      setRootTop(whole ? 0 : Math.max(0, root.getBoundingClientRect().top));
       startRef.current = { x: touch.clientX, y: touch.clientY };
       isPullingRef.current = false;
     };
@@ -107,16 +138,30 @@ export function PullToRefresh({
         isPullingRef.current = true;
       }
       event.preventDefault();
-      setPullDistance(Math.min(MAX_PULL_DISTANCE, deltaY * 0.62));
+      setPullDistance(Math.min(dims.max, deltaY * dims.resistance));
     };
 
-    const handleTouchEnd = () => {
-      const shouldRefresh = pullDistanceRef.current >= ACTIVATION_DISTANCE;
+    const handleTouchEnd = async () => {
+      const shouldRefresh = pullDistanceRef.current >= dims.activation;
       resetPull();
       if (!shouldRefresh || isRefreshing()) return;
+      isRefreshingRef.current = true;
       setIsRefreshing(true);
-      router.refresh();
-      window.setTimeout(() => setIsRefreshing(false), 700);
+      const startedAt = Date.now();
+      const custom = onRefreshRef.current;
+      try {
+        if (custom) await custom();
+        else {
+          router.refresh();
+          await new Promise((resolve) => setTimeout(resolve, 700));
+        }
+      } catch {
+        // งาน refresh รายงานข้อผิดพลาดเอง — วงแค่หยุดหมุน
+      }
+      const wait = MIN_SPIN_MS - (Date.now() - startedAt);
+      if (wait > 0) await new Promise((resolve) => setTimeout(resolve, wait));
+      isRefreshingRef.current = false;
+      setIsRefreshing(false);
     };
 
     // touchmove ต้อง non-passive (preventDefault ระหว่างดึง) ซึ่งทำให้ browser ต้องรอ JS ก่อนเลื่อนหน้าทุกครั้ง
@@ -150,20 +195,56 @@ export function PullToRefresh({
       window.removeEventListener("touchend", handleTouchEnd);
       window.removeEventListener("touchcancel", resetPull);
     };
-  }, [router, rootSelector]);
+  }, [router, rootSelector, variant]);
 
   const isVisible = pullDistance > 0 || isRefreshing;
-  const progress = Math.min(1, pullDistance / ACTIVATION_DISTANCE);
+  const progress = Math.min(1, pullDistance / DIMS[variant].activation);
   const label = isRefreshing ? text.refreshing : progress >= 1 ? text.release : text.pull;
 
+  if (variant === "circle") {
+    const armed = !isRefreshing && progress >= 1;
+    return (
+      <div
+        role="status"
+        aria-live="polite"
+        className={cn(
+          "pointer-events-none fixed left-1/2 z-50 flex size-10 items-center justify-center rounded-full border bg-background text-muted-foreground shadow-md md:hidden",
+          pullDistance === 0 && "transition-[transform,opacity] duration-200 ease-out",
+          armed && "text-primary",
+        )}
+        style={{
+          top: rootTop - CIRCLE_SIZE,
+          marginLeft: -CIRCLE_SIZE / 2,
+          opacity: isRefreshing ? 1 : pullDistance > 0 ? Math.max(0.35, progress) : 0,
+          transform: `translateY(${isRefreshing ? CIRCLE_REST + CIRCLE_SIZE : pullDistance}px) scale(${isVisible ? 0.7 + 0.3 * progress : 0.6})`,
+        }}
+      >
+        {isRefreshing ? (
+          <Loader2 className="size-5 animate-spin text-primary" aria-hidden="true" />
+        ) : (
+          <ArrowDown
+            className="size-5 transition-transform duration-150"
+            style={{ transform: `rotate(${armed ? 180 : 0}deg)` }}
+            aria-hidden="true"
+          />
+        )}
+        <span className="sr-only">{isVisible ? label : ""}</span>
+      </div>
+    );
+  }
+
   return (
     <div
       aria-live="polite"
       className={cn(
-        "pointer-events-none fixed top-3 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-card/95 px-3.5 py-2 text-xs font-medium text-foreground shadow-lg backdrop-blur-md transition-all duration-150 md:hidden",
+        "pointer-events-none fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-card/95 px-3.5 py-2 text-xs font-medium text-foreground shadow-lg backdrop-blur-md transition-all duration-150 md:hidden",
         isVisible ? "translate-y-0 opacity-100" : "-translate-y-8 opacity-0",
       )}
-      style={{ transform: `translate(-50%, ${isRefreshing ? 0 : progress * 18}px)` }}
+      style={{
+        // วงอยู่ใต้ขอบบนของ root (ไม่ใช่ขอบจอ) จึงไม่โดน header ที่ sticky บัง
+        top: rootTop + 12,
+        transform: `translate(-50%, ${isRefreshing ? 0 : progress * 18}px)`,
+      }}
     >
       {isRefreshing ? (
         <Loader2 className="size-3.5 animate-spin" aria-hidden="true" />

package/src/components/shared/date/accessible-calendar.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Calendar, CalendarDayButton } from "@suphark/ui/components/ui/calendar";
+import { type ComponentProps, useEffect, useMemo, useRef } from "react";
+
+/**
+ * ปุ่มวันของปฏิทินที่ย้ายโฟกัสจริงตามลูกศรคีย์บอร์ด — `CalendarDayButton` ของ shadcn (ไฟล์ห้ามแก้มือ) มี effect สั่ง
+ * `ref.current?.focus()` แต่ไม่เคยผูก `ref` กับปุ่ม ลูกศรจึงเลื่อนได้แค่สถานะภายในของ react-day-picker โฟกัสจริงอยู่ที่เดิม
+ * (ใช้เลือกวันด้วยคีย์บอร์ดไม่ได้) — ผูก ref ผ่าน `{...props}` ที่ CalendarDayButton ส่งต่อให้ปุ่ม
+ */
+export 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>)} />;
+}
+
+/**
+ * `Calendar` ที่ใช้ลูกศร/Home/End/PageUp/PageDown เลือกวันด้วยคีย์บอร์ดได้จริง — ใช้แทน `Calendar` ดิบเสมอเมื่อวางปฏิทินเอง
+ * (`Calendar` ของ shadcn ย้ายโฟกัสวันไม่ได้ ดูคำอธิบายที่ `FocusableDayButton`) · props เหมือน `Calendar` ทุกอย่าง
+ * ส่ง `components.DayButton` เองได้ (ทับตัวนี้)
+ */
+export function AccessibleCalendar({
+  components,
+  locale,
+  ...props
+}: ComponentProps<typeof Calendar>) {
+  // ผูก locale เข้ากับปุ่มวัน (Calendar ของ shadcn ส่ง locale ให้ปุ่มของมันเอง แต่ปุ่มที่เราแทนต้องส่งต่อเอง)
+  const DayButton = useMemo(
+    () =>
+      function DayButtonWithLocale(buttonProps: ComponentProps<typeof CalendarDayButton>) {
+        return <FocusableDayButton locale={locale} {...buttonProps} />;
+      },
+    [locale],
+  );
+  return <Calendar locale={locale} components={{ DayButton, ...components }} {...props} />;
+}

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

@@ -1,8 +1,9 @@
 "use client";
 
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { FocusableDayButton } from "@suphark/ui/components/shared/date/accessible-calendar";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Calendar, CalendarDayButton } from "@suphark/ui/components/ui/calendar";
+import { Calendar } from "@suphark/ui/components/ui/calendar";
 import {
   InputGroup,
   InputGroupAddon,
@@ -26,11 +27,11 @@ import {
   createContext,
   type ReactNode,
   useContext,
-  useEffect,
   useId,
   useRef,
   useState,
 } from "react";
+import type { Matcher } from "react-day-picker";
 
 /**
  * Smart date parser supporting intuitive Thai & international date inputs:
@@ -196,6 +197,13 @@ interface DatePickerBaseProps {
   showPresets?: boolean;
   /** พิมพ์ในช่องได้ (ค่าเริ่มต้น true) · false = ช่องอ่านอย่างเดียว กดแล้วเปิดปฏิทิน */
   showSmartInput?: boolean;
+  /**
+   * วันต่ำสุด/สูงสุดที่เลือกได้ (`"YYYY-MM-DD"` | Date, รวมวันนั้นด้วย) — ใช้ได้ทั้งวันเดียวและ `mode="range"` (ทั้งสองฝั่งต้องอยู่ในช่วง)
+   * ปฏิทินกดวันนอกช่วงไม่ได้ · ค่าที่พิมพ์แล้วอยู่นอกช่วง = ไม่ยืนยัน + บอกเหตุผลใต้ช่อง (`UiText.datePicker.beforeMin`/`afterMax`)
+   * ค่าที่ส่งเข้ามาเองนอกช่วงไม่ถูกแก้ แค่ช่องขึ้นสถานะผิด (`aria-invalid`)
+   */
+  minDate?: DateInput;
+  maxDate?: DateInput;
 }
 
 export interface DatePickerSingleProps extends DatePickerBaseProps {
@@ -302,21 +310,6 @@ function calendarFormatters(locale?: string) {
   };
 }
 
-/**
- * ปุ่มวันของปฏิทินที่ย้ายโฟกัสจริงตามลูกศรคีย์บอร์ด — `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);
 
@@ -341,10 +334,14 @@ function MonthGrid({
   month,
   locale,
   onPick,
+  startMonth,
+  endMonth,
 }: {
   month: Date;
   locale: string | undefined;
   onPick: (month: Date) => void;
+  startMonth: Date;
+  endMonth: Date;
 }) {
   const tag = locale ?? "th";
   const [year, setYear] = useState(month.getFullYear());
@@ -355,11 +352,23 @@ function MonthGrid({
   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)}>
+        <button
+          type="button"
+          aria-label="-"
+          className={step}
+          disabled={year <= startMonth.getFullYear()}
+          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)}>
+        <button
+          type="button"
+          aria-label="+"
+          className={step}
+          disabled={year >= endMonth.getFullYear()}
+          onClick={() => setYear(year + 1)}
+        >
           <ChevronRightIcon className="size-4" />
         </button>
       </div>
@@ -367,14 +376,17 @@ function MonthGrid({
         {Array.from({ length: 12 }, (_, m) => {
           const current = year === month.getFullYear() && m === month.getMonth();
           const thisMonth = year === today.getFullYear() && m === today.getMonth();
+          const at = new Date(year, m, 1).getTime();
+          const outside = at < startMonth.getTime() || at > endMonth.getTime();
           const label = new Date(2000, m, 1).toLocaleString(tag, { month: "short" });
           return (
             <button
               key={label}
               type="button"
+              disabled={outside}
               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",
+                "h-[3.25rem] rounded-md text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40",
                 current ? "bg-primary font-semibold text-primary-foreground" : "hover:bg-accent",
                 !current && thisMonth && "bg-muted font-medium",
               )}
@@ -388,10 +400,55 @@ function MonthGrid({
   );
 }
 
+/** ช่วงวันที่ที่เลือกได้ (`minDate`/`maxDate`) — ใช้กับ disabled ของปฏิทิน เดือนที่เลื่อนไปได้ และเหตุผลของค่าที่พิมพ์ */
+interface Bounds {
+  lo: Date | undefined;
+  hi: Date | undefined;
+  /** ข้อความเหตุผลที่วันนี้เลือกไม่ได้ (null = เลือกได้) */
+  reason: (date: Date) => string | null;
+  matchers: Matcher[];
+  startMonth: Date;
+  endMonth: Date;
+}
+
+function makeBounds(
+  minDate: DateInput,
+  maxDate: DateInput,
+  locale: string | undefined,
+  text: { beforeMin?: string; afterMax?: string } | undefined,
+): Bounds {
+  const day = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  const min = toDate(minDate);
+  const max = toDate(maxDate);
+  const lo = min && day(min);
+  const hi = max && day(max);
+  const reason = (date: Date) => {
+    const d = day(date);
+    if (lo && d.getTime() < lo.getTime())
+      return (text?.beforeMin ?? "เลือกได้ตั้งแต่วันที่ {date}").replace("{date}", formatDate(lo, locale));
+    if (hi && d.getTime() > hi.getTime())
+      return (text?.afterMax ?? "เลือกได้ถึงวันที่ {date}").replace("{date}", formatDate(hi, locale));
+    return null;
+  };
+  const matchers: Matcher[] = [];
+  if (lo) matchers.push({ before: lo });
+  if (hi) matchers.push({ after: hi });
+  return {
+    lo,
+    hi,
+    reason,
+    matchers,
+    startMonth: lo ? new Date(lo.getFullYear(), lo.getMonth(), 1) : new Date(1990, 0),
+    endMonth: hi ? new Date(hi.getFullYear(), hi.getMonth(), 1) : new Date(2040, 11),
+  };
+}
+
 /** ผลอ่านจากข้อความที่พิมพ์ — `label` ที่คนอ่านออก + เดือนที่ปฏิทินควรเลื่อนไปแสดง */
 interface DatePreview {
   label: string;
   month: Date;
+  /** อ่านออกแต่อยู่นอก `minDate`/`maxDate` — ข้อความเหตุผล (ไม่ยืนยัน ไม่ไฮไลต์ในปฏิทิน) */
+  blocked?: string;
 }
 interface SinglePreview extends DatePreview {
   date: Date;
@@ -412,6 +469,10 @@ interface ShellApi<T extends DatePreview> {
 interface ShellProps<T extends DatePreview> {
   id?: string;
   locale?: string;
+  /** ค่าที่เลือกอยู่อยู่นอก `minDate`/`maxDate` — ช่องขึ้นสถานะผิด */
+  invalid?: boolean;
+  startMonth: Date;
+  endMonth: Date;
   disabled: boolean;
   className?: string;
   required: boolean;
@@ -437,6 +498,9 @@ interface ShellProps<T extends DatePreview> {
 function DateFieldShell<T extends DatePreview>({
   id,
   locale,
+  invalid = false,
+  startMonth,
+  endMonth,
   disabled,
   className,
   required,
@@ -595,6 +659,7 @@ function DateFieldShell<T extends DatePreview>({
           aria-haspopup="dialog"
           aria-expanded={open}
           aria-required={required || undefined}
+          aria-invalid={invalid || undefined}
           aria-describedby={open && editing && trimmed !== "" ? previewId : undefined}
           onMouseDown={() => {
             pointerFocus.current = !editingRef.current;
@@ -675,7 +740,7 @@ function DateFieldShell<T extends DatePreview>({
           </InputGroupButton>
         </InputGroupAddon>
         <InputGroupAddon align="inline-end">
-          {editing && typing && preview && (
+          {editing && typing && preview && !preview.blocked && (
             <kbd className="rounded border px-1 font-mono text-caption text-muted-foreground leading-4">
               Enter
             </kbd>
@@ -729,7 +794,11 @@ function DateFieldShell<T extends DatePreview>({
           >
             {typing && trimmed !== "" && editing && (
               <div id={previewId} role="status">
-                {preview ? (
+                {preview?.blocked ? (
+                  <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">
+                    {preview.blocked}
+                  </p>
+                ) : preview ? (
                   <button
                     type="button"
                     onClick={apply}
@@ -783,6 +852,8 @@ function DateFieldShell<T extends DatePreview>({
                 <MonthGrid
                   month={month}
                   locale={locale}
+                  startMonth={startMonth}
+                  endMonth={endMonth}
                   onPick={(next) => {
                     setMonth(next);
                     setView("days");
@@ -862,8 +933,11 @@ function SingleDatePicker({
   className,
   showSmartInput = true,
   showRelative = true,
+  minDate,
+  maxDate,
 }: DatePickerSingleProps) {
   const text = useUiText().datePicker;
+  const bounds = makeBounds(minDate, maxDate, locale, text);
   const mounted = useMounted();
   // ไม่ควบคุม = มี defaultValue หรือไม่มีทั้ง value และ onChange (เช่นใช้แค่ name ในฟอร์ม)
   const controlled = value !== undefined || (defaultValue === undefined && onChange !== undefined);
@@ -882,6 +956,7 @@ function SingleDatePicker({
       date,
       month: date,
       label: `${weekdayShort(date, locale)} ${formatDate(date, locale)} · ${formatRelative(date, locale)}`,
+      blocked: bounds.reason(date) ?? undefined,
     };
   };
 
@@ -898,6 +973,9 @@ function SingleDatePicker({
       <DateFieldShell<SinglePreview>
         id={id}
         locale={locale}
+        invalid={Boolean(selectedDate && bounds.reason(selectedDate))}
+        startMonth={bounds.startMonth}
+        endMonth={bounds.endMonth}
         disabled={disabled}
         className={className}
         required={required}
@@ -924,7 +1002,7 @@ function SingleDatePicker({
             return true;
           }
           const next = parse(input);
-          if (!next) return false;
+          if (!next || next.blocked) return false;
           change(next.date);
           return true;
         }}
@@ -935,17 +1013,19 @@ function SingleDatePicker({
           <Calendar
             mode="single"
             // ข้อความที่พิมพ์อยู่ไฮไลต์ในปฏิทินทันที — คลิกวันที่ไฮไลต์อยู่ = ยืนยันวันนั้น (ไม่ใช่ล้างค่าแบบ toggle)
-            selected={api.preview?.date ?? selectedDate}
+            selected={
+              (api.preview && !api.preview.blocked ? api.preview.date : undefined) ?? selectedDate
+            }
             onSelect={(date) => {
               change(date ?? api.preview?.date ?? selectedDate ?? null);
               api.close();
             }}
             month={api.month}
             onMonthChange={api.setMonth}
-            disabled={disabled}
+            disabled={disabled ? true : bounds.matchers}
             captionLayout="label"
-            startMonth={new Date(1990, 0)}
-            endMonth={new Date(2040, 11)}
+            startMonth={bounds.startMonth}
+            endMonth={bounds.endMonth}
             formatters={calendarFormatters(locale)}
             components={{ DayButton: FocusableDayButton, CaptionLabel: CaptionButton }}
             className="p-0 [--cell-size:--spacing(10)]"
@@ -996,8 +1076,11 @@ function RangeDatePicker({
   className,
   allowClear = true,
   showSmartInput = true,
+  minDate,
+  maxDate,
 }: DatePickerRangeProps) {
   const text = useUiText().datePicker;
+  const bounds = makeBounds(minDate, maxDate, locale, text);
   const controlled = value !== undefined || (defaultValue === undefined && onChange !== undefined);
   const [own, setOwn] = useState<DatePickerRange | null>(() => toRange(defaultValue) ?? null);
   // ระหว่างคลิกเลือก: คลิกแรก = วันเริ่ม (ยังไม่ปิด) คลิกที่สอง = วันสุดท้าย แล้วปิด
@@ -1022,6 +1105,7 @@ function RangeDatePicker({
     return {
       range,
       month: range.from,
+      blocked: bounds.reason(range.from) ?? bounds.reason(range.to) ?? undefined,
       label:
         days === 1
           ? `${weekdayShort(range.from, locale)} ${formatDate(range.from, locale)}`
@@ -1042,6 +1126,9 @@ function RangeDatePicker({
       <DateFieldShell<RangePreview>
         id={id}
         locale={locale}
+        invalid={Boolean(selected && (bounds.reason(selected.from) || bounds.reason(selected.to)))}
+        startMonth={bounds.startMonth}
+        endMonth={bounds.endMonth}
         disabled={disabled}
         className={className}
         required={required}
@@ -1065,7 +1152,7 @@ function RangeDatePicker({
             return true;
           }
           const next = parse(input);
-          if (!next) return false;
+          if (!next || next.blocked) return false;
           change(next.range);
           return true;
         }}
@@ -1077,7 +1164,12 @@ function RangeDatePicker({
           <>
             <Calendar
               mode="range"
-              selected={start ? { from: start, to: undefined } : (api.preview?.range ?? selected)}
+              selected={
+                start
+                  ? { from: start, to: undefined }
+                  : ((api.preview && !api.preview.blocked ? api.preview.range : undefined) ??
+                    selected)
+              }
               onSelect={(_range, day) => {
                 // คุมสองคลิกเอง: react-day-picker คลิกแรกให้ from = to (ช่วงหนึ่งวัน) จึงแยกคลิกแรกไม่ออก
                 if (!start) {
@@ -1093,10 +1185,10 @@ function RangeDatePicker({
               }}
               month={api.month}
               onMonthChange={api.setMonth}
-              disabled={disabled}
+              disabled={disabled ? true : bounds.matchers}
               captionLayout="label"
-              startMonth={new Date(1990, 0)}
-              endMonth={new Date(2040, 11)}
+              startMonth={bounds.startMonth}
+              endMonth={bounds.endMonth}
               formatters={calendarFormatters(locale)}
               components={{ DayButton: FocusableDayButton, CaptionLabel: CaptionButton }}
               className="p-0 [--cell-size:--spacing(10)]"

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

@@ -1,8 +1,9 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
+import { AccessibleCalendar } from "@suphark/ui/components/shared/date/accessible-calendar";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Calendar } from "@suphark/ui/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { Separator } from "@suphark/ui/components/ui/separator";
 import { cn } from "@suphark/ui/lib/utils";
@@ -25,7 +26,7 @@ interface DateRangePickerProps {
 export function DateRangePicker({
   value,
   onValueChange,
-  placeholder = "Pick a date range",
+  placeholder,
   className,
   triggerClassName,
   align = "start",
@@ -33,6 +34,8 @@ export function DateRangePicker({
   title,
   variant = "outline",
 }: DateRangePickerProps) {
+  const text = useUiText().datePicker;
+  const hint = placeholder ?? text?.rangePlaceholder ?? "Pick a date range";
   return (
     <div className={cn("flex items-center gap-2", className)}>
       <Popover>
@@ -62,7 +65,7 @@ export function DateRangePicker({
                 format(value.from, "PP")
               )
             ) : (
-              <span>{placeholder}</span>
+              <span>{hint}</span>
             ))}
           {title && value?.from && (
             <>
@@ -80,7 +83,7 @@ export function DateRangePicker({
           )}
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align={align}>
-          <Calendar
+          <AccessibleCalendar
             autoFocus
             mode="range"
             defaultMonth={value?.from}
@@ -95,7 +98,7 @@ export function DateRangePicker({
                 className="w-full font-normal text-xs"
                 onClick={() => onValueChange(undefined)}
               >
-                Clear selection
+                {text?.clearRange ?? "Clear selection"}
               </Button>
             </div>
           )}

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/shared/button/button";
-import { Calendar } from "@suphark/ui/components/ui/calendar";
+import { AccessibleCalendar } from "@suphark/ui/components/shared/date/accessible-calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { cn } from "@suphark/ui/lib/utils";
@@ -114,7 +114,7 @@ export function DateTimePicker({
       )}
       <PopoverContent align="start" className="w-auto gap-0 p-0">
         <div className="flex flex-col sm:flex-row">
-          <Calendar
+          <AccessibleCalendar
             mode="single"
             locale={th}
             selected={date ?? undefined}