@trsys-tech/matrix-library 0.6.3-canary-3 → 0.6.3-canary-5

package/dist/components/date-picker/DesktopTimePicker.d.ts

@@ -3,6 +3,7 @@ import { Time } from './TimePickerContent';
 type DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {
     time: Time | undefined;
     onTimeChange: (time: Time | undefined) => void;
+    is24HourMode?: boolean;
     placeholder?: string;
     disabled?: boolean;
     slotsProps?: {

package/dist/components/date-picker/DesktopTimePicker.d.ts.map

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

package/dist/components/date-picker/MobileTimePicker.d.ts

@@ -3,6 +3,7 @@ import { Time } from './TimePickerContent';
 type MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {
     time: Time | undefined;
     onTimeChange: (time: Time | undefined) => void;
+    is24HourMode?: boolean;
     placeholder?: string;
     disabled?: boolean;
     slotsProps?: {

package/dist/components/date-picker/MobileTimePicker.d.ts.map

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

package/dist/components/date-picker/TimePickerContent.d.ts

@@ -2,11 +2,12 @@ import { HTMLAttributes } from 'react';
 type Time = {
     hour: number;
     minute: number;
-    ampm: "AM" | "PM";
+    ampm?: "AM" | "PM";
 };
 type TimePickerContentProps = {
     time: Time | undefined;
     isOpen: boolean;
+    is24HourMode?: boolean;
     onTimeChange: (time: Time | undefined) => void;
     slotsProps?: {
         content?: HTMLAttributes<HTMLDivElement>;

package/dist/components/date-picker/TimePickerContent.d.ts.map

@@ -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,CAkHvD,CAAC;AACF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,KAAK,IAAI,EAAE,CAAC"}
+{"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,CAuHvD,CAAC;AACF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,KAAK,IAAI,EAAE,CAAC"}

package/dist/components/form-time-picker/FormTimePicker.d.ts

@@ -1,17 +1,18 @@
-import { FormItem } from '../form/Form';
 import { SlotProps } from '@radix-ui/react-slot';
 import { Control, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { TimePickerProps } from '../date-picker/TimePicker';
+import { FormItem } from '../form/Form';
 type FormTimePickerProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<ControllerProps<TFieldValues, TName>, "render"> & React.ComponentProps<typeof FormItem> & {
     label: string;
     control: Control<TFieldValues>;
     required?: boolean;
     readOnly?: boolean;
+    is24HourMode?: boolean;
     slotProps?: {
         formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;
         formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;
         formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>;
-        datepickerProps?: TimePickerProps;
+        timepickerProps?: Partial<TimePickerProps>;
     };
 };
 declare const FormTimePicker: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormTimePickerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form-time-picker/FormTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-time-picker/FormTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAc,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAExE,KAAK,mBAAmB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CACtG,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE;QACV,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1G,gBAAgB,CAAC,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAChH,eAAe,CAAC,EAAE,eAAe,CAAC;KACnC,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,cAAc,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,SAAS,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,4CA2B/I,CAAC;AACF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"FormTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-time-picker/FormTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAAc,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AAExF,KAAK,mBAAmB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CACtG,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE;QACV,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1G,gBAAgB,CAAC,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAChH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;KAC5C,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,cAAc,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,SAAS,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,4CAkC/I,CAAC;AACF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAC"}

package/dist/desktoptimepicker.es.js

@@ -1,38 +1,45 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
 import { useState as l } from "react";
-import { cn as a } from "./utils.es.js";
-import { Button as u } from "./button.es.js";
-import { TimePickerContent as m } from "./timepickercontent.es.js";
-import { Popover as b, PopoverTrigger as f, PopoverContent as g } from "./popover.es.js";
-const $ = ({
-  time: e,
+import { cn as c } from "./utils.es.js";
+import { Button as f } from "./button.es.js";
+import { Popover as h, PopoverTrigger as b, PopoverContent as g } from "./popover.es.js";
+import { TimePickerContent as x } from "./timepickercontent.es.js";
+const i = (r, n) => {
+  const t = r.minute.toString().padStart(2, "0");
+  if (n)
+    return `${(r.ampm ? r.hour % 12 + (r.ampm === "PM" ? 12 : 0) : r.hour).toString().padStart(2, "0")} : ${t}`;
+  const e = r.ampm ? r.hour % 12 + (r.ampm === "PM" ? 12 : 0) : r.hour, o = e % 12 || 12, p = r.ampm ?? (e >= 12 ? "PM" : "AM");
+  return `${o.toString().padStart(2, "0")} : ${t} ${p}`;
+}, k = ({
+  time: r,
   onTimeChange: n,
-  className: d,
-  slotsProps: t,
-  placeholder: i = "Pick a Time",
-  ...p
+  className: t,
+  slotsProps: e,
+  is24HourMode: o = !1,
+  placeholder: p = "Pick a Time",
+  ...s
 }) => {
-  const [o, s] = l(!1);
-  return /* @__PURE__ */ c(b, { open: o, onOpenChange: s, children: [
-    /* @__PURE__ */ r(f, { asChild: !0, children: /* @__PURE__ */ r(
-      u,
+  const [d, m] = l(!1);
+  return /* @__PURE__ */ u(h, { open: d, onOpenChange: m, children: [
+    /* @__PURE__ */ a(b, { asChild: !0, children: /* @__PURE__ */ a(
+      f,
       {
         type: "button",
         variant: "text",
-        className: a(
+        className: c(
           "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
-          d
+          t
         ),
-        "data-placeholder": e ? void 0 : "",
-        "aria-label": e?.hour ? `Selected time: ${e.hour}:${e.minute} ${e.ampm}` : i,
-        ...p,
-        children: `${e?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${e?.minute?.toString()?.padStart(2, "0") ?? "--"} ${e?.ampm ?? "--"}`
+        "data-placeholder": r ? void 0 : "",
+        "aria-label": r ? `Selected time: ${i(r, o)}` : p,
+        ...s,
+        children: r ? i(r, o) : "-- : --"
       }
     ) }),
-    /* @__PURE__ */ r(g, { ...t?.content ?? {}, className: a("w-auto p-0", t?.content?.className), children: /* @__PURE__ */ r(m, { isOpen: o, onTimeChange: n, time: e, slotsProps: t }) })
+    /* @__PURE__ */ a(g, { ...e?.content ?? {}, className: c("w-auto p-0", e?.content?.className), children: /* @__PURE__ */ a(x, { isOpen: d, is24HourMode: o, onTimeChange: n, time: r, slotsProps: e }) })
   ] });
 };
 export {
-  $ as DesktopTimePicker
+  k as DesktopTimePicker
 };
 //# sourceMappingURL=desktoptimepicker.es.js.map

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          type=\"button\"\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled: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(\"w-auto 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,MAAK;AAAA,QACL,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,cAAcX,GAAY,SAAS,SAAS,GACzG,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 { 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          type=\"button\"\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled: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        >\r\n          {time ? formatTimeLabel(time, is24HourMode) : \"-- : --\"}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"w-auto 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,MAAK;AAAA,QACL,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,QAEH,UAAAX,IAAOD,EAAgBC,GAAMC,CAAY,IAAI;AAAA,MAAA;AAAA,IAAA,GAElD;AAAA,IACA,gBAAAgB,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,cAAcX,GAAY,SAAS,SAAS,GACzG,UAAA,gBAAAQ,EAACK,GAAA,EAAkB,QAAAV,GAAgB,cAAAX,GAA4B,cAAAM,GAA4B,MAAAP,GAAY,YAAAS,EAAA,CAAwB,EAAA,CACjI;AAAA,EAAA,GACF;AAEJ;"}

package/dist/formtimepicker.es.js

@@ -1,24 +1,33 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { FormField as f, FormItem as g, FormLabel as h, FormControl as F, FormMessage as b } from "./form.es.js";
-import { TimePicker as x } from "./timepicker.es.js";
+import { TimePicker as g } from "./timepicker.es.js";
+import { FormField as h, FormItem as F, FormLabel as b, FormControl as x, FormMessage as C } from "./form.es.js";
 const j = (l) => {
-  const { name: n, control: t, defaultValue: a, disabled: o, readOnly: i, rules: d, shouldUnregister: p, label: c, slotProps: e, required: u, ...P } = l;
+  const { name: n, control: t, defaultValue: i, disabled: o, readOnly: a, rules: d, shouldUnregister: p, label: c, slotProps: e, required: u, is24HourMode: P, ...f } = l;
   return /* @__PURE__ */ r(
-    f,
+    h,
     {
       control: t,
       name: n,
-      defaultValue: a,
+      defaultValue: i,
       disabled: o,
       rules: d,
       shouldUnregister: p,
-      render: ({ field: m }) => /* @__PURE__ */ s(g, { ...P, children: [
-        /* @__PURE__ */ s(h, { ...e?.formLabelProps ?? {}, children: [
+      render: ({ field: m }) => /* @__PURE__ */ s(F, { ...f, children: [
+        /* @__PURE__ */ s(b, { ...e?.formLabelProps ?? {}, children: [
           c,
           u && /* @__PURE__ */ r("span", { className: "text-danger text-sm leading-4", children: "*" })
         ] }),
-        /* @__PURE__ */ r(F, { ...e?.formControlProps ?? {}, children: /* @__PURE__ */ r(x, { ...e?.datepickerProps ?? {}, time: m.value, onTimeChange: m.onChange, disabled: o || i }) }),
-        /* @__PURE__ */ r(b, { ...e?.formMessageProps ?? {} })
+        /* @__PURE__ */ r(x, { ...e?.formControlProps ?? {}, children: /* @__PURE__ */ r(
+          g,
+          {
+            ...e?.timepickerProps ?? {},
+            time: m.value,
+            onTimeChange: m.onChange,
+            disabled: o || a,
+            is24HourMode: P
+          }
+        ) }),
+        /* @__PURE__ */ r(C, { ...e?.formMessageProps ?? {} })
       ] })
     }
   );

package/dist/formtimepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"formtimepicker.es.js","sources":["../src/components/form-time-picker/FormTimePicker.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 { TimePicker, TimePickerProps } from \"../date-picker/TimePicker\";\r\n\r\ntype FormTimePickerProps<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    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?: TimePickerProps;\r\n    };\r\n  };\r\n\r\nconst FormTimePicker = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormTimePickerProps<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=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <TimePicker {...(slotProps?.datepickerProps ?? {})} time={field.value} onTimeChange={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 { FormTimePicker, type FormTimePickerProps };\r\n"],"names":["FormTimePicker","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","TimePicker","FormMessage"],"mappings":";;;AAwBA,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,iCAAgC,UAAA,IAAA,CAAC;AAAA,QAAA,GAChE;AAAA,QACA,gBAAAA,EAACM,KAAa,GAAIT,GAAW,oBAAoB,IAC/C,UAAA,gBAAAG,EAACO,GAAA,EAAY,GAAIV,GAAW,mBAAmB,CAAA,GAAK,MAAMK,EAAM,OAAO,cAAcA,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":"formtimepicker.es.js","sources":["../src/components/form-time-picker/FormTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\n\r\nimport { TimePicker, TimePickerProps } from \"../date-picker/TimePicker\";\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\n\r\ntype FormTimePickerProps<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    readOnly?: boolean;\r\n    is24HourMode?: 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      timepickerProps?: Partial<TimePickerProps>;\r\n    };\r\n  };\r\n\r\nconst FormTimePicker = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormTimePickerProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, is24HourMode, ...formItemProps } =\r\n    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=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <TimePicker\r\n                {...(slotProps?.timepickerProps ?? {})}\r\n                time={field.value}\r\n                onTimeChange={field.onChange}\r\n                disabled={disabled || readOnly}\r\n                is24HourMode={is24HourMode}\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 { FormTimePicker, type FormTimePickerProps };\r\n"],"names":["FormTimePicker","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","is24HourMode","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","TimePicker","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,cAAAC,GAAc,GAAGC,MAC7HZ;AAEF,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,iCAAgC,UAAA,IAAA,CAAC;AAAA,QAAA,GAChE;AAAA,0BACCM,GAAA,EAAa,GAAIV,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAI;AAAA,UAACO;AAAA,UAAA;AAAA,YACE,GAAIX,GAAW,mBAAmB,CAAA;AAAA,YACnC,MAAMM,EAAM;AAAA,YACZ,cAAcA,EAAM;AAAA,YACpB,UAAUX,KAAYC;AAAA,YACtB,cAAAM;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,0BACCU,GAAA,EAAa,GAAIZ,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/mobiletimepicker.es.js

@@ -1,42 +1,49 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { VisuallyHidden as c } from "@radix-ui/react-visually-hidden";
-import { cn as m } from "./utils.es.js";
-import { Button as b } from "./button.es.js";
-import { TimePickerContent as u } from "./timepickercontent.es.js";
-import { SwipableDrawer as f, SwipableDrawerContent as h, SwipableDrawerHeader as g, SwipableDrawerTitle as w, SwipableDrawerDescription as x } from "./swipabledrawer.es.js";
-const j = ({
-  time: e,
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
+import { cn as b } from "./utils.es.js";
+import { Button as f } from "./button.es.js";
+import { TimePickerContent as h } from "./timepickercontent.es.js";
+import { SwipableDrawer as g, SwipableDrawerContent as w, SwipableDrawerHeader as x, SwipableDrawerTitle as S, SwipableDrawerDescription as y } from "./swipabledrawer.es.js";
+const c = (r, n) => {
+  const o = r.minute.toString().padStart(2, "0");
+  if (n)
+    return `${(r.ampm ? r.hour % 12 + (r.ampm === "PM" ? 12 : 0) : r.hour).toString().padStart(2, "0")} : ${o}`;
+  const a = r.ampm ? r.hour % 12 + (r.ampm === "PM" ? 12 : 0) : r.hour, e = a % 12 || 12, i = r.ampm ?? (a >= 12 ? "PM" : "AM");
+  return `${e.toString().padStart(2, "0")} : ${o} ${i}`;
+}, j = ({
+  time: r,
   onTimeChange: n,
-  className: i,
-  slotsProps: l,
-  placeholder: d = "Pick a time",
+  className: o,
+  slotsProps: a,
+  is24HourMode: e = !1,
+  placeholder: i = "Pick a time",
   ...s
 }) => {
-  const [o, a] = p(!1);
-  return /* @__PURE__ */ t(f, { open: o, onOpenChange: a, children: [
-    /* @__PURE__ */ r(
-      b,
+  const [l, d] = m(!1);
+  return /* @__PURE__ */ p(g, { open: l, onOpenChange: d, children: [
+    /* @__PURE__ */ t(
+      f,
       {
         type: "button",
         variant: "text",
-        className: m(
+        className: b(
           "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
-          i
+          o
         ),
-        "data-placeholder": e ? void 0 : "",
-        onClick: () => a(!0),
-        "aria-label": e?.hour ? `Selected time: ${e.hour}:${e.minute} ${e.ampm}` : d,
+        "data-placeholder": r ? void 0 : "",
+        onClick: () => d(!0),
+        "aria-label": r ? `Selected time: ${c(r, e)}` : i,
         ...s,
-        children: `${e?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${e?.minute?.toString()?.padStart(2, "0") ?? "--"} ${e?.ampm ?? "--"}`
+        children: r ? c(r, e) : "-- : --"
       }
     ),
-    /* @__PURE__ */ t(h, { children: [
-      /* @__PURE__ */ r(g, { className: "p-0", children: /* @__PURE__ */ t(c, { children: [
-        /* @__PURE__ */ r(w, { className: "text-primary text-lg font-bold text-start", children: " " }),
-        /* @__PURE__ */ r(x, { children: " " })
+    /* @__PURE__ */ p(w, { children: [
+      /* @__PURE__ */ t(x, { className: "p-0", children: /* @__PURE__ */ p(u, { children: [
+        /* @__PURE__ */ t(S, { className: "text-primary text-lg font-bold text-start", children: " " }),
+        /* @__PURE__ */ t(y, { children: " " })
       ] }) }),
-      /* @__PURE__ */ r(u, { isOpen: o, onTimeChange: n, time: e, slotsProps: l })
+      /* @__PURE__ */ t(h, { isOpen: l, is24HourMode: e, onTimeChange: n, time: r, slotsProps: a })
     ] })
   ] });
 };

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        type=\"button\"\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled: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=\"p-0\">\r\n          <VisuallyHidden>\r\n            <SwipableDrawerTitle className=\"text-primary text-lg font-bold 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,MAAK;AAAA,QACL,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,OAC9B,UAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAoB,WAAU,6CAA4C,UAAA,KAAC;AAAA,QAC5E,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\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        type=\"button\"\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled: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      >\r\n        {time ? formatTimeLabel(time, is24HourMode) : \"-- : --\"}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"p-0\">\r\n          <VisuallyHidden>\r\n            <SwipableDrawerTitle className=\"text-primary text-lg font-bold 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,MAAK;AAAA,QACL,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,QAEH,UAAAX,IAAOD,EAAgBC,GAAMC,CAAY,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAE/CmB,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAqB,WAAU,OAC9B,UAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAoB,WAAU,6CAA4C,UAAA,KAAC;AAAA,QAC5E,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;"}

package/dist/timepickercontent.es.js

@@ -1,66 +1,87 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import { useState as S, useRef as m, useEffect as g } from "react";
-import { cn as u } from "./utils.es.js";
-const w = () => ({ hour: (/* @__PURE__ */ new Date()).getHours() % 12, minute: (/* @__PURE__ */ new Date()).getMinutes(), ampm: (/* @__PURE__ */ new Date()).getHours() < 12 ? "AM" : "PM" }), k = ({ isOpen: c, time: a, onTimeChange: i, slotsProps: d }) => {
-  const [r, s] = S(a ?? w()), e = m(r), h = m(null), x = m(null), n = 32, l = 8, b = (t) => {
-    h?.current?.scrollTo({
-      top: t * (n + l),
+import { jsxs as M, jsx as c } from "react/jsx-runtime";
+import { useState as P, useRef as d, useEffect as T } from "react";
+import { cn as i } from "./utils.es.js";
+const k = () => {
+  const e = /* @__PURE__ */ new Date(), r = e.getHours();
+  return { hour: r % 12 || 12, minute: e.getMinutes(), ampm: r < 12 ? "AM" : "PM" };
+}, b = (e, r, n) => Math.min(Math.max(e, r), n), B = (e) => e ? { hour: 0, minute: 0 } : k(), x = (e, r) => {
+  if (!e)
+    return B(r);
+  const n = b(e.minute, 0, 59), s = e.ampm ? e.hour % 12 + (e.ampm === "PM" ? 12 : 0) : e.hour;
+  return r ? { hour: b(s, 0, 23), minute: n } : {
+    hour: s % 12 || 12,
+    minute: n,
+    ampm: e.ampm ?? (s >= 12 ? "PM" : "AM")
+  };
+}, z = ({ isOpen: e, time: r, is24HourMode: n = !1, onTimeChange: s, slotsProps: f }) => {
+  const [m, g] = P(() => x(r, n)), l = d(m), p = d(null), w = d(null), u = 32, a = 8, y = n ? Array.from({ length: 24 }, (t, o) => o) : Array.from({ length: 12 }, (t, o) => o + 1), v = (t) => {
+    p?.current?.scrollTo({
+      top: t * (u + a),
       behavior: "smooth"
     });
-  }, y = (t) => {
-    x?.current?.scrollTo({
-      top: t * (n + l),
+  }, S = (t) => {
+    w?.current?.scrollTo({
+      top: t * (u + a),
       behavior: "smooth"
     });
-  }, p = (t) => {
-    e.current = { ...r, hour: t }, s(e.current), i(e.current);
-  }, v = (t) => {
-    e.current = { ...r, minute: t }, s(e.current), i(e.current);
-  }, M = (t) => {
-    e.current = { ...r, ampm: t }, s(e.current), i(e.current);
+  }, h = (t) => {
+    const o = x(t, n);
+    l.current = o, g(o), s(o);
+  }, N = (t) => {
+    h({ ...l.current, hour: t });
+  }, A = (t) => {
+    h({ ...l.current, minute: t });
+  }, j = (t) => {
+    h({ ...l.current, ampm: t });
   };
-  return g(() => {
-    c && s(a ?? w());
-  }, [c, a]), g(() => {
-    c && setTimeout(() => {
-      b(e.current.hour - 1), y(e.current.minute);
+  return T(() => {
+    if (e) {
+      const t = x(r, n);
+      l.current = t, g(t);
+    }
+  }, [e, r, n]), T(() => {
+    if (!e)
+      return;
+    const t = window.setTimeout(() => {
+      v(n ? l.current.hour : l.current.hour - 1), S(l.current.minute);
     });
-  }, [c]), /* @__PURE__ */ N("div", { ...d?.content ?? {}, className: u("py-2 px-0 h-52 w-full flex justify-center gap-1", d?.content?.className), children: [
-    /* @__PURE__ */ o("div", { className: "w-24 px-2 h-full relative overflow-auto thin-scrollbar", ref: h, children: Array.from({ length: 12 }, (t, f) => f).map((t) => /* @__PURE__ */ o(
+    return () => window.clearTimeout(t);
+  }, [e, n]), /* @__PURE__ */ M("div", { ...f?.content ?? {}, className: i("py-2 px-0 h-52 w-full flex justify-center gap-1", f?.content?.className), children: [
+    /* @__PURE__ */ c("div", { className: "w-24 px-2 h-full relative overflow-auto thin-scrollbar", ref: p, children: y.map((t) => /* @__PURE__ */ c(
       "button",
       {
-        style: { height: n, marginBottom: l },
-        className: u(
+        style: { height: u, marginBottom: a },
+        className: i(
           "w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400",
-          t + 1 === r.hour && "bg-secondary"
+          t === m.hour && "bg-secondary"
         ),
-        onClick: () => p(t + 1),
-        children: (t + 1).toString().padStart(2, "0")
+        onClick: () => N(t),
+        children: t.toString().padStart(2, "0")
       },
-      t + 1
+      t
     )) }),
-    /* @__PURE__ */ o("div", { className: "h-full w-24 px-2 relative overflow-auto thin-scrollbar", ref: x, children: Array.from({ length: 60 }, (t, f) => f).map((t) => /* @__PURE__ */ o(
+    /* @__PURE__ */ c("div", { className: "h-full w-24 px-2 relative overflow-auto thin-scrollbar", ref: w, children: Array.from({ length: 60 }, (t, o) => o).map((t) => /* @__PURE__ */ c(
       "button",
       {
-        style: { height: n, marginBottom: l },
-        className: u(
+        style: { height: u, marginBottom: a },
+        className: i(
           "w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400",
-          t === r.minute && "bg-secondary"
+          t === m.minute && "bg-secondary"
         ),
-        onClick: () => v(t),
+        onClick: () => A(t),
         children: t.toString().padStart(2, "0")
       },
       t
     )) }),
-    /* @__PURE__ */ o("div", { className: "h-full w-24 px-2 relative overflow-auto thin-scrollbar", children: ["AM", "PM"].map((t) => /* @__PURE__ */ o(
+    !n && /* @__PURE__ */ c("div", { className: "h-full w-24 px-2 relative overflow-auto thin-scrollbar", children: ["AM", "PM"].map((t) => /* @__PURE__ */ c(
       "button",
       {
-        style: { height: n, marginBottom: l },
-        className: u(
+        style: { height: u, marginBottom: a },
+        className: i(
           "w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400",
-          t === r.ampm && "bg-secondary"
+          t === m.ampm && "bg-secondary"
         ),
-        onClick: () => M(t),
+        onClick: () => j(t),
         children: t
       },
       t
@@ -68,6 +89,6 @@ const w = () => ({ hour: (/* @__PURE__ */ new Date()).getHours() % 12, minute: (
   ] });
 };
 export {
-  k as TimePickerContent
+  z as TimePickerContent
 };
 //# sourceMappingURL=timepickercontent.es.js.map

package/dist/timepickercontent.es.js.map

@@ -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 {...(slotsProps?.content ?? {})} className={cn(\"py-2 px-0 h-52 w-full flex justify-center gap-1\", slotsProps?.content?.className)}>\r\n      {/* Hour Selector */}\r\n      <div className=\"w-24 px-2 h-full relative overflow-auto 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              \"w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400\",\r\n              hour + 1 === selectedtime.hour && \"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=\"h-full w-24 px-2 relative overflow-auto 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              \"w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400\",\r\n              minute === selectedtime.minute && \"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=\"h-full w-24 px-2 relative overflow-auto thin-scrollbar\">\r\n        {[\"AM\", \"PM\"].map(ampm => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400\",\r\n              ampm === selectedtime.ampm && \"bg-secondary\",\r\n            )}\r\n            key={ampm}\r\n            onClick={() => handleSetAMPM(ampm as \"AM\" | \"PM\")}\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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"}
+{"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 {...(slotsProps?.content ?? {})} className={cn(\"py-2 px-0 h-52 w-full flex justify-center gap-1\", slotsProps?.content?.className)}>\r\n      <div className=\"w-24 px-2 h-full relative overflow-auto 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              \"w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400\",\r\n              hour === selectedTime.hour && \"bg-secondary\",\r\n            )}\r\n            key={hour}\r\n            onClick={() => handleSetHour(hour)}\r\n          >\r\n            {hour.toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"h-full w-24 px-2 relative overflow-auto 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              \"w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400\",\r\n              minute === selectedTime.minute && \"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      {!is24HourMode && (\r\n        <div className=\"h-full w-24 px-2 relative overflow-auto thin-scrollbar\">\r\n          {[\"AM\", \"PM\"].map(ampm => (\r\n            <button\r\n              style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n              className={cn(\r\n                \"w-full flex justify-center items-center rounded-full text-xs font-bold text-text-400\",\r\n                ampm === selectedTime.ampm && \"bg-secondary\",\r\n              )}\r\n              key={ampm}\r\n              onClick={() => handleSetAMPM(ampm as \"AM\" | \"PM\")}\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,EAAC,OAAA,EAAK,GAAIxB,GAAY,WAAW,CAAA,GAAK,WAAWyB,EAAG,mDAAmDzB,GAAY,SAAS,SAAS,GACnI,UAAA;AAAA,IAAA,gBAAA0B,EAAC,SAAI,WAAU,0DAAyD,KAAKpB,GAC1E,UAAAI,EAAY,IAAI,CAAAxB,MACf,gBAAAwC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,QAAQlB,GAAY,cAAcC,EAAA;AAAA,QAC3C,WAAWgB;AAAA,UACT;AAAA,UACAvC,MAASe,EAAa,QAAQ;AAAA,QAAA;AAAA,QAGhC,SAAS,MAAMiB,EAAchC,CAAI;AAAA,QAEhC,UAAAA,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG;AAAA,MAAA;AAAA,MAH3BA;AAAA,IAAA,CAKR,GACH;AAAA,sBAEC,OAAA,EAAI,WAAU,0DAAyD,KAAKqB,GAC1E,gBAAM,KAAK,EAAE,QAAQ,GAAA,GAAM,CAACI,GAAGgB,MAAMA,CAAC,EAAE,IAAI,CAAAhC,MAC3C,gBAAA+B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,QAAQlB,GAAY,cAAcC,EAAA;AAAA,QAC3C,WAAWgB;AAAA,UACT;AAAA,UACA9B,MAAWM,EAAa,UAAU;AAAA,QAAA;AAAA,QAGpC,SAAS,MAAMkB,EAAgBxB,CAAM;AAAA,QAEpC,UAAAA,EAAO,SAAA,EAAW,SAAS,GAAG,GAAG;AAAA,MAAA;AAAA,MAH7BA;AAAA,IAAA,CAKR,GACH;AAAA,IAEC,CAACH,KACA,gBAAAkC,EAAC,OAAA,EAAI,WAAU,0DACZ,UAAA,CAAC,MAAM,IAAI,EAAE,IAAI,CAAAL,MAChB,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,QAAQlB,GAAY,cAAcC,EAAA;AAAA,QAC3C,WAAWgB;AAAA,UACT;AAAA,UACAJ,MAASpB,EAAa,QAAQ;AAAA,QAAA;AAAA,QAGhC,SAAS,MAAMmB,EAAcC,CAAmB;AAAA,QAE/C,UAAAA;AAAA,MAAA;AAAA,MAHIA;AAAA,IAAA,CAKR,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@trsys-tech/matrix-library",
   "description": "MatrixUI Library",
   "private": false,
-  "version": "0.6.3-canary-3",
+  "version": "0.6.3-canary-5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",