@wealthx/shadcn 1.1.0 → 1.2.1

package/dist/{chunk-46OFHMQA.mjs → chunk-Q76O3RIQ.mjs}

@@ -1,15 +1,15 @@
 import {
   Textarea
-} from "./chunk-GPRJQ24C.mjs";
+} from "./chunk-34NWQURD.mjs";
 import {
   Input
-} from "./chunk-DS2AMHN2.mjs";
+} from "./chunk-GYMYRIZP.mjs";
 import {
   Button
-} from "./chunk-4AJ5HWHD.mjs";
+} from "./chunk-2I5S2AMY.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -131,12 +131,16 @@ function InputGroupButton(_a) {
   );
 }
 function InputGroupText(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     "span",
     __spreadValues({
       className: cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 text-body-small text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props)

package/dist/chunk-RGU7HOEC.mjs

@@ -0,0 +1,140 @@
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/pipeline-chart.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatValue(v) {
+  return new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(v);
+}
+var FALLBACK_COLORS = [
+  "var(--color-stage-1)",
+  "var(--color-stage-2)",
+  "var(--color-stage-3)",
+  "var(--color-stage-4)",
+  "var(--color-stage-5)"
+];
+function PipelineChart({
+  stages,
+  barHeight = 32,
+  className
+}) {
+  const themeVars = useThemeVars();
+  const [activeId, setActiveId] = React.useState(null);
+  const [tooltipX, setTooltipX] = React.useState(0);
+  const barRef = React.useRef(null);
+  const nonEmpty = stages.filter((s) => s.value > 0);
+  const total = nonEmpty.reduce((sum, s) => sum + s.value, 0);
+  if (total === 0 || stages.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center text-xs text-muted-foreground",
+          className
+        ),
+        style: { height: barHeight },
+        "data-slot": "pipeline-chart",
+        children: "No pipeline data."
+      }
+    );
+  }
+  const activeStage = activeId ? stages.find((s) => s.id === activeId) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-3", className),
+      "data-slot": "pipeline-chart",
+      style: themeVars,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: barRef,
+            className: "relative flex w-full overflow-hidden",
+            style: { height: barHeight },
+            children: [
+              nonEmpty.map((stage, i) => {
+                var _a;
+                const pct = stage.value / total * 100;
+                const color = (_a = stage.color) != null ? _a : FALLBACK_COLORS[i % FALLBACK_COLORS.length];
+                const isActive = activeId === stage.id;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "img",
+                    className: "relative h-full cursor-pointer transition-opacity",
+                    style: {
+                      width: `${pct}%`,
+                      backgroundColor: color,
+                      opacity: activeId && !isActive ? 0.5 : 1,
+                      minWidth: 2
+                    },
+                    onMouseEnter: (e) => {
+                      setActiveId(stage.id);
+                      const bar = barRef.current;
+                      if (!bar) return;
+                      const rect = e.currentTarget.getBoundingClientRect();
+                      const barRect = bar.getBoundingClientRect();
+                      setTooltipX(rect.left + rect.width / 2 - barRect.left);
+                    },
+                    onMouseLeave: () => setActiveId(null),
+                    "aria-label": `${stage.name}: ${formatValue(stage.value)}`
+                  },
+                  stage.id
+                );
+              }),
+              activeStage && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "pointer-events-none absolute -top-8 z-10 whitespace-nowrap border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-sm",
+                  style: { left: tooltipX, transform: "translateX(-50%)" },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: activeStage.name }),
+                    " \u2014 ",
+                    formatValue(activeStage.value)
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: nonEmpty.map((stage, i) => {
+          var _a;
+          const color = (_a = stage.color) != null ? _a : FALLBACK_COLORS[i % FALLBACK_COLORS.length];
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-1.5 text-xs text-muted-foreground",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "inline-block size-2 shrink-0 rounded-full",
+                    style: { backgroundColor: color },
+                    "aria-hidden": "true"
+                  }
+                ),
+                stage.name
+              ]
+            },
+            stage.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+export {
+  PipelineChart
+};

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-RYCLWMZ7.mjs

