@trsys-tech/matrix-library 1.0.1-canary-1 → 1.0.1-canary-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,7 @@ import { Time } from './TimePickerContent';
3
3
  type DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {
4
4
  time: Time | undefined;
5
5
  onTimeChange: (time: Time | undefined) => void;
6
+ is24HourMode?: boolean;
6
7
  placeholder?: string;
7
8
  disabled?: boolean;
8
9
  slotsProps?: {
@@ -1 +1 @@
1
- {"version":3,"file":"DesktopTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DesktopTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,IAAI,EAAqB,MAAM,qBAAqB,CAAC;AAG9D,KAAK,sBAAsB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAChE,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;KAC1C,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgCvD,CAAC;AACF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,CAAC"}
1
+ {"version":3,"file":"DesktopTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DesktopTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,IAAI,EAAqB,MAAM,qBAAqB,CAAC;AAiB9D,KAAK,sBAAsB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAChE,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;KAC1C,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiCvD,CAAC;AACF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,CAAC"}
@@ -3,6 +3,7 @@ import { Time } from './TimePickerContent';
3
3
  type MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {
4
4
  time: Time | undefined;
5
5
  onTimeChange: (time: Time | undefined) => void;
6
+ is24HourMode?: boolean;
6
7
  placeholder?: string;
7
8
  disabled?: boolean;
8
9
  slotsProps?: {
@@ -1 +1 @@
1
- {"version":3,"file":"MobileTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/MobileTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,IAAI,EAAqB,MAAM,qBAAqB,CAAC;AAS9D,KAAK,qBAAqB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC/D,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;KAC1C,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqCrD,CAAC;AACF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}
1
+ {"version":3,"file":"MobileTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/MobileTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,IAAI,EAAqB,MAAM,qBAAqB,CAAC;AAwB9D,KAAK,qBAAqB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC/D,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;KAC1C,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsCrD,CAAC;AACF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}
@@ -2,11 +2,12 @@ import { HTMLAttributes } from 'react';
2
2
  type Time = {
3
3
  hour: number;
4
4
  minute: number;
5
- ampm: "AM" | "PM";
5
+ ampm?: "AM" | "PM";
6
6
  };
7
7
  type TimePickerContentProps = {
8
8
  time: Time | undefined;
9
9
  isOpen: boolean;
10
+ is24HourMode?: boolean;
10
11
  onTimeChange: (time: Time | undefined) => void;
11
12
  slotsProps?: {
12
13
  content?: HTMLAttributes<HTMLDivElement>;
@@ -1 +1 @@
1
- {"version":3,"file":"TimePickerContent.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/TimePickerContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAIpE,KAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,CAAC;AAEhE,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;KAC1C,CAAC;CACH,CAAC;AAMF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsHvD,CAAC;AACF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,KAAK,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"TimePickerContent.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/TimePickerContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAIpE,KAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,CAAC;AAEjE,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;KAC1C,CAAC;CACH,CAAC;AAoCF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6HvD,CAAC;AACF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,KAAK,IAAI,EAAE,CAAC"}
@@ -1,38 +1,45 @@
1
- import { jsxs as p, jsx as e } from "react/jsx-runtime";
2
- import { useState as s } from "react";
3
- import { cn as m } from "./utils.es.js";
4
- import { Button as c } from "./button.es.js";
5
- import { TimePickerContent as l } from "./timepickercontent.es.js";
6
- import { Popover as u, PopoverTrigger as b, PopoverContent as f } from "./popover.es.js";
7
- const $ = ({
1
+ import { jsxs as i, jsx as m } from "react/jsx-runtime";
2
+ import { useState as u } from "react";
3
+ import { cn as s } from "./utils.es.js";
4
+ import { Button as l } from "./button.es.js";
5
+ import { Popover as f, PopoverTrigger as h, PopoverContent as b } from "./popover.es.js";
6
+ import { TimePickerContent as g } from "./timepickercontent.es.js";
7
+ const d = (t, a) => {
8
+ const o = t.minute.toString().padStart(2, "0");
9
+ if (a)
10
+ return `${(t.ampm ? t.hour % 12 + (t.ampm === "PM" ? 12 : 0) : t.hour).toString().padStart(2, "0")} : ${o}`;
11
+ const r = t.ampm ? t.hour % 12 + (t.ampm === "PM" ? 12 : 0) : t.hour, e = r % 12 || 12, n = t.ampm ?? (r >= 12 ? "PM" : "AM");
12
+ return `${e.toString().padStart(2, "0")} : ${o} ${n}`;
13
+ }, k = ({
8
14
  time: t,
9
15
  onTimeChange: a,
10
- className: n,
16
+ className: o,
11
17
  slotsProps: r,
12
- placeholder: x = "Pick a Time",
13
- ...d
18
+ is24HourMode: e = !1,
19
+ placeholder: n = "Pick a Time",
20
+ ...x
14
21
  }) => {
15
- const [o, i] = s(!1);
16
- return /* @__PURE__ */ p(u, { open: o, onOpenChange: i, children: [
17
- /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
18
- c,
22
+ const [p, c] = u(!1);
23
+ return /* @__PURE__ */ i(f, { open: p, onOpenChange: c, children: [
24
+ /* @__PURE__ */ m(h, { asChild: !0, children: /* @__PURE__ */ m(
25
+ l,
19
26
  {
20
27
  variant: "text",
21
- className: m(
28
+ className: s(
22
29
  "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",
23
- n
30
+ o
24
31
  ),
25
32
  "data-placeholder": t ? void 0 : "",
26
- "aria-label": t?.hour ? `Selected time: ${t.hour}:${t.minute} ${t.ampm}` : x,
27
- ...d,
33
+ "aria-label": t ? `Selected time: ${d(t, e)}` : n,
34
+ ...x,
28
35
  type: "button",
29
- children: `${t?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${t?.minute?.toString()?.padStart(2, "0") ?? "--"} ${t?.ampm ?? "--"}`
36
+ children: t ? d(t, e) : "-- : --"
30
37
  }
31
38
  ) }),
32
- /* @__PURE__ */ e(f, { ...r?.content ?? {}, className: m("mtx-w-auto mtx-p-0", r?.content?.className), children: /* @__PURE__ */ e(l, { isOpen: o, onTimeChange: a, time: t, slotsProps: r }) })
39
+ /* @__PURE__ */ m(b, { ...r?.content ?? {}, className: s("mtx-w-auto mtx-p-0", r?.content?.className), children: /* @__PURE__ */ m(g, { isOpen: p, is24HourMode: e, onTimeChange: a, time: t, slotsProps: r }) })
33
40
  ] });
34
41
  };
35
42
  export {
36
- $ as DesktopTimePicker
43
+ k as DesktopTimePicker
37
44
  };
38
45
  //# sourceMappingURL=desktoptimepicker.es.js.map
@@ -1 +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 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;"}
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 { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\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 DesktopTimePickerProps = 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 DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\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 <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 ? `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 </PopoverTrigger>\r\n <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"mtx-w-auto mtx-p-0\", slotsProps?.content?.className)}>\r\n <TimePickerContent isOpen={isOpen} is24HourMode={is24HourMode} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["formatTimeLabel","time","is24HourMode","minute","hourFromAmpm","hour","ampm","DesktopTimePicker","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AASA,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,IAAsD,CAAC;AAAA,EAC3D,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,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,oBAAmBR,IAAY,SAAL;AAAA,QAC1B,cAAYA,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,GAElD;AAAA,IACA,gBAAAgB,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,sBAAsBX,GAAY,SAAS,SAAS,GACjH,UAAA,gBAAAQ,EAACK,GAAA,EAAkB,QAAAV,GAAgB,cAAAX,GAA4B,cAAAM,GAA4B,MAAAP,GAAY,YAAAS,EAAA,CAAwB,EAAA,CACjI;AAAA,EAAA,GACF;AAEJ;"}
@@ -1,42 +1,49 @@
1
- import { jsxs as r, jsx as e } from "react/jsx-runtime";
1
+ import { jsxs as x, jsx as e } from "react/jsx-runtime";
2
2
  import { useState as d } from "react";
3
- import { VisuallyHidden as s } from "@radix-ui/react-visually-hidden";
4
- import { cn as p } from "./utils.es.js";
5
- import { Button as c } from "./button.es.js";
6
- import { TimePickerContent as b } from "./timepickercontent.es.js";
7
- import { SwipableDrawer as u, SwipableDrawerContent as f, SwipableDrawerHeader as h, SwipableDrawerTitle as g, SwipableDrawerDescription as w } from "./swipabledrawer.es.js";
8
- const j = ({
3
+ import { VisuallyHidden as c } from "@radix-ui/react-visually-hidden";
4
+ import { cn as u } from "./utils.es.js";
5
+ import { Button as b } from "./button.es.js";
6
+ import { TimePickerContent as f } from "./timepickercontent.es.js";
7
+ import { SwipableDrawer as h, SwipableDrawerContent as g, SwipableDrawerHeader as w, SwipableDrawerTitle as S, SwipableDrawerDescription as y } from "./swipabledrawer.es.js";
8
+ const l = (t, m) => {
9
+ const o = t.minute.toString().padStart(2, "0");
10
+ if (m)
11
+ return `${(t.ampm ? t.hour % 12 + (t.ampm === "PM" ? 12 : 0) : t.hour).toString().padStart(2, "0")} : ${o}`;
12
+ const a = t.ampm ? t.hour % 12 + (t.ampm === "PM" ? 12 : 0) : t.hour, r = a % 12 || 12, n = t.ampm ?? (a >= 12 ? "PM" : "AM");
13
+ return `${r.toString().padStart(2, "0")} : ${o} ${n}`;
14
+ }, j = ({
9
15
  time: t,
10
- onTimeChange: a,
11
- className: n,
12
- slotsProps: i,
13
- placeholder: x = "Pick a time",
14
- ...l
16
+ onTimeChange: m,
17
+ className: o,
18
+ slotsProps: a,
19
+ is24HourMode: r = !1,
20
+ placeholder: n = "Pick a time",
21
+ ...i
15
22
  }) => {
16
- const [m, o] = d(!1);
17
- return /* @__PURE__ */ r(u, { open: m, onOpenChange: o, children: [
23
+ const [p, s] = d(!1);
24
+ return /* @__PURE__ */ x(h, { open: p, onOpenChange: s, children: [
18
25
  /* @__PURE__ */ e(
19
- c,
26
+ b,
20
27
  {
21
28
  variant: "text",
22
- className: p(
29
+ className: u(
23
30
  "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",
24
- n
31
+ o
25
32
  ),
26
33
  "data-placeholder": t ? void 0 : "",
27
- onClick: () => o(!0),
28
- "aria-label": t?.hour ? `Selected time: ${t.hour}:${t.minute} ${t.ampm}` : x,
29
- ...l,
34
+ onClick: () => s(!0),
35
+ "aria-label": t ? `Selected time: ${l(t, r)}` : n,
36
+ ...i,
30
37
  type: "button",
31
- children: `${t?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${t?.minute?.toString()?.padStart(2, "0") ?? "--"} ${t?.ampm ?? "--"}`
38
+ children: t ? l(t, r) : "-- : --"
32
39
  }
33
40
  ),
34
- /* @__PURE__ */ r(f, { children: [
35
- /* @__PURE__ */ e(h, { className: "mtx-p-0", children: /* @__PURE__ */ r(s, { children: [
36
- /* @__PURE__ */ e(g, { className: "mtx-text-primary mtx-text-lg mtx-font-bold mtx-text-start", children: " " }),
37
- /* @__PURE__ */ e(w, { children: " " })
41
+ /* @__PURE__ */ x(g, { children: [
42
+ /* @__PURE__ */ e(w, { className: "mtx-p-0", children: /* @__PURE__ */ x(c, { children: [
43
+ /* @__PURE__ */ e(S, { className: "mtx-text-primary mtx-text-lg mtx-font-bold mtx-text-start", children: " " }),
44
+ /* @__PURE__ */ e(y, { children: " " })
38
45
  ] }) }),
39
- /* @__PURE__ */ e(b, { isOpen: m, onTimeChange: a, time: t, slotsProps: i })
46
+ /* @__PURE__ */ e(f, { isOpen: p, is24HourMode: r, onTimeChange: m, time: t, slotsProps: a })
40
47
  ] })
41
48
  ] });
42
49
  };
@@ -1 +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 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;"}
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;"}
@@ -1,71 +1,94 @@
1
- import { jsxs as N, jsx as m } from "react/jsx-runtime";
2
- import { useState as S, useRef as i, useEffect as g } from "react";
3
- import { cn as c } from "./utils.es.js";
4
- const b = () => ({ hour: (/* @__PURE__ */ new Date()).getHours() % 12, minute: (/* @__PURE__ */ new Date()).getMinutes(), ampm: (/* @__PURE__ */ new Date()).getHours() < 12 ? "AM" : "PM" }), k = ({ isOpen: l, time: s, onTimeChange: u, slotsProps: f }) => {
5
- const [r, x] = S(s ?? b()), e = i(r), d = i(null), h = i(null), o = 32, n = 8, w = (t) => {
6
- d?.current?.scrollTo({
7
- top: t * (o + n),
1
+ import { jsxs as M, jsx as l } from "react/jsx-runtime";
2
+ import { useState as P, useRef as h, useEffect as b } from "react";
3
+ import { cn as a } from "./utils.es.js";
4
+ const k = () => {
5
+ const e = /* @__PURE__ */ new Date(), r = e.getHours();
6
+ return { hour: r % 12 || 12, minute: e.getMinutes(), ampm: r < 12 ? "AM" : "PM" };
7
+ }, y = (e, r, n) => Math.min(Math.max(e, r), n), B = (e) => e ? { hour: 0, minute: 0 } : k(), d = (e, r) => {
8
+ if (!e)
9
+ return B(r);
10
+ const n = y(e.minute, 0, 59), c = e.ampm ? e.hour % 12 + (e.ampm === "PM" ? 12 : 0) : e.hour;
11
+ return r ? { hour: y(c, 0, 23), minute: n } : {
12
+ hour: c % 12 || 12,
13
+ minute: n,
14
+ ampm: e.ampm ?? (c >= 12 ? "PM" : "AM")
15
+ };
16
+ }, z = ({ isOpen: e, time: r, is24HourMode: n = !1, onTimeChange: c, slotsProps: i }) => {
17
+ const [u, p] = P(() => d(r, n)), o = h(u), g = h(null), w = h(null), x = 32, s = 8, T = n ? Array.from({ length: 24 }, (t, m) => m) : Array.from({ length: 12 }, (t, m) => m + 1), v = (t) => {
18
+ g?.current?.scrollTo({
19
+ top: t * (x + s),
8
20
  behavior: "smooth"
9
21
  });
10
- }, y = (t) => {
11
- h?.current?.scrollTo({
12
- top: t * (o + n),
22
+ }, S = (t) => {
23
+ w?.current?.scrollTo({
24
+ top: t * (x + s),
13
25
  behavior: "smooth"
14
26
  });
15
- }, p = (t) => {
16
- e.current = { ...r, hour: t }, x(e.current), u(e.current);
17
- }, v = (t) => {
18
- e.current = { ...r, minute: t }, x(e.current), u(e.current);
19
- }, M = (t) => {
20
- e.current = { ...r, ampm: t }, x(e.current), u(e.current);
27
+ }, f = (t) => {
28
+ const m = d(t, n);
29
+ o.current = m, p(m), c(m);
30
+ }, N = (t) => {
31
+ f({ ...o.current, hour: t });
32
+ }, A = (t) => {
33
+ f({ ...o.current, minute: t });
34
+ }, j = (t) => {
35
+ f({ ...o.current, ampm: t });
21
36
  };
22
- return g(() => {
23
- l && x(s ?? b());
24
- }, [l, s]), g(() => {
25
- l && setTimeout(() => {
26
- w(e.current.hour - 1), y(e.current.minute);
37
+ return b(() => {
38
+ if (e) {
39
+ const t = d(r, n);
40
+ o.current = t, p(t);
41
+ }
42
+ }, [e, r, n]), b(() => {
43
+ if (!e)
44
+ return;
45
+ const t = window.setTimeout(() => {
46
+ v(n ? o.current.hour : o.current.hour - 1), S(o.current.minute);
27
47
  });
28
- }, [l]), /* @__PURE__ */ N(
48
+ return () => window.clearTimeout(t);
49
+ }, [e, n]), /* @__PURE__ */ M(
29
50
  "div",
30
51
  {
31
- ...f?.content ?? {},
32
- className: c("mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1", f?.content?.className),
52
+ ...i?.content ?? {},
53
+ className: a("mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1", i?.content?.className),
33
54
  children: [
34
- /* @__PURE__ */ m("div", { className: "mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar", ref: d, children: Array.from({ length: 12 }, (t, a) => a).map((t) => /* @__PURE__ */ m(
55
+ /* @__PURE__ */ l("div", { className: "mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar", ref: g, children: T.map((t) => /* @__PURE__ */ l(
35
56
  "button",
36
57
  {
37
- style: { height: o, marginBottom: n },
38
- className: c(
58
+ style: { height: x, marginBottom: s },
59
+ className: a(
39
60
  "mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400",
40
- t + 1 === r.hour && "mtx-bg-secondary"
61
+ t === u.hour && "mtx-bg-secondary"
41
62
  ),
42
- onClick: () => p(t + 1),
43
- children: (t + 1).toString().padStart(2, "0")
63
+ onClick: () => N(t),
64
+ type: "button",
65
+ children: t.toString().padStart(2, "0")
44
66
  },
45
- t + 1
67
+ t
46
68
  )) }),
47
- /* @__PURE__ */ m("div", { className: "mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar", ref: h, children: Array.from({ length: 60 }, (t, a) => a).map((t) => /* @__PURE__ */ m(
69
+ /* @__PURE__ */ l("div", { className: "mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar", ref: w, children: Array.from({ length: 60 }, (t, m) => m).map((t) => /* @__PURE__ */ l(
48
70
  "button",
49
71
  {
50
- style: { height: o, marginBottom: n },
51
- className: c(
72
+ style: { height: x, marginBottom: s },
73
+ className: a(
52
74
  "mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400",
53
- t === r.minute && "mtx-bg-secondary"
75
+ t === u.minute && "mtx-bg-secondary"
54
76
  ),
55
- onClick: () => v(t),
77
+ onClick: () => A(t),
78
+ type: "button",
56
79
  children: t.toString().padStart(2, "0")
57
80
  },
58
81
  t
59
82
  )) }),
60
- /* @__PURE__ */ m("div", { className: "mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar", children: ["AM", "PM"].map((t) => /* @__PURE__ */ m(
83
+ !n && /* @__PURE__ */ l("div", { className: "mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar", children: ["AM", "PM"].map((t) => /* @__PURE__ */ l(
61
84
  "button",
62
85
  {
63
- style: { height: o, marginBottom: n },
64
- className: c(
86
+ style: { height: x, marginBottom: s },
87
+ className: a(
65
88
  "mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400",
66
- t === r.ampm && "mtx-bg-secondary"
89
+ t === u.ampm && "mtx-bg-secondary"
67
90
  ),
68
- onClick: () => M(t),
91
+ onClick: () => j(t),
69
92
  type: "button",
70
93
  children: t
71
94
  },
@@ -76,6 +99,6 @@ const b = () => ({ hour: (/* @__PURE__ */ new Date()).getHours() % 12, minute: (
76
99
  );
77
100
  };
78
101
  export {
79
- k as TimePickerContent
102
+ z as TimePickerContent
80
103
  };
81
104
  //# sourceMappingURL=timepickercontent.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"timepickercontent.es.js","sources":["../src/components/date-picker/TimePickerContent.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype Time = { hour: number; minute: number; ampm: \"AM\" | \"PM\" };\r\n\r\ntype TimePickerContentProps = {\r\n time: Time | undefined;\r\n isOpen: boolean;\r\n onTimeChange: (time: Time | undefined) => void;\r\n slotsProps?: {\r\n content?: HTMLAttributes<HTMLDivElement>;\r\n };\r\n};\r\n\r\nconst getNow = (): Time => {\r\n return { hour: new Date().getHours() % 12, minute: new Date().getMinutes(), ampm: new Date().getHours() < 12 ? \"AM\" : \"PM\" };\r\n};\r\n\r\nconst TimePickerContent: React.FC<TimePickerContentProps> = ({ isOpen, time, onTimeChange, slotsProps }) => {\r\n const [selectedtime, setSelectedTime] = useState<Time>(time ?? getNow());\r\n const selectedTimeRef = useRef<Time>(selectedtime);\r\n\r\n const hourRef = useRef<HTMLDivElement>(null);\r\n const minuteRef = useRef<HTMLDivElement>(null);\r\n\r\n const itemHeight = 32; // Assuming each item height is 40px\r\n const marginBetweenItems = 8; // Assuming margin between each item is 8px\r\n\r\n // Function to scroll to a specific hour\r\n const scrollToHour = (index: number) => {\r\n hourRef?.current?.scrollTo({\r\n top: index * (itemHeight + marginBetweenItems),\r\n behavior: \"smooth\",\r\n });\r\n };\r\n\r\n // Function to scroll to a specific minute\r\n const scrollToMinute = (index: number) => {\r\n minuteRef?.current?.scrollTo({\r\n top: index * (itemHeight + marginBetweenItems),\r\n behavior: \"smooth\",\r\n });\r\n };\r\n\r\n const handleSethour = (hour: number) => {\r\n selectedTimeRef.current = { ...selectedtime, hour };\r\n setSelectedTime(selectedTimeRef.current);\r\n onTimeChange(selectedTimeRef.current);\r\n };\r\n\r\n const handleSetMinute = (minute: number) => {\r\n selectedTimeRef.current = { ...selectedtime, minute };\r\n setSelectedTime(selectedTimeRef.current);\r\n onTimeChange(selectedTimeRef.current);\r\n };\r\n\r\n const handleSetAMPM = (ampm: \"AM\" | \"PM\") => {\r\n selectedTimeRef.current = { ...selectedtime, ampm };\r\n setSelectedTime(selectedTimeRef.current);\r\n onTimeChange(selectedTimeRef.current);\r\n };\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n setSelectedTime(time ?? getNow());\r\n }\r\n }, [isOpen, time]);\r\n\r\n useEffect(() => {\r\n // Center the selected hour/minute on mount\r\n if (isOpen) {\r\n setTimeout(() => {\r\n scrollToHour(selectedTimeRef.current.hour - 1);\r\n scrollToMinute(selectedTimeRef.current.minute);\r\n });\r\n }\r\n }, [isOpen]);\r\n\r\n return (\r\n <div\r\n {...(slotsProps?.content ?? {})}\r\n className={cn(\"mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1\", slotsProps?.content?.className)}\r\n >\r\n {/* Hour Selector */}\r\n <div className=\"mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={hourRef}>\r\n {Array.from({ length: 12 }, (_, i) => i).map(hour => (\r\n <button\r\n style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n className={cn(\r\n \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n hour + 1 === selectedtime.hour && \"mtx-bg-secondary\",\r\n )}\r\n key={hour + 1}\r\n onClick={() => handleSethour(hour + 1)}\r\n >\r\n {(hour + 1).toString().padStart(2, \"0\")}\r\n </button>\r\n ))}\r\n </div>\r\n\r\n {/* Minute Selector */}\r\n <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={minuteRef}>\r\n {Array.from({ length: 60 }, (_, i) => i).map(minute => (\r\n <button\r\n style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n className={cn(\r\n \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n minute === selectedtime.minute && \"mtx-bg-secondary\",\r\n )}\r\n key={minute}\r\n onClick={() => handleSetMinute(minute)}\r\n >\r\n {minute.toString().padStart(2, \"0\")}\r\n </button>\r\n ))}\r\n </div>\r\n\r\n {/* AM/PM Selector */}\r\n <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\">\r\n {[\"AM\", \"PM\"].map(ampm => (\r\n <button\r\n style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n className={cn(\r\n \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n ampm === selectedtime.ampm && \"mtx-bg-secondary\",\r\n )}\r\n key={ampm}\r\n onClick={() => handleSetAMPM(ampm as \"AM\" | \"PM\")}\r\n type=\"button\"\r\n >\r\n {ampm}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n};\r\nexport { TimePickerContent, type TimePickerContentProps, type Time };\r\n"],"names":["getNow","TimePickerContent","isOpen","time","onTimeChange","slotsProps","selectedtime","setSelectedTime","useState","selectedTimeRef","useRef","hourRef","minuteRef","itemHeight","marginBetweenItems","scrollToHour","index","scrollToMinute","handleSethour","hour","handleSetMinute","minute","handleSetAMPM","ampm","useEffect","jsxs","cn","jsx","_","i"],"mappings":"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"}
1
+ {"version":3,"file":"timepickercontent.es.js","sources":["../src/components/date-picker/TimePickerContent.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype Time = { hour: number; minute: number; ampm?: \"AM\" | \"PM\" };\r\n\r\ntype TimePickerContentProps = {\r\n time: Time | undefined;\r\n isOpen: boolean;\r\n is24HourMode?: boolean;\r\n onTimeChange: (time: Time | undefined) => void;\r\n slotsProps?: {\r\n content?: HTMLAttributes<HTMLDivElement>;\r\n };\r\n};\r\n\r\nconst getNow = (): Time => {\r\n const now = new Date();\r\n const hour = now.getHours();\r\n\r\n return { hour: hour % 12 || 12, minute: now.getMinutes(), ampm: hour < 12 ? \"AM\" : \"PM\" };\r\n};\r\n\r\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\r\n\r\nconst getDefaultTime = (is24HourMode: boolean): Time => {\r\n return is24HourMode ? { hour: 0, minute: 0 } : getNow();\r\n};\r\n\r\nconst normalizeTime = (time: Time | undefined, is24HourMode: boolean): Time => {\r\n if (!time) {\r\n return getDefaultTime(is24HourMode);\r\n }\r\n\r\n const minute = clamp(time.minute, 0, 59);\r\n const hourFromAmpm = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n\r\n if (is24HourMode) {\r\n return { hour: clamp(hourFromAmpm, 0, 23), minute };\r\n }\r\n\r\n const hour = hourFromAmpm % 12 || 12;\r\n\r\n return {\r\n hour,\r\n minute,\r\n ampm: time.ampm ?? (hourFromAmpm >= 12 ? \"PM\" : \"AM\"),\r\n };\r\n};\r\n\r\nconst TimePickerContent: React.FC<TimePickerContentProps> = ({ isOpen, time, is24HourMode = false, onTimeChange, slotsProps }) => {\r\n const [selectedTime, setSelectedTime] = useState<Time>(() => normalizeTime(time, is24HourMode));\r\n const selectedTimeRef = useRef<Time>(selectedTime);\r\n\r\n const hourRef = useRef<HTMLDivElement>(null);\r\n const minuteRef = useRef<HTMLDivElement>(null);\r\n\r\n const itemHeight = 32;\r\n const marginBetweenItems = 8;\r\n\r\n const hourOptions = is24HourMode ? Array.from({ length: 24 }, (_, index) => index) : Array.from({ length: 12 }, (_, index) => index + 1);\r\n\r\n const scrollToHour = (index: number) => {\r\n hourRef?.current?.scrollTo({\r\n top: index * (itemHeight + marginBetweenItems),\r\n behavior: \"smooth\",\r\n });\r\n };\r\n\r\n const scrollToMinute = (index: number) => {\r\n minuteRef?.current?.scrollTo({\r\n top: index * (itemHeight + marginBetweenItems),\r\n behavior: \"smooth\",\r\n });\r\n };\r\n\r\n const updateSelectedTime = (nextTime: Time) => {\r\n const normalizedTime = normalizeTime(nextTime, is24HourMode);\r\n selectedTimeRef.current = normalizedTime;\r\n setSelectedTime(normalizedTime);\r\n onTimeChange(normalizedTime);\r\n };\r\n\r\n const handleSetHour = (hour: number) => {\r\n updateSelectedTime({ ...selectedTimeRef.current, hour });\r\n };\r\n\r\n const handleSetMinute = (minute: number) => {\r\n updateSelectedTime({ ...selectedTimeRef.current, minute });\r\n };\r\n\r\n const handleSetAMPM = (ampm: \"AM\" | \"PM\") => {\r\n updateSelectedTime({ ...selectedTimeRef.current, ampm });\r\n };\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n const nextTime = normalizeTime(time, is24HourMode);\r\n selectedTimeRef.current = nextTime;\r\n setSelectedTime(nextTime);\r\n }\r\n }, [isOpen, time, is24HourMode]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) {\r\n return;\r\n }\r\n\r\n const timeoutId = window.setTimeout(() => {\r\n scrollToHour(is24HourMode ? selectedTimeRef.current.hour : selectedTimeRef.current.hour - 1);\r\n scrollToMinute(selectedTimeRef.current.minute);\r\n });\r\n\r\n return () => window.clearTimeout(timeoutId);\r\n }, [isOpen, is24HourMode]);\r\n\r\n return (\r\n <div\r\n {...(slotsProps?.content ?? {})}\r\n className={cn(\"mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1\", slotsProps?.content?.className)}\r\n >\r\n <div className=\"mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={hourRef}>\r\n {hourOptions.map(hour => (\r\n <button\r\n style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n className={cn(\r\n \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n hour === selectedTime.hour && \"mtx-bg-secondary\",\r\n )}\r\n key={hour}\r\n onClick={() => handleSetHour(hour)}\r\n type=\"button\"\r\n >\r\n {hour.toString().padStart(2, \"0\")}\r\n </button>\r\n ))}\r\n </div>\r\n\r\n <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={minuteRef}>\r\n {Array.from({ length: 60 }, (_, i) => i).map(minute => (\r\n <button\r\n style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n className={cn(\r\n \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n minute === selectedTime.minute && \"mtx-bg-secondary\",\r\n )}\r\n key={minute}\r\n onClick={() => handleSetMinute(minute)}\r\n type=\"button\"\r\n >\r\n {minute.toString().padStart(2, \"0\")}\r\n </button>\r\n ))}\r\n </div>\r\n\r\n {!is24HourMode && (\r\n <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\">\r\n {[\"AM\", \"PM\"].map(ampm => (\r\n <button\r\n style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n className={cn(\r\n \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n ampm === selectedTime.ampm && \"mtx-bg-secondary\",\r\n )}\r\n key={ampm}\r\n onClick={() => handleSetAMPM(ampm as \"AM\" | \"PM\")}\r\n type=\"button\"\r\n >\r\n {ampm}\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\nexport { TimePickerContent, type TimePickerContentProps, type Time };\r\n"],"names":["getNow","now","hour","clamp","value","min","max","getDefaultTime","is24HourMode","normalizeTime","time","minute","hourFromAmpm","TimePickerContent","isOpen","onTimeChange","slotsProps","selectedTime","setSelectedTime","useState","selectedTimeRef","useRef","hourRef","minuteRef","itemHeight","marginBetweenItems","hourOptions","_","index","scrollToHour","scrollToMinute","updateSelectedTime","nextTime","normalizedTime","handleSetHour","handleSetMinute","handleSetAMPM","ampm","useEffect","timeoutId","jsxs","cn","jsx","i"],"mappings":";;;AAgBA,MAAMA,IAAS,MAAY;AACzB,QAAMC,wBAAU,KAAA,GACVC,IAAOD,EAAI,SAAA;AAEjB,SAAO,EAAE,MAAMC,IAAO,MAAM,IAAI,QAAQD,EAAI,WAAA,GAAc,MAAMC,IAAO,KAAK,OAAO,KAAA;AACrF,GAEMC,IAAQ,CAACC,GAAeC,GAAaC,MAAgB,KAAK,IAAI,KAAK,IAAIF,GAAOC,CAAG,GAAGC,CAAG,GAEvFC,IAAiB,CAACC,MACfA,IAAe,EAAE,MAAM,GAAG,QAAQ,EAAA,IAAMR,EAAA,GAG3CS,IAAgB,CAACC,GAAwBF,MAAgC;AAC7E,MAAI,CAACE;AACH,WAAOH,EAAeC,CAAY;AAGpC,QAAMG,IAASR,EAAMO,EAAK,QAAQ,GAAG,EAAE,GACjCE,IAAeF,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK;AAEzF,SAAIF,IACK,EAAE,MAAML,EAAMS,GAAc,GAAG,EAAE,GAAG,QAAAD,EAAA,IAKtC;AAAA,IACL,MAHWC,IAAe,MAAM;AAAA,IAIhC,QAAAD;AAAA,IACA,MAAMD,EAAK,SAASE,KAAgB,KAAK,OAAO;AAAA,EAAA;AAEpD,GAEMC,IAAsD,CAAC,EAAE,QAAAC,GAAQ,MAAAJ,GAAM,cAAAF,IAAe,IAAO,cAAAO,GAAc,YAAAC,QAAiB;AAChI,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAe,MAAMV,EAAcC,GAAMF,CAAY,CAAC,GACxFY,IAAkBC,EAAaJ,CAAY,GAE3CK,IAAUD,EAAuB,IAAI,GACrCE,IAAYF,EAAuB,IAAI,GAEvCG,IAAa,IACbC,IAAqB,GAErBC,IAAclB,IAAe,MAAM,KAAK,EAAE,QAAQ,GAAA,GAAM,CAACmB,GAAGC,MAAUA,CAAK,IAAI,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACD,GAAGC,MAAUA,IAAQ,CAAC,GAEjIC,IAAe,CAACD,MAAkB;AACtC,IAAAN,GAAS,SAAS,SAAS;AAAA,MACzB,KAAKM,KAASJ,IAAaC;AAAA,MAC3B,UAAU;AAAA,IAAA,CACX;AAAA,EACH,GAEMK,IAAiB,CAACF,MAAkB;AACxC,IAAAL,GAAW,SAAS,SAAS;AAAA,MAC3B,KAAKK,KAASJ,IAAaC;AAAA,MAC3B,UAAU;AAAA,IAAA,CACX;AAAA,EACH,GAEMM,IAAqB,CAACC,MAAmB;AAC7C,UAAMC,IAAiBxB,EAAcuB,GAAUxB,CAAY;AAC3D,IAAAY,EAAgB,UAAUa,GAC1Bf,EAAgBe,CAAc,GAC9BlB,EAAakB,CAAc;AAAA,EAC7B,GAEMC,IAAgB,CAAChC,MAAiB;AACtC,IAAA6B,EAAmB,EAAE,GAAGX,EAAgB,SAAS,MAAAlB,GAAM;AAAA,EACzD,GAEMiC,IAAkB,CAACxB,MAAmB;AAC1C,IAAAoB,EAAmB,EAAE,GAAGX,EAAgB,SAAS,QAAAT,GAAQ;AAAA,EAC3D,GAEMyB,IAAgB,CAACC,MAAsB;AAC3C,IAAAN,EAAmB,EAAE,GAAGX,EAAgB,SAAS,MAAAiB,GAAM;AAAA,EACzD;AAEA,SAAAC,EAAU,MAAM;AACd,QAAIxB,GAAQ;AACV,YAAMkB,IAAWvB,EAAcC,GAAMF,CAAY;AACjD,MAAAY,EAAgB,UAAUY,GAC1Bd,EAAgBc,CAAQ;AAAA,IAC1B;AAAA,EACF,GAAG,CAAClB,GAAQJ,GAAMF,CAAY,CAAC,GAE/B8B,EAAU,MAAM;AACd,QAAI,CAACxB;AACH;AAGF,UAAMyB,IAAY,OAAO,WAAW,MAAM;AACxC,MAAAV,EAAarB,IAAeY,EAAgB,QAAQ,OAAOA,EAAgB,QAAQ,OAAO,CAAC,GAC3FU,EAAeV,EAAgB,QAAQ,MAAM;AAAA,IAC/C,CAAC;AAED,WAAO,MAAM,OAAO,aAAamB,CAAS;AAAA,EAC5C,GAAG,CAACzB,GAAQN,CAAY,CAAC,GAGvB,gBAAAgC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAIxB,GAAY,WAAW,CAAA;AAAA,MAC5B,WAAWyB,EAAG,+EAA+EzB,GAAY,SAAS,SAAS;AAAA,MAE3H,UAAA;AAAA,QAAA,gBAAA0B,EAAC,SAAI,WAAU,kFAAiF,KAAKpB,GAClG,UAAAI,EAAY,IAAI,CAAAxB,MACf,gBAAAwC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,QAAQlB,GAAY,cAAcC,EAAA;AAAA,YAC3C,WAAWgB;AAAA,cACT;AAAA,cACAvC,MAASe,EAAa,QAAQ;AAAA,YAAA;AAAA,YAGhC,SAAS,MAAMiB,EAAchC,CAAI;AAAA,YACjC,MAAK;AAAA,YAEJ,UAAAA,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG;AAAA,UAAA;AAAA,UAJ3BA;AAAA,QAAA,CAMR,GACH;AAAA,0BAEC,OAAA,EAAI,WAAU,kFAAiF,KAAKqB,GAClG,gBAAM,KAAK,EAAE,QAAQ,GAAA,GAAM,CAACI,GAAGgB,MAAMA,CAAC,EAAE,IAAI,CAAAhC,MAC3C,gBAAA+B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,QAAQlB,GAAY,cAAcC,EAAA;AAAA,YAC3C,WAAWgB;AAAA,cACT;AAAA,cACA9B,MAAWM,EAAa,UAAU;AAAA,YAAA;AAAA,YAGpC,SAAS,MAAMkB,EAAgBxB,CAAM;AAAA,YACrC,MAAK;AAAA,YAEJ,UAAAA,EAAO,SAAA,EAAW,SAAS,GAAG,GAAG;AAAA,UAAA;AAAA,UAJ7BA;AAAA,QAAA,CAMR,GACH;AAAA,QAEC,CAACH,KACA,gBAAAkC,EAAC,OAAA,EAAI,WAAU,kFACZ,UAAA,CAAC,MAAM,IAAI,EAAE,IAAI,CAAAL,MAChB,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,QAAQlB,GAAY,cAAcC,EAAA;AAAA,YAC3C,WAAWgB;AAAA,cACT;AAAA,cACAJ,MAASpB,EAAa,QAAQ;AAAA,YAAA;AAAA,YAGhC,SAAS,MAAMmB,EAAcC,CAAmB;AAAA,YAChD,MAAK;AAAA,YAEJ,UAAAA;AAAA,UAAA;AAAA,UAJIA;AAAA,QAAA,CAMR,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@trsys-tech/matrix-library",
3
3
  "description": "MatrixUI Library",
4
4
  "private": false,
5
- "version": "1.0.1-canary-1",
5
+ "version": "1.0.1-canary-3",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",