@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/components/inputs/helpers/control-colors.mjs

@@ -0,0 +1,87 @@
+const r = {
+  ghost: {
+    primary: "!border-brand/70 hover:!border-brand/80 focus:!border-brand focus:!ring-brand/35 caret-brand dark:!border-brand/75 dark:!bg-brand/20 dark:hover:!border-brand/85 dark:focus:!border-brand dark:focus:!ring-brand/40",
+    secondary: "border-gray-500/40 hover:border-gray-500/60 focus:border-gray-500 focus:ring-gray-500/25 caret-gray-500 dark:border-gray-500/45 dark:bg-gray-500/10 dark:hover:border-gray-500/60 dark:focus:border-gray-400 dark:focus:ring-gray-500/30",
+    danger: "border-red-500/40 hover:border-red-500/60 focus:border-red-500 focus:ring-red-500/25 caret-red-500 dark:border-red-500/45 dark:bg-red-500/10 dark:hover:border-red-500/60 dark:focus:border-red-500 dark:focus:ring-red-500/30",
+    info: "!border-blue-500/70 hover:!border-blue-500/80 focus:!border-blue-500 focus:!ring-blue-500/35 caret-blue-500 dark:!border-blue-500/75 dark:!bg-blue-500/20 dark:hover:!border-blue-500/85 dark:focus:!border-blue-500 dark:focus:!ring-blue-500/40",
+    success: "border-green-500/40 hover:border-green-500/60 focus:border-green-500 focus:ring-green-500/25 caret-green-500 dark:border-green-500/45 dark:bg-green-500/10 dark:hover:border-green-500/60 dark:focus:border-green-500 dark:focus:ring-green-500/30",
+    warning: "border-orange-500/40 hover:border-orange-500/60 focus:border-orange-500 focus:ring-orange-500/25 caret-orange-500 dark:border-orange-500/45 dark:bg-orange-500/10 dark:hover:border-orange-500/60 dark:focus:border-orange-500 dark:focus:ring-orange-500/30"
+  },
+  solid: {
+    primary: "border border-brand/45 bg-brand/15 hover:bg-brand/20 focus:border-brand focus:ring-brand/30 caret-brand dark:border-brand/50 dark:bg-brand/20 dark:hover:bg-brand/25 dark:focus:border-brand dark:focus:ring-brand/35",
+    secondary: "border border-gray-500/30 bg-gray-500/10 hover:bg-gray-500/15 focus:border-gray-500 focus:ring-gray-500/25 caret-gray-500 dark:border-gray-500/35 dark:bg-gray-500/15 dark:hover:bg-gray-500/20 dark:focus:border-gray-400 dark:focus:ring-gray-500/30",
+    danger: "border border-red-500/30 bg-red-500/10 hover:bg-red-500/15 focus:border-red-500 focus:ring-red-500/25 caret-red-500 dark:border-red-500/35 dark:bg-red-500/15 dark:hover:bg-red-500/20 dark:focus:border-red-500 dark:focus:ring-red-500/30",
+    info: "border border-blue-500/45 bg-blue-500/15 hover:bg-blue-500/20 focus:border-blue-500 focus:ring-blue-500/30 caret-blue-500 dark:border-blue-500/50 dark:bg-blue-500/20 dark:hover:bg-blue-500/25 dark:focus:border-blue-500 dark:focus:ring-blue-500/35",
+    success: "border border-green-500/30 bg-green-500/10 hover:bg-green-500/15 focus:border-green-500 focus:ring-green-500/25 caret-green-500 dark:border-green-500/35 dark:bg-green-500/15 dark:hover:bg-green-500/20 dark:focus:border-green-500 dark:focus:ring-green-500/30",
+    warning: "border border-orange-500/30 bg-orange-500/10 hover:bg-orange-500/15 focus:border-orange-500 focus:ring-orange-500/25 caret-orange-500 dark:border-orange-500/35 dark:bg-orange-500/15 dark:hover:bg-orange-500/20 dark:focus:border-orange-500 dark:focus:ring-orange-500/30"
+  },
+  transparent: {
+    primary: "border border-transparent bg-brand/10 hover:bg-brand/15 focus:border-brand focus:ring-brand/30 caret-brand dark:bg-brand/15 dark:hover:bg-brand/20 dark:focus:border-brand dark:focus:ring-brand/35",
+    secondary: "border border-transparent bg-gray-500/5 hover:bg-gray-500/10 focus:border-gray-500 focus:ring-gray-500/25 caret-gray-500 dark:bg-gray-500/10 dark:hover:bg-gray-500/15 dark:focus:border-gray-400 dark:focus:ring-gray-500/30",
+    danger: "border border-transparent bg-red-500/5 hover:bg-red-500/10 focus:border-red-500 focus:ring-red-500/25 caret-red-500 dark:bg-red-500/10 dark:hover:bg-red-500/15 dark:focus:border-red-500 dark:focus:ring-red-500/30",
+    info: "border border-transparent bg-blue-500/10 hover:bg-blue-500/15 focus:border-blue-500 focus:ring-blue-500/30 caret-blue-500 dark:bg-blue-500/15 dark:hover:bg-blue-500/20 dark:focus:border-blue-500 dark:focus:ring-blue-500/35",
+    success: "border border-transparent bg-green-500/5 hover:bg-green-500/10 focus:border-green-500 focus:ring-green-500/25 caret-green-500 dark:bg-green-500/10 dark:hover:bg-green-500/15 dark:focus:border-green-500 dark:focus:ring-green-500/30",
+    warning: "border border-transparent bg-orange-500/5 hover:bg-orange-500/10 focus:border-orange-500 focus:ring-orange-500/25 caret-orange-500 dark:bg-orange-500/10 dark:hover:bg-orange-500/15 dark:focus:border-orange-500 dark:focus:ring-orange-500/30"
+  }
+}, e = {
+  primary: "text-brand",
+  secondary: "text-gray-600 dark:text-gray-300",
+  danger: "text-red-500",
+  info: "text-blue-500",
+  success: "text-green-500",
+  warning: "text-orange-500"
+}, o = {
+  primary: "bg-brand/10 text-brand hover:bg-brand/20",
+  secondary: "bg-gray-500/10 text-gray-600 hover:bg-gray-500/20 dark:text-gray-300",
+  danger: "bg-red-500/10 text-red-500 hover:bg-red-500/20",
+  info: "bg-blue-500/10 text-blue-500 hover:bg-blue-500/20",
+  success: "bg-green-500/10 text-green-500 hover:bg-green-500/20",
+  warning: "bg-orange-500/10 text-orange-500 hover:bg-orange-500/20"
+}, d = {
+  primary: "primary",
+  secondary: "gray",
+  danger: "danger",
+  info: "info",
+  success: "success",
+  warning: "warning"
+}, a = {
+  primary: "hover:bg-primary-500",
+  secondary: "hover:bg-gray-600",
+  danger: "hover:bg-red-600",
+  info: "hover:bg-blue-600",
+  success: "hover:bg-green-600",
+  warning: "hover:bg-orange-600"
+}, b = {
+  primary: {
+    wrapper: "border-brand/25 bg-brand/5 dark:border-brand/30 dark:bg-brand/10",
+    dropzone: "border-brand/30 bg-brand/5 hover:border-brand/55 hover:bg-brand/10 focus-within:border-brand/55 focus-within:bg-brand/10 dark:border-brand/35 dark:bg-brand/10 dark:hover:border-brand/60 dark:hover:bg-brand/15 dark:focus-within:border-brand/60 dark:focus-within:bg-brand/15"
+  },
+  secondary: {
+    wrapper: "border-gray-500/25 bg-gray-500/5 dark:border-gray-500/30 dark:bg-gray-500/10",
+    dropzone: "border-gray-500/30 bg-gray-500/5 hover:border-gray-500/55 hover:bg-gray-500/10 focus-within:border-gray-500/55 focus-within:bg-gray-500/10 dark:border-gray-500/35 dark:bg-gray-500/10 dark:hover:border-gray-500/60 dark:hover:bg-gray-500/15 dark:focus-within:border-gray-500/60 dark:focus-within:bg-gray-500/15"
+  },
+  danger: {
+    wrapper: "border-red-500/25 bg-red-500/5 dark:border-red-500/30 dark:bg-red-500/10",
+    dropzone: "border-red-500/30 bg-red-500/5 hover:border-red-500/55 hover:bg-red-500/10 focus-within:border-red-500/55 focus-within:bg-red-500/10 dark:border-red-500/35 dark:bg-red-500/10 dark:hover:border-red-500/60 dark:hover:bg-red-500/15 dark:focus-within:border-red-500/60 dark:focus-within:bg-red-500/15"
+  },
+  info: {
+    wrapper: "border-blue-500/25 bg-blue-500/5 dark:border-blue-500/30 dark:bg-blue-500/10",
+    dropzone: "border-blue-500/30 bg-blue-500/5 hover:border-blue-500/55 hover:bg-blue-500/10 focus-within:border-blue-500/55 focus-within:bg-blue-500/10 dark:border-blue-500/35 dark:bg-blue-500/10 dark:hover:border-blue-500/60 dark:hover:bg-blue-500/15 dark:focus-within:border-blue-500/60 dark:focus-within:bg-blue-500/15"
+  },
+  success: {
+    wrapper: "border-green-500/25 bg-green-500/5 dark:border-green-500/30 dark:bg-green-500/10",
+    dropzone: "border-green-500/30 bg-green-500/5 hover:border-green-500/55 hover:bg-green-500/10 focus-within:border-green-500/55 focus-within:bg-green-500/10 dark:border-green-500/35 dark:bg-green-500/10 dark:hover:border-green-500/60 dark:hover:bg-green-500/15 dark:focus-within:border-green-500/60 dark:focus-within:bg-green-500/15"
+  },
+  warning: {
+    wrapper: "border-orange-500/25 bg-orange-500/5 dark:border-orange-500/30 dark:bg-orange-500/10",
+    dropzone: "border-orange-500/30 bg-orange-500/5 hover:border-orange-500/55 hover:bg-orange-500/10 focus-within:border-orange-500/55 focus-within:bg-orange-500/10 dark:border-orange-500/35 dark:bg-orange-500/10 dark:hover:border-orange-500/60 dark:hover:bg-orange-500/15 dark:focus-within:border-orange-500/60 dark:focus-within:bg-orange-500/15"
+  }
+};
+export {
+  d as buttonColorByControlColor,
+  a as buttonHoverClassByControlColor,
+  o as controlAccentChipClasses,
+  e as controlAccentTextClasses,
+  b as fileInputColorClasses,
+  r as textControlColorClasses
+};

