@trsys-tech/matrix-library 0.6.0 → 1.0.0-canary.0

package/dist/multiselect.es.js

@@ -1,35 +1,35 @@
-import { jsxs as s, jsx as r, Fragment as S } from "react/jsx-runtime";
-import * as l from "react";
-import { tv as ae } from "tailwind-variants";
-import { XMark as I, CircleXmark as le, ChevronDown as se, Check as D } from "@trsys-tech/matrix-icons";
-import { cn as f } from "./utils.es.js";
+import { jsxs as l, jsx as t, Fragment as S } from "react/jsx-runtime";
+import * as a from "react";
+import { tv as me } from "tailwind-variants";
+import { XMark as I, CircleXmark as ae, ChevronDown as le, Check as D } from "@trsys-tech/matrix-icons";
+import { cn as p } from "./utils.es.js";
 import { Badge as T } from "./badge.es.js";
-import { Button as oe } from "./button.es.js";
+import { Button as se } from "./button.es.js";
 import { Separator as A } from "./separator.es.js";
-import { Popover as ne, PopoverTrigger as ce, PopoverContent as ie } from "./popover.es.js";
-import { Command as de, CommandInput as ue, CommandList as me, CommandEmpty as pe, CommandGroup as R, CommandItem as w, CommandSeparator as fe } from "./command.es.js";
-const B = ae({
-  base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
+import { Popover as oe, PopoverTrigger as ne, PopoverContent as ce } from "./popover.es.js";
+import { Command as xe, CommandInput as ie, CommandList as de, CommandEmpty as ue, CommandGroup as R, CommandItem as y, CommandSeparator as pe } from "./command.es.js";
+const B = me({
+  base: "mtx-flex mtx-gap-1 mtx-items-center mtx-py-0.5 mtx-px-2 mtx-rounded-xl",
   variants: {
     variant: {
-      default: "border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50",
-      secondary: "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
-      destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-      inverted: "inverted"
+      default: "mtx-border-none mtx-shadow-none mtx-bg-primary-50 mtx-text-primary hover:mtx-bg-primary-50",
+      secondary: "mtx-border-foreground/10 mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary/80",
+      destructive: "mtx-border-transparent mtx-bg-destructive mtx-text-destructive-foreground hover:mtx-bg-destructive/80",
+      inverted: "mtx-inverted"
     }
   },
   defaultVariants: {
     variant: "default"
   }
-}), he = ({
-  options: m,
-  onValueChange: n,
+}), fe = ({
+  options: d,
+  onValueChange: o,
   value: k,
   variant: C,
   disabled: j,
   defaultValue: K = [],
   placeholder: L = "Select options",
-  maxCount: p = 3,
+  maxCount: u = 3,
   modalPopover: V = !1,
   // asChild = false,
   className: z,
@@ -39,185 +39,185 @@ const B = ae({
   selectAllText: G = "Select All",
   noResultsText: O = "No results found.",
   searchText: q = "Search...",
-  addOptionOnSearchNotFound: h = !1,
+  addOptionOnSearchNotFound: f = !1,
   showSelectAll: H = !0,
-  loading: b,
-  loadingText: g = "Loading...",
+  loading: h,
+  loadingText: b = "Loading...",
   ...J
 }, Q) => {
-  const o = k !== void 0, [U, d] = l.useState(K), t = o ? k : U, [Y, u] = l.useState(!1), v = l.useRef(null), [Z, P] = l.useState(""), [F, M] = l.useState(!1), [c, x] = l.useState(
-    new Map(m.map((e) => [e.value, e]))
-  ), _ = l.useCallback(
+  const s = k !== void 0, [U, x] = a.useState(K), r = s ? k : U, [Y, i] = a.useState(!1), g = a.useRef(null), [Z, P] = a.useState(""), [F, M] = a.useState(!1), [n, w] = a.useState(
+    new Map(d.map((e) => [e.value, e]))
+  ), _ = a.useCallback(
     (e) => {
-      if (e.key === "Enter" && h) {
-        if (u(!0), e.preventDefault(), e.stopPropagation(), !e.currentTarget.value) return;
-        const a = { value: e.currentTarget.value, label: e.currentTarget.value };
-        if (c.get(a.value) === void 0) {
-          x((N) => new Map(N).set(a.value, a));
-          const i = [...t, a.value];
-          o || d(i), n(i), P("");
+      if (e.key === "Enter" && f) {
+        if (i(!0), e.preventDefault(), e.stopPropagation(), !e.currentTarget.value) return;
+        const m = { value: e.currentTarget.value, label: e.currentTarget.value };
+        if (n.get(m.value) === void 0) {
+          w((N) => new Map(N).set(m.value, m));
+          const c = [...r, m.value];
+          s || x(c), o(c), P("");
         }
       } else if (e.key === "Enter")
-        u(!0);
+        i(!0);
       else if (e.key === "Backspace" && !e.currentTarget.value) {
-        const a = [...t];
-        a.pop(), o || d(a), n(a);
+        const m = [...r];
+        m.pop(), s || x(m), o(m);
       }
     },
-    [h, n, c, t, o]
-  ), E = l.useCallback(
+    [f, o, n, r, s]
+  ), E = a.useCallback(
     (e) => {
-      const a = t.includes(e) ? t.filter((i) => i !== e) : [...t, e];
-      o || d(a), n(a);
+      const m = r.includes(e) ? r.filter((c) => c !== e) : [...r, e];
+      s || x(m), o(m);
     },
-    [n, t, o]
-  ), y = l.useCallback(() => {
-    o || d([]), n([]), h && x(new Map(m.map((e) => [e.value, e])));
-  }, [n, h, m, o]), ee = l.useCallback(() => {
-    u((e) => !e);
-  }, []), re = l.useCallback(() => {
-    const e = t.slice(0, p);
-    o || d(e), n(e);
-  }, [p, t, n, o]), te = l.useCallback(() => {
-    if (t.length === c.size)
-      y();
+    [o, r, s]
+  ), v = a.useCallback(() => {
+    s || x([]), o([]), f && w(new Map(d.map((e) => [e.value, e])));
+  }, [o, f, d, s]), ee = a.useCallback(() => {
+    i((e) => !e);
+  }, []), te = a.useCallback(() => {
+    const e = r.slice(0, u);
+    s || x(e), o(e);
+  }, [u, r, o, s]), re = a.useCallback(() => {
+    if (r.length === n.size)
+      v();
     else {
-      const e = Array.from(c.keys());
-      o || d(e), n(e);
+      const e = Array.from(n.keys());
+      s || x(e), o(e);
     }
-  }, [y, n, c, t.length, o]);
-  return l.useEffect(() => {
-    x(new Map(m.map((e) => [e.value, e])));
-  }, [m]), l.useLayoutEffect(() => {
-    v.current && (v?.current?.firstChild?.offsetTop < v?.current?.lastChild?.offsetTop ? M(!0) : M(!1));
-  }, [t]), /* @__PURE__ */ s(ne, { open: Y, onOpenChange: u, modal: V, children: [
-    /* @__PURE__ */ r(ce, { asChild: !0, children: /* @__PURE__ */ r(
-      oe,
+  }, [v, o, n, r.length, s]);
+  return a.useEffect(() => {
+    w(new Map(d.map((e) => [e.value, e])));
+  }, [d]), a.useLayoutEffect(() => {
+    g.current && (g?.current?.firstChild?.offsetTop < g?.current?.lastChild?.offsetTop ? M(!0) : M(!1));
+  }, [r]), /* @__PURE__ */ l(oe, { open: Y, onOpenChange: i, modal: V, children: [
+    /* @__PURE__ */ t(ne, { asChild: !0, children: /* @__PURE__ */ t(
+      se,
       {
         ref: Q,
         variant: "text",
-        loading: b,
+        loading: h,
         disabled: j,
         ...J,
         onClick: ee,
-        className: f(
-          "group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
-          F && "h-auto",
+        className: p(
+          "mtx-group mtx-flex mtx-max-h-14 mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-px-3 mtx-py-1.5 mtx-text-sm mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300",
+          F && "mtx-h-auto",
           z
         ),
-        "data-placeholder": t.length ? void 0 : "",
-        endIcon: /* @__PURE__ */ r(
-          se,
+        "data-placeholder": r.length ? void 0 : "",
+        endIcon: /* @__PURE__ */ t(
+          le,
           {
             role: "button",
             "aria-label": "Expand dropdown",
-            className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform"
+            className: "!mtx-h-4.5 !mtx-w-4.5 mtx-cursor-pointer group-data-[state=open]:mtx-rotate-180 mtx-transition-transform"
           }
         ),
-        children: /* @__PURE__ */ r(S, { children: t.length > 0 ? /* @__PURE__ */ s("div", { className: "flex justify-between items-center w-full", children: [
-          /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", ref: v, children: [
-            t.slice(0, p).map((e) => {
-              const a = c.get(e), i = a?.icon;
-              return /* @__PURE__ */ s(T, { className: f(B({ variant: C }), { "text-gray-400 bg-gray-200": j || b }), children: [
-                /* @__PURE__ */ r(
+        children: /* @__PURE__ */ t(S, { children: r.length > 0 ? /* @__PURE__ */ l("div", { className: "mtx-flex mtx-justify-between mtx-items-center mtx-w-full", children: [
+          /* @__PURE__ */ l("div", { className: "mtx-flex mtx-flex-wrap mtx-items-center mtx-gap-2", ref: g, children: [
+            r.slice(0, u).map((e) => {
+              const m = n.get(e), c = m?.icon;
+              return /* @__PURE__ */ l(T, { className: p(B({ variant: C }), { "text-gray-400 bg-gray-200": j || h }), children: [
+                /* @__PURE__ */ t(
                   I,
                   {
-                    className: "h-4 w-4 cursor-pointer",
+                    className: "mtx-h-4 mtx-w-4 mtx-cursor-pointer",
                     onClick: (N) => {
                       N.stopPropagation(), E(e);
                     }
                   }
                 ),
-                i && /* @__PURE__ */ r(i, { className: "h-4 w-4 mr-2" }),
-                a?.label
+                c && /* @__PURE__ */ t(c, { className: "mtx-h-4 mtx-w-4 mtx-mr-2" }),
+                m?.label
               ] }, e);
             }),
-            t.length > p && /* @__PURE__ */ s(T, { className: f(B({ variant: C })), children: [
-              `+ ${t.length - p} ${W}`,
-              /* @__PURE__ */ r(
-                le,
+            r.length > u && /* @__PURE__ */ l(T, { className: p(B({ variant: C })), children: [
+              `+ ${r.length - u} ${W}`,
+              /* @__PURE__ */ t(
+                ae,
                 {
                   role: "button",
-                  className: "ml-2 h-4.5 w-4.5 cursor-pointer",
+                  className: "mtx-ml-2 mtx-h-4.5 mtx-w-4.5 mtx-cursor-pointer",
                   onClick: (e) => {
-                    e.stopPropagation(), re();
+                    e.stopPropagation(), te();
                   }
                 }
               )
             ] }),
-            b && g ? g : null
+            h && b ? b : null
           ] }),
-          /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-1", children: [
-            /* @__PURE__ */ r(
+          /* @__PURE__ */ l("div", { className: "mtx-flex mtx-items-center mtx-justify-between mtx-gap-1", children: [
+            /* @__PURE__ */ t(
               I,
               {
                 role: "button",
-                className: "h-5 w-5 text-muted-foreground cursor-pointer",
+                className: "mtx-h-5 mtx-w-5 mtx-text-muted-foreground mtx-cursor-pointer",
                 onClick: (e) => {
-                  e.stopPropagation(), y();
+                  e.stopPropagation(), v();
                 },
                 "aria-label": "Clear"
               }
             ),
-            /* @__PURE__ */ r(A, { orientation: "vertical", className: "flex min-h-5 h-full" })
+            /* @__PURE__ */ t(A, { orientation: "vertical", className: "mtx-flex mtx-min-h-5 mtx-h-full" })
           ] })
-        ] }) : /* @__PURE__ */ r(S, { children: b && g ? g : L }) })
+        ] }) : /* @__PURE__ */ t(S, { children: h && b ? b : L }) })
       }
     ) }),
-    /* @__PURE__ */ r(ie, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => u(!1), children: /* @__PURE__ */ s(de, { className: "w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]", children: [
-      /* @__PURE__ */ r(ue, { placeholder: q, onKeyDown: _, value: Z, onValueChange: P }),
-      /* @__PURE__ */ s(me, { className: "", children: [
-        /* @__PURE__ */ r(pe, { children: O }),
-        /* @__PURE__ */ s(R, { children: [
-          H && /* @__PURE__ */ s(w, { onSelect: te, className: "cursor-pointer", children: [
-            /* @__PURE__ */ r(
+    /* @__PURE__ */ t(ce, { className: "mtx-w-auto mtx-p-0", align: "start", onEscapeKeyDown: () => i(!1), children: /* @__PURE__ */ l(xe, { className: "mtx-w-[--radix-popper-anchor-width] mtx-max-h-[--radix-popper-available-height]", children: [
+      /* @__PURE__ */ t(ie, { placeholder: q, onKeyDown: _, value: Z, onValueChange: P }),
+      /* @__PURE__ */ l(de, { className: "", children: [
+        /* @__PURE__ */ t(ue, { children: O }),
+        /* @__PURE__ */ l(R, { children: [
+          H && /* @__PURE__ */ l(y, { onSelect: re, className: "mtx-cursor-pointer", children: [
+            /* @__PURE__ */ t(
               "div",
               {
-                className: f(
-                  "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
-                  t.length === c.size ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                className: p(
+                  "mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary",
+                  r.length === n.size ? "mtx-bg-primary mtx-text-primary-foreground" : "mtx-opacity-50 [&_svg]:mtx-invisible"
                 ),
-                children: /* @__PURE__ */ r(D, { className: "h-4.5 w-4.5" })
+                children: /* @__PURE__ */ t(D, { className: "mtx-h-4.5 mtx-w-4.5" })
               }
             ),
-            /* @__PURE__ */ s("span", { children: [
+            /* @__PURE__ */ l("span", { children: [
               "(",
               G,
               ")"
             ] })
           ] }, "all"),
-          Array.from(c.values()).map((e) => {
-            const a = t.includes(e.value);
-            return /* @__PURE__ */ s(w, { onSelect: () => E(e.value), className: "cursor-pointer", children: [
-              /* @__PURE__ */ r(
+          Array.from(n.values()).map((e) => {
+            const m = r.includes(e.value);
+            return /* @__PURE__ */ l(y, { onSelect: () => E(e.value), className: "mtx-cursor-pointer", children: [
+              /* @__PURE__ */ t(
                 "div",
                 {
-                  className: f(
-                    "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
-                    a ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                  className: p(
+                    "mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary",
+                    m ? "mtx-bg-primary mtx-text-primary-foreground" : "mtx-opacity-50 [&_svg]:mtx-invisible"
                   ),
-                  children: /* @__PURE__ */ r(D, { className: "h-4.5 w-4.5" })
+                  children: /* @__PURE__ */ t(D, { className: "mtx-h-4.5 mtx-w-4.5" })
                 }
               ),
-              e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4.5 w-4.5 text-muted-foreground" }),
-              /* @__PURE__ */ r("span", { children: e.label })
+              e.icon && /* @__PURE__ */ t(e.icon, { className: "mtx-mr-2 mtx-h-4.5 mtx-w-4.5 mtx-text-muted-foreground" }),
+              /* @__PURE__ */ t("span", { children: e.label })
             ] }, e.value);
           })
         ] }),
-        /* @__PURE__ */ r(fe, {}),
-        /* @__PURE__ */ r(R, { children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
-          t.length > 0 && /* @__PURE__ */ s(S, { children: [
-            /* @__PURE__ */ r(w, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: X }),
-            /* @__PURE__ */ r(A, { orientation: "vertical", className: "flex min-h-6 h-full" })
+        /* @__PURE__ */ t(pe, {}),
+        /* @__PURE__ */ t(R, { children: /* @__PURE__ */ l("div", { className: "mtx-flex mtx-items-center mtx-justify-between", children: [
+          r.length > 0 && /* @__PURE__ */ l(S, { children: [
+            /* @__PURE__ */ t(y, { onSelect: v, className: "mtx-flex-1 mtx-justify-center mtx-cursor-pointer", children: X }),
+            /* @__PURE__ */ t(A, { orientation: "vertical", className: "mtx-flex mtx-min-h-6 mtx-h-full" })
           ] }),
-          /* @__PURE__ */ r(w, { onSelect: () => u(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: $ })
+          /* @__PURE__ */ t(y, { onSelect: () => i(!1), className: "mtx-flex-1 mtx-justify-center mtx-cursor-pointer mtx-max-w-full", children: $ })
         ] }) })
       ] })
     ] }) })
   ] });
-}, be = l.forwardRef(he);
-be.displayName = "MultiSelect";
+}, he = a.forwardRef(fe);
+he.displayName = "MultiSelect";
 export {
-  be as MultiSelect
+  he as MultiSelect
 };
 //# sourceMappingURL=multiselect.es.js.map

package/dist/multiselect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = tv({\r\n  base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n      secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n      inverted: \"inverted\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps<T extends string | number>\r\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n    VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   *\r\n   * *Important: Use a constant Array*\r\n   */\r\n  options: {\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: T;\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n  }[];\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange: (value: T[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: T[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: T[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Text to display on the close button when the multi-select component is open.\r\n   */\r\n  closeText?: string;\r\n\r\n  /**\r\n   * Whether to show the select all option or not\r\n   */\r\n  showSelectAll?: boolean;\r\n\r\n  /**\r\n   * Text to display on the select all button when the multi-select component is open.\r\n   */\r\n  selectAllText?: string;\r\n\r\n  /**\r\n   * Text to display in the search input.\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n   * Optional, defaults to false.\r\n   */\r\n  addOptionOnSearchNotFound?: boolean;\r\n\r\n  /**\r\n   * Text to display on the clear button when the multi-select component is open.\r\n   */\r\n  clearText?: string;\r\n\r\n  /**\r\n   * Text to display on the more button when the multi-select component is open.\r\n   */\r\n  moreText?: string;\r\n\r\n  /**\r\n   * Text to display when no results are found in the search input.\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be in a loading state.\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Text to display when the multi-select component is in a loading state.\r\n   */\r\n  loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string | number>(\r\n  {\r\n    options: _options,\r\n    onValueChange,\r\n    value,\r\n    variant,\r\n    disabled,\r\n    defaultValue = [],\r\n    placeholder = \"Select options\",\r\n    maxCount = 3,\r\n    modalPopover = false,\r\n    // asChild = false,\r\n    className,\r\n    moreText = \"more\",\r\n    clearText = \"Clear\",\r\n    closeText = \"Close\",\r\n    selectAllText = \"Select All\",\r\n    noResultsText = \"No results found.\",\r\n    searchText = \"Search...\",\r\n    addOptionOnSearchNotFound = false,\r\n    showSelectAll = true,\r\n    loading,\r\n    loadingText = \"Loading...\",\r\n    ...props\r\n  }: MultiSelectProps<T>,\r\n  ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n  const isControlled = value !== undefined;\r\n  const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n  const selectedValues = isControlled ? value : internalSelectedValues;\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n  const [searchValue, setSearchValue] = React.useState(\"\");\r\n  const [isWrapped, setIsWrapped] = React.useState(false);\r\n  const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n    new Map(_options.map(option => [option.value, option])),\r\n  );\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n        setIsPopoverOpen(true);\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        if (!event.currentTarget.value) return;\r\n        const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n        if (options.get(newOption.value) === undefined) {\r\n          setOptions(prev => {\r\n            return new Map(prev).set(newOption.value, newOption);\r\n          });\r\n          const newSelectedValues = [...selectedValues, newOption.value];\r\n          if (!isControlled) {\r\n            setInternalSelectedValues(newSelectedValues);\r\n          }\r\n          onValueChange(newSelectedValues);\r\n          setSearchValue(\"\");\r\n        }\r\n      } else if (event.key === \"Enter\") {\r\n        setIsPopoverOpen(true);\r\n      } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n        const newSelectedValues = [...selectedValues];\r\n        newSelectedValues.pop();\r\n        if (!isControlled) {\r\n          setInternalSelectedValues(newSelectedValues);\r\n        }\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    },\r\n    [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n  );\r\n\r\n  const toggleOption = React.useCallback(\r\n    (option: T) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(newSelectedValues);\r\n      }\r\n      onValueChange(newSelectedValues);\r\n    },\r\n    [onValueChange, selectedValues, isControlled],\r\n  );\r\n\r\n  const handleClear = React.useCallback(() => {\r\n    if (!isControlled) {\r\n      setInternalSelectedValues([]);\r\n    }\r\n    onValueChange([]);\r\n    if (addOptionOnSearchNotFound) {\r\n      setOptions(new Map(_options.map(option => [option.value, option])));\r\n    }\r\n  }, [onValueChange, addOptionOnSearchNotFound, _options, isControlled]);\r\n\r\n  const handleTogglePopover = React.useCallback(() => {\r\n    setIsPopoverOpen(prev => !prev);\r\n  }, []);\r\n\r\n  const clearExtraOptions = React.useCallback(() => {\r\n    const newSelectedValues = selectedValues.slice(0, maxCount);\r\n    if (!isControlled) {\r\n      setInternalSelectedValues(newSelectedValues);\r\n    }\r\n    onValueChange(newSelectedValues);\r\n  }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n  const toggleAll = React.useCallback(() => {\r\n    if (selectedValues.length === options.size) {\r\n      handleClear();\r\n    } else {\r\n      const allValues = Array.from(options.keys());\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(allValues);\r\n      }\r\n      onValueChange(allValues);\r\n    }\r\n  }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\r\n\r\n  React.useEffect(() => {\r\n    setOptions(new Map(_options.map(option => [option.value, option])));\r\n  }, [_options]);\r\n\r\n  React.useLayoutEffect(() => {\r\n    if (containerRef.current) {\r\n      if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n        setIsWrapped(true);\r\n      } else {\r\n        setIsWrapped(false);\r\n      }\r\n    }\r\n  }, [selectedValues]);\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          ref={ref}\r\n          variant=\"text\"\r\n          loading={loading}\r\n          disabled={disabled}\r\n          {...props}\r\n          onClick={handleTogglePopover}\r\n          className={cn(\r\n            \"group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            isWrapped && \"h-auto\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n          endIcon={\r\n            <ChevronDown\r\n              role=\"button\"\r\n              aria-label=\"Expand dropdown\"\r\n              className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n            />\r\n          }\r\n        >\r\n          <>\r\n            {selectedValues.length > 0 ? (\r\n              <div className=\"flex justify-between items-center w-full\">\r\n                <div className=\"flex flex-wrap items-center gap-2\" ref={containerRef}>\r\n                  {selectedValues.slice(0, maxCount).map(value => {\r\n                    const option = options.get(value);\r\n                    const IconComponent = option?.icon;\r\n                    return (\r\n                      <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                        <XMark\r\n                          className=\"h-4 w-4 cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            toggleOption(value);\r\n                          }}\r\n                        />\r\n                        {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n                        {option?.label}\r\n                      </Badge>\r\n                    );\r\n                  })}\r\n                  {selectedValues.length > maxCount && (\r\n                    <Badge className={cn(multiSelectVariants({ variant }))}>\r\n                      {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n                      <CircleXmark\r\n                        role=\"button\"\r\n                        className=\"ml-2 h-4.5 w-4.5 cursor-pointer\"\r\n                        onClick={event => {\r\n                          event.stopPropagation();\r\n                          clearExtraOptions();\r\n                        }}\r\n                      />\r\n                    </Badge>\r\n                  )}\r\n                  {loading && loadingText ? loadingText : null}\r\n                </div>\r\n                <div className=\"flex items-center justify-between gap-1\">\r\n                  <XMark\r\n                    role=\"button\"\r\n                    className=\"h-5 w-5 text-muted-foreground cursor-pointer\"\r\n                    onClick={event => {\r\n                      event.stopPropagation();\r\n                      handleClear();\r\n                    }}\r\n                    aria-label=\"Clear\"\r\n                  />\r\n                  <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n                </div>\r\n              </div>\r\n            ) : (\r\n              <>{loading && loadingText ? loadingText : placeholder}</>\r\n            )}\r\n          </>\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n        <Command className=\"w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]\">\r\n          <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n          <CommandList className=\"\">\r\n            <CommandEmpty>{noResultsText}</CommandEmpty>\r\n            <CommandGroup>\r\n              {showSelectAll && (\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n                      selectedValues.length === options.size ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"h-4.5 w-4.5\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n              )}\r\n              {Array.from(options.values()).map(option => {\r\n                const isSelected = selectedValues.includes(option.value);\r\n                return (\r\n                  <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n                    <div\r\n                      className={cn(\r\n                        \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n                        isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                      )}\r\n                    >\r\n                      <Check className=\"h-4.5 w-4.5\" />\r\n                    </div>\r\n                    {option.icon && <option.icon className=\"mr-2 h-4.5 w-4.5 text-muted-foreground\" />}\r\n                    <span>{option.label}</span>\r\n                  </CommandItem>\r\n                );\r\n              })}\r\n            </CommandGroup>\r\n            <CommandSeparator />\r\n            <CommandGroup>\r\n              <div className=\"flex items-center justify-between\">\r\n                {selectedValues.length > 0 && (\r\n                  <>\r\n                    <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n                      {clearText}\r\n                    </CommandItem>\r\n                    <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n                  </>\r\n                )}\r\n                <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n                  {closeText}\r\n                </CommandItem>\r\n              </div>\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n  props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","_options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}
+{"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = tv({\r\n  base: \"mtx-flex mtx-gap-1 mtx-items-center mtx-py-0.5 mtx-px-2 mtx-rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"mtx-border-none mtx-shadow-none mtx-bg-primary-50 mtx-text-primary hover:mtx-bg-primary-50\",\r\n      secondary: \"mtx-border-foreground/10 mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary/80\",\r\n      destructive: \"mtx-border-transparent mtx-bg-destructive mtx-text-destructive-foreground hover:mtx-bg-destructive/80\",\r\n      inverted: \"mtx-inverted\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps<T extends string | number>\r\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n    VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   *\r\n   * *Important: Use a constant Array*\r\n   */\r\n  options: {\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: T;\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n  }[];\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange: (value: T[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: T[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: T[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Text to display on the close button when the multi-select component is open.\r\n   */\r\n  closeText?: string;\r\n\r\n  /**\r\n   * Whether to show the select all option or not\r\n   */\r\n  showSelectAll?: boolean;\r\n\r\n  /**\r\n   * Text to display on the select all button when the multi-select component is open.\r\n   */\r\n  selectAllText?: string;\r\n\r\n  /**\r\n   * Text to display in the search input.\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n   * Optional, defaults to false.\r\n   */\r\n  addOptionOnSearchNotFound?: boolean;\r\n\r\n  /**\r\n   * Text to display on the clear button when the multi-select component is open.\r\n   */\r\n  clearText?: string;\r\n\r\n  /**\r\n   * Text to display on the more button when the multi-select component is open.\r\n   */\r\n  moreText?: string;\r\n\r\n  /**\r\n   * Text to display when no results are found in the search input.\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be in a loading state.\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Text to display when the multi-select component is in a loading state.\r\n   */\r\n  loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string | number>(\r\n  {\r\n    options: _options,\r\n    onValueChange,\r\n    value,\r\n    variant,\r\n    disabled,\r\n    defaultValue = [],\r\n    placeholder = \"Select options\",\r\n    maxCount = 3,\r\n    modalPopover = false,\r\n    // asChild = false,\r\n    className,\r\n    moreText = \"more\",\r\n    clearText = \"Clear\",\r\n    closeText = \"Close\",\r\n    selectAllText = \"Select All\",\r\n    noResultsText = \"No results found.\",\r\n    searchText = \"Search...\",\r\n    addOptionOnSearchNotFound = false,\r\n    showSelectAll = true,\r\n    loading,\r\n    loadingText = \"Loading...\",\r\n    ...props\r\n  }: MultiSelectProps<T>,\r\n  ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n  const isControlled = value !== undefined;\r\n  const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n  const selectedValues = isControlled ? value : internalSelectedValues;\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n  const [searchValue, setSearchValue] = React.useState(\"\");\r\n  const [isWrapped, setIsWrapped] = React.useState(false);\r\n  const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n    new Map(_options.map(option => [option.value, option])),\r\n  );\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n        setIsPopoverOpen(true);\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        if (!event.currentTarget.value) return;\r\n        const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n        if (options.get(newOption.value) === undefined) {\r\n          setOptions(prev => {\r\n            return new Map(prev).set(newOption.value, newOption);\r\n          });\r\n          const newSelectedValues = [...selectedValues, newOption.value];\r\n          if (!isControlled) {\r\n            setInternalSelectedValues(newSelectedValues);\r\n          }\r\n          onValueChange(newSelectedValues);\r\n          setSearchValue(\"\");\r\n        }\r\n      } else if (event.key === \"Enter\") {\r\n        setIsPopoverOpen(true);\r\n      } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n        const newSelectedValues = [...selectedValues];\r\n        newSelectedValues.pop();\r\n        if (!isControlled) {\r\n          setInternalSelectedValues(newSelectedValues);\r\n        }\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    },\r\n    [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n  );\r\n\r\n  const toggleOption = React.useCallback(\r\n    (option: T) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(newSelectedValues);\r\n      }\r\n      onValueChange(newSelectedValues);\r\n    },\r\n    [onValueChange, selectedValues, isControlled],\r\n  );\r\n\r\n  const handleClear = React.useCallback(() => {\r\n    if (!isControlled) {\r\n      setInternalSelectedValues([]);\r\n    }\r\n    onValueChange([]);\r\n    if (addOptionOnSearchNotFound) {\r\n      setOptions(new Map(_options.map(option => [option.value, option])));\r\n    }\r\n  }, [onValueChange, addOptionOnSearchNotFound, _options, isControlled]);\r\n\r\n  const handleTogglePopover = React.useCallback(() => {\r\n    setIsPopoverOpen(prev => !prev);\r\n  }, []);\r\n\r\n  const clearExtraOptions = React.useCallback(() => {\r\n    const newSelectedValues = selectedValues.slice(0, maxCount);\r\n    if (!isControlled) {\r\n      setInternalSelectedValues(newSelectedValues);\r\n    }\r\n    onValueChange(newSelectedValues);\r\n  }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n  const toggleAll = React.useCallback(() => {\r\n    if (selectedValues.length === options.size) {\r\n      handleClear();\r\n    } else {\r\n      const allValues = Array.from(options.keys());\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(allValues);\r\n      }\r\n      onValueChange(allValues);\r\n    }\r\n  }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\r\n\r\n  React.useEffect(() => {\r\n    setOptions(new Map(_options.map(option => [option.value, option])));\r\n  }, [_options]);\r\n\r\n  React.useLayoutEffect(() => {\r\n    if (containerRef.current) {\r\n      if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n        setIsWrapped(true);\r\n      } else {\r\n        setIsWrapped(false);\r\n      }\r\n    }\r\n  }, [selectedValues]);\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          ref={ref}\r\n          variant=\"text\"\r\n          loading={loading}\r\n          disabled={disabled}\r\n          {...props}\r\n          onClick={handleTogglePopover}\r\n          className={cn(\r\n            \"mtx-group mtx-flex mtx-max-h-14 mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-px-3 mtx-py-1.5 mtx-text-sm mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n            isWrapped && \"mtx-h-auto\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n          endIcon={\r\n            <ChevronDown\r\n              role=\"button\"\r\n              aria-label=\"Expand dropdown\"\r\n              className=\"!mtx-h-4.5 !mtx-w-4.5 mtx-cursor-pointer group-data-[state=open]:mtx-rotate-180 mtx-transition-transform\"\r\n            />\r\n          }\r\n        >\r\n          <>\r\n            {selectedValues.length > 0 ? (\r\n              <div className=\"mtx-flex mtx-justify-between mtx-items-center mtx-w-full\">\r\n                <div className=\"mtx-flex mtx-flex-wrap mtx-items-center mtx-gap-2\" ref={containerRef}>\r\n                  {selectedValues.slice(0, maxCount).map(value => {\r\n                    const option = options.get(value);\r\n                    const IconComponent = option?.icon;\r\n                    return (\r\n                      <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                        <XMark\r\n                          className=\"mtx-h-4 mtx-w-4 mtx-cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            toggleOption(value);\r\n                          }}\r\n                        />\r\n                        {IconComponent && <IconComponent className=\"mtx-h-4 mtx-w-4 mtx-mr-2\" />}\r\n                        {option?.label}\r\n                      </Badge>\r\n                    );\r\n                  })}\r\n                  {selectedValues.length > maxCount && (\r\n                    <Badge className={cn(multiSelectVariants({ variant }))}>\r\n                      {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n                      <CircleXmark\r\n                        role=\"button\"\r\n                        className=\"mtx-ml-2 mtx-h-4.5 mtx-w-4.5 mtx-cursor-pointer\"\r\n                        onClick={event => {\r\n                          event.stopPropagation();\r\n                          clearExtraOptions();\r\n                        }}\r\n                      />\r\n                    </Badge>\r\n                  )}\r\n                  {loading && loadingText ? loadingText : null}\r\n                </div>\r\n                <div className=\"mtx-flex mtx-items-center mtx-justify-between mtx-gap-1\">\r\n                  <XMark\r\n                    role=\"button\"\r\n                    className=\"mtx-h-5 mtx-w-5 mtx-text-muted-foreground mtx-cursor-pointer\"\r\n                    onClick={event => {\r\n                      event.stopPropagation();\r\n                      handleClear();\r\n                    }}\r\n                    aria-label=\"Clear\"\r\n                  />\r\n                  <Separator orientation=\"vertical\" className=\"mtx-flex mtx-min-h-5 mtx-h-full\" />\r\n                </div>\r\n              </div>\r\n            ) : (\r\n              <>{loading && loadingText ? loadingText : placeholder}</>\r\n            )}\r\n          </>\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"mtx-w-auto mtx-p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n        <Command className=\"mtx-w-[--radix-popper-anchor-width] mtx-max-h-[--radix-popper-available-height]\">\r\n          <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n          <CommandList className=\"\">\r\n            <CommandEmpty>{noResultsText}</CommandEmpty>\r\n            <CommandGroup>\r\n              {showSelectAll && (\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"mtx-cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                      selectedValues.length === options.size ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n              )}\r\n              {Array.from(options.values()).map(option => {\r\n                const isSelected = selectedValues.includes(option.value);\r\n                return (\r\n                  <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"mtx-cursor-pointer\">\r\n                    <div\r\n                      className={cn(\r\n                        \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                        isSelected ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                      )}\r\n                    >\r\n                      <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                    </div>\r\n                    {option.icon && <option.icon className=\"mtx-mr-2 mtx-h-4.5 mtx-w-4.5 mtx-text-muted-foreground\" />}\r\n                    <span>{option.label}</span>\r\n                  </CommandItem>\r\n                );\r\n              })}\r\n            </CommandGroup>\r\n            <CommandSeparator />\r\n            <CommandGroup>\r\n              <div className=\"mtx-flex mtx-items-center mtx-justify-between\">\r\n                {selectedValues.length > 0 && (\r\n                  <>\r\n                    <CommandItem onSelect={handleClear} className=\"mtx-flex-1 mtx-justify-center mtx-cursor-pointer\">\r\n                      {clearText}\r\n                    </CommandItem>\r\n                    <Separator orientation=\"vertical\" className=\"mtx-flex mtx-min-h-6 mtx-h-full\" />\r\n                  </>\r\n                )}\r\n                <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"mtx-flex-1 mtx-justify-center mtx-cursor-pointer mtx-max-w-full\">\r\n                  {closeText}\r\n                </CommandItem>\r\n              </div>\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n  props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","_options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}

package/dist/popover.es.js

@@ -1,25 +1,25 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
-import * as o from "@radix-ui/react-popover";
-import { cn as s } from "./utils.es.js";
-const l = o.Root, c = o.Trigger, g = o.Anchor, m = n.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
-  o.Content,
+import { jsx as o } from "react/jsx-runtime";
+import * as i from "react";
+import * as t from "@radix-ui/react-popover";
+import { cn as n } from "./utils.es.js";
+const f = t.Root, l = t.Trigger, c = t.Anchor, s = i.forwardRef(({ className: e, align: a = "center", sideOffset: m = 4, ...r }, d) => /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
+  t.Content,
   {
-    ref: i,
+    ref: d,
     align: a,
-    sideOffset: r,
-    className: s(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    sideOffset: m,
+    className: n(
+      "mtx-z-50 mtx-w-72 mtx-rounded-md mtx-border mtx-bg-popover mtx-p-4 mtx-text-popover-foreground mtx-shadow-md mtx-outline-none data-[state=open]:mtx-animate-in data-[state=closed]:mtx-animate-out data-[state=closed]:mtx-fade-out-0 data-[state=open]:mtx-fade-in-0 data-[state=closed]:mtx-zoom-out-95 data-[state=open]:mtx-zoom-in-95 data-[side=bottom]:mtx-slide-in-from-top-2 data-[side=left]:mtx-slide-in-from-right-2 data-[side=right]:mtx-slide-in-from-left-2 data-[side=top]:mtx-slide-in-from-bottom-2",
       e
     ),
-    ...d
+    ...r
   }
 ) }));
-m.displayName = o.Content.displayName;
+s.displayName = t.Content.displayName;
 export {
-  l as Popover,
-  g as PopoverAnchor,
-  m as PopoverContent,
-  c as PopoverTrigger
+  f as Popover,
+  c as PopoverAnchor,
+  s as PopoverContent,
+  l as PopoverTrigger
 };
 //# sourceMappingURL=popover.es.js.map

package/dist/popover.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.es.js","sources":["../src/components/popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport type { PopoverContentProps, PopoverProps, PopoverTriggerProps, PopoverAnchorProps } from \"@radix-ui/react-popover\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst Popover = PopoverPrimitive.Root;\r\n\r\nconst PopoverTrigger = PopoverPrimitive.Trigger;\r\n\r\nconst PopoverAnchor = PopoverPrimitive.Anchor;\r\n\r\nconst PopoverContent = React.forwardRef<\r\n  React.ElementRef<typeof PopoverPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\r\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\r\n  <PopoverPrimitive.Portal>\r\n    <PopoverPrimitive.Content\r\n      ref={ref}\r\n      align={align}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  </PopoverPrimitive.Portal>\r\n));\r\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\r\n\r\nexport {\r\n  Popover,\r\n  PopoverTrigger,\r\n  PopoverContent,\r\n  PopoverAnchor,\r\n  type PopoverProps,\r\n  type PopoverContentProps,\r\n  type PopoverTriggerProps,\r\n  type PopoverAnchorProps,\r\n};\r\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverAnchor","PopoverContent","React","className","align","sideOffset","props","ref","jsx","cn"],"mappings":";;;;AAQA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB,QAEjCG,IAAiBC,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,OAAAC,IAAQ,UAAU,YAAAC,IAAa,GAAG,GAAGC,EAAA,GAASC,MAC5D,gBAAAC,EAACV,EAAiB,QAAjB,EACC,UAAA,gBAAAU;AAAA,EAACV,EAAiB;AAAA,EAAjB;AAAA,IACC,KAAAS;AAAA,IACA,OAAAH;AAAA,IACA,YAAAC;AAAA,IACA,WAAWI;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,EAAA;AACN,GACF,CACD;AACDL,EAAe,cAAcH,EAAiB,QAAQ;"}
+{"version":3,"file":"popover.es.js","sources":["../src/components/popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport type { PopoverContentProps, PopoverProps, PopoverTriggerProps, PopoverAnchorProps } from \"@radix-ui/react-popover\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst Popover = PopoverPrimitive.Root;\r\n\r\nconst PopoverTrigger = PopoverPrimitive.Trigger;\r\n\r\nconst PopoverAnchor = PopoverPrimitive.Anchor;\r\n\r\nconst PopoverContent = React.forwardRef<\r\n  React.ElementRef<typeof PopoverPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\r\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\r\n  <PopoverPrimitive.Portal>\r\n    <PopoverPrimitive.Content\r\n      ref={ref}\r\n      align={align}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"mtx-z-50 mtx-w-72 mtx-rounded-md mtx-border mtx-bg-popover mtx-p-4 mtx-text-popover-foreground mtx-shadow-md mtx-outline-none data-[state=open]:mtx-animate-in data-[state=closed]:mtx-animate-out data-[state=closed]:mtx-fade-out-0 data-[state=open]:mtx-fade-in-0 data-[state=closed]:mtx-zoom-out-95 data-[state=open]:mtx-zoom-in-95 data-[side=bottom]:mtx-slide-in-from-top-2 data-[side=left]:mtx-slide-in-from-right-2 data-[side=right]:mtx-slide-in-from-left-2 data-[side=top]:mtx-slide-in-from-bottom-2\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  </PopoverPrimitive.Portal>\r\n));\r\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\r\n\r\nexport {\r\n  Popover,\r\n  PopoverTrigger,\r\n  PopoverContent,\r\n  PopoverAnchor,\r\n  type PopoverProps,\r\n  type PopoverContentProps,\r\n  type PopoverTriggerProps,\r\n  type PopoverAnchorProps,\r\n};\r\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverAnchor","PopoverContent","React","className","align","sideOffset","props","ref","jsx","cn"],"mappings":";;;;AAQA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB,QAEjCG,IAAiBC,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,OAAAC,IAAQ,UAAU,YAAAC,IAAa,GAAG,GAAGC,EAAA,GAASC,MAC5D,gBAAAC,EAACV,EAAiB,QAAjB,EACC,UAAA,gBAAAU;AAAA,EAACV,EAAiB;AAAA,EAAjB;AAAA,IACC,KAAAS;AAAA,IACA,OAAAH;AAAA,IACA,YAAAC;AAAA,IACA,WAAWI;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,EAAA;AACN,GACF,CACD;AACDL,EAAe,cAAcH,EAAiB,QAAQ;"}

package/dist/progress.es.js

@@ -1,39 +1,47 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as f from "react";
+import { jsx as t } from "react/jsx-runtime";
+import * as l from "react";
 import * as r from "@radix-ui/react-progress";
-import { cn as s } from "./utils.es.js";
-import { tv as g } from "tailwind-variants";
-const i = g({
+import { cn as a } from "./utils.es.js";
+import { tv as f } from "tailwind-variants";
+const m = f({
   base: "",
   variants: {
     variant: {
-      primary: "bg-primary",
-      info: "bg-info",
-      success: "bg-success",
-      warning: "bg-warning",
-      danger: "bg-danger"
+      primary: "mtx-bg-primary",
+      info: "mtx-bg-info",
+      success: "mtx-bg-success",
+      warning: "mtx-bg-warning",
+      danger: "mtx-bg-danger"
     },
     size: {
-      sm: "h-[3px]",
-      md: "h-[4px]",
-      lg: "h-[5px]"
+      sm: "mtx-h-[3px]",
+      md: "mtx-h-[4px]",
+      lg: "mtx-h-[5px]"
     }
   },
   defaultVariants: {
     variant: "primary",
     size: "md"
   }
-}), p = f.forwardRef(
-  ({ className: o, value: e, variant: t, size: n, ...m }, l) => /* @__PURE__ */ a(r.Root, { ref: l, className: s(i({ size: n }), "relative w-full overflow-hidden bg-gray-300", o), ...m, children: /* @__PURE__ */ a(
-    r.Indicator,
+}), g = l.forwardRef(
+  ({ className: s, value: i, variant: o, size: e, ...n }, x) => /* @__PURE__ */ t(
+    r.Root,
     {
-      className: s("h-full w-full flex-1 transition-all", i({ variant: t })),
-      style: { transform: `translateX(-${100 - (e || 0)}%)` }
+      ref: x,
+      className: a(m({ size: e }), "mtx-relative mtx-w-full mtx-overflow-hidden mtx-bg-gray-300", s),
+      ...n,
+      children: /* @__PURE__ */ t(
+        r.Indicator,
+        {
+          className: a("mtx-h-full mtx-w-full mtx-flex-1 mtx-transition-all", m({ variant: o })),
+          style: { transform: `translateX(-${100 - (i || 0)}%)` }
+        }
+      )
     }
-  ) })
+  )
 );
-p.displayName = r.Root.displayName;
+g.displayName = r.Root.displayName;
 export {
-  p as Progress
+  g as Progress
 };
 //# sourceMappingURL=progress.es.js.map