@new-black/lyra 0.1.8 → 0.1.9

package/dist/lyra23.js

@@ -1,601 +1,544 @@
-import { j as e } from "./lyra53.js";
-import { createContext as ne, useState as P, useRef as E, useContext as re, useMemo as ae, useEffect as _ } from "react";
-import { Button as W, Label as oe } from "./lyra52.js";
-import { match as ie } from "./lyra275.js";
+import { j as s } from "./lyra53.js";
+import { useState as F, useCallback as q, useRef as G, useMemo as _, useEffect as U } from "react";
+import { Label as Q, Button as K } from "./lyra52.js";
 import "./lyra2.js";
-import { cx as ce } from "./lyra62.js";
+import { cx as $ } from "./lyra62.js";
 import "./lyra67.js";
-import { Text as k } from "./lyra42.js";
-import "./lyra68.js";
+import { Text as g } from "./lyra42.js";
 import "./lyra69.js";
 import "./lyra70.js";
-import { Button as D } from "./lyra8.js";
-import "./lyra72.js";
+import "./lyra68.js";
+import "./lyra8.js";
+import { buttonStyles as z } from "./lyra9.js";
 import "./lyra10.js";
 import "./lyra11.js";
-import "./lyra147.js";
+import "./lyra146.js";
 import "./lyra24.js";
-import { SvgIcon as $ } from "./lyra38.js";
+import { SvgIcon as S } from "./lyra38.js";
 import "./lyra15.js";
 import "./lyra17.js";
-import "./lyra18.js";
-import { sharedInputFieldWrapperStyles as T, sharedInputFieldStyles as H, sharedInputSizeStyles as q, sharedInputStyles as ue, sharedInputlabelStyles as de, sharedInputHintStyles as me } from "./lyra19.js";
+import "./lyra27.js";
+import { listBoxStyles as C } from "./lyra28.js";
+import { listBoxItemStyles as ss } from "./lyra147.js";
+import { Popover as es } from "./lyra29.js";
+import "./lyra31.js";
+import "./lyra144.js";
+import { sharedInputFieldWrapperStyles as V, sharedInputFieldStyles as W, sharedInputlabelStyles as ts, sharedInputHintStyles as rs, sharedInputStyles as os } from "./lyra19.js";
+import { TagGroup as ls, TagItem as as } from "./lyra148.js";
 import "./lyra20.js";
-import "./lyra148.js";
+import "./lyra145.js";
 import "./lyra22.js";
 import "./lyra25.js";
 import "./lyra26.js";
-import "./lyra27.js";
-import "./lyra73.js";
-import { Popover as A } from "./lyra29.js";
-import "./lyra31.js";
-import "./lyra149.js";
-import "./lyra75.js";
-import { Spinner as G } from "./lyra36.js";
+import "./lyra76.js";
+import { Spinner as is } from "./lyra36.js";
 import "./lyra39.js";
 import "./lyra77.js";
-import { TagGroup as pe } from "./lyra41.js";
+import "./lyra41.js";
 import "./lyra79.js";
-import { useSpinDelay as he } from "./lyra47.js";
+import { useSpinDelay as ns } from "./lyra47.js";
 import "./lyra48.js";
 import "./lyra57.js";
