@suphark/ui 0.53.0 → 0.57.0

package/CHANGELOG.md

@@ -2,6 +2,45 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.57.0] — 2026-10-24
+
+ยกจาก pi-done (รอบสองของคำขอย้าย component ที่แอปทำเอง)
+
+### Added
+- `RowTable` / `RowTableHeader` / `RowTableRow` / `RowTableCell` / `RowTableActions` / `RowTableGroup` — ตาราง grid ที่หัว/แถว/แถวกลุ่มใช้คอลัมน์ชุดเดียว (`columns` + `mobileColumns` เป็น `grid-template-columns` ผ่านตัวแปร CSS) หัวซ่อนบนมือถือ ช่อง `hideOnMobile` ซ่อนบนมือถือ ปุ่มท้ายแถวโผล่ตอนชี้/โฟกัส (เห็นตลอดบนจอสัมผัส) — แทนที่ pi-done เขียนซ้ำ 4 ที่
+- `ListSection` / `ListSectionHeader` — กลุ่มรายการแบบไม่มีกล่อง (หัว + จำนวน + ปุ่มขวา + เส้นบาง + แถวคั่นเส้น) = `SectionPanel plain` + `TaskGroupHeader`
+- `SidebarNavItem` / `SidebarCountBadge` — แถวเมนูข้างแบบเรียบ (active = `bg-primary/10 text-primary`, ตัวเลขเป็นข้อความเทา ไม่ใช่ pill, 44px บนจอสัมผัส, `draggingOver`)
+- `ProgressBar tone="auto"` — เขียวเมื่อครบ (value ≥ max) นอกนั้นสีหลัก (ครอบคลุม `ProgressBar` ของ pi-done: ใช้ `<ProgressBar value={percent} tone="auto" className="w-10" />`)
+- showcase: หน้า `/components/row-table`, `/components/list-section`, `/components/sidebar-nav-item`
+
+## [0.56.0] — 2026-10-24
+
+### Added
+- `DatePicker` `minDate` / `maxDate` (`"YYYY-MM-DD"` | Date, รวมวันนั้น) ทั้งวันเดียวและ `mode="range"` (ขอโดย DueBell แทนการกันที่ `onChange`): ปฏิทินกดวันนอกช่วงไม่ได้ · เดือน/ปีเลื่อนไปนอกช่วงไม่ได้ (ลูกศรเดือน + ตารางเลือกเดือน) · ค่าที่พิมพ์แล้วอยู่นอกช่วง = ไม่ยืนยัน (Enter/Tab/ปุ่มผล) และกล่องผลแสดงเหตุผลสีแดงแทน · ค่าที่ส่งเข้ามาเองนอกช่วงไม่ถูกแก้ ช่องขึ้น `aria-invalid` · ข้อความ `UiText.datePicker.beforeMin` / `afterMax` (`{date}` ตาม `locale` ของช่อง) แอปทับได้
+
+## [0.55.0] — 2026-10-24
+
+ยกจาก pi-done (รอบแรกของคำขอย้าย component ที่แอปทำเอง)
+
+### Added
+- `ResponsivePopover` / `ResponsivePopoverTrigger` / `ResponsivePopoverContent` / `ResponsivePopoverItem` / `useIsResponsiveSheet()` — Popover บนจอ ≥ 768px · แผ่นล่าง (Drawer) บนมือถือ: สูงตามเนื้อหา, `footer` ค้างล่าง, ปัดลงปิด; `useIsResponsiveSheet()` ให้ picker ขยายพื้นที่แตะ (`ResponsivePopoverItem` = 44px ในแผ่น) · `sheetContentClassName` ทับสไตล์ตัวแผ่น 
+- `SwitchField` — สวิตช์ + ป้ายในตัว (คลิกป้ายสลับ, `hint` ได้, ป้ายสูง 44px บนจอสัมผัส) แทน `<label><Switch/>…</label>` ที่ต้อง biome-ignore เพราะ Switch เป็น span
+- `PullToRefresh` (`@suphark/ui/pwa`) prop `onRefresh` — รีเฟรชเองได้ (แอป local-first ที่ `router.refresh()` ไปไม่ถึง) · คืน promise = หมุนจนเสร็จ ขั้นต่ำ 500ms (ไม่ส่ง = `router.refresh()` แล้วหมุน 700ms เหมือนเดิม)
+
+### Fixed
+- `PullToRefresh`: วงโผล่ใต้ขอบบนของ root (เดิมติดขอบจอ จมใต้ header ที่ sticky) และ `z-50` · เริ่มดึงได้เฉพาะเมื่อแตะ "ในส่วน root" ที่เลื่อนอยู่บนสุด — sheet/dialog ที่ portal ออกไปนอก root จึงปัดลงของตัวเองได้ ไม่ถูกแย่งไปรีเฟรชหน้า (root เป็น `<html>`/`<body>` ทำงานเหมือนเดิม)
+- showcase: หน้า `/components/responsive-popover` ใหม่ · labeled-field มีตัวอย่าง `SwitchField`
+
+## [0.54.0] — 2026-10-24
+
+### Added
+- `AccessibleCalendar` — `Calendar` ที่ลูกศร/Home/End/PageUp/PageDown เลือกวันด้วยคีย์บอร์ดได้จริง (props เหมือน `Calendar` ทุกอย่าง) · ใช้แทน `Calendar` ดิบเมื่อวางปฏิทินเอง (ปุ่มวันของ shadcn ไม่ผูก `ref` ลูกศรจึงเลื่อนได้แค่สถานะภายใน) · `FocusableDayButton` ย้ายจาก `date-picker.tsx` มาอยู่ `shared/date/accessible-calendar.tsx`
+
+### Fixed
+- `DateRangePicker` (ตัวกรอง) และ `DateTimePicker`: ปฏิทินใช้ `AccessibleCalendar` — เลือกวันด้วยคีย์บอร์ดได้จริง (เดิมโฟกัสค้างที่เดิม)
+- `DateRangePicker`: ข้อความ placeholder/"ล้างช่วงวันที่" มาจาก `UiText.datePicker` (`rangePlaceholder`, ใหม่ `clearRange`) — แอปที่ไม่ส่ง `placeholder` และใช้ UiText ไทยจะเห็นข้อความไทยแทนอังกฤษ; ส่ง `placeholder` เองยังชนะเสมอ
+- showcase: `/components/calendar` ใช้ `AccessibleCalendar`
+
 ## [0.53.0] — 2026-10-23
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.53.0",
+  "version": "0.57.0",
   "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/pwa/pull-to-refresh.tsx

