@wealthx/shadcn 1.1.0 → 1.2.1

package/dist/chunk-FMAXJ2SI.mjs

@@ -0,0 +1,71 @@
+import {
+  Badge
+} from "./chunk-WAZD7NFU.mjs";
+import {
+  Checkbox
+} from "./chunk-RGVKLTLH.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/pipeline-primitives.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TaskCheckItem({
+  title,
+  completed,
+  aiAgentName,
+  onToggle,
+  disabled = false,
+  size = "xs",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex cursor-pointer items-start gap-2 py-1.5",
+        disabled && "pointer-events-none opacity-60",
+        className
+      ),
+      onClick: () => onToggle == null ? void 0 : onToggle(),
+      "data-slot": "task-check-item",
+      children: [
+        /* @__PURE__ */ jsx("span", { onClick: (e) => e.stopPropagation(), className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: completed,
+            onCheckedChange: () => onToggle == null ? void 0 : onToggle(),
+            disabled
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "leading-snug text-foreground",
+                size === "sm" ? "text-sm" : "text-xs",
+                completed && "text-muted-foreground line-through"
+              ),
+              children: title
+            }
+          ),
+          aiAgentName && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 text-[10px]", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "size-1.5 rounded-full bg-primary",
+                "aria-hidden": "true"
+              }
+            ),
+            aiAgentName
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  TaskCheckItem
+};

package/dist/chunk-FZIXGLMV.mjs

