@suphark/ui 0.47.0 → 0.57.0

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/notification-center.tsx

@@ -89,8 +89,14 @@ export interface NotificationEntry {
   details?: ReactNode;
   /** ซ้ายของแถบล่าง — เรื่องเฉพาะโดเมน เช่นยอดเงิน (ซ่อนได้) หรือความคืบหน้ารอบ */
   footer?: ReactNode;
+  /** `variant="quiet"`: เน้นแถวที่ต้องจัดการก่อน (พื้นสี accent/tone จาง ๆ) — ปกติใช้แถวเดียว */
+  highlight?: boolean;
+  /** `variant="quiet"`: แถบความคืบหน้า 0–100 ใต้ยอด (`footer`) */
+  progress?: number;
   /** ยังไม่ได้อ่าน — จุดหน้าชื่อ + พื้นจาง */
   unread?: boolean;
+  /** หัวข้อกลุ่มคั่น (`variant="quiet"`) — แถวติดกันที่ `section` เดียวกันอยู่ใต้หัวเดียว เช่น "ต้องจัดการก่อน" */
+  section?: string;
   /** ปุ่มในแถว (ปุ่มที่ `primary` จะเด่นสุด) */
   actions?: ReadonlyArray<NotificationAction>;
   /** คำสั่งรองใน "…" */
@@ -120,6 +126,11 @@ export interface NotificationCenterProps {
   viewAll?: { label?: ReactNode; onSelect: () => void };
   /** กำลังทำคำสั่งลัดอยู่ — ปิดปุ่มทั้งหมดกันกดซ้ำ */
   busy?: boolean;
+  /**
+   * `card` (ค่าเริ่มต้น) = ชิปนับ + การ์ดแยกใบ · `quiet` = "Quiet ledger": ชิปนับเป็นแท็บขีดเส้นใต้ (ตัวเลข tone danger เป็นสีแดง)
+   * รายการเป็นแถวเรียบในกรอบเดียว (`RecordCard variant="quiet"`) มีหัวกลุ่มคั่นด้วย `section` — เห็นได้มากกว่าเท่าตัว
+   */
+  variant?: "card" | "quiet";
   /**
    * เรนเดอร์แถวเอง (การ์ดของแอป) — ปกติไม่ต้องใช้: แถวมาตรฐานคือ `RecordCard` ตัวเดียวกับที่แอปใช้ทำรายการ
    * อยู่แล้ว · คืน node ที่จะอยู่ใน `<li>`
@@ -149,9 +160,11 @@ export function NotificationCenter({
   empty,
   viewAll,
   busy = false,
+  variant = "card",
   renderItem,
   className,
 }: NotificationCenterProps) {
+  const quiet = variant === "quiet";
   const text = useUiText();
   const heading = title ?? text.notifications?.title ?? "การแจ้งเตือน";
 
@@ -165,7 +178,7 @@ export function NotificationCenter({
         <div className="flex min-w-0 flex-col gap-1.5">
           <Heading className={cn("font-semibold text-sm", headingClassName)}>{heading}</Heading>
           {description && <p className="text-muted-foreground text-xs">{description}</p>}
-          {counts && counts.length > 0 && (
+          {counts && counts.length > 0 && !quiet && (
             <div className="flex flex-wrap items-center gap-1.5">
               {counts.map((chip) => (
                 <CountChip key={chip.key} chip={chip} />
@@ -181,6 +194,8 @@ export function NotificationCenter({
         )}
       </div>
 
+      {quiet && counts && counts.length > 0 && <QuietTabs counts={counts} />}
+
       {items.length === 0 ? (
         (empty ?? (
           <div className="flex flex-col items-center gap-1 py-8 text-center">
@@ -191,16 +206,31 @@ export function NotificationCenter({
           </div>
         ))
       ) : (
-        <ul className="flex flex-col gap-2">
-          {items.map((item) =>
-            renderItem ? (
-              <li key={item.id} data-slot="notification-row" className="min-w-0">
-                {renderItem(item, { busy })}
-              </li>
-            ) : (
-              <NotificationRow key={item.id} item={item} busy={busy} />
-            ),
+        <ul
+          className={cn(
+            "flex flex-col",
+            quiet ? "overflow-hidden rounded-xl border bg-card" : "gap-2",
           )}
+        >
+          {items.map((item, index) => (
+            <Fragment key={item.id}>
+              {quiet && item.section && item.section !== items[index - 1]?.section && (
+                <li
+                  role="presentation"
+                  className="border-b bg-muted px-3.5 pt-2 pb-1.5 font-semibold text-muted-foreground text-xs not-first:border-t"
+                >
+                  {item.section}
+                </li>
+              )}
+              {renderItem ? (
+                <li data-slot="notification-row" className="min-w-0">
+                  {renderItem(item, { busy })}
+                </li>
+              ) : (
+                <NotificationRow item={item} busy={busy} quiet={quiet} />
+              )}
+            </Fragment>
+          ))}
         </ul>
       )}
     </section>
@@ -230,12 +260,70 @@ function CountChip({ chip }: { chip: NotificationChip }) {
   );
 }
 
-function NotificationRow({ item, busy }: { item: NotificationEntry; busy: boolean }) {
+/** แท็บนับแบบขีดเส้นใต้ (`variant="quiet"`) — ตัวเลขของ tone danger เป็นสีแดงตัวหนา */
+function QuietTabs({ counts }: { counts: ReadonlyArray<NotificationChip> }) {
+  return (
+    <div className="flex flex-wrap gap-x-5 border-b">
+      {counts.map((chip) => {
+        const body = (
+          <>
+            {chip.label}
+            <span
+              className={cn(
+                "ms-1 text-xs tabular-nums",
+                isDanger(chip.tone) ? "font-bold text-destructive" : "text-muted-foreground",
+              )}
+            >
+              {chip.count}
+            </span>
+          </>
+        );
+        const tab = cn(
+          "-mb-px border-b-2 px-0.5 pt-2 pb-2.5 text-sm",
+          chip.active
+            ? "border-primary font-semibold"
+            : "border-transparent font-medium text-muted-foreground",
+        );
+        return chip.onSelect ? (
+          <button
+            key={chip.key}
+            type="button"
+            aria-pressed={chip.active ?? false}
+            onClick={chip.onSelect}
+            className={cn(
+              tab,
+              "cursor-pointer outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+            )}
+          >
+            {body}
+          </button>
+        ) : (
+          <span key={chip.key} className={tab}>
+            {body}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function NotificationRow({
+  item,
+  busy,
+  quiet,
+}: {
+  item: NotificationEntry;
+  busy: boolean;
+  quiet: boolean;
+}) {
   const text = useUiText();
   const hasActions = Boolean(item.actions?.length || item.menuActions?.length);
   return (
     <RecordCard
       as="li"
+      variant={quiet ? "quiet" : "card"}
+      highlight={item.highlight}
+      progress={item.progress}
       accent={item.accent ?? item.tone}
       icon={item.icon}
       title={item.title}

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/record-card.tsx

@@ -32,6 +32,16 @@ export function recordAccentColor(accent: RecordAccent | undefined): string | un
 }
 
 export interface RecordCardProps {
+  /**
+   * `card` (ค่าเริ่มต้น) = การ์ดมีสี/ขอบ/พื้นไล่สีครบ · `quiet` = แถวเรียบแบบสมุดบัญชี ("Quiet ledger"):
+   * ไม่มีกรอบ/พื้นสี เส้นคั่นล่างบาง ๆ สีของ `accent` เหลือแค่ไอคอน · ชื่อ + (status · meta) ซ้าย, `footerSummary` (ยอดเงิน) ขวา,
+   * `actions` ท้ายแถว — ยัดได้มากกว่าเท่าตัวในที่เท่ากัน · วางในกรอบ/`<ul>` เดียวกัน (เส้นคั่นล่างของแถวสุดท้ายหายเอง)
+   */
+  variant?: "card" | "quiet";
+  /** `quiet` เท่านั้น: เน้นแถวที่ต้องจัดการก่อน — พื้นไล่เป็นสีของ `accent` จางมาก (ใช้ตัวเดียวต่อรายการ ไม่ใช่ทุกแถว) */
+  highlight?: boolean;
+  /** `quiet` เท่านั้น: แถบความคืบหน้า 0–100 ใต้ `footerSummary` (เช่นรอบที่ทำแล้ว 35/60 = 58) */
+  progress?: number;
   /** สีประจำการ์ด: ขอบซ้าย 3px + ขอบจาง ๆ + พื้นไล่สีจากซ้าย — tone หรือสี CSS (`var(--type-income)`) */
   accent?: RecordAccent;
   /** ไอคอน — ใส่ในกรอบสี่เหลี่ยมมนตามสี accent ให้เอง (`iconTile={false}` = วางตามที่ส่งมา) */
@@ -96,10 +106,23 @@ export function RecordCard({
   unread = false,
   onSelect,
   as: Root = "article",
+  variant = "card",
+  highlight = false,
+  progress,
   className,
 }: RecordCardProps) {
   const text = useUiText();
   const color = recordAccentColor(accent);
+  if (variant === "quiet") {
+    return (
+      <QuietRecord
+        {...{ Root, Title, color, icon, title, titleClassName, status, meta, description }}
+        {...{ details, detailsLabel, footerSummary, actions, unread, onSelect, className }}
+        {...{ highlight, progress }}
+        fallbackDetailsLabel={text.record?.details ?? "ข้อมูลเพิ่มเติม"}
+      />
+    );
+  }
   const small = iconSize === "sm";
   // เยื้อง = ความกว้างไอคอน + gap-3 (44+12 = 56 = ml-14, 36+12 = 48 = ml-12)
   const indent = icon ? (small ? "ml-12 ps-0" : "ml-14 ps-0") : "";
@@ -203,3 +226,138 @@ export function RecordCard({
     </Root>
   );
 }
+
+/** variant="quiet": แถวเดียวต่อรายการ — ไอคอน | ชื่อ + (สถานะ · meta) | ยอด | ปุ่ม */
+function QuietRecord({
+  Root,
+  Title,
+  color,
+  icon,
+  title,
+  titleClassName,
+  status,
+  meta,
+  description,
+  details,
+  detailsLabel,
+  fallbackDetailsLabel,
+  footerSummary,
+  actions,
+  unread,
+  onSelect,
+  highlight,
+  progress,
+  className,
+}: Pick<
+  RecordCardProps,
+  | "icon"
+  | "title"
+  | "titleClassName"
+  | "status"
+  | "meta"
+  | "description"
+  | "details"
+  | "detailsLabel"
+  | "footerSummary"
+  | "actions"
+  | "unread"
+  | "onSelect"
+  | "highlight"
+  | "progress"
+  | "className"
+> & {
+  Root: "article" | "li" | "div";
+  Title: "h2" | "h3" | "h4" | "p";
+  color: string | undefined;
+  fallbackDetailsLabel: string;
+}) {
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: คลิกทั้งแถวเป็นทางลัดของเมาส์ ปุ่มข้างในใช้คีย์บอร์ดได้อยู่แล้ว
+    <Root
+      data-slot="record-card"
+      data-variant="quiet"
+      data-unread={unread || undefined}
+      onClick={onSelect}
+      style={color ? ({ "--record-accent": color } as CSSProperties) : undefined}
+      className={cn(
+        "min-w-0 border-b bg-transparent px-3.5 py-2.5 text-card-foreground last:border-b-0",
+        unread && "bg-muted/40",
+        highlight && color && "bg-[color-mix(in_oklab,var(--record-accent)_9%,var(--card))]",
+        onSelect && "cursor-pointer transition-colors hover:bg-muted/60",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
+        {icon && (
+          <div
+            data-slot="record-card-icon"
+            className={cn(
+              "flex size-9 shrink-0 items-center justify-center rounded-[10px] bg-muted [&_svg]:size-[1.125rem]",
+              color ? "text-(--record-accent)" : "text-muted-foreground",
+            )}
+          >
+            {icon}
+          </div>
+        )}
+        <div className="min-w-0 flex-1 basis-48">
+          <Title className={cn("truncate font-semibold text-sm leading-snug", titleClassName)}>
+            {unread && (
+              <span
+                className="me-1.5 inline-block size-1.5 rounded-full bg-primary align-middle"
+                aria-hidden="true"
+              />
+            )}
+            {title}
+          </Title>
+          {(status != null || meta != null) && (
+            <div className="mt-0.5 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-muted-foreground text-xs">
+              {status}
+              {status != null && meta != null && <span aria-hidden="true">·</span>}
+              {meta}
+            </div>
+          )}
+          {description != null && (
+            <p className="mt-0.5 text-muted-foreground text-xs">{description}</p>
+          )}
+        </div>
+        {footerSummary != null && (
+          <div className="min-w-24 shrink-0 text-end tabular-nums">
+            {footerSummary}
+            {progress != null && (
+              <div
+                role="progressbar"
+                aria-valuenow={progress}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                className="mt-1 h-[3px] overflow-hidden rounded-full bg-muted"
+              >
+                <div
+                  className="h-full rounded-full bg-info"
+                  style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {actions != null && (
+          // biome-ignore lint/a11y/noStaticElementInteractions: ตัวกั้นคลิกเฉย ๆ ไม่ใช่ตัวควบคุม
+          <div
+            className="flex shrink-0 items-center gap-1.5"
+            onClick={(event: MouseEvent) => event.stopPropagation()}
+            onKeyDown={(event: KeyboardEvent) => event.stopPropagation()}
+          >
+            {actions}
+          </div>
+        )}
+      </div>
+      {details != null && (
+        <section
+          aria-label={detailsLabel ?? fallbackDetailsLabel}
+          className={cn("mt-2 border-t pt-2", icon && "ms-12")}
+        >
+          {details}
+        </section>
+      )}
+    </Root>
+  );
+}