@almadar/ui 2.26.0 → 2.27.1

package/dist/marketing/index.cjs

@@ -3531,18 +3531,14 @@ var InstallBox = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
-        className: cn(
-          "bg-foreground",
-          "rounded-md",
-          "border-[length:var(--border-width)] border-border"
-        ),
+        className: "bg-surface rounded-md border-[length:var(--border-width)] border-border",
         padding: "md",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Typography,
             {
               variant: "body2",
-              className: "font-mono flex-1 min-w-0 text-background select-all",
+              className: "font-mono flex-1 min-w-0 select-all",
               truncate: true,
               children: command
             }
@@ -3551,10 +3547,12 @@ var InstallBox = ({
             Button,
             {
               variant: "ghost",
-              size: "md",
+              size: "sm",
+              leftIcon: copied ? "check" : "copy",
               onClick: handleCopy,
-              className: "flex-shrink-0 text-background hover:text-background",
-              children: copied ? "Copied!" : "Copy"
+              className: "flex-shrink-0",
+              "aria-label": copied ? "Copied" : "Copy to clipboard",
+              children: copied ? "Copied" : "Copy"
             }
           )
         ] })
@@ -4659,6 +4657,289 @@ var AnimatedCounter = ({
   ] });
 };
 AnimatedCounter.displayName = "AnimatedCounter";
