@wealthx/shadcn 1.2.2 → 1.3.0

package/dist/{chunk-ZRSDX6OW.mjs → chunk-ZC45IGZO.mjs}

@@ -4,6 +4,12 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from "./chunk-6JQFUE5I.mjs";
+import {
+  formatCurrency
+} from "./chunk-MN5NYQCL.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
 import {
   cn
 } from "./chunk-VLQZANBF.mjs";
@@ -22,19 +28,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function getInitials(name) {
   return name.split(" ").filter(Boolean).map((word) => word[0]).join("").toUpperCase().slice(0, 2);
 }
-function formatCurrency(value, isNetItem = false) {
-  const abs = Math.abs(value);
-  const formatted = new Intl.NumberFormat("en-AU", {
-    style: "currency",
-    currency: "AUD",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  }).format(abs);
-  if (!isNetItem) return formatted;
-  if (value > 0) return `+${formatted}`;
-  if (value < 0) return `-${formatted}`;
-  return formatted;
-}
 function navIconCn(isActive) {
   return cn(
     "shrink-0 transition-colors",
@@ -81,7 +74,7 @@ function MetricsGroup({ group }) {
               "text-sm font-semibold tabular-nums shrink-0 text-brand-secondary-foreground",
               item.isNetItem && item.value < 0 && "text-destructive"
             ),
-            children: formatCurrency(item.value, item.isNetItem)
+            children: formatCurrency(item.value, { showSign: item.isNetItem })
           }
         )
       ]
