@clasing/ui 2.0.7 → 2.0.8

package/dist/components/multi-select.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-DSjHHn1r.cjs"),C=require("../badge-CS2XfLYQ.cjs"),x=require("../command-CHisYTN-.cjs"),b=require("../popover-BnLx2OY6.cjs"),s=require("react"),w=require("../icon-component-DTlgy__B.cjs"),M=s.createContext(null);function N({children:t,values:n,defaultValues:r,onValuesChange:o}){const[m,p]=s.useState(!1),[h,f]=s.useState(new Set(n??r)),[y,j]=s.useState(new Map);function E(c){const i=u=>{const a=new Set(u);return a.has(c)?a.delete(c):a.add(c),a};f(i),o?.([...i(h)])}const g=s.useCallback((c,i)=>{j(u=>u.get(c)===i?u:new Map(u).set(c,i))},[]);return e.jsxRuntimeExports.jsx(M,{value:{open:m,setOpen:p,selectedValues:n?new Set(n):h,toggleValue:E,items:y,onItemAdded:g},children:e.jsxRuntimeExports.jsx(b.Popover,{open:m,onOpenChange:p,children:t})})}function k({className:t,children:n,size:r="md",...o}){const{open:m}=R();return e.jsxRuntimeExports.jsx(b.PopoverTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{...o,role:o.role??"combobox","aria-expanded":o["aria-expanded"]??m,"data-size":r,className:e.cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 overflow-hidden rounded-md border bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",r==="xs"&&'label-sm h-7 px-2 py-1 [&_svg:not([class*="size-"])]:size-3.5',r==="sm"&&"label-md h-8 px-2 py-1",r==="md"&&"label-lg h-12 px-3 py-1",r==="lg"&&"label-xl h-16 px-4 py-2",t),children:[n,e.jsxRuntimeExports.jsx(w.IconComponent,{iconName:"IconSelector",className:"size-4 shrink-0 opacity-50"})]})})}function V({placeholder:t,clickToRemove:n=!0,className:r,overflowBehavior:o="wrap-when-open",...m}){const{selectedValues:p,toggleValue:h,items:f,open:y}=R(),[j,E]=s.useState(0),g=s.useRef(null),c=s.useRef(null),i=s.useRef(new Set),u=o==="wrap"||o==="wrap-when-open"&&y;s.useEffect(()=>{u&&i.current.forEach(l=>l.style.removeProperty("display"))},[u]);const a=s.useCallback(()=>{if(g.current==null)return;const l=g.current,d=c.current;d!=null&&(d.style.display="none"),i.current.forEach(S=>S.style.removeProperty("display"));let v=0;for(let S=i.current.size-1;S>=0;S--){const I=[...i.current][S];if(l.scrollWidth<=l.clientWidth)break;v=i.current.size-S,I.style.display="none",d?.style.removeProperty("display")}E(v)},[]);return s.useEffect(()=>{if(g.current==null)return;const l=new ResizeObserver(a);return l.observe(g.current),()=>l.disconnect()},[a]),s.useLayoutEffect(()=>{a()},[p,a]),p.size===0&&t?e.jsxRuntimeExports.jsx("span",{className:"text-muted-foreground font-normal",children:t}):e.jsxRuntimeExports.jsxs("div",{...m,ref:g,className:e.cn("flex min-h-[1.75rem] w-full gap-1.5 overflow-hidden",u&&"flex-wrap",r),children:[[...p].filter(l=>f.has(l)).map(l=>e.jsxRuntimeExports.jsxs(C.Badge,{ref:d=>{if(d!=null)return i.current.add(d),()=>{i.current.delete(d)}},variant:"outline",className:"group flex items-center gap-1",onClick:n?d=>{d.stopPropagation(),h(l)}:void 0,children:[f.get(l),n&&e.jsxRuntimeExports.jsx(w.IconComponent,{iconName:"IconX",className:"text-muted-foreground group-hover:text-destructive size-2"})]},l)),e.jsxRuntimeExports.jsxs(C.Badge,{style:{display:j>0&&!u?"block":"none"},variant:"outline",ref:c,children:["+",j]})]})}function z({search:t=!0,children:n,...r}){const o=typeof t=="object"?!0:t;return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{style:{display:"none"},children:e.jsxRuntimeExports.jsx(x.Command,{children:e.jsxRuntimeExports.jsx(x.CommandList,{children:n})})}),e.jsxRuntimeExports.jsx(b.PopoverContent,{className:"min-w-[var(--radix-popover-trigger-width)] p-0",children:e.jsxRuntimeExports.jsxs(x.Command,{...r,children:[o?e.jsxRuntimeExports.jsx(x.CommandInput,{placeholder:typeof t=="object"?t.placeholder:void 0}):e.jsxRuntimeExports.jsx("button",{autoFocus:!0,"aria-hidden":"true",className:"sr-only"}),e.jsxRuntimeExports.jsxs(x.CommandList,{children:[o&&e.jsxRuntimeExports.jsx(x.CommandEmpty,{children:typeof t=="object"?t.emptyMessage:void 0}),n]})]})})]})}function P({value:t,children:n,badgeLabel:r,onSelect:o,...m}){const{toggleValue:p,selectedValues:h,onItemAdded:f}=R(),y=h.has(t);return s.useEffect(()=>{f(t,r??n)},[t,n,f,r]),e.jsxRuntimeExports.jsxs(x.CommandItem,{...m,value:t,onSelect:j=>{p(j),o?.(j)},children:[e.jsxRuntimeExports.jsx(w.IconComponent,{iconName:"IconCheck",className:e.cn("mr-2 size-4",y?"opacity-100":"opacity-0")}),n]})}function q(t){return e.jsxRuntimeExports.jsx(x.CommandGroup,{...t})}function O(t){return e.jsxRuntimeExports.jsx(x.CommandSeparator,{...t})}function R(){const t=s.useContext(M);if(t==null)throw new Error("useMultiSelectContext must be used within a MultiSelectContext");return t}exports.MultiSelect=N;exports.MultiSelectContent=z;exports.MultiSelectGroup=q;exports.MultiSelectItem=P;exports.MultiSelectSeparator=O;exports.MultiSelectTrigger=k;exports.MultiSelectValue=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-DSjHHn1r.cjs"),I=require("../badge-CS2XfLYQ.cjs"),m=require("../command-CHisYTN-.cjs"),N=require("../popover-BnLx2OY6.cjs"),n=require("react"),v=require("../icon-component-DTlgy__B.cjs"),V=n.createContext(null);function k({children:t,values:r,defaultValues:i,onValuesChange:u,isLoading:d,onSearchChange:c,loadingText:f="Loading...",noResultsText:a="No results found"}){const[h,p]=n.useState(!1),[y,j]=n.useState(new Set(r??i)),[b,x]=n.useState(new Map),[S,E]=n.useState("");function o(s){const g=R=>{const C=new Set(R);return C.has(s)?C.delete(s):C.add(s),C};j(g),u?.([...g(y)])}const l=n.useCallback((s,g)=>{x(R=>R.get(s)===g?R:new Map(R).set(s,g))},[]),w=n.useCallback(s=>{E(s),c?.(s)},[c]);return e.jsxRuntimeExports.jsx(V,{value:{open:h,setOpen:p,selectedValues:r?new Set(r):y,toggleValue:o,items:b,onItemAdded:l,isLoading:d,searchValue:S,onSearchChange:w,loadingText:f,noResultsText:a},children:e.jsxRuntimeExports.jsx(N.Popover,{open:h,onOpenChange:p,children:t})})}function z({className:t,children:r,size:i="md",...u}){const{open:d}=M();return e.jsxRuntimeExports.jsx(N.PopoverTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{...u,role:u.role??"combobox","aria-expanded":u["aria-expanded"]??d,"data-size":i,className:e.cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 overflow-hidden rounded-md border bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",i==="xs"&&'label-sm h-7 px-2 py-1 [&_svg:not([class*="size-"])]:size-3.5',i==="sm"&&"label-md h-8 px-2 py-1",i==="md"&&"label-lg h-12 px-3 py-1",i==="lg"&&"label-xl h-16 px-4 py-2",t),children:[r,e.jsxRuntimeExports.jsx(v.IconComponent,{iconName:"IconSelector",className:"size-4 shrink-0 opacity-50"})]})})}function P({placeholder:t,clickToRemove:r=!0,className:i,overflowBehavior:u="wrap-when-open",...d}){const{selectedValues:c,toggleValue:f,items:a,open:h}=M(),[p,y]=n.useState(0),j=n.useRef(null),b=n.useRef(null),x=n.useRef(new Set),S=u==="wrap"||u==="wrap-when-open"&&h;n.useEffect(()=>{S&&x.current.forEach(o=>o.style.removeProperty("display"))},[S]);const E=n.useCallback(()=>{if(j.current==null)return;const o=j.current,l=b.current;l!=null&&(l.style.display="none"),x.current.forEach(s=>s.style.removeProperty("display"));let w=0;for(let s=x.current.size-1;s>=0;s--){const g=[...x.current][s];if(o.scrollWidth<=o.clientWidth)break;w=x.current.size-s,g.style.display="none",l?.style.removeProperty("display")}y(w)},[]);return n.useEffect(()=>{if(j.current==null)return;const o=new ResizeObserver(E);return o.observe(j.current),()=>o.disconnect()},[E]),n.useLayoutEffect(()=>{E()},[c,E]),c.size===0&&t?e.jsxRuntimeExports.jsx("span",{className:"text-muted-foreground font-normal",children:t}):e.jsxRuntimeExports.jsxs("div",{...d,ref:j,className:e.cn("flex min-h-[1.75rem] w-full gap-1.5 overflow-hidden",S&&"flex-wrap",i),children:[[...c].filter(o=>a.has(o)).map(o=>e.jsxRuntimeExports.jsxs(I.Badge,{ref:l=>{if(l!=null)return x.current.add(l),()=>{x.current.delete(l)}},variant:"outline",className:"group flex items-center gap-1",onClick:r?l=>{l.stopPropagation(),f(o)}:void 0,children:[a.get(o),r&&e.jsxRuntimeExports.jsx(v.IconComponent,{iconName:"IconX",className:"text-muted-foreground group-hover:text-destructive size-2"})]},o)),e.jsxRuntimeExports.jsxs(I.Badge,{style:{display:p>0&&!S?"block":"none"},variant:"outline",ref:b,children:["+",p]})]})}function q({search:t=!0,children:r,...i}){const{isLoading:u,onSearchChange:d,searchValue:c,noResultsText:f}=M(),a=typeof t=="object"?!0:t;return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{style:{display:"none"},children:e.jsxRuntimeExports.jsx(m.Command,{children:e.jsxRuntimeExports.jsx(m.CommandList,{children:r})})}),e.jsxRuntimeExports.jsx(N.PopoverContent,{className:"min-w-[var(--radix-popover-trigger-width)] p-0",children:e.jsxRuntimeExports.jsxs(m.Command,{...i,children:[a?e.jsxRuntimeExports.jsx(m.CommandInput,{placeholder:typeof t=="object"?t.placeholder:void 0,value:c,onValueChange:d}):e.jsxRuntimeExports.jsx("button",{autoFocus:!0,"aria-hidden":"true",className:"sr-only"}),e.jsxRuntimeExports.jsx(m.CommandList,{children:u?e.jsxRuntimeExports.jsxs("div",{className:"flex items-center justify-center py-6",children:[e.jsxRuntimeExports.jsx(v.IconComponent,{iconName:"IconLoader2",className:"text-muted-foreground size-4 animate-spin"}),e.jsxRuntimeExports.jsx("span",{className:"text-muted-foreground ml-2 text-sm",children:u})]}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[a&&e.jsxRuntimeExports.jsx(m.CommandEmpty,{children:f}),r]})})]})})]})}function O({value:t,children:r,badgeLabel:i,onSelect:u,...d}){const{toggleValue:c,selectedValues:f,onItemAdded:a}=M(),h=f.has(t);return n.useEffect(()=>{a(t,i??r)},[t,r,a,i]),e.jsxRuntimeExports.jsxs(m.CommandItem,{...d,value:t,onSelect:p=>{c(p),u?.(p)},children:[e.jsxRuntimeExports.jsx(v.IconComponent,{iconName:"IconCheck",className:e.cn("mr-2 size-4",h?"opacity-100":"opacity-0")}),r]})}function L(t){return e.jsxRuntimeExports.jsx(m.CommandGroup,{...t})}function _(t){return e.jsxRuntimeExports.jsx(m.CommandSeparator,{...t})}function M(){const t=n.useContext(V);if(t==null)throw new Error("useMultiSelectContext must be used within a MultiSelectContext");return t}exports.MultiSelect=k;exports.MultiSelectContent=q;exports.MultiSelectGroup=L;exports.MultiSelectItem=O;exports.MultiSelectSeparator=_;exports.MultiSelectTrigger=z;exports.MultiSelectValue=P;

