@wealthx/shadcn 1.5.41 → 1.5.43

package/dist/components/ui/dashboard-transactions-table.mjs

@@ -1,6 +1,6 @@
 import {
   CategoryEditDialog
-} from "../../chunk-C35JMOII.mjs";
+} from "../../chunk-3G6JUYRE.mjs";
 import {
   Chip
 } from "../../chunk-MPA2HV5U.mjs";
@@ -11,27 +11,27 @@ import {
   CardTitle
 } from "../../chunk-3VDET466.mjs";
 import "../../chunk-PNSYFE3K.mjs";
-import "../../chunk-T5FRVEJQ.mjs";
+import "../../chunk-JTMN36BK.mjs";
 import {
   Spinner
 } from "../../chunk-JVMXMFBB.mjs";
 import {
   Badge
 } from "../../chunk-X6RC5UWB.mjs";
+import {
+  formatCurrency
+} from "../../chunk-XQDTFNVL.mjs";
 import {
   formatDateShort
 } from "../../chunk-LHWJQNLG.mjs";
 import "../../chunk-LBTHZSBT.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
-import "../../chunk-UNACI2YK.mjs";
-import {
-  formatCurrency
-} from "../../chunk-MN5NYQCL.mjs";
 import {
   Button
 } from "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
+import "../../chunk-UNACI2YK.mjs";
 import {
   cn
 } from "../../chunk-AFML43VJ.mjs";
