@almadar/ui 5.25.1 → 5.26.0

package/dist/marketing/index.cjs

@@ -3679,6 +3679,14 @@ function resolveIconForFamily(name, family) {
     }
   }
 }
+var colorTokenClasses = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error",
+  muted: "text-muted-foreground"
+};
 var iconAliases = {
   "close": LucideIcons2__namespace.X,
   "trash": LucideIcons2__namespace.Trash2,
@@ -3748,10 +3756,11 @@ var Icon = ({
     ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
     ...style
   };
+  const resolvedColor = color ? color in colorTokenClasses ? colorTokenClasses[color] : color : "text-current";
   const composedClassName = cn(
     sizeClasses[size],
     animationClasses[animation],
-    color ? color : "text-current",
+    resolvedColor,
     className
   );
   if (directIcon) {
@@ -5095,7 +5104,6 @@ var Avatar = ({
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
   const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
-  const hasImage = !!src && !imgFailed;
   const hasIcon = !!IconComponent;
   const hasInitials = !!initials && !(hasIcon && !providedInitials);
   const getInitialsBackground = () => "bg-primary text-primary-foreground";
@@ -5121,15 +5129,13 @@ var Avatar = ({
         onClick: isClickable ? handleClick : void 0,
         role: isClickable ? "button" : void 0,
         tabIndex: isClickable ? 0 : void 0,
-        children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
+        children: src && !imgFailed ? /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
             src,
             alt: alt || "Avatar",
             className: "w-full h-full object-cover",
-            onError: () => {
-              setImgFailed(true);
-            }
+            onError: () => setImgFailed(true)
           }
         ) : hasInitials ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -5340,11 +5346,19 @@ var MarketingFooter = ({
   );
 };
 MarketingFooter.displayName = "MarketingFooter";
+var colorTokenVars = {
+  primary: "var(--color-primary)",
+  secondary: "var(--color-secondary)",
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)",
+  muted: "var(--color-muted)"
+};
 var GradientDivider = ({
   color,
   className
 }) => {
-  const centerColor = color ?? "var(--color-primary)";
+  const centerColor = color ? color in colorTokenVars ? colorTokenVars[color] : color : "var(--color-primary)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
@@ -6585,6 +6599,14 @@ var GeometricPattern = ({
   );
 };
 GeometricPattern.displayName = "GeometricPattern";
+var colorTokenVars2 = {
+  primary: "var(--color-primary)",
+  secondary: "var(--color-secondary)",
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)",
+  muted: "var(--color-muted)"
+};
 function ArchSVG({
   facing,
   w,
@@ -6715,13 +6737,14 @@ var EdgeDecoration = ({
   variant = "arch",
   side = "both",
   opacity = 0.15,
-  color = "var(--color-primary)",
+  color = "primary",
   strokeWidth = 0.5,
   width = 15,
   className
 }) => {
   const id = React8.useId();
   const Variant = VARIANT_MAP2[variant];
+  const resolvedColor = color in colorTokenVars2 ? colorTokenVars2[color] : color;
   const sides = side === "both" ? ["left", "right"] : [side];
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sides.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -6744,7 +6767,7 @@ var EdgeDecoration = ({
           facing: s,
           w: 200,
           h: 600,
-          color,
+          color: resolvedColor,
           strokeWidth
         }
       )

package/dist/marketing/index.d.cts

@@ -219,6 +219,29 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 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
+ * over a bare `string` for any `color` or `variant` prop.
+ */
+type ColorToken = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted';
+/**
+ * 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;
+};
+
 /**
  * Icon Atom Component
  *
@@ -235,6 +258,7 @@ 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), OR a canonical
@@ -246,8 +270,8 @@ interface IconProps {
     name?: string;
     /** Size of the icon */
     size?: IconSize;
-    /** Color class (Tailwind color class) or 'inherit' for theme default */
-    color?: string;
+    /** Semantic palette token or an arbitrary Tailwind color class. */
+    color?: ColorToken | string;
     /** Animation type */
     animation?: IconAnimation;
     /** Additional CSS classes */
@@ -387,20 +411,6 @@ 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
  *
@@ -822,8 +832,8 @@ declare const MarketingFooter: React.FC<MarketingFooterProps>;
  */
 
 interface GradientDividerProps {
-    /** Override the center color (CSS value). Defaults to var(--color-primary). */
-    color?: string;
+    /** Semantic palette token or a raw CSS color value. Defaults to 'primary'. */
+    color?: ColorToken | string;
     /** Additional class names */
     className?: string;
 }
@@ -1021,8 +1031,8 @@ interface EdgeDecorationProps {
     side?: EdgeSide;
     /** Overall opacity (default: 0.15) */
     opacity?: number;
-    /** Stroke color */
-    color?: string;
+    /** Semantic palette token or a raw CSS color value for the stroke. */
+    color?: ColorToken | string;
     /** Stroke width */
     strokeWidth?: number;
     /** Width of the decoration area as percentage of container (default: 15) */

package/dist/marketing/index.js

@@ -3652,6 +3652,14 @@ function resolveIconForFamily(name, family) {
     }
   }
 }
+var colorTokenClasses = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error",
+  muted: "text-muted-foreground"
+};
 var iconAliases = {
   "close": LucideIcons2.X,
   "trash": LucideIcons2.Trash2,
@@ -3721,10 +3729,11 @@ var Icon = ({
     ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
     ...style
   };
+  const resolvedColor = color ? color in colorTokenClasses ? colorTokenClasses[color] : color : "text-current";
   const composedClassName = cn(
     sizeClasses[size],
     animationClasses[animation],
-    color ? color : "text-current",
+    resolvedColor,
     className
   );
   if (directIcon) {
@@ -5068,7 +5077,6 @@ var Avatar = ({
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
   const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
-  const hasImage = !!src && !imgFailed;
   const hasIcon = !!IconComponent;
   const hasInitials = !!initials && !(hasIcon && !providedInitials);
   const getInitialsBackground = () => "bg-primary text-primary-foreground";
@@ -5094,15 +5102,13 @@ var Avatar = ({
         onClick: isClickable ? handleClick : void 0,
         role: isClickable ? "button" : void 0,
         tabIndex: isClickable ? 0 : void 0,
-        children: hasImage ? /* @__PURE__ */ jsx(
+        children: src && !imgFailed ? /* @__PURE__ */ jsx(
           "img",
           {
             src,
             alt: alt || "Avatar",
             className: "w-full h-full object-cover",
-            onError: () => {
-              setImgFailed(true);
-            }
+            onError: () => setImgFailed(true)
           }
         ) : hasInitials ? /* @__PURE__ */ jsx(
           "div",
@@ -5313,11 +5319,19 @@ var MarketingFooter = ({
   );
 };
 MarketingFooter.displayName = "MarketingFooter";
+var colorTokenVars = {
+  primary: "var(--color-primary)",
+  secondary: "var(--color-secondary)",
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)",
+  muted: "var(--color-muted)"
+};
 var GradientDivider = ({
   color,
   className
 }) => {
-  const centerColor = color ?? "var(--color-primary)";
+  const centerColor = color ? color in colorTokenVars ? colorTokenVars[color] : color : "var(--color-primary)";
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -6558,6 +6572,14 @@ var GeometricPattern = ({
   );
 };
 GeometricPattern.displayName = "GeometricPattern";
+var colorTokenVars2 = {
+  primary: "var(--color-primary)",
+  secondary: "var(--color-secondary)",
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)",
+  muted: "var(--color-muted)"
+};
 function ArchSVG({
   facing,
   w,
@@ -6688,13 +6710,14 @@ var EdgeDecoration = ({
   variant = "arch",
   side = "both",
   opacity = 0.15,
-  color = "var(--color-primary)",
+  color = "primary",
   strokeWidth = 0.5,
   width = 15,
   className
 }) => {
   const id = useId();
   const Variant = VARIANT_MAP2[variant];
+  const resolvedColor = color in colorTokenVars2 ? colorTokenVars2[color] : color;
   const sides = side === "both" ? ["left", "right"] : [side];
   return /* @__PURE__ */ jsx(Fragment, { children: sides.map((s) => /* @__PURE__ */ jsx(
     "svg",
@@ -6717,7 +6740,7 @@ var EdgeDecoration = ({
           facing: s,
           w: 200,
           h: 600,
-          color,
+          color: resolvedColor,
           strokeWidth
         }
       )