@hanzo/ui 5.3.35 → 5.3.38

package/dist/animation/animated-background.js

@@ -1,424 +1,2 @@
 "use client";
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var react$1 = require('motion/react');
-var utils = require('@/lib/utils');
-var jsxRuntime = require('react/jsx-runtime');
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-function usePrefersReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
-  react.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__ */ jsxRuntime.jsx(
-    react$1.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 = react.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: blobs.map((blob) => /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: meshColors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.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 = react$1.useMotionValue(0);
-  const mouseY = react$1.useMotionValue(0);
-  react.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: layers.map((layer, index) => {
-    const x = react$1.useTransform(
-      mouseX,
-      [-50, 50],
-      [-layer.speed * 10, layer.speed * 10]
-    );
-    const y = react$1.useTransform(
-      mouseY,
-      [-50, 50],
-      [-layer.speed * 10, layer.speed * 10]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.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 = react.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: particles.map((particle) => /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.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 = react.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__ */ jsxRuntime.jsx(BlobBackground, { ...props, elementCount });
-      case "wave":
-        return /* @__PURE__ */ jsxRuntime.jsx(WaveBackground, { ...props });
-      case "mesh":
-        return /* @__PURE__ */ jsxRuntime.jsx(MeshBackground, { ...props });
-      case "parallax":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          ParallaxBackground,
-          {
-            layers: parallaxLayers,
-            speed,
-            paused: isAnimationPaused
-          }
-        );
-      case "particles":
-        return /* @__PURE__ */ jsxRuntime.jsx(ParticlesBackground, { ...props, elementCount });
-      default:
-        return /* @__PURE__ */ jsxRuntime.jsx(GradientBackground, { ...props });
-    }
-  }, "renderAnimation");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: utils.cn(
-        "relative overflow-hidden",
-        fullscreen && "fixed inset-0 z-0",
-        className
-      ),
-      style: containerStyle,
-      children: [
-        renderAnimation(),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 h-full w-full", children })
-      ]
-    }
-  );
-}
-__name(AnimatedBackground, "AnimatedBackground");
-var AnimatedBackgroundPresets = {
-  /**
-   * Calm gradient flow
-   */
-  CalmGradient: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
-    AnimatedBackground,
-    {
-      animation: "gradient",
-      colors: ["#667eea", "#764ba2", "#f093fb", "#f5576c"],
-      speed: 0.5,
-      ...props
-    }
-  ), "CalmGradient"),
-  /**
-   * Ocean waves
-   */
-  OceanWaves: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
-    AnimatedBackground,
-    {
-      animation: "wave",
-      colors: ["#0093E9", "#80D0C7"],
-      ...props
-    }
-  ), "OceanWaves"),
-  /**
-   * Floating bubbles
-   */
-  FloatingBubbles: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
-    AnimatedBackground,
-    {
-      animation: "blob",
-      colors: ["#667eea", "#764ba2", "#f093fb"],
-      elementCount: 8,
-      ...props
-    }
-  ), "FloatingBubbles"),
-  /**
-   * Cosmic mesh
-   */
-  CosmicMesh: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
-    AnimatedBackground,
-    {
-      animation: "mesh",
-      colors: ["#667eea", "#764ba2", "#f093fb", "#f5576c"],
-      ...props
-    }
-  ), "CosmicMesh"),
-  /**
-   * Starfield particles
-   */
-  Starfield: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
-    AnimatedBackground,
-    {
-      animation: "particles",
-      colors: ["#ffffff", "#f0f0f0", "#e0e0e0"],
-      elementCount: 50,
-      intensity: 0.5,
-      ...props
-    }
-  ), "Starfield"),
-  /**
-   * Aurora parallax
-   */
-  Aurora: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.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;
-
-exports.AnimatedBackground = AnimatedBackground;
-exports.AnimatedBackgroundPresets = AnimatedBackgroundPresets;
-exports.default = background_default;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),react$1=require('motion/react'),utils=require('@/lib/utils'),jsxRuntime=require('react/jsx-runtime');var x=Object.defineProperty;var s=(n,o)=>x(n,"name",{value:o,configurable:true});function R(){let[n,o]=react.useState(false);return react.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 jsxRuntime.jsx(react$1.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=react.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 jsxRuntime.jsx("div",{className:"absolute inset-0 overflow-hidden",children:a.map(e=>jsxRuntime.jsx(react$1.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 jsxRuntime.jsx("div",{className:"absolute inset-0 overflow-hidden",children:[0,1,2].map(a=>jsxRuntime.jsx(react$1.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 jsxRuntime.jsx("div",{className:"absolute inset-0 overflow-hidden",children:d.map((a,e)=>jsxRuntime.jsx(react$1.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=react$1.useMotionValue(0),d=react$1.useMotionValue(0);return react.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]),jsxRuntime.jsx("div",{className:"absolute inset-0 overflow-hidden",children:n.map((a,e)=>{let u=react$1.useTransform(r,[-50,50],[-a.speed*10,a.speed*10]),l=react$1.useTransform(d,[-50,50],[-a.speed*10,a.speed*10]);return jsxRuntime.jsx(react$1.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=react.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 jsxRuntime.jsx("div",{className:"absolute inset-0 overflow-hidden",children:a.map(e=>jsxRuntime.jsx(react$1.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=react.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 jsxRuntime.jsx(I,{...f,elementCount:h});case "wave":return jsxRuntime.jsx(L,{...f});case "mesh":return jsxRuntime.jsx(S,{...f});case "parallax":return jsxRuntime.jsx(W,{layers:A,speed:o,paused:k});case "particles":return jsxRuntime.jsx(G,{...f,elementCount:h});default:return jsxRuntime.jsx(E,{...f})}},"renderAnimation");return jsxRuntime.jsxs("div",{className:utils.cn("relative overflow-hidden",b&&"fixed inset-0 z-0",d),style:N,children:[P(),e&&jsxRuntime.jsx("div",{className:"relative z-10 h-full w-full",children:e})]})}s(c,"AnimatedBackground");var V={CalmGradient:s(n=>jsxRuntime.jsx(c,{animation:"gradient",colors:["#667eea","#764ba2","#f093fb","#f5576c"],speed:.5,...n}),"CalmGradient"),OceanWaves:s(n=>jsxRuntime.jsx(c,{animation:"wave",colors:["#0093E9","#80D0C7"],...n}),"OceanWaves"),FloatingBubbles:s(n=>jsxRuntime.jsx(c,{animation:"blob",colors:["#667eea","#764ba2","#f093fb"],elementCount:8,...n}),"FloatingBubbles"),CosmicMesh:s(n=>jsxRuntime.jsx(c,{animation:"mesh",colors:["#667eea","#764ba2","#f093fb","#f5576c"],...n}),"CosmicMesh"),Starfield:s(n=>jsxRuntime.jsx(c,{animation:"particles",colors:["#ffffff","#f0f0f0","#e0e0e0"],elementCount:50,intensity:.5,...n}),"Starfield"),Aurora:s(n=>jsxRuntime.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;exports.AnimatedBackground=c;exports.AnimatedBackgroundPresets=V;exports.default=j;