@wealthx/shadcn 1.0.2 → 1.2.0

package/dist/chunk-NXA3CZ7A.mjs

@@ -0,0 +1,248 @@
+import {
+  ChartLegendItem,
+  FALLBACK_BG,
+  FALLBACK_PRIMARY,
+  FALLBACK_TICK
+} from "./chunk-FZIXGLMV.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-NQPOYKAQ.mjs";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-CLIN5525.mjs";
+import {
+  Spinner
+} from "./chunk-7YAU5CY6.mjs";
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/cash-balance-line-chart.tsx
+import { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+);
+function formatAbbrev(value) {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  if (abs >= 1e9)
+    return `${sign}$${(abs / 1e9).toFixed(1)}B`;
+  if (abs >= 1e6) return `${sign}$${(abs / 1e6).toFixed(1)}M`;
+  if (abs >= 1e3) return `${sign}$${(abs / 1e3).toFixed(1)}K`;
+  return `${sign}$${abs.toFixed(0)}`;
+}
+function formatBalanceFull(value) {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  return `${sign}$${abs.toLocaleString(void 0, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })}`;
+}
+function formatDateLabel(iso) {
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function formatDateTooltip(iso) {
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function CashBalanceLineChart({
+  chartData,
+  title = "Cash Balance",
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+  showXAxis = true,
+  showYAxis = true,
+  showBalanceValue = false,
+  showLegend = false,
+  legendPosition = "bottom"
+}) {
+  const themeVars = useThemeVars();
+  const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const hasData = Array.isArray(chartData) && chartData.length > 0;
+  const tickIndices = useMemo(() => {
+    if (!hasData) return /* @__PURE__ */ new Set();
+    const count = chartData.length;
+    const step = Math.max(1, Math.floor(count / 6));
+    const indices = /* @__PURE__ */ new Set();
+    for (let i = 0; i < count; i += step) indices.add(i);
+    indices.add(count - 1);
+    return indices;
+  }, [hasData, chartData]);
+  const data = useMemo(() => {
+    if (!hasData) return { labels: [], datasets: [] };
+    return {
+      labels: chartData.map((p) => p.x),
+      // raw ISO — used for tooltip + tick lookup
+      datasets: [
+        {
+          label: title,
+          data: chartData.map((p) => p.y),
+          fill: false,
+          borderColor: brandPrimary,
+          backgroundColor: "transparent",
+          borderWidth: 2.5,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 6,
+          pointHoverBackgroundColor: FALLBACK_BG,
+          pointHoverBorderColor: brandPrimary,
+          pointHoverBorderWidth: 3,
+          pointHitRadius: 10
+        }
+      ]
+    };
+  }, [hasData, chartData, brandPrimary, title]);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 1200, easing: "easeOutQuart" },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          enabled: true,
+          mode: "index",
+          intersect: false,
+          displayColors: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: "600", family: fontFamily },
+          bodyFont: { size: 13, weight: "700", family: fontFamily },
+          callbacks: {
+            title: (items) => {
+              var _a;
+              const iso = (_a = items[0]) == null ? void 0 : _a.label;
+              return iso ? formatDateTooltip(iso) : "";
+            },
+            label: (ctx) => {
+              const val = ctx.parsed.y;
+              const formatted = Math.abs(val).toLocaleString(void 0, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+              });
+              return `$ ${formatted}`;
+            }
+          }
+        }
+      },
+      interaction: { mode: "index", intersect: false },
+      scales: {
+        x: {
+          type: "category",
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10, family: fontFamily },
+            callback: function(_, index) {
+              if (!tickIndices.has(index) || !chartData) return "";
+              return formatDateLabel(chartData[index].x);
+            }
+          }
+        },
+        y: {
+          display: showYAxis,
+          position: "left",
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            beginAtZero: false,
+            maxTicksLimit: 5,
+            padding: 8,
+            color: FALLBACK_TICK,
+            font: { size: 10, family: fontFamily },
+            callback: (v) => formatAbbrev(Number(v))
+          }
+        }
+      }
+    }),
+    [tickIndices, chartData, showXAxis, showYAxis, fontFamily]
+  );
+  const latestValue = hasData ? chartData[chartData.length - 1].y : null;
+  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__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm sm:text-base uppercase tracking-wider", children: title }),
+          showBalanceValue && latestValue !== null && /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold tabular-nums leading-tight", children: formatBalanceFull(latestValue) })
+        ] }) }),
+        /* @__PURE__ */ jsx(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex items-center justify-center text-muted-foreground",
+            style: { height, width: "100%" },
+            children: /* @__PURE__ */ jsx(Spinner, { size: "lg" })
+          }
+        ) : !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-2", children: [
+          showLegend && legendPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5", children: /* @__PURE__ */ jsx(
+            ChartLegendItem,
+            {
+              label: title,
+              color: brandPrimary,
+              lineStyle: "solid"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: "line",
+              data,
+              options,
+              "aria-label": title
+            },
+            brandPrimary
+          ) }),
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5", children: /* @__PURE__ */ jsx(
+            ChartLegendItem,
+            {
+              label: title,
+              color: brandPrimary,
+              lineStyle: "solid"
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  CashBalanceLineChart
+};

