@floegence/floe-webapp-core 0.86.58 → 0.86.62

package/dist/components/ui/Card.js

@@ -1,272 +1,99 @@
-import { spread as m, mergeProps as b, insert as i, effect as A, setStyleProperty as z, memo as E, className as L, template as f, use as q, delegateEvents as W } from "solid-js/web";
-import { splitProps as h, createSignal as F, onCleanup as B } from "solid-js";
-import { cn as p } from "../../utils/cn.js";
-var D = /* @__PURE__ */ f('<div style="background-size:200% 200%;animation:gradient-shift 3s ease infinite">'), G = /* @__PURE__ */ f('<div class="absolute inset-[1px] rounded-[7px] bg-card">'), N = /* @__PURE__ */ f('<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">'), Z = /* @__PURE__ */ f('<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)">'), J = /* @__PURE__ */ f("<div><div>"), T = /* @__PURE__ */ f("<div>"), K = /* @__PURE__ */ f("<h3>"), O = /* @__PURE__ */ f("<p>"), Q = /* @__PURE__ */ f('<div><div class="relative z-10"style=transform:translateZ(20px)>'), U = /* @__PURE__ */ f('<div class="pointer-events-none absolute inset-0 z-20 opacity-0 transition-opacity duration-300">'), V = /* @__PURE__ */ f('<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">'), ee = /* @__PURE__ */ f('<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 oe(l) {
-  const [e, a] = h(l, ["variant", "enableTilt", "gradientColors", "glowColor", "class", "children", "style"]), r = () => e.variant ?? "default", [d, g] = F({});
-  let c, s = null, _ = 0, y = 0;
-  const u = () => {
-    if (s = null, !c || !e.enableTilt && r() !== "spotlight") return;
-    const t = c.getBoundingClientRect(), o = _ - t.left, v = y - t.top;
-    if (e.enableTilt) {
-      const Y = t.width / 2, I = t.height / 2, R = (v - I) / 10, H = (Y - o) / 10;
-      g({
-        transform: `perspective(1000px) rotateX(${R}deg) rotateY(${H}deg) scale3d(1.02, 1.02, 1.02)`
-      });
-    }
-    r() === "spotlight" && X({
-      x: o,
-      y: v
-    });
-  }, M = (t) => {
-    if (c && !(!e.enableTilt && r() !== "spotlight") && (_ = t.clientX, y = t.clientY, s === null)) {
-      if (typeof requestAnimationFrame > "u") {
-        u();
-        return;
-      }
-      s = requestAnimationFrame(u);
-    }
-  }, S = () => {
-    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null), e.enableTilt && g({
-      transform: "perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"
-    });
-  }, [C, X] = F({
-    x: 0,
-    y: 0
-  });
-  B(() => {
-    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null);
-  });
-  const k = "rounded-[10px] duration-180 ease-out", P = () => e.enableTilt || r() === "hover-lift" ? "transition-[color,background-color,border-color,box-shadow,transform]" : "transition-[color,background-color,border-color]", j = {
-    default: "bg-card border border-border shadow-sm hover:shadow-sm",
-    "hover-lift": "bg-card border border-border shadow-sm hover:shadow-md hover:-translate-y-0.5",
-    "gradient-border": "relative bg-card overflow-hidden",
-    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"
-  }, n = () => {
-    if (r() !== "gradient-border") return null;
-    const t = e.gradientColors ?? "from-primary via-accent to-secondary";
-    return [(() => {
-      var o = D();
-      return A(() => L(o, p("absolute inset-0 bg-gradient-to-r opacity-75", t, "animate-[gradient-rotate_3s_linear_infinite]"))), o;
-    })(), G()];
-  }, x = () => r() !== "spotlight" ? null : (() => {
-    var t = N();
-    return A((o) => z(t, "background", `radial-gradient(
-            400px circle at ${C().x}px ${C().y}px,
-            color-mix(in srgb, var(--primary) 18%, transparent),
-            transparent 40%
-          )`)), t;
-  })(), $ = () => r() !== "shimmer" ? null : Z(), w = () => {
-    if (r() !== "glow") return {};
-    const t = e.glowColor ?? "var(--glow)";
-    return {
-      "box-shadow": [`0 0 0 1px color-mix(in srgb, ${t} 55%, transparent)`, `0 0 16px -4px color-mix(in srgb, ${t} 50%, transparent)`, `0 0 28px -8px color-mix(in srgb, ${t} 28%, transparent)`].join(", ")
-    };
-  };
+import { spread as l, mergeProps as n, insert as s, template as u } from "solid-js/web";
+import { splitProps as o } from "solid-js";
+import { cn as c } from "../../utils/cn.js";
+var i = /* @__PURE__ */ u("<div>"), f = /* @__PURE__ */ u("<h3>"), p = /* @__PURE__ */ u("<p>");
+function b(t) {
+  const [e, a] = o(t, ["variant", "class", "children"]), r = () => e.variant ?? "default";
   return (() => {
-    var t = J(), o = t.firstChild;
-    t.addEventListener("mouseleave", S), t.$$mousemove = M;
-    var v = c;
-    return typeof v == "function" ? q(v, t) : c = t, m(t, b({
-      get "data-floe-card-variant"() {
-        return E(() => !!e.enableTilt)() ? "tilt" : r();
-      },
+    var d = i();
+    return l(d, n({
       get "data-floe-surface"() {
-        return r() === "default" && !e.enableTilt ? "raised" : void 0;
+        return r() === "well" ? "inset" : void 0;
       },
-      get class() {
-        return p(k, P(), j[r()], r() === "spotlight" && "group", e.class);
+      get "data-floe-card-variant"() {
+        return r();
+      },
+      get "data-floe-interactive"() {
+        return r() === "interactive" ? "lift" : void 0;
       },
-      get style() {
-        return {
-          ...typeof e.style == "object" ? e.style : {},
-          ...d(),
-          ...w(),
-          "transform-style": "preserve-3d"
-        };
-      }
-    }, a), !1, !0), i(t, n, o), i(t, x, o), i(t, $, o), i(o, () => e.children), A(() => L(o, p("relative z-10", r() === "gradient-border" && "relative"))), t;
-  })();
-}
-function le(l) {
-  const [e, a] = h(l, ["class", "children"]);
-  return (() => {
-    var r = T();
-    return m(r, b({
-      get class() {
-        return p("flex flex-col space-y-1.5 p-4", e.class);
-      }
-    }, a), !1, !0), i(r, () => e.children), r;
-  })();
-}
-function ae(l) {
-  const [e, a] = h(l, ["class", "children"]);
-  return (() => {
-    var r = K();
-    return m(r, b({
-      get class() {
-        return p("text-sm font-semibold leading-none tracking-tight", e.class);
-      }
-    }, a), !1, !0), i(r, () => e.children), r;
-  })();
-}
-function se(l) {
-  const [e, a] = h(l, ["class", "children"]);
-  return (() => {
-    var r = O();
-    return m(r, b({
       get class() {
-        return p("text-xs text-muted-foreground", e.class);
+        return c(
+          "rounded-card",
+          "bg-card text-card-foreground",
+          "duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]",
+          r() === "default" && "border border-transparent",
+          r() === "well" && "bg-[var(--floe-well)] border border-transparent",
+          /* The rise and its shadow live in the interaction contract
+           * (`data-floe-interactive='lift'` in language.css), so every clickable
+           * plane in the app travels the same pixel through the same token. The
+           * class string keeps only what is specific to this card. */
+          r() === "interactive" && "border border-transparent cursor-pointer",
+          e.class
+        );
       }
-    }, a), !1, !0), i(r, () => e.children), r;
+    }, a), !1, !0), s(d, () => e.children), d;
   })();
 }
-function ie(l) {
-  const [e, a] = h(l, ["class", "children"]);
+function m(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var r = T();
-    return m(r, b({
+    var r = i();
+    return l(r, n({
       get class() {
-        return p("p-4 pt-0", e.class);
+        return c("flex flex-col gap-1 p-[var(--floe-pad-card)] pb-0", e.class);
       }
-    }, a), !1, !0), i(r, () => e.children), r;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-function de(l) {
-  const [e, a] = h(l, ["class", "children"]);
+function _(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var r = T();
-    return m(r, b({
-      get class() {
-        return p("flex items-center p-4 pt-0", e.class);
-      }
-    }, a), !1, !0), i(r, () => e.children), r;
-  })();
-}
-function ce(l) {
-  const [e, a] = h(l, ["intensity", "shine", "borderGlow", "class", "children", "style"]), [r, d] = F(""), [g, c] = F({
-    x: 50,
-    y: 50
-  }), [s, _] = F(!1);
-  let y, u = null, M = 0, S = 0;
-  const C = () => e.intensity ?? 10, X = () => {
-    if (u = null, !y) return;
-    const n = y.getBoundingClientRect(), x = M - n.left, $ = S - n.top, w = n.width / 2, t = n.height / 2, o = ($ - t) / t * C(), v = (w - x) / w * C();
-    d(`perspective(1000px) rotateX(${-o}deg) rotateY(${v}deg)`), e.shine && c({
-      x: x / n.width * 100,
-      y: $ / n.height * 100
-    });
-  }, k = (n) => {
-    if (y && (M = n.clientX, S = n.clientY, u === null)) {
-      if (typeof requestAnimationFrame > "u") {
-        X();
-        return;
-      }
-      u = requestAnimationFrame(X);
-    }
-  }, P = () => _(!0), j = () => {
-    u !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(u), u = null), _(!1), d("perspective(1000px) rotateX(0deg) rotateY(0deg)");
-  };
-  return B(() => {
-    u !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(u), u = null);
-  }), (() => {
-    var n = Q(), x = n.firstChild;
-    n.addEventListener("mouseleave", j), n.addEventListener("mouseenter", P), n.$$mousemove = k;
-    var $ = y;
-    return typeof $ == "function" ? q($, n) : y = n, m(n, b({
+    var r = f();
+    return l(r, n({
       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_18px_-6px_var(--glow)]", e.class);
-      },
-      get style() {
-        return {
-          ...typeof e.style == "object" ? e.style : {},
-          transform: r(),
-          "transform-style": "preserve-3d"
-        };
+        return c("text-[length:var(--floe-type-body)] font-semibold leading-[var(--floe-line-heading)] tracking-[var(--floe-tracking-tight)]", e.class);
       }
-    }, a), !1, !0), i(n, (() => {
-      var w = E(() => !!e.shine);
-      return () => w() && (() => {
-        var t = U();
-        return A((o) => {
-          var v = !!s(), Y = `radial-gradient(
-              circle at ${g().x}% ${g().y}%,
-              color-mix(in srgb, var(--primary) 18%, transparent) 0%,
-              transparent 50%
-            )`;
-          return v !== o.e && t.classList.toggle("opacity-100", o.e = v), Y !== o.t && z(t, "background", o.t = Y), o;
-        }, {
-          e: void 0,
-          t: void 0
-        }), t;
-      })();
-    })(), x), i(x, () => e.children), n;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-function ue(l) {
-  const [e, a] = h(l, ["duration", "borderWidth", "colors", "class", "children", "style"]), r = () => e.duration ?? 3, d = () => e.borderWidth ?? 2;
+function $(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var g = V(), c = g.firstChild, s = c.nextSibling;
-    return m(g, b({
+    var r = p();
+    return l(r, n({
       get class() {
-        return p("relative rounded-xl p-[2px] overflow-hidden", e.class);
-      },
-      get style() {
-        return {
-          ...typeof e.style == "object" ? e.style : {},
-          padding: `${d()}px`
-        };
+        return c("text-[length:var(--floe-type-supporting)] leading-[var(--floe-line-body)] text-[var(--floe-ink-soft)]", e.class);
       }
-    }, a), !1, !0), i(s, () => e.children), A((_) => z(c, "animation", `spin ${r()}s linear infinite`)), g;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-function pe(l) {
-  const [e, a] = h(l, ["color", "pulse", "class", "children", "style"]), r = () => e.color ?? "var(--glow)";
+function x(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var d = T();
-    return m(d, b({
+    var r = i();
+    return l(r, n({
       get class() {
-        return p("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": r(),
-          "box-shadow": [`0 0 4px color-mix(in srgb, ${r()} 80%, transparent)`, `0 0 14px color-mix(in srgb, ${r()} 50%, transparent)`, `0 0 28px color-mix(in srgb, ${r()} 30%, transparent)`, `inset 0 0 14px color-mix(in srgb, ${r()} 10%, transparent)`].join(", ")
-        };
+        return c("p-[var(--floe-pad-card)]", e.class);
       }
-    }, a), !1, !0), i(d, () => e.children), d;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-function fe(l) {
-  const [e, a] = h(l, ["class", "children", "style"]);
+function C(t) {
+  const [e, a] = o(t, ["class", "children"]);
   return (() => {
-    var r = ee(), d = r.firstChild, g = d.firstChild;
-    g.nextSibling;
-    var c = d.nextSibling;
-    return m(r, b({
+    var r = i();
+    return l(r, n({
       get class() {
-        return p("relative rounded-2xl bg-card/80 backdrop-blur-sm border border-border overflow-hidden", e.class);
-      },
-      get style() {
-        return e.style;
+        return c("flex items-center gap-[var(--floe-gap-control)] p-[var(--floe-pad-card)] pt-0", e.class);
       }
-    }, a), !1, !0), i(c, () => e.children), r;
+    }, a), !1, !0), s(r, () => e.children), r;
   })();
 }
-W(["mousemove"]);
 export {
-  ue as AnimatedBorderCard,
-  oe as Card,
-  ie as CardContent,
-  se as CardDescription,
-  de as CardFooter,
-  le as CardHeader,
-  ae as CardTitle,
-  ce as Interactive3DCard,
-  fe as MorphCard,
-  pe as NeonCard
+  b as Card,
+  x as CardContent,
+  $ as CardDescription,
+  C as CardFooter,
+  m as CardHeader,
+  _ as CardTitle
 };