fiboui 2.0.0 → 2.2.0

package/dist/{index-B1av7e36.js → index-BN2z9MuJ.js}

@@ -1,74 +1,79 @@
 "use client";
-var O = Object.defineProperty;
-var P = (o, i, e) => i in o ? O(o, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[i] = e;
-var r = (o, i, e) => P(o, typeof i != "symbol" ? i + "" : i, e);
-import t, { useState as T, useEffect as F, useRef as M } from "react";
-import { h as $, F as D, S as q } from "./builder-DjLYXkXu.js";
-import { t as B } from "./bundle-mjs-wppB-TKB.js";
-const V = t.memo((o) => {
+var H = Object.defineProperty;
+var O = (c, l, e) => l in c ? H(c, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[l] = e;
+var r = (c, l, e) => O(c, typeof l != "symbol" ? l + "" : l, e);
+import t, { useState as F, useEffect as M, useRef as j } from "react";
+import { v as $, F as D, S as P } from "./builder-KLTu7nAI.js";
+import { t as L } from "./bundle-mjs-wppB-TKB.js";
+const q = t.memo((c) => {
   const {
-    text: i,
+    text: l,
     variant: e,
-    size: l,
+    size: o,
     onPress: a,
-    disabled: s,
-    icon: d,
-    shape: u,
-    shadow: y,
-    tone: w,
+    onHover: s,
+    disabled: d,
+    icon: h,
+    shape: p,
+    shadow: k,
+    tone: v,
     motion: x,
-    expand: f,
-    className: k,
-    style: v,
-    ...g
-  } = o, _ = {
+    expand: E,
+    className: _,
+    style: y,
+    ...f
+  } = c, g = {
     xs: "px-[21px] py-[8px] text-[10px] gap-[6px] h-auto tracking-[0.12em] font-normal",
     sm: "px-[14px] py-[6px] text-[13px] gap-[6px] h-[32px]",
     md: "px-[22px] py-[10px] text-[15px] gap-[8px] h-[44px]",
     lg: "px-[32px] py-[16px] text-[17px] gap-[10px] h-[56px]"
   };
-  let m = "rounded-[14px]";
-  u === "pill" ? m = "rounded-full" : u === "square" ? m = "rounded-[12px]" : u === "rect" ? m = "rounded-[2px]" : u === "rounded" ? m = "rounded-[8px]" : u === "sharp" && (m = "rounded-none");
-  const I = w === "inverse";
-  let p = "";
-  e === "ghost" ? p = I ? "bg-transparent text-white shadow-none border border-transparent" : "bg-transparent text-gray-600 shadow-none border border-transparent hover:bg-gray-100" : e === "text" ? p = I ? "bg-transparent text-white shadow-none border-none px-2" : "bg-transparent text-gray-600 shadow-none border-none px-2 hover:bg-gray-100" : e === "soft" ? p = "bg-indigo-50 text-indigo-600 shadow-none border-none hover:bg-indigo-100" : e === "outline" || e === "outlined" ? p = I ? "bg-black text-white shadow-none border border-[#3b3b3b]" : "bg-transparent border-[1.5px] border-gray-200 text-gray-700 shadow-none hover:bg-gray-50" : e === "solid" ? p = I ? "bg-[#f2f2f2] text-black shadow-none border border-[#f2f2f2]" : "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-none border-none hover:opacity-90" : e === "filled" || e === "primary" ? p = "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-sm border-none hover:opacity-90 active:opacity-100" : e === "elevated" ? p = "bg-[var(--fibo-surface)] text-[var(--fibo-primary)] shadow-md border-none hover:shadow-lg" : e === "tonal" ? p = "bg-[var(--fibo-secondary-container)] text-[var(--fibo-on-secondary-container)] shadow-sm border-none" : e === "raw" && (p = "bg-transparent border-none shadow-none p-0 h-auto gap-0 text-inherit font-inherit hover:bg-transparent", m = ""), y === "soft" && e !== "raw" && (p += " shadow-[0_8px_20px_-6px_rgba(59,130,246,0.4)]");
-  const b = v || {}, L = b.padding !== void 0 || b.paddingTop !== void 0 || b.paddingBottom !== void 0 || b.paddingLeft !== void 0 || b.paddingRight !== void 0 || b.fontSize !== void 0 || b.height !== void 0, N = b.borderRadius !== void 0, E = b.fontWeight !== void 0 || l === "xs" || I, z = e === "raw" || x === "none" || I || l === "xs", n = B(
+  let S = "rounded-[14px]";
+  p === "pill" ? S = "rounded-full" : p === "square" ? S = "rounded-[12px]" : p === "rect" ? S = "rounded-[2px]" : p === "rounded" ? S = "rounded-[8px]" : p === "sharp" && (S = "rounded-none");
+  const m = v === "inverse";
+  let b = "";
+  e === "ghost" ? b = m ? "bg-transparent text-white shadow-none border border-transparent" : "bg-transparent text-gray-600 shadow-none border border-transparent hover:bg-gray-100" : e === "text" ? b = m ? "bg-transparent text-white shadow-none border-none px-2" : "bg-transparent text-gray-600 shadow-none border-none px-2 hover:bg-gray-100" : e === "soft" ? b = "bg-indigo-50 text-indigo-600 shadow-none border-none hover:bg-indigo-100" : e === "outline" || e === "outlined" ? b = m ? "bg-black text-white shadow-none border border-[#3b3b3b]" : "bg-transparent border-[1.5px] border-gray-200 text-gray-700 shadow-none hover:bg-gray-50" : e === "solid" ? b = m ? "bg-[#f2f2f2] text-black shadow-none border border-[#f2f2f2]" : "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-none border-none hover:opacity-90" : e === "filled" || e === "primary" ? b = "bg-[var(--fibo-primary)] text-[var(--fibo-on-primary)] shadow-sm border-none hover:opacity-90 active:opacity-100" : e === "elevated" ? b = "bg-[var(--fibo-surface)] text-[var(--fibo-primary)] shadow-md border-none hover:shadow-lg" : e === "tonal" ? b = "bg-[var(--fibo-secondary-container)] text-[var(--fibo-on-secondary-container)] shadow-sm border-none" : e === "raw" && (b = "bg-transparent border-none shadow-none p-0 h-auto gap-0 text-inherit font-inherit hover:bg-transparent", S = ""), k === "soft" && e !== "raw" && (b += " shadow-[0_8px_20px_-6px_rgba(59,130,246,0.4)]");
+  const w = y || {}, I = w.padding !== void 0 || w.paddingTop !== void 0 || w.paddingBottom !== void 0 || w.paddingLeft !== void 0 || w.paddingRight !== void 0 || w.fontSize !== void 0 || w.height !== void 0, C = w.borderRadius !== void 0, z = w.fontWeight !== void 0 || o === "xs" || m, n = e === "raw" || x === "none" || m || o === "xs", u = L(
     "fibo-button",
     "inline-flex items-center justify-center whitespace-nowrap",
-    E ? "" : "font-semibold",
-    z ? "" : "active:scale-[0.96] transform transition-all duration-200 ease-out",
-    s ? "cursor-not-allowed opacity-60" : "cursor-pointer",
-    e === "raw" || L ? "" : _[l],
-    e === "raw" || N ? "" : m,
-    f ? "flex-1 w-full" : "",
+    z ? "" : "font-semibold",
+    n ? "" : "active:scale-[0.96] transform transition-all duration-200 ease-out",
+    d ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+    e === "raw" || I ? "" : g[o],
+    e === "raw" || C ? "" : S,
+    E ? "flex-1 w-full" : "",
     `fibo-button-${e}`,
-    p,
-    k
-  ), h = [];
-  return d && h.push(d), i && h.push(i), o.children && (Array.isArray(o.children) ? h.push(...o.children) : h.push(o.children)), t.createElement(
+    b,
+    _
+  ), A = [];
+  return h && A.push(h), l && A.push(l), c.children && (Array.isArray(c.children) ? A.push(...c.children) : A.push(c.children)), t.createElement(
     "button",
     {
-      className: n,
-      onClick: (S) => {
-        s || (!z && document.documentElement.classList.contains("fibo-theme-material") && e !== "raw" && import("./effects-CnevV566.js").then(({ createRipple: j }) => {
-          j(S, S.currentTarget);
+      className: u,
+      onMouseEnter: s ? () => {
+        d || s();
+      } : f.onMouseEnter,
+      onClick: (T) => {
+        d || (!n && document.documentElement.classList.contains("fibo-theme-material") && e !== "raw" && import("./effects-CnevV566.js").then(({ createRipple: i }) => {
+          i(T, T.currentTarget);
         }), a == null || a());
       },
-      disabled: s,
-      ...g,
-      type: g.type ?? "button",
-      style: b
+      disabled: d,
+      ...f,
+      type: f.type ?? "button",
+      style: w
     },
-    ...h
+    ...A
   );
 });
-class W extends D {
+class V extends D {
   constructor(e = "") {
     super();
     r(this, "_text", "");
     r(this, "_variant", "elevated");
     r(this, "_size", "md");
     r(this, "_onPress");
+    r(this, "_onHover");
     r(this, "_disabled", !1);
     r(this, "_icon");
     r(this, "_shape", "default");
@@ -93,6 +98,9 @@ class W extends D {
   onPress(e) {
     return this._onPress = e, this;
   }
+  onHover(e) {
+    return this._onHover = e, this;
+  }
   disabled(e = !0) {
     return this._disabled = e, this;
   }
@@ -120,6 +128,7 @@ class W extends D {
       variant: this._variant,
       size: this._size,
       onPress: this._onPress,
+      onHover: this._onHover,
       disabled: this._disabled,
       icon: this._icon,
       shape: this._shape,
@@ -132,85 +141,85 @@ class W extends D {
       children: this.processChildren(),
       ...this._props
     };
-    return t.createElement(V, a);
+    return t.createElement(q, a);
   }
 }
-const de = $(W), H = (o, i) => {
+const de = $(V), W = (c, l) => {
   let e = 0;
-  const l = o.replace(/\D/g, "").split("");
+  const o = c.replace(/\D/g, "").split("");
   let a = "";
-  for (let s = 0; s < i.length && !(e >= l.length); s++)
-    i[s] === "9" ? a += l[e++] : a += i[s];
+  for (let s = 0; s < l.length && !(e >= o.length); s++)
+    l[s] === "9" ? a += o[e++] : a += l[s];
   return a;
-}, K = t.memo((o) => {
-  const i = t.useId(), e = o.id || i, [l, a] = t.useState(!1), {
+}, K = t.memo((c) => {
+  const l = t.useId(), e = c.id || l, [o, a] = t.useState(!1), {
     containerClass: s,
     containerStyle: d,
-    label: u,
-    error: y,
-    mask: w,
-    type: x,
-    value: f,
-    onChange: k,
-    leadingIcon: v,
-    trailingIcon: g,
-    ..._
-  } = o, m = f instanceof q, [I, p] = T(m ? f.value : f);
-  F(() => {
-    if (m)
-      return f.subscribe((h) => {
-        p(h);
+    label: h,
+    error: p,
+    mask: k,
+    type: v,
+    value: x,
+    onChange: E,
+    leadingIcon: _,
+    trailingIcon: y,
+    ...f
+  } = c, g = x instanceof P, [S, m] = F(g ? x.value : x);
+  M(() => {
+    if (g)
+      return x.subscribe((u) => {
+        m(u);
       });
-    p(f);
-  }, [f, m]);
-  const b = x === "password", L = b && l ? "text" : x, N = (n) => {
-    let h = n.target.value;
-    if (w) {
-      h = H(h, w);
-      const S = {
+    m(x);
+  }, [x, g]);
+  const b = v === "password", w = b && o ? "text" : v, I = (n) => {
+    let u = n.target.value;
+    if (k) {
+      u = W(u, k);
+      const A = {
         ...n,
         target: {
           ...n.target,
-          value: h
+          value: u
         }
       };
-      m && (f.value = h), k == null || k(S);
+      g && (x.value = u), E == null || E(A);
     } else
-      m && (f.value = h), k == null || k(n);
-  }, E = v ? "2.75rem" : "1rem", z = g || b ? "2.75rem" : "1rem";
+      g && (x.value = u), E == null || E(n);
+  }, C = _ ? "2.75rem" : "1rem", z = y || b ? "2.75rem" : "1rem";
   return t.createElement(
     "div",
     { className: s, style: d },
     t.createElement("div", { className: "relative w-full h-full flex items-center" }, [
-      v && t.createElement(
+      _ && t.createElement(
         "div",
         {
           key: "leading-icon",
           className: "absolute left-3 top-1/2 transform -translate-y-1/2 flex items-center justify-center pointer-events-none z-10"
         },
-        v
+        _
       ),
       t.createElement("input", {
         key: "input",
         id: e,
         className: "fibo-textfield-input w-full h-full bg-transparent outline-none py-2.5 text-sm",
-        style: { paddingLeft: E, paddingRight: z },
-        type: L,
-        onChange: N,
-        value: I,
-        ..._
+        style: { paddingLeft: C, paddingRight: z },
+        type: w,
+        onChange: I,
+        value: S,
+        ...f
       }),
-      u && t.createElement(
+      h && t.createElement(
         "label",
         {
           key: "label",
           htmlFor: e,
           className: "fibo-textfield-label",
-          style: { left: v ? "2.75rem" : "1rem" }
+          style: { left: _ ? "2.75rem" : "1rem" }
         },
-        u
+        h
       ),
-      (g || b) && t.createElement(
+      (y || b) && t.createElement(
         "div",
         {
           key: "trailing-icon",
@@ -221,10 +230,10 @@ const de = $(W), H = (o, i) => {
           {
             type: "button",
             className: "text-gray-400 hover:text-gray-600 focus:outline-none",
-            onClick: () => a(!l),
+            onClick: () => a(!o),
             tabIndex: -1
           },
-          l ? t.createElement(
+          o ? t.createElement(
             "svg",
             { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
             t.createElement("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
@@ -235,13 +244,13 @@ const de = $(W), H = (o, i) => {
             t.createElement("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
             t.createElement("circle", { cx: 12, cy: 12, r: 3 })
           )
-        ) : g
+        ) : y
       )
     ]),
-    y && t.createElement(
+    p && t.createElement(
       "span",
       { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1" },
-      y
+      p
     )
   );
 });
@@ -298,7 +307,7 @@ class G extends D {
     let e = "fibo-textfield-container w-full h-14 relative";
     this._variant === "outlined" ? e += " border border-[var(--fibo-outline)] rounded-[4px] bg-transparent" : e += " bg-[var(--fibo-surface-variant)] rounded-t-[4px] border-b border-[var(--fibo-outline)]";
     const a = {
-      containerClass: B(e, ...this._classNames),
+      containerClass: L(e, ...this._classNames),
       containerStyle: this.getStyle(),
       label: this._label,
       error: this._error,
@@ -318,50 +327,50 @@ class G extends D {
     return t.createElement(K, a);
   }
 }
-const he = $(G), U = t.memo((o) => {
+const he = $(G), U = t.memo((c) => {
   const {
-    checked: i,
+    checked: l,
     onChange: e,
-    label: l,
+    label: o,
     disabled: a,
     className: s,
     style: d,
-    id: u
-  } = o, y = B(
+    id: h
+  } = c, p = L(
     "fibo-switch-track w-[44px] h-[24px] rounded-full relative transition-colors duration-200 ease-in-out",
     a ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-    i ? "bg-[var(--fibo-primary,#3B82F6)]" : "bg-gray-200"
-  ), w = B(
+    l ? "bg-[var(--fibo-primary,#3B82F6)]" : "bg-gray-200"
+  ), k = L(
     "absolute w-5 h-5 rounded-full bg-white top-[2px] left-[2px] transition-transform duration-200 ease-in-out shadow-sm",
-    i ? "translate-x-[20px]" : "translate-x-0"
+    l ? "translate-x-[20px]" : "translate-x-0"
   );
   return t.createElement(
     "label",
     {
-      className: B("fibo-switch flex items-center gap-3", s)
+      className: L("fibo-switch flex items-center gap-3", s)
     },
     t.createElement(
       "div",
       {
-        className: y,
+        className: p,
         style: d,
         "aria-hidden": !0
       },
-      t.createElement("div", { className: w })
+      t.createElement("div", { className: k })
     ),
-    l && t.createElement(
+    o && t.createElement(
       "span",
       { className: "text-sm font-medium text-gray-700 select-none" },
-      l
+      o
     ),
     t.createElement("input", {
-      id: u,
+      id: h,
       type: "checkbox",
       role: "switch",
-      checked: !!i,
+      checked: !!l,
       disabled: a,
       className: "sr-only",
-      onChange: (x) => !a && (e == null ? void 0 : e(x.target.checked))
+      onChange: (v) => !a && (e == null ? void 0 : e(v.target.checked))
     })
   );
 });
@@ -398,22 +407,22 @@ class J extends D {
     return t.createElement(U, e);
   }
 }
-const ue = $(J), Q = t.memo((o) => {
+const ue = $(J), Q = t.memo((c) => {
   const {
-    checked: i,
+    checked: l,
     onChange: e,
-    label: l,
+    label: o,
     disabled: a,
     indeterminate: s,
     className: d,
-    style: u,
-    id: y
-  } = o, w = M(null), x = i || s;
-  F(() => {
-    w.current && (w.current.indeterminate = !!s);
+    style: h,
+    id: p
+  } = c, k = j(null), v = l || s;
+  M(() => {
+    k.current && (k.current.indeterminate = !!s);
   }, [s]);
-  let f = null;
-  return s ? f = t.createElement("div", { className: "w-[10px] h-[2px] bg-white rounded-[1px]" }) : i && (f = t.createElement(
+  let x = null;
+  return s ? x = t.createElement("div", { className: "w-[10px] h-[2px] bg-white rounded-[1px]" }) : l && (x = t.createElement(
     "svg",
     {
       width: "12",
@@ -433,34 +442,34 @@ const ue = $(J), Q = t.memo((o) => {
   )), t.createElement(
     "label",
     {
-      className: B("fibo-checkbox flex items-center gap-2", d)
+      className: L("fibo-checkbox flex items-center gap-2", d)
     },
     t.createElement(
       "div",
       {
-        className: B(
+        className: L(
           "fibo-checkbox-box w-5 h-5 rounded-[6px] border-2 flex items-center justify-center transition-all duration-200",
           a ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-          x ? "border-transparent bg-[var(--fibo-primary,#3B82F6)]" : "border-gray-300 bg-transparent"
+          v ? "border-transparent bg-[var(--fibo-primary,#3B82F6)]" : "border-gray-300 bg-transparent"
         ),
-        style: u,
+        style: h,
         "aria-hidden": !0
       },
-      f
+      x
     ),
-    l && t.createElement(
+    o && t.createElement(
       "span",
       { className: "text-sm text-gray-700 select-none" },
-      l
+      o
     ),
     t.createElement("input", {
-      ref: w,
-      id: y,
+      ref: k,
+      id: p,
       type: "checkbox",
-      checked: !!i,
+      checked: !!l,
       disabled: a,
       className: "sr-only",
-      onChange: (k) => !a && (e == null ? void 0 : e(k.target.checked))
+      onChange: (E) => !a && (e == null ? void 0 : e(E.target.checked))
     })
   );
 });
@@ -502,54 +511,54 @@ class X extends D {
     return t.createElement(Q, e);
   }
 }
-const pe = $(X), Y = t.memo((o) => {
+const pe = $(X), Y = t.memo((c) => {
   const {
-    value: i,
+    value: l,
     options: e = [],
-    onChange: l,
+    onChange: o,
     name: a,
     direction: s,
     className: d,
-    style: u
-  } = o, y = t.useId(), w = a || y;
+    style: h
+  } = c, p = t.useId(), k = a || p;
   return t.createElement(
     "div",
     {
       role: "radiogroup",
-      className: B(`fibo-radio-group flex ${s === "vertical" ? "flex-col gap-2" : "flex-row gap-4"}`, d),
-      style: u
+      className: L(`fibo-radio-group flex ${s === "vertical" ? "flex-col gap-2" : "flex-row gap-4"}`, d),
+      style: h
     },
-    e.map((x) => {
-      const f = i === x.value, k = x.disabled, v = B(
+    e.map((v) => {
+      const x = l === v.value, E = v.disabled, _ = L(
         "relative flex items-center justify-center w-[18px] h-[18px] rounded-full transition-all duration-200",
-        f ? "border-[5px] border-[var(--fibo-primary,#3B82F6)]" : "border-2 border-gray-300"
+        x ? "border-[5px] border-[var(--fibo-primary,#3B82F6)]" : "border-2 border-gray-300"
       );
       return t.createElement(
         "label",
         {
-          key: x.value,
-          className: `flex items-center gap-2 cursor-pointer ${k ? "opacity-50 cursor-not-allowed" : ""}`
+          key: v.value,
+          className: `flex items-center gap-2 cursor-pointer ${E ? "opacity-50 cursor-not-allowed" : ""}`
         },
         t.createElement(
           "div",
           {
-            className: v,
+            className: _,
             "aria-hidden": !0
           },
           t.createElement("input", {
             type: "radio",
-            name: w,
-            value: x.value,
-            checked: f,
-            disabled: k,
+            name: k,
+            value: v.value,
+            checked: x,
+            disabled: E,
             className: "sr-only",
-            onChange: () => !k && (l == null ? void 0 : l(x.value))
+            onChange: () => !E && (o == null ? void 0 : o(v.value))
           })
         ),
         t.createElement(
           "span",
           { className: "text-sm text-gray-700" },
-          x.label
+          v.label
         )
       );
     })
@@ -592,21 +601,21 @@ class Z extends D {
     return t.createElement(Y, e);
   }
 }
-const me = $(Z), ee = t.memo((o) => {
-  const i = t.useId(), e = o.id || i, {
-    containerClass: l,
+const me = $(Z), ee = t.memo((c) => {
+  const l = t.useId(), e = c.id || l, {
+    containerClass: o,
     containerStyle: a,
     label: s,
     error: d,
-    ...u
-  } = o;
+    ...h
+  } = c;
   return t.createElement(
     "div",
-    { className: l, style: a },
+    { className: o, style: a },
     t.createElement("textarea", {
       id: e,
       className: "fibo-textarea-input w-full p-4 text-base bg-transparent outline-none relative z-10",
-      ...u
+      ...h
     }),
     s && t.createElement(
       "label",
@@ -660,8 +669,8 @@ class te extends D {
     return this._onChange = e, this;
   }
   build() {
-    const l = {
-      containerClass: B("fibo-textarea-container w-full", ...this._classNames),
+    const o = {
+      containerClass: L("fibo-textarea-container w-full", ...this._classNames),
       containerStyle: this.getStyle(),
       label: this._label,
       error: this._error,
@@ -676,63 +685,63 @@ class te extends D {
       },
       ...this._props
     };
-    return t.createElement(ee, l);
+    return t.createElement(ee, o);
   }
 }
-const be = $(te), re = t.memo((o) => {
-  const i = t.useId(), e = o.id || i, l = `${e}-listbox`, [a, s] = T(!1), [d, u] = T(0), y = M(null), {
-    containerClass: w,
-    containerStyle: x,
-    label: f,
-    error: k,
-    value: v,
-    options: g = [],
-    placeholder: _,
-    onChange: m,
-    disabled: I,
-    multiple: p
-  } = o;
-  F(() => {
-    const n = (h) => {
-      y.current && !y.current.contains(h.target) && s(!1);
+const be = $(te), re = t.memo((c) => {
+  const l = t.useId(), e = c.id || l, o = `${e}-listbox`, [a, s] = F(!1), [d, h] = F(0), p = j(null), {
+    containerClass: k,
+    containerStyle: v,
+    label: x,
+    error: E,
+    value: _,
+    options: y = [],
+    placeholder: f,
+    onChange: g,
+    disabled: S,
+    multiple: m
+  } = c;
+  M(() => {
+    const n = (u) => {
+      p.current && !p.current.contains(u.target) && s(!1);
     };
     return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
   }, []);
-  const b = (n) => p ? Array.isArray(v) && v.includes(n) : v === n;
-  let L = "";
-  if (p)
-    Array.isArray(v) && v.length > 0 && (L = g.filter((n) => v.includes(n.value)).map((n) => n.label).join(", "));
+  const b = (n) => m ? Array.isArray(_) && _.includes(n) : _ === n;
+  let w = "";
+  if (m)
+    Array.isArray(_) && _.length > 0 && (w = y.filter((n) => _.includes(n.value)).map((n) => n.label).join(", "));
   else {
-    const n = g.find((h) => h.value === v);
-    L = n ? n.label : "";
-  }
-  const N = (n) => {
-    if (!I)
-      if (p) {
-        const h = Array.isArray(v) ? [...v] : [], S = h.indexOf(n);
-        S > -1 ? h.splice(S, 1) : h.push(n), m == null || m(h);
+    const n = y.find((u) => u.value === _);
+    w = n ? n.label : "";
+  }
+  const I = (n) => {
+    if (!S)
+      if (m) {
+        const u = Array.isArray(_) ? [..._] : [], A = u.indexOf(n);
+        A > -1 ? u.splice(A, 1) : u.push(n), g == null || g(u);
       } else
-        m == null || m(n), s(!1);
-  }, E = (n) => {
-    g.length !== 0 && u((h) => (h + n + g.length) % g.length);
+        g == null || g(n), s(!1);
+  }, C = (n) => {
+    y.length !== 0 && h((u) => (u + n + y.length) % y.length);
   }, z = (n) => {
-    if (!I)
+    if (!S)
       switch (n.key) {
         case "ArrowDown":
-          n.preventDefault(), a ? E(1) : s(!0);
+          n.preventDefault(), a ? C(1) : s(!0);
           break;
         case "ArrowUp":
-          n.preventDefault(), a ? E(-1) : s(!0);
+          n.preventDefault(), a ? C(-1) : s(!0);
           break;
         case "Home":
-          n.preventDefault(), u(0);
+          n.preventDefault(), h(0);
           break;
         case "End":
-          n.preventDefault(), u(Math.max(0, g.length - 1));
+          n.preventDefault(), h(Math.max(0, y.length - 1));
           break;
         case "Enter":
         case " ":
-          n.preventDefault(), a ? g[d] && N(g[d].value) : s(!0);
+          n.preventDefault(), a ? y[d] && I(y[d].value) : s(!0);
           break;
         case "Escape":
           n.preventDefault(), s(!1);
@@ -742,9 +751,9 @@ const be = $(te), re = t.memo((o) => {
   return t.createElement(
     "div",
     {
-      ref: y,
-      className: w,
-      style: x
+      ref: p,
+      className: k,
+      style: v
     },
     t.createElement("div", { className: "relative w-full h-full" }, [
       t.createElement("button", {
@@ -754,14 +763,14 @@ const be = $(te), re = t.memo((o) => {
         role: "combobox",
         "aria-expanded": a,
         "aria-haspopup": "listbox",
-        "aria-controls": l,
-        "aria-activedescendant": a && g[d] ? `${l}-opt-${g[d].value}` : void 0,
-        disabled: I,
-        className: `fibo-textfield-input text-left w-full flex items-center justify-between ${L ? "" : "text-gray-400"}`,
-        onClick: () => !I && s(!a),
+        "aria-controls": o,
+        "aria-activedescendant": a && y[d] ? `${o}-opt-${y[d].value}` : void 0,
+        disabled: S,
+        className: `fibo-textfield-input text-left w-full flex items-center justify-between ${w ? "" : "text-gray-400"}`,
+        onClick: () => !S && s(!a),
         onKeyDown: z
       }, [
-        t.createElement("span", { key: "text", className: "truncate" }, L || _ || " "),
+        t.createElement("span", { key: "text", className: "truncate" }, w || f || " "),
         t.createElement("svg", {
           key: "icon",
           className: `w-4 h-4 transition-transform ${a ? "rotate-180" : ""}`,
@@ -771,34 +780,34 @@ const be = $(te), re = t.memo((o) => {
           "aria-hidden": !0
         }, t.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
       ]),
-      f && t.createElement(
+      x && t.createElement(
         "label",
         {
           key: "label",
           htmlFor: e,
           className: "fibo-textfield-label"
         },
-        f
+        x
       ),
       a && t.createElement("div", {
         key: "dropdown",
-        id: l,
+        id: o,
         role: "listbox",
-        "aria-multiselectable": p || void 0,
+        "aria-multiselectable": m || void 0,
         className: "absolute z-50 w-full mt-1 bg-[var(--fibo-surface)] border border-[var(--fibo-outline)] rounded-md shadow-lg max-h-60 overflow-auto focus:outline-none"
-      }, g.map((n, h) => {
-        const S = b(n.value), j = h === d;
+      }, y.map((n, u) => {
+        const A = b(n.value), T = u === d;
         return t.createElement("div", {
           key: n.value,
-          id: `${l}-opt-${n.value}`,
+          id: `${o}-opt-${n.value}`,
           role: "option",
-          "aria-selected": S,
-          className: `px-4 py-2 cursor-pointer text-sm hover:bg-[var(--fibo-primary-container)] hover:text-[var(--fibo-on-primary-container)] flex items-center justify-between ${S || j ? "bg-[var(--fibo-primary-container)] text-[var(--fibo-on-primary-container)] font-medium" : "text-[var(--fibo-on-surface)]"}`,
-          onClick: () => N(n.value),
-          onMouseEnter: () => u(h)
+          "aria-selected": A,
+          className: `px-4 py-2 cursor-pointer text-sm hover:bg-[var(--fibo-primary-container)] hover:text-[var(--fibo-on-primary-container)] flex items-center justify-between ${A || T ? "bg-[var(--fibo-primary-container)] text-[var(--fibo-on-primary-container)] font-medium" : "text-[var(--fibo-on-surface)]"}`,
+          onClick: () => I(n.value),
+          onMouseEnter: () => h(u)
         }, [
           t.createElement("span", { key: "label" }, n.label),
-          S && t.createElement("svg", {
+          A && t.createElement("svg", {
             key: "check",
             className: "w-4 h-4 text-[var(--fibo-primary)]",
             viewBox: "0 0 20 20",
@@ -808,10 +817,10 @@ const be = $(te), re = t.memo((o) => {
         ]);
       }))
     ]),
-    k && t.createElement(
+    E && t.createElement(
       "span",
       { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1", role: "alert" },
-      k
+      E
     )
   );
 });
@@ -852,8 +861,8 @@ class ae extends D {
     return this._onChange = e, this;
   }
   build() {
-    const l = {
-      containerClass: B("fibo-textfield-container relative", ...this._classNames),
+    const o = {
+      containerClass: L("fibo-textfield-container relative", ...this._classNames),
       containerStyle: this.getStyle(),
       label: this._label,
       error: this._error,
@@ -865,82 +874,82 @@ class ae extends D {
       onChange: this._onChange,
       ...this._props
     };
-    return t.createElement(re, l);
+    return t.createElement(re, o);
   }
 }
-const fe = $(ae), se = t.memo((o) => {
-  const i = t.useId(), e = o.id || i, l = `${e}-listbox`, [a, s] = T(!1), [d, u] = T(""), [y, w] = T(0), x = M(null), {
-    containerClass: f,
-    containerStyle: k,
-    label: v,
-    error: g,
-    value: _,
-    options: m = [],
-    placeholder: I,
-    onChange: p,
+const fe = $(ae), se = t.memo((c) => {
+  const l = t.useId(), e = c.id || l, o = `${e}-listbox`, [a, s] = F(!1), [d, h] = F(""), [p, k] = F(0), v = j(null), {
+    containerClass: x,
+    containerStyle: E,
+    label: _,
+    error: y,
+    value: f,
+    options: g = [],
+    placeholder: S,
+    onChange: m,
     onAdd: b,
-    disabled: L,
-    multiple: N
-  } = o;
-  F(() => {
-    if (!N) {
-      const c = m.find((C) => C.value === _);
-      c && !a && d !== c.label && u(c.label);
+    disabled: w,
+    multiple: I
+  } = c;
+  M(() => {
+    if (!I) {
+      const i = g.find((N) => N.value === f);
+      i && !a && d !== i.label && h(i.label);
     }
-  }, [_, m, a, N]);
-  const E = m.filter(
-    (c) => c.label.toLowerCase().includes(d.toLowerCase())
+  }, [f, g, a, I]);
+  const C = g.filter(
+    (i) => i.label.toLowerCase().includes(d.toLowerCase())
   );
-  F(() => {
-    w(0);
-  }, [d, a]), F(() => {
-    const c = (C) => {
-      if (x.current && !x.current.contains(C.target))
-        if (s(!1), N)
-          u("");
+  M(() => {
+    k(0);
+  }, [d, a]), M(() => {
+    const i = (N) => {
+      if (v.current && !v.current.contains(N.target))
+        if (s(!1), I)
+          h("");
         else {
-          const A = m.find((R) => R.value === _);
-          u(A ? A.label : "");
+          const B = g.find((R) => R.value === f);
+          h(B ? B.label : "");
         }
     };
-    return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
-  }, [_, m, N]);
-  const z = (c) => {
-    if (N) {
-      const C = Array.isArray(_) ? [..._] : [];
-      C.includes(c.value) || (C.push(c.value), p == null || p(C)), u("");
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [f, g, I]);
+  const z = (i) => {
+    if (I) {
+      const N = Array.isArray(f) ? [...f] : [];
+      N.includes(i.value) || (N.push(i.value), m == null || m(N)), h("");
     } else
-      u(c.label), p == null || p(c.value), s(!1);
-  }, n = (c) => {
-    if (N && Array.isArray(_)) {
-      const C = _.filter((A) => A !== c);
-      p == null || p(C);
+      h(i.label), m == null || m(i.value), s(!1);
+  }, n = (i) => {
+    if (I && Array.isArray(f)) {
+      const N = f.filter((B) => B !== i);
+      m == null || m(N);
     }
-  }, h = () => {
-    b == null || b(d), N ? u("") : s(!1);
-  }, S = (c) => N ? Array.isArray(_) && _.includes(c) : _ === c, j = (c) => {
-    if (!L)
-      switch (c.key) {
+  }, u = () => {
+    b == null || b(d), I ? h("") : s(!1);
+  }, A = (i) => I ? Array.isArray(f) && f.includes(i) : f === i, T = (i) => {
+    if (!w)
+      switch (i.key) {
         case "ArrowDown":
-          c.preventDefault(), a ? E.length && w((C) => (C + 1) % E.length) : s(!0);
+          i.preventDefault(), a ? C.length && k((N) => (N + 1) % C.length) : s(!0);
           break;
         case "ArrowUp":
-          c.preventDefault(), a ? E.length && w((C) => (C - 1 + E.length) % E.length) : s(!0);
+          i.preventDefault(), a ? C.length && k((N) => (N - 1 + C.length) % C.length) : s(!0);
           break;
         case "Enter":
-          c.preventDefault(), E[y] ? z(E[y]) : d && b && h();
+          i.preventDefault(), C[p] ? z(C[p]) : d && b && u();
           break;
         case "Escape":
-          c.preventDefault(), s(!1);
+          i.preventDefault(), s(!1);
           break;
       }
   };
   return t.createElement(
     "div",
     {
-      ref: x,
-      className: f,
-      style: k
+      ref: v,
+      className: x,
+      style: E
     },
     t.createElement("div", { className: "relative w-full h-full" }, [
       t.createElement("div", {
@@ -948,19 +957,19 @@ const fe = $(ae), se = t.memo((o) => {
         className: `fibo-textfield-input flex flex-wrap items-center gap-1 ${a ? "ring-2 ring-[var(--fibo-primary-container)] border-[var(--fibo-primary)]" : ""}`,
         style: { minHeight: "42px", padding: "4px 8px" }
       }, [
-        N && Array.isArray(_) && _.map((c) => {
-          const C = m.find((R) => R.value === c), A = C ? C.label : c;
+        I && Array.isArray(f) && f.map((i) => {
+          const N = g.find((R) => R.value === i), B = N ? N.label : i;
           return t.createElement("span", {
-            key: c,
+            key: i,
             className: "bg-[var(--fibo-primary-container)] text-[var(--fibo-on-primary-container)] text-xs font-medium px-2 py-1 rounded-md flex items-center"
           }, [
-            A,
+            B,
             t.createElement("button", {
               type: "button",
               className: "ml-1 hover:text-[var(--fibo-primary)] focus:outline-none",
-              "aria-label": `Remove ${A}`,
+              "aria-label": `Remove ${B}`,
               onClick: (R) => {
-                R.stopPropagation(), n(c);
+                R.stopPropagation(), n(i);
               }
             }, "×")
           ]);
@@ -970,64 +979,64 @@ const fe = $(ae), se = t.memo((o) => {
           id: e,
           role: "combobox",
           "aria-expanded": a,
-          "aria-controls": l,
+          "aria-controls": o,
           "aria-autocomplete": "list",
-          "aria-activedescendant": a && E[y] ? `${l}-opt-${E[y].value}` : void 0,
+          "aria-activedescendant": a && C[p] ? `${o}-opt-${C[p].value}` : void 0,
           className: "bg-transparent outline-none flex-1 min-w-[60px] text-sm h-8",
           value: d,
-          placeholder: N && Array.isArray(_) && _.length > 0 ? "" : I || " ",
-          disabled: L,
-          onChange: (c) => {
-            u(c.target.value), a || s(!0);
+          placeholder: I && Array.isArray(f) && f.length > 0 ? "" : S || " ",
+          disabled: w,
+          onChange: (i) => {
+            h(i.target.value), a || s(!0);
           },
           onFocus: () => s(!0),
-          onKeyDown: j
+          onKeyDown: T
         })
       ]),
-      v && t.createElement(
+      _ && t.createElement(
         "label",
         {
           key: "label",
           htmlFor: e,
           className: "fibo-textfield-label"
         },
-        v
+        _
       ),
       a && t.createElement("div", {
         key: "dropdown",
-        id: l,
+        id: o,
         role: "listbox",
-        "aria-multiselectable": N || void 0,
+        "aria-multiselectable": I || void 0,
         className: "absolute z-50 w-full mt-1 bg-[var(--fibo-surface)] border border-[var(--fibo-outline)] rounded-md shadow-lg max-h-60 overflow-auto focus:outline-none left-0"
       }, [
-        ...E.length > 0 ? E.map((c, C) => {
-          const A = S(c.value), R = C === y;
+        ...C.length > 0 ? C.map((i, N) => {
+          const B = A(i.value), R = N === p;
           return t.createElement("div", {
-            key: c.value,
-            id: `${l}-opt-${c.value}`,
+            key: i.value,
+            id: `${o}-opt-${i.value}`,
             role: "option",
-            "aria-selected": A,
-            className: `px-4 py-2 cursor-pointer text-sm hover:bg-[var(--fibo-primary-container)] hover:text-[var(--fibo-on-primary-container)] ${A || R ? "bg-[var(--fibo-primary-container)] text-[var(--fibo-on-primary-container)] font-medium" : "text-[var(--fibo-on-surface)]"} ${A ? "opacity-50" : ""}`,
-            onClick: () => !A && z(c),
-            onMouseEnter: () => w(C)
-          }, c.label);
+            "aria-selected": B,
+            className: `px-4 py-2 cursor-pointer text-sm hover:bg-[var(--fibo-primary-container)] hover:text-[var(--fibo-on-primary-container)] ${B || R ? "bg-[var(--fibo-primary-container)] text-[var(--fibo-on-primary-container)] font-medium" : "text-[var(--fibo-on-surface)]"} ${B ? "opacity-50" : ""}`,
+            onClick: () => !B && z(i),
+            onMouseEnter: () => k(N)
+          }, i.label);
         }) : [t.createElement("div", { key: "empty", className: "px-4 py-2 text-sm text-gray-500" }, "No results found.")],
-        d && !E.some((c) => c.label.toLowerCase() === d.toLowerCase()) && b ? t.createElement("div", {
+        d && !C.some((i) => i.label.toLowerCase() === d.toLowerCase()) && b ? t.createElement("div", {
           key: "add-new",
           role: "option",
           "aria-selected": !1,
           className: "border-t border-[var(--fibo-outline)] px-4 py-2 cursor-pointer text-sm text-[var(--fibo-primary)] hover:bg-[var(--fibo-primary-container)] font-medium flex items-center",
-          onClick: h
+          onClick: u
         }, [
           t.createElement("span", { key: "plus", className: "mr-1" }, "+"),
           `Add "${d}"`
         ]) : null
       ])
     ]),
-    g && t.createElement(
+    y && t.createElement(
       "span",
       { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1", role: "alert" },
-      g
+      y
     )
   );
 });
@@ -1072,8 +1081,8 @@ class ne extends D {
     return this._onAdd = e, this;
   }
   build() {
-    const l = {
-      containerClass: B("fibo-textfield-container relative", ...this._classNames),
+    const o = {
+      containerClass: L("fibo-textfield-container relative", ...this._classNames),
       containerStyle: this.getStyle(),
       label: this._label,
       error: this._error,
@@ -1086,7 +1095,7 @@ class ne extends D {
       onAdd: this._onAdd,
       ...this._props
     };
-    return t.createElement(se, l);
+    return t.createElement(se, o);
   }
 }
 const xe = $(ne);