@floegence/floe-webapp-core 0.1.0

package/dist/index26.js

@@ -0,0 +1,258 @@
+import { delegateEvents as R, template as v, spread as m, mergeProps as h, insert as i, effect as A, className as E, memo as H, setStyleProperty as L, use as j } from "solid-js/web";
+import { splitProps as b, createSignal as F, onCleanup as q } from "solid-js";
+import { cn as p } from "./index53.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">');
+function ne(l) {
+  const [e, o] = b(l, ["variant", "enableTilt", "gradientColors", "glowColor", "class", "children", "style"]), t = () => e.variant ?? "default", [d, g] = 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;
+    if (e.enableTilt) {
+      const w = r.width / 2, Y = r.height / 2, B = (c - Y) / 10, I = (w - a) / 10;
+      g({
+        transform: `perspective(1000px) rotateX(${B}deg) rotateY(${I}deg) scale3d(1.02, 1.02, 1.02)`
+      });
+    }
+    t() === "spotlight" && X({
+      x: a,
+      y: c
+    });
+  }, M = (r) => {
+    if (u && !(!e.enableTilt && t() !== "spotlight") && (_ = r.clientX, y = r.clientY, s === null)) {
+      if (typeof requestAnimationFrame > "u") {
+        f();
+        return;
+      }
+      s = requestAnimationFrame(f);
+    }
+  }, 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
+  });
+  q(() => {
+    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null);
+  });
+  const k = "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",
+    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";
+    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;
+    })(), 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)";
+    return {
+      "box-shadow": `0 0 0 1px ${r}, 0 0 20px -5px ${r}, 0 0 40px -10px ${r}`
+    };
+  };
+  return (() => {
+    var r = Z(), a = r.firstChild;
+    r.addEventListener("mouseleave", S), r.$$mousemove = M;
+    var c = u;
+    return typeof c == "function" ? j(c, r) : u = r, m(r, h({
+      get class() {
+        return p(k, P[t()], t() === "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;
+  })();
+}
+function le(l) {
+  const [e, o] = b(l, ["class", "children"]);
+  return (() => {
+    var t = T();
+    return m(t, h({
+      get class() {
+        return p("flex flex-col space-y-1.5 p-4", e.class);
+      }
+    }, o), !1, !0), i(t, () => e.children), t;
+  })();
+}
+function oe(l) {
+  const [e, o] = b(l, ["class", "children"]);
+  return (() => {
+    var t = J();
+    return m(t, h({
+      get class() {
+        return p("text-sm font-semibold leading-none tracking-tight", e.class);
+      }
+    }, o), !1, !0), i(t, () => e.children), t;
+  })();
+}
+function ae(l) {
+  const [e, o] = b(l, ["class", "children"]);
+  return (() => {
+    var t = K();
+    return m(t, h({
+      get class() {
+        return p("text-xs text-muted-foreground", e.class);
+      }
+    }, o), !1, !0), i(t, () => e.children), t;
+  })();
+}
+function se(l) {
+  const [e, o] = b(l, ["class", "children"]);
+  return (() => {
+    var t = T();
+    return m(t, h({
+      get class() {
+        return p("p-4 pt-0", e.class);
+      }
+    }, o), !1, !0), i(t, () => e.children), t;
+  })();
+}
+function ie(l) {
+  const [e, o] = b(l, ["class", "children"]);
+  return (() => {
+    var t = T();
+    return m(t, h({
+      get class() {
+        return p("flex items-center p-4 pt-0", e.class);
+      }
+    }, o), !1, !0), i(t, () => e.children), t;
+  })();
+}
+function de(l) {
+  const [e, o] = b(l, ["intensity", "shine", "borderGlow", "class", "children", "style"]), [t, d] = F(""), [g, 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
+    });
+  }, k = (n) => {
+    if (y && (M = n.clientX, S = n.clientY, f === null)) {
+      if (typeof requestAnimationFrame > "u") {
+        X();
+        return;
+      }
+      f = requestAnimationFrame(X);
+    }
+  }, P = () => _(!0), z = () => {
+    f !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(f), f = null), _(!1), d("perspective(1000px) rotateX(0deg) rotateY(0deg)");
+  };
+  return q(() => {
+    f !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(f), f = 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({
+      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);
+      },
+      get style() {
+        return {
+          ...typeof e.style == "object" ? e.style : {},
+          transform: t(),
+          "transform-style": "preserve-3d"
+        };
+      }
+    }, o), !1, !0), i(n, (() => {
+      var r = H(() => !!e.shine);
+      return () => r() && (() => {
+        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;
+        }, {
+          e: void 0,
+          t: void 0
+        }), a;
+      })();
+    })(), $), i($, () => 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;
+  return (() => {
+    var g = U(), u = g.firstChild, s = u.nextSibling;
+    return m(g, h({
+      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`
+        };
+      }
+    }, o), !1, !0), i(s, () => e.children), A((_) => L(u, "animation", `spin ${t()}s linear infinite`)), g;
+  })();
+}
+function ue(l) {
+  const [e, o] = b(l, ["color", "pulse", "class", "children", "style"]), t = () => e.color ?? "var(--primary)";
+  return (() => {
+    var d = T();
+    return m(d, h({
+      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": t(),
+          "box-shadow": `0 0 5px ${t()}, 0 0 20px ${t()}, 0 0 40px ${t()}, inset 0 0 20px ${t()}20`
+        };
+      }
+    }, o), !1, !0), i(d, () => e.children), d;
+  })();
+}
+function fe(l) {
+  const [e, o] = b(l, ["class", "children", "style"]);
+  return (() => {
+    var t = V(), d = t.firstChild, g = d.firstChild;
+    g.nextSibling;
+    var u = d.nextSibling;
+    return m(t, h({
+      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;
+      }
+    }, o), !1, !0), i(u, () => e.children), t;
+  })();
+}
+R(["mousemove"]);
+export {
+  ce as AnimatedBorderCard,
+  ne as Card,
+  se as CardContent,
+  ae as CardDescription,
+  ie as CardFooter,
+  le as CardHeader,
+  oe as CardTitle,
+  de as Interactive3DCard,
+  fe as MorphCard,
+  ue as NeonCard
+};

package/dist/index27.js

@@ -0,0 +1,92 @@
+import { template as h, insert as $, createComponent as z, effect as m, className as d, style as I } from "solid-js/web";
+import { createSignal as P, onMount as S, onCleanup as B, For as L } from "solid-js";
+import { cn as g } from "./index53.js";
+var M = /* @__PURE__ */ h(`<div role=status aria-label=Loading><style>
+        @keyframes snakeBreathing {
+          0%, 100% {
+            opacity: 0.5;
+            transform: scale(0.85);
+          }
+          50% {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+      `), j = /* @__PURE__ */ h("<div>"), F = /* @__PURE__ */ h('<div style="animation:snakeBreathing 1.5s ease-in-out infinite">');
+const u = {
+  sm: {
+    grid: "w-12 h-12",
+    cell: "w-3 h-3",
+    center: "w-2.5 h-2.5"
+  },
+  md: {
+    grid: "w-16 h-16",
+    cell: "w-4 h-4",
+    center: "w-3 h-3"
+  },
+  lg: {
+    grid: "w-24 h-24",
+    cell: "w-6 h-6",
+    center: "w-5 h-5"
+  }
+}, b = {
+  slow: 200,
+  normal: 120,
+  fast: 80
+}, f = [
+  [100, 1.1],
+  // head: full opacity, slightly larger
+  [85, 1.05],
+  // trail 1: smooth transition
+  [65, 1],
+  // trail 2
+  [40, 0.95]
+  // trail 3: fading out
+];
+function q(l) {
+  const c = () => l.size ?? "md", v = () => l.speed ?? "normal", i = [0, 1, 2, 5, 8, 7, 6, 3], [k, C] = P(0);
+  S(() => {
+    const t = setInterval(() => {
+      C((n) => (n + 1) % i.length);
+    }, b[v()]);
+    B(() => clearInterval(t));
+  });
+  const _ = (t) => {
+    const n = k();
+    for (let r = 0; r < f.length; r++)
+      if (i[(n + i.length - r) % i.length] === t) return r;
+    return -1;
+  };
+  return (() => {
+    var t = M(), n = t.firstChild;
+    return $(t, z(L, {
+      each: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+      children: (r) => {
+        const o = r === 4, a = () => o ? -1 : _(r);
+        return (() => {
+          var s = j();
+          return $(s, o && (() => {
+            var e = F();
+            return m(() => d(e, g("rounded-sm bg-primary", u[c()].center))), e;
+          })()), m((e) => {
+            var y, w;
+            var p = g("flex items-center justify-center rounded-sm", u[c()].cell, o && "bg-transparent"), x = o ? {} : {
+              "background-color": a() >= 0 ? `color-mix(in srgb, var(--primary) ${((y = f[a()]) == null ? void 0 : y[0]) ?? 0}%, transparent)` : "var(--muted)",
+              transform: `scale(${a() >= 0 ? ((w = f[a()]) == null ? void 0 : w[1]) ?? 1 : 1})`,
+              "transition-property": "background-color, transform",
+              "transition-duration": `${b[v()] * 0.9}ms`,
+              "transition-timing-function": "ease-out"
+            };
+            return p !== e.e && d(s, e.e = p), e.t = I(s, x, e.t), e;
+          }, {
+            e: void 0,
+            t: void 0
+          }), s;
+        })();
+      }
+    }), n), m(() => d(t, g("grid grid-cols-3 gap-1", u[c()].grid, l.class))), t;
+  })();
+}
+export {
+  q as SnakeLoader
+};

package/dist/index28.js

@@ -0,0 +1,42 @@
+import { template as c, insert as n, createComponent as t, effect as m, className as o, Portal as u } from "solid-js/web";
+import { Show as l } from "solid-js";
+import { cn as s } from "./index53.js";
+import { SnakeLoader as f } from "./index27.js";
+var g = /* @__PURE__ */ c('<p class="text-sm text-muted-foreground">'), d = /* @__PURE__ */ c("<div>");
+function k(e) {
+  const a = (() => {
+    var r = d();
+    return n(r, t(f, {
+      size: "lg"
+    }), null), n(r, t(l, {
+      get when() {
+        return e.message;
+      },
+      get children() {
+        var i = g();
+        return n(i, () => e.message), i;
+      }
+    }), null), m(() => o(r, s("flex flex-col items-center justify-center gap-4", "bg-background/80 backdrop-blur-sm", e.fullscreen ? "fixed inset-0 z-50" : "absolute inset-0", "animate-in fade-in", e.class))), r;
+  })();
+  return t(l, {
+    get when() {
+      return e.visible;
+    },
+    get children() {
+      return t(l, {
+        get when() {
+          return e.fullscreen;
+        },
+        fallback: a,
+        get children() {
+          return t(u, {
+            children: a
+          });
+        }
+      });
+    }
+  });
+}
+export {
+  k as LoadingOverlay
+};

package/dist/index29.js

@@ -0,0 +1,71 @@
+import { template as f, effect as o, className as u, insert as s, createComponent as r } from "solid-js/web";
+import { For as h } from "solid-js";
+import { cn as i } from "./index53.js";
+var m = /* @__PURE__ */ f("<div>"), p = /* @__PURE__ */ f('<div><div class="flex items-center gap-3"><div class="space-y-2 flex-1">'), _ = /* @__PURE__ */ f('<div class="flex items-center gap-3"><div class="flex-1 space-y-1">');
+function c(n) {
+  return (() => {
+    var l = m();
+    return o(() => u(l, i("animate-pulse rounded-md bg-muted", n.class))), l;
+  })();
+}
+function v(n) {
+  const l = () => n.lines ?? 3, a = () => Array.from({
+    length: l()
+  }, (e, t) => t);
+  return (() => {
+    var e = m();
+    return s(e, r(h, {
+      get each() {
+        return a();
+      },
+      children: (t) => r(c, {
+        get class() {
+          return i("h-4", t === l() - 1 ? "w-3/4" : "w-full");
+        }
+      })
+    })), o(() => u(e, i("space-y-2", n.class))), e;
+  })();
+}
+function y(n) {
+  return (() => {
+    var l = p(), a = l.firstChild, e = a.firstChild;
+    return s(a, r(c, {
+      class: "h-10 w-10 rounded-full"
+    }), e), s(e, r(c, {
+      class: "h-4 w-1/3"
+    }), null), s(e, r(c, {
+      class: "h-3 w-1/4"
+    }), null), s(l, r(v, {
+      lines: 2
+    }), null), o(() => u(l, i("rounded-lg border border-border p-4 space-y-4", n.class))), l;
+  })();
+}
+function x(n) {
+  const l = () => n.count ?? 5, a = () => Array.from({
+    length: l()
+  }, (e, t) => t);
+  return (() => {
+    var e = m();
+    return s(e, r(h, {
+      get each() {
+        return a();
+      },
+      children: () => (() => {
+        var t = _(), d = t.firstChild;
+        return s(t, r(c, {
+          class: "h-8 w-8 rounded"
+        }), d), s(d, r(c, {
+          class: "h-4 w-2/3"
+        }), null), s(d, r(c, {
+          class: "h-3 w-1/3"
+        }), null), t;
+      })()
+    })), o(() => u(e, i("space-y-3", n.class))), e;
+  })();
+}
+export {
+  c as Skeleton,
+  y as SkeletonCard,
+  x as SkeletonList,
+  v as SkeletonText
+};

package/dist/index3.js

@@ -0,0 +1,94 @@
+import { delegateEvents as y, template as d, insert as c, createComponent as l, effect as v, className as m, Dynamic as x, memo as C, setAttribute as u } from "solid-js/web";
+import { For as s, Show as f } from "solid-js";
+import { cn as g } from "./index53.js";
+var w = /* @__PURE__ */ d('<div class="flex flex-col items-center py-1.5 gap-0.5 md:gap-2 md:py-2">'), A = /* @__PURE__ */ d('<div><div class="flex flex-col items-center py-1.5 gap-0.5 md:gap-2 md:py-2">'), k = /* @__PURE__ */ d('<div class="absolute -left-1.5 md:-left-2.5 top-1/2 -translate-y-1/2 w-1 h-7 bg-primary rounded-r">'), $ = /* @__PURE__ */ d("<span>"), _ = /* @__PURE__ */ d("<button type=button>");
+function D(e) {
+  const a = (t) => {
+    var r, o;
+    if (t.onClick) {
+      t.onClick();
+      return;
+    }
+    const i = e.activeId === t.id, n = e.collapsed ?? !1;
+    if (i && !n) {
+      (r = e.onCollapsedChange) == null || r.call(e, !0);
+      return;
+    }
+    e.onActiveChange(t.id), (o = e.onCollapsedChange) == null || o.call(e, !1);
+  };
+  return (() => {
+    var t = A(), i = t.firstChild;
+    return c(i, l(s, {
+      get each() {
+        return e.items;
+      },
+      children: (n) => l(h, {
+        item: n,
+        get isActive() {
+          return e.activeId === n.id;
+        },
+        onClick: () => a(n)
+      })
+    })), c(t, l(f, {
+      get when() {
+        var n;
+        return (n = e.bottomItems) == null ? void 0 : n.length;
+      },
+      get children() {
+        var n = w();
+        return c(n, l(s, {
+          get each() {
+            return e.bottomItems;
+          },
+          children: (r) => l(h, {
+            item: r,
+            isActive: !1,
+            onClick: () => a(r)
+          })
+        })), n;
+      }
+    }), null), v(() => m(t, g("w-12 md:w-14 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class))), t;
+  })();
+}
+function h(e) {
+  const a = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
+  return (() => {
+    var t = _();
+    return t.$$click = () => e.onClick(), c(t, l(f, {
+      get when() {
+        return e.isActive;
+      },
+      get children() {
+        return k();
+      }
+    }), null), c(t, l(x, {
+      get component() {
+        return e.item.icon;
+      },
+      class: "w-5 h-5"
+    }), null), c(t, l(f, {
+      get when() {
+        return a();
+      },
+      get children() {
+        var i = $();
+        return c(i, (() => {
+          var n = C(() => typeof a() == "number" && a() > 99);
+          return () => n() ? "99+" : a();
+        })()), v(() => m(i, g("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), i;
+      }
+    }), null), v((i) => {
+      var n = g("relative w-9 h-9 flex items-center justify-center rounded cursor-pointer", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), r = e.item.label, o = e.item.label, b = e.isActive;
+      return n !== i.e && m(t, i.e = n), r !== i.t && u(t, "title", i.t = r), o !== i.a && u(t, "aria-label", i.a = o), b !== i.o && u(t, "aria-pressed", i.o = b), i;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), t;
+  })();
+}
+y(["click"]);
+export {
+  D as ActivityBar
+};