package/dist/chunk-OGOYQ7BG.mjs

@@ -0,0 +1,150 @@
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/financial-primitives.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var NO_DATA = "\u2014";
+function FinancialSectionLabel({
+  children
+}) {
+  return /* @__PURE__ */ jsx("span", { className: "text-label-small uppercase text-muted-foreground", children });
+}
+function FinancialCardHeader({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "py-2.5", children: /* @__PURE__ */ jsx("span", { className: "text-label-small uppercase text-muted-foreground", children }) });
+}
+function FinancialSubsectionTitle({
+  children
+}) {
+  return /* @__PURE__ */ jsx("span", { className: "text-label-medium uppercase text-foreground", children });
+}
+function FinancialDetailField({
+  label,
+  value,
+  variant = "caption"
+}) {
+  if (variant === "footer") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-overline text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-label-medium text-foreground mt-1 break-words", children: value != null ? value : NO_DATA })
+    ] });
+  }
+  const labelClass = variant === "caption" ? "block min-h-[2rem] text-caption text-muted-foreground" : "min-h-[1.75rem] text-overline text-muted-foreground";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "min-w-0",
+        variant === "overline" && "flex flex-col gap-0.5"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: labelClass, children: label }),
+        /* @__PURE__ */ jsx("span", { className: "text-label-medium text-foreground break-words", children: value != null ? value : NO_DATA })
+      ]
+    }
+  );
+}
+function FinancialLineItem({
+  label,
+  value,
+  destructive
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 py-0.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-body-small text-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-label-medium whitespace-nowrap text-right",
+          destructive ? "text-destructive" : "text-foreground"
+        ),
+        children: value || NO_DATA
+      }
+    )
+  ] });
+}
+function FinancialLvrBar({
+  percent = 56,
+  label = "56% \u2014 Good"
+}) {
+  const color = percent >= 80 ? "destructive" : percent >= 70 ? "warning" : "success";
+  const textClass = {
+    success: "text-success",
+    warning: "text-warning",
+    destructive: "text-destructive"
+  }[color];
+  const trackClass = {
+    success: "bg-success/15",
+    warning: "bg-warning/15",
+    destructive: "bg-destructive/15"
+  }[color];
+  const fillClass = {
+    success: "bg-success",
+    warning: "bg-warning",
+    destructive: "bg-destructive"
+  }[color];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-body-small text-muted-foreground", children: "LVR" }),
+      /* @__PURE__ */ jsx("span", { className: cn("text-label-medium", textClass), children: label })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("h-2.5 w-full overflow-hidden", trackClass), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("h-full", fillClass),
+        style: { width: `${Math.min(percent, 100)}%` }
+      }
+    ) })
+  ] });
+}
+function FinancialSubtotalFrame({
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "mt-auto border-t border-primary/20 bg-primary/10 px-4 py-3", children });
+}
+function FinancialSubtotalBlock({
+  monthlyAverage,
+  totalLast12Months,
+  label
+}) {
+  const isSingle = monthlyAverage && !totalLast12Months;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-row items-center",
+        isSingle ? "justify-end" : "justify-between"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-0.5",
+              isSingle ? "text-right" : "text-left"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "min-h-[1.75rem] text-overline text-muted-foreground", children: label != null ? label : "Monthly Average" }),
+              /* @__PURE__ */ jsx("span", { className: "text-label-medium text-foreground", children: monthlyAverage != null ? monthlyAverage : NO_DATA })
+            ]
+          }
+        ),
+        !isSingle && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 text-right", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-h-[1.75rem] text-overline text-muted-foreground", children: "Total Last 12 Months" }),
+          /* @__PURE__ */ jsx("span", { className: "text-label-medium text-foreground", children: totalLast12Months != null ? totalLast12Months : NO_DATA })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  FinancialSectionLabel,
+  FinancialCardHeader,
+  FinancialSubsectionTitle,
+  FinancialDetailField,
+  FinancialLineItem,
+  FinancialLvrBar,
+  FinancialSubtotalFrame,
+  FinancialSubtotalBlock
+};

