@wealthx/shadcn 1.2.2 → 1.3.0

package/dist/chunk-6O6KD7CE.mjs

@@ -0,0 +1,271 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
+import {
+  ChartLegendItem,
+  ChartPeriodButton,
+  FALLBACK_TICK,
+  formatCount,
+  formatMonthLabel,
+  formatTooltipDate,
+  hexToRgba
+} from "./chunk-M3FV7LOK.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-NQPOYKAQ.mjs";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-C7CQJNMR.mjs";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./chunk-EI5F6FMT.mjs";
+import {
+  useThemeVars
+} from "./chunk-FEZKMUCF.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/backoffice-alerts-chart.tsx
+import { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { BarChart2, LineChart } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip
+);
+var PERIODS = [3, 6, 12];
+var SLICE_COUNT = { 3: 3, 6: 6, 12: 12 };
+var NEED_ACTION_COLOR = "#F44336";
+var WATCH_COLOR = "#FF9800";
+var INSIGHT_COLOR = "#3B82F6";
+function AlertsLegend() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: [
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Need Action",
+        color: NEED_ACTION_COLOR,
+        lineStyle: "solid"
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "Watch", color: WATCH_COLOR, lineStyle: "solid" }),
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Insight",
+        color: INSIGHT_COLOR,
+        lineStyle: "solid"
+      }
+    )
+  ] });
+}
+function BackofficeAlertsChart({
+  chartData,
+  title = "Alerts Summary",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const [period, setPeriod] = useState(defaultPeriod);
+  const [chartType, setChartType] = useState("line");
+  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 isBar = chartType === "bar";
+  const datasets = useMemo(() => {
+    if (!sliced) return [];
+    return [
+      {
+        type: chartType,
+        label: "Need Action",
+        data: sliced.map((p) => p.needAction),
+        borderColor: NEED_ACTION_COLOR,
+        backgroundColor: isBar ? NEED_ACTION_COLOR : hexToRgba(NEED_ACTION_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Watch",
+        data: sliced.map((p) => p.watch),
+        borderColor: WATCH_COLOR,
+        backgroundColor: isBar ? WATCH_COLOR : hexToRgba(WATCH_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Insight",
+        data: sliced.map((p) => p.insight),
+        borderColor: INSIGHT_COLOR,
+        backgroundColor: isBar ? INSIGHT_COLOR : hexToRgba(INSIGHT_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      }
+    ];
+  }, [sliced, chartType, isBar]);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 300 },
+      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: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 }
+          }
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          beginAtZero: true,
+          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-xs font-semibold uppercase tracking-wide", children: title }),
+          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              ToggleGroup,
+              {
+                type: "single",
+                variant: "outline",
+                size: "sm",
+                value: chartType,
+                onValueChange: (v) => v && setChartType(v),
+                children: [
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "line", "aria-label": "Line chart", children: /* @__PURE__ */ jsx(LineChart, { className: "size-3.5" }) }),
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "bar", "aria-label": "Bar chart", children: /* @__PURE__ */ jsx(BarChart2, { className: "size-3.5" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-0.5 sm:gap-1", children: 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(AlertsLegend, {}),
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: chartType,
+              data: { labels, datasets },
+              options,
+              "aria-label": title
+            },
+            chartType
+          ) }),
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx(AlertsLegend, {})
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  BackofficeAlertsChart
+};

package/dist/chunk-7PV3IWCN.mjs

@@ -0,0 +1,33 @@
+// src/lib/format-date.ts
+import { format, parseISO } from "date-fns";
+function safeParse(iso) {
+  return parseISO(iso);
+}
+function formatDateShort(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return format(safeParse(iso), "dd MMM yyyy");
+  } catch (e) {
+    return iso;
+  }
+}
+function formatDateDayMonth(iso) {
+  try {
+    return format(safeParse(iso), "dd MMM");
+  } catch (e) {
+    return iso;
+  }
+}
+function formatDateWithWeekday(iso) {
+  try {
+    return format(safeParse(iso), "EEE, dd MMM yyyy");
+  } catch (e) {
+    return iso;
+  }
+}
+
+export {
+  formatDateShort,
+  formatDateDayMonth,
+  formatDateWithWeekday
+};

package/dist/{chunk-SPJ5KXW7.mjs → chunk-7S5AESZO.mjs}

@@ -1,19 +1,19 @@
+import {
+  Sheet,
+  SheetContent
+} from "./chunk-462HMNO4.mjs";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger
 } from "./chunk-JHJHG4GO.mjs";
-import {
-  Sheet,
-  SheetContent
-} from "./chunk-462HMNO4.mjs";
 import {
   Spinner
 } from "./chunk-7YAU5CY6.mjs";
 import {
   Button
-} from "./chunk-2I5S2AMY.mjs";
+} from "./chunk-XREGSKX3.mjs";
 
 // src/components/ui/financial-drawers.tsx
 import { X } from "lucide-react";