@@ -0,0 +1,162 @@
+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-debt-equity-doughnut-chart.tsx
+import { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  DoughnutController,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(ArcElement, DoughnutController, Tooltip);
+function PropertyDebtEquityDoughnutChart({
+  estimateValue,
+  debtValue,
+  title = "Debt & Equity",
+  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 estimate = estimateValue != null ? estimateValue : 0;
+  const debt = Math.min(debtValue != null ? debtValue : 0, estimate);
+  const equity = Math.max(0, estimate - debt);
+  const hasData = estimate > 0;
+  const chartData = useMemo(
+    () => ({
+      labels: ["Equity", "Debt"],
+      datasets: [
+        {
+          data: [equity, debt],
+          backgroundColor: [brandPrimary, brandSecondary],
+          borderWidth: 0,
+          hoverOffset: 4
+        }
+      ]
+    }),
+    [equity, debt, 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 = estimate > 0 ? `${(val / estimate * 100).toFixed(1)}%` : "0%";
+              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
+            }
+          }
+        }
+      }
+    }),
+    [estimate]
+  );
+  const equityPct = estimate > 0 ? `${(equity / estimate * 100).toFixed(1)}%` : "0%";
+  const debtPct = estimate > 0 ? `${(debt / estimate * 100).toFixed(1)}%` : "0%";
+  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(equity) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground leading-none mt-1", children: "Equity" })
+                ]
+              }
+            )
+          ] }),
+          showLegend && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(
+              DoughnutLegendRow,
+              {
+                label: "Equity",
+                color: brandPrimary,
+                value: equity,
+                percent: equityPct
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DoughnutLegendRow,
+              {
+                label: "Debt",
+                color: brandSecondary,
+                value: debt,
+                percent: debtPct
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  PropertyDebtEquityDoughnutChart
+};

package/dist/chunk-SIZMLSRU.mjs

@@ -0,0 +1,162 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  DATASET_ALPHAS,
+  DoughnutLegendRow,
+  FALLBACK_PRIMARY,
+  formatAbbrev,
+  hexToRgba
+} 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/transactions-liabilities-breakdown-doughnut-chart.tsx
+import { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  DoughnutController,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(ArcElement, DoughnutController, Tooltip);
+function TransactionsLiabilitiesBreakdownChart({
+  segments,
+  title = "Liabilities Breakdown",
+  showLegend = true,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const themeVars = useThemeVars();
+  const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const hasData = !!(segments == null ? void 0 : segments.length) && segments.some((s) => s.value > 0);
+  const total = useMemo(
+    () => {
+      var _a;
+      return (_a = segments == null ? void 0 : segments.reduce((sum, s) => sum + s.value, 0)) != null ? _a : 0;
+    },
+    [segments]
+  );
+  const colors = useMemo(
+    () => (segments != null ? segments : []).map(
+      (_, i) => hexToRgba(brandPrimary, DATASET_ALPHAS[i % DATASET_ALPHAS.length])
+    ),
+    [segments, brandPrimary]
+  );
+  const chartData = useMemo(
+    () => {
+      var _a, _b;
+      return {
+        labels: (_a = segments == null ? void 0 : segments.map((s) => s.label)) != null ? _a : [],
+        datasets: [
+          {
+            data: (_b = segments == null ? void 0 : segments.map((s) => s.value)) != null ? _b : [],
+            backgroundColor: colors,
+            borderWidth: 0,
+            hoverOffset: 4
+          }
+        ]
+      };
+    },
+    [segments, colors]
+  );
+  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]
+  );
+  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
+            ),
+            /* @__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(total) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground leading-none mt-1", children: "Total" })
+                ]
+              }
+            )
+          ] }),
+          showLegend && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: segments.map((s, i) => /* @__PURE__ */ jsx(
+            DoughnutLegendRow,
+            {
+              label: s.label,
+              color: colors[i],
+              value: s.value,
+              percent: total > 0 ? `${(s.value / total * 100).toFixed(1)}%` : "0%"
+            },
+            s.label
+          )) })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  TransactionsLiabilitiesBreakdownChart
+};