@wealthx/shadcn 1.0.2 → 1.2.0

package/dist/components/ui/financial-primitives.js

@@ -0,0 +1,218 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/financial-primitives.tsx
+var financial_primitives_exports = {};
+__export(financial_primitives_exports, {
+  FinancialCardHeader: () => FinancialCardHeader,
+  FinancialDetailField: () => FinancialDetailField,
+  FinancialLineItem: () => FinancialLineItem,
+  FinancialLvrBar: () => FinancialLvrBar,
+  FinancialSectionLabel: () => FinancialSectionLabel,
+  FinancialSubsectionTitle: () => FinancialSubsectionTitle,
+  FinancialSubtotalBlock: () => FinancialSubtotalBlock,
+  FinancialSubtotalFrame: () => FinancialSubtotalFrame
+});
+module.exports = __toCommonJS(financial_primitives_exports);
+
+// 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/financial-primitives.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var NO_DATA = "\u2014";
+function FinancialSectionLabel({
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-label-small uppercase text-muted-foreground", children });
+}
+function FinancialCardHeader({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-label-small uppercase text-muted-foreground", children }) });
+}
+function FinancialSubsectionTitle({
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-label-medium uppercase text-foreground", children });
+}
+function FinancialDetailField({
+  label,
+  value,
+  variant = "caption"
+}) {
+  if (variant === "footer") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col justify-between min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-overline text-muted-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-label-medium text-foreground mt-1 break-words", children: value != null ? value : NO_DATA })
+    ] });
+  }
+  const labelClass = variant === "caption" ? "block min-h-[2rem] text-caption text-muted-foreground" : "min-h-[1.75rem] text-overline text-muted-foreground";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "min-w-0",
+        variant === "overline" && "flex flex-col gap-0.5"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClass, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-label-medium text-foreground break-words", children: value != null ? value : NO_DATA })
+      ]
+    }
+  );
+}
+function FinancialLineItem({
+  label,
+  value,
+  destructive
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-4 py-0.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-body-small text-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: cn(
+          "text-label-medium whitespace-nowrap text-right",
+          destructive ? "text-destructive" : "text-foreground"
+        ),
+        children: value || NO_DATA
+      }
+    )
+  ] });
+}
+function FinancialLvrBar({
+  percent = 56,
+  label = "56% \u2014 Good"
+}) {
+  const color = percent >= 80 ? "destructive" : percent >= 70 ? "warning" : "success";
+  const textClass = {
+    success: "text-success",
+    warning: "text-warning",
+    destructive: "text-destructive"
+  }[color];
+  const trackClass = {
+    success: "bg-success/15",
+    warning: "bg-warning/15",
+    destructive: "bg-destructive/15"
+  }[color];
+  const fillClass = {
+    success: "bg-success",
+    warning: "bg-warning",
+    destructive: "bg-destructive"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-body-small text-muted-foreground", children: "LVR" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("text-label-medium", textClass), children: label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("h-2.5 w-full overflow-hidden", trackClass), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: cn("h-full", fillClass),
+        style: { width: `${Math.min(percent, 100)}%` }
+      }
+    ) })
+  ] });
+}
+function FinancialSubtotalFrame({
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-auto border-t border-primary/20 bg-primary/10 px-4 py-3", children });
+}
+function FinancialSubtotalBlock({
+  monthlyAverage,
+  totalLast12Months,
+  label
+}) {
+  const isSingle = monthlyAverage && !totalLast12Months;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-row items-center",
+        isSingle ? "justify-end" : "justify-between"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-0.5",
+              isSingle ? "text-right" : "text-left"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-h-[1.75rem] text-overline text-muted-foreground", children: label != null ? label : "Monthly Average" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-label-medium text-foreground", children: monthlyAverage != null ? monthlyAverage : NO_DATA })
+            ]
+          }
+        ),
+        !isSingle && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-0.5 text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-h-[1.75rem] text-overline text-muted-foreground", children: "Total Last 12 Months" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-label-medium text-foreground", children: totalLast12Months != null ? totalLast12Months : NO_DATA })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FinancialCardHeader,
+  FinancialDetailField,
+  FinancialLineItem,
+  FinancialLvrBar,
+  FinancialSectionLabel,
+  FinancialSubsectionTitle,
+  FinancialSubtotalBlock,
+  FinancialSubtotalFrame
+});

package/dist/components/ui/financial-primitives.mjs

@@ -0,0 +1,22 @@
+import {
+  FinancialCardHeader,
+  FinancialDetailField,
+  FinancialLineItem,
+  FinancialLvrBar,
+  FinancialSectionLabel,
+  FinancialSubsectionTitle,
+  FinancialSubtotalBlock,
+  FinancialSubtotalFrame
+} from "../../chunk-OGOYQ7BG.mjs";
+import "../../chunk-VLQZANBF.mjs";
+import "../../chunk-FWCSY2DS.mjs";
+export {
+  FinancialCardHeader,
+  FinancialDetailField,
+  FinancialLineItem,
+  FinancialLvrBar,
+  FinancialSectionLabel,
+  FinancialSubsectionTitle,
+  FinancialSubtotalBlock,
+  FinancialSubtotalFrame
+};