@@ -8,6 +8,8 @@ import { useEffect, useRef, useState } from "react";
 const ACTIVATION_DISTANCE = 72;
 const MAX_PULL_DISTANCE = 112;
 const MOBILE_BREAKPOINT = 768;
+/** หมุนอย่างน้อยเท่านี้ — refresh ที่เสร็จทันทีจะไม่กะพริบหายไปเลย */
+const MIN_SPIN_MS = 500;
 
 export interface PullToRefreshText {
   pull: string;
@@ -28,20 +30,29 @@ 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,
 }: {
   text?: PullToRefreshText;
   rootSelector?: string;
+  /** รีเฟรชเอง (คืน promise = หมุนจนเสร็จ) — ไม่ส่ง = `router.refresh()` แล้วหมุน 700ms */
+  onRefresh?: () => Promise<unknown> | void;
 }) {
   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);
@@ -81,6 +92,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;
     };
@@ -110,13 +128,27 @@ export function PullToRefresh({
       setPullDistance(Math.min(MAX_PULL_DISTANCE, deltaY * 0.62));
     };
 
-    const handleTouchEnd = () => {
+    const handleTouchEnd = async () => {
       const shouldRefresh = pullDistanceRef.current >= ACTIVATION_DISTANCE;
       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 ก่อนเลื่อนหน้าทุกครั้ง
@@ -160,10 +192,14 @@ export function PullToRefresh({
     <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}

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

@@ -1,6 +1,7 @@
 import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import { Field, FieldDescription, FieldError, FieldLabel } from "@suphark/ui/components/ui/field";
 import { Label } from "@suphark/ui/components/ui/label";
+import { Switch } from "@suphark/ui/components/ui/switch";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps, ReactNode } from "react";
 
@@ -97,3 +98,36 @@ export function CheckboxField({
     </Label>
   );
 }
+
+/**
+ * สวิตช์ + ป้ายในตัว (คลิกป้ายก็สลับ) — ใช้แทน `<label><Switch />…</label>` ที่ต้อง biome-ignore เพราะ Switch เป็น span
+ * `size` ส่งต่อให้ Switch · `className` ทับที่ป้ายทั้งก้อน (ใส่สไตล์ hover/ตัวหนังสือได้) · ป้ายใหญ่ขึ้นเป็น 44px บนจอสัมผัส
+ *
+ *   <SwitchField size="sm" checked={showDone} onCheckedChange={setShowDone} label="แสดงที่เสร็จแล้ว" />
+ */
+export function SwitchField({
+  label,
+  hint,
+  className,
+  ...props
+}: ComponentProps<typeof Switch> & {
+  label: ReactNode;
+  /** คำอธิบายใต้ label (เยื้องตรงกับ label) */
+  hint?: ReactNode;
+}) {
+  return (
+    <Label
+      className={cn(
+        "flex cursor-pointer items-center gap-2 font-normal pointer-coarse:min-h-11",
+        hint && "items-start",
+        className,
+      )}
+    >
+      <Switch className={cn(hint && "mt-0.5")} {...props} />
+      <span className="flex flex-col gap-0.5">
+        <span className="text-sm">{label}</span>
+        {hint && <span className="text-muted-foreground text-xs">{hint}</span>}
+      </span>
+    </Label>
+  );
+}

package/src/components/shared/list-section.tsx

@@ -0,0 +1,85 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+export type ListSectionTone = "default" | "danger" | "success" | "accent" | "muted";
+
+const TONE: Record<ListSectionTone, string> = {
+  default: "text-foreground/90",
+  danger: "text-destructive",
+  success: "text-success",
+  accent: "text-primary",
+  muted: "text-muted-foreground",
+};
+
+/** หัวกลุ่มของรายการ: ชื่อ (สีตาม tone) + จำนวน + ปุ่มขวา + เส้นบางใต้หัว — ใช้เดี่ยว ๆ หรือผ่าน `ListSection` */
+export function ListSectionHeader({
+  title,
+  count,
+  action,
+  tone = "default",
+  as: Heading = "h2",
+  className,
+}: {
+  title: ReactNode;
+  count?: number;
+  action?: ReactNode;
+  tone?: ListSectionTone;
+  as?: "h2" | "h3" | "h4" | "p";
+  className?: string;
+}) {
+  return (
+    <div
+      data-slot="list-section-header"
+      className={cn("mb-1 flex min-h-9 items-center justify-between border-b pb-1", className)}
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        <Heading
+          className={cn(
+            "flex min-w-0 items-center gap-2 truncate font-semibold text-caption",
+            TONE[tone],
+          )}
+        >
+          {title}
+        </Heading>
+        {typeof count === "number" && (
+          <span className="rounded-md bg-muted px-1.5 py-0.5 font-semibold text-caption text-muted-foreground tabular-nums">
+            {count}
+          </span>
+        )}
+      </div>
+      {action}
+    </div>
+  );
+}
+
+/**
+ * กลุ่มของรายการแบบ "ไม่มีกล่อง" (รูปแบบ List): หัวกลุ่ม + เส้นบาง + แถวคั่นด้วยเส้น — ยกจาก `SectionPanel plain` ของ pi-done
+ * แถวข้างในคั่นเส้นให้เอง (`divide-y`) · อยากได้กล่องใช้ `SectionCard`
+ *
+ *   <ListSection title="เกินกำหนด" tone="danger" count={3} action={<Button variant="link" size="xs">ทำทั้งหมด</Button>}>
+ *     {tasks.map((t) => <TaskRow key={t.id} … />)}
+ *   </ListSection>
+ */
+export function ListSection({
+  title,
+  count,
+  action,
+  tone,
+  headingAs,
+  children,
+  className,
+  ...props
+}: Omit<ComponentProps<"section">, "title"> & {
+  title: ReactNode;
+  count?: number;
+  action?: ReactNode;
+  tone?: ListSectionTone;
+  headingAs?: "h2" | "h3" | "h4" | "p";
+}) {
+  return (
+    <section data-slot="list-section" className={cn("py-1", className)} {...props}>
+      <ListSectionHeader title={title} count={count} action={action} tone={tone} as={headingAs} />
+      <div className="divide-y divide-border/50">{children}</div>
+    </section>
+  );
+}

package/src/components/shared/progress-bar.tsx

@@ -44,7 +44,8 @@ export function ProgressBar({
   showValue?: boolean;
   /** ปรับข้อความตัวเลข เช่น (v) => `${v} / ${max}` */
   format?: (value: number | null, max: number) => ReactNode;
-  tone?: ProgressTone;
+  /** `auto` = เขียวเมื่อครบ (value ≥ max) นอกนั้นสีหลัก — แถบงานย่อยที่เต็มแล้วเปลี่ยนสีเอง */
+  tone?: ProgressTone | "auto";
   /** sm = h-1 (ค่าเริ่มต้น), md = h-2, lg = h-3 */
   size?: "sm" | "md" | "lg";
   trackClassName?: string;
@@ -76,7 +77,13 @@ export function ProgressBar({
       <ProgressTrack
         className={cn(size === "md" ? "h-2" : size === "lg" ? "h-3" : "h-1", trackClassName)}
       >
-        <ProgressIndicator className={cn(TONE[tone], indicatorClassName)} style={indicatorStyle} />
+        <ProgressIndicator
+          className={cn(
+            TONE[tone === "auto" ? (value != null && value >= max ? "success" : "default") : tone],
+            indicatorClassName,
+          )}
+          style={indicatorStyle}
+        />
       </ProgressTrack>
     </ProgressPrimitive.Root>
   );

package/src/components/shared/responsive-popover.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@suphark/ui/components/ui/drawer";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import { useIsMobile } from "@suphark/ui/hooks/use-mobile";
+import { cn } from "@suphark/ui/lib/utils";
+import {
+  type ComponentProps,
+  createContext,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type PointerEventHandler,
+  type ReactElement,
+  type ReactNode,
+  useContext,
+} from "react";
+
+const ResponsivePopoverContext = createContext(false);
+
+/**
+ * อยู่ในโหมดแผ่นล่าง (จอ < 768px) หรือไม่ — ใช้ขยายพื้นที่แตะของ picker ใน `ResponsivePopover`
+ * (นอก `ResponsivePopover` = false)
+ */
+export function useIsResponsiveSheet() {
+  return useContext(ResponsivePopoverContext);
+}
+
+export interface ResponsivePopoverProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+}
+
+/**
+ * Popover บนจอกว้าง (≥ 768px) · แผ่นล่าง (Drawer) บนมือถือ: สูงตามเนื้อหา, footer ค้างล่าง, ปัดลงเพื่อปิด
+ * ใช้กับ picker ที่เปิดจากปุ่ม (สถานะ/ลำดับความสำคัญ/วันที่ …) — ในแผ่นใช้ `useIsResponsiveSheet()` ขยายแถวเป็น 44px
+ *
+ *   <ResponsivePopover open={open} onOpenChange={setOpen}>
+ *     <ResponsivePopoverTrigger render={<Button variant="outline">สถานะ</Button>} />
+ *     <ResponsivePopoverContent title="เลือกสถานะ" className="w-56 p-1">
+ *       <ResponsivePopoverItem onClick={() => pick("todo")}>ต้องทำ</ResponsivePopoverItem>
+ *     </ResponsivePopoverContent>
+ *   </ResponsivePopover>
+ */
+export function ResponsivePopover({ open, onOpenChange, children }: ResponsivePopoverProps) {
+  const isMobile = useIsMobile();
+  const handleOpenChange = onOpenChange ? (next: boolean) => onOpenChange(next) : undefined;
+
+  return (
+    <ResponsivePopoverContext.Provider value={isMobile}>
+      {isMobile ? (
+        <Drawer open={open} onOpenChange={handleOpenChange} showSwipeHandle>
+          {children}
+        </Drawer>
+      ) : (
+        <Popover open={open} onOpenChange={handleOpenChange}>
+          {children}
+        </Popover>
+      )}
+    </ResponsivePopoverContext.Provider>
+  );
+}
+
+export interface ResponsivePopoverTriggerProps {
+  render: ReactElement;
+  nativeButton?: boolean;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export function ResponsivePopoverTrigger(props: ResponsivePopoverTriggerProps) {
+  const isSheet = useIsResponsiveSheet();
+  return isSheet ? <DrawerTrigger {...props} /> : <PopoverTrigger {...props} />;
+}
+
+export interface ResponsivePopoverContentProps {
+  /** หัวแผ่นบนมือถือ และเป็นชื่อสำหรับ screen reader เสมอ */
+  title: string;
+  description?: string;
+  /** ซ่อนหัวแผ่น (ยังอ่านออกเสียง) เมื่อเนื้อหาบอกชัดอยู่แล้ว */
+  hideTitle?: boolean;
+  /** class ของ Popover เท่านั้น (ความกว้าง, padding …) */
+  className?: string;
+  /** class ของส่วนเนื้อหาที่เลื่อนได้ในแผ่น */
+  sheetClassName?: string;
+  /** class ของตัวแผ่นเอง (ทับ `bg-background text-left`) */
+  sheetContentClassName?: string;
+  /** ค้างใต้เนื้อหาที่เลื่อน (ในแผ่น) หรือต่อท้ายเนื้อหา (ใน Popover) */
+  footer?: ReactNode;
+  align?: "start" | "center" | "end";
+  side?: "top" | "bottom" | "left" | "right";
+  sideOffset?: number;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  onPointerDown?: PointerEventHandler<HTMLDivElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+  children: ReactNode;
+}
+
+export function ResponsivePopoverContent({
+  title,
+  description,
+  hideTitle = false,
+  className,
+  sheetClassName,
+  sheetContentClassName,
+  footer,
+  align = "start",
+  side,
+  sideOffset = 4,
+  children,
+  ...eventProps
+}: ResponsivePopoverContentProps) {
+  const isSheet = useIsResponsiveSheet();
+
+  if (!isSheet) {
+    return (
+      <PopoverContent
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        className={className}
+        {...eventProps}
+      >
+        {children}
+        {footer}
+      </PopoverContent>
+    );
+  }
+
+  return (
+    <DrawerContent className={cn("bg-background text-left", sheetContentClassName)} {...eventProps}>
+      <DrawerTitle className={cn("px-4 pt-1 pb-1 font-semibold text-sm", hideTitle && "sr-only")}>
+        {title}
+      </DrawerTitle>
+      <DrawerDescription className="sr-only">{description ?? title}</DrawerDescription>
+      <div
+        className={cn(
+          "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain",
+          !footer && "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+          sheetClassName,
+        )}
+      >
+        {children}
+      </div>
+      {footer ? <div className="shrink-0 pb-[env(safe-area-inset-bottom)]">{footer}</div> : null}
+    </DrawerContent>
+  );
+}
+
+/** แถวเมนูที่สูงเป็นพื้นที่แตะ 44px เมื่ออยู่ในแผ่นล่าง (36px ใน Popover) */
+export function ResponsivePopoverItem({
+  className,
+  type = "button",
+  ...props
+}: ComponentProps<"button">) {
+  const isSheet = useIsResponsiveSheet();
+  return (
+    <button
+      type={type}
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 text-left text-sm outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
+        isSheet ? "h-11" : "h-9",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/shared/row-table.tsx

@@ -0,0 +1,133 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps, CSSProperties } from "react";
+
+/**
+ * ตารางแถว (grid) ที่หัว/แถว/แถวกลุ่มใช้คอลัมน์ชุดเดียวกัน — หัวซ่อนบนมือถือ แถวเหลือคอลัมน์ที่เลือก (ปกติชื่อ + ปุ่ม)
+ * ปุ่มท้ายแถวโผล่ตอนชี้ (`RowTableActions`) แต่เห็นตลอดบนมือถือ/จอสัมผัส · ยกจาก pi-done (เขียนซ้ำ 4 ที่)
+ * ต่างจาก `DataList` (รายการแถวไม่มีหัวคอลัมน์) และ `SimpleTable` (`<table>` จริงที่เรียง/แบ่งหน้าได้): ตัวนี้เหมาะกับรายการที่ไม่กี่คอลัมน์ ไม่ต้องเรียงข้อมูล
+ *
+ *   <RowTable columns="minmax(0,1fr) 3.5rem 7rem" mobileColumns="minmax(0,1fr) auto">
+ *     <RowTableHeader><span>ชื่อ</span><span className="text-right">เปิด</span><span className="sr-only">คำสั่ง</span></RowTableHeader>
+ *     <RowTableRow>
+ *       <RowTableCell>โปรเจกต์ A</RowTableCell>
+ *       <RowTableCell hideOnMobile align="end">12</RowTableCell>
+ *       <RowTableActions><Button size="icon-sm" aria-label="แก้ไข">…</Button></RowTableActions>
+ *     </RowTableRow>
+ *   </RowTable>
+ */
+export function RowTable({
+  columns,
+  mobileColumns = "minmax(0,1fr) auto",
+  className,
+  style,
+  ...props
+}: ComponentProps<"div"> & {
+  /** `grid-template-columns` ตั้งแต่จอ md ขึ้นไป เช่น "minmax(0,1fr) 3.5rem 7rem" (จำนวนช่องต้องเท่าลูกของหัว/แถว) */
+  columns: string;
+  /** `grid-template-columns` ของมือถือ (ค่าเริ่มต้น "minmax(0,1fr) auto") — ซ่อนช่องที่เหลือด้วย `hideOnMobile` */
+  mobileColumns?: string;
+}) {
+  return (
+    <div
+      data-slot="row-table"
+      style={
+        {
+          "--row-cols": columns,
+          "--row-cols-mobile": mobileColumns,
+          ...style,
+        } as CSSProperties
+      }
+      className={cn("overflow-hidden rounded-xl border bg-card text-card-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+const GRID = "grid grid-cols-(--row-cols-mobile) items-center gap-x-4 md:grid-cols-(--row-cols)";
+
+/** หัวคอลัมน์ — ซ่อนบนมือถือ */
+export function RowTableHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="row-table-header"
+      className={cn(
+        GRID,
+        "hidden h-10 border-b bg-muted/40 px-2 font-semibold text-label text-muted-foreground md:grid",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function RowTableRow({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="row-table-row"
+      className={cn(
+        GRID,
+        "group/row min-h-13 border-b px-2 last:border-b-0 hover:bg-muted/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** ช่องของแถว — `hideOnMobile` ซ่อนบนมือถือ (ต้องตรงกับ `mobileColumns`) */
+export function RowTableCell({
+  hideOnMobile = false,
+  align = "start",
+  className,
+  ...props
+}: ComponentProps<"div"> & {
+  hideOnMobile?: boolean;
+  align?: "start" | "end";
+}) {
+  return (
+    <div
+      data-slot="row-table-cell"
+      className={cn(
+        "min-w-0 text-sm",
+        align === "end" && "text-right tabular-nums",
+        hideOnMobile && "hidden md:block",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** ปุ่มท้ายแถว — โผล่ตอนชี้/โฟกัสในแถว (md ขึ้นไป) · มือถือและจอสัมผัสเห็นตลอด (`reveal={false}` = เห็นตลอดทุกจอ) */
+export function RowTableActions({
+  reveal = true,
+  className,
+  ...props
+}: ComponentProps<"div"> & { reveal?: boolean }) {
+  return (
+    <div
+      data-slot="row-table-actions"
+      className={cn(
+        "flex shrink-0 items-center justify-end gap-0.5",
+        reveal &&
+          "transition-opacity md:opacity-0 md:group-focus-within/row:opacity-100 md:group-hover/row:opacity-100 pointer-coarse:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** แถวหัวกลุ่ม (โฟลเดอร์) คั่นระหว่างแถว — ครอบทั้งความกว้าง ไม่ใช้คอลัมน์ของตาราง */
+export function RowTableGroup({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="row-table-group"
+      className={cn(
+        "flex h-10 items-center gap-1.5 border-b bg-muted/20 px-3 font-semibold text-caption text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/shared/sidebar-nav-item.tsx

@@ -0,0 +1,62 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps } from "react";
+
+/**
+ * แถวเมนูข้างแบบเรียบ (ใช้เมื่อประกอบ sidebar เอง ไม่ใช่ `AppNav`): หน้าปัจจุบันอ่านเป็นสีหลัก (`bg-primary/10 text-primary`)
+ * สูงขั้นต่ำ 32px และ 44px บนจอสัมผัส · `draggingOver` ไฮไลต์ตอนลากรายการมาวาง · ยกจาก pi-done
+ * เป็น `div` (วาง `Link`/ปุ่มไว้ข้างใน) เพื่อให้ใช้เป็นที่วางของการลากได้
+ *
+ *   <SidebarNavItem active={path === "/inbox"}>
+ *     <Link href="/inbox" className="flex-1">กล่องเข้า</Link>
+ *     <SidebarCountBadge count={unread} active={path === "/inbox"} />
+ *   </SidebarNavItem>
+ */
+export function SidebarNavItem({
+  active = false,
+  draggingOver = false,
+  className,
+  ...props
+}: ComponentProps<"div"> & { active?: boolean; draggingOver?: boolean }) {
+  return (
+    <div
+      data-slot="sidebar-nav-item"
+      data-active={active || undefined}
+      className={cn(
+        "relative flex min-h-8 items-center justify-between rounded-md border border-transparent px-2.5 py-1 text-sm transition-[background-color,transform,border-color,color] duration-150 ease-out pointer-coarse:min-h-11",
+        active
+          ? "bg-primary/10 font-semibold text-primary"
+          : "font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/60 hover:text-foreground",
+        draggingOver && "scale-[1.02] border-primary/20 bg-primary/10 text-primary shadow-2xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** ตัวเลขท้ายแถวเมนู — ข้อความเทา ไม่ใช่ pill (เมนูอ่านชื่อก่อน) · 0 ซ่อน · เกิน `max` แสดง "999+" */
+export function SidebarCountBadge({
+  count,
+  active = false,
+  max = 999,
+  className,
+}: {
+  count: number;
+  active?: boolean;
+  max?: number;
+  className?: string;
+}) {
+  if (count <= 0) return null;
+  return (
+    <span
+      data-slot="sidebar-count-badge"
+      className={cn(
+        "shrink-0 text-caption tabular-nums",
+        active ? "font-semibold text-primary" : "text-muted-foreground/80",
+        className,
+      )}
+    >
+      {count > max ? `${max}+` : count}
+    </span>
+  );
+}

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

@@ -213,6 +213,11 @@ export interface UiText {
     dayCount: string;
     allShortcuts: string;
     tapToFill: string;
+    /** `minDate`/`maxDate` — `{date}` = วันที่ขอบเขต (ตาม `locale` ของช่อง) */
+    beforeMin: string;
+    afterMax: string;
+    /** `DateRangePicker` (ตัวกรอง) */
+    clearRange: string;
     last7Days: string;
     last30Days: string;
     thisMonth: string;
@@ -418,6 +423,9 @@ export const UI_TEXT_TH: UiText = {
     dayCount: "{count} วัน",
     allShortcuts: "พิมพ์ลัดทั้งหมด",
     tapToFill: "กดเพื่อเติมในช่อง",
+    beforeMin: "เลือกได้ตั้งแต่วันที่ {date}",
+    afterMax: "เลือกได้ถึงวันที่ {date}",
+    clearRange: "ล้างช่วงวันที่",
     last7Days: "7 วันล่าสุด",
     last30Days: "30 วันล่าสุด",
     thisMonth: "เดือนนี้",
@@ -629,6 +637,9 @@ export const UI_TEXT_EN: UiText = {
     dayCount: "{count} days",
     allShortcuts: "All shortcuts",
     tapToFill: "Tap to fill the field",
+    beforeMin: "Pick {date} or later",
+    afterMax: "Pick {date} or earlier",
+    clearRange: "Clear selection",
     last7Days: "Last 7 days",
     last30Days: "Last 30 days",
     thisMonth: "This month",

package/src/index.ts

@@ -77,6 +77,7 @@ export {
 } from "./components/shared/confirm-dialog";
 export { CountBadge } from "./components/shared/count-badge";
 export { DataList, DataRow } from "./components/shared/data-list";
+export { AccessibleCalendar } from "./components/shared/date/accessible-calendar";
 export {
   DatePicker,
   type DatePickerProps,
@@ -131,7 +132,7 @@ export {
   type FormInvalidNotice,
   useFormInvalidNotice,
 } from "./components/shared/form/form-invalid-notice";
-export { CheckboxField, LabeledField } from "./components/shared/form/labeled-field";
+export { CheckboxField, LabeledField, SwitchField } from "./components/shared/form/labeled-field";
 export { NumberInput } from "./components/shared/form/number-input";
 export { SearchInput, type SearchInputProps } from "./components/shared/form/search-input";
 export {
@@ -175,6 +176,11 @@ export {
   type LanguageSwitchProps,
 } from "./components/shared/language/language-switch";
 export { ErrorState, type RouteError } from "./components/shared/layout/error-state";
+export {
+  ListSection,
+  ListSectionHeader,
+  type ListSectionTone,
+} from "./components/shared/list-section";
 export {
   MonthStepper,
   type MonthStepperProps,
@@ -211,6 +217,24 @@ export {
   type RecordTone,
   recordAccentColor,
 } from "./components/shared/record-card";
+export {
+  ResponsivePopover,
+  ResponsivePopoverContent,
+  type ResponsivePopoverContentProps,
+  ResponsivePopoverItem,
+  type ResponsivePopoverProps,
+  ResponsivePopoverTrigger,
+  type ResponsivePopoverTriggerProps,
+  useIsResponsiveSheet,
+} from "./components/shared/responsive-popover";
+export {
+  RowTable,
+  RowTableActions,
+  RowTableCell,
+  RowTableGroup,
+  RowTableHeader,
+  RowTableRow,
+} from "./components/shared/row-table";
 export {
   describeCondition,
   emptyGroup,
@@ -242,6 +266,7 @@ export { SelectionButton } from "./components/shared/selection-button";
 export { SettingsLayout, type SettingsSection } from "./components/shared/settings-layout";
 export { DangerZone, SettingsRow, SwitchRow } from "./components/shared/settings-row";
 export { SetupChecklist, type SetupChecklistStep } from "./components/shared/setup-checklist";
+export { SidebarCountBadge, SidebarNavItem } from "./components/shared/sidebar-nav-item";
 export { SimpleDialog, SimpleSheet } from "./components/shared/simple-dialog";
 export { paginationRange, SimplePagination } from "./components/shared/simple-pagination";
 export {