@floegence/floe-webapp-core 0.86.36 → 0.86.38

package/dist/components/ui/KeyedFor.d.ts

@@ -0,0 +1,9 @@
+import { type Accessor, type JSX } from 'solid-js';
+export interface KeyedForProps<T, K extends string | number> {
+    each: readonly T[] | null | undefined;
+    by: (item: T) => K;
+    children: (item: Accessor<T>, index: Accessor<number>) => JSX.Element;
+    fallback?: JSX.Element;
+}
+/** Retain list owners by semantic identity while observing replacement values. */
+export declare function KeyedFor<T, K extends string | number>(props: KeyedForProps<T, K>): JSX.Element;

package/dist/components/ui/KeyedFor.js

@@ -0,0 +1,32 @@
+import { createComponent as a } from "solid-js/web";
+import { createMemo as s, For as u } from "solid-js";
+function h(r) {
+  const o = s(() => {
+    const e = /* @__PURE__ */ new Map(), t = [];
+    for (const c of r.each ?? []) {
+      const n = r.by(c);
+      if (e.has(n)) throw new Error("KeyedFor requires unique keys");
+      e.set(n, c), t.push(n);
+    }
+    return {
+      values: e,
+      keys: t
+    };
+  });
+  return a(u, {
+    get each() {
+      return o().keys;
+    },
+    get fallback() {
+      return r.fallback;
+    },
+    children: (e, t) => (
+      // Render callbacks receive accessors intentionally; the child owns their reads.
+      // eslint-disable-next-line solid/reactivity
+      r.children(() => o().values.get(e), t)
+    )
+  });
+}
+export {
+  h as KeyedFor
+};

package/dist/components/ui/Stepper.js

@@ -1,8 +1,9 @@
-import { insert as a, createComponent as s, memo as V, effect as b, className as x, mergeProps as A, template as h, setAttribute as z, delegateEvents as D } from "solid-js/web";
-import { splitProps as I, createMemo as $, For as N, Show as v, createSignal as O } from "solid-js";
+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 { KeyedFor as N } from "./KeyedFor.js";
 import { cn as m } from "../../utils/cn.js";
