@floegence/floe-webapp-core 0.50.3 → 0.50.4

package/dist/components/ui/Input.js

@@ -1,130 +1,130 @@
-import { insert as l, createComponent as f, effect as y, className as C, memo as _, spread as B, mergeProps as L, setAttribute as m, template as z, Portal as oe, setStyleProperty as ee, use as te, delegateEvents as le } from "solid-js/web";
-import { splitProps as N, createUniqueId as E, Show as p, createSignal as re, createEffect as de, onCleanup as ue, For as se } from "solid-js";
-import { cn as $ } from "../../utils/cn.js";
-import { Minus as ae, Plus as ce, ChevronDown as fe } from "../icons/index.js";
-var he = /* @__PURE__ */ z('<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">'), ge = /* @__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">'), xe = /* @__PURE__ */ z("<div class=relative><input>"), ve = /* @__PURE__ */ z("<div><textarea>"), be = /* @__PURE__ */ z('<div><div><button type=button aria-label="Decrease value"></button><input type=number><button type=button aria-label="Increase value">'), me = /* @__PURE__ */ z("<div><div><input>"), ne = /* @__PURE__ */ z("<span>"), pe = /* @__PURE__ */ z("<button type=button><span>"), we = /* @__PURE__ */ z("<div role=listbox>"), ye = /* @__PURE__ */ z("<button type=button role=option>");
-const $e = {
+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 de, setStyleProperty as re, use as ne, delegateEvents as ae } 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 { cn as I } from "../../utils/cn.js";
+import { Minus as fe, Plus as he, ChevronDown as ge } from "../icons/index.js";
+var xe = /* @__PURE__ */ z('<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">'), ve = /* @__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>"), me = /* @__PURE__ */ z("<div><textarea>"), pe = /* @__PURE__ */ z('<div><div data-floe-input-surface><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><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 = {
   sm: "h-7 text-xs px-2",
   md: "h-8 text-xs px-2.5",
   lg: "h-9 text-sm px-3"
 };
