@almadar/ui 5.16.4 → 5.17.1

package/dist/marketing/index.d.cts

@@ -236,8 +236,12 @@ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttri
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IconAnimation = 'spin' | 'pulse' | 'none';
 interface IconProps {
-    /** Lucide icon component (preferred for type-safe usage) */
-    icon?: LucideIcon;
+    /**
+     * 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 name as string (resolved from iconMap) */
     name?: string;
     /** Size of the icon */
@@ -383,6 +387,20 @@ interface ContentSectionProps {
 }
 declare const ContentSection: React.ForwardRefExoticComponent<ContentSectionProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * A labelled link/CTA used by marketing molecules (HeroSection, CTABanner,
+ * PricingCard) for their primary/secondary call-to-action props.
+ */
+type LinkAction = {
+    label: string;
+    href: string;
+};
+/** An image with its required alt text. */
+type ImageSource = {
+    src: string;
+    alt: string;
+};
+
 /**
  * HeroSection Molecule Component
  *
@@ -397,19 +415,10 @@ interface HeroSectionProps {
     title: string;
     titleAccent?: string;
     subtitle: string;
-    primaryAction?: {
-        label: string;
-        href: string;
-    };
-    secondaryAction?: {
-        label: string;
-        href: string;
-    };
+    primaryAction?: LinkAction;
+    secondaryAction?: LinkAction;
     installCommand?: string;
-    image?: {
-        src: string;
-        alt: string;
-    };
+    image?: ImageSource;
     imagePosition?: 'below' | 'right' | 'background';
     background?: 'dark' | 'gradient' | 'subtle';
     align?: 'center' | 'left';
@@ -434,15 +443,9 @@ interface CTABannerProps {
     /** Supporting text below the title */
     subtitle?: string;
     /** Primary action button config */
-    primaryAction?: {
-        label: string;
-        href: string;
-    };
+    primaryAction?: LinkAction;
     /** Secondary action button config */
-    secondaryAction?: {
-        label: string;
-        href: string;
-    };
+    secondaryAction?: LinkAction;
     /** Background style */
     background?: CTABannerBackground;
     /** Content alignment */
@@ -510,10 +513,7 @@ interface PricingCardProps {
     price: string;
     description?: string;
     features: string[];
-    action: {
-        label: string;
-        href: string;
-    };
+    action: LinkAction;
     highlighted?: boolean;
     badge?: string;
     className?: string;
@@ -544,10 +544,7 @@ interface SplitSectionProps {
     title: string;
     description: string | React.ReactNode;
     bullets?: string[];
-    image?: {
-        src: string;
-        alt: string;
-    };
+    image?: ImageSource;
     imagePosition?: 'left' | 'right';
     background?: 'default' | 'alt';
     children?: React.ReactNode;
@@ -601,11 +598,12 @@ declare const StepFlow: React.FC<StepFlowProps>;
  * Uses StatDisplay internally when available for consistent styling.
  */
 
+interface StatItem {
+    value: string;
+    label: string;
+}
 interface StatsGridProps {
-    stats: {
-        value: string;
-        label: string;
-    }[];
+    stats: StatItem[];
     columns?: 2 | 3 | 4 | 6;
     className?: string;
 }
@@ -637,19 +635,22 @@ declare const TagCloud: React.FC<TagCloudProps>;
  * Composes VStack, HStack, Typography, Button, and Icon atoms.
  */
 
+interface GithubLink {
+    url: string;
+    stars?: number;
+}
+interface DiscordLink {
+    url: string;
+    members?: number;
+}
+interface TwitterLink {
+    url: string;
+    followers?: number;
+}
 interface CommunityLinksProps {
-    github?: {
-        url: string;
-        stars?: number;
-    };
-    discord?: {
-        url: string;
-        members?: number;
-    };
-    twitter?: {
-        url: string;
-        followers?: number;
-    };
+    github?: GithubLink;
+    discord?: DiscordLink;
+    twitter?: TwitterLink;
     heading?: string;
     subtitle?: string;
     className?: string;
@@ -686,10 +687,7 @@ declare const ServiceCatalog: React.FC<ServiceCatalogProps>;
 interface ShowcaseCardProps {
     title: string;
     description?: string;
-    image: {
-        src: string;
-        alt: string;
-    };
+    image: ImageSource;
     href?: string;
     badge?: string;
     accentColor?: string;
@@ -803,14 +801,15 @@ interface FooterLinkColumn {
     title: string;
     items: FooterLinkItem[];
 }
+interface FooterLogo {
+    src: string;
+    alt: string;
+    href?: string;
+}
 interface MarketingFooterProps {
     columns: FooterLinkColumn[];
     copyright?: string;
-    logo?: {
-        src: string;
-        alt: string;
-        href?: string;
-    };
+    logo?: FooterLogo;
     className?: string;
 }
 declare const MarketingFooter: React.FC<MarketingFooterProps>;

package/dist/marketing/index.js

@@ -1,7 +1,7 @@
 import React8, { 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 * as LucideIcons from 'lucide-react';
+import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X } from 'lucide-react';
 import * as PhosphorIcons from '@phosphor-icons/react';
 import * as TablerIcons from '@tabler/icons-react';
@@ -3040,26 +3040,26 @@ function kebabToPascal(name) {
   }).join("");
 }
 var lucideAliases = {
-  close: LucideIcons.X,
-  trash: LucideIcons.Trash2,
-  loader: LucideIcons.Loader2,
-  stop: LucideIcons.Square,
-  volume: LucideIcons.Volume2,
-  "volume-off": LucideIcons.VolumeX,
-  refresh: LucideIcons.RefreshCw,
-  share: LucideIcons.Share2,
-  "sort-asc": LucideIcons.ArrowUpNarrowWide,
-  "sort-desc": LucideIcons.ArrowDownNarrowWide
+  close: LucideIcons2.X,
+  trash: LucideIcons2.Trash2,
+  loader: LucideIcons2.Loader2,
+  stop: LucideIcons2.Square,
+  volume: LucideIcons2.Volume2,
+  "volume-off": LucideIcons2.VolumeX,
+  refresh: LucideIcons2.RefreshCw,
+  share: LucideIcons2.Share2,
+  "sort-asc": LucideIcons2.ArrowUpNarrowWide,
+  "sort-desc": LucideIcons2.ArrowDownNarrowWide
 };
 function resolveLucide(name) {
   if (lucideAliases[name]) return lucideAliases[name];
   const pascal = kebabToPascal(name);
-  const lucideMap = LucideIcons;
+  const lucideMap = LucideIcons2;
   const direct = lucideMap[pascal];
   if (direct && typeof direct === "object") return direct;
   const asIs = lucideMap[name];
   if (asIs && typeof asIs === "object") return asIs;
-  return LucideIcons.HelpCircle;
+  return LucideIcons2.HelpCircle;
 }
 var phosphorAliases = {
   // lucide name → phosphor PascalCase name
@@ -3652,6 +3652,41 @@ function resolveIconForFamily(name, family) {
     }
   }
 }
+var iconAliases = {
+  "close": LucideIcons2.X,
+  "trash": LucideIcons2.Trash2,
+  "loader": LucideIcons2.Loader2,
+  "stop": LucideIcons2.Square,
+  "volume": LucideIcons2.Volume2,
+  "volume-off": LucideIcons2.VolumeX,
+  "refresh": LucideIcons2.RefreshCw,
+  "share": LucideIcons2.Share2,
+  "sort-asc": LucideIcons2.ArrowUpNarrowWide,
+  "sort-desc": LucideIcons2.ArrowDownNarrowWide
+};
+function kebabToPascal2(name) {
+  return name.split("-").map((part) => {
+    if (/^\d+$/.test(part)) return part;
+    return part.charAt(0).toUpperCase() + part.slice(1);
+  }).join("");
+}
+var resolvedCache = /* @__PURE__ */ new Map();
+function resolveIcon(name) {
+  const cached = resolvedCache.get(name);
+  if (cached) return cached;
+  const resolved = doResolve(name);
+  resolvedCache.set(name, resolved);
+  return resolved;
+}
+function doResolve(name) {
+  if (iconAliases[name]) return iconAliases[name];
+  const pascalName = kebabToPascal2(name);
+  const directLookup = LucideIcons2[pascalName];
+  if (directLookup && typeof directLookup === "object") return directLookup;
+  const asIs = LucideIcons2[name];
+  if (asIs && typeof asIs === "object") return asIs;
+  return LucideIcons2.HelpCircle;
+}
 var sizeClasses = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -3674,11 +3709,13 @@ var Icon = ({
   strokeWidth,
   style
 }) => {
+  const directIcon = typeof icon === "string" ? void 0 : icon;
+  const effectiveName = typeof icon === "string" ? icon : name;
   const family = useIconFamily();
   const RenderedComponent = React8.useMemo(() => {
-    if (icon) return null;
-    return name ? resolveIconForFamily(name, family) : null;
-  }, [icon, name, family]);
+    if (directIcon) return null;
+    return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
+  }, [directIcon, effectiveName, family]);
   const effectiveStrokeWidth = strokeWidth ?? void 0;
   const inlineStyle = {
     ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
@@ -3690,8 +3727,8 @@ var Icon = ({
     color ? color : "text-current",
     className
   );
-  if (icon) {
-    const Direct = icon;
+  if (directIcon) {
+    const Direct = directIcon;
     return /* @__PURE__ */ jsx(
       Direct,
       {
@@ -3711,7 +3748,7 @@ var Icon = ({
       }
     );
   }
-  const Fallback = LucideIcons.HelpCircle;
+  const Fallback = LucideIcons2.HelpCircle;
   return /* @__PURE__ */ jsx(
     Fallback,
     {
@@ -5015,7 +5052,7 @@ var Avatar = ({
   alt,
   name,
   initials: providedInitials,
-  icon: IconComponent,
+  icon: iconProp,
   size = "md",
   status,
   badge,
@@ -5026,6 +5063,7 @@ var Avatar = ({
 }) => {
   const eventBus = useEventBus();
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
+  const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
   const hasImage = !!src;
   const hasInitials = !!initials;
   const hasIcon = !!IconComponent;