@trsys-tech/matrix-library 0.3.3 → 0.3.5
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/badge.es.js.map +1 -1
- package/dist/breadcrumb.es.js.map +1 -1
- package/dist/button.es.js.map +1 -1
- package/dist/calendar.es.js.map +1 -1
- package/dist/card.es.js.map +1 -1
- package/dist/chip.es.js.map +1 -1
- package/dist/collapsible.es.js.map +1 -1
- package/dist/combobox.es.js +84 -32
- package/dist/combobox.es.js.map +1 -1
- package/dist/command.es.js +60 -47
- package/dist/command.es.js.map +1 -1
- package/dist/components/badge/Badge.d.ts.map +1 -1
- package/dist/components/breadcrumb/Breadcrumb.d.ts.map +1 -1
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/chip/Chip.d.ts.map +1 -1
- package/dist/components/collapsible/Collapsible.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.d.ts +68 -59
- package/dist/components/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/command/Command.d.ts +5 -2
- package/dist/components/command/Command.d.ts.map +1 -1
- package/dist/components/confirm/Confirm.d.ts.map +1 -1
- package/dist/components/data-grid/DataGrid.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DateRangePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DesktopTimePicker.d.ts.map +1 -1
- package/dist/components/date-picker/MobileTimePicker.d.ts.map +1 -1
- package/dist/components/date-picker/TimePicker.d.ts.map +1 -1
- package/dist/components/date-picker/calendar.d.ts.map +1 -1
- package/dist/components/dialog/Dialog.d.ts.map +1 -1
- package/dist/components/form/Form.d.ts.map +1 -1
- package/dist/components/form-checkbox/FormCheckbox.d.ts.map +1 -1
- package/dist/components/form-combobox/FormCombobox.d.ts +2 -7
- package/dist/components/form-combobox/FormCombobox.d.ts.map +1 -1
- package/dist/components/form-date-picker/FormDatePicker.d.ts.map +1 -1
- package/dist/components/form-date-range-picker/FormDateRangePicker.d.ts.map +1 -1
- package/dist/components/form-input/FormInput.d.ts.map +1 -1
- package/dist/components/form-multi-select/FormMultiSelect.d.ts.map +1 -1
- package/dist/components/form-rating/FormRating.d.ts.map +1 -1
- package/dist/components/form-select/FormSelect.d.ts.map +1 -1
- package/dist/components/form-switch/FormSwitch.d.ts.map +1 -1
- package/dist/components/form-textarea/FormTextarea.d.ts.map +1 -1
- package/dist/components/form-time-picker/FormTimePicker.d.ts.map +1 -1
- package/dist/components/icon-botton/IconButton.d.ts.map +1 -1
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/text-field/TextField.d.ts +2 -2
- package/dist/components/text-field/TextField.d.ts.map +1 -1
- package/dist/components/toast/Toast.d.ts.map +1 -1
- package/dist/components/toast/toast-components.d.ts.map +1 -1
- package/dist/components/toast/use-toast.d.ts.map +1 -1
- package/dist/confirm.es.js.map +1 -1
- package/dist/datagrid.es.js +41 -41
- package/dist/datagrid.es.js.map +1 -1
- package/dist/datepicker.es.js.map +1 -1
- package/dist/daterangepicker.es.js.map +1 -1
- package/dist/desktopdatepicker.es.js +33 -33
- package/dist/desktopdatepicker.es.js.map +1 -1
- package/dist/desktopdaterangepicker.es.js +33 -33
- package/dist/desktopdaterangepicker.es.js.map +1 -1
- package/dist/desktoptimepicker.es.js +27 -23
- package/dist/desktoptimepicker.es.js.map +1 -1
- package/dist/dialog.es.js.map +1 -1
- package/dist/form.es.js.map +1 -1
- package/dist/formcheckbox.es.js +4 -4
- package/dist/formcheckbox.es.js.map +1 -1
- package/dist/formcombobox.es.js +46 -103
- package/dist/formcombobox.es.js.map +1 -1
- package/dist/formdatepicker.es.js +11 -11
- package/dist/formdatepicker.es.js.map +1 -1
- package/dist/formdaterangepicker.es.js +12 -12
- package/dist/formdaterangepicker.es.js.map +1 -1
- package/dist/forminput.es.js +8 -8
- package/dist/forminput.es.js.map +1 -1
- package/dist/formmultiselect.es.js +10 -10
- package/dist/formmultiselect.es.js.map +1 -1
- package/dist/formrating.es.js +21 -21
- package/dist/formrating.es.js.map +1 -1
- package/dist/formselect.es.js +11 -11
- package/dist/formselect.es.js.map +1 -1
- package/dist/formswitch.es.js +7 -7
- package/dist/formswitch.es.js.map +1 -1
- package/dist/formtextarea.es.js +5 -5
- package/dist/formtextarea.es.js.map +1 -1
- package/dist/formtimepicker.es.js +5 -5
- package/dist/formtimepicker.es.js.map +1 -1
- package/dist/iconbutton.es.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +205 -193
- package/dist/index.es.js.map +1 -1
- package/dist/mobiledatepicker.es.js +38 -38
- package/dist/mobiledatepicker.es.js.map +1 -1
- package/dist/mobiledaterangepicker.es.js +51 -51
- package/dist/mobiledaterangepicker.es.js.map +1 -1
- package/dist/mobiletimepicker.es.js +30 -26
- package/dist/mobiletimepicker.es.js.map +1 -1
- package/dist/modal.es.js.map +1 -1
- package/dist/multiselect.es.js +114 -106
- package/dist/multiselect.es.js.map +1 -1
- package/dist/select.es.js +1 -1
- package/dist/select.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/tabs.es.js.map +1 -1
- package/dist/textfield.es.js +12 -11
- package/dist/textfield.es.js.map +1 -1
- package/dist/timepicker.es.js.map +1 -1
- package/dist/toast-components.es.js.map +1 -1
- package/dist/toast.es.js.map +1 -1
- package/dist/use-toast.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,90 +1,90 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as a, Fragment as R, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import * as f from "react";
|
|
3
3
|
import { VisuallyHidden as F } from "@radix-ui/react-visually-hidden";
|
|
4
4
|
import { Calendar as O } from "@trsys-tech/matrix-icons";
|
|
5
|
-
import { cn as
|
|
5
|
+
import { cn as p } from "./utils.es.js";
|
|
6
6
|
import { Calendar as P } from "./calendar.es.js";
|
|
7
|
-
import { Button as
|
|
7
|
+
import { Button as m } from "./button.es.js";
|
|
8
8
|
import { Dialog as $, DialogContent as A, DialogHeader as H, DialogTitle as B, DialogDescription as I } from "./dialog.es.js";
|
|
9
|
-
import { formatDate as
|
|
10
|
-
const
|
|
11
|
-
formatStr:
|
|
9
|
+
import { formatDate as l } from "./format.es.js";
|
|
10
|
+
const L = ({
|
|
11
|
+
formatStr: n,
|
|
12
12
|
selected: o,
|
|
13
|
-
placeholder:
|
|
14
|
-
className:
|
|
15
|
-
calendarClassName:
|
|
13
|
+
placeholder: d,
|
|
14
|
+
className: h,
|
|
15
|
+
calendarClassName: g,
|
|
16
16
|
onDayClick: y,
|
|
17
17
|
cancelText: x,
|
|
18
18
|
applyText: u,
|
|
19
|
-
onSelect:
|
|
20
|
-
fromText:
|
|
21
|
-
toText:
|
|
22
|
-
disabled:
|
|
19
|
+
onSelect: b,
|
|
20
|
+
fromText: v,
|
|
21
|
+
toText: N,
|
|
22
|
+
disabled: M,
|
|
23
23
|
...C
|
|
24
24
|
}) => {
|
|
25
|
-
const [T,
|
|
26
|
-
y?.(t,
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
|
|
25
|
+
const [T, s] = f.useState(!1), [e, i] = f.useState(o), D = (t, k, j) => {
|
|
26
|
+
y?.(t, k, j), !e || !e.from ? i({ from: t, to: void 0 }) : t < e.from ? e.to ? i({ from: t, to: e.to }) : i({ from: t, to: e.from }) : e?.from?.getTime() === t?.getTime() && (e?.from?.getTime() === e?.to?.getTime() || !e.to) ? i(void 0) : e?.from?.getTime() !== e?.to?.getTime() && (e.from?.getTime() === t?.getTime() || e?.to?.getTime() === t?.getTime()) ? i({ from: t, to: t }) : i({ ...e, to: t });
|
|
27
|
+
}, c = () => {
|
|
28
|
+
s(!1), i(o);
|
|
29
|
+
}, w = () => {
|
|
30
|
+
b?.(e), s(!1);
|
|
31
31
|
};
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
-
/* @__PURE__ */
|
|
34
|
-
|
|
32
|
+
return /* @__PURE__ */ a(R, { children: [
|
|
33
|
+
/* @__PURE__ */ a(
|
|
34
|
+
m,
|
|
35
35
|
{
|
|
36
|
-
variant: "
|
|
37
|
-
className:
|
|
38
|
-
"w-full border-
|
|
39
|
-
|
|
40
|
-
g
|
|
36
|
+
variant: "text",
|
|
37
|
+
className: p(
|
|
38
|
+
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 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",
|
|
39
|
+
h
|
|
41
40
|
),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
"data-placeholder": o ? void 0 : "",
|
|
42
|
+
onClick: () => s(!0),
|
|
43
|
+
"aria-label": o ? `Selected date: ${o?.from ? l(o.from, n ?? "yyyy/MM/dd") : ""} - ${o?.to ? l(o.to, n ?? "yyyy/MM/dd") : ""}` : d,
|
|
44
|
+
disabled: M,
|
|
45
45
|
children: [
|
|
46
|
-
o ? /* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
|
|
46
|
+
o ? /* @__PURE__ */ a("div", { className: "grid grid-cols-2 flex-1 justify-items-start", children: [
|
|
47
|
+
/* @__PURE__ */ a("span", { children: [
|
|
48
|
+
v ?? "From",
|
|
49
49
|
": ",
|
|
50
|
-
o?.from ?
|
|
50
|
+
o?.from ? l(o.from, n ?? "yyyy/MM/dd") : "-"
|
|
51
51
|
] }),
|
|
52
52
|
" ",
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
|
|
53
|
+
/* @__PURE__ */ a("span", { children: [
|
|
54
|
+
N ?? "To",
|
|
55
55
|
": ",
|
|
56
|
-
o?.to ?
|
|
56
|
+
o?.to ? l(o.to, n ?? "yyyy/MM/dd") : "-"
|
|
57
57
|
] })
|
|
58
|
-
] }) : /* @__PURE__ */ r("span", { children:
|
|
58
|
+
] }) : /* @__PURE__ */ r("span", { children: d ?? "Pick a Range" }),
|
|
59
59
|
/* @__PURE__ */ r(O, { className: "mr-2 h-5 w-4 ms-auto" })
|
|
60
60
|
]
|
|
61
61
|
}
|
|
62
62
|
),
|
|
63
|
-
/* @__PURE__ */ r($, { open: T, onOpenChange:
|
|
64
|
-
/* @__PURE__ */
|
|
65
|
-
/* @__PURE__ */ r(B, { asChild: !0, children: /* @__PURE__ */
|
|
66
|
-
/* @__PURE__ */
|
|
63
|
+
/* @__PURE__ */ r($, { open: T, onOpenChange: c, children: /* @__PURE__ */ a(A, { className: "h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none", children: [
|
|
64
|
+
/* @__PURE__ */ a(H, { children: [
|
|
65
|
+
/* @__PURE__ */ r(B, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 border-b border-b-gray-200 mt-3", children: [
|
|
66
|
+
/* @__PURE__ */ a("div", { className: "text-sm font-bold space-y-1 border-e border-e-gray-200 p-4", children: [
|
|
67
67
|
/* @__PURE__ */ r("h5", { className: "text-text-300 font-medium text-xs", children: "From" }),
|
|
68
|
-
/* @__PURE__ */ r("h6", { className: "", children: e?.from ?
|
|
68
|
+
/* @__PURE__ */ r("h6", { className: "", children: e?.from ? l(e.from, n ?? "eee, MMM dd") : /* @__PURE__ */ r("pre", { children: " " }) })
|
|
69
69
|
] }),
|
|
70
|
-
/* @__PURE__ */
|
|
70
|
+
/* @__PURE__ */ a("div", { className: "text-sm font-bold space-y-1 p-4 flex flex-col justify-center", children: [
|
|
71
71
|
/* @__PURE__ */ r("h5", { className: "text-text-300 font-medium text-xs", children: "To" }),
|
|
72
|
-
/* @__PURE__ */ r("h6", { className: "", children: e?.to ?
|
|
72
|
+
/* @__PURE__ */ r("h6", { className: "", children: e?.to ? l(e.to, n ?? "eee, MMM dd") : /* @__PURE__ */ r("pre", { children: " " }) })
|
|
73
73
|
] })
|
|
74
74
|
] }) }),
|
|
75
75
|
/* @__PURE__ */ r(F, { children: /* @__PURE__ */ r(I, { children: "Date Picker" }) })
|
|
76
76
|
] }),
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
/* @__PURE__ */ r(P, { ...C, mode: "range", selected: o, onDayClick: D, className:
|
|
79
|
-
/* @__PURE__ */
|
|
80
|
-
/* @__PURE__ */ r(
|
|
81
|
-
/* @__PURE__ */ r(
|
|
77
|
+
/* @__PURE__ */ a("div", { className: "flex-1 flex flex-col items-center p-4", children: [
|
|
78
|
+
/* @__PURE__ */ r(P, { ...C, mode: "range", selected: o, onDayClick: D, className: p("p-0", g) }),
|
|
79
|
+
/* @__PURE__ */ a("div", { className: "flex justify-center items-center gap-4 mt-auto w-full", children: [
|
|
80
|
+
/* @__PURE__ */ r(m, { variant: "text", className: "flex-1 h-10", onClick: c, children: x ?? "Cancel" }),
|
|
81
|
+
/* @__PURE__ */ r(m, { variant: "primary", className: "flex-1 h-10", onClick: w, children: u ?? "Apply" })
|
|
82
82
|
] })
|
|
83
83
|
] })
|
|
84
84
|
] }) })
|
|
85
85
|
] });
|
|
86
86
|
};
|
|
87
87
|
export {
|
|
88
|
-
|
|
88
|
+
L as MobileDateRangePicker
|
|
89
89
|
};
|
|
90
90
|
//# sourceMappingURL=mobiledaterangepicker.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobiledaterangepicker.es.js","sources":["../src/components/date-picker/MobileDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDateRangePickerProps = PropsBase &\r\n Omit<PropsRange, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: DateRange;\r\n required?: boolean;\r\n cancelText?: string;\r\n applyText?: string;\r\n onSelect?: (date: DateRange | undefined) => void;\r\n fromText?: string;\r\n toText?: string;\r\n disabled?: boolean;\r\n };\r\n\r\nconst MobileDateRangePicker: React.FC<MobileDateRangePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n onDayClick,\r\n cancelText,\r\n applyText,\r\n onSelect,\r\n fromText,\r\n toText,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const [range, setRange] = React.useState<DateRange | undefined>(selected);\r\n\r\n const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n onDayClick?.(date, modifiers, e);\r\n if (!range || !range.from) {\r\n setRange({ from: date, to: undefined });\r\n } else if (date < range.from) {\r\n if (!range.to) {\r\n setRange({ from: date, to: range.from });\r\n } else {\r\n setRange({ from: date, to: range.to });\r\n }\r\n } else if (range?.from?.getTime() === date?.getTime() && (range?.from?.getTime() === range?.to?.getTime() || !range.to)) {\r\n setRange(undefined);\r\n } else if (\r\n range?.from?.getTime() !== range?.to?.getTime() &&\r\n (range.from?.getTime() === date?.getTime() || range?.to?.getTime() === date?.getTime())\r\n ) {\r\n setRange({ from: date, to: date });\r\n } else {\r\n setRange({ ...range, to: date });\r\n }\r\n };\r\n\r\n const handleCancel = () => {\r\n setIsOpen(false);\r\n setRange(selected);\r\n };\r\n\r\n const handleApply = () => {\r\n onSelect?.(range);\r\n setIsOpen(false);\r\n };\r\n\r\n return (\r\n <>\r\n <Button\r\n variant={\"outline\"}\r\n className={cn(\r\n \"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100\",\r\n !selected && \"text-muted-foreground\",\r\n className,\r\n )}\r\n onClick={() => setIsOpen(true)}\r\n aria-label={\r\n selected\r\n ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n : placeholder\r\n }\r\n disabled={disabled}\r\n >\r\n {selected ? (\r\n <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n <span>\r\n {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n </span>{\" \"}\r\n <span>\r\n {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n </span>\r\n </div>\r\n ) : (\r\n <span>{placeholder ?? \"Pick a Range\"}</span>\r\n )}\r\n <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n </Button>\r\n <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n <DialogHeader>\r\n <DialogTitle asChild>\r\n <div className=\"grid grid-cols-2 border-b border-b-gray-200 mt-3\">\r\n <div className=\"text-sm font-bold space-y-1 border-e border-e-gray-200 p-4\">\r\n <h5 className=\"text-text-300 font-medium text-xs\">From</h5>\r\n <h6 className=\"\">{range?.from ? format(range.from, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n </div>\r\n <div className=\"text-sm font-bold space-y-1 p-4 flex flex-col justify-center\">\r\n <h5 className=\"text-text-300 font-medium text-xs\">To</h5>\r\n <h6 className=\"\">{range?.to ? format(range.to, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n </div>\r\n </div>\r\n </DialogTitle>\r\n <VisuallyHidden>\r\n <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n </VisuallyHidden>\r\n </DialogHeader>\r\n <div className=\"flex-1 flex flex-col items-center p-4\">\r\n <Calendar {...props} mode=\"range\" selected={selected} onDayClick={handleDayClick} className={cn(\"p-0\", calendarClassName)} />\r\n\r\n <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n <Button variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n {cancelText ?? \"Cancel\"}\r\n </Button>\r\n <Button variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\r\n {applyText ?? \"Apply\"}\r\n </Button>\r\n </div>\r\n </div>\r\n </DialogContent>\r\n </Dialog>\r\n </>\r\n );\r\n};\r\n\r\nexport { MobileDateRangePicker, type MobileDateRangePickerProps };\r\n"],"names":["MobileDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","onDayClick","cancelText","applyText","onSelect","fromText","toText","disabled","props","isOpen","setIsOpen","React","range","setRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mobiledaterangepicker.es.js","sources":["../src/components/date-picker/MobileDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDateRangePickerProps = PropsBase &\r\n Omit<PropsRange, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: DateRange;\r\n required?: boolean;\r\n cancelText?: string;\r\n applyText?: string;\r\n onSelect?: (date: DateRange | undefined) => void;\r\n fromText?: string;\r\n toText?: string;\r\n disabled?: boolean;\r\n };\r\n\r\nconst MobileDateRangePicker: React.FC<MobileDateRangePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n onDayClick,\r\n cancelText,\r\n applyText,\r\n onSelect,\r\n fromText,\r\n toText,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const [range, setRange] = React.useState<DateRange | undefined>(selected);\r\n\r\n const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n onDayClick?.(date, modifiers, e);\r\n if (!range || !range.from) {\r\n setRange({ from: date, to: undefined });\r\n } else if (date < range.from) {\r\n if (!range.to) {\r\n setRange({ from: date, to: range.from });\r\n } else {\r\n setRange({ from: date, to: range.to });\r\n }\r\n } else if (range?.from?.getTime() === date?.getTime() && (range?.from?.getTime() === range?.to?.getTime() || !range.to)) {\r\n setRange(undefined);\r\n } else if (\r\n range?.from?.getTime() !== range?.to?.getTime() &&\r\n (range.from?.getTime() === date?.getTime() || range?.to?.getTime() === date?.getTime())\r\n ) {\r\n setRange({ from: date, to: date });\r\n } else {\r\n setRange({ ...range, to: date });\r\n }\r\n };\r\n\r\n const handleCancel = () => {\r\n setIsOpen(false);\r\n setRange(selected);\r\n };\r\n\r\n const handleApply = () => {\r\n onSelect?.(range);\r\n setIsOpen(false);\r\n };\r\n\r\n return (\r\n <>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 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 className,\r\n )}\r\n data-placeholder={!selected ? \"\" : undefined}\r\n onClick={() => setIsOpen(true)}\r\n aria-label={\r\n selected\r\n ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n : placeholder\r\n }\r\n disabled={disabled}\r\n >\r\n {selected ? (\r\n <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n <span>\r\n {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n </span>{\" \"}\r\n <span>\r\n {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n </span>\r\n </div>\r\n ) : (\r\n <span>{placeholder ?? \"Pick a Range\"}</span>\r\n )}\r\n <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n </Button>\r\n <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n <DialogHeader>\r\n <DialogTitle asChild>\r\n <div className=\"grid grid-cols-2 border-b border-b-gray-200 mt-3\">\r\n <div className=\"text-sm font-bold space-y-1 border-e border-e-gray-200 p-4\">\r\n <h5 className=\"text-text-300 font-medium text-xs\">From</h5>\r\n <h6 className=\"\">{range?.from ? format(range.from, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n </div>\r\n <div className=\"text-sm font-bold space-y-1 p-4 flex flex-col justify-center\">\r\n <h5 className=\"text-text-300 font-medium text-xs\">To</h5>\r\n <h6 className=\"\">{range?.to ? format(range.to, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n </div>\r\n </div>\r\n </DialogTitle>\r\n <VisuallyHidden>\r\n <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n </VisuallyHidden>\r\n </DialogHeader>\r\n <div className=\"flex-1 flex flex-col items-center p-4\">\r\n <Calendar {...props} mode=\"range\" selected={selected} onDayClick={handleDayClick} className={cn(\"p-0\", calendarClassName)} />\r\n\r\n <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n <Button variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n {cancelText ?? \"Cancel\"}\r\n </Button>\r\n <Button variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\r\n {applyText ?? \"Apply\"}\r\n </Button>\r\n </div>\r\n </div>\r\n </DialogContent>\r\n </Dialog>\r\n </>\r\n );\r\n};\r\n\r\nexport { MobileDateRangePicker, type MobileDateRangePickerProps };\r\n"],"names":["MobileDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","onDayClick","cancelText","applyText","onSelect","fromText","toText","disabled","props","isOpen","setIsOpen","React","range","setRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}
|
|
@@ -1,41 +1,45 @@
|
|
|
1
|
-
import { jsxs as t, jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { VisuallyHidden as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { Button as
|
|
6
|
-
import { TimePickerContent as
|
|
7
|
-
import { SwipableDrawer as
|
|
8
|
-
const
|
|
9
|
-
time:
|
|
10
|
-
onTimeChange:
|
|
11
|
-
className:
|
|
1
|
+
import { jsxs as t, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useState as p } from "react";
|
|
3
|
+
import { VisuallyHidden as c } from "@radix-ui/react-visually-hidden";
|
|
4
|
+
import { cn as m } from "./utils.es.js";
|
|
5
|
+
import { Button as b } from "./button.es.js";
|
|
6
|
+
import { TimePickerContent as u } from "./timepickercontent.es.js";
|
|
7
|
+
import { SwipableDrawer as f, SwipableDrawerContent as h, SwipableDrawerHeader as g, SwipableDrawerTitle as w, SwipableDrawerDescription as x } from "./swipabledrawer.es.js";
|
|
8
|
+
const j = ({
|
|
9
|
+
time: e,
|
|
10
|
+
onTimeChange: i,
|
|
11
|
+
className: n,
|
|
12
12
|
slotsProps: l,
|
|
13
|
-
placeholder:
|
|
13
|
+
placeholder: d = "Pick a time",
|
|
14
14
|
...s
|
|
15
15
|
}) => {
|
|
16
|
-
const [a,
|
|
17
|
-
return /* @__PURE__ */ t(
|
|
18
|
-
/* @__PURE__ */
|
|
19
|
-
|
|
16
|
+
const [a, o] = p(!1);
|
|
17
|
+
return /* @__PURE__ */ t(f, { open: a, onOpenChange: o, children: [
|
|
18
|
+
/* @__PURE__ */ r(
|
|
19
|
+
b,
|
|
20
20
|
{
|
|
21
|
-
variant: "
|
|
22
|
-
className:
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
variant: "text",
|
|
22
|
+
className: m(
|
|
23
|
+
"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 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",
|
|
24
|
+
n
|
|
25
|
+
),
|
|
26
|
+
"data-placeholder": e ? void 0 : "",
|
|
27
|
+
onClick: () => o(!0),
|
|
28
|
+
"aria-label": e?.hour ? `Selected time: ${e.hour}:${e.minute} ${e.ampm}` : d,
|
|
25
29
|
...s,
|
|
26
|
-
children: `${
|
|
30
|
+
children: `${e?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${e?.minute?.toString()?.padStart(2, "0") ?? "--"} ${e?.ampm ?? "--"}`
|
|
27
31
|
}
|
|
28
32
|
),
|
|
29
33
|
/* @__PURE__ */ t(h, { children: [
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
-
/* @__PURE__ */
|
|
32
|
-
/* @__PURE__ */
|
|
34
|
+
/* @__PURE__ */ r(g, { className: "p-0", children: /* @__PURE__ */ t(c, { children: [
|
|
35
|
+
/* @__PURE__ */ r(w, { className: "text-primary text-lg font-bold text-start", children: " " }),
|
|
36
|
+
/* @__PURE__ */ r(x, { children: " " })
|
|
33
37
|
] }) }),
|
|
34
|
-
/* @__PURE__ */
|
|
38
|
+
/* @__PURE__ */ r(u, { isOpen: a, onTimeChange: i, time: e, slotsProps: l })
|
|
35
39
|
] })
|
|
36
40
|
] });
|
|
37
41
|
};
|
|
38
42
|
export {
|
|
39
|
-
|
|
43
|
+
j as MobileTimePicker
|
|
40
44
|
};
|
|
41
45
|
//# sourceMappingURL=mobiletimepicker.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobiletimepicker.es.js","sources":["../src/components/date-picker/MobileTimePicker.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"mobiletimepicker.es.js","sources":["../src/components/date-picker/MobileTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport {\r\n SwipableDrawer,\r\n SwipableDrawerContent,\r\n SwipableDrawerDescription,\r\n SwipableDrawerHeader,\r\n SwipableDrawerTitle,\r\n} from \"../drawer/SwipableDrawer\";\r\n\r\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n time: Time | undefined;\r\n onTimeChange: (time: Time | undefined) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n slotsProps?: {\r\n content?: HTMLAttributes<HTMLDivElement>;\r\n };\r\n};\r\n\r\nconst MobileTimePicker: React.FC<MobileTimePickerProps> = ({\r\n time,\r\n onTimeChange,\r\n className,\r\n slotsProps,\r\n placeholder = \"Pick a time\",\r\n ...restProps\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n return (\r\n <SwipableDrawer open={isOpen} onOpenChange={setIsOpen}>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 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 className,\r\n )}\r\n data-placeholder={!time ? \"\" : undefined}\r\n onClick={() => setIsOpen(true)}\r\n aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n {...restProps}\r\n >\r\n {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n </Button>\r\n <SwipableDrawerContent>\r\n <SwipableDrawerHeader className=\"p-0\">\r\n <VisuallyHidden>\r\n <SwipableDrawerTitle className=\"text-primary text-lg font-bold text-start\"> </SwipableDrawerTitle>\r\n <SwipableDrawerDescription> </SwipableDrawerDescription>\r\n </VisuallyHidden>\r\n </SwipableDrawerHeader>\r\n <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n </SwipableDrawerContent>\r\n </SwipableDrawer>\r\n );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["MobileTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AA0BA,MAAMA,IAAoD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACG,gBAAAC,EAAAC,GAAA,EAAe,MAAMJ,GAAQ,cAAcC,GAC1C,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAX;AAAA,QACF;AAAA,QACA,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMO,EAAU,EAAI;AAAA,QAC7B,cAAYP,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IACpI;AAAA,sBACCc,GACC,EAAA,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAqB,EAAA,WAAU,OAC9B,UAAA,gBAAAN,EAACO,GACC,EAAA,UAAA;AAAA,QAAC,gBAAAL,EAAAM,GAAA,EAAoB,WAAU,6CAA4C,UAAC,KAAA;AAAA,QAC5E,gBAAAN,EAACO,KAA0B,UAAC,IAAA,CAAA;AAAA,MAAA,EAAA,CAC9B,EACF,CAAA;AAAA,MACC,gBAAAP,EAAAQ,GAAA,EAAkB,QAAAb,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,EAAwB,CAAA;AAAA,IAAA,EACrG,CAAA;AAAA,EAAA,GACF;AAEJ;"}
|
package/dist/modal.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.es.js","sources":["../src/components/modal/Modal.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"modal.es.js","sources":["../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { XMark } from \"@trsys-tech/matrix-icons\";\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst ModalPortal = DialogPrimitive.Portal;\r\n\r\nconst ModalClose = DialogPrimitive.Close;\r\n\r\nconst ModalOverlay = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Overlay>,\r\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n <DialogPrimitive.Overlay\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n className,\r\n )}\r\n {...props}\r\n />\r\n));\r\nModalOverlay.displayName = DialogPrimitive.Overlay.displayName;\r\n\r\nconst ModalHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div className={cn(\"flex flex-row justify-between\", className)} {...props} />\r\n);\r\nModalHeader.displayName = \"DialogHeader\";\r\n\r\nconst ModalFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div className={cn(\"flex flex-row justify-end gap-2\", className)} {...props} />\r\n);\r\nModalFooter.displayName = \"DialogFooter\";\r\ntype ModalFooterProps = React.ComponentProps<typeof ModalFooter>;\r\n\r\nconst ModalTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(\r\n ({ className, ...props }, ref) => (\r\n <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)} {...props} />\r\n ),\r\n);\r\nModalTitle.displayName = DialogPrimitive.Title.displayName;\r\n\r\nconst ModalDescription = React.forwardRef<\r\n React.ElementRef<typeof DialogPrimitive.Description>,\r\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\r\n>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />);\r\nModalDescription.displayName = DialogPrimitive.Description.displayName;\r\n\r\ninterface ModalProps extends DialogPrimitive.DialogProps, Omit<DialogPrimitive.DialogContentProps, \"title\"> {\r\n title: React.ReactNode;\r\n fullScreen?: boolean;\r\n slotProps?: {\r\n title?: DialogPrimitive.DialogTitleProps;\r\n close?: DialogPrimitive.DialogCloseProps;\r\n header?: React.ComponentProps<typeof ModalHeader>;\r\n portal?: DialogPrimitive.DialogPortalProps;\r\n divider?: React.ComponentProps<\"hr\">;\r\n };\r\n}\r\n\r\nconst Modal = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, ModalProps>((props, ref) => {\r\n const { title, className, children, fullScreen, open, onOpenChange, defaultOpen, modal, slotProps, ...restProps } = props;\r\n\r\n return (\r\n <DialogPrimitive.Root defaultOpen={defaultOpen} modal={modal} open={open} onOpenChange={onOpenChange}>\r\n <ModalPortal {...(slotProps?.portal ?? {})}>\r\n <ModalOverlay />\r\n <DialogPrimitive.Content\r\n ref={ref}\r\n className={cn(\r\n \"fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col gap-2 w-full max-w-lg p-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\r\n fullScreen ? \"w-screen h-screen\" : \"max-w-lg\",\r\n className,\r\n )}\r\n {...restProps}\r\n aria-describedby={undefined}\r\n >\r\n <ModalHeader {...(slotProps?.header ?? {})}>\r\n <ModalTitle {...(slotProps?.title ?? {})}>{title}</ModalTitle>\r\n <ModalClose\r\n {...(slotProps?.close ?? {})}\r\n className={cn(\r\n \"rounded-sm hover:bg-primary-50 hover:ring-2 hover:ring-primary-50 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground mt-0\",\r\n slotProps?.close?.className,\r\n )}\r\n >\r\n <XMark className=\"h-5 w-5\" />\r\n <span className=\"sr-only\">Close</span>\r\n </ModalClose>\r\n </ModalHeader>\r\n {/* Divider: the padding and margin is because of a bug in chrome causes the border to be shown with more height than expected */}\r\n <hr\r\n {...(slotProps?.divider ?? {})}\r\n className={cn(\"w-full border-muted -mt-[1px] pb-2\", fullScreen && \"w-screen -mx-4\", slotProps?.divider?.className)}\r\n />\r\n {children}\r\n </DialogPrimitive.Content>\r\n </ModalPortal>\r\n </DialogPrimitive.Root>\r\n );\r\n});\r\n\r\nexport { Modal, ModalFooter, type ModalProps, type ModalFooterProps };\r\n"],"names":["ModalPortal","DialogPrimitive","ModalClose","ModalOverlay","React","className","props","ref","jsx","cn","ModalHeader","ModalFooter","ModalTitle","ModalDescription","Modal","title","children","fullScreen","open","onOpenChange","defaultOpen","modal","slotProps","restProps","jsxs","XMark"],"mappings":"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"}
|