@@ -97,15 +90,16 @@ function SidebarNavItemView({
   var _a;
   const Icon = item.icon;
   return /* @__PURE__ */ jsx(NavTooltip, { label: item.title, collapsed, children: /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
       type: "button",
+      variant: "ghost",
       onClick: () => onNavigate == null ? void 0 : onNavigate(item.href),
       className: cn(
-        "group flex w-full items-center gap-3 py-2.5 text-base font-medium transition-colors",
+        "group h-auto w-full items-center gap-3 py-2.5 text-base font-medium transition-colors",
         "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
         collapsed ? "justify-center px-2" : cn(
-          "px-3 border-l-4",
+          "justify-start px-3 border-l-4",
           item.isActive ? "bg-white/15 text-brand-secondary-foreground border-primary" : "border-transparent"
         )
       ),
@@ -137,12 +131,13 @@ function CollapsibleNavItem({
   }, [hasActiveChild]);
   if (collapsed) {
     return /* @__PURE__ */ jsx(NavTooltip, { label: item.title, collapsed, children: /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
         type: "button",
+        variant: "ghost",
         onClick: () => onNavigate == null ? void 0 : onNavigate(item.href),
         className: cn(
-          "group flex w-full items-center justify-center px-2 py-2.5 transition-colors",
+          "group h-auto w-full justify-center px-2 py-2.5 transition-colors",
           "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
           hasActiveChild && "bg-white/15 text-brand-secondary-foreground"
         ),
@@ -159,12 +154,13 @@ function CollapsibleNavItem({
   }
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
         type: "button",
+        variant: "ghost",
         onClick: () => setOpen((prev) => !prev),
         className: cn(
-          "group flex w-full items-center gap-3 px-3 py-2.5 text-base font-medium transition-colors",
+          "group h-auto w-full justify-start gap-3 px-3 py-2.5 text-base font-medium transition-colors",
           "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
           "border-l-4 border-transparent",
           hasActiveChild && "bg-white/15 text-brand-secondary-foreground border-primary"
@@ -194,12 +190,13 @@ function CollapsibleNavItem({
       }
     ),
     open && item.subItems && /* @__PURE__ */ jsx("div", { className: "ml-9 border-l border-white/15 pl-3", children: item.subItems.map((sub) => /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
         type: "button",
+        variant: "ghost",
         onClick: () => onNavigate == null ? void 0 : onNavigate(sub.href),
         className: cn(
-          "flex w-full items-center gap-2 py-1.5 pl-1 text-sm transition-colors",
+          "h-auto w-full justify-start gap-2 py-1.5 pl-1 text-sm transition-colors",
           "text-brand-secondary-foreground/50 hover:text-brand-secondary-foreground",
           sub.isActive && "text-primary font-medium"
         ),
@@ -241,7 +238,10 @@ function SidebarNav({
       "data-slot": "sidebar-nav",
       "data-collapsed": collapsed,
       className: cn(
-        "flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
+        // Force dark-mode CSS variable resolution — sidebar is always dark-backgrounded
+        // regardless of system theme, so semantic tokens (destructive, success, etc.)
+        // must use their dark-mode values to maintain WCAG contrast.
+        "dark flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
         "transition-all duration-200 ease-in-out",
         collapsed ? "w-14" : "w-[279px]",
         className
@@ -267,12 +267,13 @@ function SidebarNav({
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "border-b border-white/15", children: [
           /* @__PURE__ */ jsx(NavTooltip, { label: userName, collapsed, children: /* @__PURE__ */ jsxs(
-            "button",
+            Button,
             {
               type: "button",
+              variant: "ghost",
               onClick: () => !collapsed && setUserMenuOpen((prev) => !prev),
               className: cn(
-                "group flex w-full items-center gap-3 px-5 py-5 text-base transition-colors",
+                "group h-auto w-full justify-start gap-3 px-5 py-5 text-base transition-colors",
                 "text-brand-secondary-foreground hover:bg-white/10",
                 collapsed && "justify-center px-2 py-4"
               ),
@@ -296,12 +297,13 @@ function SidebarNav({
             }
           ) }),
           !collapsed && userMenuOpen && /* @__PURE__ */ jsx("div", { className: "border-t border-white/15 bg-black/20", children: /* @__PURE__ */ jsxs(
-            "button",
+            Button,
             {
               type: "button",
+              variant: "ghost",
               onClick: onLogout,
               className: cn(
-                "flex w-full items-center gap-3 px-5 py-3 text-base",
+                "h-auto w-full justify-start gap-3 px-5 py-3 text-base",
                 "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground transition-colors"
               ),
               children: [
@@ -344,12 +346,13 @@ function SidebarNav({
             label: collapsed ? "Expand" : "Collapse",
             collapsed,
             children: /* @__PURE__ */ jsxs(
-              "button",
+              Button,
               {
                 type: "button",
+                variant: "ghost",
                 onClick: () => onCollapsedChange(!collapsed),
                 className: cn(
-                  "flex w-full items-center gap-3 px-3 py-3 transition-colors",
+                  "h-auto w-full justify-start gap-3 px-3 py-3 transition-colors",
                   "text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
                   collapsed && "justify-center px-2"
                 ),

package/dist/components/ui/add-column-modal.js

@@ -178,10 +178,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         secondary: "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
         destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         "outline-primary": "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
         "outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
-        ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs dark:hover:bg-accent/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
@@ -270,38 +270,65 @@ function DialogOverlay(_a) {
     }, props)
   );
 }
+var DIALOG_MAX_WIDTHS = {
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  full: "100%"
+};
+var DIALOG_AUTO_MIN_WIDTH = "20rem";
 function DialogContent(_a) {
   var _b = _a, {
     className,
     children,
     showCloseButton = true,
-    style
+    style,
+    container,
+    align = "center",
+    size = "lg",
+    minWidth
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "showCloseButton",
-    "style"
+    "style",
+    "container",
+    "align",
+    "size",
+    "minWidth"
   ]);
   const themeVars = useThemeVars();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DialogPortal, { children: [
+  const isAuto = size === "auto";
+  const sizeStyle = isAuto ? { minWidth: minWidth != null ? minWidth : DIALOG_AUTO_MIN_WIDTH } : { maxWidth: DIALOG_MAX_WIDTHS[size] };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DialogPortal, { container: container != null ? container : void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogOverlay, { style: themeVars }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_dialog.Dialog.Popup,
       __spreadProps(__spreadValues({
         className: cn(
-          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels), foreground/50 scrim via DialogOverlay
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 sm:max-w-lg",
+          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels)
+          // max-w-[calc(100%-2rem)] acts as a viewport-edge guard on all sizes.
+          // Fixed max-width is applied via inline style (sizeStyle) to avoid
+          // Tailwind v4 class-scanning gaps with dynamic class lookups.
+          "fixed left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          // "auto" → hug content (with min-width floor); fixed sizes → fill to max-width
+          isAuto ? "w-auto" : "w-full",
+          align === "center" ? "top-[50%] translate-y-[-50%]" : "top-4 translate-y-0",
           className
         ),
         "data-slot": "dialog-content",
-        style: __spreadValues(__spreadValues({}, themeVars), style)
+        style: __spreadValues(__spreadValues(__spreadValues({}, themeVars), sizeStyle), style)
       }, props), {
         children: [
           children,
           showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             import_dialog.Dialog.Close,
             {
-              className: "absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "absolute top-4 right-4 inline-flex size-7 items-center justify-center transition-colors hover:bg-foreground/5 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               "data-slot": "dialog-close",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.XIcon, {}),
@@ -354,6 +381,7 @@ function DialogFooter(_a) {
           import_dialog.Dialog.Close,
           {
             className: cn(buttonVariants({ variant: "outline" })),
+            type: "button",
             children: "Close"
           }
         ) : null
@@ -732,14 +760,14 @@ function AddColumnModal({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "button",
+                Button,
                 {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
                   onClick: () => removeTask(task.id),
                   disabled: loading,
-                  className: cn(
-                    buttonVariants({ variant: "ghost", size: "icon" }),
-                    "size-9 shrink-0 text-muted-foreground hover:text-destructive"
-                  ),
+                  className: "size-9 shrink-0 text-muted-foreground hover:text-destructive",
                   "aria-label": "Remove task",
                   children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Trash2, { className: "size-4" })
                 }

package/dist/components/ui/add-column-modal.mjs

@@ -1,12 +1,12 @@
 import {
   AddColumnModal
-} from "../../chunk-Y4QFWRNR.mjs";
-import "../../chunk-FH6QVUVZ.mjs";
-import "../../chunk-NSLMILBT.mjs";
+} from "../../chunk-PU4YZQXV.mjs";
 import "../../chunk-7PYJD5JI.mjs";
-import "../../chunk-XIRTEFKH.mjs";
+import "../../chunk-NSLMILBT.mjs";
+import "../../chunk-FH6QVUVZ.mjs";
 import "../../chunk-GYMYRIZP.mjs";
-import "../../chunk-2I5S2AMY.mjs";
+import "../../chunk-6DZEXFNB.mjs";
+import "../../chunk-XREGSKX3.mjs";
 import "../../chunk-DBHJ5KC3.mjs";
 import "../../chunk-FEZKMUCF.mjs";
 import "../../chunk-QOJ2DQD6.mjs";

package/dist/components/ui/add-lead-modal.js

@@ -178,10 +178,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         secondary: "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
         destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         "outline-primary": "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
         "outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
-        ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs dark:hover:bg-accent/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
@@ -270,38 +270,65 @@ function DialogOverlay(_a) {
     }, props)
   );
 }
+var DIALOG_MAX_WIDTHS = {
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  full: "100%"
+};
+var DIALOG_AUTO_MIN_WIDTH = "20rem";
 function DialogContent(_a) {
   var _b = _a, {
     className,
     children,
     showCloseButton = true,
-    style
+    style,
+    container,
+    align = "center",
+    size = "lg",
+    minWidth
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "showCloseButton",
-    "style"
+    "style",
+    "container",
+    "align",
+    "size",
+    "minWidth"
   ]);
   const themeVars = useThemeVars();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DialogPortal, { children: [
+  const isAuto = size === "auto";
+  const sizeStyle = isAuto ? { minWidth: minWidth != null ? minWidth : DIALOG_AUTO_MIN_WIDTH } : { maxWidth: DIALOG_MAX_WIDTHS[size] };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DialogPortal, { container: container != null ? container : void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogOverlay, { style: themeVars }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_dialog.Dialog.Popup,
       __spreadProps(__spreadValues({
         className: cn(
-          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels), foreground/50 scrim via DialogOverlay
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 sm:max-w-lg",
+          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels)
+          // max-w-[calc(100%-2rem)] acts as a viewport-edge guard on all sizes.
+          // Fixed max-width is applied via inline style (sizeStyle) to avoid
+          // Tailwind v4 class-scanning gaps with dynamic class lookups.
+          "fixed left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          // "auto" → hug content (with min-width floor); fixed sizes → fill to max-width
+          isAuto ? "w-auto" : "w-full",
+          align === "center" ? "top-[50%] translate-y-[-50%]" : "top-4 translate-y-0",
           className
         ),
         "data-slot": "dialog-content",
-        style: __spreadValues(__spreadValues({}, themeVars), style)
+        style: __spreadValues(__spreadValues(__spreadValues({}, themeVars), sizeStyle), style)
       }, props), {
         children: [
           children,
           showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             import_dialog.Dialog.Close,
             {
-              className: "absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "absolute top-4 right-4 inline-flex size-7 items-center justify-center transition-colors hover:bg-foreground/5 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               "data-slot": "dialog-close",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.XIcon, {}),
@@ -354,6 +381,7 @@ function DialogFooter(_a) {
           import_dialog.Dialog.Close,
           {
             className: cn(buttonVariants({ variant: "outline" })),
+            type: "button",
             children: "Close"
           }
         ) : null
@@ -520,10 +548,13 @@ function AddLeadModal({
         }
       ),
       searchValue && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "button",
+        Button,
         {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
           onClick: () => onSearchChange == null ? void 0 : onSearchChange(""),
-          className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          className: "absolute right-2.5 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground",
           "aria-label": "Clear search",
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.X, { className: "size-3.5" })
         }

package/dist/components/ui/add-lead-modal.mjs

@@ -1,11 +1,11 @@
 import {
   AddLeadModal
-} from "../../chunk-CGH4DRNG.mjs";
+} from "../../chunk-HVY6KCCF.mjs";
 import "../../chunk-RGVKLTLH.mjs";
 import "../../chunk-7YAU5CY6.mjs";
-import "../../chunk-XIRTEFKH.mjs";
 import "../../chunk-GYMYRIZP.mjs";
-import "../../chunk-2I5S2AMY.mjs";
+import "../../chunk-6DZEXFNB.mjs";
+import "../../chunk-XREGSKX3.mjs";
 import "../../chunk-DBHJ5KC3.mjs";
 import "../../chunk-FEZKMUCF.mjs";
 import "../../chunk-QOJ2DQD6.mjs";