package/dist/{chunk-RYCLWMZ7.mjs → chunk-ABFDMHOR.mjs}

@@ -4,9 +4,11 @@ import {
 import {
   DoughnutLegendRow,
   FALLBACK_PRIMARY,
-  FALLBACK_SECONDARY,
-  formatAbbrev
-} from "./chunk-FZIXGLMV.mjs";
+  FALLBACK_SECONDARY
+} from "./chunk-M3FV7LOK.mjs";
+import {
+  formatCurrencyAbbrev
+} from "./chunk-MN5NYQCL.mjs";
 import {
   Empty,
   EmptyDescription
@@ -16,7 +18,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle
-} from "./chunk-CLIN5525.mjs";
+} from "./chunk-C7CQJNMR.mjs";
 import {
   useThemeVars
 } from "./chunk-FEZKMUCF.mjs";
@@ -84,7 +86,7 @@ function PropertyDebtEquityDoughnutChart({
             label: (ctx) => {
               const val = ctx.raw;
               const pct = estimate > 0 ? `${(val / estimate * 100).toFixed(1)}%` : "0%";
-              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
+              return ` ${ctx.label}: ${formatCurrencyAbbrev(val)} (${pct})`;
             }
           }
         }
@@ -100,7 +102,7 @@ function PropertyDebtEquityDoughnutChart({
       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(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", 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(
@@ -125,7 +127,7 @@ function PropertyDebtEquityDoughnutChart({
                   pointerEvents: "none"
                 },
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: formatAbbrev(equity) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: formatCurrencyAbbrev(equity) }),
                   /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground leading-none mt-1", children: "Equity" })
                 ]
               }

package/dist/{chunk-SWGT756Z.mjs → chunk-AMQZRHEZ.mjs}

@@ -9,7 +9,7 @@ import {
   formatCount,
   formatMonthLabel,
   formatTooltipDate
-} from "./chunk-FZIXGLMV.mjs";
+} from "./chunk-M3FV7LOK.mjs";
 import {
   Empty,
   EmptyDescription
@@ -20,7 +20,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle
-} from "./chunk-CLIN5525.mjs";
+} from "./chunk-C7CQJNMR.mjs";
 import {
   useThemeVars
 } from "./chunk-FEZKMUCF.mjs";
@@ -40,7 +40,13 @@ import {
 } from "chart.js";
 import { Chart } from "react-chartjs-2";
 import { jsx, jsxs } from "react/jsx-runtime";
-ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip
+);
 var ALERT_PERIODS = [3, 6, 12];
 var SLICE_COUNT = { 3: 3, 6: 6, 12: 12 };
 function ChartLegend() {
@@ -176,7 +182,7 @@ function BackofficeAlertHistoryChart({
       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(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", 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,
             {

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

@@ -17,12 +17,12 @@ var badgeVariants = cva(
   {
     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",
+        default: "border-primary/40 bg-primary/10 text-foreground [a&]:hover:bg-primary/15",
+        secondary: "border-border bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
+        destructive: "border-destructive/40 bg-destructive/10 text-destructive-text focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/15",
+        success: "border-success/40 bg-success/10 text-success-text [a&]:hover:bg-success/15",
+        warning: "border-warning/40 bg-warning/10 text-warning-text [a&]:hover:bg-warning/15",
+        info: "border-info/40 bg-info/10 text-info-text [a&]:hover:bg-info/15",
         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-CLIN5525.mjs → chunk-C7CQJNMR.mjs}

@@ -27,7 +27,7 @@ function CardHeader(_a) {
     "div",
     __spreadValues({
       className: cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-center gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className
       ),
       "data-slot": "card-header"

package/dist/{chunk-D4ILTPOG.mjs → chunk-CFMQP5QS.mjs}

@@ -7,13 +7,13 @@ import {
 } from "./chunk-34NWQURD.mjs";
 import {
   Badge
-} from "./chunk-WAZD7NFU.mjs";
+} from "./chunk-BKNFWEH2.mjs";
 import {
   Spinner
 } from "./chunk-7YAU5CY6.mjs";
 import {
   Button
-} from "./chunk-2I5S2AMY.mjs";
+} from "./chunk-XREGSKX3.mjs";
 import {
   cn
 } from "./chunk-VLQZANBF.mjs";
@@ -62,11 +62,12 @@ function AiTaskCard({
   onSelect
 }) {
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
       type: "button",
+      variant: "ghost",
       onClick: () => onSelect(suggestion.title),
-      className: "flex flex-col gap-1 border border-border bg-background p-3 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className: "h-auto w-full flex-col items-start gap-1 border border-border bg-background p-3 text-left hover:bg-muted/50",
       children: [
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: suggestion.title }),
         /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: suggestion.description })

package/dist/{chunk-VPBN3WOO.mjs → chunk-DGHAXJBN.mjs}

@@ -4,9 +4,11 @@ import {
 import {
   DoughnutLegendRow,
   FALLBACK_PRIMARY,
-  FALLBACK_SECONDARY,
-  formatAbbrev
-} from "./chunk-FZIXGLMV.mjs";
+  FALLBACK_SECONDARY
+} from "./chunk-M3FV7LOK.mjs";
+import {
+  formatCurrencyAbbrev
+} from "./chunk-MN5NYQCL.mjs";
 import {
   Empty,
   EmptyDescription
@@ -16,7 +18,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle
-} from "./chunk-CLIN5525.mjs";
+} from "./chunk-C7CQJNMR.mjs";
 import {
   useThemeVars
 } from "./chunk-FEZKMUCF.mjs";
@@ -85,7 +87,7 @@ function PropertyCashflowDoughnutChart({
             label: (ctx) => {
               const val = ctx.raw;
               const pct = total > 0 ? `${(val / total * 100).toFixed(1)}%` : "0%";
-              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
+              return ` ${ctx.label}: ${formatCurrencyAbbrev(val)} (${pct})`;
             }
           }
         }
@@ -102,7 +104,7 @@ function PropertyCashflowDoughnutChart({
       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(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", 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(
@@ -127,7 +129,7 @@ function PropertyCashflowDoughnutChart({
                   pointerEvents: "none"
                 },
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: formatAbbrev(Math.abs(netCashflow)) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: formatCurrencyAbbrev(Math.abs(netCashflow)) }),
                   /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground leading-none mt-1", children: netLabel })
                 ]
               }

package/dist/chunk-DOEO3CDL.mjs

@@ -0,0 +1,27 @@
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/page-top-bar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageTopBar({ title, actions, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "page-top-bar",
+      className: cn(
+        "flex shrink-0 items-center justify-between gap-4",
+        "border-b border-border bg-background px-6 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold leading-tight", children: title }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions })
+      ]
+    }
+  );
+}
+
+export {
+  PageTopBar
+};

