@wealthx/shadcn 1.2.1 → 1.3.0

package/dist/chunk-HBZLGDIN.mjs

@@ -0,0 +1,507 @@
+import {
+  Switch
+} from "./chunk-ZU4NV6RG.mjs";
+import {
+  formatDateWithWeekday
+} from "./chunk-7PV3IWCN.mjs";
+import {
+  DatePicker
+} from "./chunk-DUJTAXMH.mjs";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-JHJHG4GO.mjs";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-7PYJD5JI.mjs";
+import {
+  Label
+} from "./chunk-NSLMILBT.mjs";
+import {
+  Separator
+} from "./chunk-FH6QVUVZ.mjs";
+import {
+  Input
+} from "./chunk-GYMYRIZP.mjs";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-6DZEXFNB.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/components/ui/appointment-availability-settings.tsx
+import React from "react";
+import { Plus, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AU_PUBLIC_HOLIDAYS_2026 = [
+  { date: "2026-01-01", label: "New Year's Day" },
+  { date: "2026-01-26", label: "Australia Day" },
+  { date: "2026-04-03", label: "Good Friday" },
+  { date: "2026-04-04", label: "Easter Saturday" },
+  { date: "2026-04-06", label: "Easter Monday" },
+  { date: "2026-04-25", label: "ANZAC Day" },
+  { date: "2026-06-08", label: "King's Birthday" },
+  { date: "2026-12-25", label: "Christmas Day" },
+  { date: "2026-12-26", label: "Boxing Day" }
+];
+var TIME_OPTIONS = (() => {
+  const opts = [];
+  for (let h = 6; h <= 21; h++) {
+    for (const m of [0, 30]) {
+      const hh = String(h).padStart(2, "0");
+      const mm = String(m).padStart(2, "0");
+      const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+      const ampm = h < 12 ? "AM" : "PM";
+      opts.push({ value: `${hh}:${mm}`, label: `${hour12}:${mm} ${ampm}` });
+    }
+  }
+  return opts;
+})();
+var timeLabel = (v) => {
+  var _a, _b;
+  return (_b = (_a = TIME_OPTIONS.find((o) => o.value === v)) == null ? void 0 : _a.label) != null ? _b : v;
+};
+function TimeSelect({
+  value,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value,
+      onValueChange: (v) => onChange(v),
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-36", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: TIME_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+      ]
+    }
+  );
+}
+function AddTimeOffDialog({
+  open,
+  onOpenChange,
+  onAdd
+}) {
+  const [label, setLabel] = React.useState("");
+  const [date, setDate] = React.useState(void 0);
+  const [includeTime, setIncludeTime] = React.useState(false);
+  const [timeStart, setTimeStart] = React.useState("09:00");
+  const [timeEnd, setTimeEnd] = React.useState("17:00");
+  const reset = () => {
+    setLabel("");
+    setDate(void 0);
+    setIncludeTime(false);
+    setTimeStart("09:00");
+    setTimeEnd("17:00");
+  };
+  const handleAdd = () => {
+    if (!date) return;
+    const isoDate = [
+      date.getFullYear(),
+      String(date.getMonth() + 1).padStart(2, "0"),
+      String(date.getDate()).padStart(2, "0")
+    ].join("-");
+    onAdd({
+      date: isoDate,
+      label: label.trim() || void 0,
+      timeStart: includeTime ? timeStart : void 0,
+      timeEnd: includeTime ? timeEnd : void 0
+    });
+    reset();
+    onOpenChange(false);
+  };
+  const handleCancel = () => {
+    reset();
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { size: "auto", minWidth: "26rem", align: "top", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Add time off" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Block a date when you are unavailable. Clients cannot book on this date." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 py-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: "toff-label", children: [
+          "Name",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "toff-label",
+            placeholder: "e.g. Conference, Personal day\u2026",
+            value: label,
+            onChange: (e) => setLabel(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: "Date" }),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: date,
+            onChange: setDate,
+            placeholder: "Pick a date",
+            calendarProps: { fromDate: /* @__PURE__ */ new Date() }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              id: "toff-include-time",
+              checked: includeTime,
+              onCheckedChange: setIncludeTime
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              htmlFor: "toff-include-time",
+              className: "cursor-pointer text-sm",
+              children: "Specify hours (partial day)"
+            }
+          )
+        ] }),
+        includeTime && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-10", children: [
+          /* @__PURE__ */ jsx(TimeSelect, { value: timeStart, onChange: setTimeStart }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "to" }),
+          /* @__PURE__ */ jsx(TimeSelect, { value: timeEnd, onChange: setTimeEnd })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleAdd, disabled: !date, children: "Add" })
+    ] })
+  ] }) });
+}
+function AppointmentAvailabilitySettings({
+  schedule: initialSchedule,
+  blockedDates: blockedDatesProp,
+  onSave,
+  onBlockedDatesChange
+}) {
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const [schedule, setSchedule] = React.useState(initialSchedule);
+  const [meetingDuration, setMeetingDuration] = React.useState("30");
+  const [schedulingBuffer, setSchedulingBuffer] = React.useState("0");
+  const [maxSlotsPerDay, setMaxSlotsPerDay] = React.useState("8");
+  const [timeOffEntries, setTimeOffEntries] = React.useState(
+    () => {
+      const holidayDates = new Set(AU_PUBLIC_HOLIDAYS_2026.map((h) => h.date));
+      const entries = AU_PUBLIC_HOLIDAYS_2026.map((h) => __spreadProps(__spreadValues({}, h), {
+        enabled: true,
+        isHoliday: true
+      }));
+      blockedDatesProp == null ? void 0 : blockedDatesProp.forEach((b) => {
+        if (!holidayDates.has(b.date)) {
+          entries.push({
+            date: b.date,
+            label: b.label,
+            enabled: true,
+            isHoliday: false
+          });
+        }
+      });
+      return entries.sort((a, b) => a.date.localeCompare(b.date));
+    }
+  );
+  const [addMoreOpen, setAddMoreOpen] = React.useState(false);
+  const currentPrefs = React.useMemo(
+    () => ({ meetingDuration, schedulingBuffer, maxSlotsPerDay }),
+    [meetingDuration, schedulingBuffer, maxSlotsPerDay]
+  );
+  React.useEffect(() => {
+    if (!hasMounted.current) return;
+    onSave == null ? void 0 : onSave(schedule, currentPrefs);
+  }, [schedule]);
+  React.useEffect(() => {
+    if (!hasMounted.current) return;
+    onSave == null ? void 0 : onSave(schedule, currentPrefs);
+  }, [meetingDuration, schedulingBuffer, maxSlotsPerDay]);
+  React.useEffect(() => {
+    if (!hasMounted.current) return;
+    const blocked = timeOffEntries.filter((e) => e.enabled).map(({ date, label, timeStart, timeEnd }) => ({
+      date,
+      label,
+      timeStart,
+      timeEnd
+    }));
+    onBlockedDatesChange == null ? void 0 : onBlockedDatesChange(blocked);
+  }, [timeOffEntries]);
+  const toggleDay = (index) => {
+    setSchedule(
+      (prev) => prev.map((d, i) => i === index ? __spreadProps(__spreadValues({}, d), { enabled: !d.enabled }) : d)
+    );
+  };
+  const updateTime = (index, field, value) => {
+    setSchedule(
+      (prev) => prev.map((d, i) => i === index ? __spreadProps(__spreadValues({}, d), { [field]: value }) : d)
+    );
+  };
+  const toggleTimeOff = (date, enabled) => {
+    setTimeOffEntries(
+      (prev) => prev.map((e) => e.date === date ? __spreadProps(__spreadValues({}, e), { enabled }) : e)
+    );
+  };
+  const removeCustomDate = (date) => {
+    setTimeOffEntries((prev) => prev.filter((e) => e.date !== date));
+  };
+  const handleAddMore = (entry) => {
+    if (timeOffEntries.some((e) => e.date === entry.date)) return;
+    setTimeOffEntries(
+      (prev) => [
+        ...prev,
+        {
+          date: entry.date,
+          label: entry.label,
+          enabled: true,
+          isHoliday: false,
+          timeStart: entry.timeStart,
+          timeEnd: entry.timeEnd
+        }
+      ].sort((a, b) => a.date.localeCompare(b.date))
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card", children: [
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "weekly", className: "gap-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-border p-1", children: /* @__PURE__ */ jsxs(TabsList, { variant: "default", className: "w-full", children: [
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "weekly", children: "Weekly Availability" }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "booking", children: "Booking Preferences" }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "time-off", children: "Time Off" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "weekly", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border", children: schedule.map((day, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex min-h-[68px] items-center gap-5 px-6 py-4",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex w-28 items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  id: `day-${day.day}`,
+                  checked: day.enabled,
+                  onCheckedChange: () => toggleDay(index)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: `day-${day.day}`,
+                  className: "cursor-pointer text-sm font-medium",
+                  children: day.day
+                }
+              )
+            ] }),
+            day.enabled ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                TimeSelect,
+                {
+                  value: day.startTime,
+                  onChange: (v) => updateTime(index, "startTime", v)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "to" }),
+              /* @__PURE__ */ jsx(
+                TimeSelect,
+                {
+                  value: day.endTime,
+                  onChange: (v) => updateTime(index, "endTime", v)
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx("p", { className: "flex-1 text-sm text-muted-foreground", children: "Unavailable" })
+          ]
+        },
+        day.day
+      )) }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "booking", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col divide-y divide-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-[68px] items-center justify-between px-6 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Meeting Duration" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Length of each appointment slot" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: meetingDuration,
+              onValueChange: (v) => setMeetingDuration(v),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "w-40", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: "15", children: "15 minutes" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "30", children: "30 minutes" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "45", children: "45 minutes" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "60", children: "60 minutes" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "90", children: "90 minutes" })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-[68px] items-center justify-between px-6 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Scheduling Buffer" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Gap between consecutive bookings" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: schedulingBuffer,
+              onValueChange: (v) => setSchedulingBuffer(v),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "w-40", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: "0", children: "No buffer" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "5", children: "5 minutes" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "10", children: "10 minutes" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "15", children: "15 minutes" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "30", children: "30 minutes" })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-[68px] items-center justify-between px-6 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Daily Slot Limit" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Maximum bookings accepted per day" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: maxSlotsPerDay,
+              onValueChange: (v) => setMaxSlotsPerDay(v),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "w-40", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: "2", children: "2 per day" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "4", children: "4 per day" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "6", children: "6 per day" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "8", children: "8 per day" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "10", children: "10 per day" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "unlimited", children: "Unlimited" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "time-off", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Toggle dates when you are unavailable. Clients cannot book on switched-on dates." }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "ml-4 shrink-0 gap-1.5",
+              onClick: () => setAddMoreOpen(true),
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+                "Add more"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border", children: timeOffEntries.map((entry) => {
+          var _a;
+          const formattedDate = formatDateWithWeekday(entry.date);
+          const hasTimeRange = entry.timeStart && entry.timeEnd;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex min-h-[68px] items-center gap-5 px-6 py-4",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    id: `toff-${entry.date}`,
+                    checked: entry.enabled,
+                    onCheckedChange: (v) => toggleTimeOff(entry.date, v)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx(
+                    Label,
+                    {
+                      htmlFor: `toff-${entry.date}`,
+                      className: cn(
+                        "cursor-pointer text-sm font-medium",
+                        !entry.enabled && "text-muted-foreground"
+                      ),
+                      children: (_a = entry.label) != null ? _a : formattedDate
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                    entry.label ? formattedDate : null,
+                    hasTimeRange && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      entry.label ? " \xB7 " : "",
+                      timeLabel(entry.timeStart),
+                      " \u2013",
+                      " ",
+                      timeLabel(entry.timeEnd)
+                    ] })
+                  ] })
+                ] }),
+                !entry.isHoliday && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7 text-muted-foreground hover:text-destructive",
+                    onClick: () => removeCustomDate(entry.date),
+                    children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ]
+            },
+            entry.date
+          );
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AddTimeOffDialog,
+      {
+        open: addMoreOpen,
+        onOpenChange: setAddMoreOpen,
+        onAdd: handleAddMore
+      }
+    )
+  ] });
+}
+
+export {
+  AppointmentAvailabilitySettings
+};

