@trsys-tech/matrix-library 1.0.0-canary.9 → 1.0.1-canary-1
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/components/data-grid/DataGrid.d.ts +2 -0
- package/dist/components/data-grid/DataGrid.d.ts.map +1 -1
- package/dist/components/date-picker/DesktopDatePicker.d.ts +3 -2
- package/dist/components/date-picker/DesktopDatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DesktopDateRangePicker.d.ts +3 -2
- package/dist/components/date-picker/DesktopDateRangePicker.d.ts.map +1 -1
- package/dist/components/date-picker/MobileDatePicker.d.ts +3 -2
- package/dist/components/date-picker/MobileDatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/MobileDateRangePicker.d.ts +3 -2
- package/dist/components/date-picker/MobileDateRangePicker.d.ts.map +1 -1
- package/dist/datagrid.es.js +175 -152
- package/dist/datagrid.es.js.map +1 -1
- package/dist/desktopdatepicker.es.js +28 -25
- package/dist/desktopdatepicker.es.js.map +1 -1
- package/dist/desktopdaterangepicker.es.js +19 -17
- package/dist/desktopdaterangepicker.es.js.map +1 -1
- package/dist/mobiledatepicker.es.js +22 -20
- package/dist/mobiledatepicker.es.js.map +1 -1
- package/dist/mobiledaterangepicker.es.js +24 -22
- package/dist/mobiledaterangepicker.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsxs as r, Fragment as
|
|
1
|
+
import { jsxs as r, Fragment as R, jsx as m } from "react/jsx-runtime";
|
|
2
2
|
import * as c from "react";
|
|
3
|
-
import { VisuallyHidden as
|
|
4
|
-
import { Calendar as
|
|
3
|
+
import { VisuallyHidden as O } from "@radix-ui/react-visually-hidden";
|
|
4
|
+
import { Calendar as P } from "@trsys-tech/matrix-icons";
|
|
5
5
|
import { cn as f } from "./utils.es.js";
|
|
6
|
-
import { Calendar as
|
|
6
|
+
import { Calendar as $ } from "./calendar.es.js";
|
|
7
7
|
import { Button as l } from "./button.es.js";
|
|
8
|
-
import { Dialog as
|
|
8
|
+
import { Dialog as A, DialogContent as H, DialogHeader as B, DialogTitle as I, DialogDescription as V } from "./dialog.es.js";
|
|
9
9
|
import { format as i } from "./format.es.js";
|
|
10
|
-
const
|
|
10
|
+
const L = ({
|
|
11
11
|
formatStr: a,
|
|
12
12
|
selected: e,
|
|
13
13
|
placeholder: s,
|
|
@@ -20,16 +20,17 @@ const K = ({
|
|
|
20
20
|
fromText: M,
|
|
21
21
|
toText: v,
|
|
22
22
|
disabled: N,
|
|
23
|
-
|
|
23
|
+
disabledDates: w,
|
|
24
|
+
...C
|
|
24
25
|
}) => {
|
|
25
|
-
const [
|
|
26
|
-
g?.(o,
|
|
26
|
+
const [D, n] = c.useState(!1), [t, x] = c.useState(e), T = (o, j, F) => {
|
|
27
|
+
g?.(o, j, F), !t || !t.from ? x({ from: o, to: void 0 }) : o < t.from ? t.to ? x({ from: o, to: t.to }) : x({ from: o, to: t.from }) : t?.from?.getTime() === o?.getTime() && (t?.from?.getTime() === t?.to?.getTime() || !t.to) ? x(void 0) : t?.from?.getTime() !== t?.to?.getTime() && (t.from?.getTime() === o?.getTime() || t?.to?.getTime() === o?.getTime()) ? x({ from: o, to: o }) : x({ ...t, to: o });
|
|
27
28
|
}, d = () => {
|
|
28
29
|
n(!1), x(e);
|
|
29
|
-
},
|
|
30
|
+
}, k = () => {
|
|
30
31
|
b?.(t), n(!1);
|
|
31
32
|
};
|
|
32
|
-
return /* @__PURE__ */ r(
|
|
33
|
+
return /* @__PURE__ */ r(R, { children: [
|
|
33
34
|
/* @__PURE__ */ r(
|
|
34
35
|
l,
|
|
35
36
|
{
|
|
@@ -57,13 +58,13 @@ const K = ({
|
|
|
57
58
|
e?.to ? i(e.to, a ?? "yyyy/MM/dd") : "-"
|
|
58
59
|
] })
|
|
59
60
|
] }) : /* @__PURE__ */ m("span", { children: s ?? "Pick a Range" }),
|
|
60
|
-
/* @__PURE__ */ m(
|
|
61
|
+
/* @__PURE__ */ m(P, { className: "mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto" })
|
|
61
62
|
]
|
|
62
63
|
}
|
|
63
64
|
),
|
|
64
|
-
/* @__PURE__ */ m(
|
|
65
|
-
/* @__PURE__ */ r(
|
|
66
|
-
/* @__PURE__ */ m(
|
|
65
|
+
/* @__PURE__ */ m(A, { open: D, onOpenChange: d, children: /* @__PURE__ */ r(H, { className: "mtx-h-dscreen mtx-w-screen mtx-p-0 mtx-flex mtx-flex-col mtx-gap-0 data-[state=open]:mtx-animate-slide-from-bottom data-[state=closed]:mtx-animate-slide-to-bottom mtx-overflow-auto mtx-max-w-screen-2xl sm:mtx-rounded-none", children: [
|
|
66
|
+
/* @__PURE__ */ r(B, { children: [
|
|
67
|
+
/* @__PURE__ */ m(I, { asChild: !0, children: /* @__PURE__ */ r("div", { className: "mtx-grid mtx-grid-cols-2 mtx-border-b mtx-border-b-gray-200 mtx-mt-3", children: [
|
|
67
68
|
/* @__PURE__ */ r("div", { className: "mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-border-e mtx-border-e-gray-200 mtx-p-4", children: [
|
|
68
69
|
/* @__PURE__ */ m("h5", { className: "mtx-text-text-300 mtx-font-medium mtx-text-xs", children: "From" }),
|
|
69
70
|
/* @__PURE__ */ m("h6", { className: "", children: t?.from ? i(t.from, a ?? "eee, MMM dd") : /* @__PURE__ */ m("pre", { children: " " }) })
|
|
@@ -73,31 +74,32 @@ const K = ({
|
|
|
73
74
|
/* @__PURE__ */ m("h6", { className: "", children: t?.to ? i(t.to, a ?? "eee, MMM dd") : /* @__PURE__ */ m("pre", { children: " " }) })
|
|
74
75
|
] })
|
|
75
76
|
] }) }),
|
|
76
|
-
/* @__PURE__ */ m(
|
|
77
|
+
/* @__PURE__ */ m(O, { children: /* @__PURE__ */ m(V, { children: "Date Picker" }) })
|
|
77
78
|
] }),
|
|
78
79
|
/* @__PURE__ */ r("div", { className: "mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4", children: [
|
|
79
80
|
/* @__PURE__ */ m(
|
|
80
|
-
|
|
81
|
+
$,
|
|
81
82
|
{
|
|
82
83
|
defaultMonth: e?.from,
|
|
83
84
|
startMonth: new Date(2e3, 0, 1),
|
|
84
85
|
endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
|
|
85
|
-
...
|
|
86
|
+
...C,
|
|
86
87
|
mode: "range",
|
|
87
88
|
selected: e,
|
|
88
|
-
onDayClick:
|
|
89
|
-
className: f("mtx-p-0", h)
|
|
89
|
+
onDayClick: T,
|
|
90
|
+
className: f("mtx-p-0", h),
|
|
91
|
+
disabled: w
|
|
90
92
|
}
|
|
91
93
|
),
|
|
92
94
|
/* @__PURE__ */ r("div", { className: "mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full", children: [
|
|
93
95
|
/* @__PURE__ */ m(l, { variant: "text", className: "mtx-flex-1 mtx-h-10", onClick: d, type: "button", children: y ?? "Cancel" }),
|
|
94
|
-
/* @__PURE__ */ m(l, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick:
|
|
96
|
+
/* @__PURE__ */ m(l, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick: k, type: "button", children: u ?? "Apply" })
|
|
95
97
|
] })
|
|
96
98
|
] })
|
|
97
99
|
] }) })
|
|
98
100
|
] });
|
|
99
101
|
};
|
|
100
102
|
export {
|
|
101
|
-
|
|
103
|
+
L as MobileDateRangePicker
|
|
102
104
|
};
|
|
103
105
|
//# 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=\"text\"\r\n className={cn(\r\n \"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n 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 type=\"button\"\r\n >\r\n {selected ? (\r\n <div className=\"mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-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=\"mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto\" />\r\n </Button>\r\n <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n <DialogContent className=\"mtx-h-dscreen mtx-w-screen mtx-p-0 mtx-flex mtx-flex-col mtx-gap-0 data-[state=open]:mtx-animate-slide-from-bottom data-[state=closed]:mtx-animate-slide-to-bottom mtx-overflow-auto mtx-max-w-screen-2xl sm:mtx-rounded-none\">\r\n <DialogHeader>\r\n <DialogTitle asChild>\r\n <div className=\"mtx-grid mtx-grid-cols-2 mtx-border-b mtx-border-b-gray-200 mtx-mt-3\">\r\n <div className=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-border-e mtx-border-e-gray-200 mtx-p-4\">\r\n <h5 className=\"mtx-text-text-300 mtx-font-medium mtx-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=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-p-4 mtx-flex mtx-flex-col mtx-justify-center\">\r\n <h5 className=\"mtx-text-text-300 mtx-font-medium mtx-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=\"mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4\">\r\n <Calendar\r\n defaultMonth={selected?.from}\r\n startMonth={new Date(2000, 0, 1)}\r\n endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n {...props}\r\n mode=\"range\"\r\n selected={selected}\r\n onDayClick={handleDayClick}\r\n className={cn(\"mtx-p-0\", calendarClassName)}\r\n />\r\n\r\n <div className=\"mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full\">\r\n <Button variant=\"text\" className=\"mtx-flex-1 mtx-h-10\" onClick={handleCancel} type=\"button\">\r\n {cancelText ?? \"Cancel\"}\r\n </Button>\r\n <Button variant=\"primary\" className=\"mtx-flex-1 mtx-h-10\" onClick={handleApply} type=\"button\">\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, Matcher } 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 = Omit<PropsBase, \"disabled\"> &\r\n Omit<PropsRange, \"mode\" | \"disabled\"> & {\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 disabledDates?: Matcher | Matcher[];\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 disabledDates,\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 \"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n 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 type=\"button\"\r\n >\r\n {selected ? (\r\n <div className=\"mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-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=\"mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto\" />\r\n </Button>\r\n <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n <DialogContent className=\"mtx-h-dscreen mtx-w-screen mtx-p-0 mtx-flex mtx-flex-col mtx-gap-0 data-[state=open]:mtx-animate-slide-from-bottom data-[state=closed]:mtx-animate-slide-to-bottom mtx-overflow-auto mtx-max-w-screen-2xl sm:mtx-rounded-none\">\r\n <DialogHeader>\r\n <DialogTitle asChild>\r\n <div className=\"mtx-grid mtx-grid-cols-2 mtx-border-b mtx-border-b-gray-200 mtx-mt-3\">\r\n <div className=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-border-e mtx-border-e-gray-200 mtx-p-4\">\r\n <h5 className=\"mtx-text-text-300 mtx-font-medium mtx-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=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-p-4 mtx-flex mtx-flex-col mtx-justify-center\">\r\n <h5 className=\"mtx-text-text-300 mtx-font-medium mtx-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=\"mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4\">\r\n <Calendar\r\n defaultMonth={selected?.from}\r\n startMonth={new Date(2000, 0, 1)}\r\n endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n {...props}\r\n mode=\"range\"\r\n selected={selected}\r\n onDayClick={handleDayClick}\r\n className={cn(\"mtx-p-0\", calendarClassName)}\r\n disabled={disabledDates}\r\n />\r\n\r\n <div className=\"mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full\">\r\n <Button variant=\"text\" className=\"mtx-flex-1 mtx-h-10\" onClick={handleCancel} type=\"button\">\r\n {cancelText ?? \"Cancel\"}\r\n </Button>\r\n <Button variant=\"primary\" className=\"mtx-flex-1 mtx-h-10\" onClick={handleApply} type=\"button\">\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","disabledDates","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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"}
|