@almadar/ui 5.26.2 → 5.27.0

package/dist/marketing/index.cjs

@@ -3976,7 +3976,7 @@ var Badge = React8__default.default.forwardRef(
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes[size] }) : icon;
+    const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes[size] }) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
@@ -4079,8 +4079,15 @@ var Card = React8__default.default.forwardRef(
     shadow,
     look = "elevated",
     children,
+    action,
+    onClick,
     ...props
   }, ref) => {
+    const eventBus = useEventBus();
+    const handleClick = action ? (e) => {
+      eventBus.emit(`UI:${action}`, {});
+      onClick?.(e);
+    } : onClick;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -4094,6 +4101,7 @@ var Card = React8__default.default.forwardRef(
           shadow && shadowStyles2[shadow],
           className
         ),
+        onClick: handleClick,
         ...props,
         children: [
           (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
@@ -4594,17 +4602,15 @@ var FeatureCard = ({
 }) => {
   const renderIcon = () => {
     if (!icon) return null;
-    if (typeof icon === "string") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Icon,
-        {
-          name: icon,
-          size: iconSizeMap[size],
-          className: "text-accent"
-        }
-      );
-    }
-    return icon;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Icon,
+      {
+        icon: typeof icon === "string" ? void 0 : icon,
+        name: typeof icon === "string" ? icon : void 0,
+        size: iconSizeMap[size],
+        className: "text-accent"
+      }
+    );
   };
   const handleLinkClick = () => {
     if (href) {
@@ -4846,7 +4852,15 @@ var StepCircle = ({ step, index }) => {
           "flex items-center justify-center",
           "bg-primary text-primary-foreground"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: step.icon, size: "sm", className: "text-primary-foreground" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            icon: typeof step.icon === "string" ? void 0 : step.icon,
+            name: typeof step.icon === "string" ? step.icon : void 0,
+            size: "sm",
+            className: "text-primary-foreground"
+          }
+        )
       }
     );
   }

package/dist/marketing/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EventKey, EventPayload } from '@almadar/core';
+import { EventKey, EventPayload, AssetUrl } from '@almadar/core';
 import { LucideIcon } from 'lucide-react';
 
 /**
@@ -167,61 +167,10 @@ interface TypographyProps {
 }
 declare const Typography: React.FC<TypographyProps>;
 
-type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
-type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Additional CSS classes applied to the root element. */
-    className?: string;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    isLoading?: boolean;
-    /** Left icon as ReactNode, Lucide component, or string name (e.g. "plus", "trash") */
-    leftIcon?: React.ReactNode | LucideIcon | string;
-    /** Right icon as ReactNode, Lucide component, or string name */
-    rightIcon?: React.ReactNode | LucideIcon | string;
-    /** Alias for leftIcon */
-    icon?: React.ReactNode | LucideIcon | string;
-    /** Alias for rightIcon */
-    iconRight?: React.ReactNode | LucideIcon | string;
-    /** Declarative event name — emits UI:{action} via eventBus on click */
-    action?: EventKey;
-    /** Payload to include with the action event */
-    actionPayload?: EventPayload;
-    /** Button label text (alternative to children for schema-driven rendering) */
-    label?: string;
-    /** Disable the button (greys out, blocks click events) */
-    disabled?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-
-type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
-type BadgeSize = "sm" | "md" | "lg";
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** Additional CSS classes applied to the root element. */
-    className?: string;
-    variant?: BadgeVariant;
-    size?: BadgeSize;
-    /** Numeric count or amount to display in badge */
-    amount?: number;
-    /** Badge label text (alternative to children for schema-driven rendering).
-     *  Numeric values are auto-coerced to string for rendering — common case
-     *  is unread counts, error counts, status codes, etc. */
-    label?: string | number;
-    /** Icon name (Lucide icon string) or React node */
-    icon?: React.ReactNode;
-    /** When set, renders a small X button on the right of the badge that
-     *  invokes this handler — turns the badge into a removable chip.
-     *  Used by the TagInput molecule and other "list of removable values"
-     *  surfaces. */
-    onRemove?: () => void;
-    /** Accessible label for the remove button. Defaults to "Remove". */
-    removeLabel?: string;
-}
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-
 /**
  * Cross-cutting atom-level prop shapes shared across the design system.
  */
+
 /**
  * Canonical semantic color palette.  Values are the Tailwind / CSS-var token
  * names that every component in the design system understands.  Prefer this
@@ -238,7 +187,7 @@ type LinkAction = {
 };
 /** An image with its required alt text. */
 type ImageSource = {
-    src: string;
+    src: AssetUrl;
     alt: string;
 };
 
