@wealthx/shadcn 1.5.43 → 1.5.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.43",
+  "version": "1.5.44",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/ui/category-edit-dialog.tsx

@@ -89,7 +89,7 @@ function CategoryRow({
         isSelected && "bg-primary/10",
       )}
     >
-      <ItemIcon icon={icon} active={isSelected} />
+      <ItemIcon icon={icon} active={false} />
       <span className="flex-1">{name}</span>
       {isSelected && <Check className="size-3.5 shrink-0 text-primary" />}
     </button>

package/src/components/ui/dashboard-expense-categories.tsx

@@ -106,7 +106,7 @@ function SubCategoryRow({
           : undefined
       }
     >
-      <div className="flex items-center justify-between gap-2 text-xs">
+      <div className="flex items-center justify-between gap-2 text-sm">
         <div className="flex min-w-0 items-center gap-1">
           <span
             className={cn(
@@ -222,7 +222,7 @@ function CategoryRow({
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-2">
             <div className="flex min-w-0 items-center gap-1">
-              <span className="truncate text-sm font-medium text-foreground">
+              <span className="truncate text-base font-medium text-foreground">
                 {item.name}
               </span>
               {/* Filter icon — only this triggers the category filter */}
@@ -247,10 +247,10 @@ function CategoryRow({
               </button>
             </div>
             <div className="flex shrink-0 items-center gap-2">
-              <span className="text-xs text-muted-foreground">
+              <span className="text-sm text-muted-foreground">
                 {item.pct.toFixed(0)}%
               </span>
-              <span className="text-sm font-semibold text-foreground">
+              <span className="text-base font-semibold text-foreground">
                 {formatCurrency(item.amount)}
               </span>
             </div>

package/src/components/ui/dashboard-transactions-table.tsx

@@ -59,7 +59,7 @@ export interface DashboardTransactionsTableProps {
     applyToFuture: boolean,
   ) => void;
   /**
-   * Show or hide the card header (title + "Account Transaction" tab).
+   * Show or hide the card header (title + tab row).
    * Set to `false` when the surrounding layout already provides context.
    * Defaults to `true`.
    */
@@ -70,6 +70,12 @@ export interface DashboardTransactionsTableProps {
    * Defaults to `true`.
    */
   showTab?: boolean;
+  /**
+   * Colour scheme for the editable category chip hover state.
+   * - `"primary"` (default) — green hover
+   * - `"secondary"` — dark navy hover; use when the surrounding context uses the secondary palette (e.g. expense view)
+   */
+  colorScheme?: "primary" | "secondary";
 }
 
 // ─── Category chip ────────────────────────────────────────────────────────────
@@ -77,10 +83,12 @@ export interface DashboardTransactionsTableProps {
 function CategoryChip({
   label,
   canEdit,
+  colorScheme = "primary",
   onClick,
 }: {
   label: string;
   canEdit: boolean;
+  colorScheme?: "primary" | "secondary";
   onClick?: () => void;
 }) {
   if (canEdit) {
@@ -88,7 +96,12 @@ function CategoryChip({
       <Badge
         asChild
         variant="secondary"
-        className="cursor-pointer transition-colors hover:bg-muted"
+        className={cn(
+          "cursor-pointer transition-colors",
+          colorScheme === "secondary"
+            ? "hover:bg-brand-secondary/10 hover:text-[var(--brand-secondary)]"
+            : "hover:border-primary/40 hover:bg-primary/10 hover:text-primary",
+        )}
       >
         <button type="button" onClick={onClick}>
           {label}
@@ -105,27 +118,36 @@ function CategoryChip({
 
 function TransactionRow({
   tx,
+  isDimmed,
   canEdit,
+  colorScheme = "primary",
   onChipClick,
 }: {
   tx: DashboardTransaction;
+  isDimmed: boolean;
   canEdit: boolean;
+  colorScheme?: "primary" | "secondary";
   onChipClick?: () => void;
 }) {
   const isCredit = tx.amount >= 0;
   const categoryLabel = tx.editedCategoryName ?? tx.category;
 
   return (
-    <div className="flex items-start justify-between gap-4 border-b border-border py-3 last:border-0">
+    <div
+      className={cn(
+        "flex items-start justify-between gap-4 border-b border-border py-3 last:border-0 transition-opacity",
+        isDimmed && "opacity-30",
+      )}
+    >
       <div className="min-w-0 flex-1">
-        <p className="text-xs text-muted-foreground">
+        <p className="text-sm text-muted-foreground">
           {formatDateShort(tx.date)}
         </p>
-        <p className="mt-0.5 truncate text-sm font-medium text-foreground">
+        <p className="mt-0.5 truncate text-base font-medium text-foreground">
           {tx.description}
         </p>
         {tx.merchant && (
-          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+          <p className="mt-0.5 truncate text-sm text-muted-foreground">
             {tx.merchant}
           </p>
         )}
@@ -134,6 +156,7 @@ function TransactionRow({
             <CategoryChip
               label={categoryLabel}
               canEdit={canEdit}
+              colorScheme={colorScheme}
               onClick={onChipClick}
             />
           </div>
@@ -142,7 +165,7 @@ function TransactionRow({
 
       <span
         className={cn(
-          "shrink-0 text-sm font-semibold",
+          "shrink-0 text-base font-semibold",
           isCredit ? "text-success" : "text-foreground",
         )}
       >
@@ -168,6 +191,7 @@ export function DashboardTransactionsTable({
   onCategoryChange,
   showHeader = true,
   showTab = true,
+  colorScheme = "primary",
 }: DashboardTransactionsTableProps) {
   const isFiltering = selectedCategoryId != null;
   const canEdit = !!categories?.length;
@@ -210,18 +234,16 @@ export function DashboardTransactionsTable({
             </p>
           ) : (
             <div className="flex flex-col">
-              {transactions
-                .filter(
-                  (tx) => !isFiltering || tx.categoryId === selectedCategoryId,
-                )
-                .map((tx) => (
-                  <TransactionRow
-                    key={tx.id}
-                    tx={tx}
-                    canEdit={canEdit}
-                    onChipClick={() => setEditingTx(tx)}
-                  />
-                ))}
+              {transactions.map((tx) => (
+                <TransactionRow
+                  key={tx.id}
+                  tx={tx}
+                  isDimmed={isFiltering && tx.categoryId !== selectedCategoryId}
+                  canEdit={canEdit}
+                  colorScheme={colorScheme}
+                  onChipClick={() => setEditingTx(tx)}
+                />
+              ))}
             </div>
           )}