package/components/inputs/helpers/control-sizes.mjs

@@ -0,0 +1,20 @@
+const m = {
+  input: {
+    sm: "h-8 px-3 py-1.5 text-sm sm:h-10",
+    md: "h-10 px-4 py-2 text-sm sm:h-12",
+    lg: "h-12 px-4 py-3 text-base sm:h-14"
+  },
+  select: {
+    sm: "h-8 px-3 text-sm sm:h-10 sm:px-4",
+    md: "h-10 px-4 text-sm sm:h-12 sm:px-5",
+    lg: "h-12 px-4 text-base sm:h-14 sm:px-5"
+  },
+  textarea: {
+    sm: "min-h-20 px-3 py-2 text-sm sm:min-h-24",
+    md: "min-h-24 px-4 py-3 text-sm sm:min-h-28",
+    lg: "min-h-32 px-4 py-4 text-base sm:min-h-36"
+  }
+};
+export {
+  m as textControlSizeClasses
+};

package/components/inputs/helpers/field-error-text.mjs

@@ -0,0 +1,39 @@
+import { jsx as a } from "react/jsx-runtime";
+import i from "classnames";
+const t = {
+  base: "text-red-500 mt-[8px]",
+  size: {
+    sm: "text-[10px]",
+    md: "text-sm",
+    lg: "text-sm",
+    xl: "text-base"
+  }
+};
+function d({
+  tag: r = "div",
+  error: o,
+  size: e,
+  className: s,
+  id: l,
+  ...m
+}) {
+  return /* @__PURE__ */ a(
+    r,
+    {
+      id: l,
+      role: "alert",
+      "aria-live": "polite",
+      className: i(
+        t.base,
+        e && t.size[e],
+        s
+      ),
+      ...m,
+      children: o
+    }
+  );
+}
+export {
+  d as FieldError,
+  d as default
+};