@@ -259,13 +208,22 @@ type ImageSource = {
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IconAnimation = 'spin' | 'pulse' | 'none';
 
+/**
+ * Canonical icon-input type: a Lucide component reference OR a canonical
+ * kebab-case icon name string. The single source of truth for every
+ * icon-bearing prop across `@almadar/ui` — pattern-sync's parser maps this
+ * union to the `icon` config type, so the factory inspector renders an
+ * IconPicker and a string name resolves via `resolveIcon`. Never declare an
+ * icon prop as `React.ReactNode` (it collapses to a non-editable `node`).
+ */
+type IconInput = LucideIcon | string;
 interface IconProps {
     /**
      * Lucide icon component (preferred for type-safe usage), OR a canonical
      * kebab-case icon name string — a string is treated exactly like `name` so
      * trait/factory authors can pass an icon by name through the `icon` prop.
      */
-    icon?: LucideIcon | string;
+    icon?: IconInput;
     /** Icon name as string (resolved from iconMap) */
     name?: string;
     /** Size of the icon */
@@ -283,6 +241,58 @@ interface IconProps {
 }
 declare const Icon: React.FC<IconProps>;
 
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    /** Left icon: a Lucide component or a canonical icon name string (e.g. "plus", "trash"). */
+    leftIcon?: IconInput;
+    /** Right icon: a Lucide component or a canonical icon name string. */
+    rightIcon?: IconInput;
+    /** Alias for leftIcon */
+    icon?: IconInput;
+    /** Alias for rightIcon */
+    iconRight?: IconInput;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: EventKey;
+    /** Payload to include with the action event */
+    actionPayload?: EventPayload;
+    /** Button label text (alternative to children for schema-driven rendering) */
+    label?: string;
+    /** Disable the button (greys out, blocks click events) */
+    disabled?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Numeric count or amount to display in badge */
+    amount?: number;
+    /** Badge label text (alternative to children for schema-driven rendering).
+     *  Numeric values are auto-coerced to string for rendering — common case
+     *  is unread counts, error counts, status codes, etc. */
+    label?: string | number;
+    /** Lucide icon component or canonical kebab-case icon name string */
+    icon?: IconInput;
+    /** When set, renders a small X button on the right of the badge that
+     *  invokes this handler — turns the badge into a removable chip.
+     *  Used by the TagInput molecule and other "list of removable values"
+     *  surfaces. */
+    onRemove?: () => void;
+    /** Accessible label for the remove button. Defaults to "Remove". */
+    removeLabel?: string;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
 type CardShadow = "none" | "sm" | "md" | "lg";
 /**
  * Layer 2 visual treatment for the card pattern — orthogonal to the semantic
@@ -304,6 +314,8 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     look?: CardLook;
     /** Card content */
     children?: React.ReactNode;
+    /** Declarative event key emitted on click for trait dispatch */
+    action?: EventKey;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -473,8 +485,7 @@ declare const CTABanner: React.FC<CTABannerProps>;
  */
 
 interface FeatureCardProps {
-    /** Icon name (Lucide string) or ReactNode */
-    icon?: string | React.ReactNode;
+    icon?: IconInput;
     /** Feature title */
     title: string;
     /** Feature description */
@@ -590,7 +601,7 @@ interface StepItemProps {
     number?: number;
     title: string;
     description: string;
-    icon?: string;
+    icon?: IconInput;
 }
 interface StepFlowProps {
     steps: StepItemProps[];
@@ -717,7 +728,7 @@ interface TeamCardProps {
     nameAr?: string;
     role: string;
     bio: string;
-    avatar?: string | {
+    avatar?: AssetUrl | {
         initials: string;
     };
     className?: string;
@@ -812,7 +823,7 @@ interface FooterLinkColumn {
     items: FooterLinkItem[];
 }
 interface FooterLogo {
-    src: string;
+    src: AssetUrl;
     alt: string;
     href?: string;
 }
@@ -904,7 +915,7 @@ interface AnimatedGraphicProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** URL to an SVG file. Fetched and inlined to enable stroke/fill animations. */
-    src?: string;
+    src?: AssetUrl;
     /** Inline SVG string. Takes precedence over src if both provided. */
     svgContent?: string;
     /** Animation type applied to SVG paths/shapes */

package/dist/marketing/index.js

@@ -3949,7 +3949,7 @@ var Badge = React8.forwardRef(
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes[size] }) : icon;
+    const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes[size] }) : null;
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -4052,8 +4052,15 @@ var Card = React8.forwardRef(
     shadow,
     look = "elevated",
     children,
+    action,
+    onClick,
     ...props
   }, ref) => {
+    const eventBus = useEventBus();
+    const handleClick = action ? (e) => {
+      eventBus.emit(`UI:${action}`, {});
+      onClick?.(e);
+    } : onClick;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -4067,6 +4074,7 @@ var Card = React8.forwardRef(
           shadow && shadowStyles2[shadow],
           className
         ),
+        onClick: handleClick,
         ...props,
         children: [
           (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
@@ -4567,17 +4575,15 @@ var FeatureCard = ({
 }) => {
   const renderIcon = () => {
     if (!icon) return null;
-    if (typeof icon === "string") {
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          name: icon,
-          size: iconSizeMap[size],
-          className: "text-accent"
-        }
-      );
-    }
-    return icon;
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: typeof icon === "string" ? void 0 : icon,
+        name: typeof icon === "string" ? icon : void 0,
+        size: iconSizeMap[size],
+        className: "text-accent"
+      }
+    );
   };
   const handleLinkClick = () => {
     if (href) {
@@ -4819,7 +4825,15 @@ var StepCircle = ({ step, index }) => {
           "flex items-center justify-center",
           "bg-primary text-primary-foreground"
         ),
-        children: /* @__PURE__ */ jsx(Icon, { name: step.icon, size: "sm", className: "text-primary-foreground" })
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: typeof step.icon === "string" ? void 0 : step.icon,
+            name: typeof step.icon === "string" ? step.icon : void 0,
+            size: "sm",
+            className: "text-primary-foreground"
+          }
+        )
       }
     );
   }