@wealthx/shadcn 1.1.0 → 1.2.0

package/dist/{chunk-E3K6O4FZ.mjs → chunk-WAZD7NFU.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-DBHJ5KC3.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -13,13 +13,16 @@ import {
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary: "bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
         destructive: "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        success: "bg-success text-success-foreground [a&]:hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
+        info: "bg-info text-info-foreground [a&]:hover:bg-info/90",
         outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         link: "text-primary underline-offset-4 [a&]:hover:underline"

package/dist/chunk-WG6JGJXB.mjs

@@ -0,0 +1,165 @@
+import {
+  Progress
+} from "./chunk-J5UICVJS.mjs";
+import {
+  TaskCheckItem
+} from "./chunk-FMAXJ2SI.mjs";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "./chunk-MARPPFOJ.mjs";
+import {
+  Spinner
+} from "./chunk-7YAU5CY6.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/stage-timeline.tsx
+import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StageTimeline({
+  stages,
+  onTaskToggle,
+  isLoading = false,
+  className
+}) {
+  var _a, _b;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center gap-3 py-10",
+          className
+        ),
+        "data-slot": "stage-timeline",
+        children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "text-muted-foreground" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading stages\u2026" })
+        ]
+      }
+    );
+  }
+  if (stages.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center py-10 text-sm text-muted-foreground",
+          className
+        ),
+        "data-slot": "stage-timeline",
+        children: "No stages available."
+      }
+    );
+  }
+  const completedCount = stages.filter((s) => s.isCompleted).length;
+  const progressPct = Math.round(completedCount / stages.length * 100);
+  const defaultOpen = (_b = (_a = stages.find((s) => s.isCurrentStage)) == null ? void 0 : _a.id) != null ? _b : stages[0].id;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-4", className),
+      "data-slot": "stage-timeline",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: "Stage progress" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              completedCount,
+              " / ",
+              stages.length,
+              " completed"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Progress, { value: progressPct, className: "h-2.5" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            type: "single",
+            collapsible: true,
+            defaultValue: defaultOpen,
+            className: "w-full",
+            children: stages.map((stage) => {
+              const completedTasks = stage.tasks.filter((t) => t.completed).length;
+              const hasTasks = stage.tasks.length > 0;
+              return /* @__PURE__ */ jsxs(
+                AccordionItem,
+                {
+                  value: stage.id,
+                  className: "border-b border-border last:border-0",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      AccordionTrigger,
+                      {
+                        className: cn(
+                          "py-3.5 text-sm hover:no-underline [&>svg]:size-4",
+                          stage.isCompleted ? "text-muted-foreground" : stage.isCurrentStage ? "font-semibold text-foreground" : "font-normal text-muted-foreground"
+                        ),
+                        disabled: !hasTasks,
+                        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2.5", children: [
+                          stage.isCompleted ? /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-primary",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ jsx(
+                                Check,
+                                {
+                                  className: "size-3 text-primary-foreground",
+                                  strokeWidth: 2.5
+                                }
+                              )
+                            }
+                          ) : stage.isCurrentStage ? /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "size-5 shrink-0 rounded-full border-2 border-primary bg-background",
+                              "aria-hidden": "true"
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "size-5 shrink-0 rounded-full border-2 border-muted-foreground/30 bg-background",
+                              "aria-hidden": "true"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("span", { className: cn(stage.isCompleted && "line-through"), children: stage.name }),
+                          hasTasks && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                            completedTasks,
+                            "/",
+                            stage.tasks.length
+                          ] })
+                        ] })
+                      }
+                    ),
+                    hasTasks && /* @__PURE__ */ jsx(AccordionContent, { className: "p-0 pb-3 pl-8", children: stage.tasks.map((task) => /* @__PURE__ */ jsx(
+                      TaskCheckItem,
+                      {
+                        title: task.title,
+                        completed: task.completed,
+                        aiAgentName: task.aiAgentName,
+                        size: "sm",
+                        onToggle: onTaskToggle ? () => onTaskToggle(stage.id, task.id) : void 0
+                      },
+                      task.id
+                    )) })
+                  ]
+                },
+                stage.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  StageTimeline
+};