package/dist/{chunk-SIZMLSRU.mjs → chunk-HISNT2MG.mjs}

@@ -5,9 +5,11 @@ import {
   DATASET_ALPHAS,
   DoughnutLegendRow,
   FALLBACK_PRIMARY,
-  formatAbbrev,
   hexToRgba
-} from "./chunk-FZIXGLMV.mjs";
+} from "./chunk-M3FV7LOK.mjs";
+import {
+  formatCurrencyAbbrev
+} from "./chunk-MN5NYQCL.mjs";
 import {
   Empty,
   EmptyDescription
@@ -17,7 +19,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle
-} from "./chunk-CLIN5525.mjs";
+} from "./chunk-C7CQJNMR.mjs";
 import {
   useThemeVars
 } from "./chunk-FEZKMUCF.mjs";
@@ -96,7 +98,7 @@ function TransactionsLiabilitiesBreakdownChart({
             label: (ctx) => {
               const val = ctx.raw;
               const pct = total > 0 ? `${(val / total * 100).toFixed(1)}%` : "0%";
-              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
+              return ` ${ctx.label}: ${formatCurrencyAbbrev(val)} (${pct})`;
             }
           }
         }
@@ -110,7 +112,7 @@ function TransactionsLiabilitiesBreakdownChart({
       className: cn("w-full py-4 sm:py-6 gap-2", className),
       style: { maxWidth: width, fontFamily },
       children: [
-        /* @__PURE__ */ jsx(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm sm:text-base", children: title }) }),
+        /* @__PURE__ */ jsx(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }) }),
         /* @__PURE__ */ jsx(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { style: { height, width: "100%" } }) : !hasData ? /* @__PURE__ */ jsx(Empty, { className: "flex-none p-4", style: { height }, children: /* @__PURE__ */ jsx(EmptyDescription, { children: "No data available" }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ jsxs("div", { style: { height, width: "100%", position: "relative" }, children: [
             /* @__PURE__ */ jsx(
@@ -135,7 +137,7 @@ function TransactionsLiabilitiesBreakdownChart({
                   pointerEvents: "none"
                 },
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: formatAbbrev(total) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: formatCurrencyAbbrev(total) }),
                   /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground leading-none mt-1", children: "Total" })
                 ]
               }

package/dist/{chunk-PR6V5XKM.mjs → chunk-HVY6KCCF.mjs}

@@ -13,10 +13,10 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from "./chunk-XIRTEFKH.mjs";
+} from "./chunk-6DZEXFNB.mjs";
 import {
   Button
-} from "./chunk-2I5S2AMY.mjs";
+} from "./chunk-XREGSKX3.mjs";
 import {
   cn
 } from "./chunk-VLQZANBF.mjs";
@@ -82,10 +82,13 @@ function AddLeadModal({
         }
       ),
       searchValue && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
           onClick: () => onSearchChange == null ? void 0 : onSearchChange(""),
-          className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          className: "absolute right-2.5 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" })
         }