+var initialStyles = {
+  "fade-up": { opacity: 0, transform: "translateY(24px)" },
+  "fade-down": { opacity: 0, transform: "translateY(-24px)" },
+  "fade-in": { opacity: 0 },
+  "fade-left": { opacity: 0, transform: "translateX(24px)" },
+  "fade-right": { opacity: 0, transform: "translateX(-24px)" },
+  "scale": { opacity: 0, transform: "scale(0.92)" },
+  "scale-up": { opacity: 0, transform: "scale(0.92) translateY(16px)" },
+  "none": {}
+};
+var animatedStyles = {
+  "fade-up": { opacity: 1, transform: "translateY(0)" },
+  "fade-down": { opacity: 1, transform: "translateY(0)" },
+  "fade-in": { opacity: 1 },
+  "fade-left": { opacity: 1, transform: "translateX(0)" },
+  "fade-right": { opacity: 1, transform: "translateX(0)" },
+  "scale": { opacity: 1, transform: "scale(1)" },
+  "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
+  "none": {}
+};
+var AnimatedReveal = React5__default.default.forwardRef(
+  ({
+    trigger = "scroll",
+    animation = "fade-up",
+    duration = 600,
+    delay = 0,
+    threshold = 0.15,
+    once = true,
+    animate: manualAnimate,
+    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
+    children,
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    const [isAnimated, setIsAnimated] = React5.useState(false);
+    const internalRef = React5.useRef(null);
+    const hasAnimated = React5.useRef(false);
+    const setRef = React5.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    React5.useEffect(() => {
+      if (trigger !== "scroll") return;
+      const el = internalRef.current;
+      if (!el) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            if (once && hasAnimated.current) return;
+            hasAnimated.current = true;
+            setIsAnimated(true);
+          } else if (!once) {
+            setIsAnimated(false);
+          }
+        },
+        { threshold }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [trigger, threshold, once]);
+    const handleMouseEnter = trigger === "hover" ? () => setIsAnimated(true) : void 0;
+    const handleMouseLeave = trigger === "hover" ? () => {
+      if (!once || !hasAnimated.current) {
+        hasAnimated.current = true;
+        setIsAnimated(false);
+      }
+    } : void 0;
+    React5.useEffect(() => {
+      if (trigger === "manual" && manualAnimate !== void 0) {
+        setIsAnimated(manualAnimate);
+      }
+    }, [trigger, manualAnimate]);
+    const active = isAnimated;
+    const currentStyle = active ? animatedStyles[animation] : initialStyles[animation];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: setRef,
+        className: cn("will-change-[opacity,transform]", className),
+        style: {
+          ...currentStyle,
+          transitionProperty: "opacity, transform",
+          transitionDuration: `${duration}ms`,
+          transitionDelay: `${delay}ms`,
+          transitionTimingFunction: easing,
+          ...style
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: typeof children === "function" ? children(active) : children
+      }
+    );
+  }
+);
+AnimatedReveal.displayName = "AnimatedReveal";
+function useFetchedSvg(src) {
+  const [svg, setSvg] = React5.useState(null);
+  const cache = React5.useRef({});
+  React5.useEffect(() => {
+    if (!src) {
+      setSvg(null);
+      return;
+    }
+    if (cache.current[src]) {
+      setSvg(cache.current[src]);
+      return;
+    }
+    let cancelled = false;
+    fetch(src).then((res) => {
+      if (!res.ok) throw new Error(`Failed to fetch SVG: ${res.status}`);
+      return res.text();
+    }).then((text) => {
+      if (cancelled) return;
+      cache.current[src] = text;
+      setSvg(text);
+    }).catch(() => {
+      if (!cancelled) setSvg(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+  return svg;
+}
+function applyDrawAnimation(container, animate, duration, delay, easing) {
+  const paths = container.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+  paths.forEach((el) => {
+    if ("getTotalLength" in el && typeof el.getTotalLength === "function") {
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = `${len}`;
+      el.style.strokeDashoffset = animate ? "0" : `${len}`;
+      el.style.transition = `stroke-dashoffset ${duration}ms ${easing} ${delay}ms`;
+    }
+  });
+}
+function applyFillAnimation(container, animate, duration, delay, easing, fillColor) {
+  const paths = container.querySelectorAll("path, circle, ellipse, rect, polygon");
+  paths.forEach((el) => {
+    if ("getTotalLength" in el && typeof el.getTotalLength === "function") {
+      const geom = el;
+      const len = geom.getTotalLength();
+      geom.style.strokeDasharray = `${len}`;
+      geom.style.strokeDashoffset = animate ? "0" : `${len}`;
+      geom.style.transition = `stroke-dashoffset ${duration * 0.6}ms ${easing} ${delay}ms, fill-opacity ${duration * 0.4}ms ${easing} ${delay + duration * 0.6}ms`;
+    }
+    if (fillColor) el.style.fill = fillColor;
+    el.style.fillOpacity = animate ? "1" : "0";
+  });
+}
+function applyPulseAnimation(container, animate, duration) {
+  const svg = container.querySelector("svg");
+  if (!svg) return;
+  if (animate) {
+    svg.style.animation = `ag-pulse ${duration}ms ease-in-out infinite`;
+  } else {
+    svg.style.animation = "none";
+  }
+}
+function applyMorphAnimation(container, animate, duration, delay, easing) {
+  const paths = container.querySelectorAll("path, circle, ellipse, rect, polygon");
+  paths.forEach((el) => {
+    el.style.transition = `all ${duration}ms ${easing} ${delay}ms`;
+    el.style.transform = animate ? "scale(1)" : "scale(0)";
+    el.style.transformOrigin = "center";
+    el.style.opacity = animate ? "1" : "0";
+  });
+}
+var AnimatedGraphic = React5__default.default.forwardRef(
+  ({
+    src,
+    svgContent,
+    animation = "draw",
+    animate = false,
+    duration = 1200,
+    delay = 0,
+    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
+    width,
+    height,
+    strokeColor,
+    fillColor,
+    alt,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const containerRef = React5.useRef(null);
+    const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
+    const resolvedSvg = svgContent ?? fetchedSvg;
+    const prevAnimateRef = React5.useRef(animate);
+    const setRef = React5__default.default.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    React5.useEffect(() => {
+      const el = containerRef.current;
+      if (!el || !strokeColor) return;
+      const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+      paths.forEach((p) => {
+        p.style.stroke = strokeColor;
+      });
+    }, [resolvedSvg, strokeColor]);
+    React5.useEffect(() => {
+      const el = containerRef.current;
+      if (!el || !resolvedSvg) return;
+      if (animation === "draw" || animation === "fill") {
+        const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+        paths.forEach((p) => {
+          if ("getTotalLength" in p && typeof p.getTotalLength === "function") {
+            const len = p.getTotalLength();
+            p.style.strokeDasharray = `${len}`;
+            p.style.strokeDashoffset = `${len}`;
+          }
+          if (animation === "fill") {
+            p.style.fillOpacity = "0";
+          }
+        });
+      }
+      if (animation === "morph") {
+        const paths = el.querySelectorAll("path, circle, ellipse, rect, polygon");
+        paths.forEach((p) => {
+          p.style.transform = "scale(0)";
+          p.style.transformOrigin = "center";
+          p.style.opacity = "0";
+        });
+      }
+    }, [resolvedSvg, animation]);
+    React5.useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const id = requestAnimationFrame(() => {
+        switch (animation) {
+          case "draw":
+            applyDrawAnimation(el, animate, duration, delay, easing);
+            break;
+          case "fill":
+            applyFillAnimation(el, animate, duration, delay, easing, fillColor);
+            break;
+          case "pulse":
+            applyPulseAnimation(el, animate, duration);
+            break;
+          case "morph":
+            applyMorphAnimation(el, animate, duration, delay, easing);
+            break;
+        }
+      });
+      prevAnimateRef.current = animate;
+      return () => cancelAnimationFrame(id);
+    }, [animate, animation, duration, delay, easing, fillColor, resolvedSvg]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes ag-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.85; } }` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: setRef,
+          className: cn("inline-flex items-center justify-center", className),
+          style: { width, height, ...style },
+          role: alt ? "img" : void 0,
+          "aria-label": alt,
+          ...props,
+          children: resolvedSvg ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "w-full h-full [&>svg]:w-full [&>svg]:h-full",
+              dangerouslySetInnerHTML: { __html: resolvedSvg }
+            }
+          ) : children
+        }
+      )
+    ] });
+  }
+);
+AnimatedGraphic.displayName = "AnimatedGraphic";
 var PI = Math.PI;
 function lineIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
   const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
@@ -5675,6 +5956,8 @@ var EdgeDecoration = ({
 EdgeDecoration.displayName = "EdgeDecoration";
 
 exports.AnimatedCounter = AnimatedCounter;
+exports.AnimatedGraphic = AnimatedGraphic;
+exports.AnimatedReveal = AnimatedReveal;
 exports.ArticleSection = ArticleSection;
 exports.Badge = Badge;
 exports.Box = Box;

package/dist/marketing/index.d.cts

@@ -828,6 +828,59 @@ interface AnimatedCounterProps {
 }
 declare const AnimatedCounter: React.FC<AnimatedCounterProps>;
 
+type RevealTrigger = 'scroll' | 'hover' | 'manual';
+type RevealAnimation = 'fade-up' | 'fade-down' | 'fade-in' | 'fade-left' | 'fade-right' | 'scale' | 'scale-up' | 'none';
+interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What triggers the animation */
+    trigger?: RevealTrigger;
+    /** Built-in animation preset */
+    animation?: RevealAnimation;
+    /** Animation duration in ms (default: 600) */
+    duration?: number;
+    /** Delay before animation starts in ms (default: 0) */
+    delay?: number;
+    /** How much of the element must be visible before triggering, 0-1 (default: 0.15) */
+    threshold?: number;
+    /** Animate only the first time the element enters the viewport (default: true) */
+    once?: boolean;
+    /** Manual control: when trigger='manual', set this to true to animate */
+    animate?: boolean;
+    /** Easing function (default: cubic-bezier(0.16, 1, 0.3, 1)) */
+    easing?: string;
+    /** Children: ReactNode or render function receiving animated state */
+    children: React.ReactNode | ((animated: boolean) => React.ReactNode);
+}
+declare const AnimatedReveal: React.ForwardRefExoticComponent<AnimatedRevealProps & React.RefAttributes<HTMLDivElement>>;
+
+type GraphicAnimation = 'draw' | 'fill' | 'pulse' | 'morph';
+interface AnimatedGraphicProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** URL to an SVG file. Fetched and inlined to enable stroke/fill animations. */
+    src?: string;
+    /** Inline SVG string. Takes precedence over src if both provided. */
+    svgContent?: string;
+    /** Animation type applied to SVG paths/shapes */
+    animation?: GraphicAnimation;
+    /** Whether to run the animation (default: false). Controlled externally or via AnimatedReveal. */
+    animate?: boolean;
+    /** Animation duration in ms (default: 1200) */
+    duration?: number;
+    /** Delay before animation starts in ms (default: 0) */
+    delay?: number;
+    /** Easing function (default: cubic-bezier(0.16, 1, 0.3, 1)) */
+    easing?: string;
+    /** Width of the graphic container */
+    width?: string | number;
+    /** Height of the graphic container */
+    height?: string | number;
+    /** Stroke color override for SVG paths */
+    strokeColor?: string;
+    /** Fill color for the 'fill' animation end state */
+    fillColor?: string;
+    /** Alt text for accessibility */
+    alt?: string;
+}
+declare const AnimatedGraphic: React.ForwardRefExoticComponent<AnimatedGraphicProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * PatternTile Atom
  *
@@ -939,4 +992,4 @@ interface EdgeDecorationProps {
 }
 declare const EdgeDecoration: React.FC<EdgeDecorationProps>;
 
-export { AnimatedCounter, type AnimatedCounterProps, ArticleSection, type ArticleSectionProps, Badge, Box, Button, CTABanner, type CTABannerProps, Card, CaseStudyCard, type CaseStudyCardProps, Center, CommunityLinks, type CommunityLinksProps, ContentSection, type ContentSectionProps, Divider, EdgeDecoration, type EdgeDecorationProps, type EdgeSide, type EdgeVariant, FeatureCard, type FeatureCardProps, FeatureGrid, type FeatureGridProps, type FooterLinkColumn, type FooterLinkItem, GeometricPattern, type GeometricPatternProps, GradientDivider, type GradientDividerProps, HStack, HeroSection, type HeroSectionProps, Icon, InstallBox, type InstallBoxProps, MarketingFooter, type MarketingFooterProps, PatternTile, type PatternTileProps, type PatternVariant, PricingCard, type PricingCardProps, PricingGrid, type PricingGridProps, PullQuote, type PullQuoteProps, ServiceCatalog, type ServiceCatalogProps, ShowcaseCard, type ShowcaseCardProps, SimpleGrid, Spacer, SplitSection, type SplitSectionProps, StatsGrid, type StatsGridProps, StepFlow, type StepFlowProps, type StepItemProps, TagCloud, type TagCloudProps, TeamCard, type TeamCardProps, Typography, VStack, getTileDimensions };
+export { AnimatedCounter, type AnimatedCounterProps, AnimatedGraphic, type AnimatedGraphicProps, AnimatedReveal, type AnimatedRevealProps, ArticleSection, type ArticleSectionProps, Badge, Box, Button, CTABanner, type CTABannerProps, Card, CaseStudyCard, type CaseStudyCardProps, Center, CommunityLinks, type CommunityLinksProps, ContentSection, type ContentSectionProps, Divider, EdgeDecoration, type EdgeDecorationProps, type EdgeSide, type EdgeVariant, FeatureCard, type FeatureCardProps, FeatureGrid, type FeatureGridProps, type FooterLinkColumn, type FooterLinkItem, GeometricPattern, type GeometricPatternProps, GradientDivider, type GradientDividerProps, type GraphicAnimation, HStack, HeroSection, type HeroSectionProps, Icon, InstallBox, type InstallBoxProps, MarketingFooter, type MarketingFooterProps, PatternTile, type PatternTileProps, type PatternVariant, PricingCard, type PricingCardProps, PricingGrid, type PricingGridProps, PullQuote, type PullQuoteProps, type RevealAnimation, type RevealTrigger, ServiceCatalog, type ServiceCatalogProps, ShowcaseCard, type ShowcaseCardProps, SimpleGrid, Spacer, SplitSection, type SplitSectionProps, StatsGrid, type StatsGridProps, StepFlow, type StepFlowProps, type StepItemProps, TagCloud, type TagCloudProps, TeamCard, type TeamCardProps, Typography, VStack, getTileDimensions };

package/dist/marketing/index.d.ts

@@ -60,6 +60,10 @@ export { PullQuote } from '../components/molecules/PullQuote';
 export type { PullQuoteProps } from '../components/molecules/PullQuote';
 export { AnimatedCounter } from '../components/molecules/AnimatedCounter';
 export type { AnimatedCounterProps } from '../components/molecules/AnimatedCounter';
+export { AnimatedReveal } from '../components/atoms/AnimatedReveal';
+export type { AnimatedRevealProps, RevealTrigger, RevealAnimation } from '../components/atoms/AnimatedReveal';
+export { AnimatedGraphic } from '../components/atoms/AnimatedGraphic';
+export type { AnimatedGraphicProps, GraphicAnimation } from '../components/atoms/AnimatedGraphic';
 export { PatternTile, getTileDimensions } from '../components/atoms/PatternTile';
 export type { PatternTileProps, PatternVariant } from '../components/atoms/PatternTile';
 export { GeometricPattern } from '../components/molecules/GeometricPattern';