@hanzo/ui 5.3.19 → 5.3.22

package/dist/animation/animated-background.mjs

@@ -1 +1,418 @@
-import {useMemo,useState,useEffect}from'react';import {motion,useMotionValue,useTransform}from'motion/react';import {cn}from'@/lib/utils';import {jsx,jsxs}from'react/jsx-runtime';var x=Object.defineProperty;var s=(n,o)=>x(n,"name",{value:o,configurable:true});function R(){let[n,o]=useState(false);return useEffect(()=>{if(typeof window>"u")return;let i=window.matchMedia("(prefers-reduced-motion: reduce)");o(i.matches);let r=s(d=>{o(d.matches);},"handleChange");return i.addEventListener("change",r),()=>i.removeEventListener("change",r)},[]),n}s(R,"usePrefersReducedMotion");function E({colors:n,speed:o,intensity:i,paused:r}){let d=n.length>=2?n:["#ff6b6b","#4ecdc4","#45b7d1","#96ceb4"];return jsx(motion.div,{className:"absolute inset-0",style:{background:`linear-gradient(-45deg, ${d.join(", ")})`,backgroundSize:"400% 400%"},animate:r?{}:{x:["0%","100%","0%"]},transition:{duration:10/o,repeat:1/0,ease:"linear"}})}s(E,"GradientBackground");function I({colors:n,speed:o,elementCount:i,intensity:r,paused:d}){let a=useMemo(()=>Array.from({length:i},(e,u)=>({id:u,color:n[u%n.length],size:Math.random()*200+100,x:Math.random()*100,y:Math.random()*100,duration:(Math.random()*10+10)/o})),[i,n,o]);return jsx("div",{className:"absolute inset-0 overflow-hidden",children:a.map(e=>jsx(motion.div,{className:"absolute rounded-full",style:{background:`radial-gradient(circle, ${e.color}40, transparent)`,width:e.size*r,height:e.size*r,filter:"blur(40px)"},initial:{x:`${e.x}%`,y:`${e.y}%`},animate:d?{}:{x:[`${e.x}%`,`${(e.x+50)%100}%`,`${e.x}%`],y:[`${e.y}%`,`${(e.y+30)%100}%`,`${e.y}%`],scale:[1,1.2,1]},transition:{duration:e.duration,repeat:1/0,ease:"easeInOut"}},e.id))})}s(I,"BlobBackground");function L({colors:n,speed:o,intensity:i,paused:r}){let d=n[0]||"#4ecdc4";return jsx("div",{className:"absolute inset-0 overflow-hidden",children:[0,1,2].map(a=>jsx(motion.div,{className:"absolute inset-0",style:{background:`radial-gradient(ellipse 100% 50% at center ${50+a*20}%, ${d}${Math.round(30*i).toString(16).padStart(2,"0")}, transparent)`},animate:r?{}:{y:[a*10,a*10+20*i,a*10]},transition:{duration:(3+a)/o,repeat:1/0,ease:"easeInOut"}},a))})}s(L,"WaveBackground");function S({colors:n,speed:o,intensity:i,paused:r}){let d=n.length>=4?n.slice(0,4):["#ff6b6b","#4ecdc4","#45b7d1","#96ceb4"];return jsx("div",{className:"absolute inset-0 overflow-hidden",children:d.map((a,e)=>jsx(motion.div,{className:"absolute rounded-full",style:{background:`radial-gradient(circle, ${a}60, transparent)`,width:`${60+e*20}%`,height:`${60+e*20}%`,filter:"blur(60px)",mixBlendMode:"multiply"},initial:{x:`${25+e*15}%`,y:`${25+e*15}%`},animate:r?{}:{x:[`${25+e*15}%`,`${35+e*15}%`,`${25+e*15}%`],y:[`${25+e*15}%`,`${15+e*15}%`,`${25+e*15}%`],rotate:[0,180,360]},transition:{duration:(8+e*2)/o,repeat:1/0,ease:"easeInOut"}},e))})}s(S,"MeshBackground");function W({layers:n,speed:o,paused:i}){let r=useMotionValue(0),d=useMotionValue(0);return useEffect(()=>{let a=s(e=>{let{clientX:u,clientY:l}=e,{innerWidth:p,innerHeight:y}=window;r.set((u/p-.5)*100),d.set((l/y-.5)*100);},"handleMouseMove");return window.addEventListener("mousemove",a),()=>window.removeEventListener("mousemove",a)},[r,d]),jsx("div",{className:"absolute inset-0 overflow-hidden",children:n.map((a,e)=>{let u=useTransform(r,[-50,50],[-a.speed*10,a.speed*10]),l=useTransform(d,[-50,50],[-a.speed*10,a.speed*10]);return jsx(motion.div,{className:"absolute inset-0",style:{background:`radial-gradient(circle, ${a.color}, transparent)`,opacity:a.opacity,x:i?0:u,y:i?0:l}},e)})})}s(W,"ParallaxBackground");function G({colors:n,speed:o,elementCount:i,intensity:r,paused:d}){let a=useMemo(()=>Array.from({length:i},(e,u)=>({id:u,color:n[u%n.length],size:Math.random()*4+2,x:Math.random()*100,y:Math.random()*100,duration:(Math.random()*20+20)/o,delay:Math.random()*5})),[i,n,o]);return jsx("div",{className:"absolute inset-0 overflow-hidden",children:a.map(e=>jsx(motion.div,{className:"absolute rounded-full",style:{backgroundColor:e.color,width:e.size*r,height:e.size*r,opacity:.6},initial:{x:`${e.x}%`,y:`${e.y}%`},animate:d?{}:{y:[`${e.y}%`,`${e.y-100}%`],opacity:[0,.6,0]},transition:{duration:e.duration,repeat:1/0,delay:e.delay,ease:"linear"}},e.id))})}s(G,"ParticlesBackground");function c({animation:n="gradient",speed:o=1,colors:i=["#ff6b6b","#4ecdc4","#45b7d1","#96ceb4","#ffeaa7"],paused:r=false,className:d,style:a,children:e,intensity:u=1,blur:l=false,blurAmount:p=20,opacity:y=1,elementCount:h=5,width:v="100%",height:$="100%",fullscreen:b=false,parallaxLayers:A=[{speed:.5,color:"#ff6b6b50",opacity:.3},{speed:1,color:"#4ecdc450",opacity:.4},{speed:1.5,color:"#45b7d150",opacity:.3}]}){let C=R(),k=r||C,N=useMemo(()=>({width:b?"100vw":v,height:b?"100vh":$,opacity:y,filter:l?`blur(${p}px)`:void 0,...a}),[b,v,$,y,l,p,a]),P=s(()=>{let f={colors:i,speed:o,intensity:u,paused:k};switch(n){case "blob":return jsx(I,{...f,elementCount:h});case "wave":return jsx(L,{...f});case "mesh":return jsx(S,{...f});case "parallax":return jsx(W,{layers:A,speed:o,paused:k});case "particles":return jsx(G,{...f,elementCount:h});default:return jsx(E,{...f})}},"renderAnimation");return jsxs("div",{className:cn("relative overflow-hidden",b&&"fixed inset-0 z-0",d),style:N,children:[P(),e&&jsx("div",{className:"relative z-10 h-full w-full",children:e})]})}s(c,"AnimatedBackground");var V={CalmGradient:s(n=>jsx(c,{animation:"gradient",colors:["#667eea","#764ba2","#f093fb","#f5576c"],speed:.5,...n}),"CalmGradient"),OceanWaves:s(n=>jsx(c,{animation:"wave",colors:["#0093E9","#80D0C7"],...n}),"OceanWaves"),FloatingBubbles:s(n=>jsx(c,{animation:"blob",colors:["#667eea","#764ba2","#f093fb"],elementCount:8,...n}),"FloatingBubbles"),CosmicMesh:s(n=>jsx(c,{animation:"mesh",colors:["#667eea","#764ba2","#f093fb","#f5576c"],...n}),"CosmicMesh"),Starfield:s(n=>jsx(c,{animation:"particles",colors:["#ffffff","#f0f0f0","#e0e0e0"],elementCount:50,intensity:.5,...n}),"Starfield"),Aurora:s(n=>jsx(c,{animation:"parallax",parallaxLayers:[{speed:.3,color:"#00ff8850",opacity:.4},{speed:.6,color:"#0080ff50",opacity:.3},{speed:.9,color:"#8000ff50",opacity:.3},{speed:1.2,color:"#ff008050",opacity:.2}],...n}),"Aurora")},j=c;export{c as AnimatedBackground,V as AnimatedBackgroundPresets,j as default};
+"use client";
+import { useMemo, useState, useEffect } from 'react';
+import { motion, useMotionValue, useTransform } from 'motion/react';
+import { cn } from '@/lib/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = /* @__PURE__ */ __name((event) => {
+      setPrefersReducedMotion(event.matches);
+    }, "handleChange");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+__name(usePrefersReducedMotion, "usePrefersReducedMotion");
+function GradientBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const gradientColors = colors.length >= 2 ? colors : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `linear-gradient(-45deg, ${gradientColors.join(", ")})`,
+        backgroundSize: "400% 400%"
+      },
+      animate: paused ? {} : {
+        x: ["0%", "100%", "0%"]
+      },
+      transition: {
+        duration: 10 / speed,
+        repeat: Infinity,
+        ease: "linear"
+      }
+    }
+  );
+}
+__name(GradientBackground, "GradientBackground");
+function BlobBackground({
+  colors,
+  speed,
+  elementCount,
+  intensity,
+  paused
+}) {
+  const blobs = useMemo(
+    () => Array.from({ length: elementCount }, (_, i) => ({
+      id: i,
+      color: colors[i % colors.length],
+      size: Math.random() * 200 + 100,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      duration: (Math.random() * 10 + 10) / speed
+    })),
+    [elementCount, colors, speed]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: blobs.map((blob) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        background: `radial-gradient(circle, ${blob.color}40, transparent)`,
+        width: blob.size * intensity,
+        height: blob.size * intensity,
+        filter: "blur(40px)"
+      },
+      initial: {
+        x: `${blob.x}%`,
+        y: `${blob.y}%`
+      },
+      animate: paused ? {} : {
+        x: [`${blob.x}%`, `${(blob.x + 50) % 100}%`, `${blob.x}%`],
+        y: [`${blob.y}%`, `${(blob.y + 30) % 100}%`, `${blob.y}%`],
+        scale: [1, 1.2, 1]
+      },
+      transition: {
+        duration: blob.duration,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    blob.id
+  )) });
+}
+__name(BlobBackground, "BlobBackground");
+function WaveBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const waveColor = colors[0] || "#4ecdc4";
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `radial-gradient(ellipse 100% 50% at center ${50 + index * 20}%, ${waveColor}${Math.round(
+          30 * intensity
+        ).toString(16).padStart(2, "0")}, transparent)`
+      },
+      animate: paused ? {} : {
+        y: [index * 10, index * 10 + 20 * intensity, index * 10]
+      },
+      transition: {
+        duration: (3 + index) / speed,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    index
+  )) });
+}
+__name(WaveBackground, "WaveBackground");
+function MeshBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const meshColors = colors.length >= 4 ? colors.slice(0, 4) : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: meshColors.map((color, index) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        background: `radial-gradient(circle, ${color}60, transparent)`,
+        width: `${60 + index * 20}%`,
+        height: `${60 + index * 20}%`,
+        filter: "blur(60px)",
+        mixBlendMode: "multiply"
+      },
+      initial: {
+        x: `${25 + index * 15}%`,
+        y: `${25 + index * 15}%`
+      },
+      animate: paused ? {} : {
+        x: [
+          `${25 + index * 15}%`,
+          `${35 + index * 15}%`,
+          `${25 + index * 15}%`
+        ],
+        y: [
+          `${25 + index * 15}%`,
+          `${15 + index * 15}%`,
+          `${25 + index * 15}%`
+        ],
+        rotate: [0, 180, 360]
+      },
+      transition: {
+        duration: (8 + index * 2) / speed,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    index
+  )) });
+}
+__name(MeshBackground, "MeshBackground");
+function ParallaxBackground({
+  layers,
+  speed,
+  paused
+}) {
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  useEffect(() => {
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      const { clientX, clientY } = e;
+      const { innerWidth, innerHeight } = window;
+      mouseX.set((clientX / innerWidth - 0.5) * 100);
+      mouseY.set((clientY / innerHeight - 0.5) * 100);
+    }, "handleMouseMove");
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, [mouseX, mouseY]);
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: layers.map((layer, index) => {
+    const x = useTransform(
+      mouseX,
+      [-50, 50],
+      [-layer.speed * 10, layer.speed * 10]
+    );
+    const y = useTransform(
+      mouseY,
+      [-50, 50],
+      [-layer.speed * 10, layer.speed * 10]
+    );
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "absolute inset-0",
+        style: {
+          background: `radial-gradient(circle, ${layer.color}, transparent)`,
+          opacity: layer.opacity,
+          x: paused ? 0 : x,
+          y: paused ? 0 : y
+        }
+      },
+      index
+    );
+  }) });
+}
+__name(ParallaxBackground, "ParallaxBackground");
+function ParticlesBackground({
+  colors,
+  speed,
+  elementCount,
+  intensity,
+  paused
+}) {
+  const particles = useMemo(
+    () => Array.from({ length: elementCount }, (_, i) => ({
+      id: i,
+      color: colors[i % colors.length],
+      size: Math.random() * 4 + 2,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      duration: (Math.random() * 20 + 20) / speed,
+      delay: Math.random() * 5
+    })),
+    [elementCount, colors, speed]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: particles.map((particle) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        backgroundColor: particle.color,
+        width: particle.size * intensity,
+        height: particle.size * intensity,
+        opacity: 0.6
+      },
+      initial: {
+        x: `${particle.x}%`,
+        y: `${particle.y}%`
+      },
+      animate: paused ? {} : {
+        y: [`${particle.y}%`, `${particle.y - 100}%`],
+        opacity: [0, 0.6, 0]
+      },
+      transition: {
+        duration: particle.duration,
+        repeat: Infinity,
+        delay: particle.delay,
+        ease: "linear"
+      }
+    },
+    particle.id
+  )) });
+}
+__name(ParticlesBackground, "ParticlesBackground");
+function AnimatedBackground({
+  animation = "gradient",
+  speed = 1,
+  colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"],
+  paused = false,
+  className,
+  style,
+  children,
+  intensity = 1,
+  blur = false,
+  blurAmount = 20,
+  opacity = 1,
+  elementCount = 5,
+  width = "100%",
+  height = "100%",
+  fullscreen = false,
+  parallaxLayers = [
+    { speed: 0.5, color: "#ff6b6b50", opacity: 0.3 },
+    { speed: 1, color: "#4ecdc450", opacity: 0.4 },
+    { speed: 1.5, color: "#45b7d150", opacity: 0.3 }
+  ]
+}) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const isAnimationPaused = paused || prefersReducedMotion;
+  const containerStyle = useMemo(
+    () => ({
+      width: fullscreen ? "100vw" : width,
+      height: fullscreen ? "100vh" : height,
+      opacity,
+      filter: blur ? `blur(${blurAmount}px)` : void 0,
+      ...style
+    }),
+    [fullscreen, width, height, opacity, blur, blurAmount, style]
+  );
+  const renderAnimation = /* @__PURE__ */ __name(() => {
+    const props = { colors, speed, intensity, paused: isAnimationPaused };
+    switch (animation) {
+      case "blob":
+        return /* @__PURE__ */ jsx(BlobBackground, { ...props, elementCount });
+      case "wave":
+        return /* @__PURE__ */ jsx(WaveBackground, { ...props });
+      case "mesh":
+        return /* @__PURE__ */ jsx(MeshBackground, { ...props });
+      case "parallax":
+        return /* @__PURE__ */ jsx(
+          ParallaxBackground,
+          {
+            layers: parallaxLayers,
+            speed,
+            paused: isAnimationPaused
+          }
+        );
+      case "particles":
+        return /* @__PURE__ */ jsx(ParticlesBackground, { ...props, elementCount });
+      default:
+        return /* @__PURE__ */ jsx(GradientBackground, { ...props });
+    }
+  }, "renderAnimation");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden",
+        fullscreen && "fixed inset-0 z-0",
+        className
+      ),
+      style: containerStyle,
+      children: [
+        renderAnimation(),
+        children && /* @__PURE__ */ jsx("div", { className: "relative z-10 h-full w-full", children })
+      ]
+    }
+  );
+}
+__name(AnimatedBackground, "AnimatedBackground");
+var AnimatedBackgroundPresets = {
+  /**
+   * Calm gradient flow
+   */
+  CalmGradient: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
+    AnimatedBackground,
+    {
+      animation: "gradient",
+      colors: ["#667eea", "#764ba2", "#f093fb", "#f5576c"],
+      speed: 0.5,
+      ...props
+    }
+  ), "CalmGradient"),
+  /**
+   * Ocean waves
+   */
+  OceanWaves: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
+    AnimatedBackground,
+    {
+      animation: "wave",
+      colors: ["#0093E9", "#80D0C7"],
+      ...props
+    }
+  ), "OceanWaves"),
+  /**
+   * Floating bubbles
+   */
+  FloatingBubbles: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
+    AnimatedBackground,
+    {
+      animation: "blob",
+      colors: ["#667eea", "#764ba2", "#f093fb"],
+      elementCount: 8,
+      ...props
+    }
+  ), "FloatingBubbles"),
+  /**
+   * Cosmic mesh
+   */
+  CosmicMesh: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
+    AnimatedBackground,
+    {
+      animation: "mesh",
+      colors: ["#667eea", "#764ba2", "#f093fb", "#f5576c"],
+      ...props
+    }
+  ), "CosmicMesh"),
+  /**
+   * Starfield particles
+   */
+  Starfield: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
+    AnimatedBackground,
+    {
+      animation: "particles",
+      colors: ["#ffffff", "#f0f0f0", "#e0e0e0"],
+      elementCount: 50,
+      intensity: 0.5,
+      ...props
+    }
+  ), "Starfield"),
+  /**
+   * Aurora parallax
+   */
+  Aurora: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(
+    AnimatedBackground,
+    {
+      animation: "parallax",
+      parallaxLayers: [
+        { speed: 0.3, color: "#00ff8850", opacity: 0.4 },
+        { speed: 0.6, color: "#0080ff50", opacity: 0.3 },
+        { speed: 0.9, color: "#8000ff50", opacity: 0.3 },
+        { speed: 1.2, color: "#ff008050", opacity: 0.2 }
+      ],
+      ...props
+    }
+  ), "Aurora")
+};
+var background_default = AnimatedBackground;
+
+export { AnimatedBackground, AnimatedBackgroundPresets, background_default as default };