@@ -52,7 +52,7 @@ function CategoryChip({
       {
         asChild: true,
         variant: "secondary",
-        className: "cursor-pointer transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary",
+        className: "cursor-pointer transition-colors hover:bg-muted",
         children: /* @__PURE__ */ jsxs("button", { type: "button", onClick, children: [
           label,
           /* @__PURE__ */ jsx(Pencil, { className: "size-2.5 shrink-0 opacity-60" })
@@ -64,50 +64,40 @@ function CategoryChip({
 }
 function TransactionRow({
   tx,
-  isDimmed,
   canEdit,
   onChipClick
 }) {
   var _a;
   const isCredit = tx.amount >= 0;
   const categoryLabel = (_a = tx.editedCategoryName) != null ? _a : tx.category;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-start justify-between gap-4 border-b border-border py-3 last:border-0 transition-opacity",
-        isDimmed && "opacity-30"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatDateShort(tx.date) }),
-          /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm font-medium text-foreground", children: tx.description }),
-          tx.merchant && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: tx.merchant }),
-          categoryLabel && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(
-            CategoryChip,
-            {
-              label: categoryLabel,
-              canEdit,
-              onClick: onChipClick
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: cn(
-              "shrink-0 text-sm font-semibold",
-              isCredit ? "text-success" : "text-foreground"
-            ),
-            children: [
-              isCredit ? "+" : "",
-              formatCurrency(tx.amount, { showSign: false })
-            ]
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border py-3 last:border-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatDateShort(tx.date) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm font-medium text-foreground", children: tx.description }),
+      tx.merchant && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: tx.merchant }),
+      categoryLabel && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(
+        CategoryChip,
+        {
+          label: categoryLabel,
+          canEdit,
+          onClick: onChipClick
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "shrink-0 text-sm font-semibold",
+          isCredit ? "text-success" : "text-foreground"
+        ),
+        children: [
+          isCredit ? "+" : "",
+          formatCurrency(tx.amount, { showSign: false })
+        ]
+      }
+    )
+  ] });
 }
 function DashboardTransactionsTable({
   transactions = [],
@@ -119,7 +109,9 @@ function DashboardTransactionsTable({
   className,
   selectedCategoryId,
   categories,
-  onCategoryChange
+  onCategoryChange,
+  showHeader = true,
+  showTab = true
 }) {
   const isFiltering = selectedCategoryId != null;
   const canEdit = !!(categories == null ? void 0 : categories.length);
@@ -132,16 +124,17 @@ function DashboardTransactionsTable({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Card, { className: cn("flex flex-col", className), children: [
-      /* @__PURE__ */ jsxs(CardHeader, { className: "pb-0", children: [
+      showHeader && /* @__PURE__ */ jsxs(CardHeader, { className: "pb-0", children: [
         /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
-        /* @__PURE__ */ jsx("div", { className: "mt-2 flex border-b border-border", children: /* @__PURE__ */ jsx("span", { className: "border-b-2 border-foreground pb-1.5 text-xs font-semibold text-foreground", children: "Account Transaction" }) })
+        showTab && /* @__PURE__ */ jsx("div", { className: "mt-2 flex border-b border-border", children: /* @__PURE__ */ jsx("span", { className: "border-b-2 border-foreground pb-1.5 text-xs font-semibold text-foreground", children: "Account Transaction" }) })
       ] }),
       /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-1 flex-col px-4 pb-0 pt-0", children: [
-        isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { size: "default" }) }) : transactions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No transactions found" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: transactions.map((tx) => /* @__PURE__ */ jsx(
+        isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { size: "default" }) }) : transactions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No transactions found" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: transactions.filter(
+          (tx) => !isFiltering || tx.categoryId === selectedCategoryId
+        ).map((tx) => /* @__PURE__ */ jsx(
           TransactionRow,
           {
             tx,
-            isDimmed: isFiltering && tx.categoryId !== selectedCategoryId,
             canEdit,
             onChipClick: () => setEditingTx(tx)
           },

package/dist/components/ui/data-table.mjs

@@ -13,10 +13,10 @@ import "../../chunk-IKXYTCSB.mjs";
 import "../../chunk-K6VCC2MK.mjs";
 import "../../chunk-H5DTKPJ2.mjs";
 import "../../chunk-LBTHZSBT.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/date-picker.mjs

@@ -5,10 +5,10 @@ import "../../chunk-F3CU6KEI.mjs";
 import "../../chunk-FBNEIYSE.mjs";
 import "../../chunk-LHWJQNLG.mjs";
 import "../../chunk-LBTHZSBT.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/debt-accordion.mjs

@@ -1,16 +1,16 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-} from "../../chunk-UNACI2YK.mjs";
 import {
   formatCurrency
-} from "../../chunk-MN5NYQCL.mjs";
+} from "../../chunk-XQDTFNVL.mjs";
 import {
   Button
 } from "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "../../chunk-UNACI2YK.mjs";
 import {
   cn
 } from "../../chunk-AFML43VJ.mjs";

package/dist/components/ui/delete-contact-component.mjs

@@ -1,12 +1,12 @@
 import {
   DeleteContactComponent
-} from "../../chunk-5DAQU3B6.mjs";
+} from "../../chunk-66JXT7NY.mjs";
 import "../../chunk-JVMXMFBB.mjs";
-import "../../chunk-CEYEK3TI.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
+import "../../chunk-B4R62ID3.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/dialog.mjs

@@ -9,11 +9,11 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger
-} from "../../chunk-T5FRVEJQ.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
+} from "../../chunk-JTMN36BK.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/document-checklist-template.mjs

