@trsys-tech/matrix-library 1.0.1-canary-4 → 1.0.2

package/dist/index.es.js

@@ -2,7 +2,7 @@
 import { Accordion as t, AccordionContent as a, AccordionItem as i, AccordionTrigger as m } from "./accordion.es.js";
 import { Avatar as p, AvatarFallback as l, AvatarImage as x } from "./avatar.es.js";
 import { Badge as d } from "./badge.es.js";
-import { Breadcrumb as c, BreadcrumbEllipsis as u, BreadcrumbItem as f, BreadcrumbLink as C, BreadcrumbList as g, BreadcrumbPage as D, BreadcrumbSeparator as s } from "./breadcrumb.es.js";
+import { Breadcrumb as u, BreadcrumbEllipsis as c, BreadcrumbItem as f, BreadcrumbLink as C, BreadcrumbList as g, BreadcrumbPage as D, BreadcrumbSeparator as s } from "./breadcrumb.es.js";
 import { Button as T, buttonVariants as F } from "./button.es.js";
 import { Calendar as h } from "./calendar.es.js";
 import { Card as w, CardContent as A, CardDescription as I, CardFooter as B, CardHeader as G, CardTitle as v } from "./card.es.js";
@@ -12,7 +12,7 @@ import { Collapsible as O, CollapsibleContent as V, CollapsibleTrigger as z } fr
 import { Combobox as j } from "./combobox.es.js";
 import { Command as J, CommandDialog as K, CommandEmpty as N, CommandGroup as Q, CommandInput as W, CommandItem as X, CommandList as Y, CommandSeparator as Z, CommandShortcut as _ } from "./command.es.js";
 import { ConfirmProvider as ee, useConfirm as re } from "./confirm.es.js";
-import { ContextMenu as te, ContextMenuCheckboxItem as ae, ContextMenuContent as ie, ContextMenuGroup as me, ContextMenuItem as ne, ContextMenuLabel as pe, ContextMenuPortal as le, ContextMenuRadioGroup as xe, ContextMenuRadioItem as Se, ContextMenuSeparator as de, ContextMenuShortcut as be, ContextMenuSub as ce, ContextMenuSubContent as ue, ContextMenuSubTrigger as fe, ContextMenuTrigger as Ce } from "./contextmenu.es.js";
+import { ContextMenu as te, ContextMenuCheckboxItem as ae, ContextMenuContent as ie, ContextMenuGroup as me, ContextMenuItem as ne, ContextMenuLabel as pe, ContextMenuPortal as le, ContextMenuRadioGroup as xe, ContextMenuRadioItem as Se, ContextMenuSeparator as de, ContextMenuShortcut as be, ContextMenuSub as ue, ContextMenuSubContent as ce, ContextMenuSubTrigger as fe, ContextMenuTrigger as Ce } from "./contextmenu.es.js";
 import { DataGrid as De, DataGridActionBar as se, DataGridContent as Me, DeleteAction as Te, ExtraActions as Fe, FreezeAction as Pe, PrintAction as he, RefreshAction as ke, SearchAction as we, dataGridDefaultTheme as Ae, useDataGrid as Ie } from "./datagrid.es.js";
 import { DatePicker as Ge } from "./datepicker.es.js";
 import { DateRangePicker as Re } from "./daterangepicker.es.js";
