@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/components/ui/Stepper.js

@@ -1,15 +1,15 @@
-import { insert as a, createComponent as s, memo as V, effect as b, className as x, mergeProps as A, template as p, setAttribute as z, delegateEvents as D } from "solid-js/web";
-import { splitProps as I, createMemo as $, Show as v, createSignal as K } from "solid-js";
+import { insert as a, createComponent as s, memo as V, effect as x, className as b, mergeProps as A, template as v, setAttribute as z, delegateEvents as D } from "solid-js/web";
+import { splitProps as I, createMemo as $, Show as h, createSignal as K } from "solid-js";
 import { KeyedFor as N } from "./KeyedFor.js";
-import { cn as m } from "../../utils/cn.js";
+import { cn as f } from "../../utils/cn.js";
 import { Check as O } from "../icons/index.js";
-var T = /* @__PURE__ */ p("<div data-floe-surface-part=step>"), L = /* @__PURE__ */ p("<span>"), U = /* @__PURE__ */ p('<span class="text-muted-foreground/60 font-normal">(Optional)'), q = /* @__PURE__ */ p("<p>"), B = /* @__PURE__ */ p("<div><div><span>"), G = /* @__PURE__ */ p("<div data-floe-surface=inset data-floe-surface-part=progress-track>"), H = /* @__PURE__ */ p("<nav aria-label=Progress>"), J = /* @__PURE__ */ p('<div class="flex items-center w-full">'), Q = /* @__PURE__ */ p("<div class=mt-2>"), R = /* @__PURE__ */ p('<div class="flex flex-col items-center">'), X = /* @__PURE__ */ p('<div class="flex-1 pb-4">'), W = /* @__PURE__ */ p("<div>"), Y = /* @__PURE__ */ p('<div class="flex flex-col h-full"><div class="flex-shrink-0 mb-6"></div><div>');
+var T = /* @__PURE__ */ v("<div data-floe-surface-part=step>"), L = /* @__PURE__ */ v("<span>"), U = /* @__PURE__ */ v('<span class="text-[var(--floe-ink-ghost)] font-normal">(Optional)'), q = /* @__PURE__ */ v("<p>"), B = /* @__PURE__ */ v("<div><div><span>"), G = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=progress-track>"), H = /* @__PURE__ */ v("<nav aria-label=Progress>"), J = /* @__PURE__ */ v('<div class="flex items-center w-full">'), Q = /* @__PURE__ */ v("<div class=mt-2>"), R = /* @__PURE__ */ v('<div class="flex flex-col items-center">'), X = /* @__PURE__ */ v('<div class="flex-1 pb-4">'), W = /* @__PURE__ */ v("<div>"), Y = /* @__PURE__ */ v('<div class="flex flex-col h-full"><div class="flex-shrink-0 mb-6"></div><div>');
 const F = {
   sm: {
-    indicator: "w-6 h-6 text-[10px]",
+    indicator: "w-6 h-6 text-caption",
     iconSize: "w-3 h-3",
     label: "text-xs",
-    description: "text-[10px]",
+    description: "text-caption",
     connector: "h-px mx-2",
     connectorVertical: "w-px min-h-4 my-1",
     gap: "gap-1"
@@ -34,24 +34,32 @@ const F = {
   }
 };
 function M(t) {
-  const e = () => F[t.size], i = () => t.status === "completed", c = () => t.status === "current", o = () => m("flex items-center justify-center rounded-full transition-all duration-200", "font-medium select-none flex-shrink-0", e().indicator, t.clickable && !t.step.disabled ? "cursor-pointer hover:scale-110" : t.step.disabled ? "cursor-not-allowed opacity-50" : ""), h = () => t.variant === "dots" ? m("w-3 h-3 md:w-4 md:h-4", i() && "bg-primary", c() && "bg-primary ring-4 ring-primary/20", !i() && !c() && "bg-muted") : t.variant === "minimal" ? m("border-2", i() && "border-primary bg-primary text-primary-foreground", c() && "border-primary text-primary bg-transparent", !i() && !c() && "border-muted text-muted-foreground bg-transparent") : m(i() && "bg-primary text-primary-foreground shadow-sm", c() && "bg-primary text-primary-foreground shadow-md ring-4 ring-primary/20", !i() && !c() && "bg-muted text-muted-foreground"), u = () => {
+  const e = () => F[t.size], i = () => t.status === "completed", c = () => t.status === "current", o = () => f(
+    "flex items-center justify-center rounded-full transition-[background-color,color,transform] duration-[var(--floe-duration-base)]",
+    "font-medium select-none flex-shrink-0",
+    e().indicator,
+    /* A hovered dot steps up the same pixel as every other surface. It used to
+     * scale by 10%, which is a different motion language for a 12px element —
+     * and at that size it reads as a size change, not as a response. */
+    t.clickable && !t.step.disabled ? "cursor-pointer hover:-translate-y-[var(--floe-hover-lift)]" : t.step.disabled ? "cursor-not-allowed opacity-50" : ""
+  ), p = () => t.variant === "dots" ? f("w-3 h-3 md:w-4 md:h-4", i() && "bg-primary", c() && "bg-primary ring-4 ring-primary/20", !i() && !c() && "bg-[var(--floe-well)]") : t.variant === "minimal" ? f("border-2", i() && "border-primary bg-primary text-primary-foreground", c() && "border-primary text-primary bg-transparent", !i() && !c() && "border-[var(--floe-control-edge)] text-[var(--floe-ink-soft)] bg-transparent") : f(i() && "bg-primary text-primary-foreground", c() && "bg-primary text-primary-foreground ring-4 ring-[var(--floe-accent-soft)]", !i() && !c() && "bg-[var(--floe-well)] text-[var(--floe-ink-soft)]"), u = () => {
     t.clickable && !t.step.disabled && t.onClick && t.onClick();
   };
   return (() => {
     var n = T();
     return n.$$keydown = (r) => {
       (r.key === "Enter" || r.key === " ") && (r.preventDefault(), u());
-    }, n.$$click = u, a(n, s(v, {
+    }, n.$$click = u, a(n, s(h, {
       get when() {
         return t.variant !== "dots";
       },
       get children() {
-        return s(v, {
+        return s(h, {
           get when() {
             return V(() => !!i())() && !t.step.icon;
           },
           get fallback() {
-            return s(v, {
+            return s(h, {
               get when() {
                 return t.step.icon;
               },
@@ -63,7 +71,7 @@ function M(t) {
               },
               get children() {
                 var r = L();
-                return a(r, () => t.step.icon), b(() => x(r, e().iconSize)), r;
+                return a(r, () => t.step.icon), x(() => b(r, e().iconSize)), r;
               }
             });
           },
@@ -76,9 +84,9 @@ function M(t) {
           }
         });
       }
-    })), b((r) => {
-      var g = c() || i() ? "raised" : "inset", C = c() ? "current" : i() ? "completed" : "pending", k = m(o(), h()), d = t.clickable ? "button" : void 0, l = t.clickable && !t.step.disabled ? 0 : void 0;
-      return g !== r.e && z(n, "data-floe-surface", r.e = g), C !== r.t && z(n, "data-floe-step-state", r.t = C), k !== r.a && x(n, r.a = k), d !== r.o && z(n, "role", r.o = d), l !== r.i && z(n, "tabindex", r.i = l), r;
+    })), x((r) => {
+      var m = c() || i() ? "raised" : "inset", k = c() ? "current" : i() ? "completed" : "pending", C = f(o(), p()), d = t.clickable ? "button" : void 0, l = t.clickable && !t.step.disabled ? 0 : void 0;
+      return m !== r.e && z(n, "data-floe-surface", r.e = m), k !== r.t && z(n, "data-floe-step-state", r.t = k), C !== r.a && b(n, r.a = C), d !== r.o && z(n, "role", r.o = d), l !== r.i && z(n, "tabindex", r.i = l), r;
     }, {
       e: void 0,
       t: void 0,
@@ -91,25 +99,25 @@ function M(t) {
 function j(t) {
   const e = () => F[t.size], i = () => t.status === "current", c = () => t.status === "upcoming";
   return (() => {
-    var o = B(), h = o.firstChild, u = h.firstChild;
-    return a(u, () => t.step.label), a(h, s(v, {
+    var o = B(), p = o.firstChild, u = p.firstChild;
+    return a(u, () => t.step.label), a(p, s(h, {
       get when() {
         return t.step.optional;
       },
       get children() {
         return U();
       }
-    }), null), a(o, s(v, {
+    }), null), a(o, s(h, {
       get when() {
         return t.step.description;
       },
       get children() {
         var n = q();
-        return a(n, () => t.step.description), b(() => x(n, m(e().description, "text-muted-foreground", c() && "opacity-60", t.step.disabled && "opacity-50"))), n;
+        return a(n, () => t.step.description), x(() => b(n, f(e().description, "text-[var(--floe-ink-soft)]", c() && "opacity-60", t.step.disabled && "opacity-50"))), n;
       }
-    }), null), b((n) => {
-      var r = m("flex flex-col", e().gap, t.orientation === "horizontal" ? "items-center text-center" : "items-start"), g = m("flex items-center gap-1", e().label, "font-medium transition-colors duration-200", i() && "text-foreground", !i() && "text-muted-foreground", t.step.disabled && "opacity-50");
-      return r !== n.e && x(o, n.e = r), g !== n.t && x(h, n.t = g), n;
+    }), null), x((n) => {
+      var r = f("flex flex-col", e().gap, t.orientation === "horizontal" ? "items-center text-center" : "items-start"), m = f("flex items-center gap-1", e().label, "font-medium transition-colors duration-[var(--floe-duration-base)]", i() && "text-foreground", !i() && "text-[var(--floe-ink-soft)]", t.step.disabled && "opacity-50");
+      return r !== n.e && b(o, n.e = r), m !== n.t && b(p, n.t = m), n;
     }, {
       e: void 0,
       t: void 0
@@ -120,19 +128,19 @@ function E(t) {
   const e = () => F[t.size];
   return (() => {
     var i = G();
-    return b(() => x(i, m("transition-colors duration-300", t.orientation === "horizontal" ? m("flex-1", e().connector) : m(e().connectorVertical, "mx-auto"), t.completed ? "bg-primary" : "bg-muted"))), i;
+    return x(() => b(i, f("transition-colors duration-[var(--floe-duration-slow)]", t.orientation === "horizontal" ? f("flex-1", e().connector) : f(e().connectorVertical, "mx-auto"), t.completed ? "bg-primary" : "bg-[var(--floe-well)]"))), i;
   })();
 }
 function Z(t) {
-  const [e] = I(t, ["steps", "currentStep", "onStepClick", "variant", "orientation", "size", "showConnector", "allowClickCompleted", "allowClickFuture", "class"]), i = () => e.variant ?? "default", c = () => e.orientation ?? "horizontal", o = () => e.size ?? "md", h = () => e.showConnector ?? !0, u = () => e.allowClickCompleted ?? !0, n = () => e.allowClickFuture ?? !1, r = $(() => typeof e.currentStep == "function" ? e.currentStep() : e.currentStep), g = (d) => {
+  const [e] = I(t, ["steps", "currentStep", "onStepClick", "variant", "orientation", "size", "showConnector", "allowClickCompleted", "allowClickFuture", "class"]), i = () => e.variant ?? "default", c = () => e.orientation ?? "horizontal", o = () => e.size ?? "md", p = () => e.showConnector ?? !0, u = () => e.allowClickCompleted ?? !0, n = () => e.allowClickFuture ?? !1, r = $(() => typeof e.currentStep == "function" ? e.currentStep() : e.currentStep), m = (d) => {
     const l = r();
     return d < l ? "completed" : d === l ? "current" : "upcoming";
-  }, C = (d) => {
+  }, k = (d) => {
     if (!e.onStepClick) return !1;
-    const l = g(d);
+    const l = m(d);
     return l === "completed" ? u() : l === "upcoming" ? n() : !1;
-  }, k = (d, l) => {
-    C(d) && !l.disabled && e.onStepClick?.(d, l);
+  }, C = (d, l) => {
+    k(d) && !l.disabled && e.onStepClick?.(d, l);
   };
   return (() => {
     var d = H();
@@ -142,17 +150,17 @@ function Z(t) {
       },
       by: (l) => l.id,
       children: (l, w) => {
-        const S = () => g(w()), P = () => C(w()), _ = () => w() === e.steps.length - 1;
+        const S = () => m(w()), P = () => k(w()), _ = () => w() === e.steps.length - 1;
         return (() => {
           var y = W();
-          return a(y, s(v, {
+          return a(y, s(h, {
             get when() {
               return c() === "horizontal";
             },
             get children() {
               return [(() => {
-                var f = J();
-                return a(f, s(M, {
+                var g = J();
+                return a(g, s(M, {
                   get step() {
                     return l();
                   },
@@ -168,13 +176,13 @@ function Z(t) {
                   get size() {
                     return o();
                   },
-                  onClick: () => k(w(), l()),
+                  onClick: () => C(w(), l()),
                   get clickable() {
                     return P();
                   }
-                }), null), a(f, s(v, {
+                }), null), a(g, s(h, {
                   get when() {
-                    return V(() => !!h())() && !_();
+                    return V(() => !!p())() && !_();
                   },
                   get children() {
                     return s(E, {
@@ -187,10 +195,10 @@ function Z(t) {
                       orientation: "horizontal"
                     });
                   }
-                }), null), f;
+                }), null), g;
               })(), (() => {
-                var f = Q();
-                return a(f, s(j, {
+                var g = Q();
+                return a(g, s(j, {
                   get step() {
                     return l();
                   },
@@ -201,17 +209,17 @@ function Z(t) {
                     return o();
                   },
                   orientation: "horizontal"
-                })), f;
+                })), g;
               })()];
             }
-          }), null), a(y, s(v, {
+          }), null), a(y, s(h, {
             get when() {
               return c() === "vertical";
             },
             get children() {
               return [(() => {
-                var f = R();
-                return a(f, s(M, {
+                var g = R();
+                return a(g, s(M, {
                   get step() {
                     return l();
                   },
@@ -227,13 +235,13 @@ function Z(t) {
                   get size() {
                     return o();
                   },
-                  onClick: () => k(w(), l()),
+                  onClick: () => C(w(), l()),
                   get clickable() {
                     return P();
                   }
-                }), null), a(f, s(v, {
+                }), null), a(g, s(h, {
                   get when() {
-                    return V(() => !!h())() && !_();
+                    return V(() => !!p())() && !_();
                   },
                   get children() {
                     return s(E, {
@@ -246,10 +254,10 @@ function Z(t) {
                       orientation: "vertical"
                     });
                   }
-                }), null), f;
+                }), null), g;
               })(), (() => {
-                var f = X();
-                return a(f, s(j, {
+                var g = X();
+                return a(g, s(j, {
                   get step() {
                     return l();
                   },
@@ -260,35 +268,35 @@ function Z(t) {
                     return o();
                   },
                   orientation: "vertical"
-                })), f;
+                })), g;
               })()];
             }
-          }), null), b(() => x(y, m("flex", c() === "horizontal" ? m("flex-col items-center", !_() && "flex-1") : "flex-row items-start gap-3"))), y;
+          }), null), x(() => b(y, f("flex", c() === "horizontal" ? f("flex-col items-center", !_() && "flex-1") : "flex-row items-start gap-3"))), y;
         })();
       }
-    })), b(() => x(d, m("flex", c() === "horizontal" ? "flex-row items-start justify-between" : "flex-col", e.class))), d;
+    })), x(() => b(d, f("flex", c() === "horizontal" ? "flex-row items-start justify-between" : "flex-col", e.class))), d;
   })();
 }
 function ot(t) {
   const [e, i] = I(t, ["steps", "footer", "contentClass", "footerClass"]), c = () => e.steps.map(({
     content: u,
     ...n
-  }) => n), o = $(() => typeof t.currentStep == "function" ? t.currentStep() : t.currentStep), h = () => e.steps[o()]?.content;
+  }) => n), o = $(() => typeof t.currentStep == "function" ? t.currentStep() : t.currentStep), p = () => e.steps[o()]?.content;
   return (() => {
     var u = Y(), n = u.firstChild, r = n.nextSibling;
     return a(n, s(Z, A(i, {
       get steps() {
         return c();
       }
-    }))), a(r, h), a(u, s(v, {
+    }))), a(r, p), a(u, s(h, {
       get when() {
         return e.footer;
       },
       get children() {
-        var g = W();
-        return a(g, () => e.footer), b(() => x(g, m("flex-shrink-0 mt-6", e.footerClass))), g;
+        var m = W();
+        return a(m, () => e.footer), x(() => b(m, f("flex-shrink-0 mt-6", e.footerClass))), m;
       }
-    }), null), b(() => x(r, m("flex-1 min-h-0", e.contentClass))), u;
+    }), null), x(() => b(r, f("flex-1 min-h-0", e.contentClass))), u;
   })();
 }
 function lt(t) {
@@ -296,21 +304,21 @@ function lt(t) {
     totalSteps: e,
     initialStep: i = 0,
     onStepChange: c
-  } = t, [o, h] = K(i), u = (d) => {
+  } = t, [o, p] = K(i), u = (d) => {
     const l = Math.max(0, Math.min(d, e - 1));
-    h(l), c?.(l);
+    p(l), c?.(l);
   }, n = () => {
     o() < e - 1 && u(o() + 1);
   }, r = () => {
     o() > 0 && u(o() - 1);
-  }, g = $(() => o() === 0), C = $(() => o() === e - 1);
+  }, m = $(() => o() === 0), k = $(() => o() === e - 1);
   return {
     currentStep: o,
     nextStep: n,
     prevStep: r,
     goToStep: u,
-    isFirstStep: g,
-    isLastStep: C,
+    isFirstStep: m,
+    isLastStep: k,
     reset: () => {
       u(i);
     }

package/dist/components/ui/Switch.js

@@ -1,14 +1,14 @@
-import { insert as a, createComponent as n, effect as d, className as s, template as u, spread as z, mergeProps as T, setAttribute as H } from "solid-js/web";
-import { splitProps as I, createUniqueId as L, Show as c } from "solid-js";
-import { cn as o } from "../../utils/cn.js";
-var j = /* @__PURE__ */ u('<div class="relative inline-flex items-center shrink-0"><input data-floe-choice-input type=checkbox role=switch class="sr-only peer"><div data-floe-surface=inset data-floe-surface-part=switch-track><div data-floe-surface=raised data-floe-surface-part=switch-thumb>'), x = /* @__PURE__ */ u("<span>"), q = /* @__PURE__ */ u('<div class="flex flex-col justify-center min-h-0">'), A = /* @__PURE__ */ u("<label>");
+import { insert as l, createComponent as a, effect as d, className as s, template as u, spread as z, mergeProps as T, setAttribute as H } from "solid-js/web";
+import { splitProps as I, createUniqueId as L, Show as o } from "solid-js";
+import { cn as c } from "../../utils/cn.js";
+var j = /* @__PURE__ */ u('<div class="relative inline-flex items-center shrink-0"><input data-floe-choice-input type=checkbox role=switch class="sr-only peer"><div data-floe-surface=inset data-floe-surface-part=switch-track><div data-floe-surface=raised data-floe-surface-part=switch-thumb>'), v = /* @__PURE__ */ u("<span>"), q = /* @__PURE__ */ u('<div class="flex flex-col justify-center min-h-0">'), A = /* @__PURE__ */ u("<label>");
 const E = {
   sm: {
     track: "w-7 h-4",
     thumb: "w-3 h-3",
     thumbTranslate: "translate-x-3",
     label: "text-xs leading-4",
-    description: "text-[10px] leading-3",
+    description: "text-caption leading-[var(--floe-line-caption)]",
     trackHeight: 16
   },
   md: {
@@ -16,7 +16,7 @@ const E = {
     thumb: "w-4 h-4",
     thumbTranslate: "translate-x-4",
     label: "text-xs leading-5",
-    description: "text-[11px] leading-4",
+    description: "text-caption leading-[var(--floe-line-caption)]",
     trackHeight: 20
   },
   lg: {
@@ -28,8 +28,8 @@ const E = {
     trackHeight: 24
   }
 };
-function D(v) {
-  const [e, k] = I(v, ["checked", "onChange", "size", "label", "description", "labelPosition", "class", "disabled", "id"]), w = L(), C = () => e.id ?? w, _ = () => e.size ?? "md", i = () => E[_()], g = () => e.labelPosition ?? "right", $ = (t) => {
+function D(x) {
+  const [e, k] = I(x, ["checked", "onChange", "size", "label", "description", "labelPosition", "class", "disabled", "id"]), w = L(), C = () => e.id ?? w, _ = () => e.size ?? "md", i = () => E[_()], f = () => e.labelPosition ?? "right", $ = (t) => {
     const r = t.target;
     e.onChange?.(r.checked);
   }, y = () => (() => {
@@ -47,56 +47,56 @@ function D(v) {
       get "aria-checked"() {
         return e.checked;
       }
-    }, k), !1, !1), d((l) => {
-      var f = e.checked ? "true" : void 0, m = o("rounded-full transition-colors duration-200 cursor-pointer", i().track, e.checked ? "bg-primary" : "bg-input", e.disabled && "cursor-not-allowed", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"), p = o("rounded-full bg-background shadow-sm transition-transform duration-200", i().thumb, "absolute top-0.5 left-0.5", e.checked ? i().thumbTranslate : "translate-x-0");
-      return f !== l.e && H(h, "data-floe-selected", l.e = f), m !== l.t && s(h, l.t = m), p !== l.a && s(S, l.a = p), l;
+    }, k), !1, !1), d((n) => {
+      var b = e.checked ? "true" : void 0, p = c("rounded-full cursor-pointer", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", i().track, e.checked ? "bg-primary" : "bg-input", e.disabled && "cursor-not-allowed", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"), m = c("rounded-full bg-background", "shadow-[var(--floe-elevation-raised)]", "transition-transform duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", i().thumb, "absolute top-0.5 left-0.5", e.checked ? i().thumbTranslate : "translate-x-0");
+      return b !== n.e && H(h, "data-floe-selected", n.e = b), p !== n.t && s(h, n.t = p), m !== n.a && s(S, n.a = m), n;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     }), t;
-  })(), b = () => n(c, {
+  })(), g = () => a(o, {
     get when() {
       return e.label || e.description;
     },
     get children() {
       var t = q();
-      return a(t, n(c, {
+      return l(t, a(o, {
         get when() {
           return e.label;
         },
         get children() {
-          var r = x();
-          return a(r, () => e.label), d(() => s(r, o("text-foreground", i().label))), r;
+          var r = v();
+          return l(r, () => e.label), d(() => s(r, c("text-foreground", i().label))), r;
         }
-      }), null), a(t, n(c, {
+      }), null), l(t, a(o, {
         get when() {
           return e.description;
         },
         get children() {
-          var r = x();
-          return a(r, () => e.description), d(() => s(r, o("text-muted-foreground", i().description))), r;
+          var r = v();
+          return l(r, () => e.description), d(() => s(r, c("text-[var(--floe-ink-soft)]", i().description))), r;
         }
       }), null), t;
     }
   }), P = () => e.description ? "items-start" : "items-center";
   return (() => {
     var t = A();
-    return a(t, n(c, {
+    return l(t, a(o, {
       get when() {
-        return g() === "left";
+        return f() === "left";
       },
       get children() {
-        return n(b, {});
+        return a(g, {});
       }
-    }), null), a(t, n(y, {}), null), a(t, n(c, {
+    }), null), l(t, a(y, {}), null), l(t, a(o, {
       get when() {
-        return g() === "right";
+        return f() === "right";
       },
       get children() {
-        return n(b, {});
+        return a(g, {});
       }
-    }), null), d(() => s(t, o("inline-flex gap-2 cursor-pointer select-none", P(), e.disabled && "opacity-50 cursor-not-allowed", e.class))), t;
+    }), null), d(() => s(t, c("inline-flex gap-2 cursor-pointer select-none", P(), e.disabled && "opacity-50 cursor-not-allowed", e.class))), t;
   })();
 }
 export {