@wealthx/shadcn 1.2.1 → 1.3.0

package/dist/{chunk-SYOD63OZ.mjs → chunk-5FQIKDKP.mjs}

@@ -1,10 +1,10 @@
+import {
+  DatePicker
+} from "./chunk-DUJTAXMH.mjs";
 import {
   ToggleGroup,
   ToggleGroupItem
-} from "./chunk-PMB3A7V3.mjs";
-import {
-  DatePicker
-} from "./chunk-KUDCQ4FI.mjs";
+} from "./chunk-EI5F6FMT.mjs";
 import {
   Select,
   SelectContent,
@@ -18,10 +18,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";

package/dist/{chunk-K3JYD4IU.mjs → chunk-5IS7G74I.mjs}

@@ -11,7 +11,7 @@ import {
   FALLBACK_TICK,
   formatTooltipDate,
   hexToRgba
-} from "./chunk-FZIXGLMV.mjs";
+} from "./chunk-M3FV7LOK.mjs";
 import {
   Empty,
   EmptyDescription
@@ -22,7 +22,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle
-} from "./chunk-CLIN5525.mjs";
+} from "./chunk-C7CQJNMR.mjs";
 import {
   useThemeVars
 } from "./chunk-FEZKMUCF.mjs";
@@ -47,7 +47,14 @@ import {
 } from "chart.js";
 import { Chart } from "react-chartjs-2";
 import { jsx, jsxs } from "react/jsx-runtime";
-ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip, Legend);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip,
+  Legend
+);
 function ExpenseBarChart({
   expenseData,
   title = "Expenses",
@@ -186,7 +193,7 @@ function ExpenseBarChart({
       style: { maxWidth: width, fontFamily },
       children: [
         /* @__PURE__ */ jsxs(CardHeader, { className: "px-3 sm:px-6", children: [
-          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm sm:text-base", children: title }),
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
           /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx("div", { className: "flex gap-0.5 sm:gap-1", children: periods.map((p) => /* @__PURE__ */ jsx(
             ChartPeriodButton,
             {

package/dist/chunk-6AW4KJHE.mjs

@@ -0,0 +1,235 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "./chunk-JMHR3YGZ.mjs";
+import {
+  AppointmentSlotSection
+} from "./chunk-3OYFOX3X.mjs";
+import {
+  Textarea
+} from "./chunk-34NWQURD.mjs";
+import {
+  Calendar
+} from "./chunk-OODBHKG7.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-action-dialogs.tsx
+import React from "react";
+import { Calendar as CalendarIcon, Clock } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AppointmentConfirmDialog({
+  open,
+  onOpenChange,
+  action,
+  clientName,
+  onConfirm
+}) {
+  const isDecline = action === "decline";
+  const [cancelReason, setCancelReason] = React.useState("");
+  const handleOpenChange = (next) => {
+    if (!next) setCancelReason("");
+    onOpenChange(next);
+  };
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx(AlertDialogTitle, { children: isDecline ? "Decline this appointment?" : "Accept this appointment?" }),
+      /* @__PURE__ */ jsx(AlertDialogDescription, { children: isDecline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "This will cancel the appointment with",
+        " ",
+        /* @__PURE__ */ jsx("strong", { children: clientName }),
+        " and notify them by email. This action cannot be undone."
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        "The appointment with ",
+        /* @__PURE__ */ jsx("strong", { children: clientName }),
+        " will be confirmed and they will be notified by email."
+      ] }) })
+    ] }),
+    isDecline && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs(Label, { htmlFor: "decline-reason", children: [
+        "Reason",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "decline-reason",
+          placeholder: "e.g. Advisor is unavailable at this time\u2026",
+          value: cancelReason,
+          onChange: (e) => setCancelReason(e.target.value),
+          className: "w-full resize-none",
+          rows: 2
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx(AlertDialogCancel, { children: isDecline ? "Keep appointment" : "Cancel" }),
+      /* @__PURE__ */ jsx(
+        AlertDialogAction,
+        {
+          onClick: () => onConfirm(isDecline ? cancelReason : void 0),
+          className: isDecline ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : void 0,
+          children: isDecline ? "Decline appointment" : "Accept appointment"
+        }
+      )
+    ] })
+  ] }) });
+}
+function AppointmentRescheduleDialog({
+  open,
+  onOpenChange,
+  amSlots,
+  pmSlots,
+  currentDate,
+  currentTimeStart,
+  currentTimeEnd,
+  onReschedule
+}) {
+  const [date, setDate] = React.useState(/* @__PURE__ */ new Date());
+  const [slot, setSlot] = React.useState();
+  const [note, setNote] = React.useState("");
+  const handleOpenChange = (next) => {
+    if (!next) {
+      setDate(/* @__PURE__ */ new Date());
+      setSlot(void 0);
+      setNote("");
+    }
+    onOpenChange(next);
+  };
+  const totalAvailable = [...amSlots, ...pmSlots].filter(
+    (s) => s.available
+  ).length;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { size: "2xl", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Propose New Time" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Select a new date and time slot. The client will be notified by email." })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    (currentDate || currentTimeStart) && /* @__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: [
+        currentDate && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+          currentDate
+        ] }),
+        currentTimeStart && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5 shrink-0" }),
+          currentTimeStart,
+          currentTimeEnd ? ` \u2013 ${currentTimeEnd}` : ""
+        ] })
+      ] })
+    ] }),
+    /* @__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: "New date" }),
+        /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            selected: date,
+            onSelect: (d) => {
+              setDate(d);
+              setSlot(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-5", children: date ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            totalAvailable,
+            " available"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          AppointmentSlotSection,
+          {
+            label: "Morning",
+            slots: amSlots,
+            selectedSlotId: slot == null ? void 0 : slot.id,
+            onSelect: setSlot
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AppointmentSlotSection,
+          {
+            label: "Afternoon",
+            slots: pmSlots,
+            selectedSlotId: slot == null ? void 0 : slot.id,
+            onSelect: setSlot
+          }
+        )
+      ] }) : /* @__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: "Select a time slot" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Pick a date on the left to see available slots." })
+      ] }) })
+    ] }),
+    /* @__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. Rescheduling due to an internal conflict \u2014 apologies for the inconvenience\u2026",
+          value: note,
+          onChange: (e) => setNote(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: !date || !slot,
+          onClick: () => {
+            if (date && slot) {
+              onReschedule(date, slot, note);
+              handleOpenChange(false);
+            }
+          },
+          children: "Propose New Time"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export {
+  AppointmentConfirmDialog,
+  AppointmentRescheduleDialog
+};

package/dist/chunk-6CR5N2JW.mjs

@@ -0,0 +1,302 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  ChartLegendItem,
+  ChartPeriodButton,
+  FALLBACK_TICK,
+  formatCount,
+  formatMonthLabel,
+  formatTooltipDate,
+  hexToRgba
+} from "./chunk-M3FV7LOK.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-NQPOYKAQ.mjs";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-C7CQJNMR.mjs";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./chunk-EI5F6FMT.mjs";
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/backoffice-connections-chart.tsx
+import { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { BarChart2, LineChart } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip
+);
+var PERIODS = [3, 6, 12];
+var SLICE_COUNT = {
+  3: 3,
+  6: 6,
+  12: 12
+};
+var ALL_COLOR = "#040D13";
+var BANK_COLOR = "#33FF99";
+var PROPERTY_COLOR = "#3B82F6";
+var NONE_COLOR = "#9EAAB5";
+function ConnectionsLegend() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: [
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "All Contacts",
+        color: ALL_COLOR,
+        lineStyle: "solid"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Bank Connected",
+        color: BANK_COLOR,
+        lineStyle: "solid"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Property Connected",
+        color: PROPERTY_COLOR,
+        lineStyle: "solid"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Not Connected",
+        color: NONE_COLOR,
+        lineStyle: "solid"
+      }
+    )
+  ] });
+}
+function BackofficeConnectionsChart({
+  chartData,
+  title = "Contacts and Connections",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const [period, setPeriod] = useState(defaultPeriod);
+  const [chartType, setChartType] = useState("line");
+  const themeVars = useThemeVars();
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const sliced = useMemo(() => {
+    if (!(chartData == null ? void 0 : chartData.length)) return null;
+    const count = Math.min(SLICE_COUNT[period], chartData.length);
+    return chartData.slice(chartData.length - count);
+  }, [chartData, period]);
+  const labels = useMemo(
+    () => {
+      var _a;
+      return (_a = sliced == null ? void 0 : sliced.map((p) => formatMonthLabel(p.date))) != null ? _a : [];
+    },
+    [sliced]
+  );
+  const isBar = chartType === "bar";
+  const datasets = useMemo(() => {
+    if (!sliced) return [];
+    return [
+      {
+        type: chartType,
+        label: "All Contacts",
+        data: sliced.map((p) => p.all),
+        borderColor: ALL_COLOR,
+        backgroundColor: isBar ? ALL_COLOR : hexToRgba(ALL_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Bank Connected",
+        data: sliced.map((p) => p.bankConnected),
+        borderColor: BANK_COLOR,
+        backgroundColor: isBar ? BANK_COLOR : hexToRgba(BANK_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Property Connected",
+        data: sliced.map((p) => p.propertyConnected),
+        borderColor: PROPERTY_COLOR,
+        backgroundColor: isBar ? PROPERTY_COLOR : hexToRgba(PROPERTY_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Not Connected",
+        data: sliced.map((p) => p.notConnected),
+        borderColor: NONE_COLOR,
+        backgroundColor: isBar ? NONE_COLOR : hexToRgba(NONE_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      }
+    ];
+  }, [sliced, chartType, isBar]);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 300 },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              var _a, _b, _c, _d;
+              const idx = (_a = tooltipItems[0]) == null ? void 0 : _a.dataIndex;
+              if (idx != null && ((_b = sliced == null ? void 0 : sliced[idx]) == null ? void 0 : _b.date)) {
+                return formatTooltipDate(sliced[idx].date, "monthly");
+              }
+              return (_d = (_c = tooltipItems[0]) == null ? void 0 : _c.label) != null ? _d : "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: ${formatCount(val)}`;
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 }
+          }
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          beginAtZero: true,
+          ticks: {
+            padding: 8,
+            maxTicksLimit: 5,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            callback: (v) => formatCount(Number(v))
+          }
+        }
+      }
+    }),
+    [showXAxis, showYAxis, sliced]
+  );
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn("w-full py-4 sm:py-6 gap-2", className),
+      style: { maxWidth: width, fontFamily },
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "px-3 sm:px-6", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
+          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              ToggleGroup,
+              {
+                type: "single",
+                variant: "outline",
+                size: "sm",
+                value: chartType,
+                onValueChange: (v) => v && setChartType(v),
+                children: [
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "line", "aria-label": "Line chart", children: /* @__PURE__ */ jsx(LineChart, { className: "size-3.5" }) }),
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "bar", "aria-label": "Bar chart", children: /* @__PURE__ */ jsx(BarChart2, { className: "size-3.5" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-0.5 sm:gap-1", children: PERIODS.map((p) => /* @__PURE__ */ jsx(
+              ChartPeriodButton,
+              {
+                period: p,
+                active: period === p,
+                onClick: () => setPeriod(p)
+              },
+              p
+            )) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { style: { height, width: "100%" } }) : !sliced ? /* @__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-2", children: [
+          showLegend && legendPosition === "top" && /* @__PURE__ */ jsx(ConnectionsLegend, {}),
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: chartType,
+              data: { labels, datasets },
+              options,
+              "aria-label": title
+            },
+            chartType
+          ) }),
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx(ConnectionsLegend, {})
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  BackofficeConnectionsChart
+};

