@wealthx/shadcn 1.4.1 → 1.5.0

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

@@ -0,0 +1,355 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 __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/dashboard-expense-categories.tsx
+var dashboard_expense_categories_exports = {};
+__export(dashboard_expense_categories_exports, {
+  DashboardExpenseCategories: () => DashboardExpenseCategories
+});
+module.exports = __toCommonJS(dashboard_expense_categories_exports);
+var import_react = require("react");
+var import_lucide_react2 = require("lucide-react");
+
+// 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/components/ui/card.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Card(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    __spreadValues({
+      className: cn(
+        "flex flex-col gap-6 border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      ),
+      "data-slot": "card"
+    }, props)
+  );
+}
+function CardHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    __spreadValues({
+      className: cn(
+        "@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"
+    }, props)
+  );
+}
+function CardTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    __spreadValues({
+      className: cn("text-label-large", className),
+      "data-slot": "card-title"
+    }, props)
+  );
+}
+function CardContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    __spreadValues({
+      className: cn("px-6", className),
+      "data-slot": "card-content"
+    }, props)
+  );
+}
+
+// src/components/ui/spinner.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var spinnerVariants = (0, import_class_variance_authority.cva)("animate-spin shrink-0", {
+  variants: {
+    size: {
+      sm: "size-3",
+      default: "size-4",
+      lg: "size-6",
+      xl: "size-8"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function Spinner(_a) {
+  var _b = _a, { className, size } = _b, props = __objRest(_b, ["className", "size"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_lucide_react.LoaderCircle,
+    __spreadValues({
+      "aria-hidden": "true",
+      className: cn(spinnerVariants({ size }), className),
+      "data-slot": "spinner"
+    }, props)
+  );
+}
+
+// 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/dashboard-expense-categories.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ProgressBar({ pct, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("h-1.5 w-full overflow-hidden bg-muted", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: "h-full bg-primary transition-all",
+      style: { width: `${Math.min(100, Math.max(0, pct))}%` },
+      "aria-hidden": "true"
+    }
+  ) });
+}
+function SubCategoryRow({
+  sub,
+  isSelected,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full flex-col gap-1 py-1.5 pl-8 text-left transition-colors",
+        isSelected ? "bg-primary/5" : "hover:bg-muted/50"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2 text-xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
+            {
+              className: cn(
+                "truncate",
+                isSelected ? "font-medium text-primary" : "text-muted-foreground"
+              ),
+              children: sub.name
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 font-medium text-foreground", children: formatCurrency(sub.amount) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBar, { pct: sub.pct })
+      ]
+    }
+  );
+}
+function CategoryRow({
+  item,
+  selectedCategoryId,
+  onFilterClick
+}) {
+  var _a, _b, _c, _d;
+  const [expanded, setExpanded] = (0, import_react.useState)(false);
+  const hasChildren = ((_b = (_a = item.subCategories) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
+  const isSelected = selectedCategoryId === item.id;
+  const isChildSelected = hasChildren ? (_d = (_c = item.subCategories) == null ? void 0 : _c.some((s) => s.id === selectedCategoryId)) != null ? _d : false : false;
+  const isActive = isSelected || isChildSelected;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: cn(
+        "border-b border-border last:border-0 transition-colors",
+        isActive && "bg-primary/5"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex w-full items-start gap-3 py-3 text-left hover:bg-muted/40 transition-colors",
+              isActive && "hover:bg-primary/10"
+            ),
+            onClick: () => onFilterClick(isSelected ? null : item.id),
+            "aria-pressed": isSelected,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  className: "mt-0.5 shrink-0 text-muted-foreground",
+                  onClick: (e) => {
+                    if (!hasChildren) return;
+                    e.stopPropagation();
+                    setExpanded((v) => !v);
+                  },
+                  "aria-label": expanded ? "Collapse" : "Expand",
+                  children: hasChildren ? expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronRight, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-block size-3.5" })
+                }
+              ),
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "mt-0.5 shrink-0",
+                    isActive ? "text-primary" : "text-muted-foreground"
+                  ),
+                  children: item.icon
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "truncate text-sm font-medium",
+                        isActive ? "text-primary" : "text-foreground"
+                      ),
+                      children: item.name
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+                      item.pct.toFixed(0),
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-semibold text-foreground", children: formatCurrency(item.amount) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBar, { pct: item.pct, className: "mt-1.5" })
+              ] })
+            ]
+          }
+        ),
+        hasChildren && expanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pb-2", children: item.subCategories.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          SubCategoryRow,
+          {
+            sub,
+            isSelected: selectedCategoryId === sub.id,
+            onClick: () => onFilterClick(selectedCategoryId === sub.id ? null : sub.id)
+          },
+          sub.id
+        )) })
+      ]
+    }
+  );
+}
+function DashboardExpenseCategories({
+  categories = [],
+  title = "Expenses Categories",
+  subtitle,
+  isLoading = false,
+  className,
+  selectedCategoryId,
+  onCategorySelect
+}) {
+  const handleFilterClick = (id) => {
+    onCategorySelect == null ? void 0 : onCategorySelect(id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Card, { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardHeader, { className: "pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: subtitle })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardContent, { className: "flex flex-1 flex-col p-0 px-4 pb-2", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-1 items-center justify-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "md" }) }) : categories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No expense categories available" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: categories.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      CategoryRow,
+      {
+        item,
+        selectedCategoryId,
+        onFilterClick: handleFilterClick
+      },
+      item.id
+    )) }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DashboardExpenseCategories
+});

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

