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

package/dist/desktopdaterangepicker.es.js

@@ -2,8 +2,8 @@ import { jsxs as r, jsx as m } from "react/jsx-runtime";
 import * as g from "react";
 import { Calendar as h } from "@trsys-tech/matrix-icons";
 import { cn as n } from "./utils.es.js";
-import { Calendar as c } from "./calendar.es.js";
-import { Button as b } from "./button.es.js";
+import { Calendar as b } from "./calendar.es.js";
+import { Button as c } from "./button.es.js";
 import { Popover as w, PopoverTrigger as M, PopoverContent as v } from "./popover.es.js";
 import { format as a } from "./format.es.js";
 const R = ({
@@ -27,7 +27,7 @@ const R = ({
       },
       children: [
         /* @__PURE__ */ m(M, { asChild: !0, children: /* @__PURE__ */ r(
-          b,
+          c,
           {
             variant: "text",
             className: n(
@@ -37,6 +37,7 @@ const R = ({
             "data-placeholder": t ? void 0 : "",
             "aria-label": t ? `Selected date: ${t?.from ? a(t.from, o ?? "yyyy/MM/dd") : ""} - ${t?.to ? a(t.to, o ?? "yyyy/MM/dd") : ""}` : e,
             disabled: p,
+            type: "button",
             children: [
               t ? /* @__PURE__ */ r("div", { className: "mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-justify-items-start", children: [
                 /* @__PURE__ */ r("span", { children: [
@@ -56,7 +57,7 @@ const R = ({
           }
         ) }),
         /* @__PURE__ */ m(v, { className: "mtx-w-auto mtx-p-0", align: "start", children: /* @__PURE__ */ m(
-          c,
+          b,
           {
             defaultMonth: t?.from,
             startMonth: new Date(2e3, 0, 1),

package/dist/desktopdaterangepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } 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 { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = 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    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover\r\n      open={isOpen}\r\n      onOpenChange={open => {\r\n        setIsOpen(open);\r\n      }}\r\n    >\r\n      <PopoverTrigger asChild>\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          aria-label={\r\n            selected\r\n              ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n              : placeholder\r\n          }\r\n          disabled={disabled}\r\n        >\r\n          {selected ? (\r\n            <div className=\"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        {/* <div className=\"flex gap-2\">\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"From\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"To\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n        </div> */}\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"mtx-w-auto mtx-p-0\" align=\"start\">\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          className={cn(calendarClassName, \"md:mtx-max-w-full md:mtx-w-[36rem]\")}\r\n          numberOfMonths={2}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","disabled","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAEhD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAAK,MAAQ;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAWC;AAAA,cACT;AAAA,cACAf;AAAA,YAAA;AAAA,YAEF,oBAAmBF,IAAgB,SAAL;AAAA,YAC9B,cACEA,IACI,kBAAkBA,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAEN,UAAAK;AAAA,YAEC,UAAA;AAAA,cAAAN,IACC,gBAAAW,EAAC,OAAA,EAAI,WAAU,+DACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EACE,UAAA;AAAA,kBAAAP,KAAY;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QAAA,EACE,UAAA;AAAA,kBAAAM,KAAU;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EAAA,CACrF;AAAA,cAAA,EAAA,CACF,IAEA,gBAAAe,EAAC,QAAA,EAAM,UAAAb,KAAe,gBAAe;AAAA,cAEvC,gBAAAa,EAACK,GAAA,EAAa,WAAU,uCAAA,CAAuC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GA0BnE;AAAA,QACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,sBAAqB,OAAM,SACnD,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,cAAcrB,GAAU;AAAA,YACxB,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,YAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,YACtD,GAAGO;AAAA,YACJ,MAAK;AAAA,YACL,UAAAP;AAAA,YACA,WAAWiB,EAAGd,GAAmB,oCAAoC;AAAA,YACrE,gBAAgB;AAAA,UAAA;AAAA,QAAA,EAClB,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } 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 { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = 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    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover\r\n      open={isOpen}\r\n      onOpenChange={open => {\r\n        setIsOpen(open);\r\n      }}\r\n    >\r\n      <PopoverTrigger asChild>\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          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      </PopoverTrigger>\r\n      <PopoverContent className=\"mtx-w-auto mtx-p-0\" align=\"start\">\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          className={cn(calendarClassName, \"md:mtx-max-w-full md:mtx-w-[36rem]\")}\r\n          numberOfMonths={2}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","disabled","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAEhD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAAK,MAAQ;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAWC;AAAA,cACT;AAAA,cACAf;AAAA,YAAA;AAAA,YAEF,oBAAmBF,IAAgB,SAAL;AAAA,YAC9B,cACEA,IACI,kBAAkBA,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAEN,UAAAK;AAAA,YACA,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAN,IACC,gBAAAW,EAAC,OAAA,EAAI,WAAU,+DACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EACE,UAAA;AAAA,kBAAAP,KAAY;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QAAA,EACE,UAAA;AAAA,kBAAAM,KAAU;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EAAA,CACrF;AAAA,cAAA,EAAA,CACF,IAEA,gBAAAe,EAAC,QAAA,EAAM,UAAAb,KAAe,gBAAe;AAAA,cAEvC,gBAAAa,EAACK,GAAA,EAAa,WAAU,uCAAA,CAAuC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEnE;AAAA,QACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,sBAAqB,OAAM,SACnD,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,cAAcrB,GAAU;AAAA,YACxB,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,YAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,YACtD,GAAGO;AAAA,YACJ,MAAK;AAAA,YACL,UAAAP;AAAA,YACA,WAAWiB,EAAGd,GAAmB,oCAAoC;AAAA,YACrE,gBAAgB;AAAA,UAAA;AAAA,QAAA,EAClB,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/desktoptimepicker.es.js

@@ -1,5 +1,5 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useState as p } from "react";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useState as s } from "react";
 import { cn as m } from "./utils.es.js";
 import { Button as c } from "./button.es.js";
 import { TimePickerContent as l } from "./timepickercontent.es.js";
@@ -12,8 +12,8 @@ const $ = ({
   placeholder: x = "Pick a Time",
   ...d
 }) => {
-  const [o, i] = p(!1);
-  return /* @__PURE__ */ s(u, { open: o, onOpenChange: i, children: [
+  const [o, i] = s(!1);
+  return /* @__PURE__ */ p(u, { open: o, onOpenChange: i, children: [
     /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
       c,
       {
@@ -25,6 +25,7 @@ const $ = ({
         "data-placeholder": t ? void 0 : "",
         "aria-label": t?.hour ? `Selected time: ${t.hour}:${t.minute} ${t.ampm}` : x,
         ...d,
+        type: "button",
         children: `${t?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${t?.minute?.toString()?.padStart(2, "0") ?? "--"} ${t?.ampm ?? "--"}`
       }
     ) }),

package/dist/desktoptimepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a Time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\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          aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n          {...restProps}\r\n        >\r\n          {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"mtx-w-auto mtx-p-0\", slotsProps?.content?.className)}>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["DesktopTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AAmBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,GAAA,EAAQ,MAAMJ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAZ;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,cAAYA,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA,GAEtI;AAAA,IACA,gBAAAW,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,sBAAsBX,GAAY,SAAS,SAAS,GACjH,UAAA,gBAAAQ,EAACK,GAAA,EAAkB,QAAAV,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,GAAwB,EAAA,CACrG;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a Time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\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          aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n          {...restProps}\r\n          type=\"button\"\r\n        >\r\n          {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"mtx-w-auto mtx-p-0\", slotsProps?.content?.className)}>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["DesktopTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AAmBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,GAAA,EAAQ,MAAMJ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAZ;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,cAAYA,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QACJ,MAAK;AAAA,QAEJ,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA,GAEtI;AAAA,IACA,gBAAAW,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,sBAAsBX,GAAY,SAAS,SAAS,GACjH,UAAA,gBAAAQ,EAACK,GAAA,EAAkB,QAAAV,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,GAAwB,EAAA,CACrG;AAAA,EAAA,GACF;AAEJ;"}

package/dist/formdatepicker.es.js

@@ -1,29 +1,38 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { FormField as P, FormItem as f, FormLabel as F, FormControl as g, FormMessage as h } from "./form.es.js";
-import { DatePicker as b } from "./datepicker.es.js";
-const D = (l) => {
-  const { name: m, control: a, defaultValue: n, disabled: o, readOnly: d, rules: i, shouldUnregister: c, label: p, slotProps: r, required: u, ...x } = l;
-  return /* @__PURE__ */ e(
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { FormField as P, FormItem as F, FormLabel as g, FormControl as h, FormMessage as b } from "./form.es.js";
+import { DatePicker as k } from "./datepicker.es.js";
+const I = (m) => {
+  const { name: l, control: a, defaultValue: n, disabled: o, readOnly: d, rules: i, shouldUnregister: c, label: p, slotProps: e, required: f, formatStr: u, ...x } = m;
+  return /* @__PURE__ */ r(
     P,
     {
       control: a,
-      name: m,
+      name: l,
       defaultValue: n,
       disabled: o,
       rules: i,
       shouldUnregister: c,
-      render: ({ field: t }) => /* @__PURE__ */ s(f, { ...x, children: [
-        /* @__PURE__ */ s(F, { ...r?.formLabelProps ?? {}, children: [
+      render: ({ field: t }) => /* @__PURE__ */ s(F, { ...x, children: [
+        /* @__PURE__ */ s(g, { ...e?.formLabelProps ?? {}, children: [
           p,
-          u && /* @__PURE__ */ e("span", { className: "mtx-text-danger mtx-text-sm mtx-leading-4", children: "*" })
+          f && /* @__PURE__ */ r("span", { className: "mtx-text-danger mtx-text-sm mtx-leading-4", children: "*" })
         ] }),
-        /* @__PURE__ */ e(g, { ...r?.formControlProps ?? {}, children: /* @__PURE__ */ e(b, { ...r?.datepickerProps ?? {}, selected: t.value, onSelect: t.onChange, disabled: o || d }) }),
-        /* @__PURE__ */ e(h, { ...r?.formMessageProps ?? {} })
+        /* @__PURE__ */ r(h, { ...e?.formControlProps ?? {}, children: /* @__PURE__ */ r(
+          k,
+          {
+            formatStr: u,
+            ...e?.datepickerProps ?? {},
+            selected: t.value,
+            onSelect: t.onChange,
+            disabled: o || d
+          }
+        ) }),
+        /* @__PURE__ */ r(b, { ...e?.formMessageProps ?? {} })
       ] })
     }
   );
 };
 export {
-  D as FormDatePicker
+  I as FormDatePicker
 };
 //# sourceMappingURL=formdatepicker.es.js.map

package/dist/formdatepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"formdatepicker.es.js","sources":["../src/components/form-date-picker/FormDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\nimport { DatePicker, type DatePickerProps } from \"../date-picker/DatePicker\";\r\n\r\ntype FormDatePickerProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    control: Control<TFieldValues>;\r\n    required?: boolean;\r\n    disabled?: boolean;\r\n    readOnly?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n      datepickerProps?: DatePickerProps;\r\n    };\r\n  };\r\n\r\nconst FormDatePicker = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormDatePickerProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, ...formItemProps } = props;\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps}>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n              {label}\r\n              {required && <span className=\"mtx-text-danger mtx-text-sm mtx-leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <DatePicker {...(slotProps?.datepickerProps ?? {})} selected={field.value} onSelect={field.onChange} disabled={disabled || readOnly} />\r\n            </FormControl>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormDatePicker, type FormDatePickerProps };\r\n"],"names":["FormDatePicker","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","DatePicker","FormMessage"],"mappings":";;;AAyBA,MAAMA,IAAiB,CAA0EC,MAAoD;AACnJ,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAkBX;AAEnI,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAX;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAO,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIR,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAE,EAAC,QAAA,EAAK,WAAU,6CAA4C,UAAA,IAAA,CAAC;AAAA,QAAA,GAC5E;AAAA,QACA,gBAAAA,EAACM,KAAa,GAAIT,GAAW,oBAAoB,IAC/C,UAAA,gBAAAG,EAACO,GAAA,EAAY,GAAIV,GAAW,mBAAmB,CAAA,GAAK,UAAUK,EAAM,OAAO,UAAUA,EAAM,UAAU,UAAUV,KAAYC,EAAA,CAAU,EAAA,CACvI;AAAA,0BACCe,GAAA,EAAa,GAAIX,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"formdatepicker.es.js","sources":["../src/components/form-date-picker/FormDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\nimport { DatePicker, type DatePickerProps } from \"../date-picker/DatePicker\";\r\n\r\ntype FormDatePickerProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    control: Control<TFieldValues>;\r\n    required?: boolean;\r\n    disabled?: boolean;\r\n    readOnly?: boolean;\r\n    formatStr?: string;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n      datepickerProps?: DatePickerProps;\r\n    };\r\n  };\r\n\r\nconst FormDatePicker = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormDatePickerProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, formatStr, ...formItemProps } = props;\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps}>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n              {label}\r\n              {required && <span className=\"mtx-text-danger mtx-text-sm mtx-leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <DatePicker\r\n                formatStr={formatStr}\r\n                {...(slotProps?.datepickerProps ?? {})}\r\n                selected={field.value}\r\n                onSelect={field.onChange}\r\n                disabled={disabled || readOnly}\r\n              />\r\n            </FormControl>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormDatePicker, type FormDatePickerProps };\r\n"],"names":["FormDatePicker","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","formatStr","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","DatePicker","FormMessage"],"mappings":";;;AA0BA,MAAMA,IAAiB,CAA0EC,MAAoD;AACnJ,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,WAAAC,GAAW,GAAGC,MAAkBZ;AAE9I,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAZ;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAQ,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIT,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAG,EAAC,QAAA,EAAK,WAAU,6CAA4C,UAAA,IAAA,CAAC;AAAA,QAAA,GAC5E;AAAA,0BACCM,GAAA,EAAa,GAAIV,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAI;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,WAAAT;AAAA,YACC,GAAIF,GAAW,mBAAmB,CAAA;AAAA,YACnC,UAAUM,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,YAChB,UAAUX,KAAYC;AAAA,UAAA;AAAA,QAAA,GAE1B;AAAA,0BACCgB,GAAA,EAAa,GAAIZ,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/mobiledatepicker.es.js

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

@@ -42,6 +42,7 @@ const K = ({
         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,
+        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: [
@@ -89,8 +90,8 @@ const 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, children: y ?? "Cancel" }),
-          /* @__PURE__ */ m(l, { variant: "primary", className: "mtx-flex-1 mtx-h-10", onClick: T, children: u ?? "Apply" })
+          /* @__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: T, type: "button", children: u ?? "Apply" })
         ] })
       ] })
     ] }) })

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 } 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      >\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}>\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 { 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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"}
+{"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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"}

package/dist/mobiletimepicker.es.js

@@ -7,26 +7,27 @@ import { TimePickerContent as b } from "./timepickercontent.es.js";
 import { SwipableDrawer as u, SwipableDrawerContent as f, SwipableDrawerHeader as h, SwipableDrawerTitle as g, SwipableDrawerDescription as w } from "./swipabledrawer.es.js";
 const j = ({
   time: t,
-  onTimeChange: o,
-  className: i,
-  slotsProps: n,
+  onTimeChange: a,
+  className: n,
+  slotsProps: i,
   placeholder: x = "Pick a time",
   ...l
 }) => {
-  const [m, a] = d(!1);
-  return /* @__PURE__ */ r(u, { open: m, onOpenChange: a, children: [
+  const [m, o] = d(!1);
+  return /* @__PURE__ */ r(u, { open: m, onOpenChange: o, children: [
     /* @__PURE__ */ e(
       c,
       {
         variant: "text",
         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",
-          i
+          n
         ),
         "data-placeholder": t ? void 0 : "",
-        onClick: () => a(!0),
+        onClick: () => o(!0),
         "aria-label": t?.hour ? `Selected time: ${t.hour}:${t.minute} ${t.ampm}` : x,
         ...l,
+        type: "button",
         children: `${t?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${t?.minute?.toString()?.padStart(2, "0") ?? "--"} ${t?.ampm ?? "--"}`
       }
     ),
@@ -35,7 +36,7 @@ const j = ({
         /* @__PURE__ */ e(g, { className: "mtx-text-primary mtx-text-lg mtx-font-bold mtx-text-start", children: " " }),
         /* @__PURE__ */ e(w, { children: " " })
       ] }) }),
-      /* @__PURE__ */ e(b, { isOpen: m, onTimeChange: o, time: t, slotsProps: n })
+      /* @__PURE__ */ e(b, { isOpen: m, onTimeChange: a, time: t, slotsProps: i })
     ] })
   ] });
 };

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\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst MobileTimePicker: React.FC<MobileTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <SwipableDrawer open={isOpen} onOpenChange={setIsOpen}>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"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?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n        {...restProps}\r\n      >\r\n        {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"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} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </SwipableDrawerContent>\r\n    </SwipableDrawer>\r\n  );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["MobileTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AA0BA,MAAMA,IAAoD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,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,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMO,EAAU,EAAI;AAAA,QAC7B,cAAYP,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEnIc,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,MACA,gBAAAP,EAACQ,GAAA,EAAkB,QAAAb,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,EAAA,CAAwB;AAAA,IAAA,EAAA,CACrG;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\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst MobileTimePicker: React.FC<MobileTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <SwipableDrawer open={isOpen} onOpenChange={setIsOpen}>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"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?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n        {...restProps}\r\n        type=\"button\"\r\n      >\r\n        {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"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} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </SwipableDrawerContent>\r\n    </SwipableDrawer>\r\n  );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["MobileTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AA0BA,MAAMA,IAAoD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,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,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMO,EAAU,EAAI;AAAA,QAC7B,cAAYP,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QACJ,MAAK;AAAA,QAEJ,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEnIc,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,MACA,gBAAAP,EAACQ,GAAA,EAAkB,QAAAb,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,EAAA,CAAwB;AAAA,IAAA,EAAA,CACrG;AAAA,EAAA,GACF;AAEJ;"}

package/dist/multiselect.es.js

@@ -98,6 +98,7 @@ const B = me({
         variant: "text",
         loading: h,
         disabled: j,
+        type: "button",
         ...J,
         onClick: ee,
         className: p(