@pibit.ai/cure-design-system 0.5.12 → 0.6.1

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

@@ -2,10 +2,17 @@ import { FC, ReactNode } from 'react';
 import { SelectProps as AriaSelectProps } from 'react-aria-components';
 import { SelectItemType } from './select-shared';
 export interface SearchableSelectProps extends Omit<AriaSelectProps<SelectItemType>, "children" | "items" | "onSelectionChange"> {
-    /** Items to display (should be filtered externally by parent) */
+    /** Items to display. Filtered client-side by the search input when `shouldFilterItems` is true. */
     items: SelectItemType[];
-    /** Callback when search value changes - parent handles filtering */
-    onSearchChange: (searchValue: string) => void;
+    /**
+     * When false, the search field does not filter `items`; the parent should update `items`
+     * (e.g. from an API) in `onSearchChange`. Default true.
+     */
+    shouldFilterItems?: boolean;
+    /** Custom client-side filter when `shouldFilterItems` is true. */
+    filterItem?: (item: SelectItemType, query: string) => boolean;
+    /** Optional callback when search value changes. */
+    onSearchChange?: (searchValue: string) => void;
     /** Loading state for async API calls */
     isLoading?: boolean;
     /** Hint text below the select */
@@ -26,12 +33,27 @@ export interface SearchableSelectProps extends Omit<AriaSelectProps<SelectItemTy
     textStyles?: string;
     /** Callback when selection changes; `null` when cleared */
     onSelectionChange?: (key: string | null) => void;
+    /** When true, shows a clear control when a value is selected. Clearing calls `onSelectionChange(null)`. */
+    isClearable?: boolean;
+    /**
+     * When true, clicking the clear (X) button reopens the dropdown after clearing.
+     * Does not apply to other clear paths (e.g. `isDeselectable`). Default false.
+     */
+    openOnClear?: boolean;
     /** When true, clicking the already-selected option in the dropdown clears the selection. Default false. */
     isDeselectable?: boolean;
     /** Placeholder for search input */
     searchPlaceholder?: string;
     /** Display text to show when selected item is not in items array */
     selectedDisplayValue?: string;
+    /** Footer content to display at the bottom of the select */
+    footer?: ReactNode;
+    /** Custom render function for select items */
+    renderItem?: (item: SelectItemType) => ReactNode;
+    /** Rendered to the left of the clear control and chevron. */
+    endAdornment?: ReactNode;
+    /** Rendered before the selected label in the trigger. */
+    leadingAdornment?: ReactNode;
 }
