@wealthx/shadcn 1.1.0 → 1.2.0

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

@@ -78,8 +78,40 @@ function useThemeVars() {
 // 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 (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return twMerge((0, import_clsx.clsx)(inputs));
 }
 
 // src/components/ui/card.tsx
@@ -115,7 +147,7 @@ function CardTitle(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     __spreadValues({
-      className: cn("leading-none font-semibold", className),
+      className: cn("text-label-large", className),
       "data-slot": "card-title"
     }, props)
   );
@@ -171,7 +203,7 @@ function EmptyDescription(_a) {
     "div",
     __spreadValues({
       className: cn(
-        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        "text-body-small leading-relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       ),
       "data-slot": "empty-description"
@@ -263,7 +295,7 @@ Slot.displayName = "Slot";
 // src/components/ui/button.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-sm font-medium whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-button whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -278,7 +310,7 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 px-2 text-button-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 px-6 has-[>svg]:px-4",
         icon: "size-9",
@@ -336,14 +368,13 @@ var Button = (0, import_react2.forwardRef)(function Button2(_a, ref) {
 
 // src/components/ui/chart-shared.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var FALLBACK_PRIMARY = "#33FF99";
+var FALLBACK_SECONDARY = "#162029";
 var FALLBACK_TICK = "#9EAAB5";
 
 // src/components/ui/transactions-income-expense-bar-chart.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 import_chart.Chart.register(import_chart.CategoryScale, import_chart.LinearScale, import_chart.BarElement, import_chart.Tooltip);
-var FALLBACK_PRIMARY = "#33FF99";
-var FALLBACK_SECONDARY = "#162029";
-var VALUE_LABEL_COLOR = "#162029";
 function formatDollar(value) {
   return `$${value.toLocaleString(void 0, {
     minimumFractionDigits: 2,
@@ -362,6 +393,7 @@ function TransactionsIncomeExpenseBarChart({
   const themeVars = useThemeVars();
   const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
   const brandSecondary = themeVars["--theme-secondary"] || FALLBACK_SECONDARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
   const hasData = totalIncome != null && totalExpense != null;
   const incomeVal = totalIncome != null ? totalIncome : 0;
   const expenseVal = Math.abs(totalExpense != null ? totalExpense : 0);
@@ -388,7 +420,7 @@ function TransactionsIncomeExpenseBarChart({
                 offset: 10,
                 clamp: false,
                 font: { weight: "bold", size: 14 },
-                color: VALUE_LABEL_COLOR,
+                color: FALLBACK_SECONDARY,
                 textAlign: "left",
                 // Returns array for multi-line: dollar value on line 1, blank on line 2
                 formatter: (v) => [formatDollar(v), ""]
@@ -405,7 +437,10 @@ function TransactionsIncomeExpenseBarChart({
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 formatter: (_, ctx) => {
                   var _a, _b;
-                  return ["", String((_b = (_a = ctx.chart.data.labels) == null ? void 0 : _a[ctx.dataIndex]) != null ? _b : "")];
+                  return [
+                    "",
+                    String((_b = (_a = ctx.chart.data.labels) == null ? void 0 : _a[ctx.dataIndex]) != null ? _b : "")
+                  ];
                 }
               }
             }
@@ -414,40 +449,43 @@ function TransactionsIncomeExpenseBarChart({
       ]
     };
   }, [hasData, incomeVal, expenseVal, brandPrimary, brandSecondary]);
-  const options = (0, import_react3.useMemo)(() => ({
-    indexAxis: "y",
-    responsive: true,
-    maintainAspectRatio: false,
-    animation: { duration: 800, easing: "easeOutQuart" },
-    layout: {
-      // Right padding reserves space for the datalabels rendered outside the bar area
-      padding: { right: 180, left: 0, top: 10, bottom: 10 }
-    },
-    plugins: {
-      legend: { display: false },
-      tooltip: { enabled: false }
-    },
-    scales: {
-      y: {
-        display: true,
-        grid: { display: false },
-        border: { display: false },
-        ticks: { display: false }
+  const options = (0, import_react3.useMemo)(
+    () => ({
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, easing: "easeOutQuart" },
+      layout: {
+        // Right padding reserves space for the datalabels rendered outside the bar area
+        padding: { right: 180, left: 0, top: 10, bottom: 10 }
       },
-      x: {
-        display: true,
-        suggestedMax: maxVal * 1.3,
-        grid: { display: false },
-        border: { display: false },
-        ticks: { display: false }
+      plugins: {
+        legend: { display: false },
+        tooltip: { enabled: false }
+      },
+      scales: {
+        y: {
+          display: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { display: false }
+        },
+        x: {
+          display: true,
+          suggestedMax: maxVal * 1.3,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { display: false }
+        }
       }
-    }
-  }), [maxVal]);
+    }),
+    [maxVal]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Card,
     {
       className: cn("w-full py-4 sm:py-6 gap-2", className),
-      style: { maxWidth: width },
+      style: { maxWidth: width, fontFamily },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-sm sm:text-base", children: title }) }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(

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

@@ -1,15 +1,15 @@
 import {
   TransactionsIncomeExpenseBarChart
-} from "../../chunk-RN67642N.mjs";
-import "../../chunk-BMFN37JH.mjs";
-import "../../chunk-3EQP72AW.mjs";
-import "../../chunk-YN5SYTOO.mjs";
-import "../../chunk-SLWCCURD.mjs";
-import "../../chunk-4AJ5HWHD.mjs";
+} from "../../chunk-KMCGSZTX.mjs";
+import "../../chunk-FZIXGLMV.mjs";
+import "../../chunk-NQPOYKAQ.mjs";
+import "../../chunk-CLIN5525.mjs";
+import "../../chunk-7YAU5CY6.mjs";
+import "../../chunk-2I5S2AMY.mjs";
 import "../../chunk-DBHJ5KC3.mjs";
-import "../../chunk-OXQQNQZI.mjs";
+import "../../chunk-FEZKMUCF.mjs";
 import "../../chunk-QOJ2DQD6.mjs";
-import "../../chunk-V7CNWJT3.mjs";
+import "../../chunk-VLQZANBF.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   TransactionsIncomeExpenseBarChart