@@ -4,10 +4,10 @@ import {
 import "../../chunk-PNSYFE3K.mjs";
 import "../../chunk-K6VCC2MK.mjs";
 import "../../chunk-LBTHZSBT.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/expense-bar-chart.js

@@ -429,7 +429,7 @@ function ChartLegendItem({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[11px] text-muted-foreground leading-none", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm text-muted-foreground leading-none", children: label })
   ] });
 }
 function ChartPeriodButton({
@@ -474,7 +474,8 @@ function ExpenseBarChart({
   height = 280,
   width = "100%",
   className,
-  isLoading = false
+  isLoading = false,
+  showPeriodSelector = true
 }) {
   const periods = CHART_PERIODS[granularity];
   const [period, setPeriod] = (0, import_react3.useState)(defaultPeriod);
@@ -574,7 +575,7 @@ function ExpenseBarChart({
           stacked: true,
           grid: { display: false },
           border: { display: false },
-          ticks: { font: { size: 10 }, color: FALLBACK_TICK }
+          ticks: { font: { size: 12 }, color: FALLBACK_TICK }
         },
         y: {
           display: showYAxis,
@@ -582,7 +583,7 @@ function ExpenseBarChart({
           grid: { display: false },
           border: { display: false },
           ticks: {
-            font: { size: 10 },
+            font: { size: 12 },
             color: FALLBACK_TICK,
             maxTicksLimit: 5,
             padding: 8,
@@ -599,9 +600,9 @@ function ExpenseBarChart({
       className: cn("w-full py-4 sm:py-6 gap-2", className),
       style: { maxWidth: width, fontFamily },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardHeader, { className: "px-3 sm:px-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardAction, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-0.5 sm:gap-1", children: periods.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        (title || showPeriodSelector) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardHeader, { className: "px-3 sm:px-6", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
+          showPeriodSelector && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardAction, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-0.5 sm:gap-1", children: periods.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             ChartPeriodButton,
             {
               period: p,

package/dist/components/ui/expense-bar-chart.mjs

@@ -1,15 +1,15 @@
 import {
   ExpenseBarChart
-} from "../../chunk-4LLTZ45R.mjs";
+} from "../../chunk-HOXTEU5K.mjs";
 import "../../chunk-GTAVSBDO.mjs";
-import "../../chunk-YEWNFK5S.mjs";
+import "../../chunk-WLXP4OOF.mjs";
 import "../../chunk-R2ON6CAN.mjs";
 import "../../chunk-3VDET466.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
-import "../../chunk-MN5NYQCL.mjs";
+import "../../chunk-XQDTFNVL.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/expense-categories-bar.js

@@ -0,0 +1,261 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ui/expense-categories-bar.tsx
+var expense_categories_bar_exports = {};
+__export(expense_categories_bar_exports, {
+  ExpenseCategoriesBar: () => ExpenseCategoriesBar
+});
+module.exports = __toCommonJS(expense_categories_bar_exports);
+var import_react2 = require("react");
+var import_lucide_react = require("lucide-react");
+
+// src/components/ui/tooltip.tsx
+var import_tooltip = require("@base-ui/react/tooltip");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/lib/theme-provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeVarsContext = (0, import_react.createContext)({});
+function useThemeVars() {
+  return (0, import_react.useContext)(ThemeVarsContext);
+}
+
+// src/components/ui/tooltip.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Tooltip(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip.Root, __spreadValues({ "data-slot": "tooltip" }, props));
+}
+function TooltipTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
+}
+function TooltipContent(_a) {
+  var _b = _a, {
+    className,
+    sideOffset = 8,
+    side,
+    children,
+    style
+  } = _b, props = __objRest(_b, [
+    "className",
+    "sideOffset",
+    "side",
+    "children",
+    "style"
+  ]);
+  const themeVars = useThemeVars();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip.Positioner, { sideOffset, side, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_tooltip.Tooltip.Popup,
+    __spreadProps(__spreadValues({
+      className: cn(
+        "relative z-50 w-fit animate-in overflow-visible bg-brand-secondary px-3 py-1.5 text-caption text-balance text-brand-secondary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards",
+        className
+      ),
+      "data-slot": "tooltip-content",
+      style: __spreadValues(__spreadValues({}, themeVars), style)
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip.Arrow, { className: "z-50 size-2.5 rotate-45 bg-brand-secondary data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1 data-[side=top]:-bottom-1" })
+      ]
+    })
+  ) }) });
+}
+
+// src/lib/format-currency.ts
+function formatCurrency(value, options) {
+  const { decimals = 0, showSign = false } = options != null ? options : {};
+  const abs = Math.abs(value);
+  const formatted = new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  }).format(abs);
+  if (!showSign) return value < 0 ? `-${formatted}` : formatted;
+  if (value > 0) return `+${formatted}`;
+  if (value < 0) return `-${formatted}`;
+  return formatted;
+}
+
+// src/components/ui/expense-categories-bar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ExpenseCategoriesBar({
+  title,
+  subtitle,
+  tooltipText,
+  parts = [],
+  icons = [],
+  color = "secondary",
+  className
+}) {
+  const [hoveredIndex, setHoveredIndex] = (0, import_react2.useState)(-1);
+  const segmentBase = color === "primary" ? "bg-primary" : "bg-brand-secondary";
+  const segmentHover = color === "primary" ? "border-primary/50 bg-primary/60" : "border-brand-secondary/50 bg-brand-secondary/60";
+  const iconDefault = color === "primary" ? "[&_svg]:stroke-primary-foreground [&_svg]:text-primary-foreground" : "[&_svg]:stroke-brand-secondary-foreground [&_svg]:text-brand-secondary-foreground";
+  const iconHovered = "[&_svg]:stroke-foreground [&_svg]:text-foreground";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex flex-col", className), children: [
+    (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "m-0 overflow-hidden text-ellipsis whitespace-nowrap text-[22px] font-normal leading-tight", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "whitespace-nowrap text-sm text-muted-foreground", children: subtitle }),
+        tooltipText && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            TooltipTrigger,
+            {
+              render: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "flex items-center text-muted-foreground transition-colors hover:text-foreground"
+                }
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Info, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipContent, { side: "top", children: tooltipText })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: "mt-4 mb-6 flex h-8 w-full gap-px",
+        onMouseLeave: () => setHoveredIndex(-1),
+        children: parts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grow bg-muted" }) : parts.map((part, index) => {
+          const isHovered = hoveredIndex === index;
+          const showIcon = part.percentage > 0.01;
+          const icon = icons[index];
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Tooltip, { open: isHovered, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              TooltipTrigger,
+              {
+                render: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "relative border border-transparent transition-colors duration-200",
+                      segmentBase,
+                      isHovered && segmentHover
+                    ),
+                    style: {
+                      flexGrow: Math.max(part.percentage, 1e-4) * 10
+                    },
+                    onMouseEnter: () => setHoveredIndex(index)
+                  }
+                ),
+                children: showIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute left-2 top-0 bottom-0 flex items-center [&_svg]:size-4",
+                      isHovered ? iconHovered : iconDefault
+                    ),
+                    children: icon
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipContent, { side: "top", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1.5 min-w-[120px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+                icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "[&_svg]:size-4", children: icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-semibold leading-tight line-clamp-2", children: part.title })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "self-end text-sm font-bold", children: formatCurrency(part.amount) })
+            ] }) })
+          ] }, part.id);
+        })
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ExpenseCategoriesBar
+});

