@trsys-tech/matrix-library 1.0.1-canary-5 → 1.1.0

package/dist/mobiledatepicker.es.js

@@ -1,57 +1,62 @@
 import { jsxs as a, Fragment as N, jsx as e } from "react/jsx-runtime";
-import * as i from "react";
-import { VisuallyHidden as C } from "@radix-ui/react-visually-hidden";
-import { Calendar as k } from "@trsys-tech/matrix-icons";
-import { cn as c } from "./utils.es.js";
+import * as r from "react";
+import { VisuallyHidden as k } from "@radix-ui/react-visually-hidden";
+import { Calendar as S } from "@trsys-tech/matrix-icons";
+import { cn as p } from "./utils.es.js";
 import { Calendar as j } from "./calendar.es.js";
-import { Button as n } from "./button.es.js";
-import { Dialog as P, DialogContent as S, DialogHeader as F, DialogTitle as O, DialogDescription as A } from "./dialog.es.js";
-import { format as o } from "./format.es.js";
-const _ = ({
-  formatStr: r,
-  selected: x,
-  placeholder: p,
+import { toCalendarDateFromKey as F, toDateOnlyString as O } from "./datevalue.es.js";
+import { Button as s } from "./button.es.js";
+import { Dialog as P, DialogContent as A, DialogHeader as H, DialogTitle as K, DialogDescription as T } from "./dialog.es.js";
+import { format as d } from "./format.es.js";
+const z = ({
+  formatStr: l,
+  selected: o,
+  placeholder: f,
   className: h,
-  calendarClassName: f,
-  cancelText: u,
-  applyText: b,
-  onSelect: g,
-  disabled: y,
-  disabledDates: D,
-  ...v
+  calendarClassName: u,
+  cancelText: b,
+  applyText: g,
+  onSelect: y,
+  disabled: D,
+  disabledDates: v,
+  ...w
 }) => {
-  const [w, l] = i.useState(!1), t = x ? new Date(x) : void 0, [m, d] = i.useState(t), s = () => {
-    l(!1), d(t);
-  }, M = () => {
-    g?.(m), l(!1);
+  const [M, n] = r.useState(!1), i = o instanceof Date ? o.getTime() : o, t = r.useMemo(() => F(i), [i]), [m, x] = r.useState(t);
+  r.useEffect(() => {
+    x(t);
+  }, [t]);
+  const c = () => {
+    n(!1), x(t);
+  }, C = () => {
+    y?.(O(m)), n(!1);
   };
   return /* @__PURE__ */ a(N, { children: [
     /* @__PURE__ */ a(
-      n,
+      s,
       {
         variant: "text",
-        className: c(
+        className: p(
           "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",
           h
         ),
         "data-placeholder": t ? void 0 : "",
-        onClick: () => l(!0),
-        "aria-label": t ? `Selected date: ${o(t, r ?? "yyyy/MM/dd")}` : "Pick a date",
-        disabled: y,
+        onClick: () => n(!0),
+        "aria-label": t ? `Selected date: ${d(t, l ?? "yyyy/MM/dd")}` : "Pick a date",
+        disabled: D,
         type: "button",
         children: [
-          t ? o(t, r ?? "eee, MMM dd") : /* @__PURE__ */ e("span", { children: p ?? "Pick a date" }),
-          /* @__PURE__ */ e(k, { className: "mtx-mr-2 mtx-h-5 mtx-w-5 mtx-ms-auto" })
+          t ? d(t, l ?? "eee, MMM dd") : /* @__PURE__ */ e("span", { children: f ?? "Pick a date" }),
+          /* @__PURE__ */ e(S, { className: "mtx-mr-2 mtx-h-5 mtx-w-5 mtx-ms-auto" })
         ]
       }
     ),
-    /* @__PURE__ */ e(P, { open: w, onOpenChange: s, children: /* @__PURE__ */ a(S, { 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: [
-      /* @__PURE__ */ a(F, { className: "mtx-p-4 mtx-border-b mtx-border-b-gray-200", children: [
-        /* @__PURE__ */ e(O, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-mt-3", children: [
+    /* @__PURE__ */ e(P, { open: M, onOpenChange: c, children: /* @__PURE__ */ a(A, { 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: [
+      /* @__PURE__ */ a(H, { className: "mtx-p-4 mtx-border-b mtx-border-b-gray-200", children: [
+        /* @__PURE__ */ e(K, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-mt-3", children: [
           /* @__PURE__ */ e("h5", { className: "mtx-text-text-300", children: m ? m.getFullYear() : /* @__PURE__ */ e("pre", { children: " " }) }),
-          /* @__PURE__ */ e("h6", { className: "", children: m ? o(m, r ?? "eee, MMM dd") : /* @__PURE__ */ e("pre", { children: " " }) })
+          /* @__PURE__ */ e("h6", { className: "", children: m ? d(m, l ?? "eee, MMM dd") : /* @__PURE__ */ e("pre", { children: " " }) })
         ] }) }),
-        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(A, { children: "Date Picker" }) })
+        /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(T, { children: "Date Picker" }) })
       ] }),
       /* @__PURE__ */ a("div", { className: "mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4", children: [
         /* @__PURE__ */ e(
@@ -60,23 +65,23 @@ const _ = ({
             defaultMonth: t,
             startMonth: new Date(2e3, 0, 1),
             endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
-            ...v,
+            ...w,
             mode: "single",
             selected: m,
-            onSelect: d,
-            className: c("mtx-p-0", f),
-            disabled: D
+            onSelect: x,
+            className: p("mtx-p-0", u),
+            disabled: v
           }
         ),
         /* @__PURE__ */ a("div", { className: "mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full", children: [
-          /* @__PURE__ */ e(n, { variant: "text", className: "mtx-flex-1 mtx-h-10", onClick: s, type: "button", children: u ?? "Cancel" }),
-          /* @__PURE__ */ e(n, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick: M, type: "button", children: b ?? "Apply" })
+          /* @__PURE__ */ e(s, { variant: "text", className: "mtx-flex-1 mtx-h-10", onClick: c, type: "button", children: b ?? "Cancel" }),
+          /* @__PURE__ */ e(s, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick: C, type: "button", children: g ?? "Apply" })
         ] })
       ] })
     ] }) })
   ] });
 };
 export {
-  _ as MobileDatePicker
+  z as MobileDatePicker
 };
 //# sourceMappingURL=mobiledatepicker.es.js.map

package/dist/mobiledatepicker.es.js.map

@@ -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 { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Matcher, PropsBase, PropsSingle } from \"react-day-picker\";\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 = Omit<PropsBase, \"disabled\"> &\r\n  Omit<PropsSingle, \"mode\" | \"disabled\"> & {\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    disabledDates?: Matcher | Matcher[];\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  disabledDates,\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        type=\"button\"\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              disabled={disabledDates}\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 { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","disabledDates","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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"}
+{"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 { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Matcher, PropsBase, PropsSingle } from \"react-day-picker\";\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 { DateOnlyString, DateValue, toCalendarDateFromKey, toDateOnlyString } from \"./dateValue\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\n/**\r\n * Props for the mobile-only single-date picker.\r\n *\r\n * Inherits the single-date calendar props from react-day-picker, but accepts\r\n * Date | YYYY-MM-DD on input and emits YYYY-MM-DD on apply.\r\n */\r\ntype MobileDatePickerProps = Omit<PropsBase, \"disabled\"> &\r\n  Omit<PropsSingle, \"mode\" | \"disabled\" | \"selected\" | \"onSelect\"> & {\r\n    /** Display format used in the trigger and dialog header. */\r\n    formatStr?: string;\r\n    /** Placeholder shown when no date is selected. */\r\n    placeholder?: string;\r\n    /** Class name forwarded to the calendar content. */\r\n    calendarClassName?: string;\r\n    /** Current value as a native Date or a YYYY-MM-DD string. */\r\n    selected?: DateValue;\r\n    /** Prevents clearing the selection when true. */\r\n    required?: boolean;\r\n    /** Label for the cancel button. */\r\n    cancelText?: string;\r\n    /** Label for the apply button. */\r\n    applyText?: string;\r\n    /** Called with a YYYY-MM-DD string when the user confirms the selection. */\r\n    onSelect?: (date: DateOnlyString | undefined) => void;\r\n    /** Disables the trigger button. */\r\n    disabled?: boolean;\r\n    /** Dates disabled in the calendar. */\r\n    disabledDates?: Matcher | Matcher[];\r\n  };\r\n\r\n/**\r\n * Mobile-only single-date picker rendered in a full-screen dialog.\r\n * Use this component when you want mobile interaction regardless of screen size.\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  disabledDates,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const selectedValueKey = selected instanceof Date ? selected.getTime() : selected;\r\n  const validatedSelectedDate = React.useMemo(() => toCalendarDateFromKey(selectedValueKey), [selectedValueKey]);\r\n  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(validatedSelectedDate);\r\n\r\n  React.useEffect(() => {\r\n    setSelectedDate(validatedSelectedDate);\r\n  }, [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?.(toDateOnlyString(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        type=\"button\"\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              disabled={disabledDates}\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 { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","disabledDates","props","isOpen","setIsOpen","React","selectedValueKey","validatedSelectedDate","toCalendarDateFromKey","selectedDate","setSelectedDate","handleCancel","handleApply","toDateOnlyString","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}

package/dist/mobiledaterangepicker.es.js

@@ -1,105 +1,110 @@
-import { jsxs as r, Fragment as R, jsx as m } from "react/jsx-runtime";
-import * as c from "react";
-import { VisuallyHidden as O } from "@radix-ui/react-visually-hidden";
-import { Calendar as P } from "@trsys-tech/matrix-icons";
-import { cn as f } from "./utils.es.js";
-import { Calendar as $ } from "./calendar.es.js";
-import { Button as l } from "./button.es.js";
-import { Dialog as A, DialogContent as H, DialogHeader as B, DialogTitle as I, DialogDescription as V } from "./dialog.es.js";
-import { format as i } from "./format.es.js";
-const L = ({
-  formatStr: a,
-  selected: e,
-  placeholder: s,
-  className: p,
-  calendarClassName: h,
-  onDayClick: g,
-  cancelText: y,
-  applyText: u,
-  onSelect: b,
-  fromText: M,
-  toText: v,
-  disabled: N,
-  disabledDates: w,
-  ...C
+import { jsxs as o, Fragment as $, jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import { VisuallyHidden as A } from "@radix-ui/react-visually-hidden";
+import { Calendar as B } from "@trsys-tech/matrix-icons";
+import { cn as y } from "./utils.es.js";
+import { Calendar as H } from "./calendar.es.js";
+import { toCalendarDateRangeFromKeys as E, toDateOnlyRange as I } from "./datevalue.es.js";
+import { Button as c } from "./button.es.js";
+import { Dialog as V, DialogContent as Y, DialogHeader as _, DialogTitle as q, DialogDescription as z } from "./dialog.es.js";
+import { format as l } from "./format.es.js";
+const ee = ({
+  formatStr: n,
+  selected: x,
+  placeholder: f,
+  className: u,
+  calendarClassName: b,
+  onDayClick: M,
+  cancelText: v,
+  applyText: D,
+  onSelect: N,
+  fromText: T,
+  toText: C,
+  disabled: w,
+  disabledDates: k,
+  ...R
 }) => {
-  const [D, n] = c.useState(!1), [t, x] = c.useState(e), T = (o, j, F) => {
-    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 });
-  }, d = () => {
-    n(!1), x(e);
-  }, k = () => {
-    b?.(t), n(!1);
+  const [j, s] = i.useState(!1), p = x?.from instanceof Date ? x.from.getTime() : x?.from, g = x?.to instanceof Date ? x.to.getTime() : x?.to, m = i.useMemo(() => E(p, g), [p, g]), [e, a] = i.useState(m), d = !!(m?.from || m?.to);
+  i.useEffect(() => {
+    a(m);
+  }, [m]);
+  const F = (r, K, P) => {
+    M?.(r, K, P), !e || !e.from ? a({ from: r, to: void 0 }) : r < e.from ? e.to ? a({ from: r, to: e.to }) : a({ from: r, to: e.from }) : e?.from?.getTime() === r?.getTime() && (e?.from?.getTime() === e?.to?.getTime() || !e.to) ? a(void 0) : e?.from?.getTime() !== e?.to?.getTime() && (e.from?.getTime() === r?.getTime() || e?.to?.getTime() === r?.getTime()) ? a({ from: r, to: r }) : a({ ...e, to: r });
+  }, h = () => {
+    s(!1), a(m);
+  }, O = () => {
+    N?.(I(e)), s(!1);
   };
-  return /* @__PURE__ */ r(R, { children: [
-    /* @__PURE__ */ r(
-      l,
+  return /* @__PURE__ */ o($, { children: [
+    /* @__PURE__ */ o(
+      c,
       {
         variant: "text",
-        className: f(
+        className: y(
           "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",
-          p
+          u
         ),
-        "data-placeholder": e ? void 0 : "",
-        onClick: () => n(!0),
-        "aria-label": e ? `Selected date: ${e?.from ? i(e.from, a ?? "yyyy/MM/dd") : ""} - ${e?.to ? i(e.to, a ?? "yyyy/MM/dd") : ""}` : s,
-        disabled: N,
+        "data-placeholder": d ? void 0 : "",
+        onClick: () => s(!0),
+        "aria-label": d ? `Selected date: ${m?.from ? l(m.from, n ?? "yyyy/MM/dd") : ""} - ${m?.to ? l(m.to, n ?? "yyyy/MM/dd") : ""}` : f,
+        disabled: w,
         type: "button",
         children: [
-          e ? /* @__PURE__ */ r("div", { className: "mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-justify-items-start", children: [
-            /* @__PURE__ */ r("span", { children: [
-              M ?? "From",
+          d ? /* @__PURE__ */ o("div", { className: "mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-justify-items-start", children: [
+            /* @__PURE__ */ o("span", { children: [
+              T ?? "From",
               ": ",
-              e?.from ? i(e.from, a ?? "yyyy/MM/dd") : "-"
+              m?.from ? l(m.from, n ?? "yyyy/MM/dd") : "-"
             ] }),
             " ",
-            /* @__PURE__ */ r("span", { children: [
-              v ?? "To",
+            /* @__PURE__ */ o("span", { children: [
+              C ?? "To",
               ": ",
-              e?.to ? i(e.to, a ?? "yyyy/MM/dd") : "-"
+              m?.to ? l(m.to, n ?? "yyyy/MM/dd") : "-"
             ] })
-          ] }) : /* @__PURE__ */ m("span", { children: s ?? "Pick a Range" }),
-          /* @__PURE__ */ m(P, { className: "mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto" })
+          ] }) : /* @__PURE__ */ t("span", { children: f ?? "Pick a Range" }),
+          /* @__PURE__ */ t(B, { className: "mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto" })
         ]
       }
     ),
-    /* @__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: [
-      /* @__PURE__ */ r(B, { children: [
-        /* @__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: [
-          /* @__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: [
-            /* @__PURE__ */ m("h5", { className: "mtx-text-text-300 mtx-font-medium mtx-text-xs", children: "From" }),
-            /* @__PURE__ */ m("h6", { className: "", children: t?.from ? i(t.from, a ?? "eee, MMM dd") : /* @__PURE__ */ m("pre", { children: " " }) })
+    /* @__PURE__ */ t(V, { open: j, onOpenChange: h, children: /* @__PURE__ */ o(Y, { 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: [
+      /* @__PURE__ */ o(_, { children: [
+        /* @__PURE__ */ t(q, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "mtx-grid mtx-grid-cols-2 mtx-border-b mtx-border-b-gray-200 mtx-mt-3", children: [
+          /* @__PURE__ */ o("div", { className: "mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-border-e mtx-border-e-gray-200 mtx-p-4", children: [
+            /* @__PURE__ */ t("h5", { className: "mtx-text-text-300 mtx-font-medium mtx-text-xs", children: "From" }),
+            /* @__PURE__ */ t("h6", { className: "", children: e?.from ? l(e.from, n ?? "eee, MMM dd") : /* @__PURE__ */ t("pre", { children: " " }) })
           ] }),
-          /* @__PURE__ */ r("div", { className: "mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-p-4 mtx-flex mtx-flex-col mtx-justify-center", children: [
-            /* @__PURE__ */ m("h5", { className: "mtx-text-text-300 mtx-font-medium mtx-text-xs", children: "To" }),
-            /* @__PURE__ */ m("h6", { className: "", children: t?.to ? i(t.to, a ?? "eee, MMM dd") : /* @__PURE__ */ m("pre", { children: " " }) })
+          /* @__PURE__ */ o("div", { className: "mtx-text-sm mtx-font-bold mtx-space-y-1 mtx-p-4 mtx-flex mtx-flex-col mtx-justify-center", children: [
+            /* @__PURE__ */ t("h5", { className: "mtx-text-text-300 mtx-font-medium mtx-text-xs", children: "To" }),
+            /* @__PURE__ */ t("h6", { className: "", children: e?.to ? l(e.to, n ?? "eee, MMM dd") : /* @__PURE__ */ t("pre", { children: " " }) })
           ] })
         ] }) }),
-        /* @__PURE__ */ m(O, { children: /* @__PURE__ */ m(V, { children: "Date Picker" }) })
+        /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(z, { children: "Date Picker" }) })
       ] }),
-      /* @__PURE__ */ r("div", { className: "mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4", children: [
-        /* @__PURE__ */ m(
-          $,
+      /* @__PURE__ */ o("div", { className: "mtx-flex-1 mtx-flex mtx-flex-col mtx-items-center mtx-p-4", children: [
+        /* @__PURE__ */ t(
+          H,
           {
             defaultMonth: e?.from,
             startMonth: new Date(2e3, 0, 1),
             endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
-            ...C,
+            ...R,
             mode: "range",
             selected: e,
-            onDayClick: T,
-            className: f("mtx-p-0", h),
-            disabled: w
+            onDayClick: F,
+            className: y("mtx-p-0", b),
+            disabled: k
           }
         ),
-        /* @__PURE__ */ r("div", { className: "mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full", children: [
-          /* @__PURE__ */ m(l, { variant: "text", className: "mtx-flex-1 mtx-h-10", onClick: d, type: "button", children: y ?? "Cancel" }),
-          /* @__PURE__ */ m(l, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick: k, type: "button", children: u ?? "Apply" })
+        /* @__PURE__ */ o("div", { className: "mtx-flex mtx-justify-center mtx-items-center mtx-gap-4 mtx-mt-auto mtx-w-full", children: [
+          /* @__PURE__ */ t(c, { variant: "text", className: "mtx-flex-1 mtx-h-10", onClick: h, type: "button", children: v ?? "Cancel" }),
+          /* @__PURE__ */ t(c, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick: O, type: "button", children: D ?? "Apply" })
         ] })
       ] })
     ] }) })
   ] });
 };
 export {
-  L as MobileDateRangePicker
+  ee as MobileDateRangePicker
 };
 //# sourceMappingURL=mobiledaterangepicker.es.js.map

package/dist/mobiledaterangepicker.es.js.map

@@ -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, 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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"}
+{"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 { DateOnlyRange, DateRangeValue, toCalendarDateRangeFromKeys, toDateOnlyRange } from \"./dateValue\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\n/**\r\n * Props for the mobile-only date-range picker.\r\n *\r\n * Inherits the range calendar props from react-day-picker, but accepts Date\r\n * objects or YYYY-MM-DD strings and emits { from, to } values in YYYY-MM-DD format.\r\n */\r\ntype MobileDateRangePickerProps = Omit<PropsBase, \"disabled\"> &\r\n  Omit<PropsRange, \"mode\" | \"disabled\" | \"selected\" | \"onSelect\"> & {\r\n    /** Display format used in the trigger and dialog header. */\r\n    formatStr?: string;\r\n    /** Placeholder shown when no range is selected. */\r\n    placeholder?: string;\r\n    /** Class name forwarded to the calendar content. */\r\n    calendarClassName?: string;\r\n    /** Current value as Date objects or YYYY-MM-DD strings. */\r\n    selected?: DateRangeValue;\r\n    /** Prevents clearing the selection when true. */\r\n    required?: boolean;\r\n    /** Label for the cancel button. */\r\n    cancelText?: string;\r\n    /** Label for the apply button. */\r\n    applyText?: string;\r\n    /** Called with YYYY-MM-DD range values when the user confirms the selection. */\r\n    onSelect?: (date: DateOnlyRange | undefined) => void;\r\n    /** Label shown before the start date in the trigger. */\r\n    fromText?: string;\r\n    /** Label shown before the end date in the trigger. */\r\n    toText?: string;\r\n    /** Disables the trigger button. */\r\n    disabled?: boolean;\r\n    /** Dates disabled in the calendar. */\r\n    disabledDates?: Matcher | Matcher[];\r\n  };\r\n\r\n/**\r\n * Mobile-only date-range picker rendered in a full-screen dialog.\r\n * Use this component when you want mobile interaction regardless of screen size.\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 selectedFromKey = selected?.from instanceof Date ? selected.from.getTime() : selected?.from;\r\n  const selectedToKey = selected?.to instanceof Date ? selected.to.getTime() : selected?.to;\r\n  const selectedRange = React.useMemo(() => toCalendarDateRangeFromKeys(selectedFromKey, selectedToKey), [selectedFromKey, selectedToKey]);\r\n  const [range, setRange] = React.useState<DateRange | undefined>(selectedRange);\r\n  const hasSelectedRange = Boolean(selectedRange?.from || selectedRange?.to);\r\n\r\n  React.useEffect(() => {\r\n    setRange(selectedRange);\r\n  }, [selectedRange]);\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(selectedRange);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(toDateOnlyRange(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={!hasSelectedRange ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={\r\n          hasSelectedRange\r\n            ? `Selected date: ${selectedRange?.from ? format(selectedRange.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selectedRange?.to ? format(selectedRange.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n            : placeholder\r\n        }\r\n        disabled={disabled}\r\n        type=\"button\"\r\n      >\r\n        {hasSelectedRange ? (\r\n          <div className=\"mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-justify-items-start\">\r\n            <span>\r\n              {fromText ?? \"From\"}: {selectedRange?.from ? format(selectedRange.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>{\" \"}\r\n            <span>\r\n              {toText ?? \"To\"}: {selectedRange?.to ? format(selectedRange.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={range?.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={range}\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","selectedFromKey","selectedToKey","selectedRange","toCalendarDateRangeFromKeys","range","setRange","hasSelectedRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","toDateOnlyRange","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}

package/dist/mobiletimepicker.es.js.map

@@ -1 +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\nconst formatTimeLabel = (time: Time, is24HourMode: boolean) => {\r\n  const minute = time.minute.toString().padStart(2, \"0\");\r\n\r\n  if (is24HourMode) {\r\n    const hour = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n    return `${hour.toString().padStart(2, \"0\")} : ${minute}`;\r\n  }\r\n\r\n  const hourFromAmpm = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n  const hour = hourFromAmpm % 12 || 12;\r\n  const ampm = time.ampm ?? (hourFromAmpm >= 12 ? \"PM\" : \"AM\");\r\n\r\n  return `${hour.toString().padStart(2, \"0\")} : ${minute} ${ampm}`;\r\n};\r\n\r\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  is24HourMode?: boolean;\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  is24HourMode = false,\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          \"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={!time ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={time ? `Selected time: ${formatTimeLabel(time, is24HourMode)}` : placeholder}\r\n        {...restProps}\r\n        type=\"button\"\r\n      >\r\n        {time ? formatTimeLabel(time, is24HourMode) : \"-- : --\"}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"mtx-p-0\">\r\n          <VisuallyHidden>\r\n            <SwipableDrawerTitle className=\"mtx-text-primary mtx-text-lg mtx-font-bold mtx-text-start\"> </SwipableDrawerTitle>\r\n            <SwipableDrawerDescription> </SwipableDrawerDescription>\r\n          </VisuallyHidden>\r\n        </SwipableDrawerHeader>\r\n        <TimePickerContent isOpen={isOpen} is24HourMode={is24HourMode} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </SwipableDrawerContent>\r\n    </SwipableDrawer>\r\n  );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["formatTimeLabel","time","is24HourMode","minute","hourFromAmpm","hour","ampm","MobileTimePicker","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AAgBA,MAAMA,IAAkB,CAACC,GAAYC,MAA0B;AAC7D,QAAMC,IAASF,EAAK,OAAO,WAAW,SAAS,GAAG,GAAG;AAErD,MAAIC;AAEF,WAAO,IADMD,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK,MAClE,WAAW,SAAS,GAAG,GAAG,CAAC,MAAME,CAAM;AAGxD,QAAMC,IAAeH,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK,MACnFI,IAAOD,IAAe,MAAM,IAC5BE,IAAOL,EAAK,SAASG,KAAgB,KAAK,OAAO;AAEvD,SAAO,GAAGC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,MAAMF,CAAM,IAAIG,CAAI;AAChE,GAaMC,IAAoD,CAAC;AAAA,EACzD,MAAAN;AAAA,EACA,cAAAO;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAR,IAAe;AAAA,EACf,aAAAS,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,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,QAAA;AAAA,QAEF,oBAAmBR,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMa,EAAU,EAAI;AAAA,QAC7B,cAAYb,IAAO,kBAAkBD,EAAgBC,GAAMC,CAAY,CAAC,KAAKS;AAAA,QAC5E,GAAGC;AAAA,QACJ,MAAK;AAAA,QAEJ,UAAAX,IAAOD,EAAgBC,GAAMC,CAAY,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAE/CmB,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAqB,WAAU,WAC9B,UAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAoB,WAAU,6DAA4D,UAAA,KAAC;AAAA,QAC5F,gBAAAN,EAACO,KAA0B,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CAC9B,EAAA,CACF;AAAA,wBACCC,GAAA,EAAkB,QAAAb,GAAgB,cAAAX,GAA4B,cAAAM,GAA4B,MAAAP,GAAY,YAAAS,EAAA,CAAwB;AAAA,IAAA,EAAA,CACjI;AAAA,EAAA,GACF;AAEJ;"}
+{"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\nconst formatTimeLabel = (time: Time, is24HourMode: boolean) => {\r\n  const minute = time.minute.toString().padStart(2, \"0\");\r\n\r\n  if (is24HourMode) {\r\n    const hour = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n    return `${hour.toString().padStart(2, \"0\")} : ${minute}`;\r\n  }\r\n\r\n  const hourFromAmpm = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n  const hour = hourFromAmpm % 12 || 12;\r\n  const ampm = time.ampm ?? (hourFromAmpm >= 12 ? \"PM\" : \"AM\");\r\n\r\n  return `${hour.toString().padStart(2, \"0\")} : ${minute} ${ampm}`;\r\n};\r\n\r\n/**\r\n * Props for the mobile-only time picker.\r\n *\r\n * In 12-hour mode, the time value should include ampm.\r\n * In 24-hour mode, the time value should omit ampm and use hour values from 0-23.\r\n */\r\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  /** Current time value. */\r\n  time: Time | undefined;\r\n  /** Called whenever the selected time changes. */\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  /** Enables 24-hour mode and hides the AM/PM column when true. */\r\n  is24HourMode?: boolean;\r\n  /** Accessible label and trigger fallback when no time is selected. */\r\n  placeholder?: string;\r\n  /** Disables the trigger button. */\r\n  disabled?: boolean;\r\n  /** Props forwarded to the drawer content. */\r\n  slotsProps?: {\r\n    /** Props forwarded to the time picker content container. */\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\n/**\r\n * Mobile-only time picker rendered in a swipeable drawer.\r\n * Use this component when you want the mobile interaction regardless of screen size.\r\n */\r\nconst MobileTimePicker: React.FC<MobileTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  is24HourMode = false,\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          \"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={!time ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={time ? `Selected time: ${formatTimeLabel(time, is24HourMode)}` : placeholder}\r\n        {...restProps}\r\n        type=\"button\"\r\n      >\r\n        {time ? formatTimeLabel(time, is24HourMode) : \"-- : --\"}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"mtx-p-0\">\r\n          <VisuallyHidden>\r\n            <SwipableDrawerTitle className=\"mtx-text-primary mtx-text-lg mtx-font-bold mtx-text-start\"> </SwipableDrawerTitle>\r\n            <SwipableDrawerDescription> </SwipableDrawerDescription>\r\n          </VisuallyHidden>\r\n        </SwipableDrawerHeader>\r\n        <TimePickerContent isOpen={isOpen} is24HourMode={is24HourMode} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </SwipableDrawerContent>\r\n    </SwipableDrawer>\r\n  );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["formatTimeLabel","time","is24HourMode","minute","hourFromAmpm","hour","ampm","MobileTimePicker","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AAgBA,MAAMA,IAAkB,CAACC,GAAYC,MAA0B;AAC7D,QAAMC,IAASF,EAAK,OAAO,WAAW,SAAS,GAAG,GAAG;AAErD,MAAIC;AAEF,WAAO,IADMD,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK,MAClE,WAAW,SAAS,GAAG,GAAG,CAAC,MAAME,CAAM;AAGxD,QAAMC,IAAeH,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK,MACnFI,IAAOD,IAAe,MAAM,IAC5BE,IAAOL,EAAK,SAASG,KAAgB,KAAK,OAAO;AAEvD,SAAO,GAAGC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,MAAMF,CAAM,IAAIG,CAAI;AAChE,GA8BMC,IAAoD,CAAC;AAAA,EACzD,MAAAN;AAAA,EACA,cAAAO;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAR,IAAe;AAAA,EACf,aAAAS,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,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,QAAA;AAAA,QAEF,oBAAmBR,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMa,EAAU,EAAI;AAAA,QAC7B,cAAYb,IAAO,kBAAkBD,EAAgBC,GAAMC,CAAY,CAAC,KAAKS;AAAA,QAC5E,GAAGC;AAAA,QACJ,MAAK;AAAA,QAEJ,UAAAX,IAAOD,EAAgBC,GAAMC,CAAY,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAE/CmB,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAqB,WAAU,WAC9B,UAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAoB,WAAU,6DAA4D,UAAA,KAAC;AAAA,QAC5F,gBAAAN,EAACO,KAA0B,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CAC9B,EAAA,CACF;AAAA,wBACCC,GAAA,EAAkB,QAAAb,GAAgB,cAAAX,GAA4B,cAAAM,GAA4B,MAAAP,GAAY,YAAAS,EAAA,CAAwB;AAAA,IAAA,EAAA,CACjI;AAAA,EAAA,GACF;AAEJ;"}