@trsys-tech/matrix-library 0.6.3-canary-5 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Accordion as t, AccordionContent as a, AccordionItem as i, AccordionTrigger as m } from "./accordion.es.js";
3
3
  import { Avatar as p, AvatarFallback as l, AvatarImage as x } from "./avatar.es.js";
4
4
  import { Badge as d } from "./badge.es.js";
5
- 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";
5
+ 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";
6
6
  import { Button as T, buttonVariants as F } from "./button.es.js";
7
7
  import { Calendar as h } from "./calendar.es.js";
8
8
  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
12
12
  import { Combobox as j } from "./combobox.es.js";
13
13
  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";
14
14
  import { ConfirmProvider as ee, useConfirm as re } from "./confirm.es.js";
15
- 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";
15
+ 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";
16
16
  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";
17
17
  import { DatePicker as Ge } from "./datepicker.es.js";
18
18
  import { DateRangePicker as Re } from "./daterangepicker.es.js";
@@ -21,7 +21,7 @@ import { Dialog as Ee, DialogClose as Oe, DialogContent as Ve, DialogDescription
21
21
  import { Drawer as We, DrawerContent as Xe, DrawerMain as Ye } from "./drawer.es.js";
22
22
  import { Duration as _e } from "./duration.es.js";
23
23
  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";
24
- 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";
24
+ 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";
25
25
  import { FormCheckbox as Cr } from "./formcheckbox.es.js";
26
26
  import { FormCombobox as Dr } from "./formcombobox.es.js";
27
27
  import { FormDatePicker as Mr } from "./formdatepicker.es.js";
@@ -42,26 +42,27 @@ import { Popover as Yr, PopoverAnchor as Zr, PopoverContent as _r, PopoverTrigge
42
42
  import { Progress as ro } from "./progress.es.js";
43
43
  import { RadioGroup as to, RadioGroupItem as ao } from "./radiogroup.es.js";
44
44
  import { Rating as mo } from "./rating.es.js";
45
- 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";
45
+ 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";
46
46
  import { Separator as so } from "./separator.es.js";
47
47
  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";
48
48
  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";
49
49
  import { Skeleton as tt } from "./skeleton.es.js";
50
- import { Switch as it } from "./switch.es.js";
51
- import { Tabs as nt, TabsContent as pt, TabsList as lt, TabsTrigger as xt } from "./tabs.es.js";
52
- import { TextField as dt } from "./textfield.es.js";
53
- import { Textarea as ct } from "./textarea.es.js";
54
- import { Toast as ft } from "./toast.es.js";
55
- import { toast as gt } from "./use-toast.es.js";
56
- import { Tooltip as st, TooltipContent as Mt, TooltipProvider as Tt, TooltipTrigger as Ft } from "./tooltip.es.js";
57
- import { useIsMobile as ht } from "./use-mobile.es.js";
58
- import { cn as wt } from "./utils.es.js";
59
- import { DesktopDatePicker as It } from "./desktopdatepicker.es.js";
60
- import { DesktopDateRangePicker as Gt } from "./desktopdaterangepicker.es.js";
61
- import { DesktopTimePicker as Rt } from "./desktoptimepicker.es.js";
62
- import { MobileDatePicker as Ht } from "./mobiledatepicker.es.js";
63
- import { MobileDateRangePicker as Et } from "./mobiledaterangepicker.es.js";
64
- import { MobileTimePicker as Vt } from "./mobiletimepicker.es.js";
50
+ import { Status as it } from "./status.es.js";
51
+ import { Switch as nt } from "./switch.es.js";
52
+ import { Tabs as lt, TabsContent as xt, TabsList as St, TabsTrigger as dt } from "./tabs.es.js";
53
+ import { TextField as ut } from "./textfield.es.js";
54
+ import { Textarea as ft } from "./textarea.es.js";
55
+ import { Toast as gt } from "./toast.es.js";
56
+ import { toast as st } from "./use-toast.es.js";
57
+ import { Tooltip as Tt, TooltipContent as Ft, TooltipProvider as Pt, TooltipTrigger as ht } from "./tooltip.es.js";
58
+ import { useIsMobile as wt } from "./use-mobile.es.js";
59
+ import { cn as It } from "./utils.es.js";
60
+ import { DesktopDatePicker as Gt } from "./desktopdatepicker.es.js";
61
+ import { DesktopDateRangePicker as Rt } from "./desktopdaterangepicker.es.js";
62
+ import { DesktopTimePicker as Ht } from "./desktoptimepicker.es.js";
63
+ import { MobileDatePicker as Et } from "./mobiledatepicker.es.js";
64
+ import { MobileDateRangePicker as Vt } from "./mobiledaterangepicker.es.js";
65
+ import { MobileTimePicker as Ut } from "./mobiletimepicker.es.js";
65
66
  export {
66
67
  t as Accordion,
67
68
  a as AccordionContent,
@@ -71,8 +72,8 @@ export {
71
72
  l as AvatarFallback,
72
73
  x as AvatarImage,
73
74
  d as Badge,
74
- c as Breadcrumb,
75
- u as BreadcrumbEllipsis,
75
+ u as Breadcrumb,
76
+ c as BreadcrumbEllipsis,
76
77
  f as BreadcrumbItem,
77
78
  C as BreadcrumbLink,
78
79
  g as BreadcrumbList,
@@ -113,8 +114,8 @@ export {
113
114
  Se as ContextMenuRadioItem,
114
115
  de as ContextMenuSeparator,
115
116
  be as ContextMenuShortcut,
116
- ce as ContextMenuSub,
117
- ue as ContextMenuSubContent,
117
+ ue as ContextMenuSub,
118
+ ce as ContextMenuSubContent,
118
119
  fe as ContextMenuSubTrigger,
119
120
  Ce as ContextMenuTrigger,
120
121
  De as DataGrid,
@@ -123,9 +124,9 @@ export {
123
124
  Ge as DatePicker,
124
125
  Re as DateRangePicker,
125
126
  Te as DeleteAction,
126
- It as DesktopDatePicker,
127
- Gt as DesktopDateRangePicker,
128
- Rt as DesktopTimePicker,
127
+ Gt as DesktopDatePicker,
128
+ Rt as DesktopDateRangePicker,
129
+ Ht as DesktopTimePicker,
129
130
  Ee as Dialog,
130
131
  Oe as DialogClose,
131
132
  Ve as DialogContent,
@@ -152,8 +153,8 @@ export {
152
153
  dr as FormField,
153
154
  wr as FormInput,
154
155
  br as FormItem,
155
- cr as FormLabel,
156
- ur as FormMessage,
156
+ ur as FormLabel,
157
+ cr as FormMessage,
157
158
  Ir as FormMultiSelect,
158
159
  Gr as FormRating,
159
160
  Rr as FormSelect,
@@ -163,9 +164,9 @@ export {
163
164
  Pe as FreezeAction,
164
165
  Ur as IconButton,
165
166
  qr as Label,
166
- Ht as MobileDatePicker,
167
- Et as MobileDateRangePicker,
168
- Vt as MobileTimePicker,
167
+ Et as MobileDatePicker,
168
+ Vt as MobileDateRangePicker,
169
+ Ut as MobileTimePicker,
169
170
  Kr as Modal,
170
171
  Nr as ModalFooter,
171
172
  Wr as MultiSelect,
@@ -185,8 +186,8 @@ export {
185
186
  xo as SelectGroup,
186
187
  So as SelectItem,
187
188
  bo as SelectLabel,
188
- co as SelectScrollDownButton,
189
- uo as SelectScrollUpButton,
189
+ uo as SelectScrollDownButton,
190
+ co as SelectScrollUpButton,
190
191
  fo as SelectSeparator,
191
192
  Co as SelectTrigger,
192
193
  go as SelectValue,
@@ -224,6 +225,7 @@ export {
224
225
  $o as SidebarSeparator,
225
226
  et as SidebarTrigger,
226
227
  tt as Skeleton,
228
+ it as Status,
227
229
  er as SwipableDrawer,
228
230
  rr as SwipableDrawerClose,
229
231
  or as SwipableDrawerContent,
@@ -232,26 +234,26 @@ export {
232
234
  ir as SwipableDrawerHeader,
233
235
  mr as SwipableDrawerTitle,
234
236
  nr as SwipableDrawerTrigger,
235
- it as Switch,
236
- nt as Tabs,
237
- pt as TabsContent,
238
- lt as TabsList,
239
- xt as TabsTrigger,
240
- dt as TextField,
241
- ct as Textarea,
237
+ nt as Switch,
238
+ lt as Tabs,
239
+ xt as TabsContent,
240
+ St as TabsList,
241
+ dt as TabsTrigger,
242
+ ut as TextField,
243
+ ft as Textarea,
242
244
  He as TimePicker,
243
- ft as Toast,
244
- st as Tooltip,
245
- Mt as TooltipContent,
246
- Tt as TooltipProvider,
247
- Ft as TooltipTrigger,
245
+ gt as Toast,
246
+ Tt as Tooltip,
247
+ Ft as TooltipContent,
248
+ Pt as TooltipProvider,
249
+ ht as TooltipTrigger,
248
250
  F as buttonVariants,
249
- wt as cn,
251
+ It as cn,
250
252
  Ae as dataGridDefaultTheme,
251
- gt as toast,
253
+ st as toast,
252
254
  re as useConfirm,
253
255
  Ie as useDataGrid,
254
- ht as useIsMobile,
256
+ wt as useIsMobile,
255
257
  rt as useSidebar
256
258
  };
257
259
  //# sourceMappingURL=index.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,14 +1,14 @@
1
- import { jsxs as s, jsx as r, Fragment as S } from "react/jsx-runtime";
2
- import * as l from "react";
1
+ import { jsxs as l, jsx as r, Fragment as S } from "react/jsx-runtime";
2
+ import * as s from "react";
3
3
  import { tv as ae } from "tailwind-variants";
4
- import { XMark as I, CircleXmark as le, ChevronDown as se, Check as D } from "@trsys-tech/matrix-icons";
4
+ import { XMark as I, CircleXmark as se, ChevronDown as le, Check as D } from "@trsys-tech/matrix-icons";
5
5
  import { cn as f } from "./utils.es.js";
6
- import { Badge as T } from "./badge.es.js";
6
+ import { Status as T } from "./status.es.js";
7
7
  import { Button as oe } from "./button.es.js";
8
8
  import { Separator as A } from "./separator.es.js";
9
9
  import { Popover as ne, PopoverTrigger as ce, PopoverContent as ie } from "./popover.es.js";
10
10
  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";
11
- const B = ae({
11
+ const K = ae({
12
12
  base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
13
13
  variants: {
14
14
  variant: {
@@ -27,12 +27,12 @@ const B = ae({
27
27
  value: k,
28
28
  variant: C,
29
29
  disabled: j,
30
- defaultValue: K = [],
31
- placeholder: L = "Select options",
30
+ defaultValue: L = [],
31
+ placeholder: V = "Select options",
32
32
  maxCount: p = 3,
33
- modalPopover: V = !1,
33
+ modalPopover: z = !1,
34
34
  // asChild = false,
35
- className: z,
35
+ className: B,
36
36
  moreText: W = "more",
37
37
  clearText: X = "Clear",
38
38
  closeText: $ = "Close",
@@ -45,9 +45,9 @@ const B = ae({
45
45
  loadingText: g = "Loading...",
46
46
  ...J
47
47
  }, Q) => {
48
- 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(
48
+ const o = k !== void 0, [U, d] = s.useState(L), t = o ? k : U, [Y, u] = s.useState(!1), v = s.useRef(null), [Z, P] = s.useState(""), [F, M] = s.useState(!1), [c, x] = s.useState(
49
49
  new Map(m.map((e) => [e.value, e]))
50
- ), _ = l.useCallback(
50
+ ), _ = s.useCallback(
51
51
  (e) => {
52
52
  if (e.key === "Enter" && h) {
53
53
  if (u(!0), e.preventDefault(), e.stopPropagation(), !e.currentTarget.value) return;
@@ -65,20 +65,20 @@ const B = ae({
65
65
  }
66
66
  },
67
67
  [h, n, c, t, o]
68
- ), E = l.useCallback(
68
+ ), E = s.useCallback(
69
69
  (e) => {
70
70
  const a = t.includes(e) ? t.filter((i) => i !== e) : [...t, e];
71
71
  o || d(a), n(a);
72
72
  },
73
73
  [n, t, o]
74
- ), y = l.useCallback(() => {
74
+ ), y = s.useCallback(() => {
75
75
  o || d([]), n([]), h && x(new Map(m.map((e) => [e.value, e])));
76
- }, [n, h, m, o]), ee = l.useCallback(() => {
76
+ }, [n, h, m, o]), ee = s.useCallback(() => {
77
77
  u((e) => !e);
78
- }, []), re = l.useCallback(() => {
78
+ }, []), re = s.useCallback(() => {
79
79
  const e = t.slice(0, p);
80
80
  o || d(e), n(e);
81
- }, [p, t, n, o]), te = l.useCallback(() => {
81
+ }, [p, t, n, o]), te = s.useCallback(() => {
82
82
  if (t.length === c.size)
83
83
  y();
84
84
  else {
@@ -86,11 +86,11 @@ const B = ae({
86
86
  o || d(e), n(e);
87
87
  }
88
88
  }, [y, n, c, t.length, o]);
89
- return l.useEffect(() => {
89
+ return s.useEffect(() => {
90
90
  x(new Map(m.map((e) => [e.value, e])));
91
- }, [m]), l.useLayoutEffect(() => {
91
+ }, [m]), s.useLayoutEffect(() => {
92
92
  v.current && (v?.current?.firstChild?.offsetTop < v?.current?.lastChild?.offsetTop ? M(!0) : M(!1));
93
- }, [t]), /* @__PURE__ */ s(ne, { open: Y, onOpenChange: u, modal: V, children: [
93
+ }, [t]), /* @__PURE__ */ l(ne, { open: Y, onOpenChange: u, modal: z, children: [
94
94
  /* @__PURE__ */ r(ce, { asChild: !0, children: /* @__PURE__ */ r(
95
95
  oe,
96
96
  {
@@ -104,22 +104,22 @@ const B = ae({
104
104
  className: f(
105
105
  "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",
106
106
  F && "h-auto",
107
- z
107
+ B
108
108
  ),
109
109
  "data-placeholder": t.length ? void 0 : "",
110
110
  endIcon: /* @__PURE__ */ r(
111
- se,
111
+ le,
112
112
  {
113
113
  role: "button",
114
114
  "aria-label": "Expand dropdown",
115
115
  className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform"
116
116
  }
117
117
  ),
118
- children: /* @__PURE__ */ r(S, { children: t.length > 0 ? /* @__PURE__ */ s("div", { className: "flex justify-between items-center w-full", children: [
119
- /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", ref: v, children: [
118
+ children: /* @__PURE__ */ r(S, { children: t.length > 0 ? /* @__PURE__ */ l("div", { className: "flex justify-between items-center w-full", children: [
119
+ /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center gap-2", ref: v, children: [
120
120
  t.slice(0, p).map((e) => {
121
121
  const a = c.get(e), i = a?.icon;
122
- return /* @__PURE__ */ s(T, { className: f(B({ variant: C }), { "text-gray-400 bg-gray-200": j || b }), children: [
122
+ return /* @__PURE__ */ l(T, { className: f(K({ variant: C }), { "text-gray-400 bg-gray-200": j || b }), children: [
123
123
  /* @__PURE__ */ r(
124
124
  I,
125
125
  {
@@ -133,10 +133,10 @@ const B = ae({
133
133
  a?.label
134
134
  ] }, e);
135
135
  }),
136
- t.length > p && /* @__PURE__ */ s(T, { className: f(B({ variant: C })), children: [
136
+ t.length > p && /* @__PURE__ */ l(T, { className: f(K({ variant: C })), children: [
137
137
  `+ ${t.length - p} ${W}`,
138
138
  /* @__PURE__ */ r(
139
- le,
139
+ se,
140
140
  {
141
141
  role: "button",
142
142
  className: "ml-2 h-4.5 w-4.5 cursor-pointer",
@@ -148,7 +148,7 @@ const B = ae({
148
148
  ] }),
149
149
  b && g ? g : null
150
150
  ] }),
151
- /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-1", children: [
151
+ /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-1", children: [
152
152
  /* @__PURE__ */ r(
153
153
  I,
154
154
  {
@@ -162,15 +162,15 @@ const B = ae({
162
162
  ),
163
163
  /* @__PURE__ */ r(A, { orientation: "vertical", className: "flex min-h-5 h-full" })
164
164
  ] })
165
- ] }) : /* @__PURE__ */ r(S, { children: b && g ? g : L }) })
165
+ ] }) : /* @__PURE__ */ r(S, { children: b && g ? g : V }) })
166
166
  }
167
167
  ) }),
168
- /* @__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: [
168
+ /* @__PURE__ */ r(ie, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => u(!1), children: /* @__PURE__ */ l(de, { className: "w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]", children: [
169
169
  /* @__PURE__ */ r(ue, { placeholder: q, onKeyDown: _, value: Z, onValueChange: P }),
170
- /* @__PURE__ */ s(me, { className: "", children: [
170
+ /* @__PURE__ */ l(me, { className: "", children: [
171
171
  /* @__PURE__ */ r(pe, { children: O }),
172
- /* @__PURE__ */ s(R, { children: [
173
- H && /* @__PURE__ */ s(w, { onSelect: te, className: "cursor-pointer", children: [
172
+ /* @__PURE__ */ l(R, { children: [
173
+ H && /* @__PURE__ */ l(w, { onSelect: te, className: "cursor-pointer", children: [
174
174
  /* @__PURE__ */ r(
175
175
  "div",
176
176
  {
@@ -181,7 +181,7 @@ const B = ae({
181
181
  children: /* @__PURE__ */ r(D, { className: "h-4.5 w-4.5" })
182
182
  }
183
183
  ),
184
- /* @__PURE__ */ s("span", { children: [
184
+ /* @__PURE__ */ l("span", { children: [
185
185
  "(",
186
186
  G,
187
187
  ")"
@@ -189,7 +189,7 @@ const B = ae({
189
189
  ] }, "all"),
190
190
  Array.from(c.values()).map((e) => {
191
191
  const a = t.includes(e.value);
192
- return /* @__PURE__ */ s(w, { onSelect: () => E(e.value), className: "cursor-pointer", children: [
192
+ return /* @__PURE__ */ l(w, { onSelect: () => E(e.value), className: "cursor-pointer", children: [
193
193
  /* @__PURE__ */ r(
194
194
  "div",
195
195
  {
@@ -206,8 +206,8 @@ const B = ae({
206
206
  })
207
207
  ] }),
208
208
  /* @__PURE__ */ r(fe, {}),
209
- /* @__PURE__ */ r(R, { children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
210
- t.length > 0 && /* @__PURE__ */ s(S, { children: [
209
+ /* @__PURE__ */ r(R, { children: /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
210
+ t.length > 0 && /* @__PURE__ */ l(S, { children: [
211
211
  /* @__PURE__ */ r(w, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: X }),
212
212
  /* @__PURE__ */ r(A, { orientation: "vertical", className: "flex min-h-6 h-full" })
213
213
  ] }),
@@ -216,7 +216,7 @@ const B = ae({
216
216
  ] })
217
217
  ] }) })
218
218
  ] });
219
- }, be = l.forwardRef(he);
219
+ }, be = s.forwardRef(he);
220
220
  be.displayName = "MultiSelect";
221
221
  export {
222
222
  be as MultiSelect
@@ -1 +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 type=\"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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"}
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 { 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: \"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 type=\"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 <Status 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 </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=\"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 </Status>\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","Status","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}
@@ -0,0 +1,34 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import { tv as t } from "tailwind-variants";
3
+ import { cn as i } from "./utils.es.js";
4
+ const s = t({
5
+ base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent",
6
+ variants: {
7
+ variant: {
8
+ primary: "bg-primary text-primary-foreground hover:bg-primary-600",
9
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600",
10
+ outline: "border border-primary text-primary hover:bg-primary-50",
11
+ danger: "bg-danger text-danger-foreground hover:bg-danger-600",
12
+ success: "bg-success text-success-foreground hover:bg-success-600",
13
+ warning: "bg-warning text-warning-foreground hover:bg-warning-600",
14
+ info: "bg-info text-info-foreground hover:bg-info-600",
15
+ "primary-inverse": "bg-primary-100 text-primary-700 hover:bg-primary-50",
16
+ "success-inverse": "bg-success-300 text-success-700 hover:bg-success-200",
17
+ "danger-inverse": "bg-danger-300 text-danger-600 hover:bg-danger-200",
18
+ "warning-inverse": "bg-warning-300 text-warning-800 hover:bg-warning-200",
19
+ "info-inverse": "bg-info-300 text-info-700 hover:bg-info-200",
20
+ "purple-inverse": "bg-purple-200 text-purple-500 hover:bg-purple-100",
21
+ "coral-inverse": "bg-coral-300 text-coral-600 hover:bg-coral-200",
22
+ "turquoise-inverse": "bg-turquoise-200 text-turquoise-600 hover:bg-turquoise-100",
23
+ "lime-inverse": "bg-lime-300 text-lime-700 hover:bg-lime-200",
24
+ "gray-inverse": "bg-gray-300 text-text-500 hover:bg-gray-200"
25
+ }
26
+ },
27
+ defaultVariants: {
28
+ variant: "primary"
29
+ }
30
+ }), u = ({ className: r, variant: e, ...n }) => /* @__PURE__ */ o("div", { className: i(s({ variant: e }), r), ...n });
31
+ export {
32
+ u as Status
33
+ };
34
+ //# sourceMappingURL=status.es.js.map
@@ -0,0 +1 @@
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: \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent\",\r\n variants: {\r\n variant: {\r\n primary: \"bg-primary text-primary-foreground hover:bg-primary-600\",\r\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary-600\",\r\n outline: \"border border-primary text-primary hover:bg-primary-50\",\r\n danger: \"bg-danger text-danger-foreground hover:bg-danger-600\",\r\n success: \"bg-success text-success-foreground hover:bg-success-600\",\r\n warning: \"bg-warning text-warning-foreground hover:bg-warning-600\",\r\n info: \"bg-info text-info-foreground hover:bg-info-600\",\r\n \"primary-inverse\": \"bg-primary-100 text-primary-700 hover:bg-primary-50\",\r\n \"success-inverse\": \"bg-success-300 text-success-700 hover:bg-success-200\",\r\n \"danger-inverse\": \"bg-danger-300 text-danger-600 hover:bg-danger-200\",\r\n \"warning-inverse\": \"bg-warning-300 text-warning-800 hover:bg-warning-200\",\r\n \"info-inverse\": \"bg-info-300 text-info-700 hover:bg-info-200\",\r\n \"purple-inverse\": \"bg-purple-200 text-purple-500 hover:bg-purple-100\",\r\n \"coral-inverse\": \"bg-coral-300 text-coral-600 hover:bg-coral-200\",\r\n \"turquoise-inverse\": \"bg-turquoise-200 text-turquoise-600 hover:bg-turquoise-100\",\r\n \"lime-inverse\": \"bg-lime-300 text-lime-700 hover:bg-lime-200\",\r\n \"gray-inverse\": \"bg-gray-300 text-text-500 hover: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;"}