package/dist/{chunk-I64K754C.mjs → chunk-WNGWBVLV.mjs}

@@ -1,9 +1,9 @@
 import {
   buttonVariants
-} from "./chunk-4AJ5HWHD.mjs";
+} from "./chunk-2I5S2AMY.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-3U7SD3MS.mjs → chunk-WOEHFRGB.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -11,7 +11,7 @@ import { cva } from "class-variance-authority";
 import { Toggle as ToggleComponent } from "@base-ui/react/toggle";
 import { jsx } from "react/jsx-runtime";
 var toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 text-label-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -20,7 +20,7 @@ var toggleVariants = cva(
       },
       size: {
         default: "h-9 min-w-9 px-2",
-        sm: "h-8 min-w-8 px-1.5",
+        sm: "h-8 min-w-8 px-1.5 text-caption",
         lg: "h-10 min-w-10 px-2.5"
       }
     },

package/dist/{chunk-DKZRJOMF.mjs → chunk-XIRTEFKH.mjs}

@@ -1,12 +1,12 @@
 import {
   buttonVariants
-} from "./chunk-4AJ5HWHD.mjs";
+} from "./chunk-2I5S2AMY.mjs";
 import {
   useThemeVars
-} from "./chunk-OXQQNQZI.mjs";
+} from "./chunk-FEZKMUCF.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -65,7 +65,7 @@ function DialogContent(_a) {
   ]);
   const themeVars = useThemeVars();
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(DialogOverlay, { style: themeVars }),
     /* @__PURE__ */ jsxs(
       DialogPrimitive.Popup,
       __spreadProps(__spreadValues({
@@ -96,7 +96,11 @@ function DialogContent(_a) {
   ] });
 }
 function DialogHeader(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
@@ -139,15 +143,11 @@ function DialogFooter(_a) {
   );
 }
 function DialogTitle(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Title,
     __spreadValues({
-      className: cn("text-lg leading-none font-semibold", className),
+      className: cn("text-h5 leading-none", className),
       "data-slot": "dialog-title"
     }, props)
   );
@@ -161,7 +161,7 @@ function DialogDescription(_a) {
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Description,
     __spreadValues({
-      className: cn("text-sm text-muted-foreground", className),
+      className: cn("text-body-small text-muted-foreground", className),
       "data-slot": "dialog-description"
     }, props)
   );

package/dist/chunk-Y6DWJSKZ.mjs

@@ -0,0 +1,79 @@
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/slider.tsx
+import * as React from "react";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Slider = React.forwardRef(
+  ({
+    className,
+    value,
+    defaultValue = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    onValueChange
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      SliderPrimitive.Root,
+      {
+        ref,
+        value,
+        defaultValue,
+        min,
+        max,
+        step,
+        disabled,
+        thumbAlignment: "edge",
+        onValueChange: (val) => onValueChange == null ? void 0 : onValueChange(val),
+        "data-slot": "slider",
+        className: cn(
+          "relative w-full touch-none select-none",
+          disabled && "opacity-50",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs(
+          SliderPrimitive.Control,
+          {
+            className: "relative flex h-5 w-full cursor-pointer items-center",
+            "data-slot": "slider-control",
+            children: [
+              /* @__PURE__ */ jsx(
+                SliderPrimitive.Track,
+                {
+                  className: "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+                  "data-slot": "slider-track",
+                  children: /* @__PURE__ */ jsx(
+                    SliderPrimitive.Indicator,
+                    {
+                      className: "absolute h-full rounded-full bg-primary",
+                      "data-slot": "slider-indicator"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SliderPrimitive.Thumb,
+                {
+                  className: cn(
+                    "block size-5 rounded-full border-2 border-primary bg-background shadow-sm",
+                    "outline-none"
+                  ),
+                  "data-slot": "slider-thumb"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+export {
+  Slider
+};

package/dist/chunk-YKPROFLB.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-liabilities-breakdown-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 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
+};