@floegence/floe-webapp-core 0.30.0 → 0.32.0

package/dist/components/loading/Skeleton.js

@@ -1,11 +1,11 @@
-import { effect as o, className as u, insert as s, createComponent as r, template as f } from "solid-js/web";
+import { effect as i, className as u, insert as s, createComponent as r, template as f } from "solid-js/web";
 import { For as h } from "solid-js";
-import { cn as i } from "../../utils/cn.js";
+import { cn as o } from "../../utils/cn.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;
+    return i(() => u(l, o("rounded-md floe-skeleton", n.class))), l;
   })();
 }
 function v(n) {
@@ -20,10 +20,10 @@ function v(n) {
       },
       children: (t) => r(c, {
         get class() {
-          return i("h-4", t === l() - 1 ? "w-3/4" : "w-full");
+          return o("h-4", t === l() - 1 ? "w-3/4" : "w-full");
         }
       })
-    })), o(() => u(e, i("space-y-2", n.class))), e;
+    })), i(() => u(e, o("space-y-2", n.class))), e;
   })();
 }
 function y(n) {
@@ -37,7 +37,7 @@ function y(n) {
       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;
+    }), null), i(() => u(l, o("rounded-lg border border-border p-4 space-y-4", n.class))), l;
   })();
 }
 function x(n) {
@@ -60,7 +60,7 @@ function x(n) {
           class: "h-3 w-1/3"
         }), null), t;
       })()
-    })), o(() => u(e, i("space-y-3", n.class))), e;
+    })), i(() => u(e, o("space-y-3", n.class))), e;
   })();
 }
 export {

package/dist/components/loading/SnakeLoader.d.ts

@@ -4,6 +4,6 @@ export interface SnakeLoaderProps {
     class?: string;
 }
 /**
- * 9-cell grid loader with breathing center and rotating trail
+ * 9-cell grid loader with diagonal light wave
  */
 export declare function SnakeLoader(props: SnakeLoaderProps): import("solid-js").JSX.Element;

package/dist/components/loading/SnakeLoader.js

@@ -1,91 +1,44 @@
-import { insert as y, createComponent as _, effect as m, className as d, style as x, template as h } from "solid-js/web";
-import { createSignal as z, onMount as I, onCleanup as P, For as S } from "solid-js";
-import { cn as g } from "../../utils/cn.js";
-var B = /* @__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);
-          }
-        }
-      `), L = /* @__PURE__ */ h("<div>"), M = /* @__PURE__ */ h('<div style="animation:snakeBreathing 1.5s ease-in-out infinite">');
-const u = {
-  sm: {
-    grid: "w-6 h-6",
-    cell: "w-1.5 h-1.5",
-    center: "w-1 h-1"
+import { insert as g, createComponent as f, effect as n, setStyleProperty as l, className as u, template as d } from "solid-js/web";
+import { For as v } from "solid-js";
+import { cn as h } from "../../utils/cn.js";
+var w = /* @__PURE__ */ d("<div role=status aria-label=Loading>"), y = /* @__PURE__ */ d('<div class="floe-grid-cell bg-primary">');
+const x = {
+  sm: "w-6 h-6 gap-[2px]",
+  md: "w-9 h-9 gap-[3px]",
+  lg: "w-12 h-12 gap-1"
+}, z = {
+  slow: {
+    duration: "2.4s",
+    step: 0.15
   },
-  md: {
-    grid: "w-9 h-9",
-    cell: "w-2.5 h-2.5",
-    center: "w-2 h-2"
+  normal: {
+    duration: "1.8s",
+    step: 0.12
   },
-  lg: {
-    grid: "w-12 h-12",
-    cell: "w-3 h-3",
-    center: "w-2.5 h-2.5"
+  fast: {
+    duration: "1.2s",
+    step: 0.08
   }
-}, w = {
-  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 R(l) {
-  const c = () => l.size ?? "md", v = () => l.speed ?? "normal", i = [0, 1, 2, 5, 8, 7, 6, 3], [$, b] = z(0);
-  I(() => {
-    const t = setInterval(() => {
-      b((n) => (n + 1) % i.length);
-    }, w[v()]);
-    P(() => clearInterval(t));
-  });
-  const k = (t) => {
-    const n = $();
-    for (let r = 0; r < f.length; r++)
-      if (i[(n + i.length - r) % i.length] === t) return r;
-    return -1;
-  };
+}, S = [0, 1, 2, 1, 2, 3, 2, 3, 4];
+function F(t) {
+  const c = () => t.size ?? "md", m = () => t.speed ?? "normal", s = () => z[m()];
   return (() => {
-    var t = B(), n = t.firstChild;
-    return y(t, _(S, {
+    var r = w();
+    return g(r, f(v, {
       each: [0, 1, 2, 3, 4, 5, 6, 7, 8],
-      children: (r) => {
-        const o = r === 4, a = () => o ? -1 : k(r);
-        return (() => {
-          var s = L();
-          return y(s, o && (() => {
-            var e = M();
-            return m(() => d(e, g("rounded-sm bg-primary", u[c()].center))), e;
-          })()), m((e) => {
-            var p = g("flex items-center justify-center rounded-sm", u[c()].cell, o && "bg-transparent"), C = o ? {} : {
-              "background-color": a() >= 0 ? `color-mix(in srgb, var(--primary) ${f[a()]?.[0] ?? 0}%, transparent)` : "var(--muted)",
-              transform: `scale(${a() >= 0 ? f[a()]?.[1] ?? 1 : 1})`,
-              "transition-property": "background-color, transform",
-              "transition-duration": `${w[v()] * 0.9}ms`,
-              "transition-timing-function": "ease-out"
-            };
-            return p !== e.e && d(s, e.e = p), e.t = x(s, C, 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;
+      children: (p) => (() => {
+        var o = y();
+        return n((e) => {
+          var a = s().duration, i = `${S[p] * s().step}s`;
+          return a !== e.e && l(o, "--floe-grid-dur", e.e = a), i !== e.t && l(o, "--floe-grid-delay", e.t = i), e;
+        }, {
+          e: void 0,
+          t: void 0
+        }), o;
+      })()
+    })), n(() => u(r, h("grid grid-cols-3", x[c()], t.class))), r;
   })();
 }
 export {
-  R as SnakeLoader
+  F as SnakeLoader
 };