fiboui 2.4.4 → 2.6.0

package/dist/index-BxH8dhoT.js

@@ -1,1112 +0,0 @@
-"use client";
-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 M, useEffect as j, useRef as F } from "react";
-import { D as $, E as D, S as P } from "./builder-B5cebEWZ.js";
-import { t as L } from "./bundle-mjs-wppB-TKB.js";
-const q = t.memo((c) => {
-  const {
-    text: l,
-    variant: e,
-    size: o,
-    onPress: a,
-    onHover: s,
-    disabled: d,
-    icon: u,
-    shape: p,
-    shadow: k,
-    tone: v,
-    motion: x,
-    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 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-[var(--fibo-on-surface)] shadow-none border border-transparent hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_8%,transparent)]" : e === "text" ? b = m ? "bg-transparent text-white shadow-none border-none px-2" : "bg-transparent text-[var(--fibo-on-surface)] shadow-none border-none px-2 hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_8%,transparent)]" : e === "soft" ? b = "bg-[color-mix(in_srgb,var(--fibo-primary)_12%,transparent)] text-[var(--fibo-primary)] shadow-none border-none hover:bg-[color-mix(in_srgb,var(--fibo-primary)_18%,transparent)]" : e === "outline" || e === "outlined" ? b = m ? "bg-black text-white shadow-none border border-[#3b3b3b]" : "bg-transparent border-[1.5px] border-[var(--fibo-outline,rgba(0,0,0,0.12))] text-[var(--fibo-on-surface)] shadow-none hover:bg-[color-mix(in_srgb,var(--fibo-on-surface)_6%,transparent)]" : 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", h = L(
-    "fibo-button",
-    "inline-flex items-center justify-center whitespace-nowrap",
-    z ? "" : "font-semibold",
-    // Resting scale(1) so active:scale eases instead of snapping from none.
-    n ? "" : "scale-100 active:scale-[0.96] transform transition-transform 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}`,
-    b,
-    _
-  ), A = [];
-  return u && A.push(u), l && A.push(l), c.children && (Array.isArray(c.children) ? A.push(...c.children) : A.push(c.children)), t.createElement(
-    "button",
-    {
-      className: h,
-      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: d,
-      ...f,
-      type: f.type ?? "button",
-      style: w
-    },
-    ...A
-  );
-});
-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");
-    r(this, "_shadow", "none");
-    r(this, "_tone", "default");
-    r(this, "_motion", "default");
-    r(this, "_expand", !1);
-    this.text(e);
-  }
-  text(e) {
-    return this._text = e, typeof e == "function" && this.observer(), this;
-  }
-  variant(e) {
-    return this._variant = e, this;
-  }
-  clean() {
-    return this._variant = "raw", this;
-  }
-  size(e) {
-    return this._size = e, this;
-  }
-  onPress(e) {
-    return this._onPress = e, this;
-  }
-  onHover(e) {
-    return this._onHover = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  icon(e) {
-    return this._icon = e, this;
-  }
-  shape(e) {
-    return this._shape = e, this;
-  }
-  shadow(e) {
-    return this._shadow = e, this;
-  }
-  tone(e) {
-    return this._tone = e, this;
-  }
-  motion(e) {
-    return this._motion = e, this;
-  }
-  expand(e = !0) {
-    return this._expand = e, this;
-  }
-  build() {
-    const e = this.getClassName(), a = {
-      text: typeof this._text == "function" ? this._text() : this._text,
-      variant: this._variant,
-      size: this._size,
-      onPress: this._onPress,
-      onHover: this._onHover,
-      disabled: this._disabled,
-      icon: this._icon,
-      shape: this._shape,
-      shadow: this._shadow,
-      tone: this._tone,
-      motion: this._motion,
-      expand: this._expand,
-      className: e,
-      style: this.getStyle(),
-      children: this.processChildren(),
-      ...this._props
-    };
-    return t.createElement(q, a);
-  }
-}
-const de = $(V), W = (c, l) => {
-  let e = 0;
-  const o = c.replace(/\D/g, "").split("");
-  let a = "";
-  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((c) => {
-  const l = t.useId(), e = c.id || l, [o, a] = t.useState(!1), {
-    containerClass: s,
-    containerStyle: d,
-    label: u,
-    error: p,
-    mask: k,
-    type: v,
-    value: x,
-    onChange: E,
-    leadingIcon: _,
-    trailingIcon: y,
-    ...f
-  } = c, g = x instanceof P, [S, m] = M(g ? x.value : x);
-  j(() => {
-    if (g)
-      return x.subscribe((h) => {
-        m(h);
-      });
-    m(x);
-  }, [x, g]);
-  const b = v === "password", w = b && o ? "text" : v, I = (n) => {
-    let h = n.target.value;
-    if (k) {
-      h = W(h, k);
-      const A = {
-        ...n,
-        target: {
-          ...n.target,
-          value: h
-        }
-      };
-      g && (x.value = h), E == null || E(A);
-    } else
-      g && (x.value = h), 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" }, [
-      _ && 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"
-        },
-        _
-      ),
-      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: C, paddingRight: z },
-        type: w,
-        onChange: I,
-        value: S,
-        ...f
-      }),
-      u && t.createElement(
-        "label",
-        {
-          key: "label",
-          htmlFor: e,
-          className: "fibo-textfield-label",
-          style: { left: _ ? "2.75rem" : "1rem" }
-        },
-        u
-      ),
-      (y || b) && t.createElement(
-        "div",
-        {
-          key: "trailing-icon",
-          className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center justify-center z-10"
-        },
-        b ? t.createElement(
-          "button",
-          {
-            type: "button",
-            className: "text-gray-400 hover:text-gray-600 focus:outline-none",
-            onClick: () => a(!o),
-            tabIndex: -1
-          },
-          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" }),
-            t.createElement("line", { x1: 1, y1: 1, x2: 23, y2: 23 })
-          ) : 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: "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 })
-          )
-        ) : y
-      )
-    ]),
-    p && t.createElement(
-      "span",
-      { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1" },
-      p
-    )
-  );
-});
-class G extends D {
-  constructor(e = "") {
-    super();
-    r(this, "_value", "");
-    r(this, "_label", "");
-    r(this, "_placeholder", "");
-    r(this, "_type", "text");
-    r(this, "_disabled", !1);
-    r(this, "_error");
-    r(this, "_mask");
-    r(this, "_onChange");
-    r(this, "_leadingIcon");
-    r(this, "_trailingIcon");
-    r(this, "_variant", "filled");
-    this._value = e;
-  }
-  value(e) {
-    return this._value = e, this;
-  }
-  label(e) {
-    return this._label = e, this;
-  }
-  placeholder(e) {
-    return this._placeholder = e, this;
-  }
-  type(e) {
-    return this._type = e, this;
-  }
-  mask(e) {
-    return this._mask = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  error(e) {
-    return this._error = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  leadingIcon(e) {
-    return this._leadingIcon = e, this;
-  }
-  trailingIcon(e) {
-    return this._trailingIcon = e, this;
-  }
-  variant(e) {
-    return this._variant = e, this;
-  }
-  build() {
-    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: L(e, ...this._classNames),
-      containerStyle: this.getStyle(),
-      label: this._label,
-      error: this._error,
-      leadingIcon: this._leadingIcon,
-      trailingIcon: this._trailingIcon,
-      value: this._value,
-      placeholder: this._placeholder || " ",
-      type: this._type,
-      mask: this._mask,
-      disabled: this._disabled,
-      onChange: (s) => {
-        var d;
-        (d = this._onChange) == null || d.call(this, s.target.value);
-      },
-      ...this._props
-    };
-    return t.createElement(K, a);
-  }
-}
-const ue = $(G), U = t.memo((c) => {
-  const {
-    checked: l,
-    onChange: e,
-    label: o,
-    disabled: a,
-    className: s,
-    style: d,
-    id: u
-  } = 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",
-    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",
-    l ? "translate-x-[20px]" : "translate-x-0"
-  );
-  return t.createElement(
-    "label",
-    {
-      className: L("fibo-switch flex items-center gap-3", s)
-    },
-    t.createElement(
-      "div",
-      {
-        className: p,
-        style: d,
-        "aria-hidden": !0
-      },
-      t.createElement("div", { className: k })
-    ),
-    o && t.createElement(
-      "span",
-      { className: "text-sm font-medium text-gray-700 select-none" },
-      o
-    ),
-    t.createElement("input", {
-      id: u,
-      type: "checkbox",
-      role: "switch",
-      checked: !!l,
-      disabled: a,
-      className: "sr-only",
-      onChange: (v) => !a && (e == null ? void 0 : e(v.target.checked))
-    })
-  );
-});
-class J extends D {
-  constructor() {
-    super(...arguments);
-    r(this, "_checked", !1);
-    r(this, "_onChange");
-    r(this, "_label");
-    r(this, "_disabled", !1);
-  }
-  checked(e) {
-    return this._checked = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  label(e) {
-    return this._label = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  build() {
-    const e = {
-      checked: this._checked,
-      onChange: this._onChange,
-      label: this._label,
-      disabled: this._disabled,
-      className: this.getClassName(),
-      style: this.getStyle(),
-      ...this._props
-    };
-    return t.createElement(U, e);
-  }
-}
-const he = $(J), Q = t.memo((c) => {
-  const {
-    checked: l,
-    onChange: e,
-    label: o,
-    disabled: a,
-    indeterminate: s,
-    className: d,
-    style: u,
-    id: p
-  } = c, k = F(null), v = l || s;
-  j(() => {
-    k.current && (k.current.indeterminate = !!s);
-  }, [s]);
-  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",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": !0
-    },
-    t.createElement("path", {
-      d: "M10 3L4.5 8.5L2 6",
-      stroke: "white",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  )), t.createElement(
-    "label",
-    {
-      className: L("fibo-checkbox flex items-center gap-2", d)
-    },
-    t.createElement(
-      "div",
-      {
-        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",
-          v ? "border-transparent bg-[var(--fibo-primary,#3B82F6)]" : "border-gray-300 bg-transparent"
-        ),
-        style: u,
-        "aria-hidden": !0
-      },
-      x
-    ),
-    o && t.createElement(
-      "span",
-      { className: "text-sm text-gray-700 select-none" },
-      o
-    ),
-    t.createElement("input", {
-      ref: k,
-      id: p,
-      type: "checkbox",
-      checked: !!l,
-      disabled: a,
-      className: "sr-only",
-      onChange: (E) => !a && (e == null ? void 0 : e(E.target.checked))
-    })
-  );
-});
-class X extends D {
-  constructor() {
-    super(...arguments);
-    r(this, "_checked", !1);
-    r(this, "_onChange");
-    r(this, "_label");
-    r(this, "_disabled", !1);
-    r(this, "_indeterminate", !1);
-  }
-  checked(e) {
-    return this._checked = e, this;
-  }
-  indeterminate(e) {
-    return this._indeterminate = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  label(e) {
-    return this._label = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  build() {
-    const e = {
-      checked: this._checked,
-      onChange: this._onChange,
-      label: this._label,
-      disabled: this._disabled,
-      indeterminate: this._indeterminate,
-      className: this.getClassName(),
-      style: this.getStyle(),
-      ...this._props
-    };
-    return t.createElement(Q, e);
-  }
-}
-const pe = $(X), Y = t.memo((c) => {
-  const {
-    value: l,
-    options: e = [],
-    onChange: o,
-    name: a,
-    direction: s,
-    className: d,
-    style: u
-  } = c, p = t.useId(), k = a || p;
-  return t.createElement(
-    "div",
-    {
-      role: "radiogroup",
-      className: L(`fibo-radio-group flex ${s === "vertical" ? "flex-col gap-2" : "flex-row gap-4"}`, d),
-      style: u
-    },
-    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",
-        x ? "border-[5px] border-[var(--fibo-primary,#3B82F6)]" : "border-2 border-gray-300"
-      );
-      return t.createElement(
-        "label",
-        {
-          key: v.value,
-          className: `flex items-center gap-2 cursor-pointer ${E ? "opacity-50 cursor-not-allowed" : ""}`
-        },
-        t.createElement(
-          "div",
-          {
-            className: _,
-            "aria-hidden": !0
-          },
-          t.createElement("input", {
-            type: "radio",
-            name: k,
-            value: v.value,
-            checked: x,
-            disabled: E,
-            className: "sr-only",
-            onChange: () => !E && (o == null ? void 0 : o(v.value))
-          })
-        ),
-        t.createElement(
-          "span",
-          { className: "text-sm text-gray-700" },
-          v.label
-        )
-      );
-    })
-  );
-});
-class Z extends D {
-  constructor() {
-    super(...arguments);
-    r(this, "_value", "");
-    r(this, "_options", []);
-    r(this, "_onChange");
-    r(this, "_name");
-    r(this, "_direction", "vertical");
-  }
-  value(e) {
-    return this._value = e, this;
-  }
-  options(e) {
-    return this._options = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  direction(e) {
-    return this._direction = e, this;
-  }
-  name(e) {
-    return this._name = e, this;
-  }
-  build() {
-    const e = {
-      value: this._value,
-      options: this._options,
-      onChange: this._onChange,
-      name: this._name,
-      direction: this._direction,
-      className: this.getClassName(),
-      style: this.getStyle()
-    };
-    return t.createElement(Y, e);
-  }
-}
-const me = $(Z), ee = t.memo((c) => {
-  const l = t.useId(), e = c.id || l, {
-    containerClass: o,
-    containerStyle: a,
-    label: s,
-    error: d,
-    ...u
-  } = c;
-  return t.createElement(
-    "div",
-    { 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
-    }),
-    s && t.createElement(
-      "label",
-      {
-        htmlFor: e,
-        className: "fibo-textarea-label"
-      },
-      s
-    ),
-    d && t.createElement(
-      "span",
-      { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1" },
-      d
-    )
-  );
-});
-class te extends D {
-  constructor() {
-    super(...arguments);
-    r(this, "_value", "");
-    r(this, "_label", "");
-    r(this, "_placeholder", "");
-    r(this, "_disabled", !1);
-    r(this, "_rows", 4);
-    r(this, "_error");
-    r(this, "_resize", "vertical");
-    r(this, "_onChange");
-  }
-  value(e) {
-    return this._value = e, this;
-  }
-  label(e) {
-    return this._label = e, this;
-  }
-  placeholder(e) {
-    return this._placeholder = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  rows(e) {
-    return this._rows = e, this;
-  }
-  resize(e) {
-    return this._resize = e, this;
-  }
-  error(e) {
-    return this._error = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  build() {
-    const o = {
-      containerClass: L("fibo-textarea-container w-full", ...this._classNames),
-      containerStyle: this.getStyle(),
-      label: this._label,
-      error: this._error,
-      rows: this._rows,
-      value: this._value,
-      placeholder: this._placeholder || " ",
-      disabled: this._disabled,
-      style: { resize: this._resize },
-      onChange: (a) => {
-        var s;
-        (s = this._onChange) == null || s.call(this, a.target.value);
-      },
-      ...this._props
-    };
-    return t.createElement(ee, o);
-  }
-}
-const be = $(te), re = t.memo((c) => {
-  const l = t.useId(), e = c.id || l, o = `${e}-listbox`, [a, s] = M(!1), [d, u] = M(0), p = F(null), {
-    containerClass: k,
-    containerStyle: v,
-    label: x,
-    error: E,
-    value: _,
-    options: y = [],
-    placeholder: f,
-    onChange: g,
-    disabled: S,
-    multiple: m
-  } = c;
-  j(() => {
-    const n = (h) => {
-      p.current && !p.current.contains(h.target) && s(!1);
-    };
-    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
-  }, []);
-  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 = y.find((h) => h.value === _);
-    w = n ? n.label : "";
-  }
-  const I = (n) => {
-    if (!S)
-      if (m) {
-        const h = Array.isArray(_) ? [..._] : [], A = h.indexOf(n);
-        A > -1 ? h.splice(A, 1) : h.push(n), g == null || g(h);
-      } else
-        g == null || g(n), s(!1);
-  }, C = (n) => {
-    y.length !== 0 && u((h) => (h + n + y.length) % y.length);
-  }, z = (n) => {
-    if (!S)
-      switch (n.key) {
-        case "ArrowDown":
-          n.preventDefault(), a ? C(1) : s(!0);
-          break;
-        case "ArrowUp":
-          n.preventDefault(), a ? C(-1) : s(!0);
-          break;
-        case "Home":
-          n.preventDefault(), u(0);
-          break;
-        case "End":
-          n.preventDefault(), u(Math.max(0, y.length - 1));
-          break;
-        case "Enter":
-        case " ":
-          n.preventDefault(), a ? y[d] && I(y[d].value) : s(!0);
-          break;
-        case "Escape":
-          n.preventDefault(), s(!1);
-          break;
-      }
-  };
-  return t.createElement(
-    "div",
-    {
-      ref: p,
-      className: k,
-      style: v
-    },
-    t.createElement("div", { className: "relative w-full h-full" }, [
-      t.createElement("button", {
-        key: "trigger",
-        id: e,
-        type: "button",
-        role: "combobox",
-        "aria-expanded": a,
-        "aria-haspopup": "listbox",
-        "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" }, w || f || " "),
-        t.createElement("svg", {
-          key: "icon",
-          className: `w-4 h-4 transition-transform ${a ? "rotate-180" : ""}`,
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          "aria-hidden": !0
-        }, t.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
-      ]),
-      x && t.createElement(
-        "label",
-        {
-          key: "label",
-          htmlFor: e,
-          className: "fibo-textfield-label"
-        },
-        x
-      ),
-      a && t.createElement("div", {
-        key: "dropdown",
-        id: o,
-        role: "listbox",
-        "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"
-      }, y.map((n, h) => {
-        const A = b(n.value), T = h === d;
-        return t.createElement("div", {
-          key: n.value,
-          id: `${o}-opt-${n.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)] 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: () => u(h)
-        }, [
-          t.createElement("span", { key: "label" }, n.label),
-          A && t.createElement("svg", {
-            key: "check",
-            className: "w-4 h-4 text-[var(--fibo-primary)]",
-            viewBox: "0 0 20 20",
-            fill: "currentColor",
-            "aria-hidden": !0
-          }, t.createElement("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }))
-        ]);
-      }))
-    ]),
-    E && t.createElement(
-      "span",
-      { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1", role: "alert" },
-      E
-    )
-  );
-});
-class ae extends D {
-  constructor() {
-    super(...arguments);
-    r(this, "_value", "");
-    r(this, "_label", "");
-    r(this, "_placeholder", "");
-    r(this, "_disabled", !1);
-    r(this, "_error");
-    r(this, "_multiple", !1);
-    r(this, "_options", []);
-    r(this, "_onChange");
-  }
-  value(e) {
-    return this._value = e, this;
-  }
-  label(e) {
-    return this._label = e, this;
-  }
-  placeholder(e) {
-    return this._placeholder = e, this;
-  }
-  options(e) {
-    return this._options = e, this;
-  }
-  multiple(e = !0) {
-    return this._multiple = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  error(e) {
-    return this._error = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  build() {
-    const o = {
-      containerClass: L("fibo-textfield-container relative", ...this._classNames),
-      containerStyle: this.getStyle(),
-      label: this._label,
-      error: this._error,
-      value: this._value,
-      placeholder: this._placeholder,
-      options: this._options,
-      disabled: this._disabled,
-      multiple: this._multiple,
-      onChange: this._onChange,
-      ...this._props
-    };
-    return t.createElement(re, o);
-  }
-}
-const fe = $(ae), se = t.memo((c) => {
-  const l = t.useId(), e = c.id || l, o = `${e}-listbox`, [a, s] = M(!1), [d, u] = M(""), [p, k] = M(0), v = F(null), {
-    containerClass: x,
-    containerStyle: E,
-    label: _,
-    error: y,
-    value: f,
-    options: g = [],
-    placeholder: S,
-    onChange: m,
-    onAdd: b,
-    disabled: w,
-    multiple: I
-  } = c;
-  j(() => {
-    if (!I) {
-      const i = g.find((N) => N.value === f);
-      i && !a && d !== i.label && u(i.label);
-    }
-  }, [f, g, a, I]);
-  const C = g.filter(
-    (i) => i.label.toLowerCase().includes(d.toLowerCase())
-  );
-  j(() => {
-    k(0);
-  }, [d, a]), j(() => {
-    const i = (N) => {
-      if (v.current && !v.current.contains(N.target))
-        if (s(!1), I)
-          u("");
-        else {
-          const B = g.find((R) => R.value === f);
-          u(B ? B.label : "");
-        }
-    };
-    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)), u("");
-    } else
-      u(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), I ? u("") : s(!1);
-  }, A = (i) => I ? Array.isArray(f) && f.includes(i) : f === i, T = (i) => {
-    if (!w)
-      switch (i.key) {
-        case "ArrowDown":
-          i.preventDefault(), a ? C.length && k((N) => (N + 1) % C.length) : s(!0);
-          break;
-        case "ArrowUp":
-          i.preventDefault(), a ? C.length && k((N) => (N - 1 + C.length) % C.length) : s(!0);
-          break;
-        case "Enter":
-          i.preventDefault(), C[p] ? z(C[p]) : d && b && h();
-          break;
-        case "Escape":
-          i.preventDefault(), s(!1);
-          break;
-      }
-  };
-  return t.createElement(
-    "div",
-    {
-      ref: v,
-      className: x,
-      style: E
-    },
-    t.createElement("div", { className: "relative w-full h-full" }, [
-      t.createElement("div", {
-        key: "field",
-        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" }
-      }, [
-        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: 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"
-          }, [
-            B,
-            t.createElement("button", {
-              type: "button",
-              className: "ml-1 hover:text-[var(--fibo-primary)] focus:outline-none",
-              "aria-label": `Remove ${B}`,
-              onClick: (R) => {
-                R.stopPropagation(), n(i);
-              }
-            }, "×")
-          ]);
-        }),
-        t.createElement("input", {
-          key: "input",
-          id: e,
-          role: "combobox",
-          "aria-expanded": a,
-          "aria-controls": o,
-          "aria-autocomplete": "list",
-          "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: I && Array.isArray(f) && f.length > 0 ? "" : S || " ",
-          disabled: w,
-          onChange: (i) => {
-            u(i.target.value), a || s(!0);
-          },
-          onFocus: () => s(!0),
-          onKeyDown: T
-        })
-      ]),
-      _ && t.createElement(
-        "label",
-        {
-          key: "label",
-          htmlFor: e,
-          className: "fibo-textfield-label"
-        },
-        _
-      ),
-      a && t.createElement("div", {
-        key: "dropdown",
-        id: o,
-        role: "listbox",
-        "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"
-      }, [
-        ...C.length > 0 ? C.map((i, N) => {
-          const B = A(i.value), R = N === p;
-          return t.createElement("div", {
-            key: i.value,
-            id: `${o}-opt-${i.value}`,
-            role: "option",
-            "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 && !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
-        }, [
-          t.createElement("span", { key: "plus", className: "mr-1" }, "+"),
-          `Add "${d}"`
-        ]) : null
-      ])
-    ]),
-    y && t.createElement(
-      "span",
-      { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1", role: "alert" },
-      y
-    )
-  );
-});
-class ne extends D {
-  constructor() {
-    super(...arguments);
-    r(this, "_value", "");
-    r(this, "_label", "");
-    r(this, "_placeholder", "");
-    r(this, "_disabled", !1);
-    r(this, "_error");
-    r(this, "_multiple", !1);
-    r(this, "_options", []);
-    r(this, "_onChange");
-    r(this, "_onAdd");
-  }
-  value(e) {
-    return this._value = e, this;
-  }
-  label(e) {
-    return this._label = e, this;
-  }
-  placeholder(e) {
-    return this._placeholder = e, this;
-  }
-  options(e) {
-    return this._options = e, this;
-  }
-  multiple(e = !0) {
-    return this._multiple = e, this;
-  }
-  disabled(e = !0) {
-    return this._disabled = e, this;
-  }
-  error(e) {
-    return this._error = e, this;
-  }
-  onChange(e) {
-    return this._onChange = e, this;
-  }
-  onAdd(e) {
-    return this._onAdd = e, this;
-  }
-  build() {
-    const o = {
-      containerClass: L("fibo-textfield-container relative", ...this._classNames),
-      containerStyle: this.getStyle(),
-      label: this._label,
-      error: this._error,
-      value: this._value,
-      placeholder: this._placeholder,
-      options: this._options,
-      disabled: this._disabled,
-      multiple: this._multiple,
-      onChange: this._onChange,
-      onAdd: this._onAdd,
-      ...this._props
-    };
-    return t.createElement(se, o);
-  }
-}
-const xe = $(ne);
-export {
-  de as B,
-  pe as C,
-  me as R,
-  he as S,
-  ue as T,
-  be as a,
-  fe as b,
-  xe as c
-};