@floegence/floe-webapp-core 0.86.76 → 0.87.1

package/dist/components/ui/Popover.js

@@ -1,40 +1,45 @@
-import { setAttribute as s, insert as g, createComponent as R, Portal as M, spread as H, mergeProps as T, memo as z, effect as j, template as k, use as S, delegateEvents as q } from "solid-js/web";
-import { createSignal as O, createMemo as N, createEffect as U, onCleanup as K, Show as W } from "solid-js";
+import { setAttribute as g, insert as v, memo as S, createComponent as E, Portal as H, spread as T, mergeProps as z, effect as q, template as O, use as R, delegateEvents as j } from "solid-js/web";
+import { createSignal as C, createMemo as N, createEffect as U, onCleanup as K, Show as W } from "solid-js";
 import { cn as D } from "../../utils/cn.js";
 import { calculateMenuPosition as G } from "./menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as J } from "./localInteractionSurface.js";
 import { createFloatingPresence as Q } from "./floatingPresence.js";
 import { useOverlayMask as V } from "../../hooks/useOverlayMask.js";
 import { resolveSurfacePortalHost as X, projectSurfacePortalPosition as Y, isSurfacePortalMode as Z, resolveSurfacePortalMount as ee, resolveSurfacePortalBoundaryRect as te } from "./dialogSurfaceScope.js";
-var oe = /* @__PURE__ */ k("<div data-floe-popover-panel role=dialog aria-modal=false data-floe-surface=floating>"), ne = /* @__PURE__ */ k('<div class="relative inline-flex"><div class=inline-flex data-floe-popover-trigger aria-haspopup=dialog>');
+var oe = /* @__PURE__ */ O("<div data-floe-popover-panel role=dialog aria-modal=false data-floe-surface=floating>"), ne = /* @__PURE__ */ O('<div class="relative inline-flex"><div class=inline-flex data-floe-popover-trigger>');
 let re = 0;
