@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/components/ui/Form.js

@@ -1,59 +1,59 @@
-import { createComponent as m, spread as g, mergeProps as h, insert as c, effect as v, className as p, setAttribute as $, template as a } from "solid-js/web";
-import { splitProps as u, createSignal as _, Show as f, createUniqueId as S, createContext as F, useContext as w } from "solid-js";
-import { cn as d } from "../../utils/cn.js";
-var E = /* @__PURE__ */ a("<form>"), x = /* @__PURE__ */ a("<div>"), I = /* @__PURE__ */ a('<span class="text-error ml-0.5"aria-hidden=true>*'), j = /* @__PURE__ */ a("<label>"), P = /* @__PURE__ */ a("<div data-field-control>"), k = /* @__PURE__ */ a("<p>"), q = /* @__PURE__ */ a("<p role=alert>"), D = /* @__PURE__ */ a('<h3 class="text-sm font-medium text-foreground">'), A = /* @__PURE__ */ a('<p class="text-[11px] text-muted-foreground">'), L = /* @__PURE__ */ a("<div class=space-y-0.5>"), V = /* @__PURE__ */ a("<div><div class=space-y-3>"), M = /* @__PURE__ */ a('<div><div class="flex-1 h-px bg-border"></div><span class="text-[11px] text-muted-foreground uppercase tracking-wider"></span><div class="flex-1 h-px bg-border">');
+import { createComponent as f, spread as h, mergeProps as v, insert as c, effect as g, className as p, setAttribute as $, template as a } from "solid-js/web";
+import { splitProps as d, createSignal as _, Show as m, createUniqueId as S, createContext as F, useContext as y } from "solid-js";
+import { cn as u } from "../../utils/cn.js";
+var k = /* @__PURE__ */ a("<form>"), x = /* @__PURE__ */ a("<div>"), E = /* @__PURE__ */ a('<span class="text-error ml-0.5"aria-hidden=true>*'), I = /* @__PURE__ */ a("<label>"), j = /* @__PURE__ */ a("<div data-field-control>"), q = /* @__PURE__ */ a("<p>"), P = /* @__PURE__ */ a("<p role=alert>"), D = /* @__PURE__ */ a('<h3 class="text-sm font-medium text-foreground">'), A = /* @__PURE__ */ a('<p class="text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)]">'), L = /* @__PURE__ */ a("<div class=space-y-0.5>"), V = /* @__PURE__ */ a("<div><div class=space-y-3>"), M = /* @__PURE__ */ a('<div><div class="flex-1 h-px bg-border"></div><span class="text-[length:var(--floe-type-caption)] text-[var(--floe-ink-quiet)] uppercase tracking-[0.06em]"></span><div class="flex-1 h-px bg-border">');
 const C = F();
 function N() {
-  return w(C);
+  return y(C);
 }
 function B(l) {
-  const [e, n] = u(l, ["onSubmit", "class", "children"]), [t, r] = _(!1), s = async (o) => {
-    if (o.preventDefault(), !t() && e.onSubmit) {
-      r(!0);
+  const [e, n] = d(l, ["onSubmit", "class", "children"]), [r, t] = _(!1), s = async (o) => {
+    if (o.preventDefault(), !r() && e.onSubmit) {
+      t(!0);
       try {
         await e.onSubmit(o);
       } finally {
-        r(!1);
+        t(!1);
       }
     }
   }, i = {
-    isSubmitting: t,
-    setSubmitting: r
+    isSubmitting: r,
+    setSubmitting: t
   };
-  return m(C.Provider, {
+  return f(C.Provider, {
     value: i,
     get children() {
-      var o = E();
-      return o.addEventListener("submit", s), g(o, h({
+      var o = k();
+      return o.addEventListener("submit", s), h(o, v({
         get class() {
-          return d("space-y-4", e.class);
+          return u("space-y-4", e.class);
         }
       }, n), !1, !0), c(o, () => e.children), o;
     }
   });
 }
-const y = F();
+const w = F();
 function b() {
-  const l = w(y);
+  const l = y(w);
   if (!l)
     throw new Error("useFormField must be used within a FormField");
   return l;
 }
 function G(l) {
-  const [e, n] = u(l, ["name", "class", "children"]), t = S(), [r, s] = _(), i = {
-    id: `field-${t}`,
-    errorId: `field-${t}-error`,
-    helperId: `field-${t}-helper`,
-    hasError: () => !!r(),
+  const [e, n] = d(l, ["name", "class", "children"]), r = S(), [t, s] = _(), i = {
+    id: `field-${r}`,
+    errorId: `field-${r}-error`,
+    helperId: `field-${r}-helper`,
+    hasError: () => !!t(),
     setError: s
   };
-  return m(y.Provider, {
+  return f(w.Provider, {
     value: i,
     get children() {
       var o = x();
-      return g(o, h({
+      return h(o, v({
         get class() {
-          return d("space-y-1.5", e.class);
+          return u("space-y-1.5", e.class);
         },
         get "data-field"() {
           return e.name;
@@ -63,101 +63,101 @@ function G(l) {
   });
 }
 function H(l) {
-  const [e, n] = u(l, ["required", "class", "children"]), t = b();
+  const [e, n] = d(l, ["required", "class", "children"]), r = b();
   return (() => {
-    var r = j();
-    return g(r, h({
+    var t = I();
+    return h(t, v({
       get for() {
-        return t.id;
+        return r.id;
       },
       get class() {
-        return d("block text-xs font-medium text-foreground", t.hasError() && "text-error", e.class);
+        return u("block text-xs font-medium text-foreground", r.hasError() && "text-error", e.class);
       }
-    }, n), !1, !0), c(r, () => e.children, null), c(r, m(f, {
+    }, n), !1, !0), c(t, () => e.children, null), c(t, f(m, {
       get when() {
         return e.required;
       },
       get children() {
-        return I();
+        return E();
       }
-    }), null), r;
+    }), null), t;
   })();
 }
 function J(l) {
-  const [e] = u(l, ["class", "children"]), n = b();
+  const [e] = d(l, ["class", "children"]), n = b();
   return (() => {
-    var t = P();
-    return c(t, () => e.children), v((r) => {
-      var s = d("relative", e.class), i = n.id;
-      return s !== r.e && p(t, r.e = s), i !== r.t && $(t, "data-field-id", r.t = i), r;
+    var r = j();
+    return c(r, () => e.children), g((t) => {
+      var s = u("relative", e.class), i = n.id;
+      return s !== t.e && p(r, t.e = s), i !== t.t && $(r, "data-field-id", t.t = i), t;
     }, {
       e: void 0,
       t: void 0
-    }), t;
+    }), r;
   })();
 }
 function K(l) {
-  const [e] = u(l, ["class", "children"]), n = b();
+  const [e] = d(l, ["class", "children"]), n = b();
   return (() => {
-    var t = k();
-    return c(t, () => e.children), v((r) => {
-      var s = n.helperId, i = d("text-[11px] text-muted-foreground", e.class);
-      return s !== r.e && $(t, "id", r.e = s), i !== r.t && p(t, r.t = i), r;
+    var r = q();
+    return c(r, () => e.children), g((t) => {
+      var s = n.helperId, i = u("text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)]", e.class);
+      return s !== t.e && $(r, "id", t.e = s), i !== t.t && p(r, t.t = i), t;
     }, {
       e: void 0,
       t: void 0
-    }), t;
+    }), r;
   })();
 }
 function O(l) {
-  const [e] = u(l, ["error", "class", "children"]), n = b(), t = () => !!e.error || !!e.children;
-  return m(f, {
+  const [e] = d(l, ["error", "class", "children"]), n = b(), r = () => !!e.error || !!e.children;
+  return f(m, {
     get when() {
-      return t();
+      return r();
     },
     get children() {
-      var r = q();
-      return c(r, () => e.error ?? e.children), v((s) => {
-        var i = n.errorId, o = d("text-[11px] text-error", e.class);
-        return i !== s.e && $(r, "id", s.e = i), o !== s.t && p(r, s.t = o), s;
+      var t = P();
+      return c(t, () => e.error ?? e.children), g((s) => {
+        var i = n.errorId, o = u("text-caption text-error", e.class);
+        return i !== s.e && $(t, "id", s.e = i), o !== s.t && p(t, s.t = o), s;
       }, {
         e: void 0,
         t: void 0
-      }), r;
+      }), t;
     }
   });
 }
 function Q(l) {
-  const [e, n] = u(l, ["align", "class", "children"]), t = {
+  const [e, n] = d(l, ["align", "class", "children"]), r = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end",
     between: "justify-between"
   };
   return (() => {
-    var r = x();
-    return g(r, h({
+    var t = x();
+    return h(t, v({
       get class() {
-        return d("flex items-center gap-2 pt-2", t[e.align ?? "end"], e.class);
+        return u("flex items-center gap-2 pt-2", r[e.align ?? "end"], e.class);
       }
-    }, n), !1, !0), c(r, () => e.children), r;
+    }, n), !1, !0), c(t, () => e.children), t;
   })();
 }
 function T(l) {
-  const [e, n] = u(l, ["title", "description", "class", "children"]);
+  const [e, n] = d(l, ["title", "description", "class", "children"]);
   return (() => {
-    var t = V(), r = t.firstChild;
-    return g(t, h({
+    var r = V(), t = r.firstChild;
+    return h(r, v({
       get class() {
-        return d("space-y-3", e.class);
+        return u("space-y-3", e.class);
       }
-    }, n), !1, !0), c(t, m(f, {
+    }, n), !1, !0), c(r, f(m, {
       get when() {
         return e.title || e.description;
       },
       get children() {
         var s = L();
-        return c(s, m(f, {
+        return c(s, f(m, {
           get when() {
             return e.title;
           },
@@ -165,7 +165,7 @@ function T(l) {
             var i = D();
             return c(i, () => e.title), i;
           }
-        }), null), c(s, m(f, {
+        }), null), c(s, f(m, {
           get when() {
             return e.description;
           },
@@ -175,41 +175,41 @@ function T(l) {
           }
         }), null), s;
       }
-    }), r), c(r, () => e.children), t;
+    }), t), c(t, () => e.children), r;
   })();
 }
 function W(l) {
-  const [e] = u(l, ["label", "class"]);
-  return m(f, {
+  const [e] = d(l, ["label", "class"]);
+  return f(m, {
     get when() {
       return e.label;
     },
     get fallback() {
       return (() => {
         var n = x();
-        return v(() => p(n, d("h-px bg-border my-4", e.class))), n;
+        return g(() => p(n, u("h-px bg-border my-4", e.class))), n;
       })();
     },
     get children() {
-      var n = M(), t = n.firstChild, r = t.nextSibling;
-      return c(r, () => e.label), v(() => p(n, d("flex items-center gap-3 my-4", e.class))), n;
+      var n = M(), r = n.firstChild, t = r.nextSibling;
+      return c(t, () => e.label), g(() => p(n, u("flex items-center gap-3 my-4", e.class))), n;
     }
   });
 }
 function X(l) {
-  const [e, n] = u(l, ["cols", "class", "children"]), t = {
+  const [e, n] = d(l, ["cols", "class", "children"]), r = {
     1: "grid-cols-1",
     2: "sm:grid-cols-2",
     3: "sm:grid-cols-3",
     4: "sm:grid-cols-4"
   };
   return (() => {
-    var r = x();
-    return g(r, h({
+    var t = x();
+    return h(t, v({
       get class() {
-        return d("grid gap-3 grid-cols-1", t[e.cols ?? 2], e.class);
+        return u("grid gap-3 grid-cols-1", r[e.cols ?? 2], e.class);
       }
-    }, n), !1, !0), c(r, () => e.children), r;
+    }, n), !1, !0), c(t, () => e.children), t;
   })();
 }
 function Y() {

package/dist/components/ui/HighlightBlock.js

@@ -1,4 +1,4 @@
-import { createComponent as e, mergeProps as l, spread as _, insert as c, effect as T, setAttribute as v, className as B, template as d, delegateEvents as E } from "solid-js/web";
+import { createComponent as e, mergeProps as r, spread as _, insert as c, effect as T, setAttribute as v, className as B, template as d, delegateEvents as E } from "solid-js/web";
 import { splitProps as S, Show as p } from "solid-js";
 import { cn as h } from "../../utils/cn.js";
 import { Zap as N, Sparkles as A, XCircle as P, CheckCircle as W, AlertTriangle as j, Info as D } from "../icons/index.js";
@@ -49,8 +49,8 @@ const q = {
   tip: "Tip"
 };
 function a(i) {
-  const [n, I] = S(i, ["variant", "title", "icon", "hideIcon", "collapsed", "onToggle", "class", "children"]), C = () => n.variant ?? "note", g = () => q[C()], r = () => n.collapsed !== void 0, f = () => n.collapsed ?? !1, k = () => {
-    r() && n.onToggle && n.onToggle(!f());
+  const [n, I] = S(i, ["variant", "title", "icon", "hideIcon", "collapsed", "onToggle", "class", "children"]), C = () => n.variant ?? "note", g = () => q[C()], l = () => n.collapsed !== void 0, f = () => n.collapsed ?? !1, k = () => {
+    l() && n.onToggle && n.onToggle(!f());
   }, x = () => {
     if (n.icon) return n.icon;
     const s = g().icon;
@@ -62,19 +62,19 @@ function a(i) {
   }, y = () => n.title ?? z[C()];
   return (() => {
     var s = Z(), o = s.firstChild, u = o.firstChild;
-    return _(s, l({
+    return _(s, r({
       get class() {
         return h("highlight-block", g().containerClass, n.class);
       }
     }, I), !1, !0), o.$$keydown = (t) => {
-      r() && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), k());
+      l() && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), k());
     }, o.$$click = k, c(o, e(p, {
       get when() {
-        return r();
+        return l();
       },
       get children() {
         var t = F();
-        return T(() => v(t, "class", h("w-3 h-3 opacity-50 transition-transform duration-200", !f() && "rotate-90"))), t;
+        return T(() => v(t, "class", h("w-3 h-3 opacity-50 transition-transform duration-[var(--floe-duration-base)]", !f() && "rotate-90"))), t;
       }
     }), u), c(o, e(p, {
       get when() {
@@ -93,7 +93,7 @@ function a(i) {
         return c(t, () => n.children), t;
       }
     }), null), T((t) => {
-      var m = h("highlight-block-header", r() && "cursor-pointer select-none"), w = r() ? "button" : void 0, b = r() ? 0 : void 0, $ = h("highlight-block-title", g().titleClass);
+      var m = h("highlight-block-header", l() && "cursor-pointer select-none"), w = l() ? "button" : void 0, b = l() ? 0 : void 0, $ = h("highlight-block-title", g().titleClass);
       return m !== t.e && B(o, t.e = m), w !== t.t && v(o, "role", t.t = w), b !== t.a && v(o, "tabindex", t.a = b), $ !== t.o && B(u, t.o = $), t;
     }, {
       e: void 0,
@@ -104,32 +104,32 @@ function a(i) {
   })();
 }
 function M(i) {
-  return e(a, l({
+  return e(a, r({
     variant: "info"
   }, i));
 }
 function O(i) {
-  return e(a, l({
+  return e(a, r({
     variant: "warning"
   }, i));
 }
 function Q(i) {
-  return e(a, l({
+  return e(a, r({
     variant: "success"
   }, i));
 }
 function R(i) {
-  return e(a, l({
+  return e(a, r({
     variant: "error"
   }, i));
 }
 function U(i) {
-  return e(a, l({
+  return e(a, r({
     variant: "note"
   }, i));
 }
 function V(i) {
-  return e(a, l({
+  return e(a, r({
     variant: "tip"
   }, i));
 }