@floegence/floe-webapp-core 0.86.58 → 0.86.62

package/dist/components/ui/Input.js

@@ -1,29 +1,29 @@
-import { insert as l, createComponent as f, effect as y, className as C, memo as _, spread as B, mergeProps as L, setAttribute as g, template as z, Portal as ae, setStyleProperty as re, use as ne, delegateEvents as de } from "solid-js/web";
-import { splitProps as N, createUniqueId as E, Show as w, createSignal as ie, createEffect as ue, onCleanup as se, For as ce } from "solid-js";
+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 fe, Plus as he, ChevronDown as ge } from "../icons/index.js";
-var ve = /* @__PURE__ */ z('<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">'), xe = /* @__PURE__ */ z('<div class="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">'), M = /* @__PURE__ */ z('<p class="mt-1 text-[11px] text-error"role=alert>'), R = /* @__PURE__ */ z('<p class="mt-1 text-[11px] text-muted-foreground">'), be = /* @__PURE__ */ z("<div class=relative><input data-floe-control=input data-floe-surface=inset>"), me = /* @__PURE__ */ z("<div><textarea data-floe-control=input data-floe-surface=inset>"), pe = /* @__PURE__ */ z('<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__ */ z("<div><div data-floe-input-surface data-floe-control=compound-input data-floe-surface=inset><input>"), oe = /* @__PURE__ */ z("<span>"), ye = /* @__PURE__ */ z("<button type=button><span>"), Ie = /* @__PURE__ */ z("<div role=listbox>"), $e = /* @__PURE__ */ z("<button type=button role=option>");
-const Ce = {
+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"
 };
 function Te(r) {
-  const [e, b] = N(r, ["size", "error", "helperText", "leftIcon", "rightIcon", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
+  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(h()), e.helperText && !e.error && o.push(x()), o.length > 0 ? o.join(" ") : void 0;
+    return e.error && o.push(v()), e.helperText && !e.error && o.push(x()), o.length > 0 ? o.join(" ") : void 0;
   };
   return (() => {
-    var o = be(), v = o.firstChild;
-    return l(o, f(w, {
+    var o = be(), g = o.firstChild;
+    return l(o, c(w, {
       get when() {
         return e.leftIcon;
       },
       get children() {
-        var d = ve();
-        return l(d, () => e.leftIcon), d;
+        var s = ge();
+        return l(s, () => e.leftIcon), s;
       }
-    }), v), B(v, L({
+    }), g), B(g, L({
       get id() {
         return m();
       },
@@ -35,54 +35,51 @@ function Te(r) {
       },
       get class() {
         return I(
-          "w-full rounded border border-input bg-background shadow-sm",
-          "placeholder:text-muted-foreground",
-          "transition-colors duration-100",
+          "floe-field w-full",
           "focus:outline-none",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          e.error && "border-error",
-          Ce[e.size ?? "md"],
+          "disabled:cursor-not-allowed disabled:opacity-60",
+          ke[e.size ?? "md"],
           // Icon padding must come AFTER sizeStyles to override px-*
           e.leftIcon && "pl-10",
           e.rightIcon && "pr-10",
           e.class
         );
       }
-    }, b), !1, !1), l(o, f(w, {
+    }, b), !1, !1), l(o, c(w, {
       get when() {
         return e.rightIcon;
       },
       get children() {
-        var d = xe();
-        return l(d, () => e.rightIcon), d;
+        var s = xe();
+        return l(s, () => e.rightIcon), s;
       }
-    }), null), l(o, f(w, {
+    }), null), l(o, c(w, {
       get when() {
         return e.error;
       },
       get children() {
-        var d = M();
-        return l(d, () => e.error), y(() => g(d, "id", h())), d;
+        var s = M();
+        return l(s, () => e.error), y(() => h(s, "id", v())), s;
       }
-    }), null), l(o, f(w, {
+    }), null), l(o, c(w, {
       get when() {
         return _(() => !!e.helperText)() && !e.error;
       },
       get children() {
-        var d = R();
-        return l(d, () => e.helperText), y(() => g(d, "id", x())), d;
+        var s = R();
+        return l(s, () => e.helperText), y(() => h(s, "id", x())), s;
       }
     }), null), o;
   })();
 }
 function _e(r) {
-  const [e, b] = N(r, ["error", "helperText", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
+  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(h()), e.helperText && !e.error && o.push(x()), o.length > 0 ? o.join(" ") : void 0;
+    return e.error && o.push(v()), e.helperText && !e.error && o.push(x()), o.length > 0 ? o.join(" ") : void 0;
   };
   return (() => {
-    var o = me(), v = o.firstChild;
-    return B(v, L({
+    var o = me(), g = o.firstChild;
+    return B(g, L({
       get id() {
         return m();
       },
@@ -93,42 +90,42 @@ function _e(r) {
         return $();
       },
       get class() {
-        return I("w-full min-h-16 rounded border border-input bg-background p-2.5 text-[length:var(--floe-type-control)] shadow-sm", "placeholder:text-muted-foreground", "transition-colors duration-100", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "resize-y", e.error && "border-error", e.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);
       }
-    }, b), !1, !1), l(o, f(w, {
+    }, b), !1, !1), l(o, c(w, {
       get when() {
         return e.error;
       },
       get children() {
-        var d = M();
-        return l(d, () => e.error), y(() => g(d, "id", h())), d;
+        var s = M();
+        return l(s, () => e.error), y(() => h(s, "id", v())), s;
       }
-    }), null), l(o, f(w, {
+    }), null), l(o, c(w, {
       get when() {
         return _(() => !!e.helperText)() && !e.error;
       },
       get children() {
-        var d = R();
-        return l(d, () => e.helperText), y(() => g(d, "id", x())), d;
+        var s = R();
+        return l(s, () => e.helperText), y(() => h(s, "id", x())), s;
       }
     }), null), o;
   })();
 }
 function Pe(r) {
-  const e = E(), b = `${e}-error`, S = `${e}-helper`, m = () => r.step ?? 1, h = () => r.min ?? -1 / 0, x = () => r.max ?? 1 / 0, $ = (t) => Math.min(x(), Math.max(h(), t)), o = () => !r.disabled && r.value > h(), v = () => !r.disabled && r.value < x(), d = () => {
+  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 = () => {
-    v() && r.onChange($(r.value + m()));
+    g() && r.onChange($(r.value + m()));
   }, P = (t) => {
-    const u = parseFloat(t.currentTarget.value);
-    isNaN(u) || r.onChange($(u));
+    const d = parseFloat(t.currentTarget.value);
+    isNaN(d) || r.onChange($(d));
   }, i = (t) => {
-    const u = parseFloat(t.currentTarget.value);
-    isNaN(u) ? r.onChange(h() === -1 / 0 ? 0 : h()) : r.onChange($(u));
-  }, s = () => {
+    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(S), t.length > 0 ? t.join(" ") : void 0;
-  }, c = {
+    return r.error && t.push(b), r.helperText && !r.error && t.push(z), t.length > 0 ? t.join(" ") : void 0;
+  }, f = {
     sm: {
       height: "h-7",
       btnSize: "w-7",
@@ -144,36 +141,36 @@ function Pe(r) {
       btnSize: "w-9",
       iconSize: "w-4 h-4"
     }
-  }, a = () => c[r.size ?? "md"];
+  }, a = () => f[r.size ?? "md"];
   return (() => {
-    var t = pe(), u = t.firstChild, k = u.firstChild, p = k.nextSibling, O = p.nextSibling;
-    return k.$$click = d, l(k, f(fe, {
+    var t = pe(), d = t.firstChild, S = d.firstChild, p = S.nextSibling, O = p.nextSibling;
+    return S.$$click = s, l(S, c(ce, {
       get class() {
         return a().iconSize;
       }
-    })), p.addEventListener("blur", i), p.$$input = P, g(p, "id", e), O.$$click = T, l(O, f(he, {
+    })), p.addEventListener("blur", i), p.$$input = P, h(p, "id", e), O.$$click = T, l(O, c(ve, {
       get class() {
         return a().iconSize;
       }
-    })), l(t, f(w, {
+    })), l(t, c(w, {
       get when() {
         return r.error;
       },
       get children() {
         var n = M();
-        return g(n, "id", b), l(n, () => r.error), n;
+        return h(n, "id", b), l(n, () => r.error), n;
       }
-    }), null), l(t, f(w, {
+    }), null), l(t, c(w, {
       get when() {
         return _(() => !!r.helperText)() && !r.error;
       },
       get children() {
         var n = R();
-        return g(n, "id", S), l(n, () => r.helperText), n;
+        return h(n, "id", z), l(n, () => r.helperText), n;
       }
     }), null), y((n) => {
-      var V = r.class, j = r.error ? !0 : void 0, A = r.disabled ? !0 : void 0, F = I("inline-flex items-center rounded border border-input bg-background shadow-sm", "transition-colors duration-100", r.disabled && "opacity-50 cursor-not-allowed", r.error && "border-error", a().height), W = !o(), q = I("flex items-center justify-center border-r border-input cursor-pointer", "text-muted-foreground transition-colors", "hover:bg-accent hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted-foreground", 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 = s(), 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 = !v(), te = I("flex items-center justify-center border-l border-input cursor-pointer", "text-muted-foreground transition-colors", "hover:bg-accent hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted-foreground", a().btnSize, a().height);
-      return V !== n.e && C(t, n.e = V), j !== n.t && g(u, "aria-invalid", n.t = j), A !== n.a && g(u, "aria-disabled", n.a = A), F !== n.o && C(u, n.o = F), W !== n.i && (k.disabled = n.i = W), q !== n.n && C(k, n.n = q), H !== n.s && g(p, "min", n.s = H), G !== n.h && g(p, "max", n.h = G), U !== n.r && g(p, "step", n.r = U), X !== n.d && (p.disabled = n.d = X), J !== n.l && (p.readOnly = n.l = J), K !== n.u && g(p, "placeholder", n.u = K), Q !== n.c && g(p, "aria-invalid", n.c = Q), Y !== n.w && g(p, "aria-describedby", n.w = Y), Z !== n.m && C(p, n.m = Z), ee !== n.f && (O.disabled = n.f = ee), te !== n.y && C(O, n.y = te), 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;
     }, {
       e: void 0,
       t: void 0,
@@ -197,9 +194,9 @@ function Pe(r) {
 }
 const D = 8;
 function De(r) {
-  const [e, b] = N(r, ["size", "error", "helperText", "prefix", "suffix", "prefixOptions", "prefixValue", "onPrefixChange", "suffixOptions", "suffixValue", "onSuffixChange", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
-    const s = [];
-    return e.error && s.push(h()), e.helperText && !e.error && s.push(x()), s.length > 0 ? s.join(" ") : void 0;
+  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 = {
     sm: {
       height: "h-7",
@@ -216,26 +213,26 @@ function De(r) {
       text: "text-sm",
       px: "px-3"
     }
-  }, v = () => o[e.size ?? "md"], d = () => !!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((s) => s.value === e.prefixValue)?.label ?? e.prefixOptions?.[0]?.label, i = () => e.suffix ? e.suffix : e.suffixOptions?.find((s) => s.value === e.suffixValue)?.label ?? e.suffixOptions?.[0]?.label;
+  }, 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;
   return (() => {
-    var s = we(), c = s.firstChild, a = c.firstChild;
-    return l(c, f(w, {
+    var u = we(), f = u.firstChild, a = f.firstChild;
+    return l(f, c(w, {
       get when() {
-        return d();
+        return s();
       },
       get children() {
-        return f(w, {
+        return c(w, {
           get when() {
             return _(() => !!e.prefixOptions)() && e.prefixOptions.length > 0;
           },
           get fallback() {
             return (() => {
               var t = oe();
-              return l(t, () => e.prefix), y(() => C(t, I("flex items-center border-r border-input bg-muted/50 text-muted-foreground", v().text, v().px, v().height))), t;
+              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;
             })();
           },
           get children() {
-            return f(le, {
+            return c(le, {
               get options() {
                 return e.prefixOptions;
               },
@@ -270,25 +267,25 @@ function De(r) {
         return $();
       },
       get class() {
-        return I("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-muted-foreground", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", v().text, v().px);
+        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);
       }
-    }, b), !1, !1), l(c, f(w, {
+    }, b), !1, !1), l(f, c(w, {
       get when() {
         return T();
       },
       get children() {
-        return f(w, {
+        return c(w, {
           get when() {
             return _(() => !!e.suffixOptions)() && e.suffixOptions.length > 0;
           },
           get fallback() {
             return (() => {
               var t = oe();
-              return l(t, () => e.suffix), y(() => C(t, I("flex items-center border-l border-input bg-muted/50 text-muted-foreground", v().text, v().px, v().height))), t;
+              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;
             })();
           },
           get children() {
-            return f(le, {
+            return c(le, {
               get options() {
                 return e.suffixOptions;
               },
@@ -312,39 +309,39 @@ function De(r) {
           }
         });
       }
-    }), null), l(s, f(w, {
+    }), null), l(u, c(w, {
       get when() {
         return e.error;
       },
       get children() {
         var t = M();
-        return l(t, () => e.error), y(() => g(t, "id", h())), t;
+        return l(t, () => e.error), y(() => h(t, "id", v())), t;
       }
-    }), null), l(s, f(w, {
+    }), null), l(u, c(w, {
       get when() {
         return _(() => !!e.helperText)() && !e.error;
       },
       get children() {
         var t = R();
-        return l(t, () => e.helperText), y(() => g(t, "id", x())), t;
+        return l(t, () => e.helperText), y(() => h(t, "id", x())), t;
       }
     }), null), y((t) => {
-      var u = e.class, k = e.error ? !0 : void 0, p = b.disabled ? !0 : void 0, O = I("inline-flex items-center rounded border border-input bg-background shadow-sm", "transition-colors duration-100", b.disabled && "opacity-50 cursor-not-allowed", e.error && "border-error", v().height);
-      return u !== t.e && C(s, t.e = u), k !== t.t && g(c, "aria-invalid", t.t = k), p !== t.a && g(c, "aria-disabled", t.a = p), O !== t.o && C(c, t.o = O), 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;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), s;
+    }), u;
   })();
 }
 function le(r) {
-  const [e, b] = ie(!1), [S, m] = ie({
+  const [e, b] = ie(!1), [z, m] = ie({
     x: -9999,
     y: -9999
   });
-  let h, x;
+  let v, x;
   const $ = {
     sm: {
       height: "h-7",
@@ -361,22 +358,22 @@ function le(r) {
       text: "text-sm",
       px: "px-3"
     }
-  }, o = () => $[r.size ?? "md"], v = () => {
-    if (!h || !x) return;
-    const i = h.getBoundingClientRect(), s = x.getBoundingClientRect(), c = window.innerWidth, a = window.innerHeight;
-    let t = i.left, u = i.bottom + 2;
-    t + s.width > c - D && (t = i.right - s.width), t = Math.max(D, t), u + s.height > a - D && (u = i.top - s.height - 2), u = Math.max(D, u), m({
+  }, o = () => $[r.size ?? "md"], g = () => {
+    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: u
+      y: d
     });
-  }, d = (i) => {
-    h && !h.contains(i.target) && x && !x.contains(i.target) && b(!1);
+  }, 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);
   };
-  return ue(() => {
+  return de(() => {
     if (!e()) {
       m({
         x: -9999,
@@ -384,49 +381,49 @@ function le(r) {
       });
       return;
     }
-    typeof document > "u" || (document.addEventListener("mousedown", d), document.addEventListener("keydown", T), requestAnimationFrame(v), se(() => {
-      document.removeEventListener("mousedown", d), document.removeEventListener("keydown", T);
+    typeof document > "u" || (document.addEventListener("mousedown", s), document.addEventListener("keydown", T), requestAnimationFrame(g), ue(() => {
+      document.removeEventListener("mousedown", s), document.removeEventListener("keydown", T);
     }));
   }), [(() => {
-    var i = ye(), s = i.firstChild;
+    var i = ye(), u = i.firstChild;
     i.$$click = () => {
       b((a) => !a);
     };
-    var c = h;
-    return typeof c == "function" ? ne(c, i) : h = i, l(s, () => r.label), l(i, f(ge, {
+    var f = v;
+    return typeof f == "function" ? ne(f, i) : v = i, l(u, () => r.label), l(i, c(he, {
       class: "w-3 h-3 opacity-60"
     }), null), y((a) => {
-      var t = r.disabled, u = I("flex items-center gap-1 bg-muted/50 text-muted-foreground cursor-pointer", "hover:bg-muted hover:text-foreground transition-colors", "focus:outline-none", "disabled:cursor-not-allowed disabled:hover:bg-muted/50 disabled:hover:text-muted-foreground", r.position === "prefix" ? "border-r border-input" : "border-l border-input", o().text, o().px, o().height);
-      return t !== a.e && (i.disabled = a.e = t), u !== a.t && C(i, a.t = u), 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;
     }, {
       e: void 0,
       t: void 0
     }), i;
-  })(), f(w, {
+  })(), c(w, {
     get when() {
       return e();
     },
     get children() {
-      return f(ae, {
+      return c(ae, {
         get children() {
-          var i = Ie(), s = x;
-          return typeof s == "function" ? ne(s, i) : x = i, l(i, f(ce, {
+          var i = Ie(), u = x;
+          return typeof u == "function" ? ne(u, i) : x = i, l(i, c(fe, {
             get each() {
               return r.options;
             },
-            children: (c) => (() => {
+            children: (f) => (() => {
               var a = $e();
-              return a.$$click = () => P(c.value), l(a, () => c.label), y((t) => {
-                var u = I("w-full flex items-center px-2.5 py-1.5 text-xs cursor-pointer", "transition-colors duration-75", "hover:bg-accent", "focus:outline-none focus:bg-accent", r.value === c.value && "bg-accent/50 font-medium"), k = r.value === c.value;
-                return u !== t.e && C(a, t.e = u), k !== t.t && g(a, "aria-selected", t.t = k), t;
+              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;
               }, {
                 e: void 0,
                 t: void 0
               }), a;
             })()
-          })), y((c) => {
-            var a = I("fixed z-50 min-w-24 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "animate-in fade-in slide-in-from-top-1"), t = `${S().x}px`, u = `${S().y}px`;
-            return a !== c.e && C(i, c.e = a), t !== c.t && re(i, "left", c.t = t), u !== c.a && re(i, "top", c.a = u), c;
+          })), 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;
           }, {
             e: void 0,
             t: void 0,
@@ -437,7 +434,7 @@ function le(r) {
     }
   })];
 }
-de(["click", "input"]);
+se(["click", "input"]);
 export {
   De as AffixInput,
   Te as Input,