@pibit.ai/cure-design-system 0.3.8 → 0.3.11

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

@@ -0,0 +1,306 @@
+import { jsx as i, jsxs as N, Fragment as _ } from "react/jsx-runtime";
+import { useCallback as z, useRef as E, useState as L, createContext as q, useContext as D } from "react";
+import { ComboBox as j, ListBox as C, Group as V, ComboBoxStateContext as W, Input as G } from "react-aria-components";
+import { Avatar as H } from "../avatar/avatar.js";
+import { HintText as U } from "../input/hint-text.js";
+import { Label as X } from "../input/label.js";
+import { Popover as J } from "./popover.js";
+import { sizes as O } from "./select.js";
+import { TagCloseX as Q } from "../tags/base-components/tag-close-x.js";
+import { SelectItem as Y } from "./select-item.js";
+import { cx as w } from "../../utils/cn.js";
+import { useResizeObserver as Z } from "../../hooks/use-resize-observer.js";
+import { useFilter as M } from "../../node_modules/@react-aria/i18n/dist/useFilter.js";
+import { useListData as B } from "../../node_modules/@react-stately/data/dist/useListData.js";
+import { FocusScope as I, useFocusManager as ee } from "../../node_modules/@react-aria/focus/dist/FocusScope.js";
+const te = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-md"
+}, K = q({
+  size: "sm",
+  selectedKeys: [],
+  selectedItems: {},
+  onRemove: () => {
+  },
+  onInputChange: () => {
+  },
+  showAvatar: !0,
+  chipClassName: void 0
+}), se = ({
+  items: m,
+  children: b,
+  size: h = "sm",
+  selectedItems: l,
+  onItemCleared: c,
+  onItemInserted: t,
+  shortcut: s,
+  placeholder: d = "Search",
+  showAvatar: p = !0,
+  readOnly: g = !1,
+  chipClassName: k,
+  // Omit these props to avoid conflicts with the `Select` component
+  name: R,
+  className: T,
+  ...n
+}) => {
+  var A;
+  const { contains: x } = M({ sensitivity: "base" }), u = (A = l == null ? void 0 : l.items) != null && A.length ? l.items.map((r) => r.id) : [], e = z(
+    (r, a) => !u.includes(r.id) && x(r.label || r.supportingText || "", a),
+    [x, u]
+  ), o = B({
+    initialItems: m,
+    filter: e
+  }), v = z(
+    (r) => {
+      const a = r.values().next().value;
+      a && (l.remove(a), c == null || c(a));
+    },
+    [l, c]
+  ), S = (r) => {
+    if (!r)
+      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);
+  }, f = E(null), [P, F] = L(""), $ = z(() => {
+    var a;
+    if (!f.current) return;
+    let r = (a = f.current) == null ? void 0 : a.getBoundingClientRect();
+    F(r.width + "px");
+  }, [f, F]);
+  return Z({
+    ref: f,
+    onResize: $,
+    box: "border-box"
+  }), /* @__PURE__ */ i(
+    K.Provider,
+    {
+      value: {
+        size: h,
+        selectedKeys: u,
+        selectedItems: l,
+        onInputChange: y,
+        onRemove: v,
+        showAvatar: p,
+        chipClassName: k
+      },
+      children: /* @__PURE__ */ i(
+        j,
+        {
+          allowsEmptyCollection: !0,
+          allowsCustomValue: !1,
+          menuTrigger: "focus",
+          items: o.items,
+          onInputChange: y,
+          inputValue: o.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(X, { isRequired: r.isRequired, tooltip: n.tooltip, children: n.label }),
+              /* @__PURE__ */ i(
+                ie,
+                {
+                  size: h,
+                  shortcut: s,
+                  ref: f,
+                  placeholder: d,
+                  readOnly: g,
+                  onFocus: $,
+                  onPointerEnter: $
+                }
+              ),
+              ((a = o.items) == null ? void 0 : a.length) > 0 && /* @__PURE__ */ i(
+                J,
+                {
+                  size: "md",
+                  triggerRef: f,
+                  style: { width: P },
+                  className: n == null ? void 0 : n.popoverClassName,
+                  children: /* @__PURE__ */ i(
+                    C,
+                    {
+                      selectionMode: "multiple",
+                      className: "size-full outline-hidden",
+                      children: b
+                    }
+                  )
+                }
+              ),
+              n.hint && /* @__PURE__ */ i(U, { isInvalid: r.isInvalid, children: n.hint })
+            ] });
+          }
+        }
+      )
+    }
+  );
+}, re = ({
+  isDisabled: m,
+  shortcut: b,
+  shortcutClassName: h,
+  placeholder: l,
+  readOnly: c = !1
+}) => {
+  var T, n, x, u;
+  const t = ee(), s = D(K), d = D(W), p = (e) => {
+    if (!(!(e.currentTarget.selectionStart === 0 && e.currentTarget.selectionEnd === 0) && e.currentTarget.value !== ""))
+      switch (e.key) {
+        case "Backspace":
+        case "ArrowLeft":
+          t == null || t.focusPrevious({ wrap: !1, tabbable: !1 });
+          break;
+        case "ArrowRight":
+          t == null || t.focusNext({ wrap: !1, tabbable: !1 });
+          break;
+      }
+  }, g = (e) => {
+    d && !d.isOpen && d.open();
+  }, k = (e, o) => {
+    var S, y, f;
+    if (e.key === "Tab")
+      return;
+    e.preventDefault();
+    const v = ((f = (y = (S = s == null ? void 0 : s.selectedItems) == null ? void 0 : S.items) == null ? void 0 : y[0]) == null ? void 0 : f.id) === o;
+    switch (e.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]));
+        break;
+      case "ArrowLeft":
+        t == null || t.focusPrevious({ wrap: !1, tabbable: !1 });
+        break;
+      case "ArrowRight":
+        t == null || t.focusNext({ wrap: !1, tabbable: !1 });
+        break;
+      case "Escape":
+        d == null || d.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(
+            H,
+            {
+              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(
+            Q,
+            {
+              size: "md",
+              isDisabled: m,
+              className: "ml-0.75",
+              onKeyDown: (o) => k(o, e.id),
+              onPress: () => s.onRemove(/* @__PURE__ */ new Set([e.id]))
+            }
+          )
+        ]
+      },
+      e.id
+    ))),
+    /* @__PURE__ */ N(
+      "div",
+      {
+        className: w(
+          "relative flex min-w-[20%] flex-1 flex-row items-center",
+          !R && "ml-0.5",
+          b && "min-w-[30%]"
+        ),
+        children: [
+          /* @__PURE__ */ i(
+            G,
+            {
+              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",
+                te[(s == null ? void 0 : s.size) || "sm"]
+              )
+            }
+          ),
+          b && /* @__PURE__ */ i(
+            "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
+              ),
+              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",
+                    m && "bg-transparent text-disabled"
+                  ),
+                  children: "⌘K"
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, ie = ({
+  size: m,
+  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(
+  V,
+  {
+    ...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",
+      O[m].root
+    ),
+    children: ({ isDisabled: p }) => /* @__PURE__ */ N(_, { children: [
+      c && /* @__PURE__ */ i(c, { className: "pointer-events-none size-5 text-fg-quaternary" }),
+      /* @__PURE__ */ i(I, { contain: !1, autoFocus: !1, restoreFocus: !1, children: /* @__PURE__ */ i(
+        re,
+        {
+          isDisabled: p,
+          size: m,
+          shortcut: b,
+          shortcutClassName: l,
+          placeholder: h,
+          readOnly: t
+        }
+      ) })
+    ] })
+  }
+), ae = se;
+ae.Item = Y;
+export {
+  ae as MultiSelect,
+  se as MultiSelectBase,
+  ie as MultiSelectTagsValue
+};

package/dist/primitives/select/popover.d.ts

@@ -0,0 +1,7 @@
+import { RefAttributes } from 'react';
+import { PopoverProps as AriaPopoverProps } from 'react-aria-components';
+export interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
+    size: "sm" | "md" | "lg";
+}
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=popover.d.ts.map

package/dist/primitives/select/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAI9E,MAAM,WAAW,YACf,SAAQ,gBAAgB,EAAE,aAAa,CAAC,WAAW,CAAC;IACpD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,4CAwB1C,CAAC"}

package/dist/primitives/select/popover.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Popover as i } from "react-aria-components";
+import { cx as n } from "../../utils/cn.js";
+const l = (e) => /* @__PURE__ */ o(
+  i,
+  {
+    placement: "bottom",
+    containerPadding: 0,
+    offset: 4,
+    ...e,
+    className: (t) => n(
+      "max-h-64! w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform",
+      t.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+      t.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+      (e.size === "md" || e.size === "sm") && "max-h-64!",
+      e.size === "lg" && "max-h-80!",
+      typeof e.className == "function" ? e.className(t) : e.className
+    )
+  }
+);
+export {
+  l as Popover
+};