package/dist/{chunk-XIRTEFKH.mjs → chunk-6DZEXFNB.mjs}

@@ -1,6 +1,6 @@
 import {
   buttonVariants
-} from "./chunk-2I5S2AMY.mjs";
+} from "./chunk-XREGSKX3.mjs";
 import {
   useThemeVars
 } from "./chunk-FEZKMUCF.mjs";
@@ -51,38 +51,65 @@ function DialogOverlay(_a) {
     }, props)
   );
 }
+var DIALOG_MAX_WIDTHS = {
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  full: "100%"
+};
+var DIALOG_AUTO_MIN_WIDTH = "20rem";
 function DialogContent(_a) {
   var _b = _a, {
     className,
     children,
     showCloseButton = true,
-    style
+    style,
+    container,
+    align = "center",
+    size = "lg",
+    minWidth
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "showCloseButton",
-    "style"
+    "style",
+    "container",
+    "align",
+    "size",
+    "minWidth"
   ]);
   const themeVars = useThemeVars();
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  const isAuto = size === "auto";
+  const sizeStyle = isAuto ? { minWidth: minWidth != null ? minWidth : DIALOG_AUTO_MIN_WIDTH } : { maxWidth: DIALOG_MAX_WIDTHS[size] };
+  return /* @__PURE__ */ jsxs(DialogPortal, { container: container != null ? container : void 0, children: [
     /* @__PURE__ */ jsx(DialogOverlay, { style: themeVars }),
     /* @__PURE__ */ jsxs(
       DialogPrimitive.Popup,
       __spreadProps(__spreadValues({
         className: cn(
-          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels), foreground/50 scrim via DialogOverlay
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 sm:max-w-lg",
+          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels)
+          // max-w-[calc(100%-2rem)] acts as a viewport-edge guard on all sizes.
+          // Fixed max-width is applied via inline style (sizeStyle) to avoid
+          // Tailwind v4 class-scanning gaps with dynamic class lookups.
+          "fixed left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          // "auto" → hug content (with min-width floor); fixed sizes → fill to max-width
+          isAuto ? "w-auto" : "w-full",
+          align === "center" ? "top-[50%] translate-y-[-50%]" : "top-4 translate-y-0",
           className
         ),
         "data-slot": "dialog-content",
-        style: __spreadValues(__spreadValues({}, themeVars), style)
+        style: __spreadValues(__spreadValues(__spreadValues({}, themeVars), sizeStyle), style)
       }, props), {
         children: [
           children,
           showCloseButton ? /* @__PURE__ */ jsxs(
             DialogPrimitive.Close,
             {
-              className: "absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "absolute top-4 right-4 inline-flex size-7 items-center justify-center transition-colors hover:bg-foreground/5 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               "data-slot": "dialog-close",
               children: [
                 /* @__PURE__ */ jsx(XIcon, {}),
@@ -135,6 +162,7 @@ function DialogFooter(_a) {
           DialogPrimitive.Close,
           {
             className: cn(buttonVariants({ variant: "outline" })),
+            type: "button",
             children: "Close"
           }
         ) : null