@almadar/ui 5.81.0 → 5.83.0

package/dist/marketing/index.cjs

@@ -3983,6 +3983,7 @@ var Button = React11__default.default.forwardRef(
     rightIcon,
     icon: iconProp,
     iconRight: iconRightProp,
+    iconAsset,
     action,
     actionPayload,
     label,
@@ -3994,7 +3995,8 @@ var Button = React11__default.default.forwardRef(
     const eventBus = useEventBus();
     const leftIconValue = leftIcon || iconProp;
     const rightIconValue = rightIcon || iconRightProp;
-    const resolvedLeftIcon = resolveIconProp(leftIconValue, iconSizeStyles[size]);
+    const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
+    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: px, height: px, style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px }, className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
     const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
     const handleClick = (e) => {
       if (action) {
@@ -4070,13 +4072,14 @@ var sizeStyles2 = {
   lg: "px-3 py-1.5 text-base"
 };
 var Badge = React11__default.default.forwardRef(
-  ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
+  ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
     const iconSizes = {
       sm: "h-icon-default w-icon-default",
       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 ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes[size] }) : null;
+    const iconPx = size === "lg" ? 20 : 16;
+    const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: iconPx, height: iconPx, style: { imageRendering: "pixelated", objectFit: "contain", width: iconPx, height: iconPx }, className: "flex-shrink-0" }) : 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",
       {

package/dist/marketing/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EventKey, EventPayload, AssetUrl } from '@almadar/core';
+import { EventKey, EventPayload, AssetUrl, Asset } from '@almadar/core';
 import { LucideIcon } from 'lucide-react';
 
 /**
@@ -259,6 +259,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon?: IconInput;
     /** Alias for rightIcon */
     iconRight?: IconInput;
+    /** Asset image rendered as the leading icon; takes precedence over icon/leftIcon when provided. */
+    iconAsset?: Asset;
     /** Declarative event name — emits UI:{action} via eventBus on click */
     action?: EventKey;
     /** Payload to include with the action event */
@@ -287,6 +289,8 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     label?: string | number;
     /** Lucide icon component or canonical kebab-case icon name string */
     icon?: IconInput;
+    /** Asset image rendered as the badge icon; takes precedence over icon when provided. */
+    iconAsset?: Asset;
     /** 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"

package/dist/marketing/index.js

@@ -1,6 +1,6 @@
 import React11, { 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X } from 'lucide-react';
 
@@ -3959,6 +3959,7 @@ var Button = React11.forwardRef(
     rightIcon,
     icon: iconProp,
     iconRight: iconRightProp,
+    iconAsset,
     action,
     actionPayload,
     label,
@@ -3970,7 +3971,8 @@ var Button = React11.forwardRef(
     const eventBus = useEventBus();
     const leftIconValue = leftIcon || iconProp;
     const rightIconValue = rightIcon || iconRightProp;
-    const resolvedLeftIcon = resolveIconProp(leftIconValue, iconSizeStyles[size]);
+    const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
+    const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: px, height: px, style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px }, className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
     const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
     const handleClick = (e) => {
       if (action) {
@@ -4046,13 +4048,14 @@ var sizeStyles2 = {
   lg: "px-3 py-1.5 text-base"
 };
 var Badge = React11.forwardRef(
-  ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
+  ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
     const iconSizes = {
       sm: "h-icon-default w-icon-default",
       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 ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes[size] }) : null;
+    const iconPx = size === "lg" ? 20 : 16;
+    const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: iconPx, height: iconPx, style: { imageRendering: "pixelated", objectFit: "contain", width: iconPx, height: iconPx }, className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes[size] }) : null;
     return /* @__PURE__ */ jsxs(
       "span",
       {