package/dist/components/multi-select.d.ts

@@ -1,11 +1,15 @@
 import { Button } from '@/components/button';
 import { Command, CommandGroup, CommandItem, CommandSeparator } from '@/components/command';
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-declare function MultiSelect({ children, values, defaultValues, onValuesChange, }: {
+declare function MultiSelect({ children, values, defaultValues, onValuesChange, isLoading, onSearchChange, loadingText, noResultsText, }: {
     children: ReactNode;
     values?: string[];
     defaultValues?: string[];
     onValuesChange?: (values: string[]) => void;
+    isLoading?: boolean;
+    onSearchChange?: (value: string) => void;
+    loadingText?: string;
+    noResultsText?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare function MultiSelectTrigger({ className, children, size, ...props }: {
     className?: string;

package/dist/components/multi-select.es.js

@@ -1,70 +1,84 @@
-import { j as t, c as S } from "../index-DBpnlzOP.js";
-import { B as I } from "../badge-B4oRxQ-G.js";
-import { C as k, f as E, d as O, b as R, c as _, e as A, g as W } from "../command-CGUB58ej.js";
-import { P as F, b as G, c as B } from "../popover-C6pozFVL.js";
-import { createContext as L, useState as y, useCallback as V, useEffect as v, useRef as j, useLayoutEffect as T, useContext as X } from "react";
-import { I as C } from "../icon-component-DGImZz3K.js";
-const z = L(null);
-function U({
-  children: e,
-  values: n,
-  defaultValues: r,
-  onValuesChange: o
+import { j as e, c as z } from "../index-DBpnlzOP.js";
+import { B as E } from "../badge-B4oRxQ-G.js";
+import { C as P, f as R, d as _, b as A, c as L, e as F, g as W } from "../command-CGUB58ej.js";
+import { P as G, b as T, c as B } from "../popover-C6pozFVL.js";
+import { createContext as X, useState as y, useCallback as I, useEffect as k, useRef as V, useLayoutEffect as q, useContext as D } from "react";
+import { I as N } from "../icon-component-DGImZz3K.js";
+const O = X(null);
+function Z({
+  children: t,
+  values: r,
+  defaultValues: o,
+  onValuesChange: a,
+  isLoading: u,
+  onSearchChange: l,
+  loadingText: p = "Loading...",
+  noResultsText: c = "No results found"
 }) {
-  const [d, m] = y(!1), [g, p] = y(
-    new Set(n ?? r)
-  ), [w, f] = y(/* @__PURE__ */ new Map());
-  function b(a) {
-    const s = (l) => {
-      const c = new Set(l);
-      return c.has(a) ? c.delete(a) : c.add(a), c;
+  const [h, m] = y(!1), [b, f] = y(
+    new Set(r ?? o)
+  ), [v, d] = y(/* @__PURE__ */ new Map()), [g, j] = y("");
+  function s(n) {
+    const x = (w) => {
+      const C = new Set(w);
+      return C.has(n) ? C.delete(n) : C.add(n), C;
     };
-    p(s), o?.([...s(g)]);
+    f(x), a?.([...x(b)]);
   }
-  const x = V((a, s) => {
-    f((l) => l.get(a) === s ? l : new Map(l).set(a, s));
-  }, []);
-  return /* @__PURE__ */ t.jsx(
-    z,
+  const i = I((n, x) => {
+    d((w) => w.get(n) === x ? w : new Map(w).set(n, x));
+  }, []), S = I(
+    (n) => {
+      j(n), l?.(n);
+    },
+    [l]
+  );
+  return /* @__PURE__ */ e.jsx(
+    O,
     {
       value: {
-        open: d,
+        open: h,
         setOpen: m,
-        selectedValues: n ? new Set(n) : g,
-        toggleValue: b,
-        items: w,
-        onItemAdded: x
+        selectedValues: r ? new Set(r) : b,
+        toggleValue: s,
+        items: v,
+        onItemAdded: i,
+        isLoading: u,
+        searchValue: g,
+        onSearchChange: S,
+        loadingText: p,
+        noResultsText: c
       },
-      children: /* @__PURE__ */ t.jsx(F, { open: d, onOpenChange: m, children: e })
+      children: /* @__PURE__ */ e.jsx(G, { open: h, onOpenChange: m, children: t })
     }
   );
 }
-function Y({
-  className: e,
-  children: n,
-  size: r = "md",
-  ...o
+function $({
+  className: t,
+  children: r,
+  size: o = "md",
+  ...a
 }) {
-  const { open: d } = M();
-  return /* @__PURE__ */ t.jsx(B, { asChild: !0, children: /* @__PURE__ */ t.jsxs(
+  const { open: u } = M();
+  return /* @__PURE__ */ e.jsx(B, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
     "button",
     {
-      ...o,
-      role: o.role ?? "combobox",
-      "aria-expanded": o["aria-expanded"] ?? d,
-      "data-size": r,
-      className: S(
+      ...a,
+      role: a.role ?? "combobox",
+      "aria-expanded": a["aria-expanded"] ?? u,
+      "data-size": o,
+      className: z(
         "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 overflow-hidden rounded-md border bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        r === "xs" && 'label-sm h-7 px-2 py-1 [&_svg:not([class*="size-"])]:size-3.5',
-        r === "sm" && "label-md h-8 px-2 py-1",
-        r === "md" && "label-lg h-12 px-3 py-1",
-        r === "lg" && "label-xl h-16 px-4 py-2",
-        e
+        o === "xs" && 'label-sm h-7 px-2 py-1 [&_svg:not([class*="size-"])]:size-3.5',
+        o === "sm" && "label-md h-8 px-2 py-1",
+        o === "md" && "label-lg h-12 px-3 py-1",
+        o === "lg" && "label-xl h-16 px-4 py-2",
+        t
       ),
       children: [
-        n,
-        /* @__PURE__ */ t.jsx(
-          C,
+        r,
+        /* @__PURE__ */ e.jsx(
+          N,
           {
             iconName: "IconSelector",
             className: "size-4 shrink-0 opacity-50"
@@ -74,65 +88,65 @@ function Y({
     }
   ) });
 }
-function Z({
-  placeholder: e,
-  clickToRemove: n = !0,
-  className: r,
-  overflowBehavior: o = "wrap-when-open",
-  ...d
+function ee({
+  placeholder: t,
+  clickToRemove: r = !0,
+  className: o,
+  overflowBehavior: a = "wrap-when-open",
+  ...u
 }) {
-  const { selectedValues: m, toggleValue: g, items: p, open: w } = M(), [f, b] = y(0), x = j(null), a = j(null), s = j(/* @__PURE__ */ new Set()), l = o === "wrap" || o === "wrap-when-open" && w;
-  v(() => {
-    l && s.current.forEach((i) => i.style.removeProperty("display"));
-  }, [l]);
-  const c = V(() => {
-    if (x.current == null) return;
-    const i = x.current, u = a.current;
-    u != null && (u.style.display = "none"), s.current.forEach((h) => h.style.removeProperty("display"));
-    let N = 0;
-    for (let h = s.current.size - 1; h >= 0; h--) {
-      const P = [...s.current][h];
-      if (i.scrollWidth <= i.clientWidth)
+  const { selectedValues: l, toggleValue: p, items: c, open: h } = M(), [m, b] = y(0), f = V(null), v = V(null), d = V(/* @__PURE__ */ new Set()), g = a === "wrap" || a === "wrap-when-open" && h;
+  k(() => {
+    g && d.current.forEach((s) => s.style.removeProperty("display"));
+  }, [g]);
+  const j = I(() => {
+    if (f.current == null) return;
+    const s = f.current, i = v.current;
+    i != null && (i.style.display = "none"), d.current.forEach((n) => n.style.removeProperty("display"));
+    let S = 0;
+    for (let n = d.current.size - 1; n >= 0; n--) {
+      const x = [...d.current][n];
+      if (s.scrollWidth <= s.clientWidth)
         break;
-      N = s.current.size - h, P.style.display = "none", u?.style.removeProperty("display");
+      S = d.current.size - n, x.style.display = "none", i?.style.removeProperty("display");
     }
-    b(N);
+    b(S);
   }, []);
-  return v(() => {
-    if (x.current == null) return;
-    const i = new ResizeObserver(c);
-    return i.observe(x.current), () => i.disconnect();
-  }, [c]), T(() => {
-    c();
-  }, [m, c]), m.size === 0 && e ? /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground font-normal", children: e }) : /* @__PURE__ */ t.jsxs(
+  return k(() => {
+    if (f.current == null) return;
+    const s = new ResizeObserver(j);
+    return s.observe(f.current), () => s.disconnect();
+  }, [j]), q(() => {
+    j();
+  }, [l, j]), l.size === 0 && t ? /* @__PURE__ */ e.jsx("span", { className: "text-muted-foreground font-normal", children: t }) : /* @__PURE__ */ e.jsxs(
     "div",
     {
-      ...d,
-      ref: x,
-      className: S(
+      ...u,
+      ref: f,
+      className: z(
         "flex min-h-[1.75rem] w-full gap-1.5 overflow-hidden",
-        l && "flex-wrap",
-        r
+        g && "flex-wrap",
+        o
       ),
       children: [
-        [...m].filter((i) => p.has(i)).map((i) => /* @__PURE__ */ t.jsxs(
-          I,
+        [...l].filter((s) => c.has(s)).map((s) => /* @__PURE__ */ e.jsxs(
+          E,
           {
-            ref: (u) => {
-              if (u != null)
-                return s.current.add(u), () => {
-                  s.current.delete(u);
+            ref: (i) => {
+              if (i != null)
+                return d.current.add(i), () => {
+                  d.current.delete(i);
                 };
             },
             variant: "outline",
             className: "group flex items-center gap-1",
-            onClick: n ? (u) => {
-              u.stopPropagation(), g(i);
+            onClick: r ? (i) => {
+              i.stopPropagation(), p(s);
             } : void 0,
             children: [
-              p.get(i),
-              n && /* @__PURE__ */ t.jsx(
-                C,
+              c.get(s),
+              r && /* @__PURE__ */ e.jsx(
+                N,
                 {
                   iconName: "IconX",
                   className: "text-muted-foreground group-hover:text-destructive size-2"
@@ -140,19 +154,19 @@ function Z({
               )
             ]
           },
-          i
+          s
         )),
-        /* @__PURE__ */ t.jsxs(
-          I,
+        /* @__PURE__ */ e.jsxs(
+          E,
           {
             style: {
-              display: f > 0 && !l ? "block" : "none"
+              display: m > 0 && !g ? "block" : "none"
             },
             variant: "outline",
-            ref: a,
+            ref: v,
             children: [
               "+",
-              f
+              m
             ]
           }
         )
@@ -160,79 +174,90 @@ function Z({
     }
   );
 }
-function $({
-  search: e = !0,
-  children: n,
-  ...r
+function te({
+  search: t = !0,
+  children: r,
+  ...o
 }) {
-  const o = typeof e == "object" ? !0 : e;
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(E, { children: n }) }) }),
-    /* @__PURE__ */ t.jsx(G, { className: "min-w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ t.jsxs(k, { ...r, children: [
-      o ? /* @__PURE__ */ t.jsx(
-        O,
+  const { isLoading: a, onSearchChange: u, searchValue: l, noResultsText: p } = M(), c = typeof t == "object" ? !0 : t;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ e.jsx(P, { children: /* @__PURE__ */ e.jsx(R, { children: r }) }) }),
+    /* @__PURE__ */ e.jsx(T, { className: "min-w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ e.jsxs(P, { ...o, children: [
+      c ? /* @__PURE__ */ e.jsx(
+        _,
         {
-          placeholder: typeof e == "object" ? e.placeholder : void 0
+          placeholder: typeof t == "object" ? t.placeholder : void 0,
+          value: l,
+          onValueChange: u
         }
-      ) : /* @__PURE__ */ t.jsx("button", { autoFocus: !0, "aria-hidden": "true", className: "sr-only" }),
-      /* @__PURE__ */ t.jsxs(E, { children: [
-        o && /* @__PURE__ */ t.jsx(R, { children: typeof e == "object" ? e.emptyMessage : void 0 }),
-        n
-      ] })
+      ) : /* @__PURE__ */ e.jsx("button", { autoFocus: !0, "aria-hidden": "true", className: "sr-only" }),
+      /* @__PURE__ */ e.jsx(R, { children: a ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-center py-6", children: [
+        /* @__PURE__ */ e.jsx(
+          N,
+          {
+            iconName: "IconLoader2",
+            className: "text-muted-foreground size-4 animate-spin"
+          }
+        ),
+        /* @__PURE__ */ e.jsx("span", { className: "text-muted-foreground ml-2 text-sm", children: a })
+      ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        c && /* @__PURE__ */ e.jsx(A, { children: p }),
+        r
+      ] }) })
     ] }) })
   ] });
 }
-function ee({
-  value: e,
-  children: n,
-  badgeLabel: r,
-  onSelect: o,
-  ...d
+function ne({
+  value: t,
+  children: r,
+  badgeLabel: o,
+  onSelect: a,
+  ...u
 }) {
-  const { toggleValue: m, selectedValues: g, onItemAdded: p } = M(), w = g.has(e);
-  return v(() => {
-    p(e, r ?? n);
-  }, [e, n, p, r]), /* @__PURE__ */ t.jsxs(
-    A,
+  const { toggleValue: l, selectedValues: p, onItemAdded: c } = M(), h = p.has(t);
+  return k(() => {
+    c(t, o ?? r);
+  }, [t, r, c, o]), /* @__PURE__ */ e.jsxs(
+    F,
     {
-      ...d,
-      value: e,
-      onSelect: (f) => {
-        m(f), o?.(f);
+      ...u,
+      value: t,
+      onSelect: (m) => {
+        l(m), a?.(m);
       },
       children: [
-        /* @__PURE__ */ t.jsx(
-          C,
+        /* @__PURE__ */ e.jsx(
+          N,
           {
             iconName: "IconCheck",
-            className: S("mr-2 size-4", w ? "opacity-100" : "opacity-0")
+            className: z("mr-2 size-4", h ? "opacity-100" : "opacity-0")
           }
         ),
-        n
+        r
       ]
     }
   );
 }
-function te(e) {
-  return /* @__PURE__ */ t.jsx(_, { ...e });
+function re(t) {
+  return /* @__PURE__ */ e.jsx(L, { ...t });
 }
-function ne(e) {
-  return /* @__PURE__ */ t.jsx(W, { ...e });
+function se(t) {
+  return /* @__PURE__ */ e.jsx(W, { ...t });
 }
 function M() {
-  const e = X(z);
-  if (e == null)
+  const t = D(O);
+  if (t == null)
     throw new Error(
       "useMultiSelectContext must be used within a MultiSelectContext"
     );
-  return e;
+  return t;
 }
 export {
-  U as MultiSelect,
-  $ as MultiSelectContent,
-  te as MultiSelectGroup,
-  ee as MultiSelectItem,
-  ne as MultiSelectSeparator,
-  Y as MultiSelectTrigger,
-  Z as MultiSelectValue
+  Z as MultiSelect,
+  te as MultiSelectContent,
+  re as MultiSelectGroup,
+  ne as MultiSelectItem,
+  se as MultiSelectSeparator,
+  $ as MultiSelectTrigger,
+  ee as MultiSelectValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clasing/ui",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",