-export declare const SearchableSelect: ({ placeholder, placeholderIcon, size, items, label, hint, tooltip, className, textStyles, popoverClassName, onSearchChange, onSelectionChange, isLoading, isDeselectable, searchPlaceholder, selectedDisplayValue, ...rest }: SearchableSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchableSelect: ({ placeholder, placeholderIcon, size, items, label, hint, tooltip, className, footer, textStyles, popoverClassName, onSearchChange, onSelectionChange, isLoading, isClearable, openOnClear, isDeselectable, searchPlaceholder, selectedDisplayValue, renderItem, endAdornment, leadingAdornment, shouldFilterItems, filterItem, ...rest }: SearchableSelectProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=searchable-select.d.ts.map

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

@@ -1 +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,EAIL,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AAsBzB,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,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,2GAA2G;IAC3G,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAkHD,eAAO,MAAM,gBAAgB,GAAI,8NAkB9B,qBAAqB,4CAkKvB,CAAC"}
+{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/searchable-select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAEV,WAAW,IAAI,eAAe,EAC/B,MAAM,uBAAuB,CAAC;AAW/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AAwBzB,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,eAAe,CAAC,cAAc,CAAC,EAC/B,UAAU,GAAG,OAAO,GAAG,mBAAmB,CAC3C;IACC,mGAAmG;IACnG,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kEAAkE;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9D,mDAAmD;IACnD,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,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,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,2GAA2G;IAC3G,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2GAA2G;IAC3G,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC;IACjD,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAyND,eAAO,MAAM,gBAAgB,GAAI,2UA0B9B,qBAAqB,4CAoQvB,CAAC"}

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

@@ -1,252 +1,355 @@
-import { jsx as t, jsxs as f, Fragment as q } from "react/jsx-runtime";
-import { useState as M, useRef as _, useCallback as w, isValidElement as A } from "react";
-import { ChevronDown as C } from "@untitledui/icons";
-import { Select as E, ListBox as F, Button as H, SelectValue as L } from "react-aria-components";
-import { Avatar as D } from "../avatar/avatar.js";
-import { HintText as G } from "../input/hint-text.js";
-import { Label as J } from "../input/label.js";
-import { Popover as Q } from "./popover.js";
-import { SelectItem as W } from "./select-item.js";
-import { SelectContext as X, fontSizes as S, sizes as Y } from "./select-shared.js";
-import { cx as s } from "../../utils/cn.js";
-import { isReactComponent as Z } from "../../utils/is-react-component.js";
-import $ from "./SearchInput.js";
-import { LoadingIndicator as ee } from "../../applications/loading-indicator/loading-indicator.js";
-const te = {
+import { jsx as r, jsxs as w, Fragment as H } from "react/jsx-runtime";
+import { useState as J, useRef as Q, useCallback as B, useMemo as Y, isValidElement as fe } from "react";
+import { ChevronDown as Z, XClose as pe } from "@untitledui/icons";
+import { Select as me, ListBox as xe, Button as he, SelectValue as be, ButtonContext as ge } from "react-aria-components";
+import { Avatar as ve } from "../avatar/avatar.js";
+import { Popover as we } from "./popover.js";
+import { SelectItem as Ne } from "./select-item.js";
+import { SelectContext as ye, fontSizes as U, sizes as ke } from "./select-shared.js";
+import { HintText as Pe } from "../input/hint-text.js";
+import { Label as Te } from "../input/label.js";
+import { cx as a } from "../../utils/cn.js";
+import { isReactComponent as qe } from "../../utils/is-react-component.js";
+import { LoadingIndicator as Se } from "../../applications/loading-indicator/loading-indicator.js";
+import Be from "./SearchInput.js";
+const Ke = {
   sm: "rounded-md",
   md: "rounded-md",
   lg: "rounded-lg"
-}, re = {
+}, Re = {
   sm: "text-xs",
-  md: "text-xs",
-  lg: "text-sm"
-}, le = "relative flex w-full cursor-pointer items-center bg-primary ring-1 ring-secondary outline-hidden transition duration-100 ease-linear ring-inset", ne = ({
-  isOpen: P,
-  isFocused: R,
-  isDisabled: i,
-  size: l,
-  placeholder: x,
-  placeholderIcon: h,
-  textStyles: g,
-  selectedDisplayValue: d
-}) => /* @__PURE__ */ t(
-  H,
-  {
-    className: s(
-      le,
-      te[l],
-      (R || P) && "ring-1 ring-brand",
-      i && "cursor-not-allowed bg-disabled_subtle text-disabled"
-    ),
-    children: /* @__PURE__ */ t(
-      L,
-      {
-        className: s(
-          "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",
-          Y[l].root
-        ),
-        children: (n) => {
-          var u, o, y, v, I;
-          const m = ((u = n.selectedItem) == null ? void 0 : u.icon) || h, c = !!n.selectedItem, a = !c && !!d;
-          return /* @__PURE__ */ f(q, { children: [
-            (o = n.selectedItem) != null && o.avatarUrl ? /* @__PURE__ */ t(
-              D,
-              {
-                size: "sm",
-                src: n.selectedItem.avatarUrl,
-                alt: n.selectedItem.label
-              }
-            ) : Z(m) ? /* @__PURE__ */ t(m, { "data-icon": !0, "aria-hidden": "true" }) : A(m) ? m : null,
-            c ? /* @__PURE__ */ f("section", { className: "flex w-full gap-2 truncate", children: [
-              /* @__PURE__ */ t(
+  md: "text-sm",
+  lg: "text-md"
+}, De = "relative flex w-full cursor-pointer items-center bg-primary ring-1 outline-hidden transition duration-100 ease-linear ring-inset", je = (p, N) => {
+  const s = N.trim().toLowerCase();
+  if (!s) return !0;
+  const u = String(p.label ?? "").toLowerCase(), x = String(p.supportingText ?? "").toLowerCase(), o = String(p.id ?? "").toLowerCase();
+  return u.includes(s) || x.includes(s) || o.includes(s);
+}, ze = {
+  sm: "size-4",
+  md: "size-4",
+  lg: "size-5"
+}, Oe = ({
+  isOpen: p,
+  isFocused: N,
+  isDisabled: s,
+  isInvalid: u,
+  isLoading: x,
+  size: o = "sm",
+  placeholder: F,
+  placeholderIcon: y,
+  textStyles: k,
+  selectedDisplayValue: P,
+  isClearable: L = !1,
+  onClear: i,
+  hasSelection: l = !1,
+  endAdornment: d,
+  triggerSelectedItem: K = null,
+  hasSupportingText: T = !1,
+  leadingAdornment: m
+}) => {
+  const V = L && l && !s && i;
+  return /* @__PURE__ */ r(
+    he,
+    {
+      className: a(
+        De,
+        Ke[o],
+        u ? "ring-error" : N || p ? "ring-brand" : "ring-secondary",
+        s && "cursor-not-allowed bg-disabled_subtle text-disabled"
+      ),
+      children: /* @__PURE__ */ r(
+        be,
+        {
+          className: a(
+            "flex h-max w-full items-center justify-start gap-2 text-left align-middle",
+            T ? "px-2 pt-3 pb-3" : a("truncate", ke[o].root),
+            "*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary in-disabled:*:data-icon:text-fg-disabled"
+          ),
+          children: (R) => {
+            const n = K ?? R.selectedItem, h = (n == null ? void 0 : n.icon) || y, b = !!n, g = !b && !!P;
+            return x && !b && !g ? /* @__PURE__ */ w(H, { children: [
+              /* @__PURE__ */ r("div", { className: "h-3.5 min-w-0 flex-1 animate-pulse rounded bg-secondary" }),
+              /* @__PURE__ */ r(
+                Z,
+                {
+                  "aria-hidden": "true",
+                  className: a(
+                    "shrink-0 text-fg-quaternary",
+                    o === "sm" ? "size-4 stroke-[2.5px]" : "size-5"
+                  )
+                }
+              )
+            ] }) : /* @__PURE__ */ w(H, { children: [
+              n != null && n.avatarUrl ? /* @__PURE__ */ r(
+                ve,
+                {
+                  size: "xs",
+                  src: n.avatarUrl,
+                  alt: n.label
+                }
+              ) : qe(h) ? /* @__PURE__ */ r(h, { "data-icon": !0, "aria-hidden": "true" }) : fe(h) ? h : null,
+              m && (b || g) ? /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center self-center", children: m }) : null,
+              b ? /* @__PURE__ */ w("section", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                /* @__PURE__ */ r(
+                  "p",
+                  {
+                    className: a(
+                      "truncate font-medium text-primary",
+                      U[o],
+                      k
+                    ),
+                    children: n == null ? void 0 : n.label
+                  }
+                ),
+                (n == null ? void 0 : n.supportingText) && /* @__PURE__ */ r(
+                  "p",
+                  {
+                    className: a(
+                      "truncate text-xs",
+                      (n == null ? void 0 : n.supportingTextClassName) ?? "text-[#818792]"
+                    ),
+                    children: n == null ? void 0 : n.supportingText
+                  }
+                )
+              ] }) : g ? /* @__PURE__ */ r("section", { className: "flex min-w-0 flex-1 gap-2 truncate", children: /* @__PURE__ */ r(
                 "p",
                 {
-                  className: s(
+                  className: a(
                     "truncate font-medium text-primary",
-                    S[l],
-                    g
+                    U[o],
+                    k
+                  ),
+                  children: P
+                }
+              ) }) : /* @__PURE__ */ r(
+                "p",
+                {
+                  className: a(
+                    "min-w-0 flex-1 text-placeholder_subtle",
+                    U[o],
+                    s && "text-disabled"
                   ),
-                  children: (y = n.selectedItem) == null ? void 0 : y.label
+                  children: F
                 }
               ),
-              ((v = n.selectedItem) == null ? void 0 : v.supportingText) && /* @__PURE__ */ t("p", { className: s("text-tertiary", S[l]), children: (I = n.selectedItem) == null ? void 0 : I.supportingText })
-            ] }) : a ? /* @__PURE__ */ t("section", { className: "flex w-full gap-2 truncate", children: /* @__PURE__ */ t(
-              "p",
-              {
-                className: s(
-                  "truncate font-medium text-primary",
-                  S[l],
-                  g
-                ),
-                children: d
-              }
-            ) }) : /* @__PURE__ */ t(
-              "p",
-              {
-                className: s(
-                  "text-placeholder_subtle",
-                  S[l],
-                  i && "text-disabled"
-                ),
-                children: x
-              }
-            ),
-            /* @__PURE__ */ t(
-              C,
-              {
-                "aria-hidden": "true",
-                className: s(
-                  "ml-auto shrink-0 text-fg-quaternary",
-                  l === "sm" ? "size-4 stroke-[2.5px]" : "size-5"
-                )
-              }
-            )
-          ] });
+              d ? /* @__PURE__ */ r(ge.Provider, { value: null, children: /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center self-center", children: d }) }) : null,
+              V ? /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": "Clear selection",
+                  onPointerDown: (v) => {
+                    v.stopPropagation();
+                  },
+                  onClick: (v) => {
+                    v.preventDefault(), v.stopPropagation(), i == null || i();
+                  },
+                  className: "flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1 text-fg-quaternary outline-hidden transition hover:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+                  children: /* @__PURE__ */ r(pe, { "aria-hidden": !0, className: ze[o] })
+                }
+              ) : null,
+              /* @__PURE__ */ r(
+                Z,
+                {
+                  "aria-hidden": "true",
+                  className: a(
+                    "shrink-0 text-fg-quaternary",
+                    o === "sm" ? "size-4 stroke-[2.5px]" : "size-5"
+                  )
+                }
+              )
+            ] });
+          }
         }
-      }
-    )
-  }
-), ve = ({
-  placeholder: P = "Select",
-  placeholderIcon: R,
-  size: i = "sm",
-  items: l,
+      )
+    }
+  );
+}, Qe = ({
+  placeholder: p = "Select",
+  placeholderIcon: N,
+  size: s = "sm",
+  items: u,
   label: x,
-  hint: h,
-  tooltip: g,
-  className: d,
-  textStyles: n,
-  popoverClassName: m,
-  onSearchChange: c,
-  onSelectionChange: a,
-  isLoading: u = !1,
-  isDeselectable: o = !1,
-  searchPlaceholder: y = "Search...",
-  selectedDisplayValue: v,
-  ...I
+  hint: o,
+  tooltip: F,
+  className: y,
+  footer: k,
+  textStyles: P,
+  popoverClassName: L,
+  onSearchChange: i,
+  onSelectionChange: l,
+  isLoading: d = !1,
+  isClearable: K = !1,
+  openOnClear: T = !1,
+  isDeselectable: m = !1,
+  searchPlaceholder: V = "Search...",
+  selectedDisplayValue: R,
+  renderItem: n,
+  endAdornment: h,
+  leadingAdornment: b,
+  shouldFilterItems: g = !0,
+  filterItem: v,
+  ...$
 }) => {
-  const [K, k] = M(""), T = _(!1), { selectedKey: N, ...p } = I, b = N === void 0 ? void 0 : N == null || String(N) === "" ? null : N, V = w(
-    (r) => {
-      k(r), c(r);
+  const [M, _] = J(""), [C, ee] = J(!1), A = Q(!1), I = Q(null), {
+    selectedKey: E,
+    isOpen: W,
+    onOpenChange: D,
+    ...re
+  } = $, c = E == null || String(E) === "" ? null : E, j = W !== void 0, z = T || j, te = j ? W : z ? C : void 0, ne = B(
+    (t) => {
+      _(t), i == null || i(t);
     },
-    [c]
-  ), j = w(
-    (r) => {
-      var e;
-      r || (k(""), c("")), (e = p.onOpenChange) == null || e.call(p, r);
+    [i]
+  ), X = v ?? je, q = Y(() => {
+    if (!g) return u;
+    const t = M.trim();
+    return t ? u.filter((e) => X(e, t)) : u;
+  }, [X, M, u, g]), le = (t) => {
+    var G;
+    if (t.key !== "ArrowDown" && t.key !== "ArrowUp" || t.nativeEvent.isComposing || !(t.target instanceof HTMLInputElement) || (t.preventDefault(), t.stopPropagation(), d || q.length === 0)) return;
+    const e = (G = I.current) == null ? void 0 : G.querySelectorAll(
+      '[role="option"]:not([aria-disabled="true"])'
+    ), f = t.key === "ArrowDown" ? e == null ? void 0 : e[0] : e == null ? void 0 : e[e.length - 1];
+    f == null || f.focus({ preventScroll: !0 }), f == null || f.scrollIntoView({ block: "nearest" });
+  }, S = B(
+    (t) => {
+      !j && z && ee(t), t || (_(""), i == null || i("")), D == null || D(t);
     },
-    [p.onOpenChange, c]
-  ), U = w(() => {
-    !o || b == null || (T.current = !0, a == null || a(null), j(!1), queueMicrotask(() => {
-      T.current = !1;
+    [j, z, D, i]
+  ), se = B(() => {
+    l == null || l(null), T && S(!0);
+  }, [T, l, S]), oe = B(() => {
+    !m || c == null || (A.current = !0, l == null || l(null), S(!1), queueMicrotask(() => {
+      A.current = !1;
     }));
-  }, [j, o, a, b]), z = w(
-    (r) => {
-      if (T.current) return;
-      const e = r == null || String(r) === "" ? null : String(r);
-      e === null && !o || a == null || a(e);
+  }, [S, m, l, c]), ie = B(
+    (t) => {
+      if (A.current) return;
+      const e = t == null || String(t) === "" ? null : String(t), f = c == null || String(c) === "" ? null : String(c);
+      e !== f && (l == null || l(e));
     },
-    [o, a]
-  ), B = [{ id: "none", label: "none" }], O = l.length > 0 ? l : B;
-  return /* @__PURE__ */ t(
-    X.Provider,
+    [l, c]
+  ), ae = c != null || !!R, O = Y(
+    () => c == null ? null : u.find((t) => String(t.id) === String(c)) ?? null,
+    [u, c]
+  ), ce = !!(O != null && O.supportingText), ue = [{ id: "none", label: "none" }], de = q.length > 0 ? q : ue;
+  return /* @__PURE__ */ r(
+    ye.Provider,
     {
       value: {
-        size: i,
-        isDeselectable: o,
-        selectedKey: b,
-        onReselectCurrent: o ? U : void 0
+        size: s,
+        isDeselectable: m,
+        selectedKey: c,
+        onReselectCurrent: m ? oe : void 0
       },
-      children: /* @__PURE__ */ t(
-        E,
+      children: /* @__PURE__ */ r(
+        me,
         {
-          ...p,
-          selectedKey: b,
-          onOpenChange: j,
-          onSelectionChange: z,
-          className: (r) => s(
+          ...re,
+          selectedKey: c,
+          ...z ? { isOpen: te } : {},
+          onOpenChange: S,
+          onSelectionChange: ie,
+          className: (t) => a(
             "flex flex-col gap-1.5",
-            typeof d == "function" ? d(r) : d
+            typeof y == "function" ? y(t) : y
           ),
-          children: (r) => /* @__PURE__ */ f(q, { children: [
-            x && /* @__PURE__ */ t(
-              J,
+          children: (t) => /* @__PURE__ */ w(H, { children: [
+            x && /* @__PURE__ */ r(
+              Te,
               {
-                isRequired: r.isRequired,
-                tooltip: g,
-                className: re[i],
+                isRequired: t.isRequired,
+                tooltip: F,
+                className: Re[s],
                 children: x
               }
             ),
-            /* @__PURE__ */ t(
-              ne,
+            /* @__PURE__ */ r(
+              Oe,
               {
-                ...r,
-                size: i,
-                placeholder: P,
-                placeholderIcon: R,
-                textStyles: n,
-                selectedDisplayValue: v
+                ...t,
+                size: s,
+                isLoading: d,
+                placeholder: p,
+                placeholderIcon: N,
+                textStyles: P,
+                selectedDisplayValue: R,
+                isClearable: K,
+                hasSelection: ae,
+                hasSupportingText: ce,
+                triggerSelectedItem: O,
+                leadingAdornment: b,
+                onClear: K && l ? se : void 0,
+                endAdornment: h
               }
             ),
-            /* @__PURE__ */ f(
-              Q,
+            /* @__PURE__ */ w(
+              we,
               {
-                size: i,
-                className: s("flex flex-col", m),
+                size: s,
+                className: a("flex flex-col overflow-hidden", L),
                 children: [
-                  /* @__PURE__ */ t(
+                  /* @__PURE__ */ r(
                     "div",
                     {
-                      className: "sticky top-0 z-10 bg-primary p-1.5",
+                      className: "z-10 shrink-0 border-b border-tertiary bg-primary p-1.5",
                       onMouseDown: (e) => e.stopPropagation(),
                       onPointerDown: (e) => e.stopPropagation(),
                       onClick: (e) => e.stopPropagation(),
-                      children: /* @__PURE__ */ t(
-                        $,
+                      onKeyDownCapture: le,
+                      children: /* @__PURE__ */ r(
+                        Be,
                         {
                           size: "sm",
-                          placeholder: y,
-                          value: K,
-                          onChange: (e) => V(e),
+                          placeholder: V,
+                          value: M,
+                          onChange: (e) => ne(e),
                           onKeyDown: (e) => e.stopPropagation(),
-                          className: "w-full ring-0 outline-hidden bg-secondary rounded-lg"
+                          className: "w-full ring-0 outline-hidden bg-secondary rounded-lg",
+                          autoFocus: !0
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ f("div", { className: "flex-1 overflow-y-auto", children: [
-                    u && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ t(ee, { size: "xs", type: "line-simple" }) }),
-                    !u && l.length === 0 && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ t("p", { className: "text-sm text-tertiary", children: "No results" }) }),
-                    /* @__PURE__ */ t(
-                      F,
+                  /* @__PURE__ */ w("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
+                    d && /* @__PURE__ */ r("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ r(Se, { size: "xs", type: "line-simple" }) }),
+                    !d && q.length === 0 && /* @__PURE__ */ r("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ r("p", { className: a("text-tertiary", U[s]), children: "No results" }) }),
+                    /* @__PURE__ */ r(
+                      xe,
                       {
-                        items: O,
-                        className: s(
-                          "size-full outline-hidden px-1",
-                          (u || l.length === 0) && "hidden"
+                        ref: I,
+                        items: de,
+                        shouldFocusOnHover: !1,
+                        shouldFocusWrap: !0,
+                        className: a(
+                          "min-h-0 overflow-y-auto outline-hidden px-1",
+                          (d || q.length === 0) && "hidden"
                         ),
-                        children: (e) => /* @__PURE__ */ t(
-                          W,
+                        children: (e) => n ? n(e) : /* @__PURE__ */ r(
+                          Ne,
                           {
                             id: e.id,
                             label: e.label,
                             avatarUrl: e.avatarUrl,
                             supportingText: e.supportingText,
+                            supportingTextClassName: e.supportingTextClassName,
                             isDisabled: e.isDisabled,
                             icon: e.icon,
-                            textStyles: n
+                            textStyles: P
                           },
                           e.id
                         )
                       }
                     )
-                  ] })
+                  ] }),
+                  k && /* @__PURE__ */ r("div", { className: "shrink-0 border-t border-tertiary bg-primary p-1.5", children: k })
                 ]
               }
             ),
-            h && /* @__PURE__ */ t(G, { isInvalid: r.isInvalid, children: h })
+            o && /* @__PURE__ */ r(Pe, { isInvalid: t.isInvalid, children: o })
           ] })
         }
       )
@@ -254,5 +357,5 @@ const te = {
   );
 };
 export {
-  ve as SearchableSelect
+  Qe as SearchableSelect
 };

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

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export declare function SelectCheckbox({ size, className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root> & {
+    size?: "xs" | "sm" | "md" | "lg";
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-checkbox.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/select-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAQ9D,wBAAgB,cAAc,CAAC,EAC7B,IAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IACjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC,2CAyCA"}