@suphark/ui 0.47.0 → 0.57.0

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/selection-bar.tsx

@@ -24,8 +24,11 @@ export interface SelectionBarProps {
   children?: ReactNode;
   /** ข้อความนับ ใช้ `{count}` เช่น "เลือก {count} รายการ" (ไม่ส่ง = `UiText.selection.selected`) */
   label?: string;
-  /** floating = แถบลอยกลางล่างจอ (ค่าเริ่มต้น) · inline = แถบในหน้า เหนือตาราง */
-  variant?: "floating" | "inline";
+  /**
+   * floating = แถบลอยกลางล่างจอ (ค่าเริ่มต้น) · inline = แถบในหน้า เหนือตาราง ·
+   * pill = แคปซูลสีหลักลอยกลางล่างจอ (กลับสีเข้ม เด่นกว่า floating, ปุ่มโปร่งบนพื้นสีหลัก)
+   */
+  variant?: "floating" | "inline" | "pill";
   className?: string;
 }
 
@@ -48,6 +51,7 @@ export function SelectionBar({
 }: SelectionBarProps) {
   const text = useUiText();
   if (count <= 0) return null;
+  const pill = variant === "pill";
 
   const template = label ?? text.selection?.selected ?? "เลือก {count} รายการ";
   const message = template.replace("{count}", String(count));
@@ -58,8 +62,11 @@ export function SelectionBar({
       // อ่านออกเสียงจำนวนที่เลือกให้ screen reader โดยไม่ขัดจังหวะ
       aria-live="polite"
       className={cn(
-        "flex items-center gap-2 rounded-xl border bg-card px-3 py-2 shadow-lg",
-        variant === "floating" &&
+        "flex items-center gap-2 px-3 py-2 shadow-lg",
+        pill
+          ? "h-11 rounded-full bg-primary py-0 ps-4 pe-2 text-primary-foreground"
+          : "rounded-xl border bg-card",
+        variant !== "inline" &&
           "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 max-w-[calc(100vw-2rem)]",
         className,
       )}
@@ -70,7 +77,11 @@ export function SelectionBar({
           <Button
             key={action.label}
             size="sm"
-            variant={action.destructive ? "destructive" : "outline"}
+            variant={pill ? "ghost" : action.destructive ? "destructive" : "outline"}
+            className={cn(
+              pill && "rounded-full hover:bg-primary-foreground/15 hover:text-primary-foreground",
+              pill && action.destructive && "text-primary-foreground",
+            )}
             disabled={action.disabled}
             onClick={action.onClick}
           >
@@ -85,7 +96,10 @@ export function SelectionBar({
         size="icon-sm"
         aria-label={text.selection?.clear ?? "ล้างการเลือก"}
         onClick={onClear}
-        className="ml-auto shrink-0"
+        className={cn(
+          "ml-auto shrink-0",
+          pill && "rounded-full hover:bg-primary-foreground/15 hover:text-primary-foreground",
+        )}
       >
         <XIcon />
       </Button>

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/status-badge.tsx

@@ -12,13 +12,27 @@ const TONE: Record<Tone, string> = {
   info: "border-info-border bg-info-subtle text-info-subtle-foreground",
 };
 
-/** Badge ของ shadcn (variant outline) + สีตามความหมายของสถานะ */
+/**
+ * Badge ของ shadcn (variant outline) + สีตามความหมายของสถานะ
+ * อยู่ใน `RecordCard variant="quiet"` (data-variant="quiet") จะกลายเป็น "จุดสี + ข้อความสี" ไม่มีกรอบ/พื้น อัตโนมัติ
+ */
 export function StatusBadge({
   tone = "neutral",
   className,
   ...props
 }: Omit<ComponentProps<typeof Badge>, "variant"> & { tone?: Tone }) {
-  return <Badge variant="outline" className={cn(TONE[tone], className)} {...props} />;
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        TONE[tone],
+        "in-data-[variant=quiet]:h-auto in-data-[variant=quiet]:border-transparent in-data-[variant=quiet]:bg-transparent in-data-[variant=quiet]:px-0 in-data-[variant=quiet]:py-0 in-data-[variant=quiet]:font-semibold",
+        "in-data-[variant=quiet]:before:size-1.5 in-data-[variant=quiet]:before:shrink-0 in-data-[variant=quiet]:before:rounded-full in-data-[variant=quiet]:before:bg-current in-data-[variant=quiet]:before:content-['']",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 /** สถานะที่ใช้บ่อยในระบบ → tone */

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

@@ -204,6 +204,20 @@ export interface UiText {
     helpRange: string;
     helpRangeShortcut: string;
     pickEnd: string;
+    /** ช่องพิมพ์ (0.49.0) — `{example}` = ตัวอย่างที่พิมพ์ได้, `{count}` = จำนวนวัน */
+    cannotRead: string;
+    shortcutsLabel: string;
+    showAll: string;
+    backToCalendar: string;
+    openCalendar: string;
+    dayCount: string;
+    allShortcuts: string;
+    tapToFill: string;
+    /** `minDate`/`maxDate` — `{date}` = วันที่ขอบเขต (ตาม `locale` ของช่อง) */
+    beforeMin: string;
+    afterMax: string;
+    /** `DateRangePicker` (ตัวกรอง) */
+    clearRange: string;
     last7Days: string;
     last30Days: string;
     thisMonth: string;
@@ -401,6 +415,17 @@ export const UI_TEXT_TH: UiText = {
     helpRange: "1–5 ก.ค.",
     helpRangeShortcut: "ช่วงจากตัวย่อ (คั่นด้วย .. ~ ถึง to)",
     pickEnd: "เลือกวันสุดท้ายของช่วง",
+    cannotRead: "อ่านไม่ออก — ลองพิมพ์ {example}",
+    shortcutsLabel: "พิมพ์ลัด",
+    showAll: "ทั้งหมด",
+    backToCalendar: "ปฏิทิน",
+    openCalendar: "เปิดปฏิทิน",
+    dayCount: "{count} วัน",
+    allShortcuts: "พิมพ์ลัดทั้งหมด",
+    tapToFill: "กดเพื่อเติมในช่อง",
+    beforeMin: "เลือกได้ตั้งแต่วันที่ {date}",
+    afterMax: "เลือกได้ถึงวันที่ {date}",
+    clearRange: "ล้างช่วงวันที่",
     last7Days: "7 วันล่าสุด",
     last30Days: "30 วันล่าสุด",
     thisMonth: "เดือนนี้",
@@ -604,6 +629,17 @@ export const UI_TEXT_EN: UiText = {
     helpRange: "1–5 Jul",
     helpRangeShortcut: "Range from shortcuts (separate with .. ~ to)",
     pickEnd: "Pick the last day of the range",
+    cannotRead: "Can't read that — try {example}",
+    shortcutsLabel: "Shortcuts",
+    showAll: "All",
+    backToCalendar: "Calendar",
+    openCalendar: "Open calendar",
+    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/components/sortable/sortable-list.tsx

@@ -1048,6 +1048,8 @@ export interface SortableRow {
   isDragging: boolean;
   /** รายการนี้ถูกเลือกอยู่ (`multiSelect`) */
   selected: boolean;
+  /** เลือก/ไม่เลือกแถวนี้ (สำหรับช่องติ๊กในแถว) — ไม่ได้เปิด `multiSelect` = ไม่ทำอะไร */
+  toggleSelected: () => void;
   /**
    * กระจายลงแถวเมื่อเปิด `multiSelect`: คลิกพร้อม ⌘/Ctrl/Shift เพื่อเลือก + `data-selected`
    * สำหรับทำสี (`data-[selected]:bg-primary/10`) — ปิด `multiSelect` หรือเป็นแถวกลุ่ม = object ว่าง
@@ -1188,6 +1190,9 @@ export function useSortableRow({
     handleProps,
     isDragging: sortable.isDragging,
     selected: isSelected,
+    toggleSelected: () => {
+      if (selectable) select(id, "toggle");
+    },
     selectProps,
   };
 }
@@ -1240,6 +1245,7 @@ export function DragHandle({
   className,
   disabled,
   hideWhenDisabled = false,
+  reveal = false,
   ...handleProps
 }: {
   label?: string;
@@ -1247,6 +1253,11 @@ export function DragHandle({
   disabled?: boolean;
   /** ปิดการลากแล้วไม่ต้องแสดงที่จับเลย (ค่าเริ่มต้นคือแสดงแบบจาง ๆ ให้รู้ว่ามีแต่ตอนนี้ลากไม่ได้) */
   hideWhenDisabled?: boolean;
+  /**
+   * "สงบจนกว่าจะแตะ": ซ่อนที่จับไว้ โผล่เมื่อชี้แถว / โฟกัสในแถว (คีย์บอร์ด) / แถวถูกเลือก · จอสัมผัส (ไม่มี hover) เห็นตลอด
+   * ต้องใส่ `group/row` ที่แถว (`<TableRow className="group/row">`) · ที่จับยังโฟกัสด้วย Tab ได้เสมอ
+   */
+  reveal?: boolean;
 } & Record<string, unknown>) {
   const state = useContext(SortableStateContext);
   const off = disabled ?? state.disabled;
@@ -1257,7 +1268,12 @@ export function DragHandle({
       size="icon-sm"
       aria-label={label ?? state.handleLabel}
       disabled={off}
-      className={cn("cursor-grab touch-none active:cursor-grabbing", className)}
+      className={cn(
+        "cursor-grab touch-none active:cursor-grabbing",
+        reveal &&
+          "opacity-0 transition-opacity focus-visible:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 group-data-[selected]/row:opacity-100 [@media(hover:none)]:opacity-100",
+        className,
+      )}
       data-sortable-handle=""
       {...handleProps}
     >

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 {

package/src/pwa.ts

@@ -1,5 +1,5 @@
 /**
- * @suphark/ui/pwa — ชุด Progressive Web App: ลงทะเบียน/อัปเดต service worker, การ์ดชวนติดตั้ง, ดึงลงเพื่อรีเฟรช
+ * @suphark/ui/pwa — ชุด Progressive Web App: ลงทะเบียน/อัปเดต service worker, การ์ดชวนติดตั้ง, ดึงลงเพื่อรีเฟรช, สวิตช์แจ้งเตือน Web Push
  * `PullToRefresh` ใช้ next/navigation จึงแยกจาก barrel หลักเหมือน `@suphark/ui/next`
  */
 export {
@@ -22,3 +22,4 @@ export {
 } from "./components/pwa/pwa-install-card";
 export { PwaServiceWorkerRegistration } from "./components/pwa/pwa-service-worker-registration";
 export { canReloadNow, watchServiceWorkerUpdates } from "./components/pwa/service-worker-updates";
+export { WebPushRow, type WebPushRowProps } from "./components/pwa/web-push-row";