@suphark/ui 0.6.0 → 0.7.0

package/src/components/app-shell/index.ts

@@ -1,9 +1,20 @@
 export { AppBrand, type AppBrandProps } from "./app-brand";
 export { AppNav, AppNavGroupMenu, type AppNavPinProps } from "./app-nav";
 export { APP_MAIN_ID, AppShell, type AppShellProps } from "./app-shell";
+export {
+  CommandPalette,
+  type CommandPaletteItem,
+  type CommandPaletteSection,
+  type CommandPaletteText,
+} from "./command-palette";
 export { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
 export { HeaderCrumb, HeaderCrumbs } from "./header-crumb";
 export { NavLink } from "./nav-link";
+export {
+  type OrganizationOption,
+  OrganizationSwitcher,
+  type OrganizationSwitcherProps,
+} from "./organization-switcher";
 export { SubNav } from "./sub-nav";
 export { isTabActive, TopTabs, topLevelTabs } from "./top-tabs";
 export {

package/src/components/app-shell/organization-switcher.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+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,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { cn } from "@suphark/ui/lib/utils";
+import { Building2, Check } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { type ReactNode, useTransition } from "react";
+import { HeaderCrumb } from "./header-crumb";
+
+export interface OrganizationOption {
+  id: string;
+  name: string;
+  slug?: string;
+  logoUrl?: string | null;
+}
+
+export interface OrganizationSwitcherProps {
+  organizations: OrganizationOption[];
+  activeId: string | null;
+  /** แอปเรียก server action สลับองค์กร — component ทำ useTransition + router.refresh() หลัง resolve */
+  onSwitch: (id: string) => Promise<void> | void;
+  /** refresh หน้าหลังสลับ (ค่าเริ่มต้น true) */
+  refresh?: boolean;
+  /** ไม่มี active — ค่าเริ่มต้น `UiText.switcher.choose` */
+  fallbackLabel?: string;
+  /** หัว dropdown — ค่าเริ่มต้น `UiText.switcher.organization` */
+  heading?: string;
+  /** ข้อความจางท้ายชื่อ (ค่าเริ่มต้น `/slug` ถ้ามี) */
+  hint?: (org: OrganizationOption) => ReactNode;
+  /** slot ท้ายเมนู เช่น "สร้างองค์กร…", "จัดการองค์กร" */
+  footer?: ReactNode;
+  /** `header` = HeaderCrumb ใน header (layout top); `sidebar` = ปุ่มเต็มกว้างใน `sidebarHeader` ของ AppShell */
+  placement?: "header" | "sidebar";
+  className?: string;
+}
+
+function OrgLogo({ org }: { org: OrganizationOption | undefined }) {
+  if (org?.logoUrl)
+    return <img src={org.logoUrl} alt="" className="size-5 rounded object-contain" />;
+  return <Building2 className="size-3.5 text-muted-foreground" aria-hidden="true" />;
+}
+
+/**
+ * ตัวสลับองค์กร/tenant มาตรฐาน (แบบ Clerk OrganizationSwitcher) — ยกจาก Pi Auth TenantSwitcher ให้ Pi Done/DueBell ใช้ร่วม
+ * องค์กรเดียว = แสดงชื่อ ไม่มี dropdown; รายการที่ active มี ✓ และกดแล้วไม่ทำอะไร; ระหว่าง pending ปุ่ม disabled
+ */
+export function OrganizationSwitcher({
+  organizations,
+  activeId,
+  onSwitch,
+  refresh = true,
+  fallbackLabel,
+  heading,
+  hint = (o) => (o.slug ? `/${o.slug}` : undefined),
+  footer,
+  placement = "header",
+  className,
+}: OrganizationSwitcherProps) {
+  const text = useUiText();
+  const router = useRouter();
+  const [pending, start] = useTransition();
+  const active = organizations.find((o) => o.id === activeId);
+  const label = active ? active.name : (fallbackLabel ?? text.switcher?.choose ?? "เลือกองค์กร");
+  const single = organizations.length <= 1 && !footer;
+
+  const trigger =
+    placement === "sidebar" ? (
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={pending}
+        aria-label={heading ?? text.switcher?.organization ?? "องค์กร"}
+        className={cn("h-8 w-full justify-start gap-2 bg-background px-2 font-normal", className)}
+      >
+        <OrgLogo org={active} />
+        <span className="truncate">{label}</span>
+        {!single && <SwitcherChevron className="ml-auto" />}
+      </Button>
+    ) : (
+      <HeaderCrumb
+        icon={<OrgLogo org={active} />}
+        label={label}
+        hint={active ? hint(active) : undefined}
+        chevron={!single}
+        disabled={pending}
+        className={className}
+      />
+    );
+
+  if (single) return trigger;
+
+  function pick(id: string) {
+    if (id === activeId) return;
+    start(async () => {
+      await onSwitch(id);
+      if (refresh) router.refresh();
+    });
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={trigger} />
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="text-muted-foreground">
+            {heading ?? text.switcher?.organization ?? "องค์กร"}
+          </DropdownMenuLabel>
+          {organizations.map((o) => {
+            const isActive = o.id === activeId;
+            return (
+              <DropdownMenuItem
+                key={o.id}
+                onClick={() => pick(o.id)}
+                aria-current={isActive ? "true" : undefined}
+                className="gap-2"
+              >
+                <OrgLogo org={o} />
+                <span className="flex min-w-0 flex-1 flex-col">
+                  <span className="truncate">{o.name}</span>
+                  {hint(o) && (
+                    <span className="truncate text-muted-foreground text-xs">{hint(o)}</span>
+                  )}
+                </span>
+                {isActive && <Check className="size-4 shrink-0" aria-hidden="true" />}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuGroup>
+        {footer && (
+          <>
+            <DropdownMenuSeparator />
+            {footer}
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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/design-system/sections/showcase-data-display.tsx

@@ -414,7 +414,7 @@ export function ShowcaseDataDisplay() {
 
               <Item variant="outline" className="p-3">
                 <ItemMedia variant="icon">
-                  <AlertTriangle className="size-4 text-amber-500" />
+                  <AlertTriangle className="size-4 text-warning" />
                 </ItemMedia>
                 <ItemContent>
                   <ItemTitle className="text-xs">หนังสือค้ำประกันผลงาน (Performance Bond)</ItemTitle>
@@ -444,7 +444,7 @@ export function ShowcaseDataDisplay() {
             <AttachmentGroup>
               <Attachment state="done" size="default">
                 <AttachmentMedia variant="icon">
-                  <FileSpreadsheet className="size-4 text-emerald-600" />
+                  <FileSpreadsheet className="size-4 text-success" />
                 </AttachmentMedia>
                 <AttachmentContent>
                   <AttachmentTitle>BOQ_Facade_Rev2.xlsx</AttachmentTitle>

package/src/components/design-system/sections/showcase-guidelines-recipes.tsx

@@ -296,7 +296,7 @@ export function ApprovePackageButton({ id }: { id: string }) {
                   <span className="font-bold">✕ หลีกเลี่ยง:</span>
                   <span className="line-through">{item.bad}</span>
                 </div>
-                <div className="flex items-start gap-2 text-emerald-600 font-medium">
+                <div className="flex items-start gap-2 text-success font-medium">
                   <span className="font-bold">✓ แนะนำ:</span>
                   <span>{item.good}</span>
                 </div>

package/src/components/design-system/sections/showcase-overlays-navigation.tsx

@@ -252,11 +252,11 @@ export function ShowcaseOverlaysNavigation() {
                     <div className="p-4 flex flex-col gap-2 text-xs">
                       <div className="flex justify-between border-b pb-2">
                         <span>ส่งมอบตรงเวลา (On-Time Delivery)</span>
-                        <span className="font-semibold text-emerald-600">96.5%</span>
+                        <span className="font-semibold text-success">96.5%</span>
                       </div>
                       <div className="flex justify-between border-b pb-2">
                         <span>มาตรฐานคุณภาพวัสดุ (Quality Pass Rate)</span>
-                        <span className="font-semibold text-emerald-600">98.2%</span>
+                        <span className="font-semibold text-success">98.2%</span>
                       </div>
                     </div>
                     <DrawerFooter>

package/src/components/design-system/sections/showcase-primitives.tsx

@@ -91,7 +91,7 @@ export function ShowcasePrimitives() {
       label: "Pending Vendor / รอผู้ขาย",
       variant: "outline",
       icon: AlertCircle,
-      className: "border-amber-500/40 text-amber-600 bg-amber-50/50 dark:bg-amber-950/20",
+      className: "border-warning/40 text-warning-muted-foreground bg-warning/10",
     },
   ];
 

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

@@ -4,7 +4,13 @@ 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 FormAction,
+  FormMessage,
+  type FormRenderContext,
+  type FormState,
+  formRenderContext,
+} from "./form-message";
 import { useUiText } from "./ui-text";
 
 /**
@@ -16,6 +22,8 @@ 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>
  */
 export function ActionForm({
   action,
@@ -29,7 +37,8 @@ export function ActionForm({
   action: FormAction;
   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;
@@ -56,7 +65,7 @@ export function ActionForm({
       )}
     >
       {title && !compact && <h2 className="font-semibold text-sm">{title}</h2>}
-      {children}
+      {typeof children === "function" ? children(formRenderContext(state, pending)) : children}
       <FormMessage state={state} className={compact ? "basis-full" : undefined} />
       <Button
         type="submit"

package/src/components/shared/button/floating-save-button.tsx

@@ -68,7 +68,7 @@ export function FloatingSaveButton({
         className={cn(
           "h-14 gap-3 rounded-full border-4 border-background px-8 text-base shadow-2xl transition-all duration-300",
           showSuccess
-            ? "scale-105 bg-emerald-500 text-white shadow-[0_0_20px_rgba(16,185,129,0.4)] hover:bg-emerald-500"
+            ? "scale-105 bg-success text-success-foreground shadow-2xl shadow-success/40 hover:bg-success"
             : "bg-primary text-primary-foreground hover:bg-primary/90",
           buttonClassName,
         )}

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/form/form-field-color-select.tsx

@@ -55,7 +55,7 @@ export function FormFieldColorSelect<T extends FieldValues>({
       render={({ field }) => (
         <FormItem>
           <FormLabel>
-            {label} {props.required && <span className="text-red-500">*</span>}
+            {label} {props.required && <span className="text-destructive">*</span>}
           </FormLabel>
           <Select onValueChange={field.onChange} value={field.value} {...props}>
             <FormControl>

package/src/components/shared/form/form-field-combobox.tsx

@@ -103,7 +103,7 @@ export function FormFieldCombobox<T extends FieldValues>({
       render={({ field }) => (
         <FormItem className={cn("flex flex-col gap-1.5", className)}>
           <FormLabel>
-            {label} {required && <span className="text-red-500">*</span>}
+            {label} {required && <span className="text-destructive">*</span>}
           </FormLabel>
           <FormControl>
             <Popover open={open} onOpenChange={setOpen}>

package/src/components/shared/form/form-field-date.tsx

@@ -36,7 +36,7 @@ export function FormFieldDate<T extends FieldValues>({
       render={({ field }) => (
         <FormItem className="flex flex-col">
           <FormLabel>
-            {label} {required && <span className="text-red-500">*</span>}
+            {label} {required && <span className="text-destructive">*</span>}
           </FormLabel>
           <FormControl>
             <DatePicker