-function ke(r) {
-  const [e, b] = N(r, ["size", "error", "helperText", "leftIcon", "rightIcon", "class", "id"]), S = E(), v = () => e.id ?? S, h = () => `${v()}-error`, x = () => `${v()}-helper`, I = () => {
+function Te(r) {
+  const [e, b] = N(r, ["size", "error", "helperText", "leftIcon", "rightIcon", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, v = () => `${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(h()), e.helperText && !e.error && o.push(v()), o.length > 0 ? o.join(" ") : void 0;
   };
   return (() => {
-    var o = xe(), g = o.firstChild;
-    return l(o, f(p, {
+    var o = be(), x = o.firstChild;
+    return l(o, f(w, {
       get when() {
         return e.leftIcon;
       },
       get children() {
-        var u = he();
-        return l(u, () => e.leftIcon), u;
+        var a = xe();
+        return l(a, () => e.leftIcon), a;
       }
-    }), g), B(g, L({
+    }), x), B(x, L({
       get id() {
-        return v();
+        return m();
       },
       get "aria-invalid"() {
         return e.error ? !0 : void 0;
       },
       get "aria-describedby"() {
-        return I();
+        return $();
       },
       get class() {
-        return $(
+        return I(
           "w-full rounded border border-input bg-background shadow-sm",
           "placeholder:text-muted-foreground/60",
           "transition-colors duration-100",
-          "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring",
+          "focus:outline-none",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          e.error && "border-error focus:ring-error",
-          $e[e.size ?? "md"],
+          e.error && "border-error",
+          Ce[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(p, {
+    }, b), !1, !1), l(o, f(w, {
       get when() {
         return e.rightIcon;
       },
       get children() {
-        var u = ge();
-        return l(u, () => e.rightIcon), u;
+        var a = ve();
+        return l(a, () => e.rightIcon), a;
       }
-    }), null), l(o, f(p, {
+    }), null), l(o, f(w, {
       get when() {
         return e.error;
       },
       get children() {
-        var u = M();
-        return l(u, () => e.error), y(() => m(u, "id", h())), u;
+        var a = M();
+        return l(a, () => e.error), y(() => g(a, "id", h())), a;
       }
-    }), null), l(o, f(p, {
+    }), null), l(o, f(w, {
       get when() {
         return _(() => !!e.helperText)() && !e.error;
       },
       get children() {
-        var u = R();
-        return l(u, () => e.helperText), y(() => m(u, "id", x())), u;
+        var a = R();
+        return l(a, () => e.helperText), y(() => g(a, "id", v())), a;
       }
     }), null), o;
   })();
 }
-function Oe(r) {
-  const [e, b] = N(r, ["error", "helperText", "class", "id"]), S = E(), v = () => e.id ?? S, h = () => `${v()}-error`, x = () => `${v()}-helper`, I = () => {
+function _e(r) {
+  const [e, b] = N(r, ["error", "helperText", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, v = () => `${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(h()), e.helperText && !e.error && o.push(v()), o.length > 0 ? o.join(" ") : void 0;
   };
   return (() => {
-    var o = ve(), g = o.firstChild;
-    return B(g, L({
+    var o = me(), x = o.firstChild;
+    return B(x, L({
       get id() {
-        return v();
+        return m();
       },
       get "aria-invalid"() {
         return e.error ? !0 : void 0;
       },
       get "aria-describedby"() {
-        return I();
+        return $();
       },
       get class() {
-        return $("w-full min-h-16 rounded border border-input bg-background p-2.5 text-xs shadow-sm", "placeholder:text-muted-foreground/60", "transition-colors duration-100", "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring", "disabled:cursor-not-allowed disabled:opacity-50", "resize-y", e.error && "border-error focus:ring-error", e.class);
+        return I("w-full min-h-16 rounded border border-input bg-background p-2.5 text-xs shadow-sm", "placeholder:text-muted-foreground/60", "transition-colors duration-100", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "resize-y", e.error && "border-error", e.class);
       }
-    }, b), !1, !1), l(o, f(p, {
+    }, b), !1, !1), l(o, f(w, {
       get when() {
         return e.error;
       },
       get children() {
-        var u = M();
-        return l(u, () => e.error), y(() => m(u, "id", h())), u;
+        var a = M();
+        return l(a, () => e.error), y(() => g(a, "id", h())), a;
       }
-    }), null), l(o, f(p, {
+    }), null), l(o, f(w, {
       get when() {
         return _(() => !!e.helperText)() && !e.error;
       },
       get children() {
-        var u = R();
-        return l(u, () => e.helperText), y(() => m(u, "id", x())), u;
+        var a = R();
+        return l(a, () => e.helperText), y(() => g(a, "id", v())), a;
       }
     }), null), o;
   })();
 }
-function _e(r) {
-  const e = E(), b = `${e}-error`, S = `${e}-helper`, v = () => r.step ?? 1, h = () => r.min ?? -1 / 0, x = () => r.max ?? 1 / 0, I = (t) => Math.min(x(), Math.max(h(), t)), o = () => !r.disabled && r.value > h(), g = () => !r.disabled && r.value < x(), u = () => {
-    o() && r.onChange(I(r.value - v()));
-  }, O = () => {
-    g() && r.onChange(I(r.value + v()));
-  }, T = (t) => {
-    const a = parseFloat(t.currentTarget.value);
-    isNaN(a) || r.onChange(I(a));
+function Pe(r) {
+  const e = E(), b = `${e}-error`, S = `${e}-helper`, m = () => r.step ?? 1, h = () => r.min ?? -1 / 0, v = () => r.max ?? 1 / 0, $ = (t) => Math.min(v(), Math.max(h(), t)), o = () => !r.disabled && r.value > h(), x = () => !r.disabled && r.value < v(), a = () => {
+    o() && r.onChange($(r.value - m()));
+  }, T = () => {
+    x() && r.onChange($(r.value + m()));
+  }, P = (t) => {
+    const u = parseFloat(t.currentTarget.value);
+    isNaN(u) || r.onChange($(u));
   }, i = (t) => {
-    const a = parseFloat(t.currentTarget.value);
-    isNaN(a) ? r.onChange(h() === -1 / 0 ? 0 : h()) : r.onChange(I(a));
+    const u = parseFloat(t.currentTarget.value);
+    isNaN(u) ? r.onChange(h() === -1 / 0 ? 0 : h()) : r.onChange($(u));
   }, s = () => {
     const t = [];
     return r.error && t.push(b), r.helperText && !r.error && t.push(S), t.length > 0 ? t.join(" ") : void 0;
@@ -146,34 +146,34 @@ function _e(r) {
     }
   }, d = () => c[r.size ?? "md"];
   return (() => {
-    var t = be(), a = t.firstChild, k = a.firstChild, w = k.nextSibling, P = w.nextSibling;
-    return k.$$click = u, l(k, f(ae, {
+    var t = pe(), u = t.firstChild, k = u.firstChild, p = k.nextSibling, O = p.nextSibling;
+    return k.$$click = a, l(k, f(fe, {
       get class() {
         return d().iconSize;
       }
-    })), w.addEventListener("blur", i), w.$$input = T, m(w, "id", e), P.$$click = O, l(P, f(ce, {
+    })), p.addEventListener("blur", i), p.$$input = P, g(p, "id", e), O.$$click = T, l(O, f(he, {
       get class() {
         return d().iconSize;
       }
-    })), l(t, f(p, {
+    })), l(t, f(w, {
       get when() {
         return r.error;
       },
       get children() {
         var n = M();
-        return m(n, "id", b), l(n, () => r.error), n;
+        return g(n, "id", b), l(n, () => r.error), n;
       }
-    }), null), l(t, f(p, {
+    }), null), l(t, f(w, {
       get when() {
         return _(() => !!r.helperText)() && !r.error;
       },
       get children() {
         var n = R();
-        return m(n, "id", S), l(n, () => r.helperText), n;
+        return g(n, "id", S), l(n, () => r.helperText), n;
       }
     }), null), y((n) => {
-      var V = r.class, j = $("inline-flex items-center rounded border border-input bg-background shadow-sm", "transition-colors duration-100", "focus-within:ring-1 focus-within:ring-ring focus-within:border-ring", r.disabled && "opacity-50 cursor-not-allowed", r.error && "border-error focus-within:ring-error", d().height), A = !o(), F = $("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", d().btnSize, d().height), W = r.min, q = r.max, H = r.step, G = r.disabled, U = r.inputDisabled, X = r.placeholder, J = r.error ? !0 : void 0, K = s(), Q = $("w-16 text-center text-xs 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"), Y = !g(), Z = $("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", d().btnSize, d().height);
-      return V !== n.e && C(t, n.e = V), j !== n.t && C(a, n.t = j), A !== n.a && (k.disabled = n.a = A), F !== n.o && C(k, n.o = F), W !== n.i && m(w, "min", n.i = W), q !== n.n && m(w, "max", n.n = q), H !== n.s && m(w, "step", n.s = H), G !== n.h && (w.disabled = n.h = G), U !== n.r && (w.readOnly = n.r = U), X !== n.d && m(w, "placeholder", n.d = X), J !== n.l && m(w, "aria-invalid", n.l = J), K !== n.u && m(w, "aria-describedby", n.u = K), Q !== n.c && C(w, n.c = Q), Y !== n.w && (P.disabled = n.w = Y), Z !== n.m && C(P, n.m = Z), 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", d().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", d().btnSize, d().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-xs 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 = !x(), 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", d().btnSize, d().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;
     }, {
       e: void 0,
       t: void 0,
@@ -189,15 +189,17 @@ function _e(r) {
       u: void 0,
       c: void 0,
       w: void 0,
-      m: void 0
-    }), y(() => w.value = r.value), t;
+      m: void 0,
+      f: void 0,
+      y: void 0
+    }), y(() => p.value = r.value), t;
   })();
 }
 const D = 8;
-function Te(r) {
-  const [e, b] = N(r, ["size", "error", "helperText", "prefix", "suffix", "prefixOptions", "prefixValue", "onPrefixChange", "suffixOptions", "suffixValue", "onSuffixChange", "class", "id"]), S = E(), v = () => e.id ?? S, h = () => `${v()}-error`, x = () => `${v()}-helper`, I = () => {
+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`, v = () => `${m()}-helper`, $ = () => {
     const s = [];
-    return e.error && s.push(h()), e.helperText && !e.error && s.push(x()), s.length > 0 ? s.join(" ") : void 0;
+    return e.error && s.push(h()), e.helperText && !e.error && s.push(v()), s.length > 0 ? s.join(" ") : void 0;
   }, o = {
     sm: {
       height: "h-7",
@@ -214,26 +216,26 @@ function Te(r) {
       text: "text-sm",
       px: "px-3"
     }
-  }, g = () => o[e.size ?? "md"], u = () => !!e.prefix || e.prefixOptions && e.prefixOptions.length > 0, O = () => !!e.suffix || e.suffixOptions && e.suffixOptions.length > 0, T = () => 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;
+  }, x = () => o[e.size ?? "md"], a = () => !!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;
   return (() => {
-    var s = me(), c = s.firstChild, d = c.firstChild;
-    return l(c, f(p, {
+    var s = we(), c = s.firstChild, d = c.firstChild;
+    return l(c, f(w, {
       get when() {
-        return u();
+        return a();
       },
       get children() {
-        return f(p, {
+        return f(w, {
           get when() {
             return _(() => !!e.prefixOptions)() && e.prefixOptions.length > 0;
           },
           get fallback() {
             return (() => {
-              var t = ne();
-              return l(t, () => e.prefix), y(() => C(t, $("flex items-center border-r border-input bg-muted/50 text-muted-foreground", g().text, g().px, g().height))), t;
+              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", x().text, x().px, x().height))), t;
             })();
           },
           get children() {
-            return f(ie, {
+            return f(le, {
               get options() {
                 return e.prefixOptions;
               },
@@ -244,7 +246,7 @@ function Te(r) {
                 return e.onPrefixChange;
               },
               get label() {
-                return T();
+                return P();
               },
               get size() {
                 return e.size;
@@ -259,34 +261,34 @@ function Te(r) {
       }
     }), d), B(d, L({
       get id() {
-        return v();
+        return m();
       },
       get "aria-invalid"() {
         return e.error ? !0 : void 0;
       },
       get "aria-describedby"() {
-        return I();
+        return $();
       },
       get class() {
-        return $("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-muted-foreground/60", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", g().text, g().px);
+        return I("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-muted-foreground/60", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", x().text, x().px);
       }
-    }, b), !1, !1), l(c, f(p, {
+    }, b), !1, !1), l(c, f(w, {
       get when() {
-        return O();
+        return T();
       },
       get children() {
-        return f(p, {
+        return f(w, {
           get when() {
             return _(() => !!e.suffixOptions)() && e.suffixOptions.length > 0;
           },
           get fallback() {
             return (() => {
-              var t = ne();
-              return l(t, () => e.suffix), y(() => C(t, $("flex items-center border-l border-input bg-muted/50 text-muted-foreground", g().text, g().px, g().height))), t;
+              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", x().text, x().px, x().height))), t;
             })();
           },
           get children() {
-            return f(ie, {
+            return f(le, {
               get options() {
                 return e.suffixOptions;
               },
@@ -310,38 +312,40 @@ function Te(r) {
           }
         });
       }
-    }), null), l(s, f(p, {
+    }), null), l(s, f(w, {
       get when() {
         return e.error;
       },
       get children() {
         var t = M();
-        return l(t, () => e.error), y(() => m(t, "id", h())), t;
+        return l(t, () => e.error), y(() => g(t, "id", h())), t;
       }
-    }), null), l(s, f(p, {
+    }), null), l(s, f(w, {
       get when() {
         return _(() => !!e.helperText)() && !e.error;
       },
       get children() {
         var t = R();
-        return l(t, () => e.helperText), y(() => m(t, "id", x())), t;
+        return l(t, () => e.helperText), y(() => g(t, "id", v())), t;
       }
     }), null), y((t) => {
-      var a = e.class, k = $("inline-flex items-center rounded border border-input bg-background shadow-sm", "transition-colors duration-100", "focus-within:ring-1 focus-within:ring-ring focus-within:border-ring", b.disabled && "opacity-50 cursor-not-allowed", e.error && "border-error focus-within:ring-error", g().height);
-      return a !== t.e && C(s, t.e = a), k !== t.t && C(c, t.t = k), 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", x().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;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0,
+      o: void 0
     }), s;
   })();
 }
-function ie(r) {
-  const [e, b] = re(!1), [S, v] = re({
+function le(r) {
+  const [e, b] = ie(!1), [S, m] = ie({
     x: -9999,
     y: -9999
   });
-  let h, x;
-  const I = {
+  let h, v;
+  const $ = {
     sm: {
       height: "h-7",
       text: "text-xs",
@@ -357,72 +361,72 @@ function ie(r) {
       text: "text-sm",
       px: "px-3"
     }
-  }, o = () => I[r.size ?? "md"], g = () => {
-    if (!h || !x) return;
-    const i = h.getBoundingClientRect(), s = x.getBoundingClientRect(), c = window.innerWidth, d = window.innerHeight;
-    let t = i.left, a = i.bottom + 2;
-    t + s.width > c - D && (t = i.right - s.width), t = Math.max(D, t), a + s.height > d - D && (a = i.top - s.height - 2), a = Math.max(D, a), v({
+  }, o = () => $[r.size ?? "md"], x = () => {
+    if (!h || !v) return;
+    const i = h.getBoundingClientRect(), s = v.getBoundingClientRect(), c = window.innerWidth, d = 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 > d - D && (u = i.top - s.height - 2), u = Math.max(D, u), m({
       x: t,
-      y: a
+      y: u
     });
-  }, u = (i) => {
-    h && !h.contains(i.target) && x && !x.contains(i.target) && b(!1);
-  }, O = (i) => {
-    i.key === "Escape" && b(!1);
+  }, a = (i) => {
+    h && !h.contains(i.target) && v && !v.contains(i.target) && b(!1);
   }, T = (i) => {
+    i.key === "Escape" && b(!1);
+  }, P = (i) => {
     r.onChange?.(i), b(!1);
   };
-  return de(() => {
+  return ue(() => {
     if (!e()) {
-      v({
+      m({
         x: -9999,
         y: -9999
       });
       return;
     }
-    typeof document > "u" || (document.addEventListener("mousedown", u), document.addEventListener("keydown", O), requestAnimationFrame(g), ue(() => {
-      document.removeEventListener("mousedown", u), document.removeEventListener("keydown", O);
+    typeof document > "u" || (document.addEventListener("mousedown", a), document.addEventListener("keydown", T), requestAnimationFrame(x), se(() => {
+      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", T);
     }));
   }), [(() => {
-    var i = pe(), s = i.firstChild;
+    var i = ye(), s = i.firstChild;
     i.$$click = () => {
       b((d) => !d);
     };
     var c = h;
-    return typeof c == "function" ? te(c, i) : h = i, l(s, () => r.label), l(i, f(fe, {
+    return typeof c == "function" ? ne(c, i) : h = i, l(s, () => r.label), l(i, f(ge, {
       class: "w-3 h-3 opacity-60"
     }), null), y((d) => {
-      var t = r.disabled, a = $("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 !== d.e && (i.disabled = d.e = t), a !== d.t && C(i, d.t = a), d;
+      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 !== d.e && (i.disabled = d.e = t), u !== d.t && C(i, d.t = u), d;
     }, {
       e: void 0,
       t: void 0
     }), i;
-  })(), f(p, {
+  })(), f(w, {
     get when() {
       return e();
     },
     get children() {
-      return f(oe, {
+      return f(de, {
         get children() {
-          var i = we(), s = x;
-          return typeof s == "function" ? te(s, i) : x = i, l(i, f(se, {
+          var i = Ie(), s = v;
+          return typeof s == "function" ? ne(s, i) : v = i, l(i, f(ce, {
             get each() {
               return r.options;
             },
             children: (c) => (() => {
-              var d = ye();
-              return d.$$click = () => T(c.value), l(d, () => c.label), y((t) => {
-                var a = $("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 a !== t.e && C(d, t.e = a), k !== t.t && m(d, "aria-selected", t.t = k), t;
+              var d = $e();
+              return d.$$click = () => P(c.value), l(d, () => 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(d, t.e = u), k !== t.t && g(d, "aria-selected", t.t = k), t;
               }, {
                 e: void 0,
                 t: void 0
               }), d;
             })()
           })), y((c) => {
-            var d = $("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`, a = `${S().y}px`;
-            return d !== c.e && C(i, c.e = d), t !== c.t && ee(i, "left", c.t = t), a !== c.a && ee(i, "top", c.a = a), c;
+            var d = 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 d !== c.e && C(i, c.e = d), t !== c.t && re(i, "left", c.t = t), u !== c.a && re(i, "top", c.a = u), c;
           }, {
             e: void 0,
             t: void 0,
@@ -433,10 +437,10 @@ function ie(r) {
     }
   })];
 }
-le(["click", "input"]);
+ae(["click", "input"]);
 export {
-  Te as AffixInput,
-  ke as Input,
-  _e as NumberInput,
-  Oe as Textarea
+  De as AffixInput,
+  Te as Input,
+  Pe as NumberInput,
+  _e as Textarea
 };

package/dist/components/ui/Pagination.js

@@ -225,7 +225,7 @@ function ue(c) {
                   return p.value = l, i(p, l), p;
                 })()
               })), g((l) => {
-                var p = v("text-muted-foreground", h().text), L = e.disabled, y = v("rounded-md border border-border bg-background px-2 focus:outline-none focus:ring-2 focus:ring-ring", h().input, e.disabled && "opacity-50 cursor-not-allowed");
+                var p = v("text-muted-foreground", h().text), L = e.disabled, y = v("rounded-md border border-border bg-background px-2 focus:outline-none", h().input, e.disabled && "opacity-50 cursor-not-allowed");
                 return p !== l.e && b(s, l.e = p), L !== l.t && (d.disabled = l.t = L), y !== l.a && b(d, l.a = y), l;
               }, {
                 e: void 0,
@@ -315,7 +315,7 @@ function ue(c) {
             get children() {
               var n = te(), s = n.firstChild, d = s.nextSibling;
               return d.addEventListener("blur", k), d.$$keydown = (l) => l.key === "Enter" && k(l), g((l) => {
-                var p = v("text-muted-foreground", h().text), L = e.totalPages, y = String(e.page), A = e.disabled, B = v("rounded-md border border-border bg-background px-2 text-center", "focus:outline-none focus:ring-2 focus:ring-ring", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", h().input, e.disabled && "opacity-50 cursor-not-allowed");
+                var p = v("text-muted-foreground", h().text), L = e.totalPages, y = String(e.page), A = e.disabled, B = v("rounded-md border border-border bg-background px-2 text-center", "focus:outline-none", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", h().input, e.disabled && "opacity-50 cursor-not-allowed");
                 return p !== l.e && b(s, l.e = p), L !== l.t && w(d, "max", l.t = L), y !== l.a && w(d, "placeholder", l.a = y), A !== l.o && (d.disabled = l.o = A), B !== l.i && b(d, l.i = B), l;
               }, {
                 e: void 0,

package/dist/floe.css

@@ -302,7 +302,11 @@
   }
 
   /* Focus styles */
-  :focus-visible {
+  :focus-visible:not(:where(
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
+    textarea, select, [data-floe-input-surface],
+    [data-floe-input-surface] :is(input, textarea, select, button)
+  )) {
     outline: none;
     box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
   }
@@ -427,6 +431,44 @@
   }
 }
 
+/* A field has one visible border. Compound controls mark the element that owns it.
+ * This utility changes color only; it never replaces an existing decorative shadow.
+ */
+@layer utilities {
+  :is(
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
+    textarea, select, [data-floe-input-surface]
+  ) {
+    outline: none;
+  }
+
+  :is(
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
+    textarea, select, [data-floe-input-surface]
+  ):focus:not(:disabled):not([aria-disabled='true']):not([data-floe-input-surface] :is(input, textarea, select)),
+  [data-floe-input-surface]:focus-within:not(:disabled):not([aria-disabled='true']) {
+    border-color: var(--floe-input-focus-color, var(--ring));
+  }
+
+  :is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
+    --floe-input-focus-color: var(--error);
+  }
+
+  /* Internal buttons use a local fill to identify keyboard focus without a second frame. */
+  [data-floe-input-surface] button:focus-visible {
+    outline: none;
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  @media (forced-colors: active) {
+    :is(input, textarea, select, [data-floe-input-surface]),
+    :is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
+      --floe-input-focus-color: Highlight;
+    }
+  }
+}
+
 /* Animation utilities */
 @layer utilities {
   .floe-floating-presence {