telecop 0.1.28 → 0.1.30

package/dist/index.mjs

@@ -1,48 +1,48 @@
 "use client";
-import { jsx as r, jsxs as g, Fragment as N } from "react/jsx-runtime";
-import C, { useState as $ } from "react";
-const S = ({
-  children: a,
-  variant: e = "primary",
-  size: d = "md",
-  onClick: n,
-  disabled: t = !1,
-  className: o = ""
+import { jsx as n, jsxs as m, Fragment as q } from "react/jsx-runtime";
+import H, { useState as S, useRef as u, useEffect as v } from "react";
+const Ra = ({
+  children: e,
+  variant: a = "primary",
+  size: r = "md",
+  onClick: t,
+  disabled: o = !1,
+  className: i = ""
 }) => {
-  const s = "font-semibold rounded-lg transition-all duration-200 cursor-pointer", l = {
+  const s = "font-semibold rounded-lg transition-all duration-200 cursor-pointer", d = {
     primary: "bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg",
     secondary: "bg-gray-600 hover:bg-gray-700 text-white shadow-md hover:shadow-lg",
     danger: "bg-red-600 hover:bg-red-700 text-white shadow-md hover:shadow-lg"
-  }, i = {
+  }, l = {
     sm: "px-3 py-1.5 text-sm",
     md: "px-4 py-2 text-base",
     lg: "px-6 py-3 text-lg"
-  }, p = t ? "opacity-50 cursor-not-allowed" : "";
-  return /* @__PURE__ */ r(
+  }, c = o ? "opacity-50 cursor-not-allowed" : "";
+  return /* @__PURE__ */ n(
     "button",
     {
-      className: `${s} ${l[e]} ${i[d]} ${p} ${o}`,
-      onClick: n,
-      disabled: t,
-      children: a
+      className: `${s} ${d[a]} ${l[r]} ${c} ${i}`,
+      onClick: t,
+      disabled: o,
+      children: e
     }
   );
-}, x = ({
-  children: a,
-  variant: e = "blur",
-  size: d = "md",
-  onClick: n,
-  disabled: t = !1,
-  className: o = ""
+}, O = ({
+  children: e,
+  variant: a = "blur",
+  size: r = "md",
+  onClick: t,
+  disabled: o = !1,
+  className: i = ""
 }) => {
-  const [s, l] = $([]), i = (b) => {
-    if (!t && n) {
-      const h = b.currentTarget.getBoundingClientRect(), f = b.clientX - h.left, w = b.clientY - h.top, v = Date.now();
-      l([...s, { x: f, y: w, id: v }]), setTimeout(() => {
-        l((y) => y.filter((k) => k.id !== v));
-      }, 800), n();
-    }
-  }, p = `
+  const [s, d] = S([]), l = (p) => {
+    if (!o && t) {
+      const h = p.currentTarget.getBoundingClientRect(), x = p.clientX - h.left, N = p.clientY - h.top, k = Date.now();
+      d([...s, { x, y: N, id: k }]), setTimeout(() => {
+        d((R) => R.filter((P) => P.id !== k));
+      }, 800), t();
+    }
+  }, c = `
     relative overflow-hidden
     backdrop-blur-xl
     border border-white/30
@@ -52,11 +52,11 @@ const S = ({
     cursor-pointer
     shadow-xl
     group
-  `, c = {
+  `, g = {
     sm: "px-5 py-2.5 text-sm",
     md: "px-7 py-3.5 text-base",
     lg: "px-9 py-4.5 text-lg"
-  }, u = {
+  }, f = {
     blur: `
       bg-white/5
       hover:bg-white/15
@@ -82,83 +82,83 @@ const S = ({
       hover:before:translate-x-[200%]
       before:transition-transform before:duration-1000
     `
-  }, m = t ? "opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl" : "";
-  return /* @__PURE__ */ g(
+  }, b = o ? "opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl" : "";
+  return /* @__PURE__ */ m(
     "button",
     {
-      className: `${p} ${c[d]} ${u[e]} ${m} ${o}`,
-      onClick: i,
-      disabled: t,
+      className: `${c} ${g[r]} ${f[a]} ${b} ${i}`,
+      onClick: l,
+      disabled: o,
       children: [
-        e === "waves" && !t && /* @__PURE__ */ g(N, { children: [
-          /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700" }),
-          /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse" })
+        a === "waves" && !o && /* @__PURE__ */ m(q, { children: [
+          /* @__PURE__ */ n("span", { className: "absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700" }),
+          /* @__PURE__ */ n("span", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse" })
         ] }),
-        e === "blur" && !t && /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
-        /* @__PURE__ */ r("span", { className: "absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none", children: /* @__PURE__ */ r("span", { className: "absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer" }) }),
-        s.map((b) => /* @__PURE__ */ r(
+        a === "blur" && !o && /* @__PURE__ */ n("span", { className: "absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
+        /* @__PURE__ */ n("span", { className: "absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none", children: /* @__PURE__ */ n("span", { className: "absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer" }) }),
+        s.map((p) => /* @__PURE__ */ n(
           "span",
           {
             className: "absolute rounded-full bg-white/30 pointer-events-none animate-ripple",
             style: {
-              left: b.x,
-              top: b.y,
+              left: p.x,
+              top: p.y,
               width: "20px",
               height: "20px",
               transform: "translate(-50%, -50%)"
             }
           },
-          b.id
+          p.id
         )),
-        /* @__PURE__ */ r("span", { className: "relative z-10 drop-shadow-lg", children: a })
+        /* @__PURE__ */ n("span", { className: "relative z-10 drop-shadow-lg", children: e })
       ]
     }
   );
-}, M = ({
-  name: a,
-  title: e,
-  description: d = "Welcome to my portfolio",
-  primaryButtonText: n = "Get Started",
-  primaryButtonLink: t,
-  primaryButtonOnClick: o,
+}, Pa = ({
+  name: e,
+  title: a,
+  description: r = "Welcome to my portfolio",
+  primaryButtonText: t = "Get Started",
+  primaryButtonLink: o,
+  primaryButtonOnClick: i,
   secondaryButtonText: s = "Learn More",
-  secondaryButtonLink: l,
-  secondaryButtonOnClick: i,
-  backgroundGradient: p = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-  animationType: c,
-  className: u = ""
+  secondaryButtonLink: d,
+  secondaryButtonOnClick: l,
+  backgroundGradient: c = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  animationType: g,
+  className: f = ""
 }) => {
-  const m = () => {
-    t ? window.location.href = t : o && o();
-  }, b = () => {
-    l ? window.location.href = l : i && i();
-  }, h = t ? /* @__PURE__ */ r("a", { href: t, style: { textDecoration: "none" }, children: /* @__PURE__ */ r(x, { variant: "waves", size: "lg", children: n }) }) : /* @__PURE__ */ r(
-    x,
+  const b = () => {
+    o ? window.location.href = o : i && i();
+  }, p = () => {
+    d ? window.location.href = d : l && l();
+  }, h = o ? /* @__PURE__ */ n("a", { href: o, style: { textDecoration: "none" }, children: /* @__PURE__ */ n(O, { variant: "waves", size: "lg", children: t }) }) : /* @__PURE__ */ n(
+    O,
     {
       variant: "waves",
       size: "lg",
-      onClick: o || m,
-      children: n
+      onClick: i || b,
+      children: t
     }
-  ), f = l ? /* @__PURE__ */ r("a", { href: l, style: { textDecoration: "none" }, children: /* @__PURE__ */ r(x, { variant: "blur", size: "lg", children: s }) }) : /* @__PURE__ */ r(
-    x,
+  ), x = d ? /* @__PURE__ */ n("a", { href: d, style: { textDecoration: "none" }, children: /* @__PURE__ */ n(O, { variant: "blur", size: "lg", children: s }) }) : /* @__PURE__ */ n(
+    O,
     {
       variant: "blur",
       size: "lg",
-      onClick: i || b,
+      onClick: l || p,
       children: s
     }
   );
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: c ? `animate-gradient-${c}` : "",
+      className: g ? `animate-gradient-${g}` : "",
       style: {
-        background: p,
+        background: c,
         minHeight: "100vh"
       },
-      children: /* @__PURE__ */ r("div", { className: `min-h-screen flex items-center justify-center p-8 ${u}`, children: /* @__PURE__ */ g("div", { className: "max-w-4xl w-full text-center space-y-8", children: [
-        /* @__PURE__ */ r(
+      children: /* @__PURE__ */ n("div", { className: `min-h-screen flex items-center justify-center p-8 ${f}`, children: /* @__PURE__ */ m("div", { className: "max-w-4xl w-full text-center space-y-8", children: [
+        /* @__PURE__ */ n(
           "h1",
           {
             className: "text-6xl md:text-8xl font-bold text-white mb-4",
@@ -166,10 +166,10 @@ const S = ({
               textShadow: "0 0 40px rgba(0,0,0,0.3)",
               animation: "fadeInUp 0.8s ease-out"
             },
-            children: a
+            children: e
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ n(
           "h2",
           {
             className: "text-3xl md:text-5xl font-semibold text-white/90",
@@ -177,10 +177,10 @@ const S = ({
               textShadow: "0 0 30px rgba(0,0,0,0.2)",
               animation: "fadeInUp 1s ease-out 0.2s backwards"
             },
-            children: e
+            children: a
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ n(
           "p",
           {
             className: "text-xl md:text-2xl text-white/80 max-w-2xl mx-auto",
@@ -188,10 +188,10 @@ const S = ({
               textShadow: "0 0 20px rgba(0,0,0,0.2)",
               animation: "fadeInUp 1.2s ease-out 0.4s backwards"
             },
-            children: d
+            children: r
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ m(
           "div",
           {
             className: "flex flex-wrap gap-6 justify-center mt-12",
@@ -200,11 +200,11 @@ const S = ({
             },
             children: [
               h,
-              f
+              x
             ]
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ n(
           "div",
           {
             className: "mt-16 mx-auto w-32 h-1 rounded-full",
@@ -217,7 +217,7 @@ const S = ({
       ] }) })
     }
   );
-}, B = [
+}, za = [
   // ========== PREMIUM THEMES (NEW) ==========
   {
     id: "glass-morphism",
@@ -682,10 +682,10 @@ const S = ({
     category: "animated",
     animation: "zoom"
   }
-], D = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), z = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), R = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), I = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), j = ({ children: a = "Pill Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-8 py-3 rounded-full font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), A = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/50", children: a }), E = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/50", children: a }), F = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50", children: a }), H = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-br from-cyan-400 to-blue-600 hover:from-cyan-500 hover:to-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/50", children: a }), q = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-yellow-500 via-orange-500 to-red-600 hover:from-yellow-600 hover:via-orange-600 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50", children: a }), U = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-500/20 backdrop-blur-xl border border-blue-400/30 hover:bg-blue-500/30 hover:border-blue-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/20", children: a }), W = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-500/20 backdrop-blur-xl border border-purple-400/30 hover:bg-purple-500/30 hover:border-purple-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20", children: a }), O = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-white/10 backdrop-blur-xl border border-white/30 hover:bg-white/20 hover:border-white/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-white/20", children: a }), Y = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-pink-500/20 backdrop-blur-xl border border-pink-400/30 hover:bg-pink-500/30 hover:border-pink-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20", children: a }), T = ({ children: a = "Shimmer Effect", onClick: e }) => /* @__PURE__ */ g("button", { onClick: e, className: "relative px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 overflow-hidden group transition-all duration-300 hover:scale-105", children: [
-  /* @__PURE__ */ r("span", { className: "relative z-10", children: a }),
-  /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" })
-] }), V = ({ children: a = "Pulse Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 animate-pulse hover:animate-none hover:scale-105", children: a }), X = ({ children: a = "Bounce Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:animate-bounce", children: a }), Z = ({ children: a = "Glow Effect", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.8)] hover:scale-105", children: a }), J = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-300 hover:scale-105", children: a }), K = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-purple-500 border-2 border-purple-500 hover:bg-purple-500 hover:text-white transition-all duration-300 hover:scale-105", children: a }), Q = ({ children: a = "Gradient Border", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 border-2 border-transparent hover:text-white transition-all duration-300 hover:scale-105", style: { borderImage: "linear-gradient(to right, rgb(168, 85, 247), rgb(236, 72, 153)) 1" }, children: a }), L = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-blue-500 hover:bg-blue-500/10 transition-all duration-300 hover:scale-105", children: a }), ee = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-red-500 hover:bg-red-500/10 transition-all duration-300 hover:scale-105", children: a }), ae = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-purple-500 hover:bg-purple-500/10 transition-all duration-300 hover:scale-105", children: a }), re = ({ children: a = "3D Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 shadow-[0_6px_0_rgb(37,99,235)] hover:shadow-[0_4px_0_rgb(37,99,235)] hover:translate-y-[2px] transition-all duration-150", children: a }), te = ({ children: a = "3D Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-pink-600 shadow-[0_6px_0_rgb(219,39,119)] hover:shadow-[0_4px_0_rgb(219,39,119)] hover:translate-y-[2px] transition-all duration-150", children: a }), ne = ({ children: a = "3D Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 shadow-[0_6px_0_rgb(22,163,74)] hover:shadow-[0_4px_0_rgb(22,163,74)] hover:translate-y-[2px] transition-all duration-150", children: a }), ie = ({ children: a = "Neon Blue", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-blue-400 border-2 border-blue-400 hover:bg-blue-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(59,130,246,0.8)] hover:scale-105", children: a }), de = ({ children: a = "Neon Pink", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-pink-400 border-2 border-pink-400 hover:bg-pink-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(236,72,153,0.8)] hover:scale-105", children: a }), oe = ({ children: a = "Neon Green", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-green-400 border-2 border-green-400 hover:bg-green-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(34,197,94,0.8)] hover:scale-105", children: a }), G = {
+], $a = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), Ba = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), Da = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), Ga = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), Sa = ({ children: e = "Pill Button", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-8 py-3 rounded-full font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), _a = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/50", children: e }), Ea = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/50", children: e }), Ua = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50", children: e }), La = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-br from-cyan-400 to-blue-600 hover:from-cyan-500 hover:to-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/50", children: e }), Aa = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-yellow-500 via-orange-500 to-red-600 hover:from-yellow-600 hover:via-orange-600 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50", children: e }), qa = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-500/20 backdrop-blur-xl border border-blue-400/30 hover:bg-blue-500/30 hover:border-blue-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/20", children: e }), Ha = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-500/20 backdrop-blur-xl border border-purple-400/30 hover:bg-purple-500/30 hover:border-purple-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20", children: e }), ja = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-white/10 backdrop-blur-xl border border-white/30 hover:bg-white/20 hover:border-white/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-white/20", children: e }), Fa = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-pink-500/20 backdrop-blur-xl border border-pink-400/30 hover:bg-pink-500/30 hover:border-pink-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20", children: e }), Qa = ({ children: e = "Shimmer Effect", onClick: a }) => /* @__PURE__ */ m("button", { onClick: a, className: "relative px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 overflow-hidden group transition-all duration-300 hover:scale-105", children: [
+  /* @__PURE__ */ n("span", { className: "relative z-10", children: e }),
+  /* @__PURE__ */ n("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" })
+] }), Ta = ({ children: e = "Pulse Button", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 animate-pulse hover:animate-none hover:scale-105", children: e }), Va = ({ children: e = "Bounce Button", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:animate-bounce", children: e }), Wa = ({ children: e = "Glow Effect", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.8)] hover:scale-105", children: e }), Za = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-300 hover:scale-105", children: e }), Ja = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-purple-500 border-2 border-purple-500 hover:bg-purple-500 hover:text-white transition-all duration-300 hover:scale-105", children: e }), Ka = ({ children: e = "Gradient Border", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 border-2 border-transparent hover:text-white transition-all duration-300 hover:scale-105", style: { borderImage: "linear-gradient(to right, rgb(168, 85, 247), rgb(236, 72, 153)) 1" }, children: e }), er = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-blue-500 hover:bg-blue-500/10 transition-all duration-300 hover:scale-105", children: e }), ar = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-red-500 hover:bg-red-500/10 transition-all duration-300 hover:scale-105", children: e }), rr = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-purple-500 hover:bg-purple-500/10 transition-all duration-300 hover:scale-105", children: e }), tr = ({ children: e = "3D Button", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 shadow-[0_6px_0_rgb(37,99,235)] hover:shadow-[0_4px_0_rgb(37,99,235)] hover:translate-y-[2px] transition-all duration-150", children: e }), nr = ({ children: e = "3D Button", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-pink-600 shadow-[0_6px_0_rgb(219,39,119)] hover:shadow-[0_4px_0_rgb(219,39,119)] hover:translate-y-[2px] transition-all duration-150", children: e }), or = ({ children: e = "3D Button", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 shadow-[0_6px_0_rgb(22,163,74)] hover:shadow-[0_4px_0_rgb(22,163,74)] hover:translate-y-[2px] transition-all duration-150", children: e }), ir = ({ children: e = "Neon Blue", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-blue-400 border-2 border-blue-400 hover:bg-blue-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(59,130,246,0.8)] hover:scale-105", children: e }), sr = ({ children: e = "Neon Pink", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-pink-400 border-2 border-pink-400 hover:bg-pink-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(236,72,153,0.8)] hover:scale-105", children: e }), lr = ({ children: e = "Neon Green", onClick: a }) => /* @__PURE__ */ n("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-green-400 border-2 border-green-400 hover:bg-green-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(34,197,94,0.8)] hover:scale-105", children: e }), j = {
   "glass-morphism": `
     radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
     radial-gradient(circle at 80% 80%, rgba(255, 128, 171, 0.3), transparent 50%),
@@ -711,81 +711,81 @@ const S = ({
     linear-gradient(180deg, #000000 0%, #0a0a1a 50%, #000000 100%)
   `,
   none: "transparent"
-}, le = ({
-  children: a,
-  layout: e = "center",
-  size: d = "lg",
-  theme: n = "none",
-  padding: t = !0,
-  gap: o = "md",
+}, dr = ({
+  children: e,
+  layout: a = "center",
+  size: r = "lg",
+  theme: t = "none",
+  padding: o = !0,
+  gap: i = "md",
   className: s = ""
 }) => {
-  const l = {
+  const d = {
     sm: "max-w-3xl",
     md: "max-w-5xl",
     lg: "max-w-7xl",
     xl: "max-w-[1400px]",
     full: "max-w-full"
-  }[d], i = {
+  }[r], l = {
     sm: "gap-4",
     md: "gap-8",
     lg: "gap-12"
-  }[o], p = {
-    "image-right": `grid md:grid-cols-2 ${i} items-center`,
-    "image-left": `grid md:grid-cols-2 ${i} items-center`,
-    "button-right": `grid md:grid-cols-2 ${i} items-center`,
-    "button-left": `grid md:grid-cols-2 ${i} items-center`,
+  }[i], c = {
+    "image-right": `grid md:grid-cols-2 ${l} items-center`,
+    "image-left": `grid md:grid-cols-2 ${l} items-center`,
+    "button-right": `grid md:grid-cols-2 ${l} items-center`,
+    "button-left": `grid md:grid-cols-2 ${l} items-center`,
     center: "flex flex-col items-center justify-center text-center",
-    "two-columns": `grid md:grid-cols-2 ${i}`,
-    "three-columns": `grid md:grid-cols-3 ${i}`
-  }[e], c = t ? "px-6 py-8" : "", u = n !== "none" ? {
-    background: G[n],
+    "two-columns": `grid md:grid-cols-2 ${l}`,
+    "three-columns": `grid md:grid-cols-3 ${l}`
+  }[a], g = o ? "px-6 py-8" : "", f = t !== "none" ? {
+    background: j[t],
     backgroundSize: "200% 200%"
-  } : {}, m = C.Children.toArray(a);
-  let b = m;
-  return (e === "image-left" || e === "button-left") && (b = m.reverse()), /* @__PURE__ */ r(
+  } : {}, b = H.Children.toArray(e);
+  let p = b;
+  return (a === "image-left" || a === "button-left") && (p = b.reverse()), /* @__PURE__ */ n(
     "div",
     {
-      className: `${l} mx-auto ${c} ${s}`,
-      style: u,
-      children: /* @__PURE__ */ r("div", { className: p, children: b })
+      className: `${d} mx-auto ${g} ${s}`,
+      style: f,
+      children: /* @__PURE__ */ n("div", { className: c, children: p })
     }
   );
-}, se = ({
-  src: a,
-  alt: e,
-  className: d = "",
-  width: n,
-  height: t
-}) => /* @__PURE__ */ r("div", { className: `w-full ${d}`, children: /* @__PURE__ */ r(
+}, cr = ({
+  src: e,
+  alt: a,
+  className: r = "",
+  width: t,
+  height: o
+}) => /* @__PURE__ */ n("div", { className: `w-full ${r}`, children: /* @__PURE__ */ n(
   "img",
   {
-    src: a,
-    alt: e,
-    width: n,
-    height: t,
+    src: e,
+    alt: a,
+    width: t,
+    height: o,
     className: "w-full h-auto rounded-2xl shadow-2xl object-cover"
   }
-) }), ge = ({
-  children: a,
-  className: e = ""
-}) => /* @__PURE__ */ r("div", { className: `space-y-4 ${e}`, children: a }), be = ({
-  children: a,
-  className: e = ""
-}) => /* @__PURE__ */ r("div", { className: `flex gap-4 ${e}`, children: a }), pe = ({
-  icon: a,
-  title: e,
-  description: d,
-  variant: n = "solid",
-  theme: t = "blue",
-  hoverable: o = !0,
+) }), gr = ({
+  children: e,
+  className: a = ""
+}) => /* @__PURE__ */ n("div", { className: `space-y-4 ${a}`, children: e }), pr = ({
+  children: e,
+  className: a = ""
+}) => /* @__PURE__ */ n("div", { className: `flex gap-4 ${a}`, children: e }), ur = ({
+  icon: e,
+  title: a,
+  description: r,
+  variant: t = "solid",
+  theme: o = "blue",
+  hoverable: i = !0,
   className: s = ""
 }) => {
-  const i = `
+  const l = `
     rounded-2xl p-6
     max-w-sm
     transition-all duration-300
-    ${o ? "hover:scale-[1.02] hover:shadow-2xl" : ""}
+    ${i ? "hover:scale-[1.02] hover:shadow-2xl" : ""}
     ${{
     blue: {
       solid: "bg-blue-600 text-white",
@@ -823,25 +823,25 @@ const S = ({
       gradient: "bg-gradient-to-br from-orange-600 to-red-600 text-white",
       outlined: "bg-transparent border-2 border-orange-500 text-orange-500"
     }
-  }[t][n]}
+  }[o][t]}
     ${s}
   `;
-  return /* @__PURE__ */ g("div", { className: i, children: [
-    a && /* @__PURE__ */ r("div", { className: "text-4xl mb-4", children: a }),
-    /* @__PURE__ */ r("h3", { className: "text-xl font-bold mb-2", children: e }),
-    /* @__PURE__ */ r("p", { className: `text-sm ${n === "outlined" ? "text-gray-600" : "opacity-90"}`, children: d })
+  return /* @__PURE__ */ m("div", { className: l, children: [
+    e && /* @__PURE__ */ n("div", { className: "text-4xl mb-4", children: e }),
+    /* @__PURE__ */ n("h3", { className: "text-xl font-bold mb-2", children: a }),
+    /* @__PURE__ */ n("p", { className: `text-sm ${t === "outlined" ? "text-gray-600" : "opacity-90"}`, children: r })
   ] });
-}, ce = ({
-  image: a,
-  title: e,
-  description: d,
-  price: n,
-  oldPrice: t,
-  badge: o,
+}, mr = ({
+  image: e,
+  title: a,
+  description: r,
+  price: t,
+  oldPrice: o,
+  badge: i,
   variant: s = "solid",
-  children: l,
-  className: i = ""
-}) => /* @__PURE__ */ g("div", { className: `
+  children: d,
+  className: l = ""
+}) => /* @__PURE__ */ m("div", { className: `
       rounded-2xl overflow-hidden 
       max-w-sm
       transition-all duration-300 
@@ -852,45 +852,45 @@ const S = ({
   gradient: "bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700",
   outlined: "bg-transparent border-2 border-gray-700"
 }[s]} 
-      ${i}
+      ${l}
     `, children: [
-  /* @__PURE__ */ g("div", { className: "relative", children: [
-    /* @__PURE__ */ r(
+  /* @__PURE__ */ m("div", { className: "relative", children: [
+    /* @__PURE__ */ n(
       "img",
       {
-        src: a,
-        alt: e,
+        src: e,
+        alt: a,
         className: "w-full h-48 object-cover"
       }
     ),
-    o && /* @__PURE__ */ r("span", { className: "absolute top-3 right-3 px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full", children: o })
+    i && /* @__PURE__ */ n("span", { className: "absolute top-3 right-3 px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full", children: i })
   ] }),
-  /* @__PURE__ */ g("div", { className: "p-5 space-y-3", children: [
-    /* @__PURE__ */ r("h3", { className: "text-xl font-bold text-white", children: e }),
-    d && /* @__PURE__ */ r("p", { className: "text-gray-400 text-sm", children: d }),
-    /* @__PURE__ */ g("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ g("span", { className: "text-2xl font-bold text-white", children: [
+  /* @__PURE__ */ m("div", { className: "p-5 space-y-3", children: [
+    /* @__PURE__ */ n("h3", { className: "text-xl font-bold text-white", children: a }),
+    r && /* @__PURE__ */ n("p", { className: "text-gray-400 text-sm", children: r }),
+    /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ m("span", { className: "text-2xl font-bold text-white", children: [
         "$",
-        n
+        t
       ] }),
-      t && /* @__PURE__ */ g("span", { className: "text-sm text-gray-500 line-through", children: [
+      o && /* @__PURE__ */ m("span", { className: "text-sm text-gray-500 line-through", children: [
         "$",
-        t
+        o
       ] })
     ] }),
-    l
+    d
   ] })
-] }), me = ({
-  icon: a,
-  label: e,
-  value: d,
-  change: n,
-  trend: t = "neutral",
-  variant: o = "solid",
+] }), br = ({
+  icon: e,
+  label: a,
+  value: r,
+  change: t,
+  trend: o = "neutral",
+  variant: i = "solid",
   theme: s = "blue",
-  className: l = ""
+  className: d = ""
 }) => {
-  const i = {
+  const l = {
     blue: {
       solid: "bg-blue-600/10 border-blue-500/20",
       glass: "bg-blue-500/20 backdrop-blur-xl border-blue-400/30",
@@ -927,75 +927,1454 @@ const S = ({
       gradient: "bg-gradient-to-br from-orange-600/20 to-red-600/20 border-orange-500/30",
       outlined: "bg-transparent border-2 border-orange-500"
     }
-  }, p = {
+  }, c = {
     up: "text-green-400",
     down: "text-red-400",
     neutral: "text-gray-400"
-  }, c = {
+  }, g = {
     up: "↑",
     down: "↓",
     neutral: "→"
   };
-  return /* @__PURE__ */ g("div", { className: `
+  return /* @__PURE__ */ m("div", { className: `
       rounded-2xl p-6 border
       max-w-sm
       transition-all duration-300 
       hover:scale-[1.02] hover:shadow-xl
-      ${i[s][o]}
-      ${l}
+      ${l[s][i]}
+      ${d}
     `, children: [
-    /* @__PURE__ */ g("div", { className: "flex items-start justify-between mb-4", children: [
-      a && /* @__PURE__ */ r("div", { className: "text-3xl", children: a }),
-      n && /* @__PURE__ */ g("span", { className: `text-sm font-semibold ${p[t]}`, children: [
-        c[t],
+    /* @__PURE__ */ m("div", { className: "flex items-start justify-between mb-4", children: [
+      e && /* @__PURE__ */ n("div", { className: "text-3xl", children: e }),
+      t && /* @__PURE__ */ m("span", { className: `text-sm font-semibold ${c[o]}`, children: [
+        g[o],
         " ",
-        n
+        t
       ] })
     ] }),
-    /* @__PURE__ */ r("p", { className: "text-gray-400 text-sm mb-1", children: e }),
-    /* @__PURE__ */ r("p", { className: "text-3xl font-bold text-white", children: d })
+    /* @__PURE__ */ n("p", { className: "text-gray-400 text-sm mb-1", children: a }),
+    /* @__PURE__ */ n("p", { className: "text-3xl font-bold text-white", children: r })
   ] });
 };
+class y {
+  constructor(a) {
+    this.animation = null, this.element = a;
+  }
+  /**
+   * تشغيل animation باستخدام keyframes
+   */
+  animate(a, r = {}) {
+    const {
+      duration: t = 600,
+      delay: o = 0,
+      easing: i = "ease",
+      iterations: s = 1,
+      direction: d = "normal",
+      fill: l = "both"
+    } = r;
+    return this.animation && this.animation.cancel(), this.animation = this.element.animate(a, {
+      duration: t,
+      delay: o,
+      easing: typeof i == "string" ? i : "linear",
+      iterations: s,
+      direction: d,
+      fill: l
+    }), this.animation.finished;
+  }
+  /**
+   * إيقاف الـ animation
+   */
+  stop() {
+    this.animation && (this.animation.cancel(), this.animation = null);
+  }
+  /**
+   * Pause الـ animation
+   */
+  pause() {
+    this.animation && this.animation.pause();
+  }
+  /**
+   * Resume الـ animation
+   */
+  resume() {
+    this.animation && this.animation.play();
+  }
+  /**
+   * Reverse الـ animation
+   */
+  reverse() {
+    this.animation && this.animation.reverse();
+  }
+  /**
+   * Get current progress (0 to 1)
+   */
+  getProgress() {
+    return !this.animation || !this.animation.effect ? 0 : this.animation.effect.getComputedTiming().progress || 0;
+  }
+  /**
+   * Check if animation is running
+   */
+  isRunning() {
+    var a;
+    return ((a = this.animation) == null ? void 0 : a.playState) === "running";
+  }
+}
+function fr(e) {
+  return new y(e);
+}
+async function hr(e, a, r = {}) {
+  const t = r.stagger ?? 0, o = {
+    duration: r.duration,
+    delay: r.delay,
+    easing: r.easing,
+    iterations: r.iterations,
+    direction: r.direction,
+    fill: r.fill
+  }, i = e.map((s, d) => new y(s).animate(a, {
+    ...o,
+    delay: (o.delay || 0) + t * d
+  }));
+  return Promise.all(i);
+}
+async function xr(e) {
+  const a = [];
+  for (const { element: r, keyframes: t, config: o } of e) {
+    const s = await new y(r).animate(t, o);
+    a.push(s);
+  }
+  return a;
+}
+async function yr(e) {
+  const a = e.map(({ element: r, keyframes: t, config: o }) => new y(r).animate(t, o));
+  return Promise.all(a);
+}
+const _ = (e) => e, F = (e) => e * e * e, Q = (e) => 1 - Math.pow(1 - e, 3), T = (e) => e < 0.5 ? 4 * e * e * e : 1 - Math.pow(-2 * e + 2, 3) / 2, V = (e) => e * e, W = (e) => 1 - (1 - e) * (1 - e), Z = (e) => e < 0.5 ? 2 * e * e : 1 - Math.pow(-2 * e + 2, 2) / 2, J = (e) => e * e * e * e, K = (e) => 1 - Math.pow(1 - e, 4), ee = (e) => e < 0.5 ? 8 * e * e * e * e : 1 - Math.pow(-2 * e + 2, 4) / 2, ae = (e) => e * e * e * e * e, re = (e) => 1 - Math.pow(1 - e, 5), te = (e) => e < 0.5 ? 16 * e * e * e * e * e : 1 - Math.pow(-2 * e + 2, 5) / 2, ne = (e) => e === 0 ? 0 : Math.pow(2, 10 * e - 10), oe = (e) => e === 1 ? 1 : 1 - Math.pow(2, -10 * e), ie = (e) => e === 0 ? 0 : e === 1 ? 1 : e < 0.5 ? Math.pow(2, 20 * e - 10) / 2 : (2 - Math.pow(2, -20 * e + 10)) / 2, X = 1.70158, C = X * 1.525, E = X + 1, se = (e) => E * e * e * e - X * e * e, le = (e) => 1 + E * Math.pow(e - 1, 3) + X * Math.pow(e - 1, 2), de = (e) => e < 0.5 ? Math.pow(2 * e, 2) * ((C + 1) * 2 * e - C) / 2 : (Math.pow(2 * e - 2, 2) * ((C + 1) * (e * 2 - 2) + C) + 2) / 2, U = 2 * Math.PI / 3, G = 2 * Math.PI / 4.5, ce = (e) => e === 0 ? 0 : e === 1 ? 1 : -Math.pow(2, 10 * e - 10) * Math.sin((e * 10 - 10.75) * U), ge = (e) => e === 0 ? 0 : e === 1 ? 1 : Math.pow(2, -10 * e) * Math.sin((e * 10 - 0.75) * U) + 1, pe = (e) => e === 0 ? 0 : e === 1 ? 1 : e < 0.5 ? -(Math.pow(2, 20 * e - 10) * Math.sin((20 * e - 11.125) * G)) / 2 : Math.pow(2, -20 * e + 10) * Math.sin((20 * e - 11.125) * G) / 2 + 1, Y = (e) => e < 1 / 2.75 ? 7.5625 * e * e : e < 2 / 2.75 ? 7.5625 * (e -= 1.5 / 2.75) * e + 0.75 : e < 2.5 / 2.75 ? 7.5625 * (e -= 2.25 / 2.75) * e + 0.9375 : 7.5625 * (e -= 2.625 / 2.75) * e + 0.984375, ue = (e) => 1 - Y(1 - e), me = (e) => e < 0.5 ? (1 - Y(1 - 2 * e)) / 2 : (1 + Y(2 * e - 1)) / 2, be = (e) => 1 - Math.cos(e * Math.PI / 2), fe = (e) => Math.sin(e * Math.PI / 2), he = (e) => -(Math.cos(Math.PI * e) - 1) / 2, xe = (e) => 1 - Math.sqrt(1 - Math.pow(e, 2)), ye = (e) => Math.sqrt(1 - Math.pow(e - 1, 2)), we = (e) => e < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * e, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * e + 2, 2)) + 1) / 2, ve = {
+  linear: _,
+  easeInCubic: F,
+  easeOutCubic: Q,
+  easeInOutCubic: T,
+  easeInQuad: V,
+  easeOutQuad: W,
+  easeInOutQuad: Z,
+  easeInQuart: J,
+  easeOutQuart: K,
+  easeInOutQuart: ee,
+  easeInQuint: ae,
+  easeOutQuint: re,
+  easeInOutQuint: te,
+  easeInExpo: ne,
+  easeOutExpo: oe,
+  easeInOutExpo: ie,
+  easeInBack: se,
+  easeOutBack: le,
+  easeInOutBack: de,
+  easeInElastic: ce,
+  easeOutElastic: ge,
+  easeInOutElastic: pe,
+  easeInBounce: ue,
+  easeOutBounce: Y,
+  easeInOutBounce: me,
+  easeInSine: be,
+  easeOutSine: fe,
+  easeInOutSine: he,
+  easeInCirc: xe,
+  easeOutCirc: ye,
+  easeInOutCirc: we
+};
+function wr(e) {
+  return typeof e == "function" ? e : ve[e] || _;
+}
+function vr(e = 100, a = 10, r = 1) {
+  return (t) => {
+    const o = Math.sqrt(e / r), i = a / (2 * Math.sqrt(e * r));
+    if (i < 1) {
+      const s = o * Math.sqrt(1 - i * i);
+      return 1 - Math.exp(-i * o * t) * Math.cos(s * t);
+    } else
+      return 1 - Math.exp(-o * t);
+  };
+}
+function kr(e, a, r, t) {
+  return (o) => {
+    const i = 3 * a, s = 3 * (t - a) - i, d = 1 - i - s;
+    return ((c) => ((d * c + s) * c + i) * c)(o);
+  };
+}
+class L {
+  constructor() {
+    if (this.observer = null, this.elements = /* @__PURE__ */ new Map(), typeof window > "u" || !("IntersectionObserver" in window)) {
+      console.warn("IntersectionObserver not supported");
+      return;
+    }
+  }
+  /**
+   * مراقبة عنصر
+   */
+  observe(a, r = {}) {
+    const {
+      threshold: t = 0.1,
+      rootMargin: o = "0px",
+      triggerOnce: i = !1,
+      onEnter: s,
+      onExit: d
+    } = r;
+    this.elements.set(a, r), this.observer || (this.observer = new IntersectionObserver(
+      (l) => {
+        l.forEach((c) => {
+          var f, b;
+          const g = this.elements.get(c.target);
+          g && (c.isIntersecting ? ((f = g.onEnter) == null || f.call(g, c), g.triggerOnce && this.unobserve(c.target)) : (b = g.onExit) == null || b.call(g, c));
+        });
+      },
+      { threshold: t, rootMargin: o }
+    )), this.observer.observe(a);
+  }
+  /**
+   * إيقاف مراقبة عنصر
+   */
+  unobserve(a) {
+    this.observer && (this.observer.unobserve(a), this.elements.delete(a));
+  }
+  /**
+   * إيقاف كل المراقبة
+   */
+  disconnect() {
+    this.observer && (this.observer.disconnect(), this.elements.clear(), this.observer = null);
+  }
+}
+function ke(e, a) {
+  const r = new L();
+  return r.observe(e, a), () => r.disconnect();
+}
+function Ir(e, a) {
+  const r = new L();
+  return e.forEach((t) => r.observe(t, a)), () => r.disconnect();
+}
+function Nr(e, a, r = {}) {
+  return ke(e, {
+    ...r,
+    onEnter: a
+  });
+}
+function Mr(e) {
+  const a = e.getBoundingClientRect(), r = window.innerHeight, t = a.top, o = a.height, i = 1 - (t + o) / (r + o);
+  return Math.max(0, Math.min(1, i));
+}
+function Or(e, a = 0) {
+  const r = e.getBoundingClientRect(), t = window.innerHeight, o = window.innerWidth, i = r.top + r.height * a <= t && r.bottom - r.height * a >= 0, s = r.left + r.width * a <= o && r.right - r.width * a >= 0;
+  return i && s;
+}
+const Ie = {
+  keyframes: [
+    { opacity: 0 },
+    { opacity: 1 }
+  ],
+  config: {
+    duration: 600,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Ne = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateY(30px)"
+    },
+    {
+      opacity: 1,
+      transform: "translateY(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Me = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateY(-30px)"
+    },
+    {
+      opacity: 1,
+      transform: "translateY(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Oe = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateX(-30px)"
+    },
+    {
+      opacity: 1,
+      transform: "translateX(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Ce = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateX(30px)"
+    },
+    {
+      opacity: 1,
+      transform: "translateX(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Ye = {
+  keyframes: [
+    { opacity: 1 },
+    { opacity: 0 }
+  ],
+  config: {
+    duration: 600,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Xe = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "translateY(0)"
+    },
+    {
+      opacity: 0,
+      transform: "translateY(-30px)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Re = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "translateY(0)"
+    },
+    {
+      opacity: 0,
+      transform: "translateY(30px)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Pe = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "translateX(0)"
+    },
+    {
+      opacity: 0,
+      transform: "translateX(-30px)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, ze = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "translateX(0)"
+    },
+    {
+      opacity: 0,
+      transform: "translateX(30px)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, $e = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateY(100%)"
+    },
+    {
+      opacity: 1,
+      transform: "translateY(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Be = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateY(-100%)"
+    },
+    {
+      opacity: 1,
+      transform: "translateY(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, De = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateX(-100%)"
+    },
+    {
+      opacity: 1,
+      transform: "translateX(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Ge = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateX(100%)"
+    },
+    {
+      opacity: 1,
+      transform: "translateX(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Se = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "translateY(0)"
+    },
+    {
+      opacity: 0,
+      transform: "translateY(-100%)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, _e = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "translateY(0)"
+    },
+    {
+      opacity: 0,
+      transform: "translateY(100%)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Ee = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "translateX(0)"
+    },
+    {
+      opacity: 0,
+      transform: "translateX(-100%)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Ue = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "translateX(0)"
+    },
+    {
+      opacity: 0,
+      transform: "translateX(100%)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Le = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "scale(0.5)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(1)"
+    }
+  ],
+  config: {
+    duration: 600,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Ae = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "scale(0.5) translateY(50px)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(1) translateY(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, qe = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "scale(0.5) translateY(-50px)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(1) translateY(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, He = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "scale(0.5) translateX(-50px)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(1) translateX(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, je = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "scale(0.5) translateX(50px)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(1) translateX(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Fe = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "scale(1)"
+    },
+    {
+      opacity: 0,
+      transform: "scale(0.5)"
+    }
+  ],
+  config: {
+    duration: 600,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Qe = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "scale(1) translateY(0)"
+    },
+    {
+      opacity: 0,
+      transform: "scale(0.5) translateY(-50px)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Te = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "scale(1) translateY(0)"
+    },
+    {
+      opacity: 0,
+      transform: "scale(0.5) translateY(50px)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, Ve = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "scale(0)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(1)"
+    }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, We = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "scale(0)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(1.1)"
+    },
+    {
+      transform: "scale(0.9)"
+    },
+    {
+      transform: "scale(1)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Ze = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "rotate(-180deg) scale(0.5)"
+    },
+    {
+      opacity: 1,
+      transform: "rotate(0deg) scale(1)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Je = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "rotate(-45deg) translate(-50px, -50px) scale(0.5)",
+      transformOrigin: "left bottom"
+    },
+    {
+      opacity: 1,
+      transform: "rotate(0deg) translate(0, 0) scale(1)",
+      transformOrigin: "left bottom"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, Ke = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "rotate(45deg) translate(50px, -50px) scale(0.5)",
+      transformOrigin: "right bottom"
+    },
+    {
+      opacity: 1,
+      transform: "rotate(0deg) translate(0, 0) scale(1)",
+      transformOrigin: "right bottom"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, ea = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "rotate(45deg) translate(-50px, 50px) scale(0.5)",
+      transformOrigin: "left top"
+    },
+    {
+      opacity: 1,
+      transform: "rotate(0deg) translate(0, 0) scale(1)",
+      transformOrigin: "left top"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, aa = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "rotate(-45deg) translate(50px, 50px) scale(0.5)",
+      transformOrigin: "right top"
+    },
+    {
+      opacity: 1,
+      transform: "rotate(0deg) translate(0, 0) scale(1)",
+      transformOrigin: "right top"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, ra = {
+  keyframes: [
+    {
+      opacity: 1,
+      transform: "rotate(0deg) scale(1)"
+    },
+    {
+      opacity: 0,
+      transform: "rotate(180deg) scale(0.5)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, ta = {
+  keyframes: [
+    { transform: "rotate(0deg)" },
+    { transform: "rotate(360deg)" }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "linear",
+    iterations: 1 / 0,
+    fill: "both"
+  }
+}, na = {
+  keyframes: [
+    { transform: "rotate(360deg)" },
+    { transform: "rotate(0deg)" }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "linear",
+    iterations: 1 / 0,
+    fill: "both"
+  }
+}, oa = {
+  keyframes: [
+    { transform: "rotate(0deg)" },
+    { transform: "rotate(360deg)" }
+  ],
+  config: {
+    duration: 3e3,
+    easing: "linear",
+    iterations: 1 / 0,
+    fill: "both"
+  }
+}, ia = {
+  keyframes: [
+    { transform: "rotate(0deg)" },
+    { transform: "rotate(360deg)" }
+  ],
+  config: {
+    duration: 500,
+    easing: "linear",
+    iterations: 1 / 0,
+    fill: "both"
+  }
+}, sa = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "scale(0.3)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(1.05)"
+    },
+    {
+      transform: "scale(0.9)"
+    },
+    {
+      transform: "scale(1)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, la = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateY(100%) scale(0.7)"
+    },
+    {
+      opacity: 1,
+      transform: "translateY(-20px) scale(1.05)"
+    },
+    {
+      transform: "translateY(10px) scale(0.95)"
+    },
+    {
+      transform: "translateY(0) scale(1)"
+    }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, da = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateY(-100%) scale(0.7)"
+    },
+    {
+      opacity: 1,
+      transform: "translateY(20px) scale(1.05)"
+    },
+    {
+      transform: "translateY(-10px) scale(0.95)"
+    },
+    {
+      transform: "translateY(0) scale(1)"
+    }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, ca = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateX(-100%) scale(0.7)"
+    },
+    {
+      opacity: 1,
+      transform: "translateX(20px) scale(1.05)"
+    },
+    {
+      transform: "translateX(-10px) scale(0.95)"
+    },
+    {
+      transform: "translateX(0) scale(1)"
+    }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, ga = {
+  keyframes: [
+    {
+      opacity: 0,
+      transform: "translateX(100%) scale(0.7)"
+    },
+    {
+      opacity: 1,
+      transform: "translateX(-20px) scale(1.05)"
+    },
+    {
+      transform: "translateX(10px) scale(0.95)"
+    },
+    {
+      transform: "translateX(0) scale(1)"
+    }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, pa = {
+  keyframes: [
+    {
+      transform: "scale(1)"
+    },
+    {
+      transform: "scale(1.1)"
+    },
+    {
+      opacity: 1,
+      transform: "scale(0.3)"
+    },
+    {
+      opacity: 0,
+      transform: "scale(0)"
+    }
+  ],
+  config: {
+    duration: 800,
+    easing: "ease-in",
+    fill: "both"
+  }
+}, ua = {
+  keyframes: [
+    { transform: "translateY(0)" },
+    { transform: "translateY(-30px)" },
+    { transform: "translateY(0)" }
+  ],
+  config: {
+    duration: 600,
+    easing: "ease-out",
+    fill: "both"
+  }
+}, ma = {
+  keyframes: [
+    { transform: "translateY(0)", offset: 0 },
+    { transform: "translateY(-20px)", offset: 0.4 },
+    { transform: "translateY(0)", offset: 0.5 },
+    { transform: "translateY(-10px)", offset: 0.7 },
+    { transform: "translateY(0)", offset: 1 }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-out",
+    iterations: 1 / 0,
+    fill: "both"
+  }
+}, ba = {
+  keyframes: [
+    { transform: "translateX(0)" },
+    { transform: "translateX(-10px)" },
+    { transform: "translateX(10px)" },
+    { transform: "translateX(-10px)" },
+    { transform: "translateX(10px)" },
+    { transform: "translateX(0)" }
+  ],
+  config: {
+    duration: 500,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, fa = {
+  keyframes: [
+    { transform: "translateY(0)" },
+    { transform: "translateY(-10px)" },
+    { transform: "translateY(10px)" },
+    { transform: "translateY(-10px)" },
+    { transform: "translateY(10px)" },
+    { transform: "translateY(0)" }
+  ],
+  config: {
+    duration: 500,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, ha = {
+  keyframes: [
+    { transform: "scale(1)" },
+    { transform: "scale(1.05)" },
+    { transform: "scale(1)" }
+  ],
+  config: {
+    duration: 500,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, xa = {
+  keyframes: [
+    { transform: "scale(1)" },
+    { transform: "scale(1.05)" },
+    { transform: "scale(1)" }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-in-out",
+    iterations: 1 / 0,
+    fill: "both"
+  }
+}, ya = {
+  keyframes: [
+    { transform: "scale(1)" },
+    { transform: "scale(1.3)" },
+    { transform: "scale(1)" },
+    { transform: "scale(1.3)" },
+    { transform: "scale(1)" }
+  ],
+  config: {
+    duration: 1300,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, wa = {
+  keyframes: [
+    { opacity: 1 },
+    { opacity: 0 },
+    { opacity: 1 },
+    { opacity: 0 },
+    { opacity: 1 }
+  ],
+  config: {
+    duration: 750,
+    easing: "linear",
+    fill: "both"
+  }
+}, va = {
+  keyframes: [
+    { transform: "scaleX(1) scaleY(1)" },
+    { transform: "scaleX(1.25) scaleY(0.75)" },
+    { transform: "scaleX(0.75) scaleY(1.25)" },
+    { transform: "scaleX(1.15) scaleY(0.85)" },
+    { transform: "scaleX(0.95) scaleY(1.05)" },
+    { transform: "scaleX(1) scaleY(1)" }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, ka = {
+  keyframes: [
+    { transform: "skewX(0deg) skewY(0deg)" },
+    { transform: "skewX(-12.5deg) skewY(-12.5deg)" },
+    { transform: "skewX(6.25deg) skewY(6.25deg)" },
+    { transform: "skewX(-3.125deg) skewY(-3.125deg)" },
+    { transform: "skewX(1.5625deg) skewY(1.5625deg)" },
+    { transform: "skewX(0deg) skewY(0deg)" }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, Ia = {
+  keyframes: [
+    { transform: "rotate(0deg)", transformOrigin: "top center" },
+    { transform: "rotate(15deg)", transformOrigin: "top center" },
+    { transform: "rotate(-10deg)", transformOrigin: "top center" },
+    { transform: "rotate(5deg)", transformOrigin: "top center" },
+    { transform: "rotate(-5deg)", transformOrigin: "top center" },
+    { transform: "rotate(0deg)", transformOrigin: "top center" }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, Na = {
+  keyframes: [
+    { transform: "translateX(0%) rotate(0deg)" },
+    { transform: "translateX(-25%) rotate(-5deg)" },
+    { transform: "translateX(20%) rotate(3deg)" },
+    { transform: "translateX(-15%) rotate(-3deg)" },
+    { transform: "translateX(10%) rotate(2deg)" },
+    { transform: "translateX(-5%) rotate(-1deg)" },
+    { transform: "translateX(0%) rotate(0deg)" }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, Ma = {
+  keyframes: [
+    { transform: "scale(1) rotate(0deg)" },
+    { transform: "scale(0.9) rotate(-3deg)" },
+    { transform: "scale(0.9) rotate(-3deg)" },
+    { transform: "scale(1.1) rotate(3deg)" },
+    { transform: "scale(1.1) rotate(-3deg)" },
+    { transform: "scale(1.1) rotate(3deg)" },
+    { transform: "scale(1.1) rotate(-3deg)" },
+    { transform: "scale(1.1) rotate(3deg)" },
+    { transform: "scale(1.1) rotate(-3deg)" },
+    { transform: "scale(1) rotate(0deg)" }
+  ],
+  config: {
+    duration: 1e3,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+}, I = {
+  // Fade (10)
+  fadeIn: Ie,
+  fadeInUp: Ne,
+  fadeInDown: Me,
+  fadeInLeft: Oe,
+  fadeInRight: Ce,
+  fadeOut: Ye,
+  fadeOutUp: Xe,
+  fadeOutDown: Re,
+  fadeOutLeft: Pe,
+  fadeOutRight: ze,
+  // Slide (8)
+  slideInUp: $e,
+  slideInDown: Be,
+  slideInLeft: De,
+  slideInRight: Ge,
+  slideOutUp: Se,
+  slideOutDown: _e,
+  slideOutLeft: Ee,
+  slideOutRight: Ue,
+  // Zoom (10)
+  zoomIn: Le,
+  zoomInUp: Ae,
+  zoomInDown: qe,
+  zoomInLeft: He,
+  zoomInRight: je,
+  zoomOut: Fe,
+  zoomOutUp: Qe,
+  zoomOutDown: Te,
+  zoomInBig: Ve,
+  zoomInBounce: We,
+  // Rotate (10)
+  rotateIn: Ze,
+  rotateInUpLeft: Je,
+  rotateInUpRight: Ke,
+  rotateInDownLeft: ea,
+  rotateInDownRight: aa,
+  rotateOut: ra,
+  spin: ta,
+  spinReverse: na,
+  spinSlow: oa,
+  spinFast: ia,
+  // Bounce (8)
+  bounceIn: sa,
+  bounceInUp: la,
+  bounceInDown: da,
+  bounceInLeft: ca,
+  bounceInRight: ga,
+  bounceOut: pa,
+  bounce: ua,
+  bounceLoop: ma,
+  // Attention (12)
+  shake: ba,
+  shakeY: fa,
+  pulse: ha,
+  pulseLoop: xa,
+  heartbeat: ya,
+  flash: wa,
+  rubberBand: va,
+  jello: ka,
+  swing: Ia,
+  wobble: Na,
+  tada: Ma
+};
+function Cr(e) {
+  return I[e];
+}
+function Oa() {
+  return Object.keys(I);
+}
+function Yr(e) {
+  return Oa().filter((a) => a.startsWith(e));
+}
+const Ca = ({
+  children: e,
+  preset: a = "fadeIn",
+  duration: r,
+  delay: t,
+  easing: o,
+  iterations: i,
+  trigger: s = "mount",
+  threshold: d = 0.1,
+  triggerOnce: l = !0,
+  onAnimationStart: c,
+  onAnimationEnd: g,
+  className: f = "",
+  style: b = {}
+}) => {
+  const p = u(null), h = u(null), x = u(null), N = u(!1), k = async () => {
+    var z, $, B, D;
+    if (!p.current || l && N.current) return;
+    const w = I[a];
+    if (!w) {
+      console.warn(`[TeleMotion] Preset "${a}" not found`);
+      return;
+    }
+    h.current || (h.current = new y(p.current)), c == null || c();
+    const M = {
+      ...w.config,
+      duration: r ?? ((z = w.config) == null ? void 0 : z.duration),
+      delay: t ?? (($ = w.config) == null ? void 0 : $.delay),
+      easing: o ?? ((B = w.config) == null ? void 0 : B.easing),
+      iterations: i ?? ((D = w.config) == null ? void 0 : D.iterations)
+    };
+    try {
+      await h.current.animate(w.keyframes, M), N.current = !0, g == null || g();
+    } catch (A) {
+      console.error("[TeleMotion] Animation error:", A);
+    }
+  };
+  v(() => {
+    s === "mount" && k();
+  }, [a, r, t, o, i]), v(() => {
+    if (!(s !== "scroll" || !p.current))
+      return x.current = new IntersectionObserver(
+        (w) => {
+          w.forEach((M) => {
+            M.isIntersecting && (k(), l && x.current && x.current.unobserve(M.target));
+          });
+        },
+        { threshold: d }
+      ), x.current.observe(p.current), () => {
+        x.current && x.current.disconnect();
+      };
+  }, [s, d, l, a]);
+  const R = () => {
+    s === "hover" && k();
+  }, P = () => {
+    s === "click" && k();
+  };
+  return v(() => () => {
+    h.current && h.current.stop();
+  }, []), /* @__PURE__ */ n(
+    "div",
+    {
+      ref: p,
+      className: f,
+      style: b,
+      onMouseEnter: s === "hover" ? R : void 0,
+      onClick: s === "click" ? P : void 0,
+      children: e
+    }
+  );
+};
+Ca.displayName = "TeleMotion";
+function Xr() {
+  const e = u(null), a = u(null), r = async (t, o) => {
+    e.current && (a.current || (a.current = new y(e.current)), await a.current.animate(t, o));
+  };
+  return v(() => () => {
+    a.current && a.current.stop();
+  }, []), [e, r];
+}
+function Rr(e, a) {
+  const r = u(null), t = u(null), o = async () => {
+    if (!r.current) return;
+    const i = I[e];
+    if (!i) {
+      console.warn(`[usePresetAnimation] Preset "${e}" not found`);
+      return;
+    }
+    t.current || (t.current = new y(r.current));
+    const s = {
+      ...i.config,
+      ...a
+    };
+    await t.current.animate(i.keyframes, s);
+  };
+  return v(() => {
+    (a == null ? void 0 : a.trigger) !== "manual" && o();
+  }, [e]), v(() => () => {
+    t.current && t.current.stop();
+  }, []), [r, o];
+}
+function Pr(e, a) {
+  const r = u(null), t = u(null), o = u(null), i = u(!1);
+  return v(() => {
+    if (!r.current) return;
+    const s = I[e];
+    if (!s) {
+      console.warn(`[useScrollAnimation] Preset "${e}" not found`);
+      return;
+    }
+    return t.current = new y(r.current), o.current = new IntersectionObserver(
+      (d) => {
+        d.forEach((l) => {
+          if (l.isIntersecting && !i.current && t.current) {
+            const c = {
+              ...s.config,
+              ...a == null ? void 0 : a.config
+            };
+            t.current.animate(s.keyframes, c), i.current = !0, (a == null ? void 0 : a.triggerOnce) !== !1 && o.current && o.current.unobserve(l.target);
+          }
+        });
+      },
+      { threshold: (a == null ? void 0 : a.threshold) ?? 0.1 }
+    ), o.current.observe(r.current), () => {
+      o.current && o.current.disconnect(), t.current && t.current.stop();
+    };
+  }, [e, a == null ? void 0 : a.threshold, a == null ? void 0 : a.triggerOnce]), r;
+}
+function zr(e, a = 100, r) {
+  const t = u(null);
+  return [t, async () => {
+    if (!t.current) return;
+    const i = I[e];
+    if (!i) return;
+    const d = Array.from(t.current.children).map((l, c) => new y(l).animate(i.keyframes, {
+      ...i.config,
+      ...r,
+      delay: ((r == null ? void 0 : r.delay) ?? 0) + a * c
+    }));
+    await Promise.all(d);
+  }];
+}
+function $r(e, a) {
+  const r = u(null), t = u(null);
+  return [r, { onMouseEnter: async () => {
+    if (!r.current) return;
+    const s = I[e];
+    s && (t.current || (t.current = new y(r.current)), await t.current.animate(s.keyframes, {
+      ...s.config,
+      ...a
+    }));
+  }, onMouseLeave: () => {
+    t.current && t.current.stop();
+  } }];
+}
+function Br(e = 0.1) {
+  const a = u(null), [r, t] = S(!1);
+  return v(() => {
+    if (!a.current) return;
+    const o = new IntersectionObserver(
+      (i) => {
+        i.forEach((s) => {
+          t(s.isIntersecting);
+        });
+      },
+      { threshold: e }
+    );
+    return o.observe(a.current), () => {
+      o.disconnect();
+    };
+  }, [e]), [a, r];
+}
 export {
-  X as AnimatedBounce,
-  Z as AnimatedGlow,
-  V as AnimatedPulse,
-  T as AnimatedShimmer,
-  S as Button,
-  re as Button3DBlue,
-  ne as Button3DGreen,
-  te as Button3DPink,
-  le as Container,
-  be as ContainerButton,
-  ge as ContainerContent,
-  se as ContainerImage,
-  pe as FeatureCard,
-  L as GhostBlue,
-  ae as GhostPurple,
-  ee as GhostRed,
-  U as GlassBlue,
-  x as GlassButton,
-  Y as GlassPink,
-  W as GlassPurple,
-  O as GlassWhite,
-  E as GradientBlueGreen,
-  H as GradientCyan,
-  F as GradientOrangeRed,
-  A as GradientPurplePink,
-  q as GradientSunset,
-  M as Home,
-  ie as NeonBlue,
-  oe as NeonGreen,
-  de as NeonPink,
-  J as OutlinedBlue,
-  Q as OutlinedGradient,
-  K as OutlinedPurple,
-  ce as ProductCard,
-  D as SolidBlue,
-  R as SolidGreen,
-  j as SolidPill,
-  I as SolidPurple,
-  z as SolidRed,
-  me as StatCard,
-  B as gradients
+  Va as AnimatedBounce,
+  Wa as AnimatedGlow,
+  Ta as AnimatedPulse,
+  Qa as AnimatedShimmer,
+  y as Animator,
+  Ra as Button,
+  tr as Button3DBlue,
+  or as Button3DGreen,
+  nr as Button3DPink,
+  dr as Container,
+  pr as ContainerButton,
+  gr as ContainerContent,
+  cr as ContainerImage,
+  ur as FeatureCard,
+  er as GhostBlue,
+  rr as GhostPurple,
+  ar as GhostRed,
+  qa as GlassBlue,
+  O as GlassButton,
+  Fa as GlassPink,
+  Ha as GlassPurple,
+  ja as GlassWhite,
+  Ea as GradientBlueGreen,
+  La as GradientCyan,
+  Ua as GradientOrangeRed,
+  _a as GradientPurplePink,
+  Aa as GradientSunset,
+  Pa as Home,
+  ir as NeonBlue,
+  lr as NeonGreen,
+  sr as NeonPink,
+  Za as OutlinedBlue,
+  Ka as OutlinedGradient,
+  Ja as OutlinedPurple,
+  mr as ProductCard,
+  L as ScrollObserver,
+  $a as SolidBlue,
+  Da as SolidGreen,
+  Sa as SolidPill,
+  Ga as SolidPurple,
+  Ba as SolidRed,
+  br as StatCard,
+  Ca as TeleMotion,
+  hr as animateGroup,
+  Nr as animateOnScroll,
+  kr as bezier,
+  fr as createAnimator,
+  ve as easings,
+  wr as getEasing,
+  Cr as getPreset,
+  Oa as getPresetNames,
+  Yr as getPresetsByCategory,
+  Mr as getScrollProgress,
+  za as gradients,
+  Or as isInViewport,
+  ke as observeElement,
+  Ir as observeElements,
+  yr as parallel,
+  I as presets,
+  xr as sequence,
+  vr as spring,
+  Xr as useAnimator,
+  $r as useHoverAnimation,
+  Br as useInView,
+  Rr as usePresetAnimation,
+  Pr as useScrollAnimation,
+  zr as useStagger
 };