@floegence/floe-webapp-core 0.35.10 → 0.35.11

package/dist/components/ui/Card.js

@@ -1,204 +1,212 @@
-import { spread as m, mergeProps as h, insert as i, effect as A, setStyleProperty as L, className as E, memo as R, template as v, use as j, delegateEvents as H } from "solid-js/web";
+import { spread as g, mergeProps as h, insert as i, effect as A, setStyleProperty as L, className as E, memo as R, template as v, use as j, delegateEvents as H } from "solid-js/web";
 import { splitProps as b, createSignal as F, onCleanup as q } from "solid-js";
-import { cn as p } from "../../utils/cn.js";
-var W = /* @__PURE__ */ v('<div style="background-size:200% 200%;animation:gradient-shift 3s ease infinite">'), D = /* @__PURE__ */ v('<div class="absolute inset-[1px] rounded-[7px] bg-card">'), G = /* @__PURE__ */ v('<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">'), N = /* @__PURE__ */ v('<div class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent">'), Z = /* @__PURE__ */ v("<div><div>"), T = /* @__PURE__ */ v("<div>"), J = /* @__PURE__ */ v("<h3>"), K = /* @__PURE__ */ v("<p>"), O = /* @__PURE__ */ v('<div><div class="relative z-10"style=transform:translateZ(20px)>'), Q = /* @__PURE__ */ v('<div class="pointer-events-none absolute inset-0 z-20 opacity-0 transition-opacity duration-300">'), U = /* @__PURE__ */ v('<div><div class="absolute inset-0"style="background:conic-gradient(from 0deg, var(--primary), var(--accent), var(--secondary), var(--primary))"></div><div class="relative rounded-[10px] bg-card h-full">'), V = /* @__PURE__ */ v('<div><div class="absolute inset-0 -z-10 overflow-hidden"><div class="absolute -top-1/2 -left-1/2 w-full h-full rounded-full bg-primary/20"style="animation:morph 8s ease-in-out infinite;filter:blur(40px)"></div><div class="absolute -bottom-1/2 -right-1/2 w-full h-full rounded-full bg-accent/20"style="animation:morph 8s ease-in-out infinite reverse;filter:blur(40px)"></div></div><div class="relative z-10">');
+import { cn as f } from "../../utils/cn.js";
+var W = /* @__PURE__ */ v('<div style="background-size:200% 200%;animation:gradient-shift 3s ease infinite">'), D = /* @__PURE__ */ v('<div class="absolute inset-[1px] rounded-[7px] bg-card">'), G = /* @__PURE__ */ v('<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">'), N = /* @__PURE__ */ v('<div class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite]"style="background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 12%, transparent), transparent)">'), Z = /* @__PURE__ */ v("<div><div>"), k = /* @__PURE__ */ v("<div>"), J = /* @__PURE__ */ v("<h3>"), K = /* @__PURE__ */ v("<p>"), O = /* @__PURE__ */ v('<div><div class="relative z-10"style=transform:translateZ(20px)>'), Q = /* @__PURE__ */ v('<div class="pointer-events-none absolute inset-0 z-20 opacity-0 transition-opacity duration-300">'), U = /* @__PURE__ */ v('<div><div class="absolute inset-0"style="background:conic-gradient(from 0deg, var(--primary), var(--accent), var(--secondary), var(--primary))"></div><div class="relative rounded-[10px] bg-card h-full">'), V = /* @__PURE__ */ v('<div><div class="absolute inset-0 -z-10 overflow-hidden"><div class="absolute -top-1/2 -left-1/2 w-full h-full rounded-full bg-primary/20"style="animation:morph 8s ease-in-out infinite;filter:blur(40px)"></div><div class="absolute -bottom-1/2 -right-1/2 w-full h-full rounded-full bg-accent/20"style="animation:morph 8s ease-in-out infinite reverse;filter:blur(40px)"></div></div><div class="relative z-10">');
 function ne(l) {
-  const [e, o] = b(l, ["variant", "enableTilt", "gradientColors", "glowColor", "class", "children", "style"]), t = () => e.variant ?? "default", [d, g] = F({});
+  const [e, o] = b(l, ["variant", "enableTilt", "gradientColors", "glowColor", "class", "children", "style"]), r = () => e.variant ?? "default", [d, m] = F({});
   let u, s = null, _ = 0, y = 0;
-  const f = () => {
-    if (s = null, !u || !e.enableTilt && t() !== "spotlight") return;
-    const r = u.getBoundingClientRect(), a = _ - r.left, c = y - r.top;
+  const p = () => {
+    if (s = null, !u || !e.enableTilt && r() !== "spotlight") return;
+    const t = u.getBoundingClientRect(), a = _ - t.left, c = y - t.top;
     if (e.enableTilt) {
-      const w = r.width / 2, Y = r.height / 2, B = (c - Y) / 10, I = (w - a) / 10;
-      g({
+      const C = t.width / 2, Y = t.height / 2, B = (c - Y) / 10, I = (C - a) / 10;
+      m({
         transform: `perspective(1000px) rotateX(${B}deg) rotateY(${I}deg) scale3d(1.02, 1.02, 1.02)`
       });
     }
-    t() === "spotlight" && X({
+    r() === "spotlight" && X({
       x: a,
       y: c
     });
-  }, M = (r) => {
-    if (u && !(!e.enableTilt && t() !== "spotlight") && (_ = r.clientX, y = r.clientY, s === null)) {
+  }, M = (t) => {
+    if (u && !(!e.enableTilt && r() !== "spotlight") && (_ = t.clientX, y = t.clientY, s === null)) {
       if (typeof requestAnimationFrame > "u") {
-        f();
+        p();
         return;
       }
-      s = requestAnimationFrame(f);
+      s = requestAnimationFrame(p);
     }
   }, S = () => {
-    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null), e.enableTilt && g({
+    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null), e.enableTilt && m({
       transform: "perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"
     });
-  }, [C, X] = F({
+  }, [w, X] = F({
     x: 0,
     y: 0
   });
   q(() => {
     s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null);
   });
-  const k = "rounded-lg transition-all duration-300 ease-out", P = {
+  const T = "rounded-lg transition-all duration-300 ease-out", P = {
     default: "bg-card border border-border shadow-sm hover:shadow-md",
     "hover-lift": "bg-card border border-border shadow-sm hover:shadow-xl hover:-translate-y-1",
     "gradient-border": "relative bg-card overflow-hidden",
-    glass: "backdrop-blur-xl bg-card/30 border border-white/10 shadow-lg",
+    glass: "backdrop-blur-xl bg-card/30 border border-border/50 shadow-lg",
     spotlight: "relative bg-card border border-border overflow-hidden",
     shimmer: "relative bg-card border border-border overflow-hidden",
     glow: "bg-card border border-border shadow-sm"
   }, z = () => {
-    if (t() !== "gradient-border") return null;
-    const r = e.gradientColors ?? "from-primary via-accent to-secondary";
+    if (r() !== "gradient-border") return null;
+    const t = e.gradientColors ?? "from-primary via-accent to-secondary";
     return [(() => {
       var a = W();
-      return A(() => E(a, p("absolute inset-0 bg-gradient-to-r opacity-75", r, "animate-[gradient-rotate_3s_linear_infinite]"))), a;
+      return A(() => E(a, f("absolute inset-0 bg-gradient-to-r opacity-75", t, "animate-[gradient-rotate_3s_linear_infinite]"))), a;
     })(), D()];
-  }, n = () => t() !== "spotlight" ? null : (() => {
-    var r = G();
-    return A((a) => L(r, "background", `radial-gradient(400px circle at ${C().x}px ${C().y}px, rgba(var(--primary-rgb, 99, 102, 241), 0.15), transparent 40%)`)), r;
-  })(), $ = () => t() !== "shimmer" ? null : N(), x = () => {
-    if (t() !== "glow") return {};
-    const r = e.glowColor ?? "var(--primary)";
+  }, n = () => r() !== "spotlight" ? null : (() => {
+    var t = G();
+    return A((a) => L(t, "background", `radial-gradient(
+            400px circle at ${w().x}px ${w().y}px,
+            color-mix(in srgb, var(--primary) 18%, transparent),
+            transparent 40%
+          )`)), t;
+  })(), x = () => r() !== "shimmer" ? null : N(), $ = () => {
+    if (r() !== "glow") return {};
+    const t = e.glowColor ?? "var(--primary)";
     return {
-      "box-shadow": `0 0 0 1px ${r}, 0 0 20px -5px ${r}, 0 0 40px -10px ${r}`
+      "box-shadow": `0 0 0 1px ${t}, 0 0 20px -5px ${t}, 0 0 40px -10px ${t}`
     };
   };
   return (() => {
-    var r = Z(), a = r.firstChild;
-    r.addEventListener("mouseleave", S), r.$$mousemove = M;
+    var t = Z(), a = t.firstChild;
+    t.addEventListener("mouseleave", S), t.$$mousemove = M;
     var c = u;
-    return typeof c == "function" ? j(c, r) : u = r, m(r, h({
+    return typeof c == "function" ? j(c, t) : u = t, g(t, h({
       get class() {
-        return p(k, P[t()], t() === "spotlight" && "group", e.class);
+        return f(T, P[r()], r() === "spotlight" && "group", e.class);
       },
       get style() {
         return {
           ...typeof e.style == "object" ? e.style : {},
           ...d(),
-          ...x(),
+          ...$(),
           "transform-style": "preserve-3d"
         };
       }
-    }, o), !1, !0), i(r, z, a), i(r, n, a), i(r, $, a), i(a, () => e.children), A(() => E(a, p("relative z-10", t() === "gradient-border" && "relative"))), r;
+    }, o), !1, !0), i(t, z, a), i(t, n, a), i(t, x, a), i(a, () => e.children), A(() => E(a, f("relative z-10", r() === "gradient-border" && "relative"))), t;
   })();
 }
 function le(l) {
   const [e, o] = b(l, ["class", "children"]);
   return (() => {
-    var t = T();
-    return m(t, h({
+    var r = k();
+    return g(r, h({
       get class() {
-        return p("flex flex-col space-y-1.5 p-4", e.class);
+        return f("flex flex-col space-y-1.5 p-4", e.class);
       }
-    }, o), !1, !0), i(t, () => e.children), t;
+    }, o), !1, !0), i(r, () => e.children), r;
   })();
 }
 function oe(l) {
   const [e, o] = b(l, ["class", "children"]);
   return (() => {
-    var t = J();
-    return m(t, h({
+    var r = J();
+    return g(r, h({
       get class() {
-        return p("text-sm font-semibold leading-none tracking-tight", e.class);
+        return f("text-sm font-semibold leading-none tracking-tight", e.class);
       }
-    }, o), !1, !0), i(t, () => e.children), t;
+    }, o), !1, !0), i(r, () => e.children), r;
   })();
 }
 function ae(l) {
   const [e, o] = b(l, ["class", "children"]);
   return (() => {
-    var t = K();
-    return m(t, h({
+    var r = K();
+    return g(r, h({
       get class() {
-        return p("text-xs text-muted-foreground", e.class);
+        return f("text-xs text-muted-foreground", e.class);
       }
-    }, o), !1, !0), i(t, () => e.children), t;
+    }, o), !1, !0), i(r, () => e.children), r;
   })();
 }
 function se(l) {
   const [e, o] = b(l, ["class", "children"]);
   return (() => {
-    var t = T();
-    return m(t, h({
+    var r = k();
+    return g(r, h({
       get class() {
-        return p("p-4 pt-0", e.class);
+        return f("p-4 pt-0", e.class);
       }
-    }, o), !1, !0), i(t, () => e.children), t;
+    }, o), !1, !0), i(r, () => e.children), r;
   })();
 }
 function ie(l) {
   const [e, o] = b(l, ["class", "children"]);
   return (() => {
-    var t = T();
-    return m(t, h({
+    var r = k();
+    return g(r, h({
       get class() {
-        return p("flex items-center p-4 pt-0", e.class);
+        return f("flex items-center p-4 pt-0", e.class);
       }
-    }, o), !1, !0), i(t, () => e.children), t;
+    }, o), !1, !0), i(r, () => e.children), r;
   })();
 }
 function de(l) {
-  const [e, o] = b(l, ["intensity", "shine", "borderGlow", "class", "children", "style"]), [t, d] = F(""), [g, u] = F({
+  const [e, o] = b(l, ["intensity", "shine", "borderGlow", "class", "children", "style"]), [r, d] = F(""), [m, u] = F({
     x: 50,
     y: 50
   }), [s, _] = F(!1);
-  let y, f = null, M = 0, S = 0;
-  const C = () => e.intensity ?? 10, X = () => {
-    if (f = null, !y) return;
-    const n = y.getBoundingClientRect(), $ = M - n.left, x = S - n.top, r = n.width / 2, a = n.height / 2, c = (x - a) / a * C(), w = (r - $) / r * C();
-    d(`perspective(1000px) rotateX(${-c}deg) rotateY(${w}deg)`), e.shine && u({
-      x: $ / n.width * 100,
-      y: x / n.height * 100
+  let y, p = null, M = 0, S = 0;
+  const w = () => e.intensity ?? 10, X = () => {
+    if (p = null, !y) return;
+    const n = y.getBoundingClientRect(), x = M - n.left, $ = S - n.top, t = n.width / 2, a = n.height / 2, c = ($ - a) / a * w(), C = (t - x) / t * w();
+    d(`perspective(1000px) rotateX(${-c}deg) rotateY(${C}deg)`), e.shine && u({
+      x: x / n.width * 100,
+      y: $ / n.height * 100
     });
-  }, k = (n) => {
-    if (y && (M = n.clientX, S = n.clientY, f === null)) {
+  }, T = (n) => {
+    if (y && (M = n.clientX, S = n.clientY, p === null)) {
       if (typeof requestAnimationFrame > "u") {
         X();
         return;
       }
-      f = requestAnimationFrame(X);
+      p = requestAnimationFrame(X);
     }
   }, P = () => _(!0), z = () => {
-    f !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(f), f = null), _(!1), d("perspective(1000px) rotateX(0deg) rotateY(0deg)");
+    p !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(p), p = null), _(!1), d("perspective(1000px) rotateX(0deg) rotateY(0deg)");
   };
   return q(() => {
-    f !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(f), f = null);
+    p !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(p), p = null);
   }), (() => {
-    var n = O(), $ = n.firstChild;
-    n.addEventListener("mouseleave", z), n.addEventListener("mouseenter", P), n.$$mousemove = k;
-    var x = y;
-    return typeof x == "function" ? j(x, n) : y = n, m(n, h({
+    var n = O(), x = n.firstChild;
+    n.addEventListener("mouseleave", z), n.addEventListener("mouseenter", P), n.$$mousemove = T;
+    var $ = y;
+    return typeof $ == "function" ? j($, n) : y = n, g(n, h({
       get class() {
-        return p("relative rounded-xl bg-card border border-border overflow-hidden", "transition-all duration-200 ease-out", e.borderGlow && s() && "shadow-[0_0_30px_-5px_var(--primary)]", e.class);
+        return f("relative rounded-xl bg-card border border-border overflow-hidden", "transition-all duration-200 ease-out", e.borderGlow && s() && "shadow-[0_0_30px_-5px_var(--primary)]", e.class);
       },
       get style() {
         return {
           ...typeof e.style == "object" ? e.style : {},
-          transform: t(),
+          transform: r(),
           "transform-style": "preserve-3d"
         };
       }
     }, o), !1, !0), i(n, (() => {
-      var r = R(() => !!e.shine);
-      return () => r() && (() => {
+      var t = R(() => !!e.shine);
+      return () => t() && (() => {
         var a = Q();
         return A((c) => {
-          var w = !!s(), Y = `radial-gradient(circle at ${g().x}% ${g().y}%, rgba(255,255,255,0.2) 0%, transparent 50%)`;
-          return w !== c.e && a.classList.toggle("opacity-100", c.e = w), Y !== c.t && L(a, "background", c.t = Y), c;
+          var C = !!s(), Y = `radial-gradient(
+              circle at ${m().x}% ${m().y}%,
+              color-mix(in srgb, var(--primary) 18%, transparent) 0%,
+              transparent 50%
+            )`;
+          return C !== c.e && a.classList.toggle("opacity-100", c.e = C), Y !== c.t && L(a, "background", c.t = Y), c;
         }, {
           e: void 0,
           t: void 0
         }), a;
       })();
-    })(), $), i($, () => e.children), n;
+    })(), x), i(x, () => e.children), n;
   })();
 }
 function ce(l) {
-  const [e, o] = b(l, ["duration", "borderWidth", "colors", "class", "children", "style"]), t = () => e.duration ?? 3, d = () => e.borderWidth ?? 2;
+  const [e, o] = b(l, ["duration", "borderWidth", "colors", "class", "children", "style"]), r = () => e.duration ?? 3, d = () => e.borderWidth ?? 2;
   return (() => {
-    var g = U(), u = g.firstChild, s = u.nextSibling;
-    return m(g, h({
+    var m = U(), u = m.firstChild, s = u.nextSibling;
+    return g(m, h({
       get class() {
-        return p("relative rounded-xl p-[2px] overflow-hidden", e.class);
+        return f("relative rounded-xl p-[2px] overflow-hidden", e.class);
       },
       get style() {
         return {
@@ -206,41 +214,41 @@ function ce(l) {
           padding: `${d()}px`
         };
       }
-    }, o), !1, !0), i(s, () => e.children), A((_) => L(u, "animation", `spin ${t()}s linear infinite`)), g;
+    }, o), !1, !0), i(s, () => e.children), A((_) => L(u, "animation", `spin ${r()}s linear infinite`)), m;
   })();
 }
 function ue(l) {
-  const [e, o] = b(l, ["color", "pulse", "class", "children", "style"]), t = () => e.color ?? "var(--primary)";
+  const [e, o] = b(l, ["color", "pulse", "class", "children", "style"]), r = () => e.color ?? "var(--primary)";
   return (() => {
-    var d = T();
-    return m(d, h({
+    var d = k();
+    return g(d, h({
       get class() {
-        return p("relative rounded-xl bg-card border-2 transition-shadow duration-300", e.pulse && "animate-pulse", e.class);
+        return f("relative rounded-xl bg-card border-2 transition-shadow duration-300", e.pulse && "animate-pulse", e.class);
       },
       get style() {
         return {
           ...typeof e.style == "object" ? e.style : {},
-          "border-color": t(),
-          "box-shadow": `0 0 5px ${t()}, 0 0 20px ${t()}, 0 0 40px ${t()}, inset 0 0 20px ${t()}20`
+          "border-color": r(),
+          "box-shadow": `0 0 5px ${r()}, 0 0 20px color-mix(in srgb, ${r()} 72%, transparent), 0 0 40px color-mix(in srgb, ${r()} 45%, transparent), inset 0 0 20px color-mix(in srgb, ${r()} 15%, transparent)`
         };
       }
     }, o), !1, !0), i(d, () => e.children), d;
   })();
 }
-function fe(l) {
+function pe(l) {
   const [e, o] = b(l, ["class", "children", "style"]);
   return (() => {
-    var t = V(), d = t.firstChild, g = d.firstChild;
-    g.nextSibling;
+    var r = V(), d = r.firstChild, m = d.firstChild;
+    m.nextSibling;
     var u = d.nextSibling;
-    return m(t, h({
+    return g(r, h({
       get class() {
-        return p("relative rounded-2xl bg-card/80 backdrop-blur-sm border border-border overflow-hidden", e.class);
+        return f("relative rounded-2xl bg-card/80 backdrop-blur-sm border border-border overflow-hidden", e.class);
       },
       get style() {
         return e.style;
       }
-    }, o), !1, !0), i(u, () => e.children), t;
+    }, o), !1, !0), i(u, () => e.children), r;
   })();
 }
 H(["mousemove"]);
@@ -253,6 +261,6 @@ export {
   le as CardHeader,
   oe as CardTitle,
   de as Interactive3DCard,
-  fe as MorphCard,
+  pe as MorphCard,
   ue as NeonCard
 };