@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

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

@@ -1,95 +1,142 @@
-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 I } from "../../../../utils-DHuiYnx1.js";
+import { t as X } from "../../../../chevron-down-DgssmYWu.js";
+import { Typography as N } from "../../../Typography/Typography.js";
+import { parseTimeString as S } from "../../utils/index.js";
+import { useTimePickerContext as Y } from "../../contexts/time-picker.hook.js";
+import { timePickerVariants as Z } from "../../TimePicker.variants.js";
+import { WrapperList as _ } from "../WrapperList/WrapperList.js";
+import { useCallback as u, useEffect as A, useId as ee, useRef as T, useState as $ } from "react";
+import { jsx as d, jsxs as m } from "react/jsx-runtime";
+var ce = ({ name: D, label: M, isRequired: O, scrollBehavior: R, className: V, listClassName: F, listItemClassName: W, listItemButtonClassName: j, disabled: n, mode: E = "select", showList: y = !0, error: B, placeholder: L }) => {
+  const H = ee(), [f, o] = $(!1), g = T(!1), w = T(null), P = T(null), { format: l, formattedTime: c, setTimeDirectly: h, setIsTyping: s } = Y(), x = D ?? `time-${H}`, [v, b] = $(c), [K, i] = $(), k = B || K;
+  A(() => {
+    g.current || (b(c), i(void 0));
+  }, [c]);
+  const U = u(() => {
+    n || o((t) => !t);
+  }, [n]), q = u(() => {
+    !n && y && o(!0), i(void 0);
+  }, [n, y]), z = u((t) => {
+    t.target !== P.current && (g.current = !1, s(!1));
+  }, [s]), G = u((t) => {
+    if (w.current?.contains(t.relatedTarget)) return;
+    g.current = !1, s(!1), o(!1);
+    const a = t.currentTarget.value.trim();
+    if (a === "") {
+      i(void 0);
+      return;
+    }
+    const e = S(a, l);
+    if (e) {
+      i(void 0), h(e);
+      const r = e.getHours(), p = e.getMinutes().toString().padStart(2, "0");
+      b(l === "24" ? `${r.toString().padStart(2, "0")}:${p}` : `${r % 12 || 12}:${p} ${r >= 12 ? "PM" : "AM"}`);
+    } else i("Invalid time");
+  }, [
+    l,
+    h,
+    s
+  ]), J = u((t) => {
+    const a = t.target.value;
+    let e = "";
+    g.current = !0, s(!0);
+    const r = a.length < v.length;
+    if (l === "12") {
+      const C = a.replace(/[^0-9:apmAPM\s]/g, "").replace(/[apm]/gi, (Q) => Q.toUpperCase());
+      C.match(/^(\d{0,2}):?(\d{0,2})\s?(A|AM|P|PM)?$/i) || C === "" ? (e = C.slice(0, 8), !r && /^\d{2}$/.test(e) && (e = e + ":")) : e = v;
+    } else
+      e = a.replace(/[^0-9:]/g, "").replace(/:+/g, ":").slice(0, 5), !r && /^\d{2}$/.test(e) && (e = e + ":");
+    b(e), i(void 0);
+    const p = S(e, l);
+    p && h(p);
+  }, [
+    l,
+    v,
+    h,
+    s
+  ]);
+  return A(() => {
+    const t = new AbortController(), a = (r) => {
+      r.key === "Escape" && o(!1);
+    }, e = (r) => {
+      w.current?.contains(r.target) || o(!1);
     };
-    return document.addEventListener("mousedown", C, {
-      signal: e.signal
-    }), document.addEventListener("keydown", v, {
-      signal: e.signal
-    }), () => {
-      e.abort();
+    return document.addEventListener("mousedown", e, { signal: t.signal }), 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__ */ m("div", {
+    ref: w,
+    onMouseDown: E === "input" ? z : void 0,
+    className: I("w-full", "text-slate-800", "text-sm", "flex", "flex-col", "gap-2"),
+    children: [
+      M ? /* @__PURE__ */ m(N, {
+        component: "label",
+        variant: "labelLarge",
+        htmlFor: x,
+        className: "font-medium",
+        children: [
+          M,
           " ",
-          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"
-          }
-        )
-      ]
-    }
-  );
+          O && /* @__PURE__ */ d(N, {
+            component: "span",
+            className: "text-red-600 dark:text-red-500 text-sm font-normal",
+            children: "*"
+          })
+        ]
+      }) : null,
+      /* @__PURE__ */ m("div", {
+        className: "relative",
+        children: [E === "select" ? /* @__PURE__ */ m("button", {
+          "aria-label": x,
+          "aria-haspopup": "listbox",
+          "aria-expanded": "true",
+          "aria-controls": "time-options",
+          className: I(Z({ className: V }), n && "opacity-50 cursor-not-allowed"),
+          "data-open": f,
+          onClick: U,
+          disabled: n,
+          children: [c, /* @__PURE__ */ d(X, {
+            className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
+            "data-open": f
+          })]
+        }) : /* @__PURE__ */ m("div", {
+          className: "flex flex-col gap-1",
+          children: [/* @__PURE__ */ d("input", {
+            ref: P,
+            type: "text",
+            "aria-label": x,
+            value: v,
+            onChange: J,
+            onFocus: q,
+            onBlur: G,
+            disabled: n,
+            "data-error": !!k,
+            "data-open": f,
+            placeholder: L,
+            className: I("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": k })
+          }), k && /* @__PURE__ */ d(N, {
+            component: "span",
+            className: "text-red-600 dark:text-red-500 text-xs",
+            children: k
+          })]
+        }), y && /* @__PURE__ */ d(_, {
+          isOpen: f,
+          scrollBehavior: R,
+          listClassName: F,
+          listItemClassName: W,
+          listItemButtonClassName: j,
+          onClose: () => o(!1)
+        })]
+      }),
+      /* @__PURE__ */ d("input", {
+        type: "hidden",
+        name: x,
+        value: c,
+        className: "hidden"
+      })
+    ]
+  });
 };
 export {
-  V as Wrapper
+  ce 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,
+import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { getHours as a, 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 M } from "../MeridianList/MeridianList.js";
+import { MinutesList as h } from "../MinutesList/MinutesList.js";
+import { useMemo as d } from "react";
+import { jsx as t, jsxs as k } from "react/jsx-runtime";
+var W = ({ isOpen: p, scrollBehavior: m, listClassName: o, listItemClassName: e, listItemButtonClassName: i, onClose: n }) => {
+  const { time: r, format: u } = g(), f = d(() => a(r), [r]), c = d(() => x(r), [r]);
+  return p ? /* @__PURE__ */ k("div", {
+    role: "group",
+    className: s("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__ */ t(b, {
+        hours: f,
+        scrollBehavior: m,
         listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    ),
-    /* @__PURE__ */ e(
-      g,
-      {
-        minutes: f,
-        scrollBehavior: p,
+        listItemClassName: e,
+        listItemButtonClassName: i
+      }),
+      /* @__PURE__ */ t(h, {
+        minutes: c,
+        scrollBehavior: m,
         listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    ),
-    /* @__PURE__ */ e(
-      L,
-      {
+        listItemClassName: e,
+        listItemButtonClassName: i,
+        onClose: u === "24" ? n : void 0
+      }),
+      /* @__PURE__ */ t(M, {
         listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    )
-  ] }) : null;
+        listItemClassName: e,
+        listItemButtonClassName: i,
+        onClose: n
+      })
+    ]
+  }) : null;
 };
 export {
-  v as WrapperList
+  W 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, useMemo as y, useState as u } from "react";
+import { jsx as k } from "react/jsx-runtime";
+var j = ({ children: f, time: c, format: m, onChange: l }) => {
+  const [i, w] = u(m), [e, a] = u(() => c), [T, D] = u(!1), n = y(() => e ? e.getHours() < 12 : !0, [e]), o = r((t) => {
+    a(t), l?.(t);
+  }, [l]), M = 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
+  ]), S = 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__ */ k(v.Provider, {
+    value: {
+      time: e,
+      format: i,
+      formattedTime: e ? g(e, i) : "",
+      isAM: n,
+      isTyping: T,
+      onSelectHour: M,
+      onSelectMinute: S,
+      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
+  j 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
 };