@suphark/ui 0.57.0 → 0.59.1

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

@@ -1,12 +1,18 @@
 "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;
@@ -43,11 +49,17 @@ 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);
@@ -64,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);
@@ -125,11 +138,11 @@ 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 = async () => {
-      const shouldRefresh = pullDistanceRef.current >= ACTIVATION_DISTANCE;
+      const shouldRefresh = pullDistanceRef.current >= dims.activation;
       resetPull();
       if (!shouldRefresh || isRefreshing()) return;
       isRefreshingRef.current = true;
@@ -182,12 +195,44 @@ 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"

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

@@ -109,11 +109,14 @@ 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
@@ -125,7 +128,7 @@ export function SwitchField({
     >
       <Switch className={cn(hint && "mt-0.5")} {...props} />
       <span className="flex flex-col gap-0.5">
-        <span className="text-sm">{label}</span>
+        <span className={cn("text-sm", labelClassName)}>{label}</span>
         {hint && <span className="text-muted-foreground text-xs">{hint}</span>}
       </span>
     </Label>

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/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;
@@ -316,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: "ยืนยันการลบ",
@@ -530,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?",

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);
   }, []);