package/components/inputs/helpers/field-helper-text.mjs

@@ -0,0 +1,37 @@
+import { jsx as a } from "react/jsx-runtime";
+import n from "classnames";
+const e = {
+  base: "text-gray-900 dark:text-gray-200 mt-[8px]",
+  size: {
+    sm: "text-[10px]",
+    md: "text-sm",
+    lg: "text-sm",
+    xl: "text-base"
+  }
+};
+function c({
+  size: t,
+  tag: s = "div",
+  children: x,
+  className: m,
+  id: o,
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    s,
+    {
+      id: o,
+      className: n(
+        e.base,
+        t && e.size[t],
+        m
+      ),
+      ...r,
+      children: x
+    }
+  );
+}
+export {
+  c as FieldHelperText,
+  c as default
+};

package/components/inputs/helpers/input-label.mjs

@@ -0,0 +1,30 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import a from "classnames";
+function d({
+  title: m,
+  subTitle: t,
+  important: s,
+  className: l,
+  titleClassName: c
+}) {
+  return /* @__PURE__ */ e("div", { className: a("relative mb-3", l), children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: a(
+          "block text-sm font-medium tracking-wider text-gray-900 dark:text-white",
+          c
+        ),
+        children: [
+          m,
+          s && /* @__PURE__ */ r("sup", { className: "text-red-500 ltr:ml-1.5 rtl:mr-1.5", children: "*" })
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ r("span", { className: "mt-1 block text-sm tracking-tighter text-gray-600 dark:text-gray-400 sm:text-sm", children: t })
+  ] });
+}
+export {
+  d as InputLabel,
+  d as default
+};

