@floegence/floe-webapp-core 0.86.76 → 0.87.0

package/dist/components/ui/Input.js

@@ -1,131 +1,137 @@
-import { insert as l, createComponent as c, effect as y, className as k, memo as _, spread as B, mergeProps as L, setAttribute as h, template as C, Portal as ae, setStyleProperty as re, use as ne, delegateEvents as se } from "solid-js/web";
-import { splitProps as N, createUniqueId as E, Show as w, createSignal as ie, createEffect as de, onCleanup as ue, For as fe } from "solid-js";
-import { cn as I } from "../../utils/cn.js";
-import { Minus as ce, Plus as ve, ChevronDown as he } from "../icons/index.js";
-var ge = /* @__PURE__ */ C('<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--floe-ink-quiet)] pointer-events-none">'), xe = /* @__PURE__ */ C('<div class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[var(--floe-ink-quiet)] pointer-events-none">'), M = /* @__PURE__ */ C('<p class="mt-1 text-caption text-error"role=alert>'), R = /* @__PURE__ */ C('<p class="mt-1 text-[length:var(--floe-type-caption)] leading-[var(--floe-line-caption)] text-[var(--floe-ink-soft)]">'), be = /* @__PURE__ */ C("<div class=relative><input data-floe-control=input data-floe-surface=inset>"), me = /* @__PURE__ */ C("<div><textarea data-floe-control=input data-floe-surface=inset>"), pe = /* @__PURE__ */ C('<div><div data-floe-input-surface data-floe-control=compound-input data-floe-surface=inset><button type=button aria-label="Decrease value"></button><input type=number><button type=button aria-label="Increase value">'), we = /* @__PURE__ */ C("<div><div data-floe-input-surface data-floe-control=compound-input data-floe-surface=inset><input>"), oe = /* @__PURE__ */ C("<span>"), ye = /* @__PURE__ */ C("<button type=button><span>"), Ie = /* @__PURE__ */ C("<div role=listbox>"), $e = /* @__PURE__ */ C("<button type=button data-floe-interactive=item role=option>");
-const ke = {
-  sm: "h-7 text-xs px-2",
-  md: "h-8 text-[length:var(--floe-type-control)] px-2.5",
-  lg: "h-9 text-sm px-3"
+import { insert as o, createComponent as h, effect as y, className as S, memo as T, spread as F, mergeProps as L, setAttribute as m, template as _, Portal as le, setStyleProperty as ee, use as te, delegateEvents as oe } from "solid-js/web";
+import { splitProps as N, createUniqueId as M, Show as p, createSignal as re, createEffect as ae, onCleanup as de, For as se } from "solid-js";
+import { cn as O } from "../../utils/cn.js";
+import { useFloeLocale as ue } from "../../context/LocaleContext.js";
+import { useFormControl as R, joinAriaIds as j } from "./formFieldContext.js";
+import { Minus as ce, Plus as fe, ChevronDown as he } from "../icons/index.js";
+var ve = /* @__PURE__ */ _('<div class="absolute start-2.5 top-1/2 -translate-y-1/2 text-[var(--floe-ink-quiet)] pointer-events-none">'), ge = /* @__PURE__ */ _('<div class="absolute end-2.5 top-1/2 -translate-y-1/2 text-[var(--floe-ink-quiet)] pointer-events-none">'), q = /* @__PURE__ */ _('<p class="mt-1 text-caption text-error"role=alert>'), A = /* @__PURE__ */ _('<p class="mt-1 text-[length:var(--floe-type-caption)] leading-[var(--floe-line-caption)] text-[var(--floe-ink-soft)]">'), xe = /* @__PURE__ */ _("<div class=relative><input>"), be = /* @__PURE__ */ _("<div><textarea>"), me = /* @__PURE__ */ _("<div><div data-floe-input-surface data-floe-control=compound-input data-floe-surface=inset><button type=button></button><input><button type=button>"), pe = /* @__PURE__ */ _("<div><div data-floe-input-surface data-floe-control=compound-input data-floe-surface=inset><input>"), ne = /* @__PURE__ */ _("<span>"), ye = /* @__PURE__ */ _("<button type=button><span>"), we = /* @__PURE__ */ _("<div role=listbox>"), Ie = /* @__PURE__ */ _("<button type=button data-floe-interactive=item role=option>");
+const $e = {
+  sm: "h-[var(--floe-control-height-sm)] text-xs px-2",
+  md: "h-[var(--floe-control-height-md)] text-[length:var(--floe-type-control)] px-2.5",
+  lg: "h-[var(--floe-control-height-lg)] text-sm px-3"
 };
-function Te(r) {
-  const [e, b] = N(r, ["size", "error", "helperText", "leftIcon", "rightIcon", "class", "id"]), z = E(), m = () => e.id ?? z, v = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
-    const o = [];
-    return e.error && o.push(v()), e.helperText && !e.error && o.push(x()), o.length > 0 ? o.join(" ") : void 0;
+function Te(t) {
+  const e = R(), [r, b] = N(t, ["size", "error", "helperText", "aria-describedby", "leftIcon", "rightIcon", "class", "id"]), z = M(), v = () => r.id ?? e.id ?? z, x = () => `${v()}-error`, I = () => `${v()}-helper`, w = () => {
+    const s = [];
+    return r.error && s.push(x()), r.helperText && !r.error && s.push(I()), s.length > 0 ? s.join(" ") : void 0;
   };
   return (() => {
-    var o = be(), g = o.firstChild;
-    return l(o, c(w, {
+    var s = xe(), c = s.firstChild;
+    return o(s, h(p, {
       get when() {
-        return e.leftIcon;
+        return r.leftIcon;
       },
       get children() {
-        var s = ge();
-        return l(s, () => e.leftIcon), s;
+        var a = ve();
+        return o(a, () => r.leftIcon), a;
       }
-    }), g), B(g, L({
+    }), c), F(c, L(e, {
       get id() {
-        return m();
+        return v();
       },
+      "data-floe-control": "input",
+      "data-floe-surface": "inset",
       get "aria-invalid"() {
-        return e.error ? !0 : void 0;
+        return T(() => !!r.error)() ? !0 : e["aria-invalid"];
       },
       get "aria-describedby"() {
-        return $();
+        return j(e["aria-describedby"], r["aria-describedby"], w());
       },
       get class() {
-        return I(
+        return O(
           "floe-field w-full",
           "focus:outline-none",
           "disabled:cursor-not-allowed disabled:opacity-60",
-          ke[e.size ?? "md"],
+          $e[r.size ?? "md"],
           // Icon padding must come AFTER sizeStyles to override px-*
-          e.leftIcon && "pl-10",
-          e.rightIcon && "pr-10",
-          e.class
+          r.leftIcon && "ps-10",
+          r.rightIcon && "pe-10",
+          r.class
         );
       }
-    }, b), !1, !1), l(o, c(w, {
+    }, b), !1, !1), o(s, h(p, {
       get when() {
-        return e.rightIcon;
+        return r.rightIcon;
       },
       get children() {
-        var s = xe();
-        return l(s, () => e.rightIcon), s;
+        var a = ge();
+        return o(a, () => r.rightIcon), a;
       }
-    }), null), l(o, c(w, {
+    }), null), o(s, h(p, {
       get when() {
-        return e.error;
+        return r.error;
       },
       get children() {
-        var s = M();
-        return l(s, () => e.error), y(() => h(s, "id", v())), s;
+        var a = q();
+        return o(a, () => r.error), y(() => m(a, "id", x())), a;
       }
-    }), null), l(o, c(w, {
+    }), null), o(s, h(p, {
       get when() {
-        return _(() => !!e.helperText)() && !e.error;
+        return T(() => !!r.helperText)() && !r.error;
       },
       get children() {
-        var s = R();
-        return l(s, () => e.helperText), y(() => h(s, "id", x())), s;
+        var a = A();
+        return o(a, () => r.helperText), y(() => m(a, "id", I())), a;
       }
-    }), null), o;
+    }), null), s;
   })();
 }
-function _e(r) {
-  const [e, b] = N(r, ["error", "helperText", "class", "id"]), z = E(), m = () => e.id ?? z, v = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
-    const o = [];
-    return e.error && o.push(v()), e.helperText && !e.error && o.push(x()), o.length > 0 ? o.join(" ") : void 0;
+function Pe(t) {
+  const e = R(), [r, b] = N(t, ["error", "helperText", "aria-describedby", "class", "id"]), z = M(), v = () => r.id ?? e.id ?? z, x = () => `${v()}-error`, I = () => `${v()}-helper`, w = () => {
+    const s = [];
+    return r.error && s.push(x()), r.helperText && !r.error && s.push(I()), s.length > 0 ? s.join(" ") : void 0;
   };
   return (() => {
-    var o = me(), g = o.firstChild;
-    return B(g, L({
+    var s = be(), c = s.firstChild;
+    return F(c, L(e, {
+      "data-floe-control": "input",
       get id() {
-        return m();
+        return v();
       },
+      "data-floe-surface": "inset",
       get "aria-invalid"() {
-        return e.error ? !0 : void 0;
+        return T(() => !!r.error)() ? !0 : e["aria-invalid"];
       },
       get "aria-describedby"() {
-        return $();
+        return j(e["aria-describedby"], r["aria-describedby"], w());
       },
       get class() {
-        return I("floe-field w-full min-h-16 p-2.5 text-[length:var(--floe-type-control)]", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-60", "resize-y", e.class);
+        return O("floe-field w-full min-h-16 p-2.5 text-[length:var(--floe-type-control)]", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-60", "resize-y", r.class);
       }
-    }, b), !1, !1), l(o, c(w, {
+    }, b), !1, !1), o(s, h(p, {
       get when() {
-        return e.error;
+        return r.error;
       },
       get children() {
-        var s = M();
-        return l(s, () => e.error), y(() => h(s, "id", v())), s;
+        var a = q();
+        return o(a, () => r.error), y(() => m(a, "id", x())), a;
       }
-    }), null), l(o, c(w, {
+    }), null), o(s, h(p, {
       get when() {
-        return _(() => !!e.helperText)() && !e.error;
+        return T(() => !!r.helperText)() && !r.error;
       },
       get children() {
-        var s = R();
-        return l(s, () => e.helperText), y(() => h(s, "id", x())), s;
+        var a = A();
+        return o(a, () => r.helperText), y(() => m(a, "id", I())), a;
       }
-    }), null), o;
+    }), null), s;
   })();
 }
-function Pe(r) {
-  const e = E(), b = `${e}-error`, z = `${e}-helper`, m = () => r.step ?? 1, v = () => r.min ?? -1 / 0, x = () => r.max ?? 1 / 0, $ = (t) => Math.min(x(), Math.max(v(), t)), o = () => !r.disabled && r.value > v(), g = () => !r.disabled && r.value < x(), s = () => {
-    o() && r.onChange($(r.value - m()));
-  }, T = () => {
-    g() && r.onChange($(r.value + m()));
-  }, P = (t) => {
-    const d = parseFloat(t.currentTarget.value);
-    isNaN(d) || r.onChange($(d));
-  }, i = (t) => {
-    const d = parseFloat(t.currentTarget.value);
-    isNaN(d) ? r.onChange(v() === -1 / 0 ? 0 : v()) : r.onChange($(d));
-  }, u = () => {
-    const t = [];
-    return r.error && t.push(b), r.helperText && !r.error && t.push(z), t.length > 0 ? t.join(" ") : void 0;
-  }, f = {
+function De(t) {
+  const e = R(), r = ue(), b = M(), z = () => t.id ?? e.id ?? b, v = () => z() + "-error", x = () => z() + "-helper", I = () => t.step ?? 1, w = () => t.min ?? -1 / 0, s = () => t.max ?? 1 / 0, c = (g) => Math.min(s(), Math.max(w(), g)), a = () => !(t.disabled ?? e.disabled) && !(t.readOnly ?? e.readOnly) && t.value > w(), D = () => !(t.disabled ?? e.disabled) && !(t.readOnly ?? e.readOnly) && t.value < s(), l = () => {
+    a() && t.onChange(c(t.value - I()));
+  }, $ = () => {
+    D() && t.onChange(c(t.value + I()));
+  }, i = (g) => {
+    const C = parseFloat(g.currentTarget.value);
+    isNaN(C) || t.onChange(c(C));
+  }, u = (g) => {
+    const C = parseFloat(g.currentTarget.value);
+    isNaN(C) ? t.onChange(w() === -1 / 0 ? 0 : w()) : t.onChange(c(C));
+  }, f = () => {
+    const g = [];
+    return t.error && g.push(v()), t.helperText && !t.error && g.push(x()), g.length > 0 ? g.join(" ") : void 0;
+  }, n = {
     sm: {
       height: "h-7",
       btnSize: "w-7",
@@ -141,36 +147,82 @@ function Pe(r) {
       btnSize: "w-9",
       iconSize: "w-4 h-4"
     }
-  }, a = () => f[r.size ?? "md"];
+  }, k = () => n[t.size ?? "md"];
   return (() => {
-    var t = pe(), d = t.firstChild, S = d.firstChild, p = S.nextSibling, O = p.nextSibling;
-    return S.$$click = s, l(S, c(ce, {
+    var g = me(), C = g.firstChild, P = C.firstChild, V = P.nextSibling, B = V.nextSibling;
+    return P.$$click = l, o(P, h(ce, {
+      get class() {
+        return k().iconSize;
+      }
+    })), F(V, L(e, {
+      get name() {
+        return t.name ?? e.name;
+      },
+      get required() {
+        return t.required ?? e.required;
+      },
+      get "aria-label"() {
+        return t.ariaLabel;
+      },
+      get id() {
+        return z();
+      },
+      type: "number",
+      get value() {
+        return t.value;
+      },
+      onInput: i,
+      onBlur: u,
+      get min() {
+        return t.min;
+      },
+      get max() {
+        return t.max;
+      },
+      get step() {
+        return t.step;
+      },
+      get disabled() {
+        return t.disabled ?? e.disabled;
+      },
+      get readOnly() {
+        return t.inputDisabled || (t.readOnly ?? e.readOnly);
+      },
+      get placeholder() {
+        return t.placeholder;
+      },
+      get "aria-invalid"() {
+        return T(() => !!t.error)() ? !0 : e["aria-invalid"];
+      },
+      get "aria-describedby"() {
+        return j(e["aria-describedby"], t.ariaDescribedBy, f());
+      },
       get class() {
-        return a().iconSize;
+        return O("w-16 text-center text-[length:var(--floe-type-control)] bg-transparent border-none", "outline-none focus:outline-none focus:ring-0", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", t.inputDisabled && "cursor-default");
       }
-    })), p.addEventListener("blur", i), p.$$input = P, h(p, "id", e), O.$$click = T, l(O, c(ve, {
+    }), !1, !1), B.$$click = $, o(B, h(fe, {
       get class() {
-        return a().iconSize;
+        return k().iconSize;
       }
-    })), l(t, c(w, {
+    })), o(g, h(p, {
       get when() {
-        return r.error;
+        return t.error;
       },
       get children() {
-        var n = M();
-        return h(n, "id", b), l(n, () => r.error), n;
+        var d = q();
+        return o(d, () => t.error), y(() => m(d, "id", v())), d;
       }
-    }), null), l(t, c(w, {
+    }), null), o(g, h(p, {
       get when() {
-        return _(() => !!r.helperText)() && !r.error;
+        return T(() => !!t.helperText)() && !t.error;
       },
       get children() {
-        var n = R();
-        return h(n, "id", z), l(n, () => r.helperText), n;
+        var d = A();
+        return o(d, () => t.helperText), y(() => m(d, "id", x())), d;
       }
-    }), null), y((n) => {
-      var V = r.class, j = r.error ? !0 : void 0, A = r.disabled ? !0 : void 0, F = I("floe-field inline-flex items-center", r.disabled && "cursor-not-allowed", a().height), q = !o(), W = I("flex items-center justify-center border-r border-[var(--floe-line)] cursor-pointer", "text-[var(--floe-ink-soft)] transition-colors", "hover:bg-[var(--floe-state-hover)] hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-[var(--floe-ink-soft)]", a().btnSize, a().height), H = r.min, G = r.max, U = r.step, X = r.disabled, J = r.inputDisabled, K = r.placeholder, Q = r.error ? !0 : void 0, Y = u(), Z = I("w-16 text-center text-[length:var(--floe-type-control)] bg-transparent border-none", "outline-none focus:outline-none focus:ring-0", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", r.inputDisabled && "cursor-default"), ee = !g(), te = I("flex items-center justify-center border-l border-[var(--floe-line)] cursor-pointer", "text-[var(--floe-ink-soft)] transition-colors", "hover:bg-[var(--floe-state-hover)] hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-[var(--floe-ink-soft)]", a().btnSize, a().height);
-      return V !== n.e && k(t, n.e = V), j !== n.t && h(d, "aria-invalid", n.t = j), A !== n.a && h(d, "aria-disabled", n.a = A), F !== n.o && k(d, n.o = F), q !== n.i && (S.disabled = n.i = q), W !== n.n && k(S, n.n = W), H !== n.s && h(p, "min", n.s = H), G !== n.h && h(p, "max", n.h = G), U !== n.r && h(p, "step", n.r = U), X !== n.d && (p.disabled = n.d = X), J !== n.l && (p.readOnly = n.l = J), K !== n.u && h(p, "placeholder", n.u = K), Q !== n.c && h(p, "aria-invalid", n.c = Q), Y !== n.w && h(p, "aria-describedby", n.w = Y), Z !== n.m && k(p, n.m = Z), ee !== n.f && (O.disabled = n.f = ee), te !== n.y && k(O, n.y = te), n;
+    }), null), y((d) => {
+      var W = t.class, H = t.error ? !0 : e["aria-invalid"], G = t.disabled ? !0 : void 0, U = O("floe-field inline-flex items-center", t.disabled && "cursor-not-allowed", k().height), X = !a(), J = O("flex items-center justify-center border-r border-[var(--floe-line)] cursor-pointer", "text-[var(--floe-ink-soft)] transition-colors", "hover:bg-[var(--floe-state-hover)] hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-[var(--floe-ink-soft)]", k().btnSize, k().height), K = r.t("decrease"), Q = !D(), Y = O("flex items-center justify-center border-l border-[var(--floe-line)] cursor-pointer", "text-[var(--floe-ink-soft)] transition-colors", "hover:bg-[var(--floe-state-hover)] hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-[var(--floe-ink-soft)]", k().btnSize, k().height), Z = r.t("increase");
+      return W !== d.e && S(g, d.e = W), H !== d.t && m(C, "aria-invalid", d.t = H), G !== d.a && m(C, "aria-disabled", d.a = G), U !== d.o && S(C, d.o = U), X !== d.i && (P.disabled = d.i = X), J !== d.n && S(P, d.n = J), K !== d.s && m(P, "aria-label", d.s = K), Q !== d.h && (B.disabled = d.h = Q), Y !== d.r && S(B, d.r = Y), Z !== d.d && m(B, "aria-label", d.d = Z), d;
     }, {
       e: void 0,
       t: void 0,
@@ -181,23 +233,16 @@ function Pe(r) {
       s: void 0,
       h: void 0,
       r: void 0,
-      d: void 0,
-      l: void 0,
-      u: void 0,
-      c: void 0,
-      w: void 0,
-      m: void 0,
-      f: void 0,
-      y: void 0
-    }), y(() => p.value = r.value), t;
+      d: void 0
+    }), g;
   })();
 }
-const D = 8;
-function De(r) {
-  const [e, b] = N(r, ["size", "error", "helperText", "prefix", "suffix", "prefixOptions", "prefixValue", "onPrefixChange", "suffixOptions", "suffixValue", "onSuffixChange", "class", "id"]), z = E(), m = () => e.id ?? z, v = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
-    const u = [];
-    return e.error && u.push(v()), e.helperText && !e.error && u.push(x()), u.length > 0 ? u.join(" ") : void 0;
-  }, o = {
+const E = 8;
+function Be(t) {
+  const [e, r] = N(t, ["size", "error", "helperText", "aria-describedby", "prefix", "suffix", "prefixOptions", "prefixValue", "onPrefixChange", "suffixOptions", "suffixValue", "onSuffixChange", "class", "id"]), b = R(), z = M(), v = () => e.id ?? b.id ?? z, x = () => `${v()}-error`, I = () => `${v()}-helper`, w = () => {
+    const i = [];
+    return e.error && i.push(x()), e.helperText && !e.error && i.push(I()), i.length > 0 ? i.join(" ") : void 0;
+  }, s = {
     sm: {
       height: "h-7",
       text: "text-xs",
@@ -213,26 +258,26 @@ function De(r) {
       text: "text-sm",
       px: "px-3"
     }
-  }, g = () => o[e.size ?? "md"], s = () => !!e.prefix || e.prefixOptions && e.prefixOptions.length > 0, T = () => !!e.suffix || e.suffixOptions && e.suffixOptions.length > 0, P = () => e.prefix ? e.prefix : e.prefixOptions?.find((u) => u.value === e.prefixValue)?.label ?? e.prefixOptions?.[0]?.label, i = () => e.suffix ? e.suffix : e.suffixOptions?.find((u) => u.value === e.suffixValue)?.label ?? e.suffixOptions?.[0]?.label;
+  }, c = () => s[e.size ?? "md"], a = () => !!e.prefix || e.prefixOptions && e.prefixOptions.length > 0, D = () => !!e.suffix || e.suffixOptions && e.suffixOptions.length > 0, l = () => e.prefix ? e.prefix : e.prefixOptions?.find((i) => i.value === e.prefixValue)?.label ?? e.prefixOptions?.[0]?.label, $ = () => e.suffix ? e.suffix : e.suffixOptions?.find((i) => i.value === e.suffixValue)?.label ?? e.suffixOptions?.[0]?.label;
   return (() => {
-    var u = we(), f = u.firstChild, a = f.firstChild;
-    return l(f, c(w, {
+    var i = pe(), u = i.firstChild, f = u.firstChild;
+    return o(u, h(p, {
       get when() {
-        return s();
+        return a();
       },
       get children() {
-        return c(w, {
+        return h(p, {
           get when() {
-            return _(() => !!e.prefixOptions)() && e.prefixOptions.length > 0;
+            return T(() => !!e.prefixOptions)() && e.prefixOptions.length > 0;
           },
           get fallback() {
             return (() => {
-              var t = oe();
-              return l(t, () => e.prefix), y(() => k(t, I("flex items-center border-r border-[var(--floe-line)] bg-[var(--floe-state-hover)] text-[var(--floe-ink-soft)]", g().text, g().px, g().height))), t;
+              var n = ne();
+              return o(n, () => e.prefix), y(() => S(n, O("flex items-center border-r border-[var(--floe-line)] bg-[var(--floe-state-hover)] text-[var(--floe-ink-soft)]", c().text, c().px, c().height))), n;
             })();
           },
           get children() {
-            return c(le, {
+            return h(ie, {
               get options() {
                 return e.prefixOptions;
               },
@@ -243,49 +288,52 @@ function De(r) {
                 return e.onPrefixChange;
               },
               get label() {
-                return P();
+                return l();
               },
               get size() {
                 return e.size;
               },
               position: "prefix",
               get disabled() {
-                return b.disabled;
+                return r.disabled;
               }
             });
           }
         });
       }
-    }), a), B(a, L({
+    }), f), F(f, L(b, {
+      get readOnly() {
+        return t.readOnly ?? b.readOnly;
+      },
       get id() {
-        return m();
+        return v();
       },
       get "aria-invalid"() {
-        return e.error ? !0 : void 0;
+        return T(() => !!e.error)() ? !0 : b["aria-invalid"];
       },
       get "aria-describedby"() {
-        return $();
+        return j(b["aria-describedby"], e["aria-describedby"], w());
       },
       get class() {
-        return I("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-[var(--floe-field-placeholder)]", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", g().text, g().px);
+        return O("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-[var(--floe-field-placeholder)]", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", c().text, c().px);
       }
-    }, b), !1, !1), l(f, c(w, {
+    }, r), !1, !1), o(u, h(p, {
       get when() {
-        return T();
+        return D();
       },
       get children() {
-        return c(w, {
+        return h(p, {
           get when() {
-            return _(() => !!e.suffixOptions)() && e.suffixOptions.length > 0;
+            return T(() => !!e.suffixOptions)() && e.suffixOptions.length > 0;
           },
           get fallback() {
             return (() => {
-              var t = oe();
-              return l(t, () => e.suffix), y(() => k(t, I("flex items-center border-l border-[var(--floe-line)] bg-[var(--floe-state-hover)] text-[var(--floe-ink-soft)]", g().text, g().px, g().height))), t;
+              var n = ne();
+              return o(n, () => e.suffix), y(() => S(n, O("flex items-center border-l border-[var(--floe-line)] bg-[var(--floe-state-hover)] text-[var(--floe-ink-soft)]", c().text, c().px, c().height))), n;
             })();
           },
           get children() {
-            return c(le, {
+            return h(ie, {
               get options() {
                 return e.suffixOptions;
               },
@@ -296,53 +344,53 @@ function De(r) {
                 return e.onSuffixChange;
               },
               get label() {
-                return i();
+                return $();
               },
               get size() {
                 return e.size;
               },
               position: "suffix",
               get disabled() {
-                return b.disabled;
+                return r.disabled;
               }
             });
           }
         });
       }
-    }), null), l(u, c(w, {
+    }), null), o(i, h(p, {
       get when() {
         return e.error;
       },
       get children() {
-        var t = M();
-        return l(t, () => e.error), y(() => h(t, "id", v())), t;
+        var n = q();
+        return o(n, () => e.error), y(() => m(n, "id", x())), n;
       }
-    }), null), l(u, c(w, {
+    }), null), o(i, h(p, {
       get when() {
-        return _(() => !!e.helperText)() && !e.error;
+        return T(() => !!e.helperText)() && !e.error;
       },
       get children() {
-        var t = R();
-        return l(t, () => e.helperText), y(() => h(t, "id", x())), t;
+        var n = A();
+        return o(n, () => e.helperText), y(() => m(n, "id", I())), n;
       }
-    }), null), y((t) => {
-      var d = e.class, S = e.error ? !0 : void 0, p = b.disabled ? !0 : void 0, O = I("floe-field inline-flex items-center", b.disabled && "cursor-not-allowed", g().height);
-      return d !== t.e && k(u, t.e = d), S !== t.t && h(f, "aria-invalid", t.t = S), p !== t.a && h(f, "aria-disabled", t.a = p), O !== t.o && k(f, t.o = O), t;
+    }), null), y((n) => {
+      var k = e.class, g = e.error ? !0 : b["aria-invalid"], C = r.disabled ? !0 : void 0, P = O("floe-field inline-flex items-center", r.disabled && "cursor-not-allowed", c().height);
+      return k !== n.e && S(i, n.e = k), g !== n.t && m(u, "aria-invalid", n.t = g), C !== n.a && m(u, "aria-disabled", n.a = C), P !== n.o && S(u, n.o = P), n;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), u;
+    }), i;
   })();
 }
-function le(r) {
-  const [e, b] = ie(!1), [z, m] = ie({
+function ie(t) {
+  const [e, r] = re(!1), [b, z] = re({
     x: -9999,
     y: -9999
   });
   let v, x;
-  const $ = {
+  const I = {
     sm: {
       height: "h-7",
       text: "text-xs",
@@ -358,86 +406,86 @@ function le(r) {
       text: "text-sm",
       px: "px-3"
     }
-  }, o = () => $[r.size ?? "md"], g = () => {
+  }, w = () => I[t.size ?? "md"], s = () => {
     if (!v || !x) return;
-    const i = v.getBoundingClientRect(), u = x.getBoundingClientRect(), f = window.innerWidth, a = window.innerHeight;
-    let t = i.left, d = i.bottom + 2;
-    t + u.width > f - D && (t = i.right - u.width), t = Math.max(D, t), d + u.height > a - D && (d = i.top - u.height - 2), d = Math.max(D, d), m({
-      x: t,
-      y: d
+    const l = v.getBoundingClientRect(), $ = x.getBoundingClientRect(), i = window.innerWidth, u = window.innerHeight;
+    let f = l.left, n = l.bottom + 2;
+    f + $.width > i - E && (f = l.right - $.width), f = Math.max(E, f), n + $.height > u - E && (n = l.top - $.height - 2), n = Math.max(E, n), z({
+      x: f,
+      y: n
     });
-  }, s = (i) => {
-    v && !v.contains(i.target) && x && !x.contains(i.target) && b(!1);
-  }, T = (i) => {
-    i.key === "Escape" && b(!1);
-  }, P = (i) => {
-    r.onChange?.(i), b(!1);
+  }, c = (l) => {
+    v && !v.contains(l.target) && x && !x.contains(l.target) && r(!1);
+  }, a = (l) => {
+    l.key === "Escape" && r(!1);
+  }, D = (l) => {
+    t.onChange?.(l), r(!1);
   };
-  return de(() => {
+  return ae(() => {
     if (!e()) {
-      m({
+      z({
         x: -9999,
         y: -9999
       });
       return;
     }
-    typeof document > "u" || (document.addEventListener("mousedown", s), document.addEventListener("keydown", T), requestAnimationFrame(g), ue(() => {
-      document.removeEventListener("mousedown", s), document.removeEventListener("keydown", T);
+    typeof document > "u" || (document.addEventListener("mousedown", c), document.addEventListener("keydown", a), requestAnimationFrame(s), de(() => {
+      document.removeEventListener("mousedown", c), document.removeEventListener("keydown", a);
     }));
   }), [(() => {
-    var i = ye(), u = i.firstChild;
-    i.$$click = () => {
-      b((a) => !a);
+    var l = ye(), $ = l.firstChild;
+    l.$$click = () => {
+      r((u) => !u);
     };
-    var f = v;
-    return typeof f == "function" ? ne(f, i) : v = i, l(u, () => r.label), l(i, c(he, {
+    var i = v;
+    return typeof i == "function" ? te(i, l) : v = l, o($, () => t.label), o(l, h(he, {
       class: "w-3 h-3 opacity-60"
-    }), null), y((a) => {
-      var t = r.disabled, d = I("flex items-center gap-1 cursor-pointer", "bg-[var(--floe-state-hover)] text-[var(--floe-ink-soft)]", "hover:bg-[var(--floe-state-press)] hover:text-foreground", "transition-[background-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus:outline-none", "disabled:cursor-not-allowed disabled:bg-[var(--floe-state-hover)] disabled:hover:text-[var(--floe-ink-soft)]", r.position === "prefix" ? "border-r border-[var(--floe-line)]" : "border-l border-[var(--floe-line)]", o().text, o().px, o().height);
-      return t !== a.e && (i.disabled = a.e = t), d !== a.t && k(i, a.t = d), a;
+    }), null), y((u) => {
+      var f = t.disabled, n = O("flex items-center gap-1 cursor-pointer", "bg-[var(--floe-state-hover)] text-[var(--floe-ink-soft)]", "hover:bg-[var(--floe-state-press)] hover:text-foreground", "transition-[background-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus:outline-none", "disabled:cursor-not-allowed disabled:bg-[var(--floe-state-hover)] disabled:hover:text-[var(--floe-ink-soft)]", t.position === "prefix" ? "border-r border-[var(--floe-line)]" : "border-l border-[var(--floe-line)]", w().text, w().px, w().height);
+      return f !== u.e && (l.disabled = u.e = f), n !== u.t && S(l, u.t = n), u;
     }, {
       e: void 0,
       t: void 0
-    }), i;
-  })(), c(w, {
+    }), l;
+  })(), h(p, {
     get when() {
       return e();
     },
     get children() {
-      return c(ae, {
+      return h(le, {
         get children() {
-          var i = Ie(), u = x;
-          return typeof u == "function" ? ne(u, i) : x = i, l(i, c(fe, {
+          var l = we(), $ = x;
+          return typeof $ == "function" ? te($, l) : x = l, o(l, h(se, {
             get each() {
-              return r.options;
+              return t.options;
             },
-            children: (f) => (() => {
-              var a = $e();
-              return a.$$click = () => P(f.value), l(a, () => f.label), y((t) => {
-                var d = I("w-full flex items-center px-2.5 cursor-pointer", "min-h-[var(--floe-row-height)] rounded-sm", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", "text-[var(--floe-ink-soft)] hover:text-foreground", "focus:outline-none", r.value === f.value && "bg-[var(--floe-state-selected)] text-foreground font-medium"), S = r.value === f.value;
-                return d !== t.e && k(a, t.e = d), S !== t.t && h(a, "aria-selected", t.t = S), t;
+            children: (i) => (() => {
+              var u = Ie();
+              return u.$$click = () => D(i.value), o(u, () => i.label), y((f) => {
+                var n = O("w-full flex items-center px-2.5 cursor-pointer", "min-h-[var(--floe-row-height)] rounded-sm", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", "text-[var(--floe-ink-soft)] hover:text-foreground", "focus:outline-none", t.value === i.value && "bg-[var(--floe-state-selected)] text-foreground font-medium"), k = t.value === i.value;
+                return n !== f.e && S(u, f.e = n), k !== f.t && m(u, "aria-selected", f.t = k), f;
               }, {
                 e: void 0,
                 t: void 0
-              }), a;
+              }), u;
             })()
-          })), y((f) => {
-            var a = I("fixed z-50 min-w-24 py-0.5", "bg-popover text-popover-foreground", "rounded-group border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float)]", "floe-floating-presence floe-floating-menu"), t = `${z().x}px`, d = `${z().y}px`;
-            return a !== f.e && k(i, f.e = a), t !== f.t && re(i, "left", f.t = t), d !== f.a && re(i, "top", f.a = d), f;
+          })), y((i) => {
+            var u = O("fixed z-50 min-w-24 py-0.5", "bg-popover text-popover-foreground", "rounded-group border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float)]", "floe-floating-presence floe-floating-menu"), f = `${b().x}px`, n = `${b().y}px`;
+            return u !== i.e && S(l, i.e = u), f !== i.t && ee(l, "left", i.t = f), n !== i.a && ee(l, "top", i.a = n), i;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
-          }), i;
+          }), l;
         }
       });
     }
   })];
 }
-se(["click", "input"]);
+oe(["click"]);
 export {
-  De as AffixInput,
+  Be as AffixInput,
   Te as Input,
-  Pe as NumberInput,
-  _e as Textarea
+  De as NumberInput,
+  Pe as Textarea
 };