@suphark/ui 0.18.0 → 0.20.0

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

@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@suphark/ui/components/ui/table";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+import { EmptyRow } from "./empty-row";
+
+export interface SimpleTableColumn<T> {
+  /** key ของคอลัมน์ — ถ้าตรงกับ field ของแถวและไม่ส่ง cell จะแสดงค่านั้นตรง ๆ */
+  key: string;
+  header: ReactNode;
+  cell?: (row: T, index: number) => ReactNode;
+  align?: "left" | "center" | "right";
+  /** class ของทั้งหัวและเซลล์ เช่น "w-32" หรือ "hidden md:table-cell" (ซ่อนบนมือถือ) */
+  className?: string;
+}
+
+/**
+ * ตารางสำเร็จรูปจาก columns + rows (แทน Table/TableHeader/TableRow/TableHead/TableBody/TableCell + map สองชั้น)
+ * สำหรับรายการเล็ก–กลางที่ไม่ต้อง sort/filter/เลือกหลายแถว — ต้องการพวกนั้นใช้ `@suphark/ui/data-table`
+ * ไม่มีแถว = แสดง `empty` ในแถวเดียวเต็มความกว้าง; ตัวเลขใช้ `align: "right"` (tabular-nums ให้เอง)
+ *
+ *   <SimpleTable rows={members} getRowKey={(m) => m.id} empty="ยังไม่มีสมาชิก"
+ *     columns={[{ key: "name", header: "ชื่อ" },
+ *               { key: "role", header: "บทบาท", cell: (m) => <StatusBadge>{m.role}</StatusBadge> },
+ *               { key: "actions", header: "", align: "right", cell: (m) => <ActionMenu items={…} /> }]} />
+ */
+export function SimpleTable<T>({
+  columns,
+  rows,
+  getRowKey,
+  empty = "ไม่มีข้อมูล",
+  onRowClick,
+  caption,
+  className,
+}: {
+  columns: ReadonlyArray<SimpleTableColumn<T>>;
+  rows: ReadonlyArray<T>;
+  getRowKey: (row: T, index: number) => string | number;
+  empty?: ReactNode;
+  /** คลิกทั้งแถว (เช่นเปิดรายละเอียด) — ปุ่มในแถวควร stopPropagation เอง */
+  onRowClick?: (row: T) => void;
+  /** คำอธิบายตารางสำหรับ screen reader (sr-only) */
+  caption?: string;
+  className?: string;
+}) {
+  const alignClass = (a?: "left" | "center" | "right") =>
+    a === "right" ? "text-right tabular-nums" : a === "center" ? "text-center" : undefined;
+  return (
+    <div className={cn("overflow-hidden rounded-xl border bg-card", className)}>
+      <Table>
+        {caption && <caption className="sr-only">{caption}</caption>}
+        <TableHeader>
+          <TableRow>
+            {columns.map((c) => (
+              <TableHead key={c.key} className={cn(alignClass(c.align), c.className)}>
+                {c.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.length === 0 ? (
+            <EmptyRow colSpan={columns.length}>{empty}</EmptyRow>
+          ) : (
+            rows.map((row, i) => (
+              <TableRow
+                key={getRowKey(row, i)}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+                className={cn(onRowClick && "cursor-pointer")}
+              >
+                {columns.map((c) => (
+                  <TableCell key={c.key} className={cn(alignClass(c.align), c.className)}>
+                    {c.cell
+                      ? c.cell(row, i)
+                      : String((row as Record<string, unknown>)[c.key] ?? "")}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/components/shared/simple-tabs.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@suphark/ui/components/ui/accordion";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@suphark/ui/components/ui/tabs";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+export interface SimpleTabItem {
+  value: string;
+  label: ReactNode;
+  content: ReactNode;
+  /** ท้ายชื่อแท็บ เช่น `<CountBadge value={3} />` */
+  badge?: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+/**
+ * แท็บสำเร็จรูปจาก array เดียว (แทน Tabs/TabsList/TabsTrigger/TabsContent 4 ชิ้นต่อแท็บ)
+ * แท็บที่เป็นหน้าแยก (เปลี่ยน URL) ใช้ `SectionNav`/`TopTabs` แทน — ตัวนี้สลับเนื้อหาในหน้าเดียว
+ *
+ *   <SimpleTabs items={[{ value: "info", label: "ข้อมูล", content: <Info /> },
+ *                       { value: "log", label: "ประวัติ", badge: <CountBadge value={3} />, content: <Log /> }]} />
+ */
+export function SimpleTabs({
+  items,
+  value,
+  onValueChange,
+  initialValue,
+  variant = "default",
+  fullWidth = false,
+  className,
+  listClassName,
+}: {
+  items: ReadonlyArray<SimpleTabItem>;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** แท็บเริ่มต้นแบบ uncontrolled (ค่าเริ่มต้น: แท็บแรก) */
+  initialValue?: string;
+  /** default = พื้นเทาแบบปุ่ม · line = เส้นใต้ (หัวการ์ด/หน้า) */
+  variant?: "default" | "line";
+  /** แท็บแบ่งเต็มความกว้าง (มือถือ/กล่องแคบ) */
+  fullWidth?: boolean;
+  className?: string;
+  listClassName?: string;
+}) {
+  return (
+    <Tabs
+      value={value}
+      // base-ui-ok: ค่าเริ่มต้นใช้ครั้งเดียวตอน mount (uncontrolled) — ส่ง value ถ้าจะคุมเอง
+      defaultValue={value === undefined ? (initialValue ?? items[0]?.value) : undefined}
+      onValueChange={(v) => onValueChange?.(String(v))}
+      className={className}
+    >
+      <TabsList
+        variant={variant}
+        className={cn(fullWidth && "w-full", "max-w-full overflow-x-auto", listClassName)}
+      >
+        {items.map((item) => (
+          <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
+            {item.icon}
+            {item.label}
+            {item.badge}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {items.map((item) => (
+        <TabsContent key={item.value} value={item.value}>
+          {item.content}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
+
+export interface SimpleAccordionItem {
+  value: string;
+  title: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+/**
+ * หัวข้อพับเก็บได้จาก array เดียว (FAQ, รายละเอียดเพิ่มเติม, กลุ่มการตั้งค่า)
+ * `multiple` = เปิดหลายข้อพร้อมกันได้; `initialOpen` = ข้อที่เปิดไว้ตอนแรก
+ */
+export function SimpleAccordion({
+  items,
+  multiple = false,
+  initialOpen,
+  className,
+}: {
+  items: ReadonlyArray<SimpleAccordionItem>;
+  multiple?: boolean;
+  initialOpen?: ReadonlyArray<string>;
+  className?: string;
+}) {
+  return (
+    <Accordion
+      multiple={multiple}
+      // base-ui-ok: ค่าเริ่มต้นใช้ครั้งเดียวตอน mount
+      defaultValue={initialOpen ? [...initialOpen] : undefined}
+      className={className}
+    >
+      {items.map((item) => (
+        <AccordionItem key={item.value} value={item.value} disabled={item.disabled}>
+          <AccordionTrigger>{item.title}</AccordionTrigger>
+          <AccordionContent>{item.content}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}

package/src/components/shared/simple-tooltip.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@suphark/ui/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactElement, ReactNode } from "react";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+/**
+ * tooltip สำเร็จรูป: ห่อ element เดียว + ข้อความ (แทน Tooltip/TooltipTrigger/TooltipContent 3 ชิ้น)
+ * `content` ว่าง = ไม่มี tooltip (ไม่ต้องเขียนเงื่อนไขเอง) · ปุ่มไอคอนอย่างเดียวยังต้องมี aria-label ของตัวเอง
+ * คำอธิบายยาวหลังไอคอน (i) ใช้ `InfoHint`
+ *
+ *   <SimpleTooltip content="คัดลอกลิงก์"><Button size="icon" aria-label="คัดลอกลิงก์"><Copy /></Button></SimpleTooltip>
+ */
+export function SimpleTooltip({
+  content,
+  children,
+  side = "top",
+  className,
+}: {
+  content: ReactNode;
+  /** element ที่ชี้แล้วโชว์ tooltip (ต้องรับ ref/props ได้ เช่น Button) */
+  children: ReactElement;
+  side?: Side;
+  className?: string;
+}) {
+  if (content === null || content === undefined || content === "") return children;
+  return (
+    <Tooltip>
+      <TooltipTrigger render={children} />
+      <TooltipContent side={side} className={cn("max-w-xs text-pretty", className)}>
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+/**
+ * popover สำเร็จรูป: trigger + หัวข้อ/คำอธิบาย (ไม่บังคับ) + เนื้อหา ในคอมโพเนนต์เดียว
+ * (แทน Popover/PopoverTrigger/PopoverContent/PopoverHeader/PopoverTitle/PopoverDescription)
+ * ใช้กับตัวกรองเล็ก ๆ, รายละเอียดสั้น, ฟอร์มบรรทัดเดียว — เนื้อหายาวใช้ `SimpleSheet`/`SimpleDialog`
+ */
+export function SimplePopover({
+  trigger,
+  title,
+  description,
+  children,
+  open,
+  onOpenChange,
+  side = "bottom",
+  align = "center",
+  className,
+}: {
+  trigger: ReactElement;
+  title?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: Side;
+  align?: "start" | "center" | "end";
+  className?: string;
+}) {
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger render={trigger} />
+      <PopoverContent side={side} align={align} className={className}>
+        {(title || description) && (
+          <PopoverHeader>
+            {title && <PopoverTitle>{title}</PopoverTitle>}
+            {description && <PopoverDescription>{description}</PopoverDescription>}
+          </PopoverHeader>
+        )}
+        {children}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/shared/skip-link.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+/**
+ * ลิงก์ "ข้ามไปเนื้อหา" — element แรกที่ Tab จาก address bar เจอ แล้วกด Enter ข้าม header/เมนูไปที่เนื้อหา
+ * มองไม่เห็นจนกว่าจะโฟกัส; `AppShell` ใส่ให้แล้ว (`href="#app-main"`) — ตัวนี้สำหรับหน้าที่ไม่ได้ใช้ AppShell
+ * (เช่นหน้า login/เอกสารของ Pi PDF ที่เขียนเอง) — จำไว้ว่าเป้าหมายต้องมี `tabIndex={-1}`
+ */
+export function SkipLink({
+  href = "#main-content",
+  children = "ข้ามไปเนื้อหา",
+  className,
+}: {
+  href?: string;
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <a
+      data-slot="skip-link"
+      href={href}
+      className={cn(
+        "sr-only z-[60] rounded-md bg-background px-3 py-2 font-medium text-sm ring-2 ring-ring focus:not-sr-only focus:fixed focus:top-2 focus:left-2",
+        className,
+      )}
+    >
+      {children}
+    </a>
+  );
+}

package/src/components/shared/stat.tsx

@@ -1,26 +1,130 @@
 import { Card, CardContent } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
+import { Minus, TrendingDown, TrendingUp } from "lucide-react";
 import type { ReactNode } from "react";
 
-/** ตัวเลขสรุปบนหน้าภาพรวม/สุขภาพระบบ */
+export type StatTone = "default" | "success" | "warning" | "destructive" | "info";
+
+const TONE_TEXT: Record<StatTone, string> = {
+  default: "text-foreground",
+  success: "text-success",
+  warning: "text-warning",
+  destructive: "text-destructive",
+  info: "text-info",
+};
+const TONE_ICON: Record<StatTone, string> = {
+  default: "bg-muted text-muted-foreground",
+  success: "bg-success-subtle text-success-subtle-foreground",
+  warning: "bg-warning-subtle text-warning-subtle-foreground",
+  destructive: "bg-destructive-subtle text-destructive-subtle-foreground",
+  info: "bg-info-subtle text-info-subtle-foreground",
+};
+
+export interface StatDelta {
+  /** ข้อความที่แสดง เช่น "+12%" หรือ "+3 สัปดาห์นี้" */
+  value: ReactNode;
+  /** ขึ้น = ดี/ไม่ดี ต่างกันไปตามตัวชี้วัด → แอปบอกโทนเอง (ค่าเริ่มต้นดูจาก direction) */
+  direction?: "up" | "down" | "flat";
+  tone?: StatTone;
+  /** ข้อความเทียบ เช่น "จากเดือนก่อน" */
+  hint?: ReactNode;
+}
+
+const DELTA_ICON = { up: TrendingUp, down: TrendingDown, flat: Minus };
+
+/**
+ * ตัวเลขสรุปบนหน้าภาพรวม/สุขภาพระบบ — เพิ่มไอคอน, ป้าย และส่วนต่างจากช่วงก่อนได้
+ * (Pi Auth มี 17 การ์ดแบบนี้, DueBell มี DeltaBadge ของตัวเอง)
+ */
 export function Stat({
   label,
   value,
   hint,
+  icon,
+  badge,
+  delta,
+  tone = "default",
   className,
 }: {
   label: ReactNode;
   value: ReactNode;
   hint?: ReactNode;
+  /** ไอคอนมุมขวาบน (ใส่กรอบพื้นตาม `tone` ให้) */
+  icon?: ReactNode;
+  /** ป้ายท้ายป้ายชื่อ เช่น `<StatusBadge>` */
+  badge?: ReactNode;
+  /** ส่วนต่างจากช่วงก่อน */
+  delta?: StatDelta;
+  /** โทนของตัวเลขและไอคอน */
+  tone?: StatTone;
   className?: string;
 }) {
+  const direction = delta?.direction ?? "flat";
+  const DeltaIcon = DELTA_ICON[direction];
+  const deltaTone =
+    delta?.tone ??
+    (direction === "up" ? "success" : direction === "down" ? "destructive" : "default");
+
   return (
-    <Card className={cn("gap-1 py-4", className)}>
-      <CardContent className="flex flex-col gap-1">
-        <span className="text-xs font-medium text-muted-foreground">{label}</span>
-        <span className="text-2xl font-semibold tabular-nums tracking-tight">{value}</span>
-        {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
+    <Card data-slot="stat" className={cn("gap-1 py-4", className)}>
+      <CardContent className="flex items-start gap-3">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <span className="flex items-center gap-1.5 font-medium text-muted-foreground text-xs">
+            <span className="truncate">{label}</span>
+            {badge}
+          </span>
+          <span
+            className={cn("font-semibold text-2xl tabular-nums tracking-tight", TONE_TEXT[tone])}
+          >
+            {value}
+          </span>
+          {delta && (
+            <span className="flex items-center gap-1 text-xs">
+              <span className={cn("flex items-center gap-0.5 font-medium", TONE_TEXT[deltaTone])}>
+                <DeltaIcon className="size-3.5" aria-hidden="true" />
+                {delta.value}
+              </span>
+              {delta.hint && <span className="text-muted-foreground">{delta.hint}</span>}
+            </span>
+          )}
+          {hint && <span className="text-muted-foreground text-xs">{hint}</span>}
+        </div>
+        {icon && (
+          <span
+            aria-hidden="true"
+            className={cn(
+              "grid size-9 shrink-0 place-items-center rounded-lg [&_svg]:size-4",
+              TONE_ICON[tone],
+            )}
+          >
+            {icon}
+          </span>
+        )}
       </CardContent>
     </Card>
   );
 }
+
+/** กริดของ `Stat` — คอลัมน์ตามจำนวนที่ต้องการ (ค่าเริ่มต้น 1 → 2 → 4 ตามความกว้างจอ) */
+export function StatGrid({
+  children,
+  columns = 4,
+  className,
+}: {
+  children: ReactNode;
+  columns?: 2 | 3 | 4;
+  className?: string;
+}) {
+  return (
+    <div
+      data-slot="stat-grid"
+      className={cn(
+        "grid gap-3 sm:grid-cols-2",
+        columns === 2 ? "lg:grid-cols-2" : columns === 3 ? "lg:grid-cols-3" : "lg:grid-cols-4",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -53,6 +53,23 @@ export interface UiText {
   search?: Partial<{ placeholder: string; label: string; clear: string }>;
   /** LanguageSwitch/LanguageMenuItems: หัวกลุ่ม + aria-label ปุ่ม (optional — "ภาษา") */
   language?: Partial<{ label: string }>;
+  /** ConfirmDialog `requireText`: คำนำหน้า/ต่อท้ายช่องพิมพ์ยืนยัน (optional — "พิมพ์" … "เพื่อยืนยัน") */
+  confirmTypeToConfirm?: string;
+  confirmTypeToConfirmSuffix?: string;
+  /** MonthStepper (optional) */
+  month?: Partial<{ previous: string; next: string; current: string }>;
+  /** SetupChecklist: ป้ายขั้นเสริม + ความคืบหน้า ({done}/{total}) + ปุ่มของขั้นที่ทำแล้ว (optional) */
+  setup?: Partial<{ optional: string; progress: string; view: string }>;
+  /** FilterBar: ปุ่มล้างตัวกรอง (optional) */
+  filters?: Partial<{ clear: string; label: string }>;
+  /** SettingsLayout: ปุ่มย้อนกลับบนมือถือ + ไม่พบหัวข้อ (optional) */
+  settings?: Partial<{ back: string; empty: string; label: string }>;
+  /** MobileTabBar: aria-label ของแถบ (optional) */
+  mobileTabs?: string;
+  /** SimpleDialog/SimpleSheet: ปุ่มปิด (sr-only) (optional — "ปิด") */
+  close?: string;
+  /** SimplePagination (optional) */
+  pagination?: Partial<{ previous: string; next: string; label: string; page: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -88,6 +105,15 @@ export const UI_TEXT_TH: UiText = {
   sectionNav: { tabs: "แท็บย่อย" },
   search: { placeholder: "ค้นหา…", label: "ค้นหา", clear: "ล้างการค้นหา" },
   language: { label: "ภาษา" },
+  confirmTypeToConfirm: "พิมพ์",
+  confirmTypeToConfirmSuffix: "เพื่อยืนยัน",
+  month: { previous: "เดือนก่อน", next: "เดือนถัดไป", current: "กลับไปเดือนนี้" },
+  setup: { optional: "ไม่บังคับ", progress: "ทำแล้ว {done} จาก {total} ขั้น", view: "ดู" },
+  filters: { clear: "ล้างตัวกรอง", label: "ตัวกรอง" },
+  settings: { back: "กลับ", empty: "ไม่พบหัวข้อที่ตรงกับคำค้น", label: "หัวข้อการตั้งค่า" },
+  mobileTabs: "เมนูหลัก",
+  close: "ปิด",
+  pagination: { previous: "ก่อนหน้า", next: "ถัดไป", label: "แบ่งหน้า", page: "หน้า" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -123,6 +149,15 @@ export const UI_TEXT_EN: UiText = {
   sectionNav: { tabs: "Section tabs" },
   search: { placeholder: "Search…", label: "Search", clear: "Clear search" },
   language: { label: "Language" },
+  confirmTypeToConfirm: "Type",
+  confirmTypeToConfirmSuffix: "to confirm",
+  month: { previous: "Previous month", next: "Next month", current: "Back to this month" },
+  setup: { optional: "Optional", progress: "{done} of {total} steps done", view: "View" },
+  filters: { clear: "Clear filters", label: "Filters" },
+  settings: { back: "Back", empty: "No settings match your search", label: "Settings sections" },
+  mobileTabs: "Main menu",
+  close: "Close",
+  pagination: { previous: "Previous", next: "Next", label: "Pagination", page: "Page" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/components/shared/user-identity.tsx

@@ -0,0 +1,61 @@
+import { Initials } from "@suphark/ui/components/shared/initials";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+export interface UserIdentityProps {
+  name: string | null | undefined;
+  /** บรรทัดรอง — ปกติคืออีเมล */
+  email?: ReactNode;
+  /** รูปโปรไฟล์ (ไม่มี = ตัวย่อชื่อพร้อมสีพื้นคงที่ต่อชื่อ) */
+  src?: string | null;
+  /** ต่อท้ายชื่อ เช่น `<StatusBadge>` หรือป้าย "คุณ" */
+  badge?: ReactNode;
+  /** ใต้บรรทัดอีเมล เช่น "เข้าใช้ล่าสุด 2 ชม.ที่แล้ว" */
+  hint?: ReactNode;
+  /** sm = ใช้ในแถวตาราง (avatar size-7), default = size-9 */
+  size?: "sm" | "default";
+  /** ซ่อน avatar (เมื่อแถวมีรูปอยู่แล้ว) */
+  hideAvatar?: boolean;
+  className?: string;
+}
+
+/**
+ * ชื่อผู้ใช้ + อีเมล + avatar ในบล็อกเดียว — แถวตาราง, เมนู, การ์ดสมาชิก (Pi Auth เขียนซ้ำ ~15 จุด)
+ * ชื่อว่าง = แสดงอีเมลเป็นบรรทัดหลักแทน (ผู้ใช้ที่ยังไม่ตั้งชื่อ)
+ */
+export function UserIdentity({
+  name,
+  email,
+  src,
+  badge,
+  hint,
+  size = "default",
+  hideAvatar = false,
+  className,
+}: UserIdentityProps) {
+  const displayName = name?.trim() || null;
+  const primary = displayName ?? (typeof email === "string" ? email : null);
+  const secondary = displayName ? email : null;
+
+  return (
+    <div data-slot="user-identity" className={cn("flex min-w-0 items-center gap-2", className)}>
+      {!hideAvatar && (
+        <Initials
+          name={displayName ?? (typeof email === "string" ? email : "")}
+          src={src}
+          className={size === "sm" ? "size-7" : "size-9"}
+        />
+      )}
+      <div className="flex min-w-0 flex-col">
+        <span className="flex items-center gap-1.5">
+          <span className={cn("truncate font-medium", size === "sm" ? "text-sm" : "text-sm")}>
+            {primary ?? "—"}
+          </span>
+          {badge}
+        </span>
+        {secondary && <span className="truncate text-muted-foreground text-xs">{secondary}</span>}
+        {hint && <span className="truncate text-muted-foreground text-xs">{hint}</span>}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/accordion.tsx

@@ -28,7 +28,7 @@ function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className,
         )}
         {...props}
@@ -51,7 +51,7 @@ function AccordionContent({ className, children, ...props }: AccordionPrimitive.
   return (
     <AccordionPrimitive.Panel
       data-slot="accordion-content"
-      className="overflow-hidden text-sm data-closed:animate-accordion-up data-open:animate-accordion-down"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
       {...props}
     >
       <div

package/src/components/ui/alert-dialog.tsx

@@ -22,7 +22,7 @@ function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdr
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-open:fade-in-0 data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className,
       )}
       {...props}
@@ -44,7 +44,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground outline-none ring-1 ring-foreground/10 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-closed:animate-out data-open:animate-in data-[size=default]:sm:max-w-sm",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className,
         )}
         {...props}
@@ -100,7 +100,7 @@ function AlertDialogTitle({
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
       className={cn(
-        "font-medium text-base sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
         className,
       )}
       {...props}
@@ -116,7 +116,7 @@ function AlertDialogDescription({
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
       className={cn(
-        "text-balance text-muted-foreground text-sm md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className,
       )}
       {...props}

package/src/components/ui/alert.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 has-data-[slot=alert-action]:pr-18 *:[svg:not([class*='size-'])]:size-4 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -51,7 +51,7 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="alert-description"
       className={cn(
-        "text-balance text-muted-foreground text-sm md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className,
       )}
       {...props}