-import { Check as T } from "../icons/index.js";
-var U = /* @__PURE__ */ h("<div data-floe-surface-part=step>"), L = /* @__PURE__ */ h("<span>"), q = /* @__PURE__ */ h('<span class="text-muted-foreground/60 font-normal">(Optional)'), B = /* @__PURE__ */ h("<p>"), G = /* @__PURE__ */ h("<div><div><span>"), H = /* @__PURE__ */ h("<div data-floe-surface=inset data-floe-surface-part=progress-track>"), J = /* @__PURE__ */ h("<nav aria-label=Progress>"), K = /* @__PURE__ */ h('<div class="flex items-center w-full">'), Q = /* @__PURE__ */ h("<div class=mt-2>"), R = /* @__PURE__ */ h('<div class="flex flex-col items-center">'), X = /* @__PURE__ */ h('<div class="flex-1 pb-4">'), W = /* @__PURE__ */ h("<div>"), Y = /* @__PURE__ */ h('<div class="flex flex-col h-full"><div class="flex-shrink-0 mb-6"></div><div>');
+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>');
 const F = {
   sm: {
     indicator: "w-6 h-6 text-[10px]",
@@ -33,11 +34,11 @@ 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" : ""), p = () => 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 = () => 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 = () => {
     t.clickable && !t.step.disabled && t.onClick && t.onClick();
   };
   return (() => {
-    var n = U();
+    var n = T();
     return n.$$keydown = (r) => {
       (r.key === "Enter" || r.key === " ") && (r.preventDefault(), u());
     }, n.$$click = u, a(n, s(v, {
@@ -67,7 +68,7 @@ function M(t) {
             });
           },
           get children() {
-            return s(T, {
+            return s(O, {
               get class() {
                 return e().iconSize;
               }
@@ -76,7 +77,7 @@ function M(t) {
         });
       }
     })), b((r) => {
-      var g = c() || i() ? "raised" : "inset", C = c() ? "current" : i() ? "completed" : "pending", k = m(o(), p()), d = t.clickable ? "button" : void 0, l = t.clickable && !t.step.disabled ? 0 : void 0;
+      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;
     }, {
       e: void 0,
@@ -90,25 +91,25 @@ function M(t) {
 function j(t) {
   const e = () => F[t.size], i = () => t.status === "current", c = () => t.status === "upcoming";
   return (() => {
-    var o = G(), p = o.firstChild, u = p.firstChild;
-    return a(u, () => t.step.label), a(p, s(v, {
+    var o = B(), h = o.firstChild, u = h.firstChild;
+    return a(u, () => t.step.label), a(h, s(v, {
       get when() {
         return t.step.optional;
       },
       get children() {
-        return q();
+        return U();
       }
     }), null), a(o, s(v, {
       get when() {
         return t.step.description;
       },
       get children() {
-        var n = B();
+        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;
       }
     }), 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(p, n.t = g), n;
+      return r !== n.e && x(o, n.e = r), g !== n.t && x(h, n.t = g), n;
     }, {
       e: void 0,
       t: void 0
@@ -118,12 +119,12 @@ function j(t) {
 function E(t) {
   const e = () => F[t.size];
   return (() => {
-    var i = H();
+    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;
   })();
 }
 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", p = () => 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", h = () => e.showConnector ?? !0, u = () => e.allowClickCompleted ?? !0, n = () => e.allowClickFuture ?? !1, r = $(() => typeof e.currentStep == "function" ? e.currentStep() : e.currentStep), g = (d) => {
     const l = r();
     return d < l ? "completed" : d === l ? "current" : "upcoming";
   }, C = (d) => {
@@ -134,11 +135,12 @@ function Z(t) {
     C(d) && !l.disabled && e.onStepClick?.(d, l);
   };
   return (() => {
-    var d = J();
+    var d = H();
     return a(d, s(N, {
       get each() {
         return e.steps;
       },
+      by: (l) => l.id,
       children: (l, w) => {
         const S = () => g(w()), P = () => C(w()), _ = () => w() === e.steps.length - 1;
         return (() => {
@@ -149,9 +151,11 @@ function Z(t) {
             },
             get children() {
               return [(() => {
-                var f = K();
+                var f = J();
                 return a(f, s(M, {
-                  step: l,
+                  get step() {
+                    return l();
+                  },
                   get index() {
                     return w();
                   },
@@ -164,13 +168,13 @@ function Z(t) {
                   get size() {
                     return o();
                   },
-                  onClick: () => k(w(), l),
+                  onClick: () => k(w(), l()),
                   get clickable() {
                     return P();
                   }
                 }), null), a(f, s(v, {
                   get when() {
-                    return V(() => !!p())() && !_();
+                    return V(() => !!h())() && !_();
                   },
                   get children() {
                     return s(E, {
@@ -187,7 +191,9 @@ function Z(t) {
               })(), (() => {
                 var f = Q();
                 return a(f, s(j, {
-                  step: l,
+                  get step() {
+                    return l();
+                  },
                   get status() {
                     return S();
                   },
@@ -206,7 +212,9 @@ function Z(t) {
               return [(() => {
                 var f = R();
                 return a(f, s(M, {
-                  step: l,
+                  get step() {
+                    return l();
+                  },
                   get index() {
                     return w();
                   },
@@ -219,13 +227,13 @@ function Z(t) {
                   get size() {
                     return o();
                   },
-                  onClick: () => k(w(), l),
+                  onClick: () => k(w(), l()),
                   get clickable() {
                     return P();
                   }
                 }), null), a(f, s(v, {
                   get when() {
-                    return V(() => !!p())() && !_();
+                    return V(() => !!h())() && !_();
                   },
                   get children() {
                     return s(E, {
@@ -242,7 +250,9 @@ function Z(t) {
               })(), (() => {
                 var f = X();
                 return a(f, s(j, {
-                  step: l,
+                  get step() {
+                    return l();
+                  },
                   get status() {
                     return S();
                   },
@@ -259,18 +269,18 @@ function Z(t) {
     })), b(() => x(d, m("flex", c() === "horizontal" ? "flex-row items-start justify-between" : "flex-col", e.class))), d;
   })();
 }
-function it(t) {
+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), p = () => e.steps[o()]?.content;
+  }) => n), o = $(() => typeof t.currentStep == "function" ? t.currentStep() : t.currentStep), h = () => 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, p), a(u, s(v, {
+    }))), a(r, h), a(u, s(v, {
       get when() {
         return e.footer;
       },
@@ -281,14 +291,14 @@ function it(t) {
     }), null), b(() => x(r, m("flex-1 min-h-0", e.contentClass))), u;
   })();
 }
-function ot(t) {
+function lt(t) {
   const {
     totalSteps: e,
     initialStep: i = 0,
     onStepChange: c
-  } = t, [o, p] = O(i), u = (d) => {
+  } = t, [o, h] = K(i), u = (d) => {
     const l = Math.max(0, Math.min(d, e - 1));
-    p(l), c?.(l);
+    h(l), c?.(l);
   }, n = () => {
     o() < e - 1 && u(o() + 1);
   }, r = () => {
@@ -309,6 +319,6 @@ function ot(t) {
 D(["click", "keydown"]);
 export {
   Z as Stepper,
-  it as Wizard,
-  ot as useWizard
+  ot as Wizard,
+  lt as useWizard
 };

package/dist/components/ui/index.d.ts

@@ -46,3 +46,4 @@ export { LinearProgress, CircularProgress, SegmentedProgress, StepsProgress, typ
 export { SurfaceAnchoredLayer, type SurfaceAnchoredLayerProps } from './SurfaceAnchoredLayer';
 export { PersistentHorizontalScrollbar, type PersistentHorizontalScrollbarProps } from './PersistentHorizontalScrollbar';
 export { SettingsLayout, SettingsNavigation, SettingsSection, SettingsList, SettingRow, type SettingsNavigationItem, type SettingsNavigationGroup, type SettingsNavigationProps, type SettingsSectionProps, type SettingRowProps, } from './Settings';
+export { KeyedFor, type KeyedForProps } from './KeyedFor';