@almadar/ui 5.80.0 → 5.82.0

package/dist/components/core/atoms/Badge.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { type IconInput } from "./Icon";
+import type { Asset } from "@almadar/core";
 export type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
 export type BadgeSize = "sm" | "md" | "lg";
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -15,6 +16,8 @@ export 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/components/core/atoms/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { EventKey, EventPayload } from "@almadar/core";
+import type { Asset, EventKey, EventPayload } from "@almadar/core";
 import { type IconInput } from "./Icon";
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
 export type ButtonSize = "sm" | "md" | "lg";
@@ -17,6 +17,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     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 */

package/dist/components/core/molecules/Tabs.d.ts

@@ -5,7 +5,7 @@
  * Uses theme-aware CSS variables for styling.
  */
 import React from 'react';
-import type { EventEmit } from '@almadar/core';
+import type { Asset, EventEmit } from '@almadar/core';
 import type { IconInput } from '../atoms/index';
 export interface TabItem {
     /**
@@ -24,6 +24,8 @@ export interface TabItem {
     content?: React.ReactNode;
     /** Tab icon — pass either a Lucide component or its registry name (e.g. "file-text") */
     icon?: IconInput;
+    /** Asset image rendered as the tab icon; takes precedence over icon when provided. */
+    iconAsset?: Asset;
     /** Tab badge */
     badge?: string | number;
     /** Disable tab */

package/dist/components/game/2d/atoms/GameCard.d.ts

@@ -5,6 +5,8 @@ export interface GameCardProps {
     cost?: number;
     /** Card art asset */
     art?: Asset;
+    /** Asset rendered as the card border/frame via backgroundImage; falls back to CSS border styling when absent. */
+    frameAsset?: Asset;
     attack?: number;
     defense?: number;
     name?: string;
@@ -20,7 +22,7 @@ export interface GameCardProps {
     }>;
     className?: string;
 }
-export declare function GameCard({ id, cost, art, attack, defense, name, selected, disabled, size, onClick, clickEvent, className, }: GameCardProps): React.JSX.Element;
+export declare function GameCard({ id, cost, art, frameAsset, attack, defense, name, selected, disabled, size, onClick, clickEvent, className, }: GameCardProps): React.JSX.Element;
 export declare namespace GameCard {
     var displayName: string;
 }

package/dist/components/game/3d/index.cjs

@@ -3196,6 +3196,7 @@ var Button = React6__default.default.forwardRef(
     rightIcon,
     icon: iconProp,
     iconRight: iconRightProp,
+    iconAsset,
     action,
     actionPayload,
     label,
@@ -3207,7 +3208,8 @@ var Button = React6__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) {

package/dist/components/game/3d/index.js

@@ -3172,6 +3172,7 @@ var Button = React6.forwardRef(
     rightIcon,
     icon: iconProp,
     iconRight: iconRightProp,
+    iconAsset,
     action,
     actionPayload,
     label,
@@ -3183,7 +3184,8 @@ var Button = React6.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) {