@wealthx/shadcn 1.0.2 → 1.2.0

package/dist/{chunk-JF4PHPD5.mjs → chunk-RGVKLTLH.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -18,7 +18,7 @@ function Checkbox(_a) {
     CheckboxPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "peer group inline-flex size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-all outline-none",
+        "peer group inline-flex size-4 shrink-0 border border-input shadow-xs transition-all outline-none",
         "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
@@ -97,8 +97,8 @@ function CheckboxCard(_a) {
           }, props)
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-none", children: label }),
-          description ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: description }) : null
+          /* @__PURE__ */ jsx("span", { className: "text-label-medium leading-none", children: label }),
+          description ? /* @__PURE__ */ jsx("span", { className: "text-body-small text-muted-foreground", children: description }) : null
         ] })
       ]
     }

package/dist/{chunk-VG6UF6UT.mjs → chunk-RP3SQYA3.mjs}

@@ -1,9 +1,9 @@
 import {
   badgeVariants
-} from "./chunk-E3K6O4FZ.mjs";
+} from "./chunk-WAZD7NFU.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,

package/dist/chunk-RRBS6D63.mjs

@@ -0,0 +1,163 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  DoughnutLegendRow,
+  FALLBACK_PRIMARY,
+  FALLBACK_SECONDARY,
+  formatAbbrev
+} from "./chunk-FZIXGLMV.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-NQPOYKAQ.mjs";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-CLIN5525.mjs";
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/property-cashflow-doughnut-chart.tsx
+import { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(ArcElement, Tooltip);
+function PropertyCashflowDoughnutChart({
+  income,
+  expenses,
+  title = "Property Cashflow",
+  showLegend = true,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const themeVars = useThemeVars();
+  const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const brandSecondary = themeVars["--theme-secondary"] || FALLBACK_SECONDARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const incomeVal = Math.max(0, income != null ? income : 0);
+  const expensesVal = Math.max(0, expenses != null ? expenses : 0);
+  const total = incomeVal + expensesVal;
+  const netCashflow = incomeVal - expensesVal;
+  const hasData = total > 0;
+  const chartData = useMemo(
+    () => ({
+      labels: ["Income", "Expenses"],
+      datasets: [
+        {
+          data: [incomeVal, expensesVal],
+          backgroundColor: [brandPrimary, brandSecondary],
+          borderWidth: 0,
+          hoverOffset: 4
+        }
+      ]
+    }),
+    [incomeVal, expensesVal, brandPrimary, brandSecondary]
+  );
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      cutout: "68%",
+      animation: { duration: 600, easing: "easeOutQuart" },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          padding: 10,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            label: (ctx) => {
+              const val = ctx.raw;
+              const pct = total > 0 ? `${(val / total * 100).toFixed(1)}%` : "0%";
+              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
+            }
+          }
+        }
+      }
+    }),
+    [total]
+  );
+  const incomePct = total > 0 ? `${(incomeVal / total * 100).toFixed(1)}%` : "0%";
+  const expensesPct = total > 0 ? `${(expensesVal / total * 100).toFixed(1)}%` : "0%";
+  const netLabel = netCashflow >= 0 ? "Surplus" : "Deficit";
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      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(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(
+              Chart,
+              {
+                type: "doughnut",
+                data: chartData,
+                options,
+                "aria-label": title
+              },
+              `${brandPrimary}__${brandSecondary}`
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  textAlign: "center",
+                  pointerEvents: "none"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: formatAbbrev(Math.abs(netCashflow)) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground leading-none mt-1", children: netLabel })
+                ]
+              }
+            )
+          ] }),
+          showLegend && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(
+              DoughnutLegendRow,
+              {
+                label: "Income",
+                color: brandPrimary,
+                value: incomeVal,
+                percent: incomePct
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DoughnutLegendRow,
+              {
+                label: "Expenses",
+                color: brandSecondary,
+                value: expensesVal,
+                percent: expensesPct
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  PropertyCashflowDoughnutChart
+};

package/dist/chunk-SMQ3DG25.mjs

@@ -0,0 +1,285 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  ChartPeriodButton,
+  FALLBACK_PRIMARY,
+  FALLBACK_SECONDARY,
+  FALLBACK_TICK,
+  formatTooltipDate,
+  hexToRgba
+} from "./chunk-FZIXGLMV.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-NQPOYKAQ.mjs";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-CLIN5525.mjs";
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/cashflow-bar-chart.tsx
+import { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+function LegendItem({
+  label,
+  fillColor,
+  strokeColor,
+  strokeWidth = 1.5
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: 10,
+          height: 10,
+          backgroundColor: fillColor,
+          border: strokeWidth > 0 ? `${strokeWidth}px solid ${strokeColor}` : "none",
+          flexShrink: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground leading-none", children: label })
+  ] });
+}
+function ChartLegend({
+  primary,
+  secondary
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: [
+    /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        label: "Income",
+        fillColor: hexToRgba(primary, 0.2),
+        strokeColor: primary
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        label: "Expenses and Liabilities",
+        fillColor: hexToRgba(secondary, 0.2),
+        strokeColor: secondary
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        label: "Surplus Income",
+        fillColor: primary,
+        strokeColor: primary,
+        strokeWidth: 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        label: "Over Spending",
+        fillColor: secondary,
+        strokeColor: secondary,
+        strokeWidth: 0
+      }
+    )
+  ] });
+}
+var PERIODS = [3, 6, 12];
+function CashflowBarChart({
+  cashflowData,
+  title = "Cashflow",
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  legendPosition = "top",
+  defaultPeriod = 6,
+  showPeriodSelector = true,
+  height = 280,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const [period, setPeriod] = useState(defaultPeriod);
+  const themeVars = useThemeVars();
+  const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const brandSecondary = themeVars["--theme-secondary"] || FALLBACK_SECONDARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const sliced = useMemo(() => {
+    var _a;
+    if (!((_a = cashflowData == null ? void 0 : cashflowData.data) == null ? void 0 : _a.length)) return null;
+    const count = Math.min(period, cashflowData.data.length);
+    const start = cashflowData.data.length - count;
+    return {
+      months: cashflowData.months.slice(start),
+      data: cashflowData.data.slice(start)
+    };
+  }, [cashflowData, period]);
+  const chartData = useMemo(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels: sliced.months,
+      datasets: [
+        {
+          label: "Income",
+          data: sliced.data.map((d) => d.income),
+          backgroundColor: hexToRgba(brandPrimary, 0.2),
+          hoverBackgroundColor: hexToRgba(brandPrimary, 0.35),
+          borderColor: brandPrimary,
+          borderWidth: 1.5,
+          borderRadius: 0,
+          borderSkipped: false,
+          barPercentage: 0.75,
+          categoryPercentage: 0.7
+        },
+        {
+          label: "Expenses and Liabilities",
+          data: sliced.data.map((d) => d.expenses),
+          backgroundColor: hexToRgba(brandSecondary, 0.2),
+          hoverBackgroundColor: hexToRgba(brandSecondary, 0.35),
+          borderColor: brandSecondary,
+          borderWidth: 1.5,
+          borderRadius: 0,
+          borderSkipped: false,
+          barPercentage: 0.75,
+          categoryPercentage: 0.7
+        },
+        {
+          label: "_thirdBar",
+          data: sliced.data.map(
+            (d) => d.overspending > 0 ? d.overspending : d.surplus
+          ),
+          backgroundColor: sliced.data.map(
+            (d) => d.overspending > 0 ? brandSecondary : brandPrimary
+          ),
+          hoverBackgroundColor: sliced.data.map(
+            (d) => d.overspending > 0 ? hexToRgba(brandSecondary, 0.8) : hexToRgba(brandPrimary, 0.8)
+          ),
+          borderWidth: 0,
+          borderRadius: 0,
+          borderSkipped: false,
+          barPercentage: 0.75,
+          categoryPercentage: 0.7
+        }
+      ]
+    };
+  }, [sliced, brandPrimary, brandSecondary]);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, easing: "easeOutQuart" },
+      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.data[idx]) == null ? void 0 : _b.date)) {
+                return formatTooltipDate(sliced.data[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;
+              if (ctx.datasetIndex === 2) {
+                const d = sliced == null ? void 0 : sliced.data[ctx.dataIndex];
+                if (!d) return;
+                const lbl = d.overspending > 0 ? "Over Spending" : "Surplus Income";
+                return ` ${lbl}: $${val.toLocaleString()}`;
+              }
+              return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { font: { size: 10 }, color: FALLBACK_TICK }
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            font: { size: 10 },
+            color: FALLBACK_TICK,
+            maxTicksLimit: 5,
+            padding: 8,
+            callback: (v) => `$${Number(v).toLocaleString()}`
+          }
+        }
+      }
+    }),
+    [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-sm sm:text-base uppercase tracking-wider", children: title }),
+          showPeriodSelector && /* @__PURE__ */ jsx(CardAction, { children: /* @__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(ChartLegend, { primary: brandPrimary, secondary: brandSecondary }),
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: "bar",
+              data: chartData,
+              options,
+              "aria-label": title
+            },
+            `${brandPrimary}__${brandSecondary}`
+          ) }),
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx(ChartLegend, { primary: brandPrimary, secondary: brandSecondary })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  CashflowBarChart
+};

package/dist/chunk-SPJ5KXW7.mjs

@@ -0,0 +1,199 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-JHJHG4GO.mjs";
+import {
+  Sheet,
+  SheetContent
+} from "./chunk-462HMNO4.mjs";
+import {
+  Spinner
+} from "./chunk-7YAU5CY6.mjs";
+import {
+  Button
+} from "./chunk-2I5S2AMY.mjs";
+
+// src/components/ui/financial-drawers.tsx
+import { X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SummaryReportDrawer({
+  open,
+  onOpenChange,
+  contactName = "Contact",
+  hasJointView = false,
+  viewMode = "individual",
+  onViewModeChange,
+  jointSubTab = "joint",
+  onJointSubTabChange,
+  jointMainUserName = "User A",
+  jointCoApplicantName = "User B",
+  onCreateJointView,
+  onRemoveJointView,
+  actionButtons,
+  alerts,
+  isLoading = false,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsx(
+    SheetContent,
+    {
+      side: "right",
+      showCloseButton: false,
+      className: "w-[min(1080px,90vw)] max-w-none p-0",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[100dvh] min-h-0 flex-1 flex-col overflow-hidden px-8 py-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "shrink-0 space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: hasJointView ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: viewMode === "individual" ? "default" : "outline",
+                      size: "sm",
+                      onClick: () => onViewModeChange == null ? void 0 : onViewModeChange("individual"),
+                      children: "Individual View"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: viewMode === "joint" ? "default" : "outline",
+                      size: "sm",
+                      onClick: () => onViewModeChange == null ? void 0 : onViewModeChange("joint"),
+                      children: "Joint View"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: onRemoveJointView,
+                    children: "Remove Joint View"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-label-medium text-foreground", children: [
+                  contactName,
+                  " View"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: onCreateJointView,
+                    children: "Create Joint View"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => onOpenChange(false),
+                  "aria-label": "Close drawer",
+                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            hasJointView && viewMode === "joint" && /* @__PURE__ */ jsx(
+              Tabs,
+              {
+                value: jointSubTab,
+                onValueChange: (v) => onJointSubTabChange == null ? void 0 : onJointSubTabChange(v),
+                children: /* @__PURE__ */ jsxs(TabsList, { children: [
+                  /* @__PURE__ */ jsx(TabsTrigger, { value: "joint", children: "Joint View" }),
+                  /* @__PURE__ */ jsxs(TabsTrigger, { value: "userA", children: [
+                    jointMainUserName,
+                    " View"
+                  ] }),
+                  /* @__PURE__ */ jsxs(TabsTrigger, { value: "userB", children: [
+                    jointCoApplicantName,
+                    " View"
+                  ] })
+                ] })
+              }
+            )
+          ] }),
+          !isLoading && actionButtons && /* @__PURE__ */ jsx("div", { children: actionButtons }),
+          !isLoading && alerts && /* @__PURE__ */ jsx("div", { children: alerts })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-[200px] items-center justify-center py-12", children: /* @__PURE__ */ jsx(Spinner, { size: "xl", className: "text-primary" }) }) : children })
+      ] })
+    }
+  ) });
+}
+var OPPORTUNITY_TABS = [
+  { value: "summary", label: "Summary" },
+  { value: "tasks", label: "Tasks" },
+  { value: "bankStatement", label: "Reports & Statements" },
+  { value: "policyAI", label: "Policy AI" },
+  { value: "runServicing", label: "Run Servicing" },
+  { value: "emailAndNotes", label: "Email & Notes" },
+  { value: "syncLoanApp", label: "Sync Loan App" }
+];
+function OpportunityDetailsDrawer({
+  open,
+  onOpenChange,
+  defaultTab = "summary",
+  tabs
+}) {
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsx(
+    SheetContent,
+    {
+      side: "right",
+      showCloseButton: false,
+      className: "w-[min(1048px,100vw)] max-w-none p-0",
+      children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTab, className: "h-full gap-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-end border-b border-border", children: [
+          /* @__PURE__ */ jsx(
+            TabsList,
+            {
+              variant: "line",
+              className: "flex-1 group-data-[orientation=horizontal]/tabs:h-auto justify-start rounded-none bg-transparent p-0",
+              children: OPPORTUNITY_TABS.map((tab) => /* @__PURE__ */ jsx(
+                TabsTrigger,
+                {
+                  value: tab.value,
+                  className: "flex-none h-auto py-3 px-4 text-sm",
+                  children: tab.label
+                },
+                tab.value
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 self-center items-center pr-3", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              onClick: () => onOpenChange(false),
+              "aria-label": "Close drawer",
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: OPPORTUNITY_TABS.map((tab) => /* @__PURE__ */ jsx(
+          TabsContent,
+          {
+            value: tab.value,
+            className: "mt-0 flex-none p-5 outline-none",
+            children: tabs == null ? void 0 : tabs[tab.value]
+          },
+          tab.value
+        )) })
+      ] })
+    }
+  ) });
+}
+
+export {
+  SummaryReportDrawer,
+  OpportunityDetailsDrawer
+};