@almadar/ui 5.30.0 → 5.31.0

package/dist/marketing/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React8 = require('react');
+var React9 = require('react');
 var logger = require('@almadar/logger');
 var jsxRuntime = require('react/jsx-runtime');
 var LucideIcons2 = require('lucide-react');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React8__default = /*#__PURE__*/_interopDefault(React8);
+var React9__default = /*#__PURE__*/_interopDefault(React9);
 var LucideIcons2__namespace = /*#__PURE__*/_interopNamespace(LucideIcons2);
 var PhosphorIcons__namespace = /*#__PURE__*/_interopNamespace(PhosphorIcons);
 var TablerIcons__namespace = /*#__PURE__*/_interopNamespace(TablerIcons);
@@ -2515,10 +2515,10 @@ function cn(...inputs) {
 }
 logger.createLogger("almadar:eventbus");
 logger.createLogger("almadar:eventbus:subscribe");
-var EventBusContext = React8.createContext(null);
-var TraitScopeContext = React8.createContext(null);
+var EventBusContext = React9.createContext(null);
+var TraitScopeContext = React9.createContext(null);
 function useTraitScope() {
-  return React8.useContext(TraitScopeContext);
+  return React9.useContext(TraitScopeContext);
 }
 var log = logger.createLogger("almadar:eventbus");
 var subLog2 = logger.createLogger("almadar:eventbus:subscribe");