package/dist/animation/animated-beam.js

@@ -1 +1,119 @@
-'use strict';var t=require('react'),react=require('motion/react'),utils=require('@hanzo/ui/lib/utils'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var t__namespace=/*#__PURE__*/_interopNamespace(t);var k=Object.defineProperty;var b=(i,s)=>k(i,"name",{value:s,configurable:true});var O=t__namespace.forwardRef(({className:i,duration:s=3,delay:w=0,pathColor:y="gray",pathWidth:p=2,gradientStartColor:a="#18CCFC",gradientStopColor:c="#6344F5",containerRef:m,fromRef:d,toRef:l,...B},C)=>{let[u,G]=t__namespace.useState("");return t__namespace.useEffect(()=>{if(!m?.current||!d?.current||!l?.current)return;let f=b(()=>{let n=m.current.getBoundingClientRect(),o=d.current.getBoundingClientRect(),r=l.current.getBoundingClientRect(),h=o.left-n.left+o.width/2,g=o.top-n.top+o.height/2,R=r.left-n.left+r.width/2,$=r.top-n.top+r.height/2,L=(h+R)/2,v=Math.min(g,$)-50;G(`M ${h} ${g} Q ${L} ${v} ${R} ${$}`);},"updatePath");return f(),window.addEventListener("resize",f),()=>window.removeEventListener("resize",f)},[m,d,l]),jsxRuntime.jsxs("svg",{ref:C,className:utils.cn("pointer-events-none absolute inset-0",i),...B,children:[jsxRuntime.jsx("path",{d:u,stroke:y,strokeWidth:p,fill:"none",strokeOpacity:.2}),jsxRuntime.jsx(react.motion.path,{d:u,stroke:`url(#gradient-${a}-${c})`,strokeWidth:p,fill:"none",initial:{pathLength:0},animate:{pathLength:1},transition:{duration:s,delay:w,ease:"easeInOut",repeat:1/0}}),jsxRuntime.jsx("defs",{children:jsxRuntime.jsxs("linearGradient",{id:`gradient-${a}-${c}`,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[jsxRuntime.jsx("stop",{offset:"0%",stopColor:a}),jsxRuntime.jsx("stop",{offset:"100%",stopColor:c})]})})]})});O.displayName="AnimatedBeam";exports.AnimatedBeam=O;
+"use client";
+'use strict';
+
+var React = require('react');
+var react = require('motion/react');
+var utils = require('@hanzo/ui/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var AnimatedBeam = React__namespace.forwardRef(
+  ({
+    className,
+    duration = 3,
+    delay = 0,
+    pathColor = "gray",
+    pathWidth = 2,
+    gradientStartColor = "#18CCFC",
+    gradientStopColor = "#6344F5",
+    containerRef,
+    fromRef,
+    toRef,
+    ...props
+  }, ref) => {
+    const [pathD, setPathD] = React__namespace.useState("");
+    React__namespace.useEffect(() => {
+      if (!containerRef?.current || !fromRef?.current || !toRef?.current) return;
+      const updatePath = /* @__PURE__ */ __name(() => {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const fromRect = fromRef.current.getBoundingClientRect();
+        const toRect = toRef.current.getBoundingClientRect();
+        const fromX = fromRect.left - containerRect.left + fromRect.width / 2;
+        const fromY = fromRect.top - containerRect.top + fromRect.height / 2;
+        const toX = toRect.left - containerRect.left + toRect.width / 2;
+        const toY = toRect.top - containerRect.top + toRect.height / 2;
+        const controlX = (fromX + toX) / 2;
+        const controlY = Math.min(fromY, toY) - 50;
+        setPathD(`M ${fromX} ${fromY} Q ${controlX} ${controlY} ${toX} ${toY}`);
+      }, "updatePath");
+      updatePath();
+      window.addEventListener("resize", updatePath);
+      return () => window.removeEventListener("resize", updatePath);
+    }, [containerRef, fromRef, toRef]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        ref,
+        className: utils.cn("pointer-events-none absolute inset-0", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: pathD,
+              stroke: pathColor,
+              strokeWidth: pathWidth,
+              fill: "none",
+              strokeOpacity: 0.2
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.motion.path,
+            {
+              d: pathD,
+              stroke: `url(#gradient-${gradientStartColor}-${gradientStopColor})`,
+              strokeWidth: pathWidth,
+              fill: "none",
+              initial: { pathLength: 0 },
+              animate: { pathLength: 1 },
+              transition: {
+                duration,
+                delay,
+                ease: "easeInOut",
+                repeat: Infinity
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: `gradient-${gradientStartColor}-${gradientStopColor}`,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: gradientStartColor }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: gradientStopColor })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AnimatedBeam.displayName = "AnimatedBeam";
+
+exports.AnimatedBeam = AnimatedBeam;

package/dist/animation/animated-beam.mjs

@@ -1 +1,97 @@
-import*as t from'react';import {motion}from'motion/react';import {cn}from'@hanzo/ui/lib/utils';import {jsxs,jsx}from'react/jsx-runtime';var k=Object.defineProperty;var b=(i,s)=>k(i,"name",{value:s,configurable:true});var O=t.forwardRef(({className:i,duration:s=3,delay:w=0,pathColor:y="gray",pathWidth:p=2,gradientStartColor:a="#18CCFC",gradientStopColor:c="#6344F5",containerRef:m,fromRef:d,toRef:l,...B},C)=>{let[u,G]=t.useState("");return t.useEffect(()=>{if(!m?.current||!d?.current||!l?.current)return;let f=b(()=>{let n=m.current.getBoundingClientRect(),o=d.current.getBoundingClientRect(),r=l.current.getBoundingClientRect(),h=o.left-n.left+o.width/2,g=o.top-n.top+o.height/2,R=r.left-n.left+r.width/2,$=r.top-n.top+r.height/2,L=(h+R)/2,v=Math.min(g,$)-50;G(`M ${h} ${g} Q ${L} ${v} ${R} ${$}`);},"updatePath");return f(),window.addEventListener("resize",f),()=>window.removeEventListener("resize",f)},[m,d,l]),jsxs("svg",{ref:C,className:cn("pointer-events-none absolute inset-0",i),...B,children:[jsx("path",{d:u,stroke:y,strokeWidth:p,fill:"none",strokeOpacity:.2}),jsx(motion.path,{d:u,stroke:`url(#gradient-${a}-${c})`,strokeWidth:p,fill:"none",initial:{pathLength:0},animate:{pathLength:1},transition:{duration:s,delay:w,ease:"easeInOut",repeat:1/0}}),jsx("defs",{children:jsxs("linearGradient",{id:`gradient-${a}-${c}`,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[jsx("stop",{offset:"0%",stopColor:a}),jsx("stop",{offset:"100%",stopColor:c})]})})]})});O.displayName="AnimatedBeam";export{O as AnimatedBeam};
+"use client";
+import * as React from 'react';
+import { motion } from 'motion/react';
+import { cn } from '@hanzo/ui/lib/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var AnimatedBeam = React.forwardRef(
+  ({
+    className,
+    duration = 3,
+    delay = 0,
+    pathColor = "gray",
+    pathWidth = 2,
+    gradientStartColor = "#18CCFC",
+    gradientStopColor = "#6344F5",
+    containerRef,
+    fromRef,
+    toRef,
+    ...props
+  }, ref) => {
+    const [pathD, setPathD] = React.useState("");
+    React.useEffect(() => {
+      if (!containerRef?.current || !fromRef?.current || !toRef?.current) return;
+      const updatePath = /* @__PURE__ */ __name(() => {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const fromRect = fromRef.current.getBoundingClientRect();
+        const toRect = toRef.current.getBoundingClientRect();
+        const fromX = fromRect.left - containerRect.left + fromRect.width / 2;
+        const fromY = fromRect.top - containerRect.top + fromRect.height / 2;
+        const toX = toRect.left - containerRect.left + toRect.width / 2;
+        const toY = toRect.top - containerRect.top + toRect.height / 2;
+        const controlX = (fromX + toX) / 2;
+        const controlY = Math.min(fromY, toY) - 50;
+        setPathD(`M ${fromX} ${fromY} Q ${controlX} ${controlY} ${toX} ${toY}`);
+      }, "updatePath");
+      updatePath();
+      window.addEventListener("resize", updatePath);
+      return () => window.removeEventListener("resize", updatePath);
+    }, [containerRef, fromRef, toRef]);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        className: cn("pointer-events-none absolute inset-0", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathD,
+              stroke: pathColor,
+              strokeWidth: pathWidth,
+              fill: "none",
+              strokeOpacity: 0.2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.path,
+            {
+              d: pathD,
+              stroke: `url(#gradient-${gradientStartColor}-${gradientStopColor})`,
+              strokeWidth: pathWidth,
+              fill: "none",
+              initial: { pathLength: 0 },
+              animate: { pathLength: 1 },
+              transition: {
+                duration,
+                delay,
+                ease: "easeInOut",
+                repeat: Infinity
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `gradient-${gradientStartColor}-${gradientStopColor}`,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradientStartColor }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientStopColor })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AnimatedBeam.displayName = "AnimatedBeam";
+
+export { AnimatedBeam };