package/dist/{chunk-5MEWU56Z.mjs → chunk-DUJTAXMH.mjs}

@@ -1,14 +1,17 @@
-import {
-  Calendar
-} from "./chunk-P6AM5V7O.mjs";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger
 } from "./chunk-3GF7OVTP.mjs";
+import {
+  Calendar
+} from "./chunk-OODBHKG7.mjs";
+import {
+  Input
+} from "./chunk-GYMYRIZP.mjs";
 import {
   Button
-} from "./chunk-2I5S2AMY.mjs";
+} from "./chunk-XREGSKX3.mjs";
 import {
   cn
 } from "./chunk-VLQZANBF.mjs";
@@ -65,6 +68,8 @@ function DatePicker({
           {
             className: cn(
               "w-full justify-start rounded-none font-normal data-[empty=true]:text-muted-foreground",
+              // Show open/focus state when the popover is expanded
+              "aria-expanded:border-ring aria-expanded:ring-2 aria-expanded:ring-ring/20",
               className
             ),
             "data-empty": !value,
@@ -102,9 +107,9 @@ function DatePicker({
           showTimePicker ? /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 pb-3 pt-2", children: /* @__PURE__ */ jsxs("label", { className: "mb-1.5 block text-xs font-medium text-muted-foreground", children: [
             "Time",
             /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
-                className: "mt-1.5 h-8 w-full rounded-none border border-input bg-transparent px-2 text-sm font-sans outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                className: "mt-1.5 h-8",
                 onChange: handleTimeChange,
                 type: "time",
                 value: timeValue

package/dist/{chunk-GGM2UYGG.mjs → chunk-EBXQWIYG.mjs}

@@ -10,7 +10,7 @@ import {
   formatMonthLabel,
   formatTooltipDate,
   hexToRgba
-} from "./chunk-FZIXGLMV.mjs";
+} from "./chunk-M3FV7LOK.mjs";
 import {
   Empty,
   EmptyDescription
@@ -21,7 +21,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle
-} from "./chunk-CLIN5525.mjs";
+} from "./chunk-C7CQJNMR.mjs";
 import {
   useThemeVars
 } from "./chunk-FEZKMUCF.mjs";
@@ -41,7 +41,13 @@ import {
 } from "chart.js";
 import { Chart } from "react-chartjs-2";
 import { jsx, jsxs } from "react/jsx-runtime";
-ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip
+);
 var CONTACT_PERIODS = [3, 6, 12];
 var SLICE_COUNT = {
   3: 3,
@@ -220,7 +226,7 @@ function BackofficeContactHistoryChart({
       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(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", 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,
             {