@suphark/ui 0.6.1 → 0.8.0

package/src/components/app-shell/user-menu.tsx

@@ -2,6 +2,7 @@
 
 import { Initials } from "@suphark/ui/components/shared/initials";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -41,6 +42,8 @@ export interface UserMenuProps {
   variant?: "sidebar" | "header";
   align?: "start" | "end";
   className?: string;
+  /** aria-label ของปุ่มเปิดเมนู (ค่าเริ่มต้น `UiText.userMenu` "เมนูผู้ใช้") — ต่อท้ายชื่อผู้ใช้ให้ */
+  menuLabel?: string;
 }
 
 /** เมนูผู้ใช้ (ยกจาก supplychain NavUser + Pi Auth UserMenu) */
@@ -48,11 +51,13 @@ export function UserMenu({
   user,
   children,
   onSignOut,
-  signOutLabel = "ออกจากระบบ",
+  signOutLabel,
   variant = "sidebar",
   align = variant === "header" ? "end" : "start",
   className,
+  menuLabel,
 }: UserMenuProps) {
+  const text = useUiText();
   const [pending, start] = useTransition();
   const description = user.description ?? user.email;
   return (
@@ -61,7 +66,7 @@ export function UserMenu({
         render={
           <Button
             variant="ghost"
-            aria-label={`เปิดเมนูผู้ใช้ ${user.name}`}
+            aria-label={`${menuLabel ?? text.userMenu ?? "เมนูผู้ใช้"}: ${user.name}`}
             className={cn(
               variant === "sidebar"
                 ? "h-auto w-full justify-start gap-2.5 px-2 py-2 text-left group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:p-0"
@@ -122,7 +127,7 @@ export function UserMenu({
             <DropdownMenuSeparator />
             <DropdownMenuItem disabled={pending} onClick={() => start(() => onSignOut())}>
               <LogOut aria-hidden="true" />
-              {signOutLabel}
+              {signOutLabel ?? text.signOut ?? "ออกจากระบบ"}
             </DropdownMenuItem>
           </>
         )}

package/src/components/data-table/data-table.tsx

@@ -139,6 +139,8 @@ export function DataTable<TData, TValue>({
   enableColumnResizing = false,
   enableRowSelection = true,
   isLoading,
+  showToolbar = true,
+  showPagination = true,
   pageSizeOptions,
   toolbarFilters,
   preservedFilterIds,
@@ -347,22 +349,26 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className={cn("flex flex-col gap-4", containerClassName)}>
-      <DataTableToolbar
-        table={table}
-        facetedFilters={facetedFilters}
-        actionsComponent={actionsComponent?.(table)}
-        globalFilterPlaceholder={globalFilterPlaceholder}
-        toolbarFilters={toolbarFilters?.(table)}
-        preservedFilterIds={preservedFilterIds}
-      />
+      {showToolbar && (
+        <DataTableToolbar
+          table={table}
+          facetedFilters={facetedFilters}
+          actionsComponent={actionsComponent?.(table)}
+          globalFilterPlaceholder={globalFilterPlaceholder}
+          toolbarFilters={toolbarFilters?.(table)}
+          preservedFilterIds={preservedFilterIds}
+        />
+      )}
       {customView ? (
         <>
           {customView}
-          <DataTablePagination
-            table={table}
-            pageSizeOptions={pageSizeOptions}
-            onPageSizeChange={onPageSizeChange}
-          />
+          {showPagination && (
+            <DataTablePagination
+              table={table}
+              pageSizeOptions={pageSizeOptions}
+              onPageSizeChange={onPageSizeChange}
+            />
+          )}
         </>
       ) : (
         <>
@@ -379,19 +385,21 @@ export function DataTable<TData, TValue>({
               tableContent
             )}
           </div>
-          <div
-            className={
-              stickyPagination
-                ? "sticky bottom-0 z-20 border-t bg-background py-2 max-sm:-mx-2"
-                : undefined
-            }
-          >
-            <DataTablePagination
-              table={table}
-              pageSizeOptions={pageSizeOptions}
-              onPageSizeChange={onPageSizeChange}
-            />
-          </div>
+          {showPagination && (
+            <div
+              className={
+                stickyPagination
+                  ? "sticky bottom-0 z-20 border-t bg-background py-2 max-sm:-mx-2"
+                  : undefined
+              }
+            >
+              <DataTablePagination
+                table={table}
+                pageSizeOptions={pageSizeOptions}
+                onPageSizeChange={onPageSizeChange}
+              />
+            </div>
+          )}
         </>
       )}
     </div>

package/src/components/data-table/types.ts

@@ -95,6 +95,10 @@ export interface DataTableProps<TData, TValue> {
   initialPageSize?: number;
   meta?: Record<string, unknown>;
   isLoading?: boolean;
+  /** ซ่อนแถบค้นหา/ตัวกรอง/View (ตารางตั้งค่าเล็ก ๆ) */
+  showToolbar?: boolean;
+  /** ซ่อน pagination (แถวน้อย ไม่ต้องแบ่งหน้า) */
+  showPagination?: boolean;
 
   // Advanced
   enableColumnResizing?: boolean;

package/src/components/shared/action-form.tsx

@@ -3,8 +3,14 @@
 import { Button } from "@suphark/ui/components/ui/button";
 import { Card, CardContent } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
-import { type ReactNode, startTransition, useActionState } from "react";
-import { type FormAction, FormMessage, type FormState } from "./form-message";
+import { type ComponentProps, type ReactNode, startTransition, useActionState } from "react";
+import {
+  type FormAction,
+  FormMessage,
+  type FormRenderContext,
+  type FormState,
+  formRenderContext,
+} from "./form-message";
 import { useUiText } from "./ui-text";
 
 /**
@@ -16,8 +22,11 @@ import { useUiText } from "./ui-text";
  *   <ActionForm action={updateName} title="ชื่อองค์กร" submitLabel="บันทึก">
  *     <LabeledField label="ชื่อ"><Input name="name" defaultValue={org.name} /></LabeledField>
  *   </ActionForm>
+ *   // error รายช่อง: action คืน { ok: false, error: "…", errors: { email: "รูปแบบไม่ถูกต้อง" } }
+ *   <ActionForm action={save}>{({ fieldError }) => <LabeledField label="อีเมล" error={fieldError("email")}>…</LabeledField>}</ActionForm>
+ *   // payload เมื่อสำเร็จ: action คืน { ok: true, data: { key } } → <ActionForm<{ key: string }> onSuccess={(s) => setKey(s.data?.key)}>
  */
-export function ActionForm({
+export function ActionForm<TData = undefined>({
   action,
   title,
   submitLabel,
@@ -25,23 +34,36 @@ export function ActionForm({
   compact = false,
   className,
   onSuccess,
+  hideSuccessMessage = false,
+  submitDisabled = false,
+  submitProps,
 }: {
-  action: FormAction;
+  action: FormAction<TData>;
   title?: ReactNode;
   submitLabel?: ReactNode;
-  children: ReactNode;
+  /** เนื้อฟอร์ม — เป็นฟังก์ชันได้เพื่อรับ `{ state, pending, errors, fieldError }` (error รายช่องจาก `FormState.errors`) */
+  children: ReactNode | ((ctx: FormRenderContext) => ReactNode);
   /** ฟอร์มเล็กในแถวตาราง — ไม่มีกรอบ Card, ปุ่ม size sm, จัดแนวนอน wrap */
   compact?: boolean;
   className?: string;
-  /** เรียกเมื่อ action คืน `ok: true` (เช่น router.refresh, toast) */
-  onSuccess?: (state: Extract<FormState, { ok: true }>) => void;
+  /** เรียกเมื่อ action คืน `ok: true` (เช่น router.refresh, toast) — `state.data` คือ payload ของ `FormState<TData>` */
+  onSuccess?: (state: Extract<FormState<TData>, { ok: true }>) => void;
+  /** ไม่แสดงข้อความสำเร็จใต้ฟอร์ม (แอปแจ้งผลด้วย toast/Notice เอง — ใน compact ข้อความจะดันปุ่มตกบรรทัด) ยังแสดง error */
+  hideSuccessMessage?: boolean;
+  /** ปิดปุ่มส่งตามเงื่อนไขของแอป (เช่น ยังไม่มีรายการให้เลือก) — รวมกับ pending */
+  submitDisabled?: boolean;
+  /** props เพิ่มของปุ่มส่ง (variant, size, className, …) */
+  submitProps?: Omit<ComponentProps<typeof Button>, "type" | "disabled" | "children">;
 }) {
   const text = useUiText();
-  const [state, formAction, pending] = useActionState<FormState, FormData>(async (prev, fd) => {
-    const next = await action(prev, fd);
-    if (next?.ok) onSuccess?.(next);
-    return next;
-  }, null);
+  const [state, formAction, pending] = useActionState<FormState<TData>, FormData>(
+    async (prev, fd) => {
+      const next = await action(prev, fd);
+      if (next?.ok) onSuccess?.(next);
+      return next;
+    },
+    null,
+  );
 
   const form = (
     <form
@@ -56,13 +78,16 @@ export function ActionForm({
       )}
     >
       {title && !compact && <h2 className="font-semibold text-sm">{title}</h2>}
-      {children}
-      <FormMessage state={state} className={compact ? "basis-full" : undefined} />
+      {typeof children === "function" ? children(formRenderContext(state, pending)) : children}
+      {!(hideSuccessMessage && state?.ok) && (
+        <FormMessage state={state} className={compact ? "basis-full" : undefined} />
+      )}
       <Button
-        type="submit"
         size={compact ? "sm" : "default"}
-        disabled={pending}
         className={compact ? undefined : "self-start"}
+        {...submitProps}
+        type="submit"
+        disabled={pending || submitDisabled}
       >
         {submitLabel ?? text.save}
       </Button>

package/src/components/shared/calendar-month-grid.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
+import { cn } from "@suphark/ui/lib/utils";
+import { Check } from "lucide-react";
+import { type ReactNode, useMemo } from "react";
+
+/** บริบทของช่องวันที่ให้ `renderDay`/`dayLabel` */
+export interface CalendarDayContext<T> {
+  day: number;
+  date: Date;
+  items: T[];
+  isToday: boolean;
+  isSelected: boolean;
+  isWeekend: boolean;
+}
+
+export interface CalendarDayState {
+  /** ทุกรายการของวันนั้นเสร็จแล้ว → `data-complete` + ✓ (เมื่อไม่มี renderDay) */
+  complete?: boolean;
+  hasItems?: boolean;
+}
+
+export interface CalendarMonthGridProps<T> {
+  /** เดือนที่แสดง `"YYYY-MM"` */
+  month: string;
+  /** วันที่ที่เลือก (1–31) */
+  selectedDay?: number | null;
+  onSelectDay?: (day: number, date: Date) => void;
+  /** รายการต่อวัน (key = วันที่ 1–31) */
+  itemsByDay?: Record<number, T[]>;
+  /** เนื้อหาใต้เลขวัน (จุดสถานะ ฯลฯ) — ไม่ส่ง หรือคืน null/undefined = ✓ ของแพ็กเกจเมื่อ complete */
+  renderDay?: (ctx: CalendarDayContext<T>) => ReactNode;
+  /** สถานะของช่องจากรายการ → data-attribute ให้ CSS ของแอปแต่งได้ */
+  dayState?: (items: T[], ctx: Omit<CalendarDayContext<T>, "items">) => CalendarDayState;
+  /** วันเริ่มสัปดาห์: 0 = อาทิตย์ (ค่าเริ่มต้น, ไทย), 1 = จันทร์ */
+  weekStartsOn?: 0 | 1;
+  /** ชื่อวัน 7 ตัวเริ่มที่อาทิตย์เสมอ (ค่าเริ่มต้นไทย) */
+  weekdayLabels?: readonly string[];
+  /** "วันนี้" — ไม่ส่ง = อ่านจาก browser หลัง mount (server ไม่รู้โซนเวลาผู้ใช้) */
+  today?: Date;
+  /** aria-label ของปุ่มวัน (ค่าเริ่มต้น "วันที่ N มี M รายการ") */
+  dayLabel?: (ctx: CalendarDayContext<T>) => string;
+  /** คำอธิบายสัญลักษณ์ใต้ตาราง */
+  legend?: ReactNode;
+  className?: string;
+  /** class เพิ่มของปุ่มวัน */
+  dayClassName?: string | ((ctx: CalendarDayContext<T>) => string | undefined);
+}
+
+export const WEEKDAYS_TH = ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"] as const;
+export const WEEKDAYS_EN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] as const;
+
+function parseMonth(month: string): { year: number; monthIndex: number } {
+  const [y, m] = month.split("-");
+  const year = Number(y);
+  const monthIndex = Number(m) - 1;
+  if (!Number.isFinite(year) || !Number.isFinite(monthIndex) || monthIndex < 0 || monthIndex > 11) {
+    throw new Error(`CalendarMonthGrid: month ต้องเป็น "YYYY-MM" ได้ "${month}"`);
+  }
+  return { year, monthIndex };
+}
+
+/**
+ * ตารางเดือน (ปฏิทินเลือกวัน) ที่แอปคุมเนื้อหาต่อวันเอง — ยกจาก DueBell/Pi Done ให้ใช้ร่วม
+ * ปุ่มวันมี `aria-pressed` + data-attribute แบบ boolean (มี/ไม่มี ไม่มีค่า "true"): `data-selected`, `data-today`,
+ * `data-has-items`, `data-complete`, `data-weekend` → CSS ของแอปใช้ `[data-selected]` / Tailwind `data-selected:`
+ * SSR ได้: "วันนี้" อ่านจาก browser หลัง mount (หรือส่ง `today`)
+ */
+export function CalendarMonthGrid<T = unknown>({
+  month,
+  selectedDay = null,
+  onSelectDay,
+  itemsByDay = {},
+  renderDay,
+  dayState,
+  weekStartsOn = 0,
+  weekdayLabels = WEEKDAYS_TH,
+  today: todayProp,
+  dayLabel,
+  legend,
+  className,
+  dayClassName,
+}: CalendarMonthGridProps<T>) {
+  const mounted = useMounted();
+  const { year, monthIndex } = parseMonth(month);
+  // today: prop > browser หลัง mount > ไม่มี (server) — ไม่ใช้ new Date() ตอน render บน server
+  const today = todayProp ?? (mounted ? new Date() : null);
+  const isThisMonth = !!today && today.getFullYear() === year && today.getMonth() === monthIndex;
+
+  const { headers, blanks, days } = useMemo(() => {
+    const firstWeekday = new Date(year, monthIndex, 1).getDay(); // 0 = อาทิตย์
+    const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
+    const offset = (firstWeekday - weekStartsOn + 7) % 7;
+    const headers = Array.from({ length: 7 }, (_, i) => {
+      const weekday = (i + weekStartsOn) % 7;
+      return { weekday, label: weekdayLabels[weekday] ?? "" };
+    });
+    return {
+      headers,
+      blanks: Array.from({ length: offset }, (_, i) => i),
+      days: Array.from({ length: daysInMonth }, (_, i) => i + 1),
+    };
+  }, [year, monthIndex, weekStartsOn, weekdayLabels]);
+
+  return (
+    <div className={cn("rounded-xl border bg-card p-3 sm:p-4", className)}>
+      <div className="mb-2 grid grid-cols-7 gap-1 text-center">
+        {headers.map((h) => (
+          <span
+            key={h.weekday}
+            className={cn(
+              "font-semibold text-xs",
+              h.weekday === 0
+                ? "text-destructive"
+                : h.weekday === 6
+                  ? "text-primary"
+                  : "text-muted-foreground",
+            )}
+          >
+            {h.label}
+          </span>
+        ))}
+      </div>
+      <div className="grid grid-cols-7 gap-1.5" role="grid" aria-label={month}>
+        {blanks.map((b) => (
+          <div key={`blank-${b}`} className="aspect-square" aria-hidden="true" />
+        ))}
+        {days.map((day) => {
+          const date = new Date(year, monthIndex, day);
+          const items = itemsByDay[day] ?? [];
+          const weekday = date.getDay();
+          const base = {
+            day,
+            date,
+            isToday: isThisMonth && today?.getDate() === day,
+            isSelected: selectedDay === day,
+            isWeekend: weekday === 0 || weekday === 6,
+          };
+          const ctx: CalendarDayContext<T> = { ...base, items };
+          const state = dayState?.(items, base) ?? {};
+          const hasItems = state.hasItems ?? items.length > 0;
+          const complete = state.complete ?? false;
+          const extra = typeof dayClassName === "function" ? dayClassName(ctx) : dayClassName;
+          return (
+            <button
+              key={day}
+              type="button"
+              onClick={() => onSelectDay?.(day, date)}
+              aria-pressed={ctx.isSelected}
+              aria-label={dayLabel ? dayLabel(ctx) : `วันที่ ${day} มี ${items.length} รายการ`}
+              data-selected={ctx.isSelected || undefined}
+              data-today={ctx.isToday || undefined}
+              data-has-items={hasItems || undefined}
+              data-complete={complete || undefined}
+              data-weekend={ctx.isWeekend || undefined}
+              className={cn(
+                "relative flex aspect-square select-none flex-col items-center justify-between rounded-xl border p-1.5 font-semibold text-xs outline-none transition-[border-color,box-shadow,background-color]",
+                "hover:border-primary/50 focus-visible:ring-2 focus-visible:ring-ring/50",
+                "data-today:border-primary data-today:text-primary",
+                "data-selected:border-primary data-selected:bg-primary/10 data-selected:shadow-[0_0_0_1px_var(--primary)]",
+                "data-complete:border-success/40 data-complete:bg-success/10 data-complete:text-success",
+                extra,
+              )}
+            >
+              <span>{day}</span>
+              <span className="flex h-2 items-center justify-center gap-1">
+                {renderDay?.(ctx) ??
+                  (complete && (
+                    <span className="flex size-3.5 items-center justify-center rounded-full bg-success text-success-foreground">
+                      <Check className="size-2.5" strokeWidth={3} aria-hidden="true" />
+                    </span>
+                  ))}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+      {legend && <div className="mt-3 text-muted-foreground text-xs">{legend}</div>}
+    </div>
+  );
+}

package/src/components/shared/color-picker.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { Check } from "lucide-react";
+import {
+  type ComponentProps,
+  type CSSProperties,
+  type KeyboardEvent,
+  useRef,
+  useState,
+} from "react";
+
+export interface ColorPickerItem<T extends string = string> {
+  value: T;
+  label: string;
+  /** class สีพื้น เช่น `bg-amber-500` (แอปเป็นคนเลือก palette — แพ็กเกจไม่ bundle) */
+  swatchClassName?: string;
+  /** สี CSS ตรง ๆ (hex/oklch) เมื่อไม่ใช้ class เช่นสีที่ผู้ใช้กำหนดเอง */
+  swatch?: string;
+}
+
+export interface ColorPickerText {
+  /** ป้ายกลุ่ม (aria-label ของกริด) */
+  label: string;
+  /** ต่อท้าย aria-label ของช่องที่เลือกอยู่ */
+  selected: string;
+  ariaLabel: (label: string) => string;
+}
+
+const TEXT: Record<"th" | "en", ColorPickerText> = {
+  th: { label: "เลือกสี", selected: "เลือกอยู่", ariaLabel: (l) => `สี ${l}` },
+  en: { label: "Choose color", selected: "selected", ariaLabel: (l) => `${l} color` },
+};
+
+export interface ColorPickerProps<T extends string = string> {
+  value: T | null | undefined;
+  onChange: (value: T) => void;
+  colors: ReadonlyArray<ColorPickerItem<T>>;
+  /** คอลัมน์ของกริด (ค่าเริ่มต้น grid-cols-5) */
+  columnsClassName?: string;
+  /** sm = ช่อง size-7, md = size-8 (ค่าเริ่มต้น) */
+  size?: "sm" | "md";
+  language?: "th" | "en";
+  text?: Partial<ColorPickerText>;
+  className?: string;
+}
+
+function swatchStyle(item: { swatch?: string }): CSSProperties | undefined {
+  return item.swatch ? { backgroundColor: item.swatch } : undefined;
+}
+
+/**
+ * จุดสีเล็กสำหรับ trigger/badge/รายการ — ใช้ `color` (CSS) หรือ class สี (`className="bg-amber-500"`)
+ *   <ColorSwatch color="#f59e0b" /> · <ColorSwatch className="bg-amber-500" />
+ */
+export function ColorSwatch({
+  color,
+  className,
+  style,
+  ...props
+}: ComponentProps<"span"> & { color?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-block size-3.5 shrink-0 rounded-full border border-black/10",
+        className,
+      )}
+      style={color ? { backgroundColor: color, ...style } : style}
+      {...props}
+    />
+  );
+}
+
+/**
+ * กริดเลือกสีจากชุดที่แอปส่ง (แทน metadata-color-picker ของ Pi Done) — ปุ่มสี่เหลี่ยม `aria-pressed`,
+ * ที่เลือก = ring + ✓, คีย์บอร์ดเลื่อนในกริดด้วยลูกศร (roving tabindex; คอลัมน์อ่านจาก grid จริง)
+ * ไม่มี trigger/popover ในตัว — แอปครอบ Popover เองแบบเดียวกับ IconPicker
+ */
+export function ColorPicker<T extends string = string>({
+  value,
+  onChange,
+  colors,
+  columnsClassName = "grid-cols-5",
+  size = "md",
+  language = "th",
+  text: textProp,
+  className,
+}: ColorPickerProps<T>) {
+  const text: ColorPickerText = { ...TEXT[language], ...textProp };
+  const gridRef = useRef<HTMLDivElement>(null);
+  // ช่องที่รับ Tab: ค่าที่เลือก ไม่มีก็ช่องแรก; เปลี่ยนตามลูกศรโดยไม่ต้องเปลี่ยน value
+  const [focusIndex, setFocusIndex] = useState<number | null>(null);
+  const selectedIndex = colors.findIndex((c) => c.value === value);
+  const tabIndexAt = focusIndex ?? (selectedIndex >= 0 ? selectedIndex : 0);
+
+  function columnCount(): number {
+    const el = gridRef.current;
+    if (!el) return 1;
+    const cols = getComputedStyle(el).gridTemplateColumns.split(" ").filter(Boolean).length;
+    return cols > 0 ? cols : 1;
+  }
+
+  function moveFocus(e: KeyboardEvent<HTMLButtonElement>, from: number) {
+    const cols = columnCount();
+    const last = colors.length - 1;
+    let next: number | null = null;
+    switch (e.key) {
+      case "ArrowRight":
+        next = Math.min(from + 1, last);
+        break;
+      case "ArrowLeft":
+        next = Math.max(from - 1, 0);
+        break;
+      case "ArrowDown":
+        next = Math.min(from + cols, last);
+        break;
+      case "ArrowUp":
+        next = Math.max(from - cols, 0);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = last;
+        break;
+    }
+    if (next === null) return;
+    e.preventDefault();
+    setFocusIndex(next);
+    const buttons = gridRef.current?.querySelectorAll<HTMLButtonElement>("button");
+    buttons?.[next]?.focus();
+  }
+
+  return (
+    <div
+      ref={gridRef}
+      role="group"
+      aria-label={text.label}
+      className={cn("grid w-fit gap-1.5", columnsClassName, className)}
+    >
+      {colors.map((item, index) => {
+        const isSelected = item.value === value;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            tabIndex={index === tabIndexAt ? 0 : -1}
+            aria-pressed={isSelected}
+            aria-label={
+              isSelected
+                ? `${text.ariaLabel(item.label)} (${text.selected})`
+                : text.ariaLabel(item.label)
+            }
+            title={item.label}
+            onClick={() => onChange(item.value)}
+            onKeyDown={(e) => moveFocus(e, index)}
+            onFocus={() => setFocusIndex(index)}
+            className={cn(
+              "relative flex items-center justify-center rounded-md border border-black/10 outline-none transition-[transform,box-shadow] hover:scale-105",
+              "focus-visible:ring-2 focus-visible:ring-ring/50",
+              "aria-pressed:ring-2 aria-pressed:ring-primary aria-pressed:ring-offset-1 aria-pressed:ring-offset-background",
+              size === "sm" ? "size-7" : "size-8",
+              item.swatchClassName,
+            )}
+            style={swatchStyle(item)}
+          >
+            {isSelected && (
+              <Check
+                className="size-4 text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.6)]"
+                strokeWidth={3}
+                aria-hidden="true"
+              />
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}