@@ -21,7 +21,7 @@ import { Dialog as Ee, DialogClose as Oe, DialogContent as Ve, DialogDescription
 import { Drawer as We, DrawerContent as Xe, DrawerMain as Ye } from "./drawer.es.js";
 import { Duration as _e } from "./duration.es.js";
 import { SwipableDrawer as er, SwipableDrawerClose as rr, SwipableDrawerContent as or, SwipableDrawerDescription as tr, SwipableDrawerFooter as ar, SwipableDrawerHeader as ir, SwipableDrawerTitle as mr, SwipableDrawerTrigger as nr } from "./swipabledrawer.es.js";
-import { Form as lr, FormControl as xr, FormDescription as Sr, FormField as dr, FormItem as br, FormLabel as cr, FormMessage as ur } from "./form.es.js";
+import { Form as lr, FormControl as xr, FormDescription as Sr, FormField as dr, FormItem as br, FormLabel as ur, FormMessage as cr } from "./form.es.js";
 import { FormCheckbox as Cr } from "./formcheckbox.es.js";
 import { FormCombobox as Dr } from "./formcombobox.es.js";
 import { FormDatePicker as Mr } from "./formdatepicker.es.js";
@@ -42,26 +42,27 @@ import { Popover as Yr, PopoverAnchor as Zr, PopoverContent as _r, PopoverTrigge
 import { Progress as ro } from "./progress.es.js";
 import { RadioGroup as to, RadioGroupItem as ao } from "./radiogroup.es.js";
 import { Rating as mo } from "./rating.es.js";
-import { Select as po, SelectContent as lo, SelectGroup as xo, SelectItem as So, SelectLabel as bo, SelectScrollDownButton as co, SelectScrollUpButton as uo, SelectSeparator as fo, SelectTrigger as Co, SelectValue as go } from "./select.es.js";
+import { Select as po, SelectContent as lo, SelectGroup as xo, SelectItem as So, SelectLabel as bo, SelectScrollDownButton as uo, SelectScrollUpButton as co, SelectSeparator as fo, SelectTrigger as Co, SelectValue as go } from "./select.es.js";
 import { Separator as so } from "./separator.es.js";
 import { Sheet as To, SheetClose as Fo, SheetContent as Po, SheetDescription as ho, SheetFooter as ko, SheetHeader as wo, SheetOverlay as Ao, SheetPortal as Io, SheetTitle as Bo, SheetTrigger as Go } from "./sheet.es.js";
 import { Sidebar as Ro, SidebarContent as Lo, SidebarFooter as Ho, SidebarGroup as yo, SidebarGroupAction as Eo, SidebarGroupContent as Oo, SidebarGroupLabel as Vo, SidebarHeader as zo, SidebarInset as Uo, SidebarMenu as jo, SidebarMenuAction as qo, SidebarMenuBadge as Jo, SidebarMenuButton as Ko, SidebarMenuItem as No, SidebarMenuSkeleton as Qo, SidebarMenuSub as Wo, SidebarMenuSubButton as Xo, SidebarMenuSubItem as Yo, SidebarProvider as Zo, SidebarRail as _o, SidebarSeparator as $o, SidebarTrigger as et, useSidebar as rt } from "./sidebar.es.js";
 import { Skeleton as tt } from "./skeleton.es.js";
-import { Switch as it } from "./switch.es.js";
-import { Tabs as nt, TabsContent as pt, TabsList as lt, TabsTrigger as xt } from "./tabs.es.js";
-import { TextField as dt } from "./textfield.es.js";
-import { Textarea as ct } from "./textarea.es.js";
-import { Toast as ft } from "./toast.es.js";
-import { toast as gt } from "./use-toast.es.js";
-import { Tooltip as st, TooltipContent as Mt, TooltipProvider as Tt, TooltipTrigger as Ft } from "./tooltip.es.js";
-import { useIsMobile as ht } from "./use-mobile.es.js";
-import { cn as wt } from "./utils.es.js";
-import { DesktopDatePicker as It } from "./desktopdatepicker.es.js";
-import { DesktopDateRangePicker as Gt } from "./desktopdaterangepicker.es.js";
-import { DesktopTimePicker as Rt } from "./desktoptimepicker.es.js";
-import { MobileDatePicker as Ht } from "./mobiledatepicker.es.js";
-import { MobileDateRangePicker as Et } from "./mobiledaterangepicker.es.js";
-import { MobileTimePicker as Vt } from "./mobiletimepicker.es.js";
+import { Status as it } from "./status.es.js";
+import { Switch as nt } from "./switch.es.js";
+import { Tabs as lt, TabsContent as xt, TabsList as St, TabsTrigger as dt } from "./tabs.es.js";
+import { TextField as ut } from "./textfield.es.js";
+import { Textarea as ft } from "./textarea.es.js";
+import { Toast as gt } from "./toast.es.js";
+import { toast as st } from "./use-toast.es.js";
+import { Tooltip as Tt, TooltipContent as Ft, TooltipProvider as Pt, TooltipTrigger as ht } from "./tooltip.es.js";
+import { useIsMobile as wt } from "./use-mobile.es.js";
+import { cn as It } from "./utils.es.js";
+import { DesktopDatePicker as Gt } from "./desktopdatepicker.es.js";
+import { DesktopDateRangePicker as Rt } from "./desktopdaterangepicker.es.js";
+import { DesktopTimePicker as Ht } from "./desktoptimepicker.es.js";
+import { MobileDatePicker as Et } from "./mobiledatepicker.es.js";
+import { MobileDateRangePicker as Vt } from "./mobiledaterangepicker.es.js";
+import { MobileTimePicker as Ut } from "./mobiletimepicker.es.js";
 export {
   t as Accordion,
   a as AccordionContent,
@@ -71,8 +72,8 @@ export {
   l as AvatarFallback,
   x as AvatarImage,
   d as Badge,
-  c as Breadcrumb,
-  u as BreadcrumbEllipsis,
+  u as Breadcrumb,
+  c as BreadcrumbEllipsis,
   f as BreadcrumbItem,
   C as BreadcrumbLink,
   g as BreadcrumbList,
@@ -113,8 +114,8 @@ export {
   Se as ContextMenuRadioItem,
   de as ContextMenuSeparator,
   be as ContextMenuShortcut,
-  ce as ContextMenuSub,
-  ue as ContextMenuSubContent,
+  ue as ContextMenuSub,
+  ce as ContextMenuSubContent,
   fe as ContextMenuSubTrigger,
   Ce as ContextMenuTrigger,
   De as DataGrid,
@@ -123,9 +124,9 @@ export {
   Ge as DatePicker,
   Re as DateRangePicker,
   Te as DeleteAction,
-  It as DesktopDatePicker,
-  Gt as DesktopDateRangePicker,
-  Rt as DesktopTimePicker,
+  Gt as DesktopDatePicker,
+  Rt as DesktopDateRangePicker,
+  Ht as DesktopTimePicker,
   Ee as Dialog,
   Oe as DialogClose,
   Ve as DialogContent,
@@ -152,8 +153,8 @@ export {
   dr as FormField,
   wr as FormInput,
   br as FormItem,
-  cr as FormLabel,
-  ur as FormMessage,
+  ur as FormLabel,
+  cr as FormMessage,
   Ir as FormMultiSelect,
   Gr as FormRating,
   Rr as FormSelect,
@@ -163,9 +164,9 @@ export {
   Pe as FreezeAction,
   Ur as IconButton,
   qr as Label,
-  Ht as MobileDatePicker,
-  Et as MobileDateRangePicker,
-  Vt as MobileTimePicker,
+  Et as MobileDatePicker,
+  Vt as MobileDateRangePicker,
+  Ut as MobileTimePicker,
   Kr as Modal,
   Nr as ModalFooter,
   Wr as MultiSelect,
@@ -185,8 +186,8 @@ export {
   xo as SelectGroup,
   So as SelectItem,
   bo as SelectLabel,
-  co as SelectScrollDownButton,
-  uo as SelectScrollUpButton,
+  uo as SelectScrollDownButton,
+  co as SelectScrollUpButton,
   fo as SelectSeparator,
   Co as SelectTrigger,
   go as SelectValue,
@@ -224,6 +225,7 @@ export {
   $o as SidebarSeparator,
   et as SidebarTrigger,
   tt as Skeleton,
+  it as Status,
   er as SwipableDrawer,
   rr as SwipableDrawerClose,
   or as SwipableDrawerContent,
@@ -232,26 +234,26 @@ export {
   ir as SwipableDrawerHeader,
   mr as SwipableDrawerTitle,
   nr as SwipableDrawerTrigger,
-  it as Switch,
-  nt as Tabs,
-  pt as TabsContent,
-  lt as TabsList,
-  xt as TabsTrigger,
-  dt as TextField,
-  ct as Textarea,
+  nt as Switch,
+  lt as Tabs,
+  xt as TabsContent,
+  St as TabsList,
+  dt as TabsTrigger,
+  ut as TextField,
+  ft as Textarea,
   He as TimePicker,
-  ft as Toast,
-  st as Tooltip,
-  Mt as TooltipContent,
-  Tt as TooltipProvider,
-  Ft as TooltipTrigger,
+  gt as Toast,
+  Tt as Tooltip,
+  Ft as TooltipContent,
+  Pt as TooltipProvider,
+  ht as TooltipTrigger,
   F as buttonVariants,
-  wt as cn,
+  It as cn,
   Ae as dataGridDefaultTheme,
-  gt as toast,
+  st as toast,
   re as useConfirm,
   Ie as useDataGrid,
-  ht as useIsMobile,
+  wt as useIsMobile,
   rt as useSidebar
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/multiselect.es.js

@@ -1,14 +1,14 @@
-import { jsxs as l, jsx as t, Fragment as S } from "react/jsx-runtime";
+import { jsxs as s, 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 { XMark as I, CircleXmark as ae, ChevronDown as se, 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 se } from "./button.es.js";
+import { Status as T } from "./status.es.js";
+import { Button as le } from "./button.es.js";
 import { Separator as A } from "./separator.es.js";
 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({
+const K = me({
   base: "mtx-flex mtx-gap-1 mtx-items-center mtx-py-0.5 mtx-px-2 mtx-rounded-xl",
   variants: {
     variant: {
@@ -27,12 +27,12 @@ const B = me({
   value: k,
   variant: C,
   disabled: j,
-  defaultValue: K = [],
-  placeholder: L = "Select options",
+  defaultValue: L = [],
+  placeholder: V = "Select options",
   maxCount: u = 3,
-  modalPopover: V = !1,
+  modalPopover: z = !1,
   // asChild = false,
-  className: z,
+  className: B,
   moreText: W = "more",
   clearText: X = "Clear",
   closeText: $ = "Close",
@@ -45,7 +45,7 @@ const B = me({
   loadingText: b = "Loading...",
   ...J
 }, Q) => {
-  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(
+  const l = k !== void 0, [U, x] = a.useState(L), r = l ? 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) => {
@@ -55,44 +55,44 @@ const B = me({
         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("");
+          l || x(c), o(c), P("");
         }
       } else if (e.key === "Enter")
         i(!0);
       else if (e.key === "Backspace" && !e.currentTarget.value) {
         const m = [...r];
-        m.pop(), s || x(m), o(m);
+        m.pop(), l || x(m), o(m);
       }
     },
-    [f, o, n, r, s]
+    [f, o, n, r, l]
   ), E = a.useCallback(
     (e) => {
       const m = r.includes(e) ? r.filter((c) => c !== e) : [...r, e];
-      s || x(m), o(m);
+      l || x(m), o(m);
     },
-    [o, r, s]
+    [o, r, l]
   ), v = a.useCallback(() => {
-    s || x([]), o([]), f && w(new Map(d.map((e) => [e.value, e])));
-  }, [o, f, d, s]), ee = a.useCallback(() => {
+    l || x([]), o([]), f && w(new Map(d.map((e) => [e.value, e])));
+  }, [o, f, d, l]), 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(() => {
+    l || x(e), o(e);
+  }, [u, r, o, l]), re = a.useCallback(() => {
     if (r.length === n.size)
       v();
     else {
       const e = Array.from(n.keys());
-      s || x(e), o(e);
+      l || x(e), o(e);
     }
-  }, [v, o, n, r.length, s]);
+  }, [v, o, n, r.length, l]);
   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: [
+  }, [r]), /* @__PURE__ */ s(oe, { open: Y, onOpenChange: i, modal: z, children: [
     /* @__PURE__ */ t(ne, { asChild: !0, children: /* @__PURE__ */ t(
-      se,
+      le,
       {
         ref: Q,
         variant: "text",
@@ -104,22 +104,22 @@ const B = me({
         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
+          B
         ),
         "data-placeholder": r.length ? void 0 : "",
         endIcon: /* @__PURE__ */ t(
-          le,
+          se,
           {
             role: "button",
             "aria-label": "Expand dropdown",
             className: "!mtx-h-4.5 !mtx-w-4.5 mtx-cursor-pointer group-data-[state=open]:mtx-rotate-180 mtx-transition-transform"
           }
         ),
-        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: [
+        children: /* @__PURE__ */ t(S, { children: r.length > 0 ? /* @__PURE__ */ s("div", { className: "mtx-flex mtx-justify-between mtx-items-center mtx-w-full", children: [
+          /* @__PURE__ */ s("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: [
+              return /* @__PURE__ */ s(T, { className: p(K({ variant: C }), { "text-gray-400 bg-gray-200": j || h }), children: [
                 /* @__PURE__ */ t(
                   I,
                   {
@@ -133,7 +133,7 @@ const B = me({
                 m?.label
               ] }, e);
             }),
-            r.length > u && /* @__PURE__ */ l(T, { className: p(B({ variant: C })), children: [
+            r.length > u && /* @__PURE__ */ s(T, { className: p(K({ variant: C })), children: [
               `+ ${r.length - u} ${W}`,
               /* @__PURE__ */ t(
                 ae,
@@ -148,7 +148,7 @@ const B = me({
             ] }),
             h && b ? b : null
           ] }),
-          /* @__PURE__ */ l("div", { className: "mtx-flex mtx-items-center mtx-justify-between mtx-gap-1", children: [
+          /* @__PURE__ */ s("div", { className: "mtx-flex mtx-items-center mtx-justify-between mtx-gap-1", children: [
             /* @__PURE__ */ t(
               I,
               {
@@ -162,15 +162,15 @@ const B = me({
             ),
             /* @__PURE__ */ t(A, { orientation: "vertical", className: "mtx-flex mtx-min-h-5 mtx-h-full" })
           ] })
-        ] }) : /* @__PURE__ */ t(S, { children: h && b ? b : L }) })
+        ] }) : /* @__PURE__ */ t(S, { children: h && b ? b : V }) })
       }
     ) }),
-    /* @__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(ce, { className: "mtx-w-auto mtx-p-0", align: "start", onEscapeKeyDown: () => i(!1), children: /* @__PURE__ */ s(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__ */ s(de, { className: "", children: [
         /* @__PURE__ */ t(ue, { children: O }),
-        /* @__PURE__ */ l(R, { children: [
-          H && /* @__PURE__ */ l(y, { onSelect: re, className: "mtx-cursor-pointer", children: [
+        /* @__PURE__ */ s(R, { children: [
+          H && /* @__PURE__ */ s(y, { onSelect: re, className: "mtx-cursor-pointer", children: [
             /* @__PURE__ */ t(
               "div",
               {
@@ -181,7 +181,7 @@ const B = me({
                 children: /* @__PURE__ */ t(D, { className: "mtx-h-4.5 mtx-w-4.5" })
               }
             ),
-            /* @__PURE__ */ l("span", { children: [
+            /* @__PURE__ */ s("span", { children: [
               "(",
               G,
               ")"
@@ -189,7 +189,7 @@ const B = me({
           ] }, "all"),
           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: [
+            return /* @__PURE__ */ s(y, { onSelect: () => E(e.value), className: "mtx-cursor-pointer", children: [
               /* @__PURE__ */ t(
                 "div",
                 {
@@ -206,8 +206,8 @@ const B = me({
           })
         ] }),
         /* @__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(R, { children: /* @__PURE__ */ s("div", { className: "mtx-flex mtx-items-center mtx-justify-between", children: [
+          r.length > 0 && /* @__PURE__ */ s(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" })
           ] }),

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: \"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          type=\"button\"\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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"}
+{"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 { Status } from \"../status/Status\";\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          type=\"button\"\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                      <Status 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                      </Status>\r\n                    );\r\n                  })}\r\n                  {selectedValues.length > maxCount && (\r\n                    <Status 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                    </Status>\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","Status","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}

package/dist/status.es.js

@@ -0,0 +1,34 @@
+import { jsx as m } from "react/jsx-runtime";
+import { tv as x } from "tailwind-variants";
+import { cn as n } from "./utils.es.js";
+const o = x({
+  base: "mtx-inline-flex mtx-items-center mtx-rounded-full mtx-border mtx-px-2.5 mtx-py-0.5 mtx-text-xs mtx-font-semibold mtx-transition-colors focus:mtx-outline-none focus:mtx-ring-2 focus:mtx-ring-ring focus:mtx-ring-offset-2 mtx-border-transparent",
+  variants: {
+    variant: {
+      primary: "mtx-bg-primary mtx-text-primary-foreground hover:mtx-bg-primary-600",
+      secondary: "mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary-600",
+      outline: "mtx-border mtx-border-primary mtx-text-primary hover:mtx-bg-primary-50",
+      danger: "mtx-bg-danger mtx-text-danger-foreground hover:mtx-bg-danger-600",
+      success: "mtx-bg-success mtx-text-success-foreground hover:mtx-bg-success-600",
+      warning: "mtx-bg-warning mtx-text-warning-foreground hover:mtx-bg-warning-600",
+      info: "mtx-bg-info mtx-text-info-foreground hover:mtx-bg-info-600",
+      "primary-inverse": "mtx-bg-primary-100 mtx-text-primary-700 hover:mtx-bg-primary-50",
+      "success-inverse": "mtx-bg-success-300 mtx-text-success-700 hover:mtx-bg-success-200",
+      "danger-inverse": "mtx-bg-danger-300 mtx-text-danger-600 hover:mtx-bg-danger-200",
+      "warning-inverse": "mtx-bg-warning-300 mtx-text-warning-800 hover:mtx-bg-warning-200",
+      "info-inverse": "mtx-bg-info-300 mtx-text-info-700 hover:mtx-bg-info-200",
+      "purple-inverse": "mtx-bg-purple-200 mtx-text-purple-500 hover:mtx-bg-purple-100",
+      "coral-inverse": "mtx-bg-coral-300 mtx-text-coral-600 hover:mtx-bg-coral-200",
+      "turquoise-inverse": "mtx-bg-turquoise-200 mtx-text-turquoise-600 hover:mtx-bg-turquoise-100",
+      "lime-inverse": "mtx-bg-lime-300 mtx-text-lime-700 hover:mtx-bg-lime-200",
+      "gray-inverse": "mtx-bg-gray-300 mtx-text-text-500 hover:mtx-bg-gray-200"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+}), a = ({ className: t, variant: r, ...e }) => /* @__PURE__ */ m("div", { className: n(o({ variant: r }), t), ...e });
+export {
+  a as Status
+};
+//# sourceMappingURL=status.es.js.map

package/dist/status.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.es.js","sources":["../src/components/status/Status.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst statusVariants = tv({\r\n  base: \"mtx-inline-flex mtx-items-center mtx-rounded-full mtx-border mtx-px-2.5 mtx-py-0.5 mtx-text-xs mtx-font-semibold mtx-transition-colors focus:mtx-outline-none focus:mtx-ring-2 focus:mtx-ring-ring focus:mtx-ring-offset-2 mtx-border-transparent\",\r\n  variants: {\r\n    variant: {\r\n      primary: \"mtx-bg-primary mtx-text-primary-foreground hover:mtx-bg-primary-600\",\r\n      secondary: \"mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary-600\",\r\n      outline: \"mtx-border mtx-border-primary mtx-text-primary hover:mtx-bg-primary-50\",\r\n      danger: \"mtx-bg-danger mtx-text-danger-foreground hover:mtx-bg-danger-600\",\r\n      success: \"mtx-bg-success mtx-text-success-foreground hover:mtx-bg-success-600\",\r\n      warning: \"mtx-bg-warning mtx-text-warning-foreground hover:mtx-bg-warning-600\",\r\n      info: \"mtx-bg-info mtx-text-info-foreground hover:mtx-bg-info-600\",\r\n      \"primary-inverse\": \"mtx-bg-primary-100 mtx-text-primary-700 hover:mtx-bg-primary-50\",\r\n      \"success-inverse\": \"mtx-bg-success-300 mtx-text-success-700 hover:mtx-bg-success-200\",\r\n      \"danger-inverse\": \"mtx-bg-danger-300 mtx-text-danger-600 hover:mtx-bg-danger-200\",\r\n      \"warning-inverse\": \"mtx-bg-warning-300 mtx-text-warning-800 hover:mtx-bg-warning-200\",\r\n      \"info-inverse\": \"mtx-bg-info-300 mtx-text-info-700 hover:mtx-bg-info-200\",\r\n      \"purple-inverse\": \"mtx-bg-purple-200 mtx-text-purple-500 hover:mtx-bg-purple-100\",\r\n      \"coral-inverse\": \"mtx-bg-coral-300 mtx-text-coral-600 hover:mtx-bg-coral-200\",\r\n      \"turquoise-inverse\": \"mtx-bg-turquoise-200 mtx-text-turquoise-600 hover:mtx-bg-turquoise-100\",\r\n      \"lime-inverse\": \"mtx-bg-lime-300 mtx-text-lime-700 hover:mtx-bg-lime-200\",\r\n      \"gray-inverse\": \"mtx-bg-gray-300 mtx-text-text-500 hover:mtx-bg-gray-200\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"primary\",\r\n  },\r\n});\r\n\r\nexport type StatusVariant = VariantProps<typeof statusVariants>[\"variant\"];\r\n\r\ninterface StatusProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  variant?: StatusVariant;\r\n}\r\n\r\nconst Status: React.FC<StatusProps> = ({ className, variant, ...props }) => {\r\n  return <div className={cn(statusVariants({ variant }), className)} {...props} />;\r\n};\r\n\r\nexport { Status, type StatusProps };\r\n"],"names":["statusVariants","tv","Status","className","variant","props","jsx","cn"],"mappings":";;;AAOA,MAAMA,IAAiBC,EAAG;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,MACN,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,MAClB,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAQKC,IAAgC,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,QACvD,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGP,EAAe,EAAE,SAAAI,EAAA,CAAS,GAAGD,CAAS,GAAI,GAAGE,EAAA,CAAO;"}