@@ -2594,10 +2594,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React8.useContext(EventBusContext);
+  const context = React9.useContext(EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const scope = useTraitScope();
-  return React8.useMemo(() => {
+  return React9.useMemo(() => {
     if (!scope) {
       return {
         ...baseBus,
@@ -2735,7 +2735,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React8__default.default.forwardRef(
+var Box = React9__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2765,27 +2765,27 @@ var Box = React8__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React8.useCallback((e) => {
+    const handleClick = React9.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React8.useCallback((e) => {
+    const handleMouseEnter = React9.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React8.useCallback((e) => {
+    const handleMouseLeave = React9.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    return React8__default.default.createElement(
+    return React9__default.default.createElement(
       Component,
       {
         ref,
@@ -3054,7 +3054,7 @@ function getIconFamilyServerSnapshot() {
   return DEFAULT_FAMILY;
 }
 function useIconFamily() {
-  return React8.useSyncExternalStore(
+  return React9.useSyncExternalStore(
     subscribeIconFamily,
     getIconFamilySnapshot,
     getIconFamilyServerSnapshot
@@ -3747,7 +3747,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React8__default.default.useMemo(() => {
+  const RenderedComponent = React9__default.default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3864,7 +3864,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React8__default.default.isValidElement(value)) {
+  if (React9__default.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3873,7 +3873,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React8__default.default.forwardRef(
+var Button = React9__default.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3969,7 +3969,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React8__default.default.forwardRef(
+var Badge = React9__default.default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
     const iconSizes = {
       sm: "h-icon-default w-icon-default",
@@ -4016,6 +4016,41 @@ var Badge = React8__default.default.forwardRef(
   }
 );
 Badge.displayName = "Badge";
+var sizeStyles3 = {
+  xs: "h-3 w-3",
+  sm: "h-icon-default w-icon-default",
+  md: "h-6 w-6",
+  lg: "h-8 w-8"
+};
+var Spinner = React9__default.default.forwardRef(
+  ({ className, size = "md", overlay, ...props }, ref) => {
+    if (overlay) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "absolute inset-0 z-10 flex items-center justify-center",
+            "bg-background/60 backdrop-blur-sm",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "loader", className: cn("animate-spin text-foreground", sizeStyles3[size]) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("text-foreground", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "loader", className: cn("animate-spin", sizeStyles3[size]) })
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
 var variantStyles4 = {
   default: [
     "bg-card",
@@ -4069,7 +4104,7 @@ var lookStyles = {
   chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
   "tile-image-first": "p-0 overflow-hidden"
 };
-var Card = React8__default.default.forwardRef(
+var Card = React9__default.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -4080,6 +4115,7 @@ var Card = React8__default.default.forwardRef(
     look = "elevated",
     children,
     action,
+    loading,
     onClick,
     ...props
   }, ref) => {
@@ -4093,7 +4129,7 @@ var Card = React8__default.default.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-container",
+          "rounded-container relative",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -4104,6 +4140,7 @@ var Card = React8__default.default.forwardRef(
         onClick: handleClick,
         ...props,
         children: [
+          loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { overlay: true, size: "md" }),
           (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-card-foreground font-bold", children: title }),
             subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
@@ -4115,9 +4152,9 @@ var Card = React8__default.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React8__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React9__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React8__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React9__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -4130,11 +4167,11 @@ var CardTitle = React8__default.default.forwardRef(({ className, ...props }, ref
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React8__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React9__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React8__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React9__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -4291,7 +4328,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React8__default.default.forwardRef(
+var ContentSection = React9__default.default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -4315,8 +4352,8 @@ var InstallBox = ({
   label,
   className
 }) => {
-  const [copied, setCopied] = React8.useState(false);
-  const handleCopy = React8.useCallback(() => {
+  const [copied, setCopied] = React9.useState(false);
+  const handleCopy = React9.useCallback(() => {
     void navigator.clipboard.writeText(command);
     setCopied(true);
     const timer = setTimeout(() => setCopied(false), 2e3);
@@ -4893,7 +4930,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React9__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-8 bg-border" })
@@ -4904,7 +4941,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -5112,8 +5149,8 @@ var Avatar = ({
   actionPayload
 }) => {
   const eventBus = useEventBus();
-  const [imgFailed, setImgFailed] = React8__default.default.useState(false);
-  React8__default.default.useEffect(() => {
+  const [imgFailed, setImgFailed] = React9__default.default.useState(false);
+  React9__default.default.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -5430,10 +5467,10 @@ var AnimatedCounter = ({
   duration = 1500,
   className
 }) => {
-  const ref = React8.useRef(null);
-  const [displayValue, setDisplayValue] = React8.useState("0");
-  const [hasAnimated, setHasAnimated] = React8.useState(false);
-  const animate = React8.useCallback(() => {
+  const ref = React9.useRef(null);
+  const [displayValue, setDisplayValue] = React9.useState("0");
+  const [hasAnimated, setHasAnimated] = React9.useState(false);
+  const animate = React9.useCallback(() => {
     const { num, prefix, suffix, decimals } = parseValue(value);
     if (num === 0) {
       setDisplayValue(String(value));
@@ -5454,7 +5491,7 @@ var AnimatedCounter = ({
     };
     requestAnimationFrame(tick);
   }, [value, duration]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (hasAnimated) return;
     const el = ref.current;
     if (!el) return;
@@ -5504,7 +5541,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React8__default.default.forwardRef(
+var AnimatedReveal = React9__default.default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -5519,10 +5556,10 @@ var AnimatedReveal = React8__default.default.forwardRef(
     style,
     ...props
   }, forwardedRef) => {
-    const [isAnimated, setIsAnimated] = React8.useState(false);
-    const internalRef = React8.useRef(null);
-    const hasAnimated = React8.useRef(false);
-    const setRef = React8.useCallback(
+    const [isAnimated, setIsAnimated] = React9.useState(false);
+    const internalRef = React9.useRef(null);
+    const hasAnimated = React9.useRef(false);
+    const setRef = React9.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -5530,7 +5567,7 @@ var AnimatedReveal = React8__default.default.forwardRef(
       },
       [forwardedRef]
     );
-    React8.useEffect(() => {
+    React9.useEffect(() => {
       if (trigger !== "scroll") return;
       const el = internalRef.current;
       if (!el) return;
@@ -5556,7 +5593,7 @@ var AnimatedReveal = React8__default.default.forwardRef(
         setIsAnimated(false);
       }
     } : void 0;
-    React8.useEffect(() => {
+    React9.useEffect(() => {
       if (trigger === "manual" && manualAnimate !== void 0) {
         setIsAnimated(manualAnimate);
       }
@@ -5586,9 +5623,9 @@ var AnimatedReveal = React8__default.default.forwardRef(
 );
 AnimatedReveal.displayName = "AnimatedReveal";
 function useFetchedSvg(src) {
-  const [svg, setSvg] = React8.useState(null);
-  const cache = React8.useRef({});
-  React8.useEffect(() => {
+  const [svg, setSvg] = React9.useState(null);
+  const cache = React9.useRef({});
+  React9.useEffect(() => {
     if (!src) {
       setSvg(null);
       return;
@@ -5657,7 +5694,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React8__default.default.forwardRef(
+var AnimatedGraphic = React9__default.default.forwardRef(
   ({
     src,
     svgContent,
@@ -5676,11 +5713,11 @@ var AnimatedGraphic = React8__default.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = React8.useRef(null);
+    const containerRef = React9.useRef(null);
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
-    const prevAnimateRef = React8.useRef(animate);
-    const setRef = React8__default.default.useCallback(
+    const prevAnimateRef = React9.useRef(animate);
+    const setRef = React9__default.default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -5688,7 +5725,7 @@ var AnimatedGraphic = React8__default.default.forwardRef(
       },
       [ref]
     );
-    React8.useEffect(() => {
+    React9.useEffect(() => {
       const el = containerRef.current;
       if (!el || !strokeColor) return;
       const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
@@ -5696,7 +5733,7 @@ var AnimatedGraphic = React8__default.default.forwardRef(
         p.style.stroke = strokeColor;
       });
     }, [resolvedSvg, strokeColor]);
-    React8.useEffect(() => {
+    React9.useEffect(() => {
       const el = containerRef.current;
       if (!el || !resolvedSvg) return;
       if (animation === "draw" || animation === "fill") {
@@ -5721,7 +5758,7 @@ var AnimatedGraphic = React8__default.default.forwardRef(
         });
       }
     }, [resolvedSvg, animation]);
-    React8.useEffect(() => {
+    React9.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const id = requestAnimationFrame(() => {
@@ -6521,7 +6558,7 @@ var GeometricPattern = ({
   children,
   className
 }) => {
-  const reactId = React8.useId();
+  const reactId = React9.useId();
   const patternId = `gp${reactId.replace(/:/g, "")}`;
   const size = 60 * scale;
   const stripHeight = 40 * scale;
@@ -6756,7 +6793,7 @@ var EdgeDecoration = ({
   width = 15,
   className
 }) => {
-  const id = React8.useId();
+  const id = React9.useId();
   const Variant = VARIANT_MAP2[variant];
   const resolvedColor = color in colorTokenVars2 ? colorTokenVars2[color] : color;
   const sides = side === "both" ? ["left", "right"] : [side];

package/dist/marketing/index.d.cts

@@ -316,6 +316,8 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     /** Declarative event key emitted on click for trait dispatch */
     action?: EventKey;
+    /** Shows a skeleton/spinner overlay while true. */
+    loading?: boolean;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/marketing/index.js

@@ -1,4 +1,4 @@
-import React8, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
+import React9, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
 import { createLogger } from '@almadar/logger';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons2 from 'lucide-react';
@@ -2708,7 +2708,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React8.forwardRef(
+var Box = React9.forwardRef(
   ({
     padding,
     paddingX,
@@ -2758,7 +2758,7 @@ var Box = React8.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
-    return React8.createElement(
+    return React9.createElement(
       Component,
       {
         ref,
@@ -3720,7 +3720,7 @@ var Icon = ({
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
-  const RenderedComponent = React8.useMemo(() => {
+  const RenderedComponent = React9.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
   }, [directIcon, effectiveName, family]);
@@ -3837,7 +3837,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React8.isValidElement(value)) {
+  if (React9.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3846,7 +3846,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React8.forwardRef(
+var Button = React9.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3942,7 +3942,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React8.forwardRef(
+var Badge = React9.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
     const iconSizes = {
       sm: "h-icon-default w-icon-default",
@@ -3989,6 +3989,41 @@ var Badge = React8.forwardRef(
   }
 );
 Badge.displayName = "Badge";
+var sizeStyles3 = {
+  xs: "h-3 w-3",
+  sm: "h-icon-default w-icon-default",
+  md: "h-6 w-6",
+  lg: "h-8 w-8"
+};
+var Spinner = React9.forwardRef(
+  ({ className, size = "md", overlay, ...props }, ref) => {
+    if (overlay) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "absolute inset-0 z-10 flex items-center justify-center",
+            "bg-background/60 backdrop-blur-sm",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin text-foreground", sizeStyles3[size]) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("text-foreground", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin", sizeStyles3[size]) })
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
 var variantStyles4 = {
   default: [
     "bg-card",
@@ -4042,7 +4077,7 @@ var lookStyles = {
   chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
   "tile-image-first": "p-0 overflow-hidden"
 };
-var Card = React8.forwardRef(
+var Card = React9.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -4053,6 +4088,7 @@ var Card = React8.forwardRef(
     look = "elevated",
     children,
     action,
+    loading,
     onClick,
     ...props
   }, ref) => {
@@ -4066,7 +4102,7 @@ var Card = React8.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-container",
+          "rounded-container relative",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -4077,6 +4113,7 @@ var Card = React8.forwardRef(
         onClick: handleClick,
         ...props,
         children: [
+          loading && /* @__PURE__ */ jsx(Spinner, { overlay: true, size: "md" }),
           (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
             title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-card-foreground font-bold", children: title }),
             subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
@@ -4088,9 +4125,9 @@ var Card = React8.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -4103,11 +4140,11 @@ var CardTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4264,7 +4301,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React8.forwardRef(
+var ContentSection = React9.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -4866,7 +4903,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React8.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React9.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-border" })
@@ -4877,7 +4914,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
     /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -5085,8 +5122,8 @@ var Avatar = ({
   actionPayload
 }) => {
   const eventBus = useEventBus();
-  const [imgFailed, setImgFailed] = React8.useState(false);
-  React8.useEffect(() => {
+  const [imgFailed, setImgFailed] = React9.useState(false);
+  React9.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -5477,7 +5514,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React8.forwardRef(
+var AnimatedReveal = React9.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -5630,7 +5667,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React8.forwardRef(
+var AnimatedGraphic = React9.forwardRef(
   ({
     src,
     svgContent,
@@ -5653,7 +5690,7 @@ var AnimatedGraphic = React8.forwardRef(
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
     const prevAnimateRef = useRef(animate);
-    const setRef = React8.useCallback(
+    const setRef = React9.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);