@suphark/ui 0.53.0 → 0.59.1

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,39 @@ 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,
+  labelClassName,
+  ...props
+}: ComponentProps<typeof Switch> & {
+  label: ReactNode;
+  /** คำอธิบายใต้ label (เยื้องตรงกับ label) */
+  hint?: ReactNode;
+  /** ทับสไตล์ข้อความป้าย (ค่าเริ่มต้น `text-sm`) เช่น `text-caption font-semibold` */
+  labelClassName?: string;
+}) {
+  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={cn("text-sm", labelClassName)}>{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/notification-center.tsx

@@ -122,6 +122,8 @@ export interface NotificationCenterProps {
   description?: ReactNode;
   /** ไม่มีรายการ — ส่ง element เองได้ทั้งก้อน */
   empty?: ReactNode;
+  /** ปุ่มคำสั่งของทั้งกล่องที่หัว เช่น "อ่านทั้งหมดแล้ว" (ซ้ายของ "ดูทั้งหมด") — ไม่ต้องยืม `viewAll` มาใช้ผิดความหมาย */
+  headerAction?: ReactNode;
   /** ลิงก์/ปุ่ม "ดูทั้งหมด" มุมขวาบน */
   viewAll?: { label?: ReactNode; onSelect: () => void };
   /** กำลังทำคำสั่งลัดอยู่ — ปิดปุ่มทั้งหมดกันกดซ้ำ */
@@ -159,6 +161,7 @@ export function NotificationCenter({
   description,
   empty,
   viewAll,
+  headerAction,
   busy = false,
   variant = "card",
   renderItem,
@@ -186,11 +189,16 @@ export function NotificationCenter({
             </div>
           )}
         </div>
-        {viewAll && (
-          <Button variant="ghost" size="sm" onClick={viewAll.onSelect} className="shrink-0">
-            {viewAll.label ?? text.notifications?.viewAll ?? "ดูทั้งหมด"}
-            <ChevronRightIcon />
-          </Button>
+        {(headerAction || viewAll) && (
+          <div className="flex shrink-0 items-center gap-1">
+            {headerAction}
+            {viewAll && (
+              <Button variant="ghost" size="sm" onClick={viewAll.onSelect} className="shrink-0">
+                {viewAll.label ?? text.notifications?.viewAll ?? "ดูทั้งหมด"}
+                <ChevronRightIcon />
+              </Button>
+            )}
+          </div>
         )}
       </div>
 

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

@@ -81,6 +81,10 @@ export interface UiText {
   table?: Partial<{
     rowsPerPage: string;
     pageOf: string;
+    /** `variant="quiet"` — `{from}`/`{to}`/`{total}` และ `{shown}`/`{total}` */
+    rangeOf: string;
+    shownOf: string;
+    density: string;
     rowsSelected: string;
     noResults: string;
     deleteTitle: string;
@@ -213,6 +217,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;
@@ -311,6 +320,9 @@ export const UI_TEXT_TH: UiText = {
   table: {
     rowsPerPage: "แถวต่อหน้า",
     pageOf: "หน้า {page} จาก {pages}",
+    rangeOf: "{from}–{to} จาก {total}",
+    shownOf: "{shown} จาก {total} รายการ",
+    density: "ความหนาแน่นของแถว",
     rowsSelected: "เลือก {selected} จาก {total} แถว",
     noResults: "ไม่พบข้อมูล",
     deleteTitle: "ยืนยันการลบ",
@@ -418,6 +430,9 @@ export const UI_TEXT_TH: UiText = {
     dayCount: "{count} วัน",
     allShortcuts: "พิมพ์ลัดทั้งหมด",
     tapToFill: "กดเพื่อเติมในช่อง",
+    beforeMin: "เลือกได้ตั้งแต่วันที่ {date}",
+    afterMax: "เลือกได้ถึงวันที่ {date}",
+    clearRange: "ล้างช่วงวันที่",
     last7Days: "7 วันล่าสุด",
     last30Days: "30 วันล่าสุด",
     thisMonth: "เดือนนี้",
@@ -522,6 +537,9 @@ export const UI_TEXT_EN: UiText = {
   table: {
     rowsPerPage: "Rows per page",
     pageOf: "Page {page} of {pages}",
+    rangeOf: "{from}–{to} of {total}",
+    shownOf: "{shown} of {total} items",
+    density: "Row density",
     rowsSelected: "{selected} of {total} row(s) selected",
     noResults: "No results",
     deleteTitle: "Are you sure?",
@@ -629,6 +647,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/data-table.ts

@@ -12,6 +12,7 @@ export {
   DataTableColumnHeader,
   DataTableDateRangeFilter,
   DataTableFacetedFilter,
+  type DataTableMobileSlot,
   DataTablePagination,
   type DataTableProps,
   DataTableToolbar,

package/src/hooks/use-mobile.ts

@@ -8,12 +8,14 @@ export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    // เบราว์เซอร์เก่า/jsdom ที่ไม่มี matchMedia: ใช้ค่าตอน mount อย่างเดียว (ไม่ติดตามการปรับขนาด) แทนที่จะพังทั้งหน้า
+    if (typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     return () => mql.removeEventListener("change", onChange);
   }, []);