@wealthx/shadcn 1.1.0 → 1.2.0

package/dist/chunk-LE6YFY6D.mjs

@@ -0,0 +1,209 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  ChartLegendItem,
+  ChartPeriodButton,
+  FALLBACK_TICK,
+  SEVERITY_COLORS,
+  formatCount,
+  formatMonthLabel,
+  formatTooltipDate
+} 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/backoffice-alert-history-chart.tsx
+import { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+var ALERT_PERIODS = [3, 6, 12];
+var SLICE_COUNT = { 3: 3, 6: 6, 12: 12 };
+function ChartLegend() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: [
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "High", color: SEVERITY_COLORS.high }),
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "Medium", color: SEVERITY_COLORS.medium }),
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "Low", color: SEVERITY_COLORS.low })
+  ] });
+}
+function BackofficeAlertHistoryChart({
+  chartData,
+  title = "Alert History",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const [period, setPeriod] = useState(defaultPeriod);
+  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 data = useMemo(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels,
+      datasets: [
+        {
+          label: "High",
+          data: sliced.map((p) => p.high),
+          backgroundColor: SEVERITY_COLORS.high,
+          borderWidth: 0,
+          stack: "alerts"
+        },
+        {
+          label: "Medium",
+          data: sliced.map((p) => p.medium),
+          backgroundColor: SEVERITY_COLORS.medium,
+          borderWidth: 0,
+          stack: "alerts"
+        },
+        {
+          label: "Low",
+          data: sliced.map((p) => p.low),
+          backgroundColor: SEVERITY_COLORS.low,
+          borderWidth: 0,
+          stack: "alerts"
+        }
+      ]
+    };
+  }, [sliced, labels]);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 600, 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[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: {
+          stacked: true,
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 }
+          }
+        },
+        y: {
+          stacked: true,
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          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-sm sm:text-base", children: title }),
+          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx("div", { className: "flex gap-0.5 sm:gap-1", children: ALERT_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, {}),
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: "bar",
+              data,
+              options,
+              "aria-label": title
+            }
+          ) }),
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx(ChartLegend, {})
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  BackofficeAlertHistoryChart
+};

package/dist/{chunk-NLLKTU4B.mjs → chunk-LLVQKSU3.mjs}