-import { fixedForwardRef as J } from "./lyra63.js";
-import { listBoxStyles as U, listBoxItemStyles as K } from "./lyra276.js";
-import { Combobox as w } from "./lyra277.js";
-import { twMerge as N } from "./lyra54.js";
-import { useLocale as X, useFilter as fe } from "./lyra51.js";
-const Y = ne({}), xe = (s) => {
-  const [l, t] = P(
-    s.value ?? s.defaultValue
-  ), [i, n] = P(s.initiallyOpen ?? !1);
-  return /* @__PURE__ */ e.jsx(
-    Y.Provider,
+import { Combobox as b } from "./lyra151.js";
+import { twMerge as M } from "./lyra54.js";
+import { useLocale as A, useFilter as cs } from "./lyra51.js";
+const ms = ({
+  itemLabelKey: e,
+  items: t,
+  onQueryChange: r
+}) => {
+  const [a, u] = F(""), { contains: c } = cs({ sensitivity: "base" }), p = _(() => r ? t : t.filter((m) => c(m[e], a ?? "")), [c, e, t, r, a]);
+  return U(() => {
+    r && (r == null || r(a));
+  }, [a]), {
+    filteredItems: p,
+    query: a,
+    setQuery: u
+  };
+}, J = (e) => $(
+  e === "small" && "min-h-[42px]",
+  e === "medium" && "min-h-[50px]",
+  e === "large" && "min-h-[58px]"
+), ds = ({
+  endSlot: e,
+  fullWidth: t,
+  isDisabled: r,
+  isInvalid: a,
+  open: u,
+  itemLabelKey: c,
+  placeholder: p,
+  size: m = "medium",
+  startSlot: j,
+  value: i,
+  onChange: o
+}) => {
+  const [d, n] = F(!1), [f, l] = F(!1);
+  i = i;
+  const v = (x) => {
+    (x.key === "Escape" || x.key === "Backspace") && (o == null || o(void 0));
+  };
+  return /* @__PURE__ */ s.jsxs(
+    b.Button,
     {
-      value: {
-        ...s,
-        popoverIsOpen: i,
-        setPopoverIsOpen: n,
-        internalValue: l,
-        setInternalValue: t
+      className: W({
+        fullWidth: t,
+        isDisabled: r,
+        isHovered: f,
+        isFocused: d,
+        isInvalid: a,
+        size: m,
+        className: $(J(m), "gap-2")
+      }),
+      onPointerEnter: () => l(!0),
+      onPointerLeave: () => l(!1),
+      onMouseEnter: () => l(!0),
+      onMouseLeave: () => l(!1),
+      onFocus: () => {
+        n(!0);
       },
-      children: s.children
+      onBlur: () => {
+        n(!1);
+      },
+      onKeyDown: v,
+      children: [
+        j,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: i != null && i[c] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: i == null ? void 0 : i[c] }) : /* @__PURE__ */ s.jsx(g, { color: "secondary", children: p }) }),
+        e,
+        /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
+          i ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
+            "div",
+            {
+              className: M(
+                z({
+                  size: "small",
+                  color: "monochrome",
+                  variant: "ghost",
+                  className: "p-1",
+                  isDisabled: r
+                })
+              ),
+              onClick: (x) => {
+                x.stopPropagation(), o == null || o(void 0);
+              },
+              children: /* @__PURE__ */ s.jsx(S, { name: "cross", className: "h-4 w-4" })
+            }
+          ) }) : null,
+          /* @__PURE__ */ s.jsx(
+            S,
+            {
+              name: "chevron-down",
+              className: $("h-4 w-4 transition duration-150", u && "rotate-180")
+            }
+          )
+        ] })
+      ]
     }
   );
-}, z = () => re(Y), Z = () => {
-  const {
-    itemLabelKey: s,
-    onQueryChange: l,
-    items: t
-    /* listToFilterOn */
-  } = z(), [i, n] = P(""), { contains: u } = fe({ sensitivity: "base" }), m = ae(() => l ? t : t.filter((j) => u(j[s], i ?? "")), [u, s, t, l, i]);
-  return _(() => {
-    l && (l == null || l(i));
-  }, [i]), {
-    filteredItems: m,
-    query: i,
-    setQuery: n
-  };
-}, xs = (s) => {
-  const { selectionMode: l = "single" } = s, i = ie({ ...s, selectionMode: l }).returnType().with({ selectionMode: "single" }, (n) => ({
-    ...n,
-    value: n.value,
-    defaultValue: n.defaultValue,
-    onChange: n.onChange
-  })).with({ selectionMode: "multiple" }, (n) => ({
-    ...n,
-    value: n.value,
-    defaultValue: n.defaultValue,
-    onChange: n.onChange
-  })).run();
-  return /* @__PURE__ */ e.jsx(xe, { ...i, children: /* @__PURE__ */ e.jsx(ve, {}) });
-}, Q = ({ item: s, state: l, render: t }) => {
-  const { itemLabelKey: i } = z(), n = s == null ? void 0 : s[i];
-  return t ? t(s, l) : /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
-    l.selected ? /* @__PURE__ */ e.jsx($, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ e.jsx("div", { className: "h-4 w-4" }),
-    n
-  ] });
-}, ve = () => {
-  const s = z(), { internalValue: l, value: t, defaultValue: i, name: n, selectionMode: u, onChange: m } = s;
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      w,
-      {
-        name: n,
-        value: (m ? t : l) ?? "",
-        defaultValue: i,
-        multiple: u === "multiple"
-      }
-    ),
-    u === "single" ? /* @__PURE__ */ e.jsx(be, {}) : null,
-    u === "multiple" ? /* @__PURE__ */ e.jsx(ye, {}) : null
+}, us = ({
+  endSlot: e,
+  fullWidth: t,
+  isDisabled: r,
+  isInvalid: a,
+  open: u,
+  itemLabelKey: c,
+  itemIdKey: p,
+  placeholder: m,
+  size: j = "medium",
+  label: i,
+  startSlot: o,
+  onChange: d,
+  value: n
+}) => {
+  const [f, l] = F(!1), [v, x] = F(!1);
+  return /* @__PURE__ */ s.jsxs(
+    b.Button,
+    {
+      className: W({
+        fullWidth: t,
+        isDisabled: r,
+        isHovered: v,
+        isFocused: f,
+        isInvalid: a,
+        size: j,
+        className: J(j)
+      }),
+      as: "div",
+      role: "button",
+      tabIndex: 0,
+      onPointerEnter: () => x(!0),
+      onPointerLeave: () => x(!1),
+      onMouseEnter: () => x(!0),
+      onMouseLeave: () => x(!1),
+      onFocus: () => {
+        l(!0);
+      },
+      onBlur: () => {
+        l(!1);
+      },
+      children: [
+        o,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: n && n.length ? /* @__PURE__ */ s.jsx(
+          ls,
+          {
+            "aria-label": i ?? "Selected items",
+            onRemove: (h) => {
+              n && d(n.filter((w) => !h.has(w[p])));
+            },
+            children: n.map((h) => /* @__PURE__ */ s.jsx(as, { ...h, children: h == null ? void 0 : h[c] }, h[p]))
+          }
+        ) : /* @__PURE__ */ s.jsx(g, { color: "secondary", children: m }) }),
+        e,
+        /* @__PURE__ */ s.jsx(
+          S,
+          {
+            name: "chevron-down",
+            className: $("h-4 w-4 min-w-[16px] transition duration-150", u && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}, X = ({ label: e, hint: t, isRequired: r }) => /* @__PURE__ */ s.jsxs("div", { className: $("flex items-center gap-3", e ? "justify-between" : "justify-end"), children: [
+  e ? /* @__PURE__ */ s.jsxs(
+    Q,
+    {
+      className: ts(),
+      style: { fontFamily: "var(--input-label-font-family)" },
+      children: [
+        e,
+        r && /* @__PURE__ */ s.jsx("span", { className: "text-danger", children: " *" })
+      ]
+    }
+  ) : null,
+  t ? /* @__PURE__ */ s.jsx(
+    "span",
+    {
+      className: rs(),
+      style: { fontFamily: "var(--input-hint-font-family)" },
+      children: t
+    }
+  ) : null
+] }), Y = ({ description: e, errorMessage: t }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+  e && /* @__PURE__ */ s.jsx(g, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: e }),
+  t && /* @__PURE__ */ s.jsx(g, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: t })
+] }), ps = ({
+  item: e,
+  state: t,
+  renderItem: r,
+  itemLabelKey: a
+}) => {
+  const u = e == null ? void 0 : e[a];
+  return r ? r(e, t) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
+    t.selected ? /* @__PURE__ */ s.jsx(S, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
+    u
   ] });
-}, ee = ({
-  query: s,
-  setQuery: l,
-  onQueryChange: t,
-  isLoading: i,
-  startSlot: n,
-  endSlot: u,
-  clearLabel: m = "Clear"
+}, xs = ({
+  onQueryChange: e,
+  isLoading: t,
+  startSlot: r,
+  endSlot: a,
+  clearLabel: u = "Clear",
+  query: c,
+  setQuery: p
 }) => {
-  const [j, g] = P(!1), [y, p] = P(!1), [h, I] = P(!1);
-  return _(() => {
+  const [m, j] = F(!1), [i, o] = F(!1), [d, n] = F(!1), f = ns(t ?? !1, { delay: 500, minDuration: 200 });
+  return U(() => {
     setTimeout(() => {
-      I(!0);
+      n(!0);
     }, 10);
-  }, []), /* @__PURE__ */ e.jsx(
+  }, []), /* @__PURE__ */ s.jsx(
     "div",
     {
-      className: T({
+      className: V({
         fullWidth: !0,
         className: "py-3 pe-[--list-box-item-padding-end] ps-[--list-box-item-padding-start]"
       }),
-      children: /* @__PURE__ */ e.jsxs(
+      children: /* @__PURE__ */ s.jsxs(
         "div",
         {
-          className: N(
-            H({
+          className: M(
+            W({
               fullWidth: !0,
-              isFocused: j,
-              isHovered: y,
+              isFocused: m,
+              isHovered: i,
               className: "px-2"
             })
           ),
-          onPointerEnter: () => p(!0),
-          onPointerLeave: () => p(!1),
-          onMouseEnter: () => p(!0),
-          onMouseLeave: () => p(!1),
+          onPointerEnter: () => o(!0),
+          onPointerLeave: () => o(!1),
+          onMouseEnter: () => o(!0),
+          onMouseLeave: () => o(!1),
           children: [
-            /* @__PURE__ */ e.jsx($, { name: "search", className: "-me-2 h-4 w-4" }),
-            n,
-            h ? /* @__PURE__ */ e.jsx(
-              w.Input,
+            /* @__PURE__ */ s.jsx(S, { name: "search", className: "-me-2 h-4 w-4" }),
+            r,
+            d ? /* @__PURE__ */ s.jsx(
+              b.Input,
               {
                 autoFocus: !0,
-                className: ue({ size: "small" }),
-                onChange: (x) => {
-                  l(x.target.value), t == null || t(x.target.value);
+                className: os({ size: "small" }),
+                onChange: (l) => {
+                  p(l.target.value ?? ""), e == null || e(l.target.value);
                 },
-                value: s ?? "",
-                onFocus: () => g(!0),
-                onBlur: () => g(!1)
+                value: c ?? "",
+                onFocus: () => j(!0),
+                onBlur: () => j(!1)
               }
             ) : null,
-            s && s.length ? /* @__PURE__ */ e.jsx(
-              D,
+            c && c.length ? /* @__PURE__ */ s.jsx(
+              K,
               {
-                variant: "ghost",
-                className: "mx-2",
-                size: "small",
-                tooltip: m,
+                "aria-label": u ?? "Clear",
+                className: M(
+                  z({
+                    size: "small",
+                    color: "monochrome",
+                    variant: "ghost"
+                  })
+                ),
                 excludeFromTabOrder: !0,
                 onPress: () => {
-                  l("");
+                  p("");
                 },
-                children: /* @__PURE__ */ e.jsx($, { name: "cross", className: "h-4 w-4" })
+                children: /* @__PURE__ */ s.jsx(S, { name: "cross", className: "h-4 w-4" })
               }
             ) : null,
-            u,
-            i ? /* @__PURE__ */ e.jsx(G, { className: "mx-2", size: "small" }) : null
+            a,
+            f ? /* @__PURE__ */ s.jsx(is, { className: "mx-2", size: "small" }) : null
           ]
         }
       )
     }
   );
-}, se = ({ label: s, hint: l, isRequired: t }) => /* @__PURE__ */ e.jsxs("div", { className: ce("flex items-center gap-3", s ? "justify-between" : "justify-end"), children: [
-  s ? /* @__PURE__ */ e.jsxs(
-    oe,
+}, Z = ({
+  direction: e,
+  disabledItemIdKeys: t,
+  itemIdKey: r,
+  itemLabelKey: a,
+  items: u,
+  open: c,
+  renderItem: p,
+  triggerRef: m,
+  isLoading: j,
+  onQueryChange: i
+}) => {
+  var f;
+  const { filteredItems: o, query: d, setQuery: n } = ms({
+    itemLabelKey: a,
+    items: u,
+    onQueryChange: i
+  });
+  return /* @__PURE__ */ s.jsxs(
+    es,
     {
-      className: de(),
-      style: { fontFamily: "var(--input-label-font-family)" },
+      className: "!max-h-96 pb-2",
+      isOpen: c,
+      triggerRef: m,
+      showPopoverInBottomDrawerOnSmallScreens: !0,
+      shouldUpdatePosition: !0,
+      style: {
+        "--trigger-width": ((f = m.current) == null ? void 0 : f.offsetWidth) + "px",
+        direction: e
+      },
       children: [
-        s,
-        t && /* @__PURE__ */ e.jsx("span", { className: "text-danger", children: " *" })
+        /* @__PURE__ */ s.jsx(
+          xs,
+          {
+            onQueryChange: i,
+            isLoading: j,
+            query: d,
+            setQuery: n
+          }
+        ),
+        o && o.length ? /* @__PURE__ */ s.jsx(b.Options, { static: !0, className: C(), children: o.map((l) => /* @__PURE__ */ s.jsx(
+          b.Option,
+          {
+            className: ({ active: v, selected: x, disabled: h }) => M(
+              ss({
+                active: v,
+                disabled: h,
+                selected: x
+              })
+            ),
+            value: l,
+            disabled: t == null ? void 0 : t.includes(l == null ? void 0 : l[r]),
+            children: (v) => /* @__PURE__ */ s.jsx(
+              ps,
+              {
+                item: l,
+                state: v,
+                renderItem: p,
+                itemLabelKey: a
+              }
+            )
+          },
+          l[r]
+        )) }) : null
       ]
     }
-  ) : null,
-  l ? /* @__PURE__ */ e.jsx(
-    "span",
+  );
+}, le = ({
+  isDisabled: e,
+  isRequired: t,
+  label: r,
+  hint: a,
+  description: u,
+  errorMessage: c,
+  isInvalid: p,
+  fullWidth: m = !0,
+  by: j,
+  defaultValue: i,
+  name: o,
+  onChange: d,
+  itemLabelKey: n,
+  itemIdKey: f,
+  value: l,
+  size: v = "medium",
+  startSlot: x,
+  items: h,
+  endSlot: w,
+  disabledItemIdKeys: P,
+  placeholder: H,
+  renderItem: E,
+  onQueryChange: L,
+  isLoading: k
+}) => {
+  const [y, O] = F(l ?? i), I = q(
+    (N) => {
+      O(N), d == null || d(N);
+    },
+    [d]
+  ), B = G(null), { direction: R } = A();
+  return /* @__PURE__ */ s.jsx(
+    b,
     {
-      className: me(),
-      style: { fontFamily: "var(--input-hint-font-family)" },
-      children: l
-    }
-  ) : null
-] }), te = ({ description: s, errorMessage: l }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-  s && /* @__PURE__ */ e.jsx(k, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: s }),
-  l && /* @__PURE__ */ e.jsx(k, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: l })
-] }), je = (s, l) => {
-  const t = z(), {
-    clearLabel: i,
-    label: n,
-    hint: u,
-    description: m,
-    errorMessage: j,
-    validationState: g,
-    placeholder: y,
-    isRequired: p,
-    isDisabled: h,
-    fullWidth: I,
-    setPopoverIsOpen: x,
-    size: L,
-    startSlot: b,
-    endSlot: C,
-    itemLabelKey: M,
-    onChange: r,
-    setInternalValue: o
-  } = t, f = r ? t.value : t.internalValue, [R, d] = P(!1), [O, F] = P(!1), V = (S) => {
-    S.key === "ArrowDown" || S.key === " " || S.key === "Enter" ? x(!0) : (S.key === "Backspace" || S.key === "Escape") && (r == null || r(void 0), o(void 0));
-  };
-  return /* @__PURE__ */ e.jsxs("div", { className: N(T({ fullWidth: I })), children: [
-    /* @__PURE__ */ e.jsx(se, { hint: u, isRequired: p, label: n }),
-    /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        className: N(
-          H({
-            fullWidth: I,
-            isDisabled: h,
-            isFocused: R,
-            isHovered: O,
-            size: L ?? "medium",
-            validationState: g,
-            className: "gap-1 px-0 py-0"
-          })
-        ),
-        onPointerEnter: () => F(!0),
-        onPointerLeave: () => F(!1),
-        onMouseEnter: () => F(!0),
-        onMouseLeave: () => F(!1),
-        ref: l,
-        children: [
-          /* @__PURE__ */ e.jsxs(
-            W,
-            {
-              isDisabled: h,
-              className: N(
-                q({
-                  size: L ?? "medium",
-                  className: "flex h-full w-full flex-grow items-center gap-3 text-start outline-none"
-                })
-              ),
-              onFocus: () => {
-                d(!0);
-              },
-              onBlur: () => {
-                d(!1);
-              },
-              onPress: () => {
-                x(!0);
-              },
-              onKeyDown: V,
-              children: [
-                b,
-                /* @__PURE__ */ e.jsx("div", { className: "grow", children: f ? f == null ? void 0 : f[M] : /* @__PURE__ */ e.jsx(k, { color: "secondary", children: y }) }),
-                C
-              ]
-            }
-          ),
-          f && /* @__PURE__ */ e.jsx(
-            D,
-            {
-              variant: "ghost",
-              isDisabled: h,
-              size: L,
-              tooltip: i ?? "Clear",
-              onPress: () => {
-                o(void 0), r == null || r(void 0);
-              },
-              excludeFromTabOrder: !0,
-              children: /* @__PURE__ */ e.jsx($, { name: "cross", className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ e.jsx(
-            W,
+      disabled: e,
+      name: o,
+      value: y ?? "",
+      onChange: I,
+      by: j,
+      children: ({ open: N, disabled: T, value: D }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: V({ fullWidth: m }), children: [
+          /* @__PURE__ */ s.jsx(X, { label: r, hint: a, isRequired: t }),
+          /* @__PURE__ */ s.jsx("div", { ref: B, children: /* @__PURE__ */ s.jsx(
+            ds,
             {
-              isDisabled: h,
-              className: N(
-                q({
-                  size: L ?? "medium",
-                  className: "h-full flex-grow outline-none"
-                })
-              ),
-              onPress: () => {
-                x(!0);
-              },
-              onFocus: () => {
-                d(!0);
-              },
-              onBlur: () => {
-                d(!1);
-              },
-              onKeyDown: V,
-              excludeFromTabOrder: !0,
-              children: /* @__PURE__ */ e.jsx($, { name: "chevron-down", className: "h-4 w-4" })
+              endSlot: w,
+              fullWidth: m,
+              isDisabled: T,
+              isInvalid: p,
+              open: N,
+              placeholder: H,
+              size: v,
+              startSlot: x,
+              value: D,
+              itemLabelKey: n,
+              itemIdKey: f,
+              onChange: I
             }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e.jsx(te, { description: m, errorMessage: j })
-  ] });
-}, ge = J(je), be = () => {
-  var S, c;
-  const s = z(), {
-    itemLabelKey: l,
-    itemIdKey: t,
-    renderItem: i,
-    disabledItemIdKeys: n,
-    allowCustomValue: u,
-    onChange: m,
-    popoverIsOpen: j,
-    setPopoverIsOpen: g,
-    setInternalValue: y,
-    searchInputClearLabel: p = "Clear",
-    isLoading: h,
-    searchInputEndSlot: I,
-    searchInputStartSlot: x,
-    allowCustomValueCreateLabel: L = (a) => `Create "${a}"`
-  } = s, b = m, C = s == null ? void 0 : s.internalValue, M = s == null ? void 0 : s.value, { filteredItems: r, query: o, setQuery: f } = Z(), R = E(null), d = E(null), { direction: O } = X(), F = (S = r == null ? void 0 : r.filter(
-    (a) => (a == null ? void 0 : a[l]) == o
-  )) == null ? void 0 : S.length, V = he(h ?? !1, { delay: 500, minDuration: 200 });
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(ge, { ref: d }),
-    /* @__PURE__ */ e.jsx(
-      A,
-      {
-        className: "pb-2",
-        isOpen: j,
-        onOpenChange: (a) => {
-          var v;
-          g(a), a && ((v = R.current) == null || v.focus());
-        },
-        triggerRef: d,
-        showPopoverInBottomDrawerOnSmallScreens: !0,
-        style: { "--trigger-width": ((c = d.current) == null ? void 0 : c.offsetWidth) + "px", direction: O },
-        children: /* @__PURE__ */ e.jsxs(
-          w,
+          ) }),
+          /* @__PURE__ */ s.jsx(Y, { description: u, errorMessage: c })
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          Z,
           {
-            nullable: !0,
-            onChange: (a) => {
-              a && (b == null || b(a), y(a), g(!1));
-            },
-            value: (m ? M : C) ?? "",
-            children: [
-              /* @__PURE__ */ e.jsx(
-                ee,
-                {
-                  query: o,
-                  setQuery: f,
-                  clearLabel: p,
-                  startSlot: x,
-                  endSlot: I
-                }
-              ),
-              r && (r != null && r.length) && !V || u && F === 0 && !V ? /* @__PURE__ */ e.jsxs(w.Options, { static: !0, className: U(), children: [
-                r.map((a) => /* @__PURE__ */ e.jsx(
-                  w.Option,
-                  {
-                    className: ({ active: v, selected: B, disabled: le }) => N(
-                      K({
-                        active: v,
-                        disabled: le,
-                        selected: B
-                      })
-                    ),
-                    value: a,
-                    disabled: n == null ? void 0 : n.includes(a[t]),
-                    children: (v) => /* @__PURE__ */ e.jsx(Q, { item: a, state: v, render: i })
-                  },
-                  a[t]
-                )),
-                o && o.length && u && F === 0 ? /* @__PURE__ */ e.jsx(
-                  w.Option,
-                  {
-                    value: {
-                      [t]: o,
-                      [l]: o
-                    },
-                    className: ({ active: a, selected: v, disabled: B }) => N(
-                      K({
-                        active: a,
-                        disabled: B,
-                        selected: v
-                      })
-                    ),
-                    children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
-                      /* @__PURE__ */ e.jsx("div", { className: "h-4 w-4" }),
-                      L(o)
-                    ] })
-                  }
-                ) : null
-              ] }) : null,
-              V ? /* @__PURE__ */ e.jsx("div", { className: "flex h-40 w-full items-center justify-center", children: /* @__PURE__ */ e.jsx(G, { size: "medium" }) }) : null
-            ]
+            triggerRef: B,
+            itemIdKey: f,
+            itemLabelKey: n,
+            items: h,
+            open: N,
+            renderItem: E,
+            disabledItemIdKeys: P,
+            direction: R,
+            onQueryChange: L,
+            isLoading: k
           }
         )
-      }
-    )
-  ] });
-}, Se = (s, l) => {
-  const t = z(), {
-    label: i,
-    hint: n,
-    description: u,
-    errorMessage: m,
-    validationState: j,
-    isRequired: g,
-    isDisabled: y,
-    fullWidth: p,
-    setPopoverIsOpen: h,
-    size: I,
-    startSlot: x,
-    endSlot: L,
-    itemLabelKey: b,
-    itemIdKey: C,
-    setInternalValue: M
-  } = t, r = t.addValueLabel ?? "Add value", o = t.internalValue, f = t.onChange, [R, d] = P(!1);
-  return /* @__PURE__ */ e.jsxs("div", { className: N(T({ fullWidth: p })), children: [
-    /* @__PURE__ */ e.jsx(se, { hint: n, isRequired: g, label: i }),
-    /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        className: N(
-          H({
-            fullWidth: p,
-            isDisabled: y,
-            isHovered: R,
-            size: I ?? "medium",
-            validationState: j,
-            className: "gap-2 px-2 py-1.5"
-          })
-        ),
-        ref: l,
-        onPointerEnter: () => d(!0),
-        onPointerLeave: () => d(!1),
-        onMouseEnter: () => d(!0),
-        onMouseLeave: () => d(!1),
-        children: [
-          x,
-          o && o.length ? /* @__PURE__ */ e.jsx(
-            pe,
-            {
-              itemIdKey: C,
-              itemLabelKey: b,
-              label: i ?? t["aria-label"],
-              isDisabled: y,
-              value: o,
-              onChange: (O) => {
-                M(O), f == null || f(O);
-              }
-            }
-          ) : null,
-          L,
-          o != null && o.length ? /* @__PURE__ */ e.jsx(
-            D,
-            {
-              variant: "ghost",
-              className: "p-1.5",
-              size: "small",
-              tooltip: r,
-              onPress: () => h(!0),
-              children: /* @__PURE__ */ e.jsx($, { name: "plus" })
-            }
-          ) : /* @__PURE__ */ e.jsx(
-            D,
+      ] })
+    }
+  );
+}, ae = ({
+  isDisabled: e,
+  isRequired: t,
+  label: r,
+  hint: a,
+  description: u,
+  errorMessage: c,
+  isInvalid: p,
+  fullWidth: m = !0,
+  by: j,
+  defaultValue: i,
+  name: o,
+  onChange: d,
+  itemLabelKey: n,
+  itemIdKey: f,
+  value: l,
+  size: v = "medium",
+  startSlot: x,
+  items: h,
+  endSlot: w,
+  disabledItemIdKeys: P,
+  placeholder: H,
+  renderItem: E,
+  onQueryChange: L,
+  isLoading: k
+}) => {
+  const [y, O] = F(l ?? i), I = q(
+    (N) => {
+      O(N), d == null || d(N);
+    },
+    [d]
+  ), B = G(null), { direction: R } = A();
+  return /* @__PURE__ */ s.jsx(
+    b,
+    {
+      disabled: e,
+      name: o,
+      value: y ?? [],
+      onChange: I,
+      by: j,
+      multiple: !0,
+      children: ({ open: N, disabled: T, value: D }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: V({ fullWidth: m }), children: [
+          /* @__PURE__ */ s.jsx(X, { label: r, hint: a, isRequired: t }),
+          /* @__PURE__ */ s.jsx("div", { ref: B, children: /* @__PURE__ */ s.jsx(
+            us,
             {
-              variant: "ghost",
-              size: "small",
-              className: "text-sm",
-              endIcon: /* @__PURE__ */ e.jsx($, { name: "plus" }),
-              onPress: () => h(!0),
-              children: r
+              endSlot: w,
+              fullWidth: m,
+              isDisabled: T,
+              isInvalid: p,
+              open: N,
+              placeholder: H,
+              size: v,
+              startSlot: x,
+              value: D,
+              itemLabelKey: n,
+              itemIdKey: f,
+              onChange: I
             }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e.jsx(te, { description: u, errorMessage: m })
-  ] });
-}, Ne = J(Se), ye = () => {
-  var V, S;
-  const s = z(), {
-    itemLabelKey: l,
-    itemIdKey: t,
-    renderItem: i,
-    disabledItemIdKeys: n,
-    allowCustomValue: u,
-    onChange: m,
-    popoverIsOpen: j,
-    setPopoverIsOpen: g,
-    setInternalValue: y,
-    searchInputClearLabel: p = "Clear",
-    isLoading: h,
-    searchInputEndSlot: I,
-    searchInputStartSlot: x,
-    allowCustomValueCreateLabel: L = (c) => `Create "${c}"`
-  } = s, b = m, C = s.internalValue, M = s.value, { filteredItems: r, query: o, setQuery: f } = Z(), R = E(null), d = E(null), { direction: O } = X(), F = (V = r == null ? void 0 : r.filter(
-    (c) => (c == null ? void 0 : c[l]) == o
-  )) == null ? void 0 : V.length;
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(Ne, { ref: d }),
-    /* @__PURE__ */ e.jsx(
-      A,
-      {
-        className: "pb-2",
-        isOpen: j,
-        onOpenChange: (c) => {
-          var a;
-          g(c), c && ((a = R.current) == null || a.focus());
-        },
-        triggerRef: d,
-        showPopoverInBottomDrawerOnSmallScreens: !0,
-        style: { "--trigger-width": ((S = d.current) == null ? void 0 : S.offsetWidth) + "px", direction: O },
-        children: /* @__PURE__ */ e.jsxs(
-          w,
+          ) }),
+          /* @__PURE__ */ s.jsx(Y, { description: u, errorMessage: c })
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          Z,
           {
-            value: (m ? M : C) ?? [],
-            onChange: (c) => {
-              b == null || b(c), y(c);
-            },
-            multiple: !0,
-            children: [
-              /* @__PURE__ */ e.jsx(
-                ee,
-                {
-                  query: o,
-                  setQuery: f,
-                  isLoading: h,
-                  clearLabel: p,
-                  startSlot: x,
-                  endSlot: I
-                }
-              ),
-              r && (r != null && r.length) || u && F === 0 ? /* @__PURE__ */ e.jsxs(w.Options, { static: !0, className: U(), children: [
-                r.map((c) => /* @__PURE__ */ e.jsx(
-                  w.Option,
-                  {
-                    className: ({ active: a, selected: v, disabled: B }) => N(
-                      K({
-                        active: a,
-                        disabled: B,
-                        selected: v
-                      })
-                    ),
-                    value: c,
-                    disabled: n == null ? void 0 : n.includes(c[t]),
-                    children: (a) => /* @__PURE__ */ e.jsx(Q, { item: c, state: a, render: i })
-                  },
-                  c[t]
-                )),
-                o && o.length && u && F === 0 ? /* @__PURE__ */ e.jsx(
-                  w.Option,
-                  {
-                    value: {
-                      [t]: o,
-                      [l]: o
-                    },
-                    className: ({ active: c, selected: a, disabled: v }) => N(
-                      K({
-                        active: c,
-                        disabled: v,
-                        selected: a
-                      })
-                    ),
-                    children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
-                      /* @__PURE__ */ e.jsx("div", { className: "h-4 w-4" }),
-                      L(o)
-                    ] })
-                  }
-                ) : null
-              ] }) : null
-            ]
+            triggerRef: B,
+            itemIdKey: f,
+            itemLabelKey: n,
+            items: h,
+            open: N,
+            renderItem: E,
+            disabledItemIdKeys: P,
+            direction: R,
+            onQueryChange: L,
+            isLoading: k
           }
         )
-      }
-    )
-  ] });
+      ] })
+    }
+  );
 };
 export {
-  xs as SearchListField
+  ae as MultiSearchListField,
+  le as SearchListField
 };