package/dist/{chunk-3NQGYJEZ.mjs → chunk-P6AM5V7O.mjs}

@@ -1,10 +1,10 @@
 import {
   Button,
   buttonVariants
-} from "./chunk-4AJ5HWHD.mjs";
+} from "./chunk-2I5S2AMY.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -52,12 +52,7 @@ function CalendarChevron(_a) {
     return /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({ className: cn("size-4", className) }, props));
   }
   if (orientation === "right") {
-    return /* @__PURE__ */ jsx(
-      ChevronRightIcon,
-      __spreadValues({
-        className: cn("size-4", className)
-      }, props)
-    );
+    return /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({ className: cn("size-4", className) }, props));
   }
   return /* @__PURE__ */ jsx(ChevronDownIcon, __spreadValues({ className: cn("size-4", className) }, props));
 }
@@ -124,7 +119,7 @@ function Calendar(_a) {
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-label-small",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
@@ -136,14 +131,14 @@ function Calendar(_a) {
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "font-medium select-none",
-          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          "select-none",
+          captionLayout === "label" ? "text-label-small" : "flex h-8 items-center gap-1 pr-1 pl-2 text-label-small [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "flex-1 text-[0.8rem] font-normal text-muted-foreground select-none",
+          "flex-1 text-caption font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
@@ -152,7 +147,7 @@ function Calendar(_a) {
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] text-muted-foreground select-none",
+          "text-caption text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
@@ -162,10 +157,7 @@ function Calendar(_a) {
         range_start: cn("bg-accent", defaultClassNames.range_start),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground",
-          defaultClassNames.today
-        ),
+        today: cn("bg-accent text-accent-foreground", defaultClassNames.today),
         outside: cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
           defaultClassNames.outside
@@ -210,7 +202,7 @@ function CalendarDayButton(_a) {
     Button,
     __spreadValues({
       className: cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal rounded-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal rounded-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-caption [&>span]:opacity-70",
         defaultClassNames.day,
         className
       ),

package/dist/{chunk-CZ3BW5GL.mjs → chunk-P76HMUI6.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -10,7 +10,7 @@ import {
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var alertVariants = cva(
-  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 border px-4 py-3 text-body-small has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
@@ -27,13 +27,7 @@ var alertVariants = cva(
   }
 );
 function Alert(_a) {
-  var _b = _a, {
-    className,
-    variant
-  } = _b, props = __objRest(_b, [
-    "className",
-    "variant"
-  ]);
+  var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
@@ -49,7 +43,7 @@ function AlertTitle(_a) {
     "div",
     __spreadValues({
       className: cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        "col-start-2 line-clamp-1 min-h-4 text-label-medium",
         className
       ),
       "data-slot": "alert-title"
@@ -66,7 +60,7 @@ function AlertDescription(_a) {
     "div",
     __spreadValues({
       className: cn(
-        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        "col-start-2 grid justify-items-start gap-1 text-body-small text-muted-foreground [&_p]:leading-relaxed",
         className
       ),
       "data-slot": "alert-description"