fiboui 1.0.2 → 2.0.0

package/dist/index-B1av7e36.js

@@ -0,0 +1,1102 @@
+"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) => {
+  const {
+    text: i,
+    variant: e,
+    size: l,
+    onPress: a,
+    disabled: s,
+    icon: d,
+    shape: u,
+    shadow: y,
+    tone: w,
+    motion: x,
+    expand: f,
+    className: k,
+    style: v,
+    ...g
+  } = o, _ = {
+    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(
+    "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" : "",
+    `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(
+    "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);
+        }), a == null || a());
+      },
+      disabled: s,
+      ...g,
+      type: g.type ?? "button",
+      style: b
+    },
+    ...h
+  );
+});
+class W extends D {
+  constructor(e = "") {
+    super();
+    r(this, "_text", "");
+    r(this, "_variant", "elevated");
+    r(this, "_size", "md");
+    r(this, "_onPress");
+    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;
+  }
+  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,
+      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(V, a);
+  }
+}
+const de = $(W), H = (o, i) => {
+  let e = 0;
+  const l = o.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];
+  return a;
+}, K = t.memo((o) => {
+  const i = t.useId(), e = o.id || i, [l, 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);
+      });
+    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 = {
+        ...n,
+        target: {
+          ...n.target,
+          value: h
+        }
+      };
+      m && (f.value = h), k == null || k(S);
+    } else
+      m && (f.value = h), k == null || k(n);
+  }, E = v ? "2.75rem" : "1rem", z = g || 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(
+        "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,
+        ..._
+      }),
+      u && t.createElement(
+        "label",
+        {
+          key: "label",
+          htmlFor: e,
+          className: "fibo-textfield-label",
+          style: { left: v ? "2.75rem" : "1rem" }
+        },
+        u
+      ),
+      (g || 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(!l),
+            tabIndex: -1
+          },
+          l ? 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 })
+          )
+        ) : g
+      )
+    ]),
+    y && t.createElement(
+      "span",
+      { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1" },
+      y
+    )
+  );
+});
+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: B(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 he = $(G), U = t.memo((o) => {
+  const {
+    checked: i,
+    onChange: e,
+    label: l,
+    disabled: a,
+    className: s,
+    style: d,
+    id: u
+  } = o, y = B(
+    "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(
+    "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"
+  );
+  return t.createElement(
+    "label",
+    {
+      className: B("fibo-switch flex items-center gap-3", s)
+    },
+    t.createElement(
+      "div",
+      {
+        className: y,
+        style: d,
+        "aria-hidden": !0
+      },
+      t.createElement("div", { className: w })
+    ),
+    l && t.createElement(
+      "span",
+      { className: "text-sm font-medium text-gray-700 select-none" },
+      l
+    ),
+    t.createElement("input", {
+      id: u,
+      type: "checkbox",
+      role: "switch",
+      checked: !!i,
+      disabled: a,
+      className: "sr-only",
+      onChange: (x) => !a && (e == null ? void 0 : e(x.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 ue = $(J), Q = t.memo((o) => {
+  const {
+    checked: i,
+    onChange: e,
+    label: l,
+    disabled: a,
+    indeterminate: s,
+    className: d,
+    style: u,
+    id: y
+  } = o, w = M(null), x = i || s;
+  F(() => {
+    w.current && (w.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(
+    "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: B("fibo-checkbox flex items-center gap-2", d)
+    },
+    t.createElement(
+      "div",
+      {
+        className: B(
+          "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"
+        ),
+        style: u,
+        "aria-hidden": !0
+      },
+      f
+    ),
+    l && t.createElement(
+      "span",
+      { className: "text-sm text-gray-700 select-none" },
+      l
+    ),
+    t.createElement("input", {
+      ref: w,
+      id: y,
+      type: "checkbox",
+      checked: !!i,
+      disabled: a,
+      className: "sr-only",
+      onChange: (k) => !a && (e == null ? void 0 : e(k.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((o) => {
+  const {
+    value: i,
+    options: e = [],
+    onChange: l,
+    name: a,
+    direction: s,
+    className: d,
+    style: u
+  } = o, y = t.useId(), w = a || y;
+  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
+    },
+    e.map((x) => {
+      const f = i === x.value, k = x.disabled, v = B(
+        "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"
+      );
+      return t.createElement(
+        "label",
+        {
+          key: x.value,
+          className: `flex items-center gap-2 cursor-pointer ${k ? "opacity-50 cursor-not-allowed" : ""}`
+        },
+        t.createElement(
+          "div",
+          {
+            className: v,
+            "aria-hidden": !0
+          },
+          t.createElement("input", {
+            type: "radio",
+            name: w,
+            value: x.value,
+            checked: f,
+            disabled: k,
+            className: "sr-only",
+            onChange: () => !k && (l == null ? void 0 : l(x.value))
+          })
+        ),
+        t.createElement(
+          "span",
+          { className: "text-sm text-gray-700" },
+          x.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((o) => {
+  const i = t.useId(), e = o.id || i, {
+    containerClass: l,
+    containerStyle: a,
+    label: s,
+    error: d,
+    ...u
+  } = o;
+  return t.createElement(
+    "div",
+    { className: l, 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 l = {
+      containerClass: B("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, l);
+  }
+}
+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);
+    };
+    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(", "));
+  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);
+      } else
+        m == null || m(n), s(!1);
+  }, E = (n) => {
+    g.length !== 0 && u((h) => (h + n + g.length) % g.length);
+  }, z = (n) => {
+    if (!I)
+      switch (n.key) {
+        case "ArrowDown":
+          n.preventDefault(), a ? E(1) : s(!0);
+          break;
+        case "ArrowUp":
+          n.preventDefault(), a ? E(-1) : s(!0);
+          break;
+        case "Home":
+          n.preventDefault(), u(0);
+          break;
+        case "End":
+          n.preventDefault(), u(Math.max(0, g.length - 1));
+          break;
+        case "Enter":
+        case " ":
+          n.preventDefault(), a ? g[d] && N(g[d].value) : s(!0);
+          break;
+        case "Escape":
+          n.preventDefault(), s(!1);
+          break;
+      }
+  };
+  return t.createElement(
+    "div",
+    {
+      ref: y,
+      className: w,
+      style: x
+    },
+    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": 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),
+        onKeyDown: z
+      }, [
+        t.createElement("span", { key: "text", className: "truncate" }, L || _ || " "),
+        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" }))
+      ]),
+      f && t.createElement(
+        "label",
+        {
+          key: "label",
+          htmlFor: e,
+          className: "fibo-textfield-label"
+        },
+        f
+      ),
+      a && t.createElement("div", {
+        key: "dropdown",
+        id: l,
+        role: "listbox",
+        "aria-multiselectable": p || 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;
+        return t.createElement("div", {
+          key: n.value,
+          id: `${l}-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)
+        }, [
+          t.createElement("span", { key: "label" }, n.label),
+          S && 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" }))
+        ]);
+      }))
+    ]),
+    k && t.createElement(
+      "span",
+      { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1", role: "alert" },
+      k
+    )
+  );
+});
+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 l = {
+      containerClass: B("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, l);
+  }
+}
+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,
+    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);
+    }
+  }, [_, m, a, N]);
+  const E = m.filter(
+    (c) => c.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("");
+        else {
+          const A = m.find((R) => R.value === _);
+          u(A ? A.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("");
+    } 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 = () => {
+    b == null || b(d), N ? u("") : s(!1);
+  }, S = (c) => N ? Array.isArray(_) && _.includes(c) : _ === c, j = (c) => {
+    if (!L)
+      switch (c.key) {
+        case "ArrowDown":
+          c.preventDefault(), a ? E.length && w((C) => (C + 1) % E.length) : s(!0);
+          break;
+        case "ArrowUp":
+          c.preventDefault(), a ? E.length && w((C) => (C - 1 + E.length) % E.length) : s(!0);
+          break;
+        case "Enter":
+          c.preventDefault(), E[y] ? z(E[y]) : d && b && h();
+          break;
+        case "Escape":
+          c.preventDefault(), s(!1);
+          break;
+      }
+  };
+  return t.createElement(
+    "div",
+    {
+      ref: x,
+      className: f,
+      style: k
+    },
+    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" }
+      }, [
+        N && Array.isArray(_) && _.map((c) => {
+          const C = m.find((R) => R.value === c), A = C ? C.label : c;
+          return t.createElement("span", {
+            key: c,
+            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,
+            t.createElement("button", {
+              type: "button",
+              className: "ml-1 hover:text-[var(--fibo-primary)] focus:outline-none",
+              "aria-label": `Remove ${A}`,
+              onClick: (R) => {
+                R.stopPropagation(), n(c);
+              }
+            }, "×")
+          ]);
+        }),
+        t.createElement("input", {
+          key: "input",
+          id: e,
+          role: "combobox",
+          "aria-expanded": a,
+          "aria-controls": l,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": a && E[y] ? `${l}-opt-${E[y].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);
+          },
+          onFocus: () => s(!0),
+          onKeyDown: j
+        })
+      ]),
+      v && t.createElement(
+        "label",
+        {
+          key: "label",
+          htmlFor: e,
+          className: "fibo-textfield-label"
+        },
+        v
+      ),
+      a && t.createElement("div", {
+        key: "dropdown",
+        id: l,
+        role: "listbox",
+        "aria-multiselectable": N || 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;
+          return t.createElement("div", {
+            key: c.value,
+            id: `${l}-opt-${c.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);
+        }) : [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", {
+          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
+      ])
+    ]),
+    g && t.createElement(
+      "span",
+      { className: "text-[var(--fibo-error)] text-xs mt-1 ml-1", role: "alert" },
+      g
+    )
+  );
+});
+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 l = {
+      containerClass: B("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, l);
+  }
+}
+const xe = $(ne);
+export {
+  de as B,
+  pe as C,
+  me as R,
+  ue as S,
+  he as T,
+  be as a,
+  fe as b,
+  xe as c
+};