@@ -0,0 +1,186 @@
+import {
+  Spinner
+} from "../../chunk-JVMXMFBB.mjs";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "../../chunk-3VDET466.mjs";
+import {
+  formatCurrency
+} from "../../chunk-MN5NYQCL.mjs";
+import {
+  cn
+} from "../../chunk-AFML43VJ.mjs";
+import "../../chunk-WNQUEZJF.mjs";
+
+// src/components/ui/dashboard-expense-categories.tsx
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProgressBar({ pct, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("h-1.5 w-full overflow-hidden bg-muted", className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full bg-primary transition-all",
+      style: { width: `${Math.min(100, Math.max(0, pct))}%` },
+      "aria-hidden": "true"
+    }
+  ) });
+}
+function SubCategoryRow({
+  sub,
+  isSelected,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full flex-col gap-1 py-1.5 pl-8 text-left transition-colors",
+        isSelected ? "bg-primary/5" : "hover:bg-muted/50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-xs", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "truncate",
+                isSelected ? "font-medium text-primary" : "text-muted-foreground"
+              ),
+              children: sub.name
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-foreground", children: formatCurrency(sub.amount) })
+        ] }),
+        /* @__PURE__ */ jsx(ProgressBar, { pct: sub.pct })
+      ]
+    }
+  );
+}
+function CategoryRow({
+  item,
+  selectedCategoryId,
+  onFilterClick
+}) {
+  var _a, _b, _c, _d;
+  const [expanded, setExpanded] = useState(false);
+  const hasChildren = ((_b = (_a = item.subCategories) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
+  const isSelected = selectedCategoryId === item.id;
+  const isChildSelected = hasChildren ? (_d = (_c = item.subCategories) == null ? void 0 : _c.some((s) => s.id === selectedCategoryId)) != null ? _d : false : false;
+  const isActive = isSelected || isChildSelected;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-b border-border last:border-0 transition-colors",
+        isActive && "bg-primary/5"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex w-full items-start gap-3 py-3 text-left hover:bg-muted/40 transition-colors",
+              isActive && "hover:bg-primary/10"
+            ),
+            onClick: () => onFilterClick(isSelected ? null : item.id),
+            "aria-pressed": isSelected,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "mt-0.5 shrink-0 text-muted-foreground",
+                  onClick: (e) => {
+                    if (!hasChildren) return;
+                    e.stopPropagation();
+                    setExpanded((v) => !v);
+                  },
+                  "aria-label": expanded ? "Collapse" : "Expand",
+                  children: hasChildren ? expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx("span", { className: "inline-block size-3.5" })
+                }
+              ),
+              item.icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "mt-0.5 shrink-0",
+                    isActive ? "text-primary" : "text-muted-foreground"
+                  ),
+                  children: item.icon
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "truncate text-sm font-medium",
+                        isActive ? "text-primary" : "text-foreground"
+                      ),
+                      children: item.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                      item.pct.toFixed(0),
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: formatCurrency(item.amount) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(ProgressBar, { pct: item.pct, className: "mt-1.5" })
+              ] })
+            ]
+          }
+        ),
+        hasChildren && expanded && /* @__PURE__ */ jsx("div", { className: "pb-2", children: item.subCategories.map((sub) => /* @__PURE__ */ jsx(
+          SubCategoryRow,
+          {
+            sub,
+            isSelected: selectedCategoryId === sub.id,
+            onClick: () => onFilterClick(selectedCategoryId === sub.id ? null : sub.id)
+          },
+          sub.id
+        )) })
+      ]
+    }
+  );
+}
+function DashboardExpenseCategories({
+  categories = [],
+  title = "Expenses Categories",
+  subtitle,
+  isLoading = false,
+  className,
+  selectedCategoryId,
+  onCategorySelect
+}) {
+  const handleFilterClick = (id) => {
+    onCategorySelect == null ? void 0 : onCategorySelect(id);
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+      subtitle && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: subtitle })
+    ] }) }),
+    /* @__PURE__ */ jsx(CardContent, { className: "flex flex-1 flex-col p-0 px-4 pb-2", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : categories.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No expense categories available" }) : /* @__PURE__ */ jsx("div", { children: categories.map((item) => /* @__PURE__ */ jsx(
+      CategoryRow,
+      {
+        item,
+        selectedCategoryId,
+        onFilterClick: handleFilterClick
+      },
+      item.id
+    )) }) })
+  ] });
+}
+export {
+  DashboardExpenseCategories
+};