@floegence/floe-webapp-core 0.91.3 → 0.91.5

package/dist/components/ui/Select.js

@@ -1,6 +1,6 @@
 import { createComponent as c, mergeProps as I, insert as o, spread as te, memo as z, effect as P, use as le, setAttribute as m, className as ve, template as w, delegateEvents as ge } from "solid-js/web";
 import { createUniqueId as me, createSignal as B, createMemo as he, createEffect as N, untrack as be, onCleanup as ae, onMount as ye, Show as V, For as Q } from "solid-js";
-import { cn as re } from "../../utils/cn.js";
+import { cn as ne } from "../../utils/cn.js";
 import { useFloeLocale as we } from "../../context/LocaleContext.js";
 import { useOverlayMask as Ce } from "../../hooks/useOverlayMask.js";
 import { SurfaceFloatingLayer as xe } from "./SurfaceFloatingLayer.js";
@@ -12,7 +12,7 @@ import { ChevronDown as $e, Check as Ee } from "../icons/index.js";
 import { resolveSurfacePortalBoundaryRect as De, resolveSurfacePortalHost as Pe } from "./dialogSurfaceScope.js";
 var Se = /* @__PURE__ */ w("<input>"), _e = /* @__PURE__ */ w("<option value>"), qe = /* @__PURE__ */ w('<div role=status class="px-2 py-2 text-caption">'), Ae = /* @__PURE__ */ w("<button type=button>"), Fe = /* @__PURE__ */ w('<div role=alert class="p-2 text-error">'), Te = /* @__PURE__ */ w('<div role=status class="p-2 text-caption">'), Be = /* @__PURE__ */ w('<div class="floe-floating-presence floe-floating-menu rounded-panel border border-[var(--floe-line)] bg-popover text-popover-foreground shadow-[var(--floe-elevation-float)] p-1"data-floe-surface=floating><div role=listbox class="max-h-64 overflow-y-auto"data-floe-local-interaction-surface=true>'), Ie = /* @__PURE__ */ w('<div class="relative min-w-0"><select tabindex=-1 aria-hidden=true class="sr-only pointer-events-none">'), Re = /* @__PURE__ */ w("<button><span class=truncate>"), ze = /* @__PURE__ */ w("<option selected>"), Ke = /* @__PURE__ */ w("<option>"), Me = /* @__PURE__ */ w('<div role=option><span class="h-3.5 w-3.5 shrink-0">');
 function U(e) {
-  const u = we(), g = Le(), b = me(), W = () => e.id ?? g.id ?? "select-" + b, S = "options-" + b, _ = () => e.disabled ?? g.disabled, q = () => e.readOnly ?? g.readOnly, [h, ne] = K({
+  const u = we(), g = Le(), b = me(), W = () => e.id ?? g.id ?? "select-" + b, S = "options-" + b, _ = () => e.disabled ?? g.disabled, q = () => e.readOnly ?? g.readOnly, [h, re] = K({
     value: () => e.open,
     defaultValue: e.defaultOpen ?? !1,
     onChange: (t) => e.onOpenChange?.(t)
@@ -31,19 +31,19 @@ function U(e) {
     const t = M().toLocaleLowerCase(u.locale);
     return e.options.filter((a) => [a.label, ...a.keywords ?? []].some((i) => i.toLocaleLowerCase(u.locale).includes(t)));
   }), X = () => e.values.map((t) => e.options.find((a) => a.value === t)?.label ?? t).join(", "), y = (t) => {
-    t && (_() || q()) || (ne(t), t || G(""));
+    t && (_() || q()) || (re(t), t || G(""));
   }, j = (t) => {
     _() || q() || t.disabled || (e.onValuesChange(e.multiple ? e.values.includes(t.value) ? e.values.filter((a) => a !== t.value) : [...e.values, t.value] : [t.value]), e.multiple || y(!1), x?.focus({
       preventScroll: !0
-    }));
+    }), e.onOptionSelect?.(t));
   }, Y = (t, a) => {
-    const i = C().map((v, r) => v.disabled ? -1 : r).filter((v) => v >= 0);
+    const i = C().map((v, n) => v.disabled ? -1 : n).filter((v) => v >= 0);
     if (!i.length) {
       E(-1);
       return;
     }
-    const l = i.indexOf(L()), n = a === "first" ? 0 : a === "last" ? i.length - 1 : l < 0 ? t < 0 ? i.length - 1 : 0 : (l + t + i.length) % i.length;
-    E(i[n]), k?.querySelector('[id="' + S + "-" + i[n] + '"]')?.scrollIntoView({
+    const l = i.indexOf(L()), r = a === "first" ? 0 : a === "last" ? i.length - 1 : l < 0 ? t < 0 ? i.length - 1 : 0 : (l + t + i.length) % i.length;
+    E(i[r]), k?.querySelector('[id="' + S + "-" + i[r] + '"]')?.scrollIntoView({
       block: "nearest"
     });
   }, fe = () => {
@@ -101,7 +101,7 @@ function U(e) {
     const i = (l) => {
       clearTimeout(a), a = setTimeout(() => {
         if (!l.defaultPrevented && (e.onValuesChange([...e.resetValues]), y(!1), O))
-          for (const n of O.options) n.selected = e.values.includes(n.value);
+          for (const r of O.options) r.selected = e.values.includes(r.value);
       });
     };
     t?.addEventListener("reset", i), ae(() => {
@@ -152,7 +152,7 @@ function U(e) {
     "data-floe-dropdown-trigger": "",
     "data-floe-surface": "inset",
     get class() {
-      return re("floe-field flex w-full min-w-0 items-center justify-between gap-2 h-[var(--floe-control-height-md)] px-2.5 text-[length:var(--floe-type-control)]", e.class);
+      return ne("floe-field flex w-full min-w-0 items-center justify-between gap-2 h-[var(--floe-control-height-md)] px-2.5 text-[length:var(--floe-type-control)]", e.class);
     },
     onKeyDown: (t) => {
       if (!(_() || q() || t.isComposing)) {
@@ -198,11 +198,11 @@ function U(e) {
       },
       get fallback() {
         return (() => {
-          var l = Re(), n = l.firstChild;
+          var l = Re(), r = l.firstChild;
           return te(l, I(Z, {
             type: "button",
             onClick: () => y(!h())
-          }), !1, !0), o(n, () => X() || e.placeholder || u.t("selectPlaceholder")), o(l, c($e, {
+          }), !1, !0), o(r, () => X() || e.placeholder || u.t("selectPlaceholder")), o(l, c($e, {
             class: "h-3.5 w-3.5 shrink-0"
           }), null), l;
         })();
@@ -223,12 +223,12 @@ function U(e) {
             return z(() => !!h())() ? M() : X();
           },
           onClick: () => y(!0),
-          onInput: (n) => {
-            G(n.currentTarget.value), E(-1), y(!0), e.onQueryChange?.(n.currentTarget.value);
+          onInput: (r) => {
+            G(r.currentTarget.value), E(-1), y(!0), e.onQueryChange?.(r.currentTarget.value);
           }
         }), !1, !1), l;
       }
-    }), a), a.addEventListener("change", (l) => e.onValuesChange(Array.from(l.currentTarget.selectedOptions, (n) => n.value))), a.addEventListener("invalid", (l) => {
+    }), a), a.addEventListener("change", (l) => e.onValuesChange(Array.from(l.currentTarget.selectedOptions, (r) => r.value))), a.addEventListener("invalid", (l) => {
       l.preventDefault(), x?.focus();
     });
     var i = O;
@@ -242,25 +242,25 @@ function U(e) {
       }
     }), null), o(a, c(Q, {
       get each() {
-        return e.values.filter((l) => l !== "" && !e.options.some((n) => n.value === l));
+        return e.values.filter((l) => l !== "" && !e.options.some((r) => r.value === l));
       },
       children: (l) => (() => {
-        var n = ze();
-        return n.value = l, o(n, l), n;
+        var r = ze();
+        return r.value = l, o(r, l), r;
       })()
     }), null), o(a, c(Q, {
       get each() {
         return e.options;
       },
       children: (l) => (() => {
-        var n = Ke();
-        return o(n, () => l.label), P((v) => {
-          var r = e.values.includes(l.value), f = l.disabled;
-          return r !== v.e && (n.selected = v.e = r), f !== v.t && (n.disabled = v.t = f), v;
+        var r = Ke();
+        return o(r, () => l.label), P((v) => {
+          var n = e.values.includes(l.value), f = l.disabled;
+          return n !== v.e && (r.selected = v.e = n), f !== v.t && (r.disabled = v.t = f), v;
         }, {
           e: void 0,
           t: void 0
-        }), P(() => n.value = l.value), n;
+        }), P(() => r.value = l.value), r;
       })()
     }), null), o(t, c(V, {
       get when() {
@@ -287,22 +287,22 @@ function U(e) {
             };
           },
           get children() {
-            var l = Be(), n = l.firstChild, v = k;
+            var l = Be(), r = l.firstChild, v = k;
             return typeof v == "function" ? le(v, l) : k = l, o(l, c(V, {
               get when() {
                 return e.loading;
               },
               get children() {
-                var r = qe();
-                return o(r, () => u.t("loading")), r;
+                var n = qe();
+                return o(n, () => u.t("loading")), n;
               }
-            }), n), o(l, c(V, {
+            }), r), o(l, c(V, {
               get when() {
                 return e.error;
               },
               get children() {
-                var r = Fe();
-                return o(r, () => e.error, null), o(r, c(V, {
+                var n = Fe();
+                return o(n, () => e.error, null), o(n, c(V, {
                   get when() {
                     return e.onRetry;
                   },
@@ -310,17 +310,17 @@ function U(e) {
                     var f = Ae();
                     return f.$$click = () => e.onRetry?.(), o(f, () => u.t("retry")), f;
                   }
-                }), null), r;
+                }), null), n;
               }
-            }), n), m(n, "id", S), o(n, c(Q, {
+            }), r), m(r, "id", S), o(r, c(Q, {
               get each() {
                 return C();
               },
-              children: (r, f) => (() => {
+              children: (n, f) => (() => {
                 var s = Me(), $ = s.firstChild;
-                return s.$$click = () => j(r), s.$$pointermove = () => !r.disabled && E(f()), s.$$pointerdown = (d) => d.preventDefault(), o($, c(V, {
+                return s.$$click = () => j(n), s.$$pointermove = () => !n.disabled && E(f()), s.$$pointerdown = (d) => d.preventDefault(), o($, c(V, {
                   get when() {
-                    return e.values.includes(r.value);
+                    return e.values.includes(n.value);
                   },
                   get children() {
                     return c(Ee, {
@@ -329,9 +329,9 @@ function U(e) {
                   }
                 })), o(s, (() => {
                   var d = z(() => !!e.renderOption);
-                  return () => d() ? e.renderOption(r) : r.label;
+                  return () => d() ? e.renderOption(n) : n.label;
                 })(), null), P((d) => {
-                  var A = S + "-" + f(), F = e.values.includes(r.value), T = r.disabled || void 0, p = e.values.includes(r.value) ? "true" : void 0, ee = re("flex min-h-[var(--floe-row-height)] items-center gap-2 rounded-sm px-2 text-[length:var(--floe-type-control)]", L() === f() && "bg-accent text-accent-foreground", r.disabled ? "opacity-50" : "cursor-pointer");
+                  var A = S + "-" + f(), F = e.values.includes(n.value), T = n.disabled || void 0, p = e.values.includes(n.value) ? "true" : void 0, ee = ne("flex min-h-[var(--floe-row-height)] items-center gap-2 rounded-sm px-2 text-[length:var(--floe-type-control)]", L() === f() && "bg-accent text-accent-foreground", n.disabled ? "opacity-50" : "cursor-pointer");
                   return A !== d.e && m(s, "id", d.e = A), F !== d.t && m(s, "aria-selected", d.t = F), T !== d.a && m(s, "aria-disabled", d.a = T), p !== d.o && m(s, "data-floe-selected", d.o = p), ee !== d.i && ve(s, d.i = ee), d;
                 }, {
                   e: void 0,
@@ -346,12 +346,12 @@ function U(e) {
                 return z(() => !C().length && !e.loading)() && !e.error;
               },
               get children() {
-                var r = Te();
-                return o(r, () => u.t("noResults")), r;
+                var n = Te();
+                return o(n, () => u.t("noResults")), n;
               }
-            }), null), P((r) => {
+            }), null), P((n) => {
               var f = D.state(), s = se(), $ = D.exiting(), d = D.exiting() ? "true" : void 0, A = e.ariaLabel, F = e.ariaLabelledBy ?? (e.ariaLabel ? void 0 : W()), T = e.multiple || void 0;
-              return f !== r.e && m(l, "data-floating-presence", r.e = f), s !== r.t && m(l, "data-floating-side", r.t = s), $ !== r.a && (l.inert = r.a = $), d !== r.o && m(l, "aria-hidden", r.o = d), A !== r.i && m(n, "aria-label", r.i = A), F !== r.n && m(n, "aria-labelledby", r.n = F), T !== r.s && m(n, "aria-multiselectable", r.s = T), r;
+              return f !== n.e && m(l, "data-floating-presence", n.e = f), s !== n.t && m(l, "data-floating-side", n.t = s), $ !== n.a && (l.inert = n.a = $), d !== n.o && m(l, "aria-hidden", n.o = d), A !== n.i && m(r, "aria-label", n.i = A), F !== n.n && m(r, "aria-labelledby", n.n = F), T !== n.s && m(r, "aria-multiselectable", n.s = T), n;
             }, {
               e: void 0,
               t: void 0,
@@ -365,8 +365,8 @@ function U(e) {
         });
       }
     }), null), P((l) => {
-      var n = u.direction, v = e.name ?? g.name, r = e.form, f = e.required ?? g.required, s = _(), $ = e.multiple;
-      return n !== l.e && m(t, "dir", l.e = n), v !== l.t && m(a, "name", l.t = v), r !== l.a && m(a, "form", l.a = r), f !== l.o && (a.required = l.o = f), s !== l.i && (a.disabled = l.i = s), $ !== l.n && (a.multiple = l.n = $), l;
+      var r = u.direction, v = e.name ?? g.name, n = e.form, f = e.required ?? g.required, s = _(), $ = e.multiple;
+      return r !== l.e && m(t, "dir", l.e = r), v !== l.t && m(a, "name", l.t = v), n !== l.a && m(a, "form", l.a = n), f !== l.o && (a.required = l.o = f), s !== l.i && (a.disabled = l.i = s), $ !== l.n && (a.multiple = l.n = $), l;
     }, {
       e: void 0,
       t: void 0,

package/dist/floe.css

@@ -1055,7 +1055,8 @@
 .floe-prompt-card-input {
   display: block; width: 100%; min-height: 2.5rem; max-height: min(10rem, 30dvh);
   padding: var(--floe-pad-tight) 0; border: 0; border-radius: 0;
-  background: transparent; font: inherit; line-height: 1.5;
+  background: transparent; color: var(--floe-ink); caret-color: var(--floe-ink);
+  font: inherit; line-height: 1.5;
   field-sizing: content; resize: none;
 }
 .floe-prompt-card-input::placeholder { color: var(--floe-field-placeholder); }