@almadar/ui 5.26.1 → 5.27.0

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

@@ -4,15 +4,15 @@
  * A versatile avatar component supporting images, initials, icons, and status indicators.
  */
 import React from "react";
-import type { EventKey, EventPayload } from "@almadar/core";
-import type { LucideIcon } from "lucide-react";
+import type { AssetUrl, EventKey, EventPayload } from "@almadar/core";
+import { type IconInput } from "./Icon";
 export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type AvatarStatus = "online" | "offline" | "away" | "busy";
 export interface AvatarProps {
     /**
      * Image source URL
      */
-    src?: string;
+    src?: AssetUrl;
     /**
      * Alt text for the image
      */
@@ -31,7 +31,7 @@ export interface AvatarProps {
      * directly, or a canonical kebab-case icon name string (resolved via
      * `resolveIcon`) so trait/factory authors can pass an icon by name.
      */
-    icon?: LucideIcon | string;
+    icon?: IconInput;
     /**
      * Size of the avatar
      * @default 'md'

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { type IconInput } from "./Icon";
 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> {
@@ -12,8 +13,8 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
      *  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;
+    /** 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"

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { EventKey, EventPayload } from "@almadar/core";
-import { type LucideIcon } from "lucide-react";
+import { type IconInput } from "./Icon";
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
 export type ButtonSize = "sm" | "md" | "lg";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -9,14 +9,14 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     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;
+    /** 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?: React.ReactNode | LucideIcon | string;
+    icon?: IconInput;
     /** Alias for rightIcon */
-    iconRight?: React.ReactNode | LucideIcon | string;
+    iconRight?: IconInput;
     /** Declarative event name — emits UI:{action} via eventBus on click */
     action?: EventKey;
     /** Payload to include with the action event */

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { EventKey } from "@almadar/core";
 export type CardShadow = "none" | "sm" | "md" | "lg";
 /**
  * Layer 2 visual treatment for the card pattern — orthogonal to the semantic
@@ -20,6 +21,8 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     look?: CardLook;
     /** Card content */
     children?: React.ReactNode;
+    /** Declarative event key emitted on click for trait dispatch */
+    action?: EventKey;
 }
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,6 @@
 import React from "react";
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+import type { EventKey } from "@almadar/core";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** Whether the checkbox is checked */
@@ -7,5 +8,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /** Default checked state (uncontrolled) */
     defaultChecked?: boolean;
     label?: string;
+    /** onChange handler or declarative event key for trait dispatch */
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | EventKey;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { EventEmit } from "@almadar/core";
+import { type IconInput } from "./Icon";
 export type FilterPillVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";
 export type FilterPillSize = "sm" | "md" | "lg";
 export interface FilterPillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onClick"> {
@@ -9,8 +10,8 @@ export interface FilterPillProps extends Omit<React.HTMLAttributes<HTMLSpanEleme
     size?: FilterPillSize;
     /** Pill label text (alternative to children for schema-driven rendering). */
     label?: string | number;
-    /** Optional icon name (Lucide icon string) or React node */
-    icon?: React.ReactNode;
+    /** Lucide icon component or canonical kebab-case icon name string */
+    icon?: IconInput;
     /** Called when the user clicks the remove (×) button */
     onRemove?: () => void;
     /** Disable the remove button (renders without × control) */

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

@@ -17,6 +17,15 @@ import type { ColorToken } from './types';
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type IconAnimation = 'spin' | 'pulse' | 'none';
 export type { ColorToken };
+/**
+ * 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`).
+ */
+export type IconInput = LucideIcon | string;
 /**
  * Resolve an icon name to a Lucide icon component.
  * Supports all 1500+ Lucide icons via dynamic PascalCase lookup.
@@ -29,7 +38,7 @@ export interface IconProps {
      * 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 */

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { EventKey } from "@almadar/core";
-import { type LucideIcon } from "lucide-react";
+import { type IconInput } from "./Icon";
 export interface SelectOption {
     value: string;
     label: string;
@@ -19,20 +19,19 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     /** Input type - supports 'select' and 'textarea' in addition to standard types */
     inputType?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "datetime-local" | "time" | "checkbox" | "select" | "textarea";
     error?: string;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    /** Lucide icon component for left side (convenience prop), or a canonical
-     *  kebab-case icon name string (resolved via `resolveIcon`). */
-    icon?: LucideIcon | string;
+    leftIcon?: IconInput;
+    rightIcon?: IconInput;
+    /** Lucide icon component or canonical kebab-case icon name string for left side */
+    icon?: IconInput;
     /** Show clear button when input has value */
     clearable?: boolean;
-    /** Callback when clear button is clicked */
-    onClear?: () => void;
+    /** Callback or declarative event key when clear button is clicked */
+    onClear?: (() => void) | EventKey;
     /** Options for select type */
     options?: SelectOption[];
     /** Rows for textarea type */
     rows?: number;
-    /** onChange handler - accepts events from input, select, or textarea */
-    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+    /** onChange handler or declarative event key for trait dispatch */
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | EventKey;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>>;

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

@@ -5,7 +5,7 @@ export interface SelectOption {
     label: string;
     disabled?: boolean;
 }
-export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children" | "onChange"> {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** Select options */
@@ -18,5 +18,7 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
     action?: EventKey;
     /** Error message */
     error?: string;
+    /** onChange handler or declarative event key for trait dispatch */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement> | EventKey;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { EventKey } from "@almadar/core";
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** Placeholder text */
@@ -11,5 +11,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     action?: EventKey;
     /** Error message */
     error?: string;
+    /** onChange handler or declarative event key for trait dispatch */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement> | EventKey;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -13,7 +13,7 @@ export { Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, } from ".
 export { Box, type BoxProps, type BoxPadding, type BoxMargin, type BoxBg, type BoxRounded, type BoxShadow, } from "./Box";
 export { Center, type CenterProps } from "./Center";
 export { Divider, type DividerProps, type DividerOrientation } from "./Divider";
-export { Icon, type IconProps, type IconSize, type IconAnimation, } from "./Icon";
+export { Icon, type IconProps, type IconSize, type IconAnimation, type IconInput, } from "./Icon";
 export { ProgressBar, type ProgressBarProps, type ProgressBarVariant, type ProgressBarColor, } from "./ProgressBar";
 export { Radio, type RadioProps } from "./Radio";
 export { Sparkline, type SparklineProps, type SparklineColor } from "./Sparkline";

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

@@ -1,6 +1,7 @@
 /**
  * Cross-cutting atom-level prop shapes shared across the design system.
  */
+import type { AssetUrl } from "@almadar/core";
 /**
  * Canonical semantic color palette.  Values are the Tailwind / CSS-var token
  * names that every component in the design system understands.  Prefer this
@@ -29,7 +30,7 @@ export type LinkAction = {
 };
 /** An image with its required alt text. */
 export type ImageSource = {
-    src: string;
+    src: AssetUrl;
     alt: string;
 };
 /** A 2D point in canvas/layout coordinates. */

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

@@ -5,7 +5,7 @@
  * Uses Button, Icon, and Typography atoms.
  */
 import React from "react";
-import type { LucideIcon } from "lucide-react";
+import type { IconInput } from "../atoms";
 export interface BreadcrumbItem {
     /**
      * Item label
@@ -22,7 +22,7 @@ export interface BreadcrumbItem {
     /**
      * Item icon (canonical kebab-case name or LucideIcon component)
      */
-    icon?: LucideIcon | string;
+    icon?: IconInput;
     /**
      * Click handler (if href not provided)
      */
@@ -42,7 +42,7 @@ export interface BreadcrumbProps {
     /**
      * Separator icon (canonical kebab-case name or LucideIcon component)
      */
-    separator?: LucideIcon | string;
+    separator?: IconInput;
     /**
      * Maximum items to show (truncates with ellipsis)
      */

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

@@ -7,14 +7,15 @@
  * @generated by Orbital Compiler
  */
 import React from "react";
-import type { EventEmit, EventKey, EventPayload } from "@almadar/core";
+import type { AssetUrl, EventEmit, EventKey, EventPayload } from "@almadar/core";
+import type { IconInput } from "../atoms";
 export interface CardAction {
     label: string;
     onClick?: () => void;
     /** Event name to emit when clicked (for trait state machine integration) */
     event?: string;
     variant?: "default" | "primary" | "danger";
-    icon?: string;
+    icon?: IconInput;
     disabled?: boolean;
 }
 export interface CardProps {
@@ -23,7 +24,7 @@ export interface CardProps {
     /** Card subtitle or description */
     subtitle?: string;
     /** Image URL to display at top of card */
-    image?: string;
+    image?: AssetUrl;
     /** Action buttons to display in card footer */
     actions?: CardAction[];
     /** Card content */

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

@@ -6,12 +6,12 @@
  * Pure UI molecule with no entity binding.
  */
 import React from 'react';
-import type { EventEmit } from '@almadar/core';
+import type { AssetUrl, EventEmit } from '@almadar/core';
 /** Default shape for carousel slide items when no generic is provided. */
 export interface CarouselItem {
     id?: string;
     title?: string;
-    image?: string;
+    image?: AssetUrl;
 }
 export interface CarouselProps<T = CarouselItem> {
     /** Array of items to display as slides */

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

@@ -12,6 +12,7 @@
  */
 import React from 'react';
 import type { EntityRow, EventKey } from '@almadar/core';
+import type { IconInput } from '../atoms';
 import { type DataDndProps } from './useDataDnd';
 import type { UiError } from '../atoms/types';
 export interface DataGridField {
@@ -19,8 +20,8 @@ export interface DataGridField {
     name: string;
     /** Display label (auto-generated from name if omitted) */
     label?: string;
-    /** Lucide icon name to show beside the field */
-    icon?: string;
+    /** Lucide icon name or component to show beside the field */
+    icon?: IconInput;
     /** Rendering variant: 'h3' for title, 'body' for text, 'caption' for small,
      *  'badge' for status badge, 'progress' for progress display */
     variant?: 'h3' | 'h4' | 'body' | 'caption' | 'badge' | 'small' | 'progress';
@@ -42,8 +43,8 @@ export interface DataGridItemAction {
     label: string;
     /** Event name to emit (dispatched as UI:{event} with { row: itemData }) */
     event: EventKey;
-    /** Lucide icon name */
-    icon?: string;
+    /** Lucide icon name or component */
+    icon?: IconInput;
     /** Button variant */
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
 }

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

@@ -12,6 +12,7 @@
  */
 import React from 'react';
 import type { EntityRow, EventKey } from "@almadar/core";
+import type { IconInput } from '../atoms';
 import { type DataDndProps } from './useDataDnd';
 import type { UiError } from '../atoms/types';
 export interface DataListField {
@@ -19,8 +20,8 @@ export interface DataListField {
     name: string;
     /** Display label (auto-generated from name if omitted) */
     label?: string;
-    /** Lucide icon name to show beside the field */
-    icon?: string;
+    /** Lucide icon name or component to show beside the field */
+    icon?: IconInput;
     /** Rendering variant: 'h3'/'h4' for title, 'body' for text, 'caption' for small,
      *  'badge' for status badge, 'progress' for progress bar */
     variant?: 'h3' | 'h4' | 'body' | 'caption' | 'badge' | 'small' | 'progress';
@@ -32,16 +33,16 @@ export interface DataListItemAction {
     label: string;
     /** Event name to emit (dispatched as UI:{event} with { id, row: itemData }) */
     event: EventKey;
-    /** Lucide icon name */
-    icon?: string;
+    /** Lucide icon name or component */
+    icon?: IconInput;
     /** Button variant */
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
 }
 export interface DataListSwipeAction {
     /** Button label */
     label: string;
-    /** Lucide icon name */
-    icon?: string;
+    /** Lucide icon name or component */
+    icon?: IconInput;
     /** Button variant */
     variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
 }

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

@@ -11,6 +11,7 @@
  * - className for external styling
  */
 import React from "react";
+import type { AssetUrl } from "@almadar/core";
 import type { UiError } from '../atoms/types';
 export type DocumentType = "pdf" | "text" | "html" | "markdown";
 export interface DocumentAction {
@@ -21,7 +22,7 @@ export interface DocumentAction {
 }
 export interface DocumentItem {
     label: string;
-    src?: string;
+    src?: AssetUrl;
     content?: string;
     documentType?: DocumentType;
 }
@@ -29,7 +30,7 @@ export interface DocumentViewerProps {
     /** Document title */
     title?: string;
     /** Document URL (for PDF/external documents) */
-    src?: string;
+    src?: AssetUrl;
     /** Document content (for text/html/markdown) */
     content?: string;
     /** Document type */

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { EventEmit } from "@almadar/core";
-import type { LucideIcon } from "lucide-react";
+import type { IconInput } from "../atoms";
 export type EmptyStateLook = "illustrated" | "icon-only" | "text-only" | "mascot";
 export interface EmptyStateProps {
     /**
@@ -8,7 +8,7 @@ export interface EmptyStateProps {
      * - A Lucide icon component (LucideIcon)
      * - A string icon name (e.g., "check-circle", "x-circle")
      */
-    icon?: LucideIcon | string;
+    icon?: IconInput;
     /** Primary text to display - use title or message (message is alias for backwards compat) */
     title?: string;
     /** Alias for title - used by schema patterns */

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

@@ -10,8 +10,8 @@
  * any other clickable surface uses.
  */
 import React from "react";
-import type { LucideIcon } from "lucide-react";
 import type { EventKey, EventPayload } from "@almadar/core";
+import type { IconInput } from "../atoms";
 export interface FloatingAction {
     /**
      * Action ID
@@ -22,9 +22,9 @@ export interface FloatingAction {
      */
     label: string;
     /**
-     * Action icon
+     * Action icon — Lucide icon name or component
      */
-    icon: LucideIcon;
+    icon: IconInput;
     /**
      * Action click handler
      */
@@ -53,9 +53,9 @@ export interface FloatingActionButtonProps {
      */
     actions?: FloatingAction[];
     /**
-     * Icon name (resolves to a Lucide icon by PascalCase / kebab-case lookup).
+     * Icon: a canonical icon name string (resolved by Button) or a Lucide component.
      */
-    icon?: string;
+    icon?: IconInput;
     /**
      * Optional direct click handler. Runs after the action emit when both are
      * present.

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

@@ -5,6 +5,7 @@
  * Provides consistent styling and interaction for section headers.
  */
 import React from "react";
+import type { IconInput } from "../atoms";
 export interface FormSectionHeaderProps {
     /** Section title */
     title: string;
@@ -18,8 +19,8 @@ export interface FormSectionHeaderProps {
     badge?: string;
     /** Badge variant */
     badgeVariant?: "default" | "primary" | "success" | "warning" | "danger";
-    /** Icon name to show before title */
-    icon?: string;
+    /** Lucide icon name or component to show before title */
+    icon?: IconInput;
     /** Whether section has validation errors */
     hasErrors?: boolean;
     /** Whether section is complete */

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

@@ -5,19 +5,20 @@
  * Styled to match the main Layout component's mobile header.
  */
 import React from "react";
-import type { LucideIcon } from "lucide-react";
+import type { AssetUrl } from "@almadar/core";
+import type { IconInput } from "../atoms";
 import type { UiError } from '../atoms/types';
 export type HeaderLook = "hero" | "compact-bar" | "breadcrumb" | "contextual" | "editorial-banner";
 export interface HeaderNavigationItem {
     label: string;
     href?: string;
     onClick?: () => void;
-    icon?: LucideIcon;
+    icon?: IconInput;
     badge?: string | number;
     active?: boolean;
 }
 export interface HeaderUserAvatar {
-    src?: string;
+    src?: AssetUrl;
     alt?: string;
     initials?: string;
 }
@@ -29,7 +30,7 @@ export interface HeaderProps {
     /**
      * Logo image source
      */
-    logoSrc?: string;
+    logoSrc?: AssetUrl;
     /**
      * Brand/App name
      */

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

@@ -1,6 +1,7 @@
 import React from "react";
+import type { AssetUrl } from "@almadar/core";
 export interface LightboxImage {
-    src?: string;
+    src?: AssetUrl;
     alt?: string;
     caption?: string;
 }

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

@@ -5,14 +5,14 @@
  * Uses theme-aware CSS variables for styling.
  */
 import React from "react";
-import type { LucideIcon } from "lucide-react";
+import type { IconInput } from "../atoms";
 export interface MenuItem {
     /** Item ID (auto-generated from label if not provided) */
     id?: string;
     /** Item label */
     label: string;
-    /** Item icon (LucideIcon or string name) */
-    icon?: LucideIcon | string;
+    /** Item icon (Lucide icon name or component) */
+    icon?: IconInput;
     /** Item badge */
     badge?: string | number;
     /** Disable item */

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

@@ -5,7 +5,7 @@
  * Uses Menu, ButtonGroup molecules and Button, Icon, Badge, Typography, Divider atoms.
  */
 import React from 'react';
-import type { LucideIcon } from 'lucide-react';
+import type { IconInput } from '../atoms';
 import type { UiError } from '../atoms/types';
 export interface NavigationItem {
     /**
@@ -19,7 +19,7 @@ export interface NavigationItem {
     /**
      * Item icon
      */
-    icon?: LucideIcon;
+    icon?: IconInput;
     /**
      * Item badge
      */

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { EventEmit } from "@almadar/core";
-import { LucideIcon } from "lucide-react";
+import type { IconInput } from "../atoms";
 import type { UiError } from '../atoms/types';
 export interface PageBreadcrumb {
     label: string;
@@ -18,7 +18,7 @@ export interface SchemaAction {
     /** Event to dispatch via event bus (for trait state machine integration) */
     event?: string;
     variant?: "primary" | "secondary" | "ghost" | "danger";
-    icon?: LucideIcon;
+    icon?: IconInput;
     loading?: boolean;
     disabled?: boolean;
 }

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

@@ -10,16 +10,16 @@
  * - logoClickEvent — emitted when logo/brand area clicked
  */
 import React from 'react';
-import type { EventEmit } from '@almadar/core';
-import type { LucideIcon } from 'lucide-react';
+import type { AssetUrl, EventEmit } from '@almadar/core';
+import type { IconInput } from '../atoms';
 import type { UiError } from '../atoms/types';
 export interface SidebarItem {
     /** Item ID */
     id: string;
     /** Item label */
     label: string;
-    /** Item icon */
-    icon?: LucideIcon;
+    /** Item icon — Lucide icon name or component */
+    icon?: IconInput;
     /** Item badge */
     badge?: string | number;
     /** Item href */
@@ -43,7 +43,7 @@ export interface SidebarProps {
     /** Logo/Brand content - can be a ReactNode or logo config */
     logo?: React.ReactNode;
     /** Logo image source */
-    logoSrc?: string;
+    logoSrc?: AssetUrl;
     /** Brand/App name */
     brandName?: string;
     /** Navigation items */

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

@@ -6,6 +6,7 @@
  * No entity prop, no data fetching, no hooks beyond icon resolution.
  */
 import React from 'react';
+import type { IconInput } from '../atoms';
 import type { UiError } from '../atoms/types';
 export type StatDisplayLook = 'elevated' | 'flat' | 'progress-backed' | 'gauge' | 'sparkline';
 export interface StatDisplayProps {
@@ -31,8 +32,8 @@ export interface StatDisplayProps {
     prefix?: string;
     /** Suffix appended to the formatted value (e.g. " /mo", " ms"). */
     suffix?: string;
-    /** Lucide icon name or React node */
-    icon?: React.ReactNode;
+    /** Lucide icon name or component */
+    icon?: IconInput;
     /** Icon background color class */
     iconBg?: string;
     /** Icon color class */