@almadar/ui 2.24.8 → 2.24.9

package/dist/marketing/index.js

@@ -1,4 +1,4 @@
-import React5, { createContext, useCallback, useContext, useState, useRef, useEffect, useId } from 'react';
+import React5, { createContext, useCallback, useState, useRef, useEffect, useContext, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, Check, User } from 'lucide-react';
@@ -3030,7 +3030,8 @@ var variantStyles2 = {
   ].join(" "),
   ghost: [
     "bg-transparent text-muted-foreground",
-    "hover:text-foreground hover:bg-muted",
+    "border border-transparent",
+    "hover:text-primary-foreground hover:bg-primary hover:border-primary",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [
@@ -3507,18 +3508,14 @@ var InstallBox = ({
     /* @__PURE__ */ 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__ */ jsxs(HStack, { gap: "md", align: "center", children: [
+        children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ 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
             }
@@ -3527,10 +3524,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"
             }
           )
         ] })
@@ -4635,6 +4634,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.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] = useState(false);
+    const internalRef = useRef(null);
+    const hasAnimated = useRef(false);
+    const setRef = useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    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;
+    useEffect(() => {
+      if (trigger === "manual" && manualAnimate !== void 0) {
+        setIsAnimated(manualAnimate);
+      }
+    }, [trigger, manualAnimate]);
+    const active = isAnimated;
+    const currentStyle = active ? animatedStyles[animation] : initialStyles[animation];
+    return /* @__PURE__ */ 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] = useState(null);
+  const cache = useRef({});
+  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.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 = useRef(null);
+    const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
+    const resolvedSvg = svgContent ?? fetchedSvg;
+    const prevAnimateRef = useRef(animate);
+    const setRef = React5.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    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]);
+    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]);
+    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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `@keyframes ag-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.85; } }` }),
+      /* @__PURE__ */ 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__ */ 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);
@@ -5650,4 +5932,4 @@ var EdgeDecoration = ({
 };
 EdgeDecoration.displayName = "EdgeDecoration";
 
-export { AnimatedCounter, ArticleSection, Badge, Box, Button, CTABanner, Card, CaseStudyCard, Center, CommunityLinks, ContentSection, Divider, EdgeDecoration, FeatureCard, FeatureGrid, GeometricPattern, GradientDivider, HStack, HeroSection, Icon, InstallBox, MarketingFooter, PatternTile, PricingCard, PricingGrid, PullQuote, ServiceCatalog, ShowcaseCard, SimpleGrid, Spacer, SplitSection, StatsGrid, StepFlow, TagCloud, TeamCard, Typography, VStack, getTileDimensions };
+export { AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Badge, Box, Button, CTABanner, Card, CaseStudyCard, Center, CommunityLinks, ContentSection, Divider, EdgeDecoration, FeatureCard, FeatureGrid, GeometricPattern, GradientDivider, HStack, HeroSection, Icon, InstallBox, MarketingFooter, PatternTile, PricingCard, PricingGrid, PullQuote, ServiceCatalog, ShowcaseCard, SimpleGrid, Spacer, SplitSection, StatsGrid, StepFlow, TagCloud, TeamCard, Typography, VStack, getTileDimensions };