package/dist/primitives/select/searchable-select.d.ts

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+import { SelectProps as AriaSelectProps } from 'react-aria-components';
+import { SelectItemType } from './select';
+export interface SearchableSelectProps extends Omit<AriaSelectProps<SelectItemType>, "children" | "items" | "onSelectionChange"> {
+    /** Items to display (should be filtered externally by parent) */
+    items: SelectItemType[];
+    /** Callback when search value changes - parent handles filtering */
+    onSearchChange: (searchValue: string) => void;
+    /** Loading state for async API calls */
+    isLoading?: boolean;
+    /** Hint text below the select */
+    hint?: string;
+    /** Label above the select */
+    label?: string;
+    /** Tooltip for the label */
+    tooltip?: string;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Placeholder text when no item is selected */
+    placeholder?: string;
+    /** Icon to show in placeholder state */
+    placeholderIcon?: FC | ReactNode;
+    /** Custom popover class name */
+    popoverClassName?: string;
+    /** Custom text styles */
+    textStyles?: string;
+    /** Callback when selection changes */
+    onSelectionChange?: (key: string) => void;
+    /** Placeholder for search input */
+    searchPlaceholder?: string;
+    /** Display text to show when selected item is not in items array */
+    selectedDisplayValue?: string;
+}
+export declare const SearchableSelect: ({ placeholder, placeholderIcon, size, items, label, hint, tooltip, className, textStyles, popoverClassName, onSearchChange, onSelectionChange, isLoading, searchPlaceholder, selectedDisplayValue, ...rest }: SearchableSelectProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=searchable-select.d.ts.map

package/dist/primitives/select/searchable-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/searchable-select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAGhD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAY5E,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAsBhF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,eAAe,CAAC,cAAc,CAAC,EAC/B,UAAU,GAAG,OAAO,GAAG,mBAAmB,CAC3C;IACC,iEAAiE;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,oEAAoE;IACpE,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,eAAe,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACjC,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAkHD,eAAO,MAAM,gBAAgB,GAAI,8MAiB9B,qBAAqB,4CAuIvB,CAAC"}

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

@@ -0,0 +1,239 @@
+import { jsx as e, jsxs as u, Fragment as P } from "react/jsx-runtime";
+import { useState as V, useCallback as S, isValidElement as q } from "react";
+import { ChevronDown as U } from "@untitledui/icons";
+import { Select as z, ListBox as B, Button as O, SelectValue as R } from "react-aria-components";
+import { Avatar as _ } from "../avatar/avatar.js";
+import { HintText as A } from "../input/hint-text.js";
+import { Label as E } from "../input/label.js";
+import { Popover as F } from "./popover.js";
+import { SelectItem as H } from "./select-item.js";
+import { SelectContext as K, fontSizes as I, sizes as L } from "./select.js";
+import { cx as a } from "../../utils/cn.js";
+import { isReactComponent as M } from "../../utils/is-react-component.js";
+import G from "./SearchInput.js";
+import { LoadingIndicator as J } from "../../applications/loading-indicator/loading-indicator.js";
+const Q = {
+  sm: "rounded-md",
+  md: "rounded-md",
+  lg: "rounded-lg"
+}, W = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm"
+}, X = "relative flex w-full cursor-pointer items-center bg-primary ring-1 ring-secondary outline-hidden transition duration-100 ease-linear ring-inset", Y = ({
+  isOpen: N,
+  isFocused: v,
+  isDisabled: o,
+  size: r,
+  placeholder: f,
+  placeholderIcon: h,
+  textStyles: x,
+  selectedDisplayValue: c
+}) => /* @__PURE__ */ e(
+  O,
+  {
+    className: a(
+      X,
+      Q[r],
+      (v || N) && "ring-1 ring-brand",
+      o && "cursor-not-allowed bg-disabled_subtle text-disabled"
+    ),
+    children: /* @__PURE__ */ e(
+      R,
+      {
+        className: a(
+          "flex h-max w-full items-center justify-start gap-2 truncate text-left align-middle",
+          "*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary in-disabled:*:data-icon:text-fg-disabled",
+          L[r].root
+        ),
+        children: (n) => {
+          var p, g, b, i, y;
+          const d = ((p = n.selectedItem) == null ? void 0 : p.icon) || h, s = !!n.selectedItem, m = !s && !!c;
+          return /* @__PURE__ */ u(P, { children: [
+            (g = n.selectedItem) != null && g.avatarUrl ? /* @__PURE__ */ e(
+              _,
+              {
+                size: "sm",
+                src: n.selectedItem.avatarUrl,
+                alt: n.selectedItem.label
+              }
+            ) : M(d) ? /* @__PURE__ */ e(d, { "data-icon": !0, "aria-hidden": "true" }) : q(d) ? d : null,
+            s ? /* @__PURE__ */ u("section", { className: "flex w-full gap-2 truncate", children: [
+              /* @__PURE__ */ e(
+                "p",
+                {
+                  className: a(
+                    "truncate font-medium text-primary",
+                    I[r],
+                    x
+                  ),
+                  children: (b = n.selectedItem) == null ? void 0 : b.label
+                }
+              ),
+              ((i = n.selectedItem) == null ? void 0 : i.supportingText) && /* @__PURE__ */ e("p", { className: a("text-tertiary", I[r]), children: (y = n.selectedItem) == null ? void 0 : y.supportingText })
+            ] }) : m ? /* @__PURE__ */ e("section", { className: "flex w-full gap-2 truncate", children: /* @__PURE__ */ e(
+              "p",
+              {
+                className: a(
+                  "truncate font-medium text-primary",
+                  I[r],
+                  x
+                ),
+                children: c
+              }
+            ) }) : /* @__PURE__ */ e(
+              "p",
+              {
+                className: a(
+                  "text-placeholder_subtle",
+                  I[r],
+                  o && "text-disabled"
+                ),
+                children: f
+              }
+            ),
+            /* @__PURE__ */ e(
+              U,
+              {
+                "aria-hidden": "true",
+                className: a(
+                  "ml-auto shrink-0 text-fg-quaternary",
+                  r === "sm" ? "size-4 stroke-[2.5px]" : "size-5"
+                )
+              }
+            )
+          ] });
+        }
+      }
+    )
+  }
+), pe = ({
+  placeholder: N = "Select",
+  placeholderIcon: v,
+  size: o = "sm",
+  items: r,
+  label: f,
+  hint: h,
+  tooltip: x,
+  className: c,
+  textStyles: n,
+  popoverClassName: d,
+  onSearchChange: s,
+  onSelectionChange: m,
+  isLoading: p = !1,
+  searchPlaceholder: g = "Search...",
+  selectedDisplayValue: b,
+  ...i
+}) => {
+  const [y, w] = V(""), T = S(
+    (l) => {
+      w(l), s(l);
+    },
+    [s]
+  ), j = S(
+    (l) => {
+      var t;
+      l || (w(""), s("")), (t = i.onOpenChange) == null || t.call(i, l);
+    },
+    [s, i.onOpenChange]
+  ), k = S(
+    (l) => {
+      l !== null && (m == null || m(String(l)));
+    },
+    [m]
+  ), C = [{ id: "none", label: "none" }], D = r.length > 0 ? r : C;
+  return /* @__PURE__ */ e(K.Provider, { value: { size: o }, children: /* @__PURE__ */ e(
+    z,
+    {
+      ...i,
+      onOpenChange: j,
+      onSelectionChange: k,
+      className: (l) => a(
+        "flex flex-col gap-1.5",
+        typeof c == "function" ? c(l) : c
+      ),
+      children: (l) => /* @__PURE__ */ u(P, { children: [
+        f && /* @__PURE__ */ e(
+          E,
+          {
+            isRequired: l.isRequired,
+            tooltip: x,
+            className: W[o],
+            children: f
+          }
+        ),
+        /* @__PURE__ */ e(
+          Y,
+          {
+            ...l,
+            size: o,
+            placeholder: N,
+            placeholderIcon: v,
+            textStyles: n,
+            selectedDisplayValue: b
+          }
+        ),
+        /* @__PURE__ */ u(
+          F,
+          {
+            size: o,
+            className: a("flex flex-col", d),
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "sticky top-0 z-10 bg-primary p-1.5",
+                  onMouseDown: (t) => t.stopPropagation(),
+                  onPointerDown: (t) => t.stopPropagation(),
+                  onClick: (t) => t.stopPropagation(),
+                  children: /* @__PURE__ */ e(
+                    G,
+                    {
+                      size: "sm",
+                      placeholder: g,
+                      value: y,
+                      onChange: (t) => T(t),
+                      onKeyDown: (t) => t.stopPropagation(),
+                      className: "w-full ring-0 outline-hidden bg-secondary rounded-lg"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ u("div", { className: "flex-1 overflow-y-auto", children: [
+                p && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ e(J, { size: "xs", type: "line-simple" }) }),
+                !p && r.length === 0 && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ e("p", { className: "text-sm text-tertiary", children: "No results" }) }),
+                /* @__PURE__ */ e(
+                  B,
+                  {
+                    items: D,
+                    className: a(
+                      "size-full outline-hidden px-1",
+                      (p || r.length === 0) && "hidden"
+                    ),
+                    children: (t) => /* @__PURE__ */ e(
+                      H,
+                      {
+                        id: t.id,
+                        label: t.label,
+                        avatarUrl: t.avatarUrl,
+                        supportingText: t.supportingText,
+                        isDisabled: t.isDisabled,
+                        icon: t.icon,
+                        textStyles: n
+                      },
+                      t.id
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        h && /* @__PURE__ */ e(A, { isInvalid: l.isInvalid, children: h })
+      ] })
+    }
+  ) });
+};
+export {
+  pe as SearchableSelect
+};

package/dist/primitives/select/select-item.d.ts

@@ -0,0 +1,8 @@
+import { ListBoxItemProps as AriaListBoxItemProps } from 'react-aria-components';
+import { SelectItemType } from './select';
+interface SelectItemProps extends Omit<AriaListBoxItemProps<SelectItemType>, "id">, SelectItemType {
+    textStyles?: string;
+}
+export declare const SelectItem: ({ label, id, value, avatarUrl, supportingText, isDisabled, icon: Icon, className, children, textStyles, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=select-item.d.ts.map

package/dist/primitives/select/select-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAMtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAW/C,UAAU,eACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,EAAE,cAAc;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,GAAI,oHAYxB,eAAe,4CAmGjB,CAAC"}