@@ -0,0 +1,173 @@
+import {
+  Button
+} from "./chunk-2I5S2AMY.mjs";
+
+// src/components/ui/chart-shared.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CHART_SLICE_COUNT = {
+  monthly: { 1: 1, 3: 3, 6: 6, 12: 12 },
+  daily: { 1: 30, 3: 90, 6: 180, 12: 365 }
+};
+var CHART_PERIODS = {
+  monthly: [3, 6, 12],
+  daily: [1, 3, 6, 12]
+};
+function hexToRgba(hex, alpha) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+var DATASET_ALPHAS = [1, 0.72, 0.52, 0.36, 0.24, 0.15];
+var FALLBACK_PRIMARY = "#33FF99";
+var FALLBACK_SECONDARY = "#162029";
+var FALLBACK_BG = "#ffffff";
+var FALLBACK_FOREGROUND = "#040D13";
+var FALLBACK_TICK = "#9EAAB5";
+var FALLBACK_NEUTRAL = "#B9BCBF";
+var SEVERITY_COLORS = {
+  high: "#F44336",
+  // default --destructive  oklch(0.643 0.215 28.8)
+  medium: "#FF9800",
+  // default --warning     oklch(0.77  0.174  64.1)
+  low: "#4CAF50"
+  // default --success        oklch(0.673 0.162 144.2)
+};
+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(0)}K`;
+  return `${sign}$${abs.toFixed(0)}`;
+}
+function formatTooltipDate(iso, granularity) {
+  const d = new Date(iso);
+  return d.toLocaleDateString(
+    "en-US",
+    granularity === "daily" ? { month: "short", day: "numeric", year: "numeric" } : { month: "short", year: "numeric" }
+  );
+}
+function formatMonthLabel(iso) {
+  return new Date(iso).toLocaleDateString("en-US", {
+    month: "short",
+    year: "2-digit"
+  });
+}
+function formatCount(n) {
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return String(Math.round(n));
+}
+function ChartLegendItem({
+  label,
+  color,
+  lineStyle
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+    lineStyle ? /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "20",
+        height: "10",
+        viewBox: "0 0 20 10",
+        "aria-hidden": "true",
+        style: { flexShrink: 0 },
+        children: /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: "0",
+            y1: "5",
+            x2: "20",
+            y2: "5",
+            stroke: color,
+            strokeWidth: "2",
+            strokeLinecap: "square",
+            strokeDasharray: lineStyle === "dashed" ? "5 3" : void 0
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: 10,
+          height: 10,
+          backgroundColor: color,
+          flexShrink: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground leading-none", children: label })
+  ] });
+}
+function DoughnutLegendRow({
+  label,
+  color,
+  value,
+  percent
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            backgroundColor: color,
+            flexShrink: 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground leading-none truncate", children: label })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium leading-none", children: formatAbbrev(value) }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground leading-none w-10 text-right", children: percent })
+    ] })
+  ] });
+}
+function ChartPeriodButton({
+  period,
+  active,
+  onClick,
+  unit = "M"
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: active ? "default" : "outline",
+      size: "xs",
+      onClick,
+      children: [
+        period,
+        unit
+      ]
+    }
+  );
+}
+
+export {
+  CHART_SLICE_COUNT,
+  CHART_PERIODS,
+  hexToRgba,
+  DATASET_ALPHAS,
+  FALLBACK_PRIMARY,
+  FALLBACK_SECONDARY,
+  FALLBACK_BG,
+  FALLBACK_FOREGROUND,
+  FALLBACK_TICK,
+  FALLBACK_NEUTRAL,
+  SEVERITY_COLORS,
+  formatAbbrev,
+  formatTooltipDate,
+  formatMonthLabel,
+  formatCount,
+  ChartLegendItem,
+  DoughnutLegendRow,
+  ChartPeriodButton
+};

package/dist/chunk-GGM2UYGG.mjs

@@ -0,0 +1,273 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  ChartLegendItem,
+  ChartPeriodButton,
+  FALLBACK_PRIMARY,
+  FALLBACK_TICK,
+  formatCount,
+  formatMonthLabel,
+  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/backoffice-contact-history-chart.tsx
+import { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip);
+var CONTACT_PERIODS = [3, 6, 12];
+var SLICE_COUNT = {
+  3: 3,
+  6: 6,
+  12: 12
+};
+function ChartLegend({
+  callColor,
+  emailColor,
+  meetingColor,
+  noteColor,
+  showNotes
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: [
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "Calls", color: callColor }),
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "Emails", color: emailColor }),
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "Meetings", color: meetingColor }),
+    showNotes && /* @__PURE__ */ jsx(ChartLegendItem, { label: "Notes", color: noteColor })
+  ] });
+}
+function BackofficeContactHistoryChart({
+  chartData,
+  title = "Contact 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 brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const callColor = brandPrimary;
+  const emailColor = hexToRgba(brandPrimary, 0.65);
+  const meetingColor = hexToRgba(brandPrimary, 0.4);
+  const noteColor = hexToRgba(brandPrimary, 0.22);
+  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 showNotes = useMemo(
+    () => !!(sliced == null ? void 0 : sliced.some((p) => {
+      var _a;
+      return ((_a = p.notes) != null ? _a : 0) > 0;
+    })),
+    [sliced]
+  );
+  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: "Calls",
+          data: sliced.map((p) => p.calls),
+          backgroundColor: callColor,
+          borderWidth: 0,
+          stack: "contacts"
+        },
+        {
+          label: "Emails",
+          data: sliced.map((p) => p.emails),
+          backgroundColor: emailColor,
+          borderWidth: 0,
+          stack: "contacts"
+        },
+        {
+          label: "Meetings",
+          data: sliced.map((p) => p.meetings),
+          backgroundColor: meetingColor,
+          borderWidth: 0,
+          stack: "contacts"
+        },
+        ...showNotes ? [
+          {
+            label: "Notes",
+            data: sliced.map((p) => {
+              var _a;
+              return (_a = p.notes) != null ? _a : 0;
+            }),
+            backgroundColor: noteColor,
+            borderWidth: 0,
+            stack: "contacts"
+          }
+        ] : []
+      ]
+    };
+  }, [
+    sliced,
+    labels,
+    callColor,
+    emailColor,
+    meetingColor,
+    noteColor,
+    showNotes
+  ]);
+  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: CONTACT_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,
+            {
+              callColor,
+              emailColor,
+              meetingColor,
+              noteColor,
+              showNotes
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: "bar",
+              data,
+              options,
+              "aria-label": title
+            },
+            brandPrimary
+          ) }),
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx(
+            ChartLegend,
+            {
+              callColor,
+              emailColor,
+              meetingColor,
+              noteColor,
+              showNotes
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  BackofficeContactHistoryChart
+};

package/dist/{chunk-DS2AMHN2.mjs → chunk-GYMYRIZP.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -14,7 +14,7 @@ function Input(_a) {
     "input",
     __spreadValues({
       className: cn(
-        "h-9 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-base font-sans shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "h-9 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-body-medium font-sans shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-label-medium file:text-foreground placeholder:font-normal placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30",
         "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className

package/dist/{chunk-KQDD5MU3.mjs → chunk-H45TKD34.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,
   __spreadValues
@@ -118,7 +118,7 @@ function AlertDialogTitle(_a) {
     AlertDialogPrimitive.Title,
     __spreadValues({
       className: cn(
-        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "text-h5 sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
         className
       ),
       "data-slot": "alert-dialog-title"
@@ -135,7 +135,7 @@ function AlertDialogDescription(_a) {
     AlertDialogPrimitive.Description,
     __spreadValues({
       className: cn(
-        "text-sm text-muted-foreground sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "text-body-small text-muted-foreground sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
         className
       ),
       "data-slot": "alert-dialog-description"

package/dist/{chunk-BBJBJSXQ.mjs → chunk-J5UICVJS.mjs}

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

package/dist/{chunk-RL772EH7.mjs → chunk-JHJHG4GO.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __objRest,
   __spreadValues
@@ -62,18 +62,14 @@ function TabsList(_a) {
   );
 }
 function TabsTrigger(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Tab,
     __spreadValues({
       className: cn(
         // Base layout & typography
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap",
-        "rounded-none border border-transparent px-1.5 py-1 text-sm font-medium",
+        "rounded-none border border-transparent px-1.5 py-1 text-label-medium",
         "text-muted-foreground transition-all",
         // Vertical orientation
         "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
@@ -103,11 +99,7 @@ function TabsTrigger(_a) {
   );
 }
 function TabsContent(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Panel,
     __spreadValues({