@wealthx/shadcn 1.2.2 → 1.3.1

package/dist/chunk-EWRB4PAD.mjs

@@ -0,0 +1,468 @@
+import {
+  AppointmentSlotSection
+} from "./chunk-3OYFOX3X.mjs";
+import {
+  Textarea
+} from "./chunk-34NWQURD.mjs";
+import {
+  Calendar
+} from "./chunk-OODBHKG7.mjs";
+import {
+  Avatar,
+  AvatarFallback
+} from "./chunk-24FUO7TD.mjs";
+import {
+  Badge
+} from "./chunk-BKNFWEH2.mjs";
+import {
+  Label
+} from "./chunk-NSLMILBT.mjs";
+import {
+  Separator
+} from "./chunk-FH6QVUVZ.mjs";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-6DZEXFNB.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
+
+// src/components/ui/appointment-upcoming-card.tsx
+import React from "react";
+import {
+  Calendar as CalendarIcon,
+  CalendarCheck,
+  Clock,
+  ExternalLink
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AppointmentUpcomingCard({
+  appointment,
+  amSlots = [],
+  pmSlots = [],
+  onBookAppointment,
+  onReschedule,
+  onCancel,
+  onAcceptReschedule
+}) {
+  var _a, _b, _c;
+  const [calendarDialogOpen, setCalendarDialogOpen] = React.useState(false);
+  const [acceptDialogOpen, setAcceptDialogOpen] = React.useState(false);
+  const [rescheduleDialogOpen, setRescheduleDialogOpen] = React.useState(false);
+  const [cancelDialogOpen, setCancelDialogOpen] = React.useState(false);
+  const [rescheduleDate, setRescheduleDate] = React.useState(
+    /* @__PURE__ */ new Date()
+  );
+  const [rescheduleSlot, setRescheduleSlot] = React.useState(void 0);
+  const [rescheduleNote, setRescheduleNote] = React.useState("");
+  const [cancelReason, setCancelReason] = React.useState("");
+  const resetRescheduleForm = () => {
+    setRescheduleDate(/* @__PURE__ */ new Date());
+    setRescheduleSlot(void 0);
+    setRescheduleNote("");
+  };
+  const hasSlotsData = amSlots.length > 0 || pmSlots.length > 0;
+  const canSubmitReschedule = hasSlotsData ? !!rescheduleDate && !!rescheduleSlot : !!rescheduleDate;
+  if (!appointment) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 border border-border bg-card px-6 py-10 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center bg-muted", children: /* @__PURE__ */ jsx(CalendarIcon, { className: "h-6 w-6 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: "No upcoming appointments" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Schedule time with your advisor to discuss your financial goals." })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { onClick: onBookAppointment, className: "w-full", children: "Book an Appointment" })
+    ] });
+  }
+  const isPending = appointment.status === "pending";
+  const isRescheduled = appointment.status === "rescheduled";
+  const isCancelled = appointment.status === "cancelled";
+  const statusBadge = (() => {
+    if (isPending) return /* @__PURE__ */ jsx(Badge, { variant: "warning", children: "Pending" });
+    if (isRescheduled) return /* @__PURE__ */ jsx(Badge, { variant: "info", children: "Rescheduled" });
+    if (isCancelled) return /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: "Cancelled" });
+    return /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Confirmed" });
+  })();
+  const noticeBanner = (() => {
+    if (isPending) {
+      return /* @__PURE__ */ jsx("div", { className: "bg-warning/10 px-5 py-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: "Your booking request has been sent. Your advisor will confirm the appointment shortly." }) });
+    }
+    if (isRescheduled) {
+      return /* @__PURE__ */ jsx("div", { className: "bg-info/10 px-5 py-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: "Your advisor has proposed a new time. Please review and respond below." }) });
+    }
+    if (isCancelled) {
+      return /* @__PURE__ */ jsx("div", { className: "bg-destructive/10 px-5 py-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: "This appointment has been cancelled by your advisor." }) });
+    }
+    return null;
+  })();
+  const headerTitle = appointment.appointmentType ? appointment.appointmentType.toUpperCase() : "UPCOMING APPOINTMENT";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col border border-border bg-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(CalendarCheck, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: headerTitle })
+        ] }),
+        statusBadge
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-5 py-4", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-12 w-12 shrink-0", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-base", children: appointment.advisor.avatarInitials }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: appointment.advisor.name }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: appointment.advisor.role }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: appointment.advisor.company })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-5 py-4", children: isRescheduled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Original time" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-sm text-muted-foreground/50 line-through", children: [
+            /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: (_a = appointment.originalDate) != null ? _a : appointment.date })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-sm text-muted-foreground/50 line-through", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              (_b = appointment.originalTimeStart) != null ? _b : appointment.timeStart,
+              " \u2013",
+              " ",
+              (_c = appointment.originalTimeEnd) != null ? _c : appointment.timeEnd
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-info", children: "New proposed time" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-sm text-foreground", children: [
+            /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: appointment.date })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-sm text-foreground", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              appointment.timeStart,
+              " \u2013 ",
+              appointment.timeEnd
+            ] })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex items-center gap-2.5 text-sm ${isCancelled ? "text-muted-foreground/50 line-through" : "text-muted-foreground"}`,
+            children: [
+              /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { children: appointment.date })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex items-center gap-2.5 text-sm ${isCancelled ? "text-muted-foreground/50 line-through" : "text-muted-foreground"}`,
+            children: [
+              /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 shrink-0" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                appointment.timeStart,
+                " \u2013 ",
+                appointment.timeEnd
+              ] })
+            ]
+          }
+        )
+      ] }) }),
+      noticeBanner && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        noticeBanner
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-5 py-4", children: [
+        !isPending && !isRescheduled && !isCancelled && appointment.calendarLink && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: "w-full gap-2",
+            onClick: () => setCalendarDialogOpen(true),
+            children: [
+              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
+              "Add to Calendar"
+            ]
+          }
+        ),
+        isRescheduled && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "w-full",
+              onClick: () => setAcceptDialogOpen(true),
+              children: "Accept New Time"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: "w-full",
+              onClick: () => {
+                resetRescheduleForm();
+                setRescheduleDialogOpen(true);
+              },
+              children: "Request Another Time"
+            }
+          )
+        ] }),
+        isCancelled && /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onBookAppointment, children: "Book a New Appointment" }),
+        !isRescheduled && !isCancelled && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              className: "w-full",
+              onClick: () => {
+                resetRescheduleForm();
+                setRescheduleDialogOpen(true);
+              },
+              children: "Request Reschedule"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              className: "w-full text-destructive hover:text-destructive",
+              onClick: () => {
+                setCancelReason("");
+                setCancelDialogOpen(true);
+              },
+              children: "Cancel Booking"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: acceptDialogOpen, onOpenChange: setAcceptDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Accept New Time" }),
+        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+          "Confirm you want to accept",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: appointment.date }),
+          " ",
+          "from",
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+            appointment.timeStart,
+            " \u2013 ",
+            appointment.timeEnd
+          ] }),
+          " ",
+          "as your new appointment time. Your advisor will be notified."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Keep Waiting" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => {
+              onAcceptReschedule == null ? void 0 : onAcceptReschedule();
+              setAcceptDialogOpen(false);
+            },
+            children: "Accept New Time"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Dialog, { open: calendarDialogOpen, onOpenChange: setCalendarDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Add to Google Calendar" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "You'll be taken to Google Calendar to save this appointment. Make sure you're signed in to the correct account." })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Cancel" }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: "gap-1.5",
+            onClick: () => {
+              window.open(appointment.calendarLink, "_blank");
+              setCalendarDialogOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
+              "Open Google Calendar"
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: rescheduleDialogOpen,
+        onOpenChange: (next) => {
+          if (!next) resetRescheduleForm();
+          setRescheduleDialogOpen(next);
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { size: "2xl", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: "Request Reschedule" }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: "Choose your preferred date and time. Your advisor will review the request and confirm a new slot." })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Current booking" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border border-border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx(CalendarIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+                appointment.date
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5 shrink-0" }),
+                appointment.timeStart,
+                " \u2013 ",
+                appointment.timeEnd
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] items-start gap-5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { children: "Preferred date" }),
+              /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: rescheduleDate,
+                  onSelect: (d) => {
+                    setRescheduleDate(d);
+                    setRescheduleSlot(void 0);
+                  },
+                  captionLayout: "label",
+                  fromDate: /* @__PURE__ */ new Date(),
+                  disabled: { before: /* @__PURE__ */ new Date() },
+                  className: "border border-border"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: hasSlotsData ? rescheduleDate ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Preferred time" }),
+              /* @__PURE__ */ jsx(
+                AppointmentSlotSection,
+                {
+                  label: "Morning",
+                  slots: amSlots,
+                  selectedSlotId: rescheduleSlot == null ? void 0 : rescheduleSlot.id,
+                  onSelect: setRescheduleSlot
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AppointmentSlotSection,
+                {
+                  label: "Afternoon",
+                  slots: pmSlots,
+                  selectedSlotId: rescheduleSlot == null ? void 0 : rescheduleSlot.id,
+                  onSelect: setRescheduleSlot
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Preferred time" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Pick a date on the left to see available slots." })
+            ] }) : null })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "reschedule-note", children: [
+              "Note",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: "reschedule-note",
+                placeholder: "e.g. I have a conflict at this time and would like to move to a later slot\u2026",
+                value: rescheduleNote,
+                onChange: (e) => setRescheduleNote(e.target.value),
+                className: "w-full resize-none",
+                rows: 2
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: !canSubmitReschedule,
+                onClick: () => {
+                  onReschedule == null ? void 0 : onReschedule(rescheduleDate, rescheduleSlot, rescheduleNote);
+                  resetRescheduleForm();
+                  setRescheduleDialogOpen(false);
+                },
+                children: "Submit Request"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: cancelDialogOpen,
+        onOpenChange: (next) => {
+          if (!next) setCancelReason("");
+          setCancelDialogOpen(next);
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: "Cancel Booking" }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: "Are you sure you want to cancel this appointment? Your advisor will be notified. This action cannot be undone." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "cancel-reason", children: [
+              "Reason",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: "cancel-reason",
+                placeholder: "e.g. I need to reschedule due to a conflict\u2026",
+                value: cancelReason,
+                onChange: (e) => setCancelReason(e.target.value),
+                className: "w-full resize-none",
+                rows: 2
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Keep Booking" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "destructive",
+                onClick: () => {
+                  onCancel == null ? void 0 : onCancel(cancelReason);
+                  setCancelReason("");
+                  setCancelDialogOpen(false);
+                },
+                children: "Cancel Booking"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  AppointmentUpcomingCard
+};

package/dist/{chunk-ZSHYDDRB.mjs → chunk-FAKPBKLT.mjs}

@@ -6,6 +6,9 @@ import {
 import {
   Input
 } from "./chunk-GYMYRIZP.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
 import {
   cn
 } from "./chunk-VLQZANBF.mjs";
@@ -65,15 +68,16 @@ function ColorSwatch({
   className
 }) {
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
       type: "button",
+      variant: "ghost",
       title: color,
       "aria-label": `Select color ${color}`,
       "aria-pressed": selected,
       onClick: () => onClick == null ? void 0 : onClick(color),
       className: cn(
-        "relative shrink-0 transition-all outline-none shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
+        "relative shrink-0 p-0 transition-all outline-none shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
         size === "md" ? "size-7" : "size-5",
         selected && "ring-2 ring-foreground ring-offset-1 ring-offset-background",

package/dist/{chunk-A6AAWBPF.mjs → chunk-GHC7LLUX.mjs}

@@ -1,6 +1,6 @@
 import {
   KanbanColumn
-} from "./chunk-VACKZOMY.mjs";
+} from "./chunk-R3VSPKNP.mjs";
 import {
   ToggleGroup,
   ToggleGroupItem
@@ -8,6 +8,9 @@ import {
 import {
   Input
 } from "./chunk-GYMYRIZP.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
 import {
   cn
 } from "./chunk-VLQZANBF.mjs";
@@ -36,10 +39,13 @@ function Toolbar({
         }
       ),
       searchValue && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
           onClick: () => onSearchChange(""),
-          className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          className: "absolute right-2 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground",
           "aria-label": "Clear search",
           children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
         }
@@ -62,8 +68,11 @@ function Toolbar({
       }
     ),
     onRefresh && /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
         onClick: onRefresh,
         className: "ml-auto text-muted-foreground hover:text-foreground",
         "aria-label": "Refresh board",