-function me(n) {
-  const h = () => n.open !== void 0, [B, I] = O(n.defaultOpen ?? !1), c = () => h() ? !!n.open : B(), i = (o) => {
-    h() || I(o), o !== c() && n.onOpenChange?.(o);
-  }, a = Q({
+function ge(t) {
+  const h = () => t.open !== void 0, [_, k] = C(t.defaultOpen ?? !1), c = () => h() ? !!t.open : _(), i = (o) => {
+    const e = o !== c();
+    h() || k(o), e && t.onOpenChange?.(o);
+  }, r = Q({
     open: c,
-    element: () => r
-  }), [w, v] = O({
+    element: () => l
+  }), [w, m] = C({
     x: -9999,
     y: -9999
   });
-  let l, r;
-  const p = `floe-popover-${re += 1}`, b = `${p}-panel`, d = N(() => a.mounted() ? X({
-    owner: l
+  let a, l;
+  const p = `floe-popover-${re += 1}`, b = `${p}-panel`, u = N(() => r.mounted() ? X({
+    owner: a
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), A = () => ee(d()), y = () => Z(d()), F = () => te(d()), x = (o) => Y(o, d()), P = () => (n.placement ?? "bottom-start").startsWith("top") ? "top" : "bottom", L = () => (n.placement ?? "bottom-start").slice(P() === "top" ? 5 : 7), _ = () => i(!1);
+  }), A = () => ee(u()), y = () => Z(u()), B = () => te(u()), x = (o) => Y(o, u()), $ = () => (t.placement ?? "bottom-start").startsWith("top") ? "top" : "bottom", F = () => (t.placement ?? "bottom-start").slice($() === "top" ? 5 : 7), I = () => i(!1), L = () => {
+    i(!1), a?.querySelector('button, input, [tabindex="0"]')?.focus({
+      preventScroll: !0
+    });
+  };
   V({
-    open: a.mounted,
-    root: () => r,
+    open: r.mounted,
+    root: () => l,
     containsTarget: (o) => {
       const e = o instanceof Element ? o : document.activeElement;
-      return r?.contains(e ?? null) || e?.closest(`[data-floe-popover="${p}"]`) ? !0 : !!l?.contains(e ?? null);
+      return l?.contains(e ?? null) || e?.closest(`[data-floe-popover="${p}"]`) ? !0 : !!a?.contains(e ?? null);
     },
-    onClose: () => i(!1),
+    onClose: L,
     onInteractOutside: () => i(!1),
     onEscapeOutside: () => i(!1),
     lockBodyScroll: !1,
@@ -42,93 +47,107 @@ function me(n) {
     autoFocus: !1,
     restoreFocus: !1,
     blockHotkeys: !1,
-    closeOnEscape: () => n.closeOnEscape === !1 ? !1 : "inside",
+    closeOnEscape: () => t.closeOnEscape === !1 ? !1 : "inside",
     escapeKeyPhase: "bubble"
   });
-  const E = () => {
-    if (!l || !r) return;
-    const o = G(l.getBoundingClientRect(), r.getBoundingClientRect(), L(), F());
-    if (P() === "top") {
-      const e = l.getBoundingClientRect(), f = r.getBoundingClientRect();
-      v({
+  const P = () => {
+    if (!a || !l) return;
+    const o = G(a.getBoundingClientRect(), l.getBoundingClientRect(), F(), B());
+    if ($() === "top") {
+      const e = a.getBoundingClientRect(), d = l.getBoundingClientRect();
+      m({
         x: o.x,
-        y: e.top - f.height - 6
+        y: e.top - d.height - 6
       });
       return;
     }
-    v(o);
+    m(o);
   };
-  return U(() => {
-    if (!a.mounted()) {
-      v({
+  U(() => {
+    if (!r.mounted()) {
+      m({
         x: -9999,
         y: -9999
       });
       return;
     }
-    const o = requestAnimationFrame(E), e = () => E();
+    const o = requestAnimationFrame(P), e = () => P();
     window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), K(() => {
       cancelAnimationFrame(o), window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     });
-  }), (() => {
+  });
+  const M = {
+    "aria-haspopup": "dialog",
+    get "aria-expanded"() {
+      return c();
+    },
+    get "aria-controls"() {
+      return r.mounted() ? b : void 0;
+    }
+  };
+  return (() => {
     var o = ne(), e = o.firstChild;
-    s(o, "data-floe-popover", p), e.$$keydown = (t) => {
-      t.key === "Escape" && c() && (t.stopPropagation(), i(!1));
+    g(o, "data-floe-popover", p), e.$$keydown = (n) => {
+      n.key === "Escape" && c() && (n.stopPropagation(), i(!1));
     }, e.$$click = () => i(!c());
-    var f = l;
-    return typeof f == "function" ? S(f, e) : l = e, g(e, () => n.trigger), g(o, R(W, {
+    var d = a;
+    return typeof d == "function" ? R(d, e) : a = e, v(e, (() => {
+      var n = S(() => typeof t.trigger == "function");
+      return () => n() ? t.trigger(M) : t.trigger;
+    })()), v(o, E(W, {
       get when() {
-        return a.mounted();
+        return r.mounted();
       },
       get children() {
-        return R(M, {
+        return E(H, {
           get mount() {
             return A();
           },
           get children() {
-            var t = oe(), u = r;
-            return typeof u == "function" ? S(u, t) : r = t, s(t, "id", b), H(t, T({
+            var n = oe(), s = l;
+            return typeof s == "function" ? R(s, n) : l = n, g(n, "id", b), T(n, z({
               get class() {
-                return D(y() ? "absolute z-20" : "fixed z-50", "bg-popover text-popover-foreground", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-window-shadow)]", "floe-floating-presence floe-floating-menu", n.class);
+                return D(y() ? "absolute z-20" : "fixed z-50", "bg-popover text-popover-foreground", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-window-shadow)]", "floe-floating-presence floe-floating-menu", t.class);
               },
               get "data-floating-presence"() {
-                return a.state();
+                return r.state();
               },
               get "aria-hidden"() {
-                return a.exiting() ? "true" : void 0;
+                return r.exiting() ? "true" : void 0;
+              },
+              get inert() {
+                return r.exiting();
               },
               get "aria-label"() {
-                return n.ariaLabel;
+                return t.ariaLabel;
               },
               get style() {
                 return {
                   left: `${x(w()).x}px`,
                   top: `${x(w()).y}px`,
-                  "min-width": n.width ? `${n.width}px` : void 0,
+                  "min-width": t.width ? `${t.width}px` : void 0,
                   "max-width": "min(calc(100vw - 24px), 420px)"
                 };
               }
             }, () => ({
               [J]: y() ? "true" : void 0
-            })), !1, !0), g(t, (() => {
-              var m = z(() => typeof n.children == "function");
-              return () => m() ? n.children(_) : n.children;
-            })()), t;
+            })), !1, !0), v(n, (() => {
+              var f = S(() => typeof t.children == "function");
+              return () => f() ? t.children(I) : t.children;
+            })()), n;
           }
         });
       }
-    }), null), j((t) => {
-      var u = n.triggerInputSurface ? "true" : void 0, m = n.triggerInputSurface ? "inset" : void 0, $ = c(), C = a.mounted() ? b : void 0;
-      return u !== t.e && s(e, "data-floe-input-surface", t.e = u), m !== t.t && s(e, "data-floe-surface", t.t = m), $ !== t.a && s(e, "aria-expanded", t.a = $), C !== t.o && s(e, "aria-controls", t.o = C), t;
+    }), null), q((n) => {
+      var s = t.triggerInputSurface ? "true" : void 0, f = t.triggerInputSurface ? "inset" : void 0;
+      return s !== n.e && g(e, "data-floe-input-surface", n.e = s), f !== n.t && g(e, "data-floe-surface", n.t = f), n;
     }, {
       e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
+      t: void 0
     }), o;
   })();
 }
-q(["click", "keydown"]);
+j(["click", "keydown"]);
 export {
-  me as Popover
+  ge as Popover
 };

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

@@ -0,0 +1,46 @@
+import { type JSX } from 'solid-js';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    keywords?: string[];
+}
+export interface SelectBaseProps {
+    id?: string;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    invalid?: boolean;
+    options: readonly SelectOption[];
+    placeholder?: string;
+    class?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    onQueryChange?: (query: string) => void;
+    /** Disable local filtering when the host supplies remote search results. */
+    filter?: boolean;
+    renderOption?: (option: SelectOption) => JSX.Element;
+    ref?: (control: HTMLButtonElement | HTMLInputElement) => void;
+}
+export interface SelectProps extends SelectBaseProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
+export interface MultiSelectProps extends SelectBaseProps {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+}
+export declare function Select(props: SelectProps): JSX.Element;
+export declare function Combobox(props: SelectProps): JSX.Element;
+export declare function MultiSelect(props: MultiSelectProps): JSX.Element;

package/dist/components/ui/Select.js

@@ -0,0 +1,414 @@
+import { createComponent as c, mergeProps as A, insert as s, spread as Z, memo as S, effect as E, setAttribute as y, className as ie, template as h, use as oe, delegateEvents as ue } from "solid-js/web";
+import { createUniqueId as de, createSignal as T, createMemo as se, createEffect as K, untrack as ce, onCleanup as p, onMount as fe, Show as x, For as M } from "solid-js";
+import { cn as ee } from "../../utils/cn.js";
+import { useFloeLocale as ve } from "../../context/LocaleContext.js";
+import { useOverlayMask as ge } from "../../hooks/useOverlayMask.js";
+import { SurfaceFloatingLayer as me } from "./SurfaceFloatingLayer.js";
+import { calculateMenuPosition as he } from "./menuUtils.js";
+import { useFormControl as be, joinAriaIds as ye } from "./formFieldContext.js";
+import { createControllableValue as F } from "./controllable.js";
+import { ChevronDown as we, Check as Ce } from "../icons/index.js";
+import { resolveSurfacePortalBoundaryRect as ke, resolveSurfacePortalHost as xe } from "./dialogSurfaceScope.js";
+var Ve = /* @__PURE__ */ h("<input>"), Le = /* @__PURE__ */ h("<option value>"), $e = /* @__PURE__ */ h('<div role=status class="px-2 py-2 text-caption">'), Oe = /* @__PURE__ */ h("<button type=button>"), Ee = /* @__PURE__ */ h('<div role=alert class="p-2 text-error">'), De = /* @__PURE__ */ h('<div role=listbox class="max-h-64 overflow-y-auto"data-floe-local-interaction-surface=true>'), _e = /* @__PURE__ */ h('<div role=status class="p-2 text-caption">'), Pe = /* @__PURE__ */ h('<div class="relative min-w-0"><select tabindex=-1 aria-hidden=true class="sr-only pointer-events-none">'), qe = /* @__PURE__ */ h("<button><span class=truncate>"), Ae = /* @__PURE__ */ h("<option selected>"), Se = /* @__PURE__ */ h("<option>"), Te = /* @__PURE__ */ h('<div role=option><span class="h-3.5 w-3.5 shrink-0">');
+function H(e) {
+  const u = ve(), f = be(), g = de(), j = () => e.id ?? f.id ?? "select-" + g, D = "options-" + g, _ = () => e.disabled ?? f.disabled, P = () => e.readOnly ?? f.readOnly, [v, te] = F({
+    value: () => e.open,
+    defaultValue: e.defaultOpen ?? !1,
+    onChange: (t) => e.onOpenChange?.(t)
+  }), [B, z] = T(""), [V, $] = T(-1), [le, ae] = T({
+    x: 0,
+    y: 0
+  }), [re, ne] = T(200);
+  let w, L, k, I = "", N = 0;
+  const b = se(() => {
+    if (!e.searchable || e.filter === !1 || !B()) return e.options;
+    const t = B().toLocaleLowerCase(u.locale);
+    return e.options.filter((r) => [r.label, ...r.keywords ?? []].some((n) => n.toLocaleLowerCase(u.locale).includes(t)));
+  }), Q = () => e.values.map((t) => e.options.find((r) => r.value === t)?.label ?? t).join(", "), m = (t) => {
+    t && (_() || P()) || (te(t), t || z(""));
+  }, R = (t) => {
+    _() || P() || t.disabled || (e.onValuesChange(e.multiple ? e.values.includes(t.value) ? e.values.filter((r) => r !== t.value) : [...e.values, t.value] : [t.value]), e.multiple || m(!1), w?.focus({
+      preventScroll: !0
+    }));
+  }, U = (t, r) => {
+    const n = b().map((o, i) => o.disabled ? -1 : i).filter((o) => o >= 0);
+    if (!n.length) {
+      $(-1);
+      return;
+    }
+    const l = n.indexOf(V()), a = r === "first" ? 0 : r === "last" ? n.length - 1 : l < 0 ? t < 0 ? n.length - 1 : 0 : (l + t + n.length) % n.length;
+    $(n[a]), k?.querySelector('[id="' + D + "-" + n[a] + '"]')?.scrollIntoView({
+      block: "nearest"
+    });
+  }, O = () => {
+    if (!w || !k) return;
+    const t = w.getBoundingClientRect();
+    ne(t.width);
+    const r = ke(xe({
+      owner: w
+    }));
+    ae(he(t, k.getBoundingClientRect(), u.direction === "rtl" ? "end" : "start", r));
+  };
+  K(() => {
+    if (!v()) return;
+    const t = ce(V);
+    if (t < 0 || !b()[t] || b()[t].disabled) {
+      const r = b().findIndex((n) => !n.disabled && e.values.includes(n.value));
+      $(r >= 0 ? r : b().findIndex((n) => !n.disabled));
+    }
+  }), K(() => {
+    if (!v() || typeof window > "u") return;
+    const t = requestAnimationFrame(O), r = new ResizeObserver(O);
+    w && r.observe(w), k && r.observe(k), window.addEventListener("resize", O), window.addEventListener("scroll", O, !0), p(() => {
+      cancelAnimationFrame(t), r.disconnect(), window.removeEventListener("resize", O), window.removeEventListener("scroll", O, !0);
+    });
+  }), ge({
+    open: v,
+    root: () => k,
+    containsTarget: (t) => t instanceof Node && !!(k?.contains(t) || w?.contains(t)),
+    onClose: () => m(!1),
+    onInteractOutside: () => m(!1),
+    onEscapeOutside: () => m(!1),
+    lockBodyScroll: !1,
+    trapFocus: !1,
+    autoFocus: !1,
+    restoreFocus: !1,
+    blockHotkeys: !1,
+    closeOnEscape: "inside",
+    escapeKeyPhase: "bubble"
+  }), fe(() => {
+    const t = L?.form;
+    let r;
+    const n = (l) => {
+      clearTimeout(r), r = setTimeout(() => {
+        if (!l.defaultPrevented && (e.onValuesChange([...e.resetValues]), m(!1), L))
+          for (const a of L.options) a.selected = e.values.includes(a.value);
+      });
+    };
+    t?.addEventListener("reset", n), p(() => {
+      clearTimeout(r), t?.removeEventListener("reset", n);
+    });
+  }), K(() => {
+    const t = e.values;
+    if (e.options, L) for (const r of L.options) r.selected = t.includes(r.value);
+  });
+  const W = {
+    get id() {
+      return j();
+    },
+    get disabled() {
+      return _();
+    },
+    get "aria-readonly"() {
+      return P();
+    },
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    get "aria-expanded"() {
+      return v();
+    },
+    get "aria-controls"() {
+      return v() ? D : void 0;
+    },
+    get "aria-activedescendant"() {
+      return v() && b()[V()] ? D + "-" + V() : void 0;
+    },
+    get "aria-label"() {
+      return e.ariaLabel;
+    },
+    get "aria-labelledby"() {
+      return e.ariaLabelledBy;
+    },
+    get "aria-describedby"() {
+      return ye(f["aria-describedby"], e.ariaDescribedBy);
+    },
+    get "aria-invalid"() {
+      return e.invalid || f["aria-invalid"];
+    },
+    get "aria-required"() {
+      return e.required ?? f.required;
+    },
+    "data-floe-input-surface": "true",
+    "data-floe-control": "select",
+    "data-floe-dropdown-trigger": "",
+    "data-floe-surface": "inset",
+    get class() {
+      return ee("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 (!(_() || P() || t.isComposing)) {
+        if (t.key === "Escape" && v()) {
+          t.preventDefault(), t.stopPropagation(), m(!1);
+          return;
+        }
+        if (t.key === "Tab") {
+          m(!1);
+          return;
+        }
+        if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+          t.preventDefault();
+          const r = v();
+          m(!0), r && U(t.key === "ArrowDown" ? 1 : -1);
+          return;
+        }
+        if (v() && (t.key === "Home" || t.key === "End") && !e.searchable) {
+          t.preventDefault(), U(0, t.key === "Home" ? "first" : "last");
+          return;
+        }
+        if (t.key === "Enter" || !e.searchable && t.key === " ") {
+          t.preventDefault(), v() && b()[V()] ? R(b()[V()]) : m(!0);
+          return;
+        }
+        if (!e.searchable && t.key.length === 1 && !t.ctrlKey && !t.metaKey && !t.altKey) {
+          const r = Date.now();
+          I = r - N > 700 ? t.key : I + t.key, N = r;
+          const n = e.options.find((l) => !l.disabled && l.label.toLocaleLowerCase(u.locale).startsWith(I.toLocaleLowerCase(u.locale)));
+          n && (t.preventDefault(), v() ? $(b().indexOf(n)) : R(n));
+        }
+      }
+    },
+    ref: (t) => {
+      w = t, e.ref?.(t);
+    }
+  };
+  return (() => {
+    var t = Pe(), r = t.firstChild;
+    s(t, c(x, {
+      get when() {
+        return e.searchable;
+      },
+      get fallback() {
+        return (() => {
+          var l = qe(), a = l.firstChild;
+          return Z(l, A(W, {
+            type: "button",
+            onClick: () => m(!v())
+          }), !1, !0), s(a, () => Q() || e.placeholder || u.t("selectPlaceholder")), s(l, c(we, {
+            class: "h-3.5 w-3.5 shrink-0"
+          }), null), l;
+        })();
+      },
+      get children() {
+        var l = Ve();
+        return Z(l, A(W, {
+          type: "text",
+          autocomplete: "off",
+          get readOnly() {
+            return P();
+          },
+          "aria-autocomplete": "list",
+          get placeholder() {
+            return e.placeholder ?? u.t("searchPlaceholder");
+          },
+          get value() {
+            return S(() => !!v())() ? B() : Q();
+          },
+          onClick: () => m(!0),
+          onInput: (a) => {
+            z(a.currentTarget.value), $(-1), m(!0), e.onQueryChange?.(a.currentTarget.value);
+          }
+        }), !1, !1), l;
+      }
+    }), r), r.addEventListener("change", (l) => e.onValuesChange(Array.from(l.currentTarget.selectedOptions, (a) => a.value))), r.addEventListener("invalid", (l) => {
+      l.preventDefault(), w?.focus();
+    });
+    var n = L;
+    return typeof n == "function" ? oe(n, r) : L = r, s(r, c(x, {
+      get when() {
+        return S(() => !e.multiple)() && !e.options.some((l) => l.value === "");
+      },
+      get children() {
+        var l = Le();
+        return E(() => l.selected = !e.values.length || e.values[0] === ""), l;
+      }
+    }), null), s(r, c(M, {
+      get each() {
+        return e.values.filter((l) => l !== "" && !e.options.some((a) => a.value === l));
+      },
+      children: (l) => (() => {
+        var a = Ae();
+        return a.value = l, s(a, l), a;
+      })()
+    }), null), s(r, c(M, {
+      get each() {
+        return e.options;
+      },
+      children: (l) => (() => {
+        var a = Se();
+        return s(a, () => l.label), E((o) => {
+          var i = e.values.includes(l.value), C = l.disabled;
+          return i !== o.e && (a.selected = o.e = i), C !== o.t && (a.disabled = o.t = C), o;
+        }, {
+          e: void 0,
+          t: void 0
+        }), E(() => a.value = l.value), a;
+      })()
+    }), null), s(t, c(x, {
+      get when() {
+        return v();
+      },
+      get children() {
+        return c(me, {
+          owner: w,
+          get position() {
+            return le();
+          },
+          layerRef: (l) => {
+            k = l;
+          },
+          get dir() {
+            return u.direction;
+          },
+          class: "rounded-panel border border-[var(--floe-line)] bg-popover text-popover-foreground shadow-[var(--floe-elevation-float)] p-1",
+          get style() {
+            return {
+              width: re() + "px",
+              "max-width": "calc(100vw - 24px)"
+            };
+          },
+          "data-floe-surface": "floating",
+          get children() {
+            return [c(x, {
+              get when() {
+                return e.loading;
+              },
+              get children() {
+                var l = $e();
+                return s(l, () => u.t("loading")), l;
+              }
+            }), c(x, {
+              get when() {
+                return e.error;
+              },
+              get children() {
+                var l = Ee();
+                return s(l, () => e.error, null), s(l, c(x, {
+                  get when() {
+                    return e.onRetry;
+                  },
+                  get children() {
+                    var a = Oe();
+                    return a.$$click = () => e.onRetry?.(), s(a, () => u.t("retry")), a;
+                  }
+                }), null), l;
+              }
+            }), (() => {
+              var l = De();
+              return y(l, "id", D), s(l, c(M, {
+                get each() {
+                  return b();
+                },
+                children: (a, o) => (() => {
+                  var i = Te(), C = i.firstChild;
+                  return i.$$click = () => R(a), i.$$pointermove = () => !a.disabled && $(o()), i.$$pointerdown = (d) => d.preventDefault(), s(C, c(x, {
+                    get when() {
+                      return e.values.includes(a.value);
+                    },
+                    get children() {
+                      return c(Ce, {
+                        class: "h-3.5 w-3.5"
+                      });
+                    }
+                  })), s(i, (() => {
+                    var d = S(() => !!e.renderOption);
+                    return () => d() ? e.renderOption(a) : a.label;
+                  })(), null), E((d) => {
+                    var q = D + "-" + o(), G = e.values.includes(a.value), J = a.disabled || void 0, X = e.values.includes(a.value) ? "true" : void 0, Y = ee("flex min-h-[var(--floe-row-height)] items-center gap-2 rounded-sm px-2 text-[length:var(--floe-type-control)]", V() === o() && "bg-accent text-accent-foreground", a.disabled ? "opacity-50" : "cursor-pointer");
+                    return q !== d.e && y(i, "id", d.e = q), G !== d.t && y(i, "aria-selected", d.t = G), J !== d.a && y(i, "aria-disabled", d.a = J), X !== d.o && y(i, "data-floe-selected", d.o = X), Y !== d.i && ie(i, d.i = Y), d;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0,
+                    i: void 0
+                  }), i;
+                })()
+              })), E((a) => {
+                var o = e.ariaLabel, i = e.ariaLabelledBy ?? (e.ariaLabel ? void 0 : j()), C = e.multiple || void 0;
+                return o !== a.e && y(l, "aria-label", a.e = o), i !== a.t && y(l, "aria-labelledby", a.t = i), C !== a.a && y(l, "aria-multiselectable", a.a = C), a;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+              }), l;
+            })(), c(x, {
+              get when() {
+                return S(() => !b().length && !e.loading)() && !e.error;
+              },
+              get children() {
+                var l = _e();
+                return s(l, () => u.t("noResults")), l;
+              }
+            })];
+          }
+        });
+      }
+    }), null), E((l) => {
+      var a = u.direction, o = e.name ?? f.name, i = e.form, C = e.required ?? f.required, d = _(), q = e.multiple;
+      return a !== l.e && y(t, "dir", l.e = a), o !== l.t && y(r, "name", l.t = o), i !== l.a && y(r, "form", l.a = i), C !== l.o && (r.required = l.o = C), d !== l.i && (r.disabled = l.i = d), q !== l.n && (r.multiple = l.n = q), l;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), t;
+  })();
+}
+function We(e) {
+  const [u, f] = F({
+    value: () => e.value,
+    defaultValue: e.defaultValue ?? "",
+    onChange: (g) => e.onChange?.(g)
+  });
+  return c(H, A(e, {
+    get values() {
+      return [u()];
+    },
+    get resetValues() {
+      return [e.defaultValue ?? ""];
+    },
+    onValuesChange: (g) => f(g[0] ?? "")
+  }));
+}
+function Ge(e) {
+  const [u, f] = F({
+    value: () => e.value,
+    defaultValue: e.defaultValue ?? "",
+    onChange: (g) => e.onChange?.(g)
+  });
+  return c(H, A(e, {
+    searchable: !0,
+    get values() {
+      return [u()];
+    },
+    get resetValues() {
+      return [e.defaultValue ?? ""];
+    },
+    onValuesChange: (g) => f(g[0] ?? "")
+  }));
+}
+function Je(e) {
+  const [u, f] = F({
+    value: () => e.value,
+    defaultValue: e.defaultValue ?? [],
+    onChange: (g) => e.onChange?.(g)
+  });
+  return c(H, A(e, {
+    multiple: !0,
+    get values() {
+      return u();
+    },
+    get resetValues() {
+      return e.defaultValue ?? [];
+    },
+    onValuesChange: f
+  }));
+}
+ue(["click", "pointerdown", "pointermove"]);
+export {
+  Ge as Combobox,
+  Je as MultiSelect,
+  We as Select
+};

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

@@ -0,0 +1,7 @@
+import { type JSX } from 'solid-js';
+export interface SliderProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'> {
+    onValueChange?: (value: number) => void;
+    valueText?: (value: number) => string;
+}
+/** Native range semantics retain keyboard, pointer, reset and form behavior. */
+export declare function Slider(props: SliderProps): JSX.Element;