@suphark/ui 0.19.0 → 0.20.0

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

@@ -0,0 +1,109 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { cn } from "@suphark/ui/lib/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useUiText } from "./ui-text";
+
+/** เลขหน้าที่แสดง: หน้าแรก/สุดท้ายเสมอ + รอบ ๆ หน้าปัจจุบัน, ช่องว่างเป็น "…" */
+export function paginationRange(
+  page: number,
+  pageCount: number,
+  siblings = 1,
+): Array<number | "…"> {
+  // จำนวนช่องคงที่ (แรก + สุดท้าย + ปัจจุบัน + เพื่อนบ้าน + … สองฝั่ง) ปุ่มจะได้ไม่กระโดดเวลาเปลี่ยนหน้า
+  const slots = siblings * 2 + 5;
+  if (pageCount <= slots) return Array.from({ length: pageCount }, (_, i) => i + 1);
+  const left = Math.max(page - siblings, 1);
+  const right = Math.min(page + siblings, pageCount);
+  const leftGap = left > 2;
+  const rightGap = right < pageCount - 1;
+  const edge = siblings * 2 + 3;
+  const seq = (from: number, to: number) =>
+    Array.from({ length: to - from + 1 }, (_, i) => from + i);
+  if (!leftGap) return [...seq(1, edge), "…", pageCount];
+  if (!rightGap) return [1, "…", ...seq(pageCount - edge + 1, pageCount)];
+  return [1, "…", ...seq(left, right), "…", pageCount];
+}
+
+/**
+ * แบ่งหน้าสำเร็จรูป: ส่งหน้าปัจจุบัน + จำนวนหน้า แล้วได้ ‹ 1 … 4 5 6 … 20 › (แทน Pagination 7 ชิ้น + คำนวณช่วงเอง)
+ * เลขหน้าเริ่มที่ 1; หน้าเดียวหรือไม่มีข้อมูล = ไม่แสดงอะไร; มือถือซ่อนเลขเหลือ "หน้า x/y"
+ * ตาราง tanstack มี pagination ของ `@suphark/ui/data-table` อยู่แล้ว
+ *
+ *   <SimplePagination page={page} pageCount={Math.ceil(total / 20)} onPageChange={setPage} />
+ */
+export function SimplePagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblings = 1,
+  className,
+}: {
+  page: number;
+  pageCount: number;
+  onPageChange: (page: number) => void;
+  /** จำนวนหน้าข้าง ๆ หน้าปัจจุบันที่แสดง (ค่าเริ่มต้น 1) */
+  siblings?: number;
+  className?: string;
+}) {
+  const text = useUiText().pagination;
+  if (pageCount <= 1) return null;
+  const go = (p: number) => onPageChange(Math.min(pageCount, Math.max(1, p)));
+  return (
+    <nav
+      aria-label={text?.label ?? "แบ่งหน้า"}
+      className={cn("flex items-center justify-center gap-1", className)}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        disabled={page <= 1}
+        onClick={() => go(page - 1)}
+        aria-label={text?.previous ?? "ก่อนหน้า"}
+      >
+        <ChevronLeft />
+        <span className="hidden sm:inline">{text?.previous ?? "ก่อนหน้า"}</span>
+      </Button>
+      <ul className="hidden items-center gap-1 sm:flex">
+        {paginationRange(page, pageCount, siblings).map((p, i) =>
+          p === "…" ? (
+            // biome-ignore lint/suspicious/noArrayIndexKey: "…" มีได้สองตัว ตำแหน่งคือ key
+            <li key={`gap-${i}`} aria-hidden className="px-1 text-muted-foreground">
+              …
+            </li>
+          ) : (
+            <li key={p}>
+              <Button
+                type="button"
+                size="icon-sm"
+                variant={p === page ? "outline" : "ghost"}
+                aria-current={p === page ? "page" : undefined}
+                aria-label={`${text?.page ?? "หน้า"} ${p}`}
+                onClick={() => go(p)}
+                className="tabular-nums"
+              >
+                {p}
+              </Button>
+            </li>
+          ),
+        )}
+      </ul>
+      <span className="px-2 text-muted-foreground text-sm tabular-nums sm:hidden">
+        {page} / {pageCount}
+      </span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        disabled={page >= pageCount}
+        onClick={() => go(page + 1)}
+        aria-label={text?.next ?? "ถัดไป"}
+      >
+        <span className="hidden sm:inline">{text?.next ?? "ถัดไป"}</span>
+        <ChevronRight />
+      </Button>
+    </nav>
+  );
+}

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/ui-text.tsx

@@ -56,6 +56,20 @@ export interface UiText {
   /** 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 = {
@@ -93,6 +107,13 @@ export const UI_TEXT_TH: UiText = {
   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 = {
@@ -130,6 +151,13 @@ export const UI_TEXT_EN: UiText = {
   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/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}

package/src/components/ui/attachment.tsx

@@ -6,14 +6,14 @@ import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 const attachmentVariants = cva(
-  "group/attachment relative flex w-fit min-w-0 max-w-full shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
   {
     variants: {
       size: {
         default:
-          "gap-2 text-sm has-data-[slot=attachment-media]:p-2 has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2",
-        sm: "gap-2.5 text-xs has-data-[slot=attachment-media]:p-1.5 has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5",
-        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-media]:p-1 has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1",
+          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
       },
       orientation: {
         horizontal: "min-w-40 items-center",
@@ -46,7 +46,7 @@ function Attachment({
 }
 
 const attachmentMediaVariants = cva(
-  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none",
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
@@ -81,7 +81,7 @@ function AttachmentContent({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="attachment-content"
       className={cn(
-        "min-w-0 max-w-full flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
         className,
       )}
       {...props}
@@ -94,7 +94,7 @@ function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">)
     <span
       data-slot="attachment-title"
       className={cn(
-        "group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block min-w-0 max-w-full truncate font-medium",
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
         className,
       )}
       {...props}
@@ -107,7 +107,7 @@ function AttachmentDescription({ className, ...props }: React.ComponentProps<"sp
     <span
       data-slot="attachment-description"
       className={cn(
-        "mt-0.5 block min-w-0 truncate text-muted-foreground text-xs group-data-[state=error]/attachment:text-destructive/80",
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
         "max-w-full",
         className,
       )}
@@ -173,7 +173,7 @@ function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="attachment-group"
       className={cn(
-        "scroll-fade-x scrollbar-none flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
         className,
       )}
       {...props}

package/src/components/ui/avatar.tsx

@@ -16,7 +16,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "group/avatar relative flex size-8 shrink-0 select-none rounded-full after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
         className,
       )}
       {...props}
@@ -39,7 +39,7 @@ function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props)
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className,
       )}
       {...props}
@@ -52,7 +52,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="avatar-badge"
       className={cn(
-        "absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -81,7 +81,7 @@ function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className,
       )}
       {...props}

package/src/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cn } from "@suphark/ui/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-4xl border border-transparent px-2 py-0.5 font-medium text-xs transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {