@pibit.ai/cure-design-system 0.5.11 → 0.6.0

package/dist/primitives/select/multi-select.js

@@ -1,23 +1,139 @@
-import { jsx as i, jsxs as N, Fragment as L } from "react/jsx-runtime";
-import { useCallback as F, useRef as E, useState as q, createContext as j, useContext as P } from "react";
-import { useFilter as C, FocusScope as V, useFocusManager as $ } from "react-aria";
-import { ComboBox as W, ListBox as G, Group as H, ComboBoxStateContext as U, Input as X } from "react-aria-components";
-import { Avatar as J } from "../avatar/avatar.js";
-import { HintText as O } from "../input/hint-text.js";
-import { Label as Q } from "../input/label.js";
-import { Popover as Y } from "./popover.js";
-import { sizes as Z } from "./select-shared.js";
-import { TagCloseX as M } from "../tags/base-components/tag-close-x.js";
-import { SelectItem as B } from "./select-item.js";
-import { cx as w } from "../../utils/cn.js";
-import { getPlatformShortcutLabel as I } from "../../utils/keyboard-shortcut.js";
-import { useResizeObserver as ee } from "../../hooks/use-resize-observer.js";
-import { useListData as te } from "../../node_modules/@react-stately/data/dist/useListData.js";
-const se = {
+import { jsx as i, jsxs as M, Fragment as de } from "react/jsx-runtime";
+import { useId as fe, useCallback as L, useMemo as Q, useRef as U, useState as se, createContext as pe, useContext as q, useLayoutEffect as he } from "react";
+import { useFilter as me, useInteractOutside as ge, FocusScope as we, useFocusManager as ye } from "react-aria";
+import { Minus as be, ChevronDown as xe, SearchMd as ve } from "@untitledui/icons";
+import { ComboBox as De, ListBox as Ne, ComboBoxStateContext as G, ButtonContext as Y, Group as ke, Input as Te } from "react-aria-components";
+import { useListData as Re } from "../../node_modules/react-stately/dist/private/data/useListData.js";
+import { Avatar as Fe } from "../avatar/avatar.js";
+import { HintText as Se } from "../input/hint-text.js";
+import { Label as Me } from "../input/label.js";
+import { Popover as Ae } from "./popover.js";
+import { sizes as Ee } from "./select-shared.js";
+import { TagCloseX as Pe } from "../tags/base-components/tag-close-x.js";
+import { SelectItem as ze } from "./select-item.js";
+import { cx as D } from "../../utils/cn.js";
+import { getPlatformShortcutLabel as Le } from "../../utils/keyboard-shortcut.js";
+import { useResizeObserver as le } from "../../hooks/use-resize-observer.js";
+import { SelectCheckbox as Ke } from "./select-checkbox.js";
+import { multiSelectItemMatchesFilter as ne, getMultiSelectSelectAllLabel as Oe, shouldClearMultiSelectFilterOnSelection as qe } from "./multi-select-utils.js";
+const _e = {
+  sm: "py-1.5 px-2 min-h-8 h-auto",
+  md: "py-1.5 px-3 min-h-9 h-auto",
+  lg: "py-2.5 px-3.5 min-h-11 h-auto"
+};
+function We(...o) {
+  return (b) => {
+    for (const u of o)
+      u != null && (typeof u == "function" ? u(b) : u.current = b);
+  };
+}
+const Z = {
   sm: "text-xs",
   md: "text-sm",
   lg: "text-md"
-}, K = j({
+}, ie = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm"
+};
+function je(o) {
+  return document.getElementById(o);
+}
+function Ve({
+  triggerRef: o,
+  popoverRef: b
+}) {
+  const u = q(G);
+  return ge({
+    ref: b,
+    isDisabled: !(u != null && u.isOpen),
+    onInteractOutside: (m) => {
+      var s;
+      (s = o.current) != null && s.contains(m.target) || u == null || u.close();
+    }
+  }), null;
+}
+function ae(o) {
+  const b = o.target;
+  b instanceof Element && b.closest("input, textarea, [contenteditable='true']") || o.preventDefault();
+}
+const He = ({
+  value: o,
+  placeholder: b,
+  listboxId: u,
+  onChange: m
+}) => {
+  const s = q(G), x = (e) => {
+    e.stopPropagation(), s == null || s.open();
+  }, k = (e) => {
+    e.stopPropagation(), ae(e);
+  }, f = (e) => {
+    e.stopPropagation();
+  }, l = (e) => {
+    var r;
+    const a = je(u), g = a ? Array.from(a.querySelectorAll('[role="option"]')) : [];
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), g.length > 0 && ((a == null ? void 0 : a.querySelector(
+          '[role="option"][data-focused="true"]'
+        )) ?? g[0]).focus();
+        return;
+      case "ArrowUp":
+        e.preventDefault(), g.length > 0 && g[g.length - 1].focus();
+        return;
+      case "Enter":
+        if (((r = document.activeElement) == null ? void 0 : r.getAttribute("role")) === "option")
+          return;
+        g.length > 0 && (e.preventDefault(), ((a == null ? void 0 : a.querySelector(
+          '[role="option"][data-focused="true"]'
+        )) ?? g[0]).click());
+        return;
+      case "Escape":
+        e.preventDefault(), s == null || s.close();
+        return;
+      default:
+        (e.key.length === 1 || e.key === "Backspace" || e.key === "Delete" || e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End" || e.key === "Tab") && e.stopPropagation();
+    }
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-nested-select-overlay": !0,
+      className: "sticky top-0 z-10 border-b border-tertiary bg-primary p-1.5",
+      onMouseDown: k,
+      onPointerDown: f,
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ M(
+        "div",
+        {
+          className: "flex h-8 items-center gap-2 rounded-lg bg-secondary px-2",
+          onMouseDown: k,
+          children: [
+            /* @__PURE__ */ i(ve, { "aria-hidden": !0, className: "size-4 shrink-0 text-fg-quaternary" }),
+            /* @__PURE__ */ i(
+              "input",
+              {
+                type: "text",
+                role: "combobox",
+                "aria-autocomplete": "list",
+                "aria-expanded": (s == null ? void 0 : s.isOpen) ?? !1,
+                "aria-controls": u,
+                value: o,
+                onChange: m,
+                onMouseDown: x,
+                onKeyDown: l,
+                onFocus: () => s == null ? void 0 : s.open(),
+                placeholder: b,
+                className: "w-full bg-transparent text-xs text-primary outline-none placeholder:text-placeholder_subtle",
+                autoFocus: !1
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, oe = pe({
   size: "sm",
   selectedKeys: [],
   selectedItems: {},
@@ -26,281 +142,559 @@ const se = {
   onInputChange: () => {
   },
   showAvatar: !0,
-  chipClassName: void 0
-}), re = ({
-  items: f,
+  chipClassName: void 0,
+  searchable: !1
+}), $e = ({
+  items: o,
   children: b,
-  size: h = "sm",
-  selectedItems: l,
-  onItemCleared: c,
-  onItemInserted: t,
-  shortcut: s,
-  placeholder: d = "Search",
-  showAvatar: p = !0,
-  readOnly: g = !1,
-  chipClassName: k,
+  size: u = "sm",
+  selectedItems: m,
+  onItemCleared: s,
+  onItemInserted: x,
+  onBulkSelectionChange: k,
+  shortcut: f,
+  placeholder: l = "Search",
+  showAvatar: e = !0,
+  readOnly: a = !1,
+  chipClassName: g,
+  searchable: r = !1,
+  searchPlaceholder: F = "Search...",
+  showSelectAll: T = !1,
+  endAdornment: _,
+  description: K,
+  onOpenChange: c,
   // Omit these props to avoid conflicts with the `Select` component
-  name: R,
-  className: T,
-  ...n
+  name: p,
+  className: S,
+  ...h
 }) => {
-  var D;
-  const { contains: x } = C({ sensitivity: "base" }), u = (D = l == null ? void 0 : l.items) != null && D.length ? l.items.map((r) => r.id) : [], e = F(
-    (r, a) => !u.includes(r.id) && x(r.label || r.supportingText || "", a),
-    [x, u]
-  ), o = te({
-    initialItems: f,
-    filter: e
-  }), v = F(
-    (r) => {
-      const a = r.values().next().value;
-      a && (l.remove(a), c == null || c(a));
+  var ee;
+  const P = fe(), { contains: O } = me({ sensitivity: "base" }), y = (ee = m == null ? void 0 : m.items) != null && ee.length ? m.items.map((n) => n.id) : [], W = L(
+    (n, d) => {
+      const $ = ne(
+        n,
+        d,
+        O
+      );
+      return (T || !y.includes(n.id)) && $;
     },
-    [l, c]
-  ), S = (r) => {
-    if (!r)
+    [O, y, T]
+  ), w = Re({
+    initialItems: o,
+    filter: W
+  }), E = !!(r && w.filterText.trim()), N = Q(() => o != null && o.length ? E ? o.filter(
+    (n) => ne(n, w.filterText, O)
+  ) : o : [], [o, E, w.filterText, O]), z = Q(() => {
+    if (N.length === 0) return "unselected";
+    const n = N.filter(
+      (d) => y.includes(d.id)
+    ).length;
+    return n === 0 ? "unselected" : n === N.length ? "selected" : "indeterminate";
+  }, [N, y]), j = L(() => {
+    const n = z !== "selected", d = N.map((v) => v.id), $ = new Set(d.map(String)), ue = n ? [.../* @__PURE__ */ new Set([...y, ...d])] : y.filter((v) => !$.has(String(v))), te = N.filter(
+      (v) => !y.includes(v.id)
+    ), re = N.filter((v) => y.includes(v.id)).map((v) => v.id);
+    if (n && te.length > 0 ? m.append(...te) : !n && re.length > 0 && m.remove(...re), k) {
+      k(ue);
       return;
-    const a = o.getItem(r);
-    a && (u.includes(r) || (l.append(a), t == null || t(r)), o.setFilterText(""));
-  }, y = (r) => {
-    g || o.setFilterText(r);
-  }, m = E(null), [_, A] = q(""), z = F(() => {
-    var a;
-    if (!m.current) return;
-    let r = (a = m.current) == null ? void 0 : a.getBoundingClientRect();
-    A(r.width + "px");
-  }, [m, A]);
-  return ee({
-    ref: m,
-    onResize: z,
+    }
+    if (n) {
+      for (const v of N)
+        y.includes(v.id) || x == null || x(v.id);
+      return;
+    }
+    for (const v of N)
+      y.includes(v.id) && (s == null || s(v.id));
+  }, [
+    z,
+    N,
+    y,
+    m,
+    k,
+    x,
+    s
+  ]), t = L(
+    (n) => {
+      const d = n.values().next().value;
+      d && (m.remove(d), s == null || s(d));
+    },
+    [m, s]
+  ), R = (n) => {
+    if (!n)
+      return;
+    const d = w.getItem(n);
+    d && (T && y.includes(n) ? (m.remove(n), s == null || s(n)) : y.includes(n) || (m.append(d), x == null || x(n)), qe(r) && w.setFilterText(""));
+  }, X = L(
+    (n) => {
+      !n && r && w.setFilterText(""), c == null || c(n);
+    },
+    [w, c, r]
+  ), V = (n) => {
+    a || w.setFilterText(n);
+  }, A = U(null), H = U(null), [ce, C] = se(0), J = L(() => {
+    var d;
+    if (!A.current) return;
+    let n = (d = A.current) == null ? void 0 : d.getBoundingClientRect();
+    C(n.width);
+  }, [A, C]);
+  le({
+    ref: A,
+    onResize: J,
     box: "border-box"
-  }), /* @__PURE__ */ i(
-    K.Provider,
+  });
+  const I = T && !!(o != null && o.length) && (!E || N.length > 0), B = Oe(E);
+  return /* @__PURE__ */ i(
+    oe.Provider,
     {
       value: {
-        size: h,
-        selectedKeys: u,
-        selectedItems: l,
-        onInputChange: y,
-        onRemove: v,
-        showAvatar: p,
-        chipClassName: k
+        size: u,
+        selectedKeys: y,
+        selectedItems: m,
+        onInputChange: V,
+        onRemove: t,
+        showAvatar: e,
+        chipClassName: g,
+        searchable: r
       },
       children: /* @__PURE__ */ i(
-        W,
+        De,
         {
           allowsEmptyCollection: !0,
           allowsCustomValue: !1,
-          menuTrigger: "focus",
-          items: o.items,
-          onInputChange: y,
-          inputValue: o.filterText,
+          menuTrigger: r || a ? "manual" : "focus",
+          items: w.items,
+          onInputChange: r ? void 0 : V,
+          inputValue: r ? "" : w.filterText,
           selectedKey: null,
-          onSelectionChange: S,
-          ...n,
-          children: (r) => {
-            var a;
-            return /* @__PURE__ */ N("div", { className: "flex flex-col gap-1.5", children: [
-              n.label && /* @__PURE__ */ i(Q, { isRequired: r.isRequired, tooltip: n.tooltip, children: n.label }),
-              /* @__PURE__ */ i(
-                ae,
-                {
-                  size: h,
-                  shortcut: s,
-                  ref: m,
-                  placeholder: d,
-                  readOnly: g,
-                  onFocus: z,
-                  onPointerEnter: z
-                }
-              ),
-              ((a = o.items) == null ? void 0 : a.length) > 0 && /* @__PURE__ */ i(
-                Y,
-                {
-                  size: "md",
-                  triggerRef: m,
-                  style: { width: _ },
-                  className: n == null ? void 0 : n.popoverClassName,
-                  children: /* @__PURE__ */ i(
-                    G,
+          onSelectionChange: R,
+          onOpenChange: X,
+          ...h,
+          children: (n) => /* @__PURE__ */ M("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ i(
+              Ve,
+              {
+                triggerRef: A,
+                popoverRef: H
+              }
+            ),
+            h.label && /* @__PURE__ */ i(
+              Me,
+              {
+                isRequired: n.isRequired,
+                tooltip: h.tooltip,
+                className: ie[u],
+                children: h.label
+              }
+            ),
+            K && /* @__PURE__ */ i(
+              "p",
+              {
+                className: D(
+                  "text-tertiary",
+                  ie[u],
+                  "-mt-0.5 leading-[18px]"
+                ),
+                children: K
+              }
+            ),
+            /* @__PURE__ */ i(
+              Ge,
+              {
+                size: u,
+                shortcut: f,
+                ref: A,
+                placeholder: l,
+                readOnly: a,
+                isInvalid: n.isInvalid,
+                endAdornment: _,
+                onFocus: J,
+                onPointerEnter: J
+              }
+            ),
+            (r || I || w.items.length > 0) && /* @__PURE__ */ M(
+              Ae,
+              {
+                size: "md",
+                ref: H,
+                triggerRef: A,
+                className: D("flex flex-col", h == null ? void 0 : h.popoverClassName),
+                style: { width: Math.max(ce, 40) },
+                onMouseDown: (d) => {
+                  d.stopPropagation(), ae(d);
+                },
+                onPointerDown: (d) => d.stopPropagation(),
+                children: [
+                  r && /* @__PURE__ */ i(
+                    He,
                     {
-                      selectionMode: "multiple",
-                      className: "size-full outline-hidden",
-                      children: b
+                      listboxId: P,
+                      value: w.filterText,
+                      placeholder: F,
+                      onChange: (d) => w.setFilterText(d.target.value)
                     }
-                  )
-                }
-              ),
-              n.hint && /* @__PURE__ */ i(O, { isInvalid: r.isInvalid, children: n.hint })
-            ] });
-          }
+                  ),
+                  I && /* @__PURE__ */ M(
+                    "div",
+                    {
+                      className: D(
+                        "flex shrink-0 items-center gap-2 border-b border-secondary px-3 py-2.5",
+                        "cursor-pointer hover:bg-secondary_subtle transition-colors",
+                        h.isDisabled && "cursor-not-allowed opacity-50"
+                      ),
+                      onClick: h.isDisabled ? void 0 : j,
+                      children: [
+                        z === "indeterminate" ? /* @__PURE__ */ i(
+                          "span",
+                          {
+                            className: D(
+                              "flex size-4 shrink-0 items-center justify-center rounded ring-1 ring-inset",
+                              "bg-brand-solid ring-bg-brand-solid text-fg-white"
+                            ),
+                            "aria-hidden": !0,
+                            children: /* @__PURE__ */ i(be, { className: "size-3 stroke-[2.5]" })
+                          }
+                        ) : /* @__PURE__ */ i(
+                          Ke,
+                          {
+                            size: u === "lg" ? "md" : "sm",
+                            checked: z === "selected",
+                            onCheckedChange: j,
+                            onClick: (d) => d.stopPropagation(),
+                            disabled: h.isDisabled,
+                            "aria-label": B
+                          }
+                        ),
+                        /* @__PURE__ */ i(
+                          "span",
+                          {
+                            className: D("font-medium text-primary", Z[u]),
+                            children: B
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ M("div", { className: "flex-1 overflow-y-auto", children: [
+                    w.items.length === 0 && r && E && /* @__PURE__ */ i("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ i("p", { className: D("text-tertiary", Z[u]), children: "No results" }) }),
+                    /* @__PURE__ */ i(
+                      Ne,
+                      {
+                        id: P,
+                        selectionMode: "multiple",
+                        selectedKeys: T ? new Set(y) : void 0,
+                        className: D(
+                          "size-full outline-hidden",
+                          w.items.length === 0 && "hidden"
+                        ),
+                        children: b
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            h.hint && /* @__PURE__ */ i(Se, { isInvalid: n.isInvalid, children: h.hint })
+          ] })
         }
       )
     }
   );
-}, ie = ({
-  isDisabled: f,
+}, Ue = ({
+  isDisabled: o,
   shortcut: b,
-  shortcutClassName: h,
-  placeholder: l,
-  readOnly: c = !1
+  shortcutClassName: u,
+  placeholder: m,
+  readOnly: s = !1,
+  isFocusWithin: x,
+  inputRef: k
 }) => {
-  var T, n, x, u;
-  const t = $(), s = P(K), d = P(U), p = (e) => {
-    if (!(!(e.currentTarget.selectionStart === 0 && e.currentTarget.selectionEnd === 0) && e.currentTarget.value !== ""))
-      switch (e.key) {
+  var w, E, N, z, j;
+  const f = ye(), l = q(oe), e = q(G), a = x || !!(e != null && e.isOpen), g = U(null), [r, F] = se(!1), T = (w = l == null ? void 0 : l.selectedItems) == null ? void 0 : w.items, _ = (T == null ? void 0 : T.map((t) => t.id).join("\0")) ?? "", K = (e == null ? void 0 : e.inputValue) ?? "", c = L(() => {
+    const t = g.current;
+    if (!t || a) {
+      F(!1);
+      return;
+    }
+    const R = t.scrollWidth > t.clientWidth + 0.5;
+    F(
+      R && t.scrollLeft + t.clientWidth < t.scrollWidth - 1
+    );
+  }, [a]);
+  le({
+    ref: g,
+    onResize: c,
+    box: "border-box"
+  }), he(() => {
+    c();
+  }, [
+    c,
+    _,
+    a,
+    K
+  ]);
+  const p = (t) => {
+    var R;
+    t.preventDefault(), (R = k.current) == null || R.focus({ preventScroll: !0 });
+  }, S = (t) => {
+    if (!(!(t.currentTarget.selectionStart === 0 && t.currentTarget.selectionEnd === 0) && t.currentTarget.value !== ""))
+      switch (t.key) {
         case "Backspace":
         case "ArrowLeft":
-          t == null || t.focusPrevious({ wrap: !1, tabbable: !1 });
+          f == null || f.focusPrevious({ wrap: !1, tabbable: !1 });
           break;
         case "ArrowRight":
-          t == null || t.focusNext({ wrap: !1, tabbable: !1 });
+          f == null || f.focusNext({ wrap: !1, tabbable: !1 });
           break;
       }
-  }, g = (e) => {
-    d && !d.isOpen && d.open();
-  }, k = (e, o) => {
-    var S, y, m;
-    if (e.key === "Tab")
+  }, h = l == null ? void 0 : l.searchable, P = (t) => {
+    t.stopPropagation(), e && !e.isOpen && e.open();
+  }, O = () => {
+    h && e && !e.isOpen && e.open();
+  }, y = (t, R) => {
+    var V, A, H;
+    if (t.key === "Tab")
       return;
-    e.preventDefault();
-    const v = ((m = (y = (S = s == null ? void 0 : s.selectedItems) == null ? void 0 : S.items) == null ? void 0 : y[0]) == null ? void 0 : m.id) === o;
-    switch (e.key) {
+    t.preventDefault();
+    const X = ((H = (A = (V = l == null ? void 0 : l.selectedItems) == null ? void 0 : V.items) == null ? void 0 : A[0]) == null ? void 0 : H.id) === R;
+    switch (t.key) {
       case " ":
       case "Enter":
       case "Backspace":
-        v ? t == null || t.focusNext({ wrap: !1, tabbable: !1 }) : t == null || t.focusPrevious({ wrap: !1, tabbable: !1 }), s.onRemove(/* @__PURE__ */ new Set([o]));
+        X ? f == null || f.focusNext({ wrap: !1, tabbable: !1 }) : f == null || f.focusPrevious({ wrap: !1, tabbable: !1 }), l.onRemove(/* @__PURE__ */ new Set([R]));
         break;
       case "ArrowLeft":
-        t == null || t.focusPrevious({ wrap: !1, tabbable: !1 });
+        f == null || f.focusPrevious({ wrap: !1, tabbable: !1 });
         break;
       case "ArrowRight":
-        t == null || t.focusNext({ wrap: !1, tabbable: !1 });
+        f == null || f.focusNext({ wrap: !1, tabbable: !1 });
         break;
       case "Escape":
-        d == null || d.close();
+        e == null || e.close();
         break;
     }
-  }, R = ((n = (T = s == null ? void 0 : s.selectedItems) == null ? void 0 : T.items) == null ? void 0 : n.length) === 0;
-  return /* @__PURE__ */ N("div", { className: "relative flex w-full flex-1 flex-row flex-wrap items-center justify-start gap-1.5", children: [
-    !R && ((u = (x = s == null ? void 0 : s.selectedItems) == null ? void 0 : x.items) == null ? void 0 : u.map((e) => /* @__PURE__ */ N(
-      "span",
-      {
-        className: w(
-          "flex items-center rounded-md bg-primary py-0.5 pr-1 pl-1.25 ring-1 ring-[var(--color-gray-100)] ring-inset",
-          s == null ? void 0 : s.chipClassName
-        ),
-        children: [
-          (s == null ? void 0 : s.showAvatar) && /* @__PURE__ */ i(
-            J,
-            {
-              size: "sm",
-              alt: e == null ? void 0 : e.label,
-              src: e == null ? void 0 : e.avatarUrl,
-              fallback: e == null ? void 0 : e.initials
-            }
-          ),
-          /* @__PURE__ */ i("p", { className: "ml-1.25 truncate text-sm font-medium whitespace-nowrap text-secondary select-none", children: e == null ? void 0 : e.label }),
-          /* @__PURE__ */ i(
-            M,
-            {
-              size: "md",
-              isDisabled: f,
-              className: "ml-0.75",
-              onKeyDown: (o) => k(o, e.id),
-              onPress: () => s.onRemove(/* @__PURE__ */ new Set([e.id]))
-            }
-          )
-        ]
-      },
-      e.id
-    ))),
-    /* @__PURE__ */ N(
+  }, W = ((N = (E = l == null ? void 0 : l.selectedItems) == null ? void 0 : E.items) == null ? void 0 : N.length) === 0;
+  return /* @__PURE__ */ M("div", { className: "relative min-w-0 w-full flex-1", children: [
+    /* @__PURE__ */ M(
       "div",
       {
-        className: w(
-          "relative flex min-w-[20%] flex-1 flex-row items-center",
-          !R && "ml-0.5",
-          b && "min-w-[30%]"
+        ref: g,
+        onScroll: a ? void 0 : c,
+        className: D(
+          "flex w-full min-w-0 gap-1.5",
+          a ? D(
+            "flex-wrap items-start overflow-y-auto scrollbar-hide"
+            //   multiSelectExpandedMaxHeight[controlSize],
+          ) : "flex-nowrap items-center overflow-x-auto overflow-y-hidden scrollbar-hide"
         ),
         children: [
-          /* @__PURE__ */ i(
-            X,
+          /* @__PURE__ */ i(Y.Provider, { value: null, children: !W && ((j = (z = l == null ? void 0 : l.selectedItems) == null ? void 0 : z.items) == null ? void 0 : j.map((t) => /* @__PURE__ */ M(
+            "span",
             {
-              placeholder: l,
-              onKeyDown: p,
-              onMouseDown: g,
-              readOnly: c,
-              className: w(
-                "w-full flex-[1_0_0] appearance-none bg-transparent text-ellipsis text-primary caret-alpha-black/90 outline-none placeholder:text-placeholder_subtle focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled",
-                c && "cursor-default",
-                se[(s == null ? void 0 : s.size) || "sm"]
-              )
-            }
-          ),
-          b && /* @__PURE__ */ i(
+              "data-multiselect-chip": !0,
+              className: D(
+                "flex items-center rounded-md bg-primary py-0.5 pr-1 pl-1.25 ring-1 ring-[var(--color-gray-100)] ring-inset",
+                !a && "shrink-0",
+                l == null ? void 0 : l.chipClassName
+              ),
+              children: [
+                /* @__PURE__ */ M(
+                  "span",
+                  {
+                    className: "flex min-w-0 items-center",
+                    onMouseDown: p,
+                    children: [
+                      (l == null ? void 0 : l.showAvatar) && /* @__PURE__ */ i(
+                        Fe,
+                        {
+                          size: "xxs",
+                          alt: t == null ? void 0 : t.label,
+                          src: t == null ? void 0 : t.avatarUrl,
+                          initials: t == null ? void 0 : t.initials
+                        }
+                      ),
+                      /* @__PURE__ */ i("p", { className: "ml-1.25 truncate text-xs font-medium whitespace-nowrap text-secondary select-none", children: t == null ? void 0 : t.label })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  Pe,
+                  {
+                    size: "md",
+                    isDisabled: o,
+                    preventFocusOnPress: !a,
+                    className: "ml-0.75",
+                    onKeyDown: (R) => y(R, t.id),
+                    onPress: () => l.onRemove(/* @__PURE__ */ new Set([t.id]))
+                  }
+                )
+              ]
+            },
+            t.id
+          ))) }),
+          /* @__PURE__ */ M(
             "div",
             {
-              "aria-hidden": "true",
-              className: w(
-                "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
-                h
+              className: D(
+                "relative flex flex-1 flex-row items-center",
+                a ? "min-w-[20%]" : "min-w-0",
+                !W && "ml-0.5",
+                b && "min-w-[30%]"
               ),
-              children: /* @__PURE__ */ i(
-                "span",
-                {
-                  className: w(
-                    "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
-                    f && "bg-transparent text-disabled"
-                  ),
-                  children: I(["meta"], "K")
-                }
-              )
+              children: [
+                /* @__PURE__ */ i(
+                  Te,
+                  {
+                    ref: k,
+                    placeholder: W ? m : void 0,
+                    onKeyDown: S,
+                    onMouseDown: P,
+                    onFocus: O,
+                    readOnly: s || h,
+                    className: D(
+                      "w-full min-w-0 flex-[1_0_0] appearance-none bg-transparent text-ellipsis text-primary caret-alpha-black/90 outline-none placeholder:text-placeholder_subtle focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled",
+                      s && "cursor-default",
+                      Z[(l == null ? void 0 : l.size) || "sm"]
+                    )
+                  }
+                ),
+                b && /* @__PURE__ */ i(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: D(
+                      "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+                      u
+                    ),
+                    children: /* @__PURE__ */ i(
+                      "span",
+                      {
+                        className: D(
+                          "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                          o && "bg-transparent text-disabled"
+                        ),
+                        children: Le(["meta"], "K")
+                      }
+                    )
+                  }
+                )
+              ]
             }
           )
         ]
       }
+    ),
+    !a && r && /* @__PURE__ */ i(
+      "div",
+      {
+        "aria-hidden": !0,
+        className: "pointer-events-none absolute inset-y-0 right-0 z-[8] w-6 bg-linear-to-r from-transparent via-primary/40 to-primary"
+      }
     )
   ] });
-}, ae = ({
-  size: f,
+}, Ge = ({
+  size: o,
   shortcut: b,
-  placeholder: h,
-  shortcutClassName: l,
-  placeholderIcon: c = null,
-  readOnly: t = !1,
-  // Omit this prop to avoid invalid HTML attribute warning
-  isDisabled: s,
-  ...d
-}) => /* @__PURE__ */ i(
-  H,
-  {
-    ...d,
-    className: ({ isFocusWithin: p, isDisabled: g }) => w(
-      "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-[var(--color-border-secondary)] outline-hidden transition duration-100 ease-linear ring-inset",
-      g && "cursor-not-allowed bg-disabled_subtle",
-      p && "ring-2 ring-brand",
-      Z[f].root
-    ),
-    children: ({ isDisabled: p }) => /* @__PURE__ */ N(L, { children: [
-      c && /* @__PURE__ */ i(c, { className: "pointer-events-none size-5 text-fg-quaternary" }),
-      /* @__PURE__ */ i(V, { contain: !1, autoFocus: !1, restoreFocus: !1, children: /* @__PURE__ */ i(
-        ie,
-        {
-          isDisabled: p,
-          size: f,
-          shortcut: b,
-          shortcutClassName: l,
-          placeholder: h,
-          readOnly: t
+  placeholder: u,
+  shortcutClassName: m,
+  placeholderIcon: s = null,
+  readOnly: x = !1,
+  isDisabled: k,
+  isInvalid: f,
+  ref: l,
+  endAdornment: e,
+  ...a
+}) => {
+  const g = U(null), r = q(G), F = q(Y), T = F && typeof F == "object" && "ref" in F ? F.ref : void 0, _ = Q(
+    () => We(l ?? void 0, T ?? void 0),
+    [l, T]
+  ), K = L(
+    (c) => {
+      var S, h;
+      if (k)
+        return;
+      const p = c.target;
+      if (p instanceof Element && !p.closest("button")) {
+        if (x) {
+          if (p.closest("input") || p.closest("[data-multiselect-chip]"))
+            return;
+          c.preventDefault(), r != null && r.isOpen ? (r.close(), (S = g.current) == null || S.blur()) : r == null || r.open();
+          return;
         }
-      ) })
-    ] })
-  }
-), le = re;
-le.Item = B;
+        p.closest("input") || (c.preventDefault(), (h = g.current) == null || h.focus({ preventScroll: !0 }));
+      }
+    },
+    [k, x, r]
+  );
+  return /* @__PURE__ */ i(
+    ke,
+    {
+      ...a,
+      ref: _,
+      onMouseDown: (c) => {
+        var p;
+        c.stopPropagation(), (p = a.onMouseDown) == null || p.call(a, c);
+      },
+      onPointerDown: (c) => {
+        var p;
+        c.stopPropagation(), (p = a.onPointerDown) == null || p.call(a, c);
+      },
+      onMouseDownCapture: (c) => {
+        var p;
+        (p = a.onMouseDownCapture) == null || p.call(a, c), K(c);
+      },
+      className: ({ isFocusWithin: c, isDisabled: p }) => {
+        const S = c || !!(r != null && r.isOpen);
+        return D(
+          "relative flex w-full gap-2 rounded-md bg-primary ring-1 outline-hidden duration-100 ease-linear ring-inset",
+          f ? "ring-error" : c ? "ring-brand" : "ring-[var(--color-border-secondary)]",
+          p && "cursor-not-allowed bg-disabled_subtle",
+          S ? "items-start" : "items-center",
+          S ? _e[o] : Ee[o].root
+        );
+      },
+      children: ({ isDisabled: c, isFocusWithin: p }) => /* @__PURE__ */ M(de, { children: [
+        s && /* @__PURE__ */ i(s, { className: "pointer-events-none size-5 shrink-0 text-fg-quaternary" }),
+        /* @__PURE__ */ i(we, { contain: !1, autoFocus: !1, restoreFocus: !1, children: /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ i(
+          Ue,
+          {
+            inputRef: g,
+            isDisabled: c,
+            isFocusWithin: p,
+            shortcut: b,
+            shortcutClassName: m,
+            placeholder: u,
+            readOnly: x
+          }
+        ) }) }),
+        e ? /* @__PURE__ */ i(Y.Provider, { value: null, children: /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center self-center", children: e }) }) : null,
+        /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            disabled: c,
+            "aria-label": r != null && r.isOpen ? "Close options" : "Open options",
+            className: "shrink-0 self-center rounded p-0.5 text-fg-quaternary hover:text-fg-secondary disabled:cursor-not-allowed disabled:opacity-50",
+            onMouseDown: (S) => {
+              var h, P;
+              S.preventDefault(), S.stopPropagation(), r != null && r.isOpen ? (r.close(), (h = g.current) == null || h.blur()) : (r == null || r.open(), (P = g.current) == null || P.focus({ preventScroll: !0 }));
+            },
+            children: /* @__PURE__ */ i(
+              xe,
+              {
+                "aria-hidden": "true",
+                className: o === "lg" ? "size-5" : "size-4"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}, Xe = $e;
+Xe.Item = ze;
 export {
-  le as MultiSelect,
-  re as MultiSelectBase,
-  ae as MultiSelectTagsValue
+  Xe as MultiSelect,
+  $e as MultiSelectBase,
+  Ge as MultiSelectTagsValue
 };