@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.121

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -1,95 +1,153 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { useId as N, useState as y, useRef as E, useCallback as O, useEffect as I } from "react";
-import { cn as m } from "../../../../utils/index.js";
-import { timePickerVariants as L } from "../../TimePicker.variants.js";
-import { WrapperList as j } from "../WrapperList/WrapperList.js";
-import { C as P } from "../../../../chevron-down-MZvQoT2F.js";
-import { useTimePickerContext as R } from "../../contexts/time-picker.hook.js";
-const V = ({
-  name: d,
-  label: i,
-  required: p,
-  scrollBehavior: f,
-  className: u,
-  listClassName: x,
-  listItemClassName: h,
-  listItemButtonClassName: w
-}) => {
-  const b = N(), [n, r] = y(!1), l = E(null), { format: g, formattedTime: c } = R(), s = d ?? `time-${b}`, k = O(() => r((e) => !e), []);
-  return I(() => {
-    const e = new AbortController(), v = (o) => {
-      o.key === "Escape" && r(!1);
-    }, C = (o) => {
-      l.current?.contains(o.target) || r(!1);
+import { t as T } from "../../../../utils-DnIJruo0.js";
+import { useClickOutside as te } from "../../../../hooks/useClickOutside.js";
+import { t as re } from "../../../../chevron-down-BODx0Q7h.js";
+import { Typography as M } from "../../../Typography/Typography.js";
+import { parseTimeString as V } from "../../utils/index.js";
+import { useTimePickerContext as ae } from "../../contexts/time-picker.hook.js";
+import { timePickerVariants as oe } from "../../TimePicker.variants.js";
+import { WrapperList as ne } from "../WrapperList/WrapperList.js";
+import { useCallback as ie, useEffect as F, useId as le, useRef as E, useState as P } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+var xe = ({ ariaLabel: g, id: W, name: j, label: v, isRequired: y, scrollBehavior: B, className: H, listClassName: R, listItemClassName: K, listItemButtonClassName: U, disabled: c, mode: S = "select", showList: k = !0, error: q, placeholder: z }) => {
+  const G = le(), [o, n] = P(!1), h = E(!1), I = E(null), A = E(null), { format: x, formattedTime: p, setTimeDirectly: D, setIsTyping: w } = ae(), i = W ?? `time-${G}`, $ = `${i}-label`, O = `${i}-listbox`, C = `${i}-error`, [N, b] = P(p), [J, l] = P(), r = q || J;
+  F(() => {
+    h.current || (b(p), l(void 0));
+  }, [p]);
+  const Q = () => {
+    c || n((t) => !t);
+  }, X = () => {
+    !c && k && n(!0), l(void 0);
+  }, Y = (t) => {
+    t.target !== A.current && (h.current = !1, w(!1));
+  }, Z = (t) => {
+    if (I.current?.contains(t.relatedTarget)) return;
+    h.current = !1, w(!1), n(!1);
+    const a = t.currentTarget.value.trim();
+    if (a === "") {
+      l(void 0);
+      return;
+    }
+    const e = V(a, x);
+    if (e) {
+      l(void 0), D(e);
+      const s = e.getHours(), u = e.getMinutes().toString().padStart(2, "0");
+      if (x === "24") b(`${s.toString().padStart(2, "0")}:${u}`);
+      else {
+        const m = s % 12 || 12;
+        b(`${m}:${u} ${s >= 12 ? "PM" : "AM"}`);
+      }
+    } else l("Invalid time");
+  }, _ = (t) => {
+    const a = t.target.value;
+    let e = "";
+    h.current = !0, w(!0);
+    const s = a.length < N.length;
+    if (x === "12") {
+      const m = a.replace(/[^0-9:apmAPM\s]/g, "").replace(/[apm]/gi, (ee) => ee.toUpperCase());
+      m.match(/^(\d{0,2}):?(\d{0,2})\s?(A|AM|P|PM)?$/i) || m === "" ? (e = m.slice(0, 8), !s && /^\d{2}$/.test(e) && (e = e + ":")) : e = N;
+    } else
+      e = a.replace(/[^0-9:]/g, "").replace(/:+/g, ":").slice(0, 5), !s && /^\d{2}$/.test(e) && (e = e + ":");
+    b(e), l(void 0);
+    const u = V(e, x);
+    u && D(u);
+  }, L = ie(() => {
+    n(!1);
+  }, []);
+  return te(I, L), F(() => {
+    const t = new AbortController(), a = (e) => {
+      e.key === "Escape" && n(!1);
     };
-    return document.addEventListener("mousedown", C, {
-      signal: e.signal
-    }), document.addEventListener("keydown", v, {
-      signal: e.signal
-    }), () => {
-      e.abort();
+    return document.addEventListener("keydown", a, { signal: t.signal }), () => {
+      t.abort();
     };
-  }, []), /* @__PURE__ */ t(
-    "div",
-    {
-      ref: l,
-      className: m(
-        "w-max text-slate-800 text-sm flex flex-col gap-2",
-        g === "12" ? "w-[208px]" : "w-[140px]"
-      ),
-      children: [
-        i ? /* @__PURE__ */ t("label", { htmlFor: s, className: "text-slate-500 font-medium", children: [
-          i,
+  }, []), /* @__PURE__ */ f("div", {
+    ref: I,
+    onMouseDown: S === "input" ? Y : void 0,
+    className: T("w-full", "text-slate-800", "text-sm", "flex", "flex-col", "gap-2"),
+    children: [
+      v ? /* @__PURE__ */ f(M, {
+        component: "label",
+        variant: "labelLarge",
+        id: $,
+        htmlFor: i,
+        className: "font-medium",
+        children: [
+          v,
           " ",
-          p && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
-        ] }) : null,
-        /* @__PURE__ */ t("div", { className: "relative", children: [
-          /* @__PURE__ */ t(
-            "button",
-            {
-              "aria-label": s,
-              "aria-haspopup": "listbox",
-              "aria-expanded": "true",
-              "aria-controls": "time-options",
-              className: m(L({ className: u })),
-              "data-open": n,
-              onClick: k,
-              children: [
-                c,
-                /* @__PURE__ */ a(
-                  P,
-                  {
-                    className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
-                    "data-open": n
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ a(
-            j,
-            {
-              isOpen: n,
-              scrollBehavior: f,
-              listClassName: x,
-              listItemClassName: h,
-              listItemButtonClassName: w
-            }
-          )
-        ] }),
-        /* @__PURE__ */ a(
-          "input",
-          {
-            type: "hidden",
-            name: s,
-            value: c,
-            className: "hidden"
-          }
-        )
-      ]
-    }
-  );
+          y && /* @__PURE__ */ d(M, {
+            component: "span",
+            "aria-hidden": "true",
+            className: "text-red-600 dark:text-red-500 text-sm font-normal",
+            children: "*"
+          })
+        ]
+      }) : null,
+      /* @__PURE__ */ f("div", {
+        className: "relative",
+        children: [/* @__PURE__ */ f("div", {
+          className: "flex flex-col gap-1",
+          children: [S === "select" ? /* @__PURE__ */ f("button", {
+            type: "button",
+            id: i,
+            "aria-label": g,
+            "aria-labelledby": !g && v ? $ : void 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": o,
+            "aria-controls": o && k ? O : void 0,
+            "aria-invalid": !!r || void 0,
+            "aria-describedby": r ? C : void 0,
+            "aria-required": y || void 0,
+            className: T(oe({ className: H }), c && "opacity-50 cursor-not-allowed"),
+            "data-open": o,
+            onClick: Q,
+            disabled: c,
+            children: [p, /* @__PURE__ */ d(re, {
+              className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
+              "data-open": o
+            })]
+          }) : /* @__PURE__ */ d("input", {
+            ref: A,
+            type: "text",
+            id: i,
+            "aria-label": g,
+            "aria-labelledby": !g && v ? $ : void 0,
+            "aria-invalid": !!r || void 0,
+            "aria-describedby": r ? C : void 0,
+            "aria-required": y || void 0,
+            value: N,
+            onChange: _,
+            onFocus: X,
+            onBlur: Z,
+            disabled: c,
+            "data-error": !!r,
+            "data-open": o,
+            placeholder: z,
+            className: T("w-full", "h-10", "px-2.5", "text-sm", "rounded", "border", "border-gray-300", "bg-white", "text-slate-800", "transition-all", "placeholder:text-slate-400", "focus-visible:outline-none", "data-[open=true]:ring-1", "data-[open=true]:ring-aurora-500", "dark:bg-metal-800", "dark:border-metal-700", "dark:text-white", "dark:placeholder:text-metal-300", "dark:data-[open=true]:ring-aurora-500", "disabled:cursor-not-allowed", "disabled:bg-gray-50", "disabled:text-slate-500", "dark:disabled:bg-metal-900", "dark:disabled:text-metal-400", { "border-red-600 data-[open=true]:border-red-600 data-[open=true]:ring-transparent dark:border-red-500": r })
+          }), r && /* @__PURE__ */ d(M, {
+            component: "span",
+            id: C,
+            className: "text-red-600 dark:text-red-500 text-xs",
+            children: r
+          })]
+        }), k && /* @__PURE__ */ d(ne, {
+          id: O,
+          isOpen: o,
+          scrollBehavior: B,
+          listClassName: R,
+          listItemClassName: K,
+          listItemButtonClassName: U,
+          onClose: () => n(!1)
+        })]
+      }),
+      /* @__PURE__ */ d("input", {
+        type: "hidden",
+        name: j,
+        value: p,
+        className: "hidden"
+      })
+    ]
+  });
 };
 export {
-  V as Wrapper
+  xe as Wrapper
 };

package/dist/components/TimePicker/components/WrapperList/WrapperList.js

@@ -1,51 +1,41 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import { cn as s } from "../../../../utils/index.js";
-import { getHours as d, getMinutes as M } from "../../utils/index.js";
-import { HoursList as x } from "../HoursList/HoursList.js";
-import { MeridianList as L } from "../MeridianList/MeridianList.js";
-import { MinutesList as g } from "../MinutesList/MinutesList.js";
-import { wrapperVariants as H } from "./WrapperList.variants.js";
-import { useTimePickerContext as j } from "../../contexts/time-picker.hook.js";
-const v = ({
-  isOpen: m,
-  scrollBehavior: p,
-  listClassName: o,
-  listItemClassName: i,
-  listItemButtonClassName: t
-}) => {
-  const { time: r } = j(), u = n(() => d(r), [r]), f = n(() => M(r), [r]);
-  return m ? /* @__PURE__ */ c("div", { role: "group", className: s(H()), children: [
-    /* @__PURE__ */ e(
-      x,
-      {
-        hours: u,
-        scrollBehavior: p,
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    ),
-    /* @__PURE__ */ e(
-      g,
-      {
-        minutes: f,
-        scrollBehavior: p,
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    ),
-    /* @__PURE__ */ e(
-      L,
-      {
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    )
-  ] }) : null;
+import { t as a } from "../../../../utils-DnIJruo0.js";
+import { getHours as s, getMinutes as x } from "../../utils/index.js";
+import { useTimePickerContext as g } from "../../contexts/time-picker.hook.js";
+import { HoursList as b } from "../HoursList/HoursList.js";
+import { MeridianList as h } from "../MeridianList/MeridianList.js";
+import { MinutesList as k } from "../MinutesList/MinutesList.js";
+import { jsx as i, jsxs as L } from "react/jsx-runtime";
+var T = ({ id: d, isOpen: p, scrollBehavior: t, listClassName: r, listItemClassName: o, listItemButtonClassName: e, onClose: m }) => {
+  const { time: n, format: u } = g(), f = s(n), c = x(n);
+  return p ? /* @__PURE__ */ L("div", {
+    id: d,
+    role: "group",
+    className: a("flex", "gap-1.5", "p-2", "rounded-md", "shadow", "w-max", "max-h-54", "absolute", "bg-white", "z-20", "animate-in", "fade-in-0", "zoom-in-95", "dark:bg-metal-800", "dark:border", "dark:border-metal-700", "mt-1"),
+    children: [
+      /* @__PURE__ */ i(b, {
+        hours: f,
+        scrollBehavior: t,
+        listClassName: r,
+        listItemClassName: o,
+        listItemButtonClassName: e
+      }),
+      /* @__PURE__ */ i(k, {
+        minutes: c,
+        scrollBehavior: t,
+        listClassName: r,
+        listItemClassName: o,
+        listItemButtonClassName: e,
+        onClose: u === "24" ? m : void 0
+      }),
+      /* @__PURE__ */ i(h, {
+        listClassName: r,
+        listItemClassName: o,
+        listItemButtonClassName: e,
+        onClose: m
+      })
+    ]
+  }) : null;
 };
 export {
-  v as WrapperList
+  T as WrapperList
 };

package/dist/components/TimePicker/components/index.js

@@ -1,4 +1,4 @@
-import { WrapperList as e } from "./WrapperList/WrapperList.js";
+import { WrapperList as p } from "./WrapperList/WrapperList.js";
 export {
-  e as WrapperList
+  p as WrapperList
 };

package/dist/components/TimePicker/contexts/index.js

@@ -1,8 +1,8 @@
-import { TimePickerContext as o } from "./time-picker.context.js";
-import { TimePickerProvider as t } from "./time-picker.provider.js";
-import { useTimePickerContext as x } from "./time-picker.hook.js";
+import { TimePickerContext as e } from "./time-picker.context.js";
+import { TimePickerProvider as o } from "./time-picker.provider.js";
+import { useTimePickerContext as t } from "./time-picker.hook.js";
 export {
-  o as TimePickerContext,
-  t as TimePickerProvider,
-  x as useTimePickerContext
+  e as TimePickerContext,
+  o as TimePickerProvider,
+  t as useTimePickerContext
 };

package/dist/components/TimePicker/contexts/time-picker.context.js

@@ -1,9 +1,10 @@
 import { createContext as e } from "react";
-const o = e({
-  time: /* @__PURE__ */ new Date(),
+var o = e({
+  time: void 0,
   format: "12",
   formattedTime: "",
   isAM: !1,
+  isTyping: !1,
   onSelectHour() {
     throw new Error("onSelectHour is not implemented");
   },
@@ -15,6 +16,12 @@ const o = e({
   },
   onSelectPM() {
     throw new Error("onSelectPM is not implemented");
+  },
+  setTimeDirectly() {
+    throw new Error("setTimeDirectly is not implemented");
+  },
+  setIsTyping() {
+    throw new Error("setIsTyping is not implemented");
   }
 });
 export {

package/dist/components/TimePicker/contexts/time-picker.hook.js

@@ -1,13 +1,10 @@
-import { useContext as t } from "react";
 import { TimePickerContext as r } from "./time-picker.context.js";
-const n = () => {
+import { useContext as t } from "react";
+var m = () => {
   const e = t(r);
-  if (!e)
-    throw new Error(
-      "useTimePickerContext must be used within a TimePickerProvider"
-    );
+  if (!e) throw new Error("useTimePickerContext must be used within a TimePickerProvider");
   return e;
 };
 export {
-  n as useTimePickerContext
+  m as useTimePickerContext
 };

package/dist/components/TimePicker/contexts/time-picker.provider.js

@@ -1,46 +1,59 @@
-import { jsx as S } from "react/jsx-runtime";
-import { useState as i, useMemo as T, useCallback as c, useEffect as d } from "react";
-import { getFormattedTime as P } from "../utils/index.js";
-import { TimePickerContext as p } from "./time-picker.context.js";
-const x = ({ children: m, time: u, format: a }) => {
-  const [n, l] = i(a), [t, r] = i(() => u ?? /* @__PURE__ */ new Date()), s = T(() => t.getHours() < 12, [t]), f = c(
-    (e) => {
-      const o = new Date(t);
-      n === "12" ? e === 12 ? o.setHours(s ? 0 : 12) : o.setHours(s ? e : e + 12) : o.setHours(e), r(o);
+import { getFormattedTime as g } from "../utils/index.js";
+import { TimePickerContext as v } from "./time-picker.context.js";
+import { useCallback as r, useEffect as H, useState as u } from "react";
+import { jsx as y } from "react/jsx-runtime";
+var h = ({ children: f, time: c, format: m, onChange: l }) => {
+  const [i, w] = u(m), [e, a] = u(() => c), [T, D] = u(!1), n = e ? e.getHours() < 12 : !0, o = r((t) => {
+    a(t), l?.(t);
+  }, [l]), S = r((t) => {
+    const s = e ? new Date(e) : /* @__PURE__ */ new Date();
+    i === "12" ? t === 12 ? s.setHours(n ? 0 : 12) : s.setHours(n ? t : t + 12) : s.setHours(t), e || s.setMinutes(0, 0, 0), o(s);
+  }, [
+    i,
+    n,
+    e,
+    o
+  ]), M = r((t) => {
+    const s = e ? new Date(e) : /* @__PURE__ */ new Date();
+    e || s.setHours(0, 0, 0, 0), s.setMinutes(t), o(s);
+  }, [e, o]), p = r(() => {
+    const t = e ? new Date(e) : /* @__PURE__ */ new Date(), s = t.getHours();
+    e ? n || t.setHours(s - 12) : t.setHours(0, 0, 0, 0), o(t);
+  }, [
+    n,
+    e,
+    o
+  ]), d = r(() => {
+    const t = e ? new Date(e) : /* @__PURE__ */ new Date(), s = t.getHours();
+    e ? n && t.setHours(s + 12) : t.setHours(12, 0, 0, 0), o(t);
+  }, [
+    n,
+    e,
+    o
+  ]), P = r((t) => {
+    o(t);
+  }, [o]);
+  return H(() => {
+    a(c);
+  }, [c]), H(() => {
+    w(m);
+  }, [m]), /* @__PURE__ */ y(v.Provider, {
+    value: {
+      time: e,
+      format: i,
+      formattedTime: e ? g(e, i) : "",
+      isAM: n,
+      isTyping: T,
+      onSelectHour: S,
+      onSelectMinute: M,
+      onSelectAM: p,
+      onSelectPM: d,
+      setTimeDirectly: P,
+      setIsTyping: D
     },
-    [n, s, t]
-  ), H = c(
-    (e) => {
-      const o = new Date(t);
-      o.setMinutes(e), r(o);
-    },
-    [t]
-  ), w = c(() => {
-    const e = new Date(t), o = e.getHours();
-    s || e.setHours(o - 12), r(e);
-  }, [s, t]), M = c(() => {
-    const e = new Date(t), o = e.getHours();
-    s && e.setHours(o + 12), r(e);
-  }, [s, t]);
-  return d(() => {
-    l(n);
-  }, [n]), /* @__PURE__ */ S(
-    p.Provider,
-    {
-      value: {
-        time: t,
-        format: n,
-        formattedTime: P(t, n),
-        isAM: s,
-        onSelectHour: f,
-        onSelectMinute: H,
-        onSelectAM: w,
-        onSelectPM: M
-      },
-      children: m
-    }
-  );
+    children: f
+  });
 };
 export {
-  x as TimePickerProvider
+  h as TimePickerProvider
 };

package/dist/components/TimePicker/utils/index.js

@@ -1,6 +1,29 @@
-const e = (t, r) => r === "12" ? `${t.getHours() % 12 || 12}:${t.getMinutes().toString().padStart(2, "0")} ${t.getHours() >= 12 ? "PM" : "AM"}` : `${t.getHours().toString().padStart(2, "0")}:${t.getMinutes().toString().padStart(2, "0")}`, n = (t) => t.getHours(), g = (t) => t.getMinutes();
+var i = (t, a) => a === "12" ? `${t.getHours() % 12 || 12}:${t.getMinutes().toString().padStart(2, "0")} ${t.getHours() >= 12 ? "PM" : "AM"}` : `${t.getHours().toString().padStart(2, "0")}:${t.getMinutes().toString().padStart(2, "0")}`, g = (t) => t?.getHours() ?? -1, c = (t) => t?.getMinutes() ?? -1, p = (t, a) => {
+  const u = t.trim().toUpperCase();
+  if (a === "12") {
+    const e = u.match(/^(\d{1,2}):(\d{1,2})\s*(AM|PM)?$/i);
+    if (e) {
+      let r = parseInt(e[1], 10);
+      const n = parseInt(e[2], 10), s = e[3]?.toUpperCase();
+      if (r < 1 || r > 12 || n < 0 || n > 59) return null;
+      s === "PM" && r !== 12 ? r += 12 : s === "AM" && r === 12 && (r = 0);
+      const o = /* @__PURE__ */ new Date();
+      return o.setHours(r, n, 0, 0), o;
+    }
+  } else {
+    const e = u.match(/^(\d{1,2}):(\d{1,2})$/);
+    if (e) {
+      const r = parseInt(e[1], 10), n = parseInt(e[2], 10);
+      if (r < 0 || r > 23 || n < 0 || n > 59) return null;
+      const s = /* @__PURE__ */ new Date();
+      return s.setHours(r, n, 0, 0), s;
+    }
+  }
+  return null;
+};
 export {
-  e as getFormattedTime,
-  n as getHours,
-  g as getMinutes
+  i as getFormattedTime,
+  g as getHours,
+  c as getMinutes,
+  p as parseTimeString
 };