package/components/inputs/input-searcher.mjs

@@ -0,0 +1,307 @@
+import { jsx as n, jsxs as R } from "react/jsx-runtime";
+import { useState as v, useRef as N, useEffect as S, useMemo as F, useCallback as f } from "react";
+import { createPortal as ce } from "react-dom";
+import { Input as ie } from "./input.mjs";
+import E from "classnames";
+import { controlAccentTextClasses as le, controlAccentChipClasses as de } from "./helpers/control-colors.mjs";
+import { Check as ue } from "../icons/check.mjs";
+import { SearchIcon as he } from "../icons/search.mjs";
+import { Close as fe } from "../icons/close.mjs";
+function Ce({
+  label: G,
+  onOptionSelect: x,
+  options: g = [],
+  initialValue: y,
+  noMatchesMessage: j,
+  multiple: d = !1,
+  variant: J = "ghost",
+  color: b,
+  size: Q = "md",
+  disabled: A = !1,
+  ...W
+}) {
+  const [m, L] = v(y?.toString() || ""), [c, B] = v(!1), [X, M] = v(!1), [i, k] = v(-1), [w, T] = v(
+    null
+  ), [l, H] = v([]), C = N(null), I = N(null), $ = N(null), z = N([]), K = N(
+    y
+  ), [Y, Z] = v({}), P = b ? le[b] : "text-brand", _ = b ? de[b] : "bg-brand/10 text-brand hover:bg-brand/20";
+  S(() => {
+    const e = y?.toString() || "", t = K.current?.toString() || "";
+    e !== t && (K.current = y, L(e), e || (T(null), H([])));
+  }, [y]);
+  const s = F(() => {
+    if (!g || g.length === 0) return [];
+    if (!m.trim()) return g;
+    const e = m.toLowerCase();
+    return g.filter(
+      (t) => t.name.toLowerCase().includes(e) || t.value.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e)
+    );
+  }, [m, g]), O = f(() => {
+    if (!C.current) return;
+    const e = C.current.getBoundingClientRect(), t = 260, r = window.innerHeight - e.bottom, a = e.top, o = r < t && a > r;
+    Z({
+      position: "fixed",
+      ...o ? { bottom: window.innerHeight - e.top + 4 } : { top: e.bottom + 4 },
+      left: e.left,
+      width: e.width,
+      zIndex: 9999
+    });
+  }, []), D = f(() => {
+    A || (O(), k(-1), M(!1), B(!0));
+  }, [A, O]), u = f(() => {
+    M(!0);
+    const e = setTimeout(() => {
+      B(!1), M(!1), k(-1);
+    }, 100);
+    return () => clearTimeout(e);
+  }, []);
+  S(() => {
+    if (!c) return;
+    const e = (t) => {
+      C.current && !C.current.contains(t.target) && $.current && !$.current.contains(t.target) && u();
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [c, u]), S(() => {
+    if (!c) return;
+    const e = (t) => {
+      t.key === "Escape" && (u(), I.current?.focus());
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [c, u]), S(() => {
+    if (!c) return;
+    const e = () => O();
+    return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+    };
+  }, [c, O]), S(() => {
+    i >= 0 && z.current[i] && z.current[i]?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [i]);
+  const U = f(
+    (e) => {
+      if (!e.disabled)
+        if (d) {
+          const r = l.some(
+            (a) => a.value === e.value
+          ) ? l.filter((a) => a.value !== e.value) : [...l, e];
+          H(r), L(""), x?.(r), I.current?.focus();
+        } else
+          T(e), L(e.name), u(), x?.(e);
+    },
+    [d, l, x, u]
+  ), ee = f(
+    (e, t) => {
+      e.stopPropagation();
+      const r = l.filter(
+        (a) => a.value !== t.value
+      );
+      H(r), x?.(r), I.current?.focus();
+    },
+    [l, x]
+  ), te = f(
+    (e) => {
+      const t = e.target.value;
+      L(t), !d && w && t !== w.name && T(null), !c && t.trim() && D();
+    },
+    [d, w, c, D]
+  ), re = f(
+    (e) => {
+      if (!c) {
+        (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), D());
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), k((t) => {
+            let r = t < s.length - 1 ? t + 1 : 0;
+            for (; s[r]?.disabled && r !== t; )
+              r = r < s.length - 1 ? r + 1 : 0;
+            return r;
+          });
+          break;
+        case "ArrowUp":
+          e.preventDefault(), k((t) => {
+            let r = t > 0 ? t - 1 : s.length - 1;
+            for (; s[r]?.disabled && r !== t; )
+              r = r > 0 ? r - 1 : s.length - 1;
+            return r;
+          });
+          break;
+        case "Enter":
+          e.preventDefault(), i >= 0 && s[i] && !s[i].disabled && U(s[i]);
+          break;
+        case "Escape":
+          e.preventDefault(), u();
+          break;
+        case "Tab":
+          u();
+          break;
+      }
+    },
+    [
+      c,
+      s,
+      i,
+      U,
+      D,
+      u
+    ]
+  ), ne = F(
+    () => m.trim().length > 3 && g.length > 0 && s.length === 0 && (d ? l.length === 0 : !w) ? j || "No matches found" : void 0,
+    [
+      m,
+      g.length,
+      s.length,
+      d,
+      l.length,
+      w,
+      j
+    ]
+  ), se = f(
+    (e) => {
+      const t = m.trim();
+      if (!t) return /* @__PURE__ */ n("span", { children: e });
+      const r = e.toLowerCase(), a = t.toLowerCase(), o = [];
+      let h = 0, p = r.indexOf(a, h);
+      for (; p !== -1; )
+        p > h && o.push({
+          text: e.substring(h, p),
+          isMatch: !1
+        }), o.push({
+          text: e.substring(p, p + t.length),
+          isMatch: !0
+        }), h = p + t.length, p = r.indexOf(a, h);
+      return h < e.length && o.push({ text: e.substring(h), isMatch: !1 }), /* @__PURE__ */ n("span", { children: o.map(
+        (V, q) => V.isMatch ? /* @__PURE__ */ n("span", { className: E("font-semibold", P), children: V.text }, q) : /* @__PURE__ */ n("span", { children: V.text }, q)
+      ) });
+    },
+    [m, P]
+  ), ae = f(
+    (e) => d ? l.some((t) => t.value === e.value) : w?.value === e.value,
+    [d, l, w]
+  ), oe = c && s.length > 0 && ce(
+    /* @__PURE__ */ n(
+      "div",
+      {
+        "data-tucu": "select-menu",
+        ref: $,
+        role: "listbox",
+        tabIndex: -1,
+        "aria-activedescendant": i >= 0 ? `searcher-option-${i}` : void 0,
+        style: Y,
+        className: E(
+          "max-h-60 overflow-hidden rounded-xl border border-border bg-white shadow-large outline-hidden dark:bg-gray-800",
+          "transition ease-in duration-100",
+          X ? "opacity-0" : "opacity-100"
+        ),
+        children: /* @__PURE__ */ n("div", { className: "max-h-56 overflow-auto grid gap-0.5 p-1 min-[500px]:p-2", children: s.map((e, t) => {
+          const r = ae(e), a = t === i, o = e.disabled;
+          return /* @__PURE__ */ R(
+            "div",
+            {
+              "data-tucu": "select-option",
+              "data-selected": r ? "true" : void 0,
+              "data-highlighted": a ? "true" : void 0,
+              id: `searcher-option-${t}`,
+              ref: (h) => {
+                z.current[t] = h;
+              },
+              role: "option",
+              "aria-selected": r,
+              "aria-disabled": o,
+              onClick: () => !o && U(e),
+              onMouseEnter: () => !o && k(t),
+              className: E(
+                "flex items-center rounded-md px-3 py-2 text-sm transition",
+                o ? "cursor-not-allowed opacity-50 text-gray-400 dark:text-gray-600" : "cursor-pointer text-gray-900 dark:text-gray-100",
+                !o && r && "bg-gray-200/70 font-medium dark:bg-gray-600/60",
+                !o && !r && a && "bg-gray-300 dark:bg-gray-600",
+                !o && !r && !a && "hover:bg-gray-300 dark:hover:bg-gray-600"
+              ),
+              children: [
+                e.icon && /* @__PURE__ */ n("span", { className: "mr-2 shrink-0", children: e.icon }),
+                /* @__PURE__ */ R("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ n("span", { className: "block truncate", children: se(e.name) }),
+                  e.description && /* @__PURE__ */ n("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 truncate", children: e.description })
+                ] }),
+                r && /* @__PURE__ */ n(
+                  ue,
+                  {
+                    className: E("h-4 w-4 shrink-0 ml-2", P)
+                  }
+                )
+              ]
+            },
+            `${e.value}-${t}`
+          );
+        }) })
+      }
+    ),
+    document.body
+  );
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      "data-tucu": "input-searcher",
+      "data-color": b,
+      className: "relative",
+      ref: C,
+      children: [
+        /* @__PURE__ */ n(
+          ie,
+          {
+            ref: I,
+            label: G,
+            variant: J,
+            color: b,
+            size: Q,
+            disabled: A,
+            icon: /* @__PURE__ */ n(he, { className: "h-4 w-4 dark:text-white text-current" }),
+            value: m,
+            onChange: te,
+            error: ne,
+            onFocus: () => {
+              s.length > 0 && D();
+            },
+            onKeyDown: re,
+            role: "combobox",
+            "aria-expanded": c,
+            "aria-haspopup": "listbox",
+            "aria-autocomplete": "list",
+            ...W
+          }
+        ),
+        d && l.length > 0 && /* @__PURE__ */ n("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: l.map((e) => /* @__PURE__ */ R(
+          "span",
+          {
+            className: E(
+              "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md",
+              _
+            ),
+            children: [
+              e.icon && /* @__PURE__ */ n("span", { className: "shrink-0", children: e.icon }),
+              e.name,
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: (t) => ee(t, e),
+                  className: "rounded-full p-0.5 transition-opacity hover:opacity-80",
+                  "aria-label": `Remove ${e.name}`,
+                  children: /* @__PURE__ */ n(fe, { className: "h-3 w-3" })
+                }
+              )
+            ]
+          },
+          e.value
+        )) }),
+        oe
+      ]
+    }
+  );
+}
+export {
+  Ce as InputSearcher,
+  Ce as default
+};