@almadar/ui 4.3.1 → 4.4.1

package/dist/avl/index.cjs

@@ -7147,7 +7147,8 @@ var init_AnimatedCounter = __esm({
       suffix,
       className
     }) => {
-      const value = typeof rawValue === "number" && !Number.isNaN(rawValue) ? rawValue : 0;
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
       const [displayValue, setDisplayValue] = React126.useState(value);
       const previousValueRef = React126.useRef(value);
       const animationFrameRef = React126.useRef(null);
@@ -46317,18 +46318,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -46353,18 +46360,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -46408,6 +46421,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = React126.useContext(SuspenseConfigContext);
   const contained = React126.useContext(SlotContainedContext);
   const content = slots[slot];
@@ -46454,6 +46468,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -46503,7 +46521,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React126.useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   React126.useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -46511,7 +46530,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -46859,6 +46882,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/avl/index.js

@@ -7101,7 +7101,8 @@ var init_AnimatedCounter = __esm({
       suffix,
       className
     }) => {
-      const value = typeof rawValue === "number" && !Number.isNaN(rawValue) ? rawValue : 0;
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
       const [displayValue, setDisplayValue] = useState(value);
       const previousValueRef = useRef(value);
       const animationFrameRef = useRef(null);
@@ -46271,18 +46272,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -46307,18 +46314,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -46362,6 +46375,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
   const content = slots[slot];
@@ -46408,6 +46422,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -46457,7 +46475,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -46465,7 +46484,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -46813,6 +46836,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/components/atoms/AnimatedCounter.d.ts

@@ -6,8 +6,8 @@
  */
 import React from "react";
 export interface AnimatedCounterProps {
-    /** The target number to animate to */
-    value: number;
+    /** The target value to animate to. Strings are parsed numerically (e.g. "500", "99.9"). */
+    value: number | string;
     /** Animation duration in milliseconds */
     duration?: number;
     /** Text to display before the number */

package/dist/components/index.cjs

@@ -3178,7 +3178,8 @@ var init_AnimatedCounter = __esm({
       suffix,
       className
     }) => {
-      const value = typeof rawValue === "number" && !Number.isNaN(rawValue) ? rawValue : 0;
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
       const [displayValue, setDisplayValue] = React110.useState(value);
       const previousValueRef = React110.useRef(value);
       const animationFrameRef = React110.useRef(null);
@@ -37163,18 +37164,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     exports.Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37199,18 +37206,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     exports.Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37254,6 +37267,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = context.useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = React110.useContext(SuspenseConfigContext);
   const contained = React110.useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37300,6 +37314,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37349,7 +37367,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React110.useState(null);
-  const eventBus = context.useUISlots();
+  const slotsBus = context.useUISlots();
+  const eventBus = useEventBus();
   React110.useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37357,7 +37376,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -37704,6 +37727,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/components/index.js

@@ -3133,7 +3133,8 @@ var init_AnimatedCounter = __esm({
       suffix,
       className
     }) => {
-      const value = typeof rawValue === "number" && !Number.isNaN(rawValue) ? rawValue : 0;
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
       const [displayValue, setDisplayValue] = useState(value);
       const previousValueRef = useRef(value);
       const animationFrameRef = useRef(null);
@@ -37118,18 +37119,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37154,18 +37161,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37209,6 +37222,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37255,6 +37269,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37304,7 +37322,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37312,7 +37331,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -37659,6 +37682,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/components/molecules/AnimatedCounter.d.ts

@@ -6,8 +6,8 @@
  */
 import React from 'react';
 export interface AnimatedCounterProps {
-    /** Target value to count to (e.g. "500+", "99.9%", "3x") */
-    value: string;
+    /** Target value to count to. Strings allow display formats (e.g. "500+", "99.9%", "3x"); numbers are coerced. */
+    value: string | number;
     /** Label displayed below the number */
     label: string;
     /** Animation duration in ms */

package/dist/marketing/index.cjs

@@ -4641,7 +4641,7 @@ var PullQuote = ({
 };
 PullQuote.displayName = "PullQuote";
 function parseValue(value) {
-  if (!value) return { num: 0, prefix: "", suffix: "", decimals: 0 };
+  if (value === "" || value == null) return { num: 0, prefix: "", suffix: "", decimals: 0 };
   const match = String(value).match(/^([^0-9]*)([0-9]+(?:\.[0-9]+)?)(.*)$/);
   if (!match) {
     return { num: 0, prefix: "", suffix: String(value), decimals: 0 };
@@ -4668,7 +4668,7 @@ var AnimatedCounter = ({
   const animate = React5.useCallback(() => {
     const { num, prefix, suffix, decimals } = parseValue(value);
     if (num === 0) {
-      setDisplayValue(value);
+      setDisplayValue(String(value));
       return;
     }
     const startTime = performance.now();
@@ -4681,7 +4681,7 @@ var AnimatedCounter = ({
       if (progress < 1) {
         requestAnimationFrame(tick);
       } else {
-        setDisplayValue(value);
+        setDisplayValue(String(value));
       }
     };
     requestAnimationFrame(tick);

package/dist/marketing/index.d.cts

@@ -822,8 +822,8 @@ declare const PullQuote: React.FC<PullQuoteProps>;
  */
 
 interface AnimatedCounterProps {
-    /** Target value to count to (e.g. "500+", "99.9%", "3x") */
-    value: string;
+    /** Target value to count to. Strings allow display formats (e.g. "500+", "99.9%", "3x"); numbers are coerced. */
+    value: string | number;
     /** Label displayed below the number */
     label: string;
     /** Animation duration in ms */

package/dist/marketing/index.js

@@ -4617,7 +4617,7 @@ var PullQuote = ({
 };
 PullQuote.displayName = "PullQuote";
 function parseValue(value) {
-  if (!value) return { num: 0, prefix: "", suffix: "", decimals: 0 };
+  if (value === "" || value == null) return { num: 0, prefix: "", suffix: "", decimals: 0 };
   const match = String(value).match(/^([^0-9]*)([0-9]+(?:\.[0-9]+)?)(.*)$/);
   if (!match) {
     return { num: 0, prefix: "", suffix: String(value), decimals: 0 };
@@ -4644,7 +4644,7 @@ var AnimatedCounter = ({
   const animate = useCallback(() => {
     const { num, prefix, suffix, decimals } = parseValue(value);
     if (num === 0) {
-      setDisplayValue(value);
+      setDisplayValue(String(value));
       return;
     }
     const startTime = performance.now();
@@ -4657,7 +4657,7 @@ var AnimatedCounter = ({
       if (progress < 1) {
         requestAnimationFrame(tick);
       } else {
-        setDisplayValue(value);
+        setDisplayValue(String(value));
       }
     };
     requestAnimationFrame(tick);

package/dist/providers/index.cjs

@@ -3681,7 +3681,8 @@ var init_AnimatedCounter = __esm({
       suffix,
       className
     }) => {
-      const value = typeof rawValue === "number" && !Number.isNaN(rawValue) ? rawValue : 0;
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
       const [displayValue, setDisplayValue] = React115.useState(value);
       const previousValueRef = React115.useRef(value);
       const animationFrameRef = React115.useRef(null);
@@ -37672,18 +37673,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37708,18 +37715,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37763,6 +37776,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = context.useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = React115.useContext(SuspenseConfigContext);
   const contained = React115.useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37809,6 +37823,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37858,7 +37876,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React115.useState(null);
-  const eventBus = context.useUISlots();
+  const slotsBus = context.useUISlots();
+  const eventBus = useEventBus();
   React115.useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37866,7 +37885,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -38213,6 +38236,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/providers/index.js

@@ -3636,7 +3636,8 @@ var init_AnimatedCounter = __esm({
       suffix,
       className
     }) => {
-      const value = typeof rawValue === "number" && !Number.isNaN(rawValue) ? rawValue : 0;
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
       const [displayValue, setDisplayValue] = useState(value);
       const previousValueRef = useRef(value);
       const animationFrameRef = useRef(null);
@@ -37627,18 +37628,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37663,18 +37670,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37718,6 +37731,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37764,6 +37778,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37813,7 +37831,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37821,7 +37840,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -38168,6 +38191,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/runtime/index.cjs

@@ -4349,7 +4349,8 @@ var init_AnimatedCounter = __esm({
       suffix,
       className
     }) => {
-      const value = typeof rawValue === "number" && !Number.isNaN(rawValue) ? rawValue : 0;
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
       const [displayValue, setDisplayValue] = React115.useState(value);
       const previousValueRef = React115.useRef(value);
       const animationFrameRef = React115.useRef(null);
@@ -37258,18 +37259,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37294,18 +37301,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37349,6 +37362,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = context.useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = React115.useContext(SuspenseConfigContext);
   const contained = React115.useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37395,6 +37409,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37444,7 +37462,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React115.useState(null);
-  const eventBus = context.useUISlots();
+  const slotsBus = context.useUISlots();
+  const eventBus = useEventBus();
   React115.useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37452,7 +37471,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -37799,6 +37822,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/runtime/index.js

@@ -4304,7 +4304,8 @@ var init_AnimatedCounter = __esm({
       suffix,
       className
     }) => {
-      const value = typeof rawValue === "number" && !Number.isNaN(rawValue) ? rawValue : 0;
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
       const [displayValue, setDisplayValue] = useState(value);
       const previousValueRef = useRef(value);
       const animationFrameRef = useRef(null);
@@ -37213,18 +37214,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37249,18 +37256,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37304,6 +37317,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37350,6 +37364,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37399,7 +37417,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37407,7 +37426,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -37754,6 +37777,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.3.1",
+  "version": "4.4.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",