@trsys-tech/matrix-library 1.0.0-canary.5 → 1.0.0-canary.6

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.
@@ -1 +1 @@
1
- {"version":3,"file":"MobileDatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/MobileDatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAS1D,KAAK,qBAAqB,GAAG,SAAS,GACpC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8ErD,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}
1
+ {"version":3,"file":"MobileDatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/MobileDatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAS1D,KAAK,qBAAqB,GAAG,SAAS,GACpC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+ErD,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}
@@ -1,79 +1,79 @@
1
- import { jsxs as a, Fragment as v, jsx as t } from "react/jsx-runtime";
2
- import * as s from "react";
3
- import { VisuallyHidden as M } from "@radix-ui/react-visually-hidden";
4
- import { Calendar as N } from "@trsys-tech/matrix-icons";
5
- import { cn as d } from "./utils.es.js";
6
- import { Calendar as C } from "./calendar.es.js";
7
- import { Button as x } from "./button.es.js";
8
- import { Dialog as k, DialogContent as j, DialogHeader as P, DialogTitle as F, DialogDescription as O } from "./dialog.es.js";
9
- import { format as n } from "./format.es.js";
10
- const T = ({
1
+ import { jsxs as a, Fragment as M, jsx as e } from "react/jsx-runtime";
2
+ import * as i from "react";
3
+ import { VisuallyHidden as N } from "@radix-ui/react-visually-hidden";
4
+ import { Calendar as C } from "@trsys-tech/matrix-icons";
5
+ import { cn as c } from "./utils.es.js";
6
+ import { Calendar as k } from "./calendar.es.js";
7
+ import { Button as n } from "./button.es.js";
8
+ import { Dialog as j, DialogContent as P, DialogHeader as S, DialogTitle as F, DialogDescription as O } from "./dialog.es.js";
9
+ import { format as x } from "./format.es.js";
10
+ const V = ({
11
11
  formatStr: r,
12
- selected: e,
13
- placeholder: c,
14
- className: p,
15
- calendarClassName: h,
16
- cancelText: f,
17
- applyText: u,
18
- onSelect: b,
19
- disabled: g,
20
- ...y
12
+ selected: o,
13
+ placeholder: p,
14
+ className: h,
15
+ calendarClassName: f,
16
+ cancelText: u,
17
+ applyText: b,
18
+ onSelect: g,
19
+ disabled: y,
20
+ ...D
21
21
  }) => {
22
- const [w, l] = s.useState(!1), [m, o] = s.useState(e), i = () => {
23
- l(!1), o(e);
24
- }, D = () => {
25
- b?.(m), l(!1);
22
+ const [v, l] = i.useState(!1), t = o ? new Date(o) : void 0, [m, d] = i.useState(t), s = () => {
23
+ l(!1), d(t);
24
+ }, w = () => {
25
+ g?.(m), l(!1);
26
26
  };
27
- return /* @__PURE__ */ a(v, { children: [
27
+ return /* @__PURE__ */ a(M, { children: [
28
28
  /* @__PURE__ */ a(
29
- x,
29
+ n,
30
30
  {
31
31
  variant: "text",
32
- className: d(
32
+ className: c(
33
33
  "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",
34
- p
34
+ h
35
35
  ),
36
- "data-placeholder": e ? void 0 : "",
36
+ "data-placeholder": t ? void 0 : "",
37
37
  onClick: () => l(!0),
38
- "aria-label": e ? `Selected date: ${n(e, r ?? "yyyy/MM/dd")}` : "Pick a date",
39
- disabled: g,
38
+ "aria-label": t ? `Selected date: ${x(t, r ?? "yyyy/MM/dd")}` : "Pick a date",
39
+ disabled: y,
40
40
  children: [
41
- e ? n(e, r ?? "eee, MMM dd") : /* @__PURE__ */ t("span", { children: c ?? "Pick a date" }),
42
- /* @__PURE__ */ t(N, { className: "mtx-mr-2 mtx-h-5 mtx-w-5 mtx-ms-auto" })
41
+ t ? x(t, r ?? "eee, MMM dd") : /* @__PURE__ */ e("span", { children: p ?? "Pick a date" }),
42
+ /* @__PURE__ */ e(C, { className: "mtx-mr-2 mtx-h-5 mtx-w-5 mtx-ms-auto" })
43
43
  ]
44
44
  }
45
45
  ),
46
- /* @__PURE__ */ t(k, { open: w, onOpenChange: i, children: /* @__PURE__ */ a(j, { 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: [
47
- /* @__PURE__ */ a(P, { className: "mtx-p-4 mtx-border-b mtx-border-b-gray-200", children: [
48
- /* @__PURE__ */ t(F, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-mt-3", children: [
49
- /* @__PURE__ */ t("h5", { className: "mtx-text-text-300", children: m ? m.getFullYear() : /* @__PURE__ */ t("pre", { children: " " }) }),
50
- /* @__PURE__ */ t("h6", { className: "", children: m ? n(m, r ?? "eee, MMM dd") : /* @__PURE__ */ t("pre", { children: " " }) })
46
+ /* @__PURE__ */ e(j, { open: v, onOpenChange: s, children: /* @__PURE__ */ a(P, { 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: [
47
+ /* @__PURE__ */ a(S, { className: "mtx-p-4 mtx-border-b mtx-border-b-gray-200", children: [
48
+ /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-mt-3", children: [
49
+ /* @__PURE__ */ e("h5", { className: "mtx-text-text-300", children: m ? m.getFullYear() : /* @__PURE__ */ e("pre", { children: " " }) }),
50
+ /* @__PURE__ */ e("h6", { className: "", children: m ? x(m, r ?? "eee, MMM dd") : /* @__PURE__ */ e("pre", { children: " " }) })
51
51
  ] }) }),
52
- /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(O, { children: "Date Picker" }) })
52
+ /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(O, { children: "Date Picker" }) })
53
53
  ] }),
54
54
  /* @__PURE__ */ a("div", { className: "mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4", children: [
55
- /* @__PURE__ */ t(
56
- C,
55
+ /* @__PURE__ */ e(
56
+ k,
57
57
  {
58
- defaultMonth: e,
58
+ defaultMonth: t,
59
59
  startMonth: new Date(2e3, 0, 1),
60
60
  endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
61
- ...y,
61
+ ...D,
62
62
  mode: "single",
63
63
  selected: m,
64
- onSelect: o,
65
- className: d("mtx-p-0", h)
64
+ onSelect: d,
65
+ className: c("mtx-p-0", f)
66
66
  }
67
67
  ),
68
68
  /* @__PURE__ */ a("div", { className: "mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full", children: [
69
- /* @__PURE__ */ t(x, { variant: "text", className: "mtx-flex-1 mtx-h-10", onClick: i, children: f ?? "Cancel" }),
70
- /* @__PURE__ */ t(x, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick: D, children: u ?? "Apply" })
69
+ /* @__PURE__ */ e(n, { variant: "text", className: "mtx-flex-1 mtx-h-10", onClick: s, children: u ?? "Cancel" }),
70
+ /* @__PURE__ */ e(n, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick: w, children: b ?? "Apply" })
71
71
  ] })
72
72
  ] })
73
73
  ] }) })
74
74
  ] });
75
75
  };
76
76
  export {
77
- T as MobileDatePicker
77
+ V as MobileDatePicker
78
78
  };
79
79
  //# sourceMappingURL=mobiledatepicker.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"mobiledatepicker.es.js","sources":["../src/components/date-picker/MobileDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsSingle } from \"react-day-picker\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\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 MobileDatePickerProps = PropsBase &\r\n Omit<PropsSingle, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: Date;\r\n required?: boolean;\r\n cancelText?: string;\r\n applyText?: string;\r\n onSelect?: (date: Date | undefined) => void;\r\n disabled?: boolean;\r\n };\r\n\r\nconst MobileDatePicker: React.FC<MobileDatePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n cancelText,\r\n applyText,\r\n onSelect,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(selected);\r\n\r\n const handleCancel = () => {\r\n setIsOpen(false);\r\n setSelectedDate(selected);\r\n };\r\n\r\n const handleApply = () => {\r\n onSelect?.(selectedDate);\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={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n disabled={disabled}\r\n >\r\n {selected ? format(selected, formatStr ?? \"eee, MMM dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n <CalendarIcon className=\"mtx-mr-2 mtx-h-5 mtx-w-5 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 className=\"mtx-p-4 mtx-border-b mtx-border-b-gray-200\">\r\n <DialogTitle asChild>\r\n <div className=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-mt-3\">\r\n <h5 className=\"mtx-text-text-300\">{selectedDate ? selectedDate.getFullYear() : <pre> </pre>}</h5>\r\n <h6 className=\"\">{selectedDate ? format(selectedDate, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\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}\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=\"single\"\r\n selected={selectedDate}\r\n onSelect={setSelectedDate}\r\n className={cn(\"mtx-p-0\", calendarClassName)}\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}>\r\n {cancelText ?? \"Cancel\"}\r\n </Button>\r\n <Button variant=\"primary\" className=\"mtx-flex-1 mtx-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 { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","props","isOpen","setIsOpen","React","selectedDate","setSelectedDate","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":"mobiledatepicker.es.js","sources":["../src/components/date-picker/MobileDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsSingle } from \"react-day-picker\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\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 MobileDatePickerProps = PropsBase &\r\n Omit<PropsSingle, \"mode\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?: Date;\r\n required?: boolean;\r\n cancelText?: string;\r\n applyText?: string;\r\n onSelect?: (date: Date | undefined) => void;\r\n disabled?: boolean;\r\n };\r\n\r\nconst MobileDatePicker: React.FC<MobileDatePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n cancelText,\r\n applyText,\r\n onSelect,\r\n disabled,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const validatedSelectedDate = selected ? new Date(selected) : undefined;\r\n const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(validatedSelectedDate);\r\n\r\n const handleCancel = () => {\r\n setIsOpen(false);\r\n setSelectedDate(validatedSelectedDate);\r\n };\r\n\r\n const handleApply = () => {\r\n onSelect?.(selectedDate);\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={!validatedSelectedDate ? \"\" : undefined}\r\n onClick={() => setIsOpen(true)}\r\n aria-label={validatedSelectedDate ? `Selected date: ${format(validatedSelectedDate, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n disabled={disabled}\r\n >\r\n {validatedSelectedDate ? format(validatedSelectedDate, formatStr ?? \"eee, MMM dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n <CalendarIcon className=\"mtx-mr-2 mtx-h-5 mtx-w-5 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 className=\"mtx-p-4 mtx-border-b mtx-border-b-gray-200\">\r\n <DialogTitle asChild>\r\n <div className=\"mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-mt-3\">\r\n <h5 className=\"mtx-text-text-300\">{selectedDate ? selectedDate.getFullYear() : <pre> </pre>}</h5>\r\n <h6 className=\"\">{selectedDate ? format(selectedDate, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\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={validatedSelectedDate}\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=\"single\"\r\n selected={selectedDate}\r\n onSelect={setSelectedDate}\r\n className={cn(\"mtx-p-0\", calendarClassName)}\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}>\r\n {cancelText ?? \"Cancel\"}\r\n </Button>\r\n <Button variant=\"primary\" className=\"mtx-flex-1 mtx-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 { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","props","isOpen","setIsOpen","React","validatedSelectedDate","selectedDate","setSelectedDate","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@trsys-tech/matrix-library",
3
3
  "description": "MatrixUI Library",
4
4
  "private": false,
5
- "version": "1.0.0-canary.5",
5
+ "version": "1.0.0-canary.6",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",