@@ -1,12 +1,12 @@
 import {
   Separator
-} from "./chunk-55CEW76V.mjs";
+} from "./chunk-FH6QVUVZ.mjs";
 import {
   Label
-} from "./chunk-ZZV5JVNW.mjs";
+} from "./chunk-NSLMILBT.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -43,9 +43,9 @@ function FieldLegend(_a) {
     "legend",
     __spreadValues({
       className: cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
+        "mb-3",
+        "data-[variant=legend]:text-label-large",
+        "data-[variant=label]:text-label-medium",
         className
       ),
       "data-slot": "field-legend",
@@ -108,7 +108,11 @@ function Field(_a) {
   );
 }
 function FieldContent(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
@@ -121,11 +125,7 @@ function FieldContent(_a) {
   );
 }
 function FieldLabel(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Label,
     __spreadValues({
@@ -145,7 +145,7 @@ function FieldTitle(_a) {
     "div",
     __spreadValues({
       className: cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-label-medium leading-snug group-data-[disabled=true]/field:opacity-50",
         className
       ),
       "data-slot": "field-label"
@@ -153,12 +153,16 @@ function FieldTitle(_a) {
   );
 }
 function FieldDescription(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     "p",
     __spreadValues({
       className: cn(
-        "text-xs leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "text-caption leading-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
@@ -179,7 +183,7 @@ function FieldSeparator(_a) {
     "div",
     __spreadProps(__spreadValues({
       className: cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        "relative -my-2 h-5 text-body-small group-data-[variant=outline]/field-group:-mb-2",
         className
       ),
       "data-content": Boolean(children),
@@ -233,7 +237,7 @@ function FieldError(_a) {
   return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
-      className: cn("text-xs font-normal text-destructive", className),
+      className: cn("text-caption text-destructive", className),
       "data-slot": "field-error",
       role: "alert"
     }, props), {

package/dist/{chunk-KKHTJNMM.mjs → chunk-MARPPFOJ.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -15,7 +15,11 @@ function Accordion(props) {
   return /* @__PURE__ */ jsx(AccordionPrimitive.Root, __spreadValues({ "data-slot": "accordion" }, props));
 }
 function AccordionItem(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Item,
     __spreadValues({
@@ -39,7 +43,7 @@ function AccordionTrigger(_a) {
         // layout
         "flex flex-1 items-center justify-between gap-4 py-4 text-left",
         // typography
-        "text-sm font-medium",
+        "text-label-medium",
         // base
         "rounded-none outline-none transition-[color,opacity]",
         // interactive states
@@ -70,7 +74,7 @@ function AccordionContent(_a) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Panel,
     __spreadProps(__spreadValues({
-      className: "overflow-hidden text-sm h-(--accordion-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0",
+      className: "overflow-hidden text-body-small h-(--accordion-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0",
       "data-slot": "accordion-content"
     }, props), {
       children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 text-muted-foreground", className), children })

package/dist/{chunk-6AFMNC42.mjs → chunk-N2PT566P.mjs}

@@ -1,9 +1,9 @@
 import {
   useThemeVars
-} from "./chunk-OXQQNQZI.mjs";
+} from "./chunk-FEZKMUCF.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -84,7 +84,11 @@ function DrawerContent(_a) {
   ] });
 }
 function DrawerHeader(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
@@ -94,7 +98,11 @@ function DrawerHeader(_a) {
   );
 }
 function DrawerFooter(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
@@ -104,15 +112,11 @@ function DrawerFooter(_a) {
   );
 }
 function DrawerTitle(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DrawerPrimitive.Title,
     __spreadValues({
-      className: cn("text-lg font-semibold text-foreground", className),
+      className: cn("text-h5 text-foreground", className),
       "data-slot": "drawer-title"
     }, props)
   );
@@ -126,7 +130,7 @@ function DrawerDescription(_a) {
   return /* @__PURE__ */ jsx(
     DrawerPrimitive.Description,
     __spreadValues({
-      className: cn("text-sm text-muted-foreground", className),
+      className: cn("text-body-small text-muted-foreground", className),
       "data-slot": "drawer-description"
     }, props)
   );

package/dist/chunk-NLCKVHWB.mjs

@@ -0,0 +1,161 @@
+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-expense-categories-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 TransactionsExpenseCategoriesDoughnutChart({
+  segments,
+  title = "Expense Categories",
+  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 {
+  TransactionsExpenseCategoriesDoughnutChart
+};

package/dist/{chunk-YN5SYTOO.mjs → chunk-NQPOYKAQ.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -71,7 +71,7 @@ function EmptyTitle(_a) {
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
-      className: cn("text-lg font-medium tracking-tight", className),
+      className: cn("text-h5", className),
       "data-slot": "empty-title"
     }, props)
   );
@@ -86,7 +86,7 @@ function EmptyDescription(_a) {
     "div",
     __spreadValues({
       className: cn(
-        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        "text-body-small leading-relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       ),
       "data-slot": "empty-description"
@@ -94,12 +94,16 @@ function EmptyDescription(_a) {
   );
 }
 function EmptyContent(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
       className: cn(
-        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-body-small text-balance",
         className
       ),
       "data-slot": "empty-content"

package/dist/{chunk-ZZV5JVNW.mjs → chunk-NSLMILBT.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -9,18 +9,14 @@ import {
 // src/components/ui/label.tsx
 import { jsx } from "react/jsx-runtime";
 function Label(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control -- htmlFor is passed by the consumer
     /* @__PURE__ */ jsx(
       "label",
       __spreadValues({
         className: cn(
-          "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+          "flex items-center gap-2 text-label-medium leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
           className
         ),
         "data-slot": "label"