package/dist/components/ui/expense-categories-bar.mjs

@@ -0,0 +1,12 @@
+import {
+  ExpenseCategoriesBar
+} from "../../chunk-LFWNKXZU.mjs";
+import "../../chunk-3S6KVFF5.mjs";
+import "../../chunk-XQDTFNVL.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
+import "../../chunk-AFML43VJ.mjs";
+import "../../chunk-WNQUEZJF.mjs";
+export {
+  ExpenseCategoriesBar
+};

package/dist/components/ui/expense-work-details.js

@@ -494,7 +494,7 @@ function ChartLegendItem({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[11px] text-muted-foreground leading-none", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm text-muted-foreground leading-none", children: label })
   ] });
 }
 function ChartPeriodButton({
@@ -539,7 +539,8 @@ function ExpenseBarChart({
   height = 280,
   width = "100%",
   className,
-  isLoading = false
+  isLoading = false,
+  showPeriodSelector = true
 }) {
   const periods = CHART_PERIODS[granularity];
   const [period, setPeriod] = (0, import_react4.useState)(defaultPeriod);
@@ -639,7 +640,7 @@ function ExpenseBarChart({
           stacked: true,
           grid: { display: false },
           border: { display: false },
-          ticks: { font: { size: 10 }, color: FALLBACK_TICK }
+          ticks: { font: { size: 12 }, color: FALLBACK_TICK }
         },
         y: {
           display: showYAxis,
@@ -647,7 +648,7 @@ function ExpenseBarChart({
           grid: { display: false },
           border: { display: false },
           ticks: {
-            font: { size: 10 },
+            font: { size: 12 },
             color: FALLBACK_TICK,
             maxTicksLimit: 5,
             padding: 8,
@@ -664,9 +665,9 @@ function ExpenseBarChart({
       className: cn("w-full py-4 sm:py-6 gap-2", className),
       style: { maxWidth: width, fontFamily },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardHeader, { className: "px-3 sm:px-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardAction, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex gap-0.5 sm:gap-1", children: periods.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        (title || showPeriodSelector) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardHeader, { className: "px-3 sm:px-6", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
+          showPeriodSelector && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardAction, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex gap-0.5 sm:gap-1", children: periods.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             ChartPeriodButton,
             {
               period: p,