@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

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

@@ -1,151 +1,235 @@
-import { jsxs as $, jsx as k } from "react/jsx-runtime";
-import { c as he } from "../../../../compiler-runtime-DA41awpA.js";
-import { useId as xe, useState as te, useRef as re, useEffect as de } from "react";
-import { Typography as ae } from "../../../Typography/Typography.js";
-import { cn as le } from "../../../../utils/index.js";
-import { timePickerVariants as be } from "../../TimePicker.variants.js";
-import { parseTimeString as ce } from "../../utils/index.js";
-import { WrapperList as ve } from "../WrapperList/WrapperList.js";
-import { C as ye } from "../../../../chevron-down-BBFYYzZq.js";
-import { useTimePickerContext as we } from "../../contexts/time-picker.hook.js";
-const Re = (N) => {
-  const e = he.c(58), {
-    name: me,
-    label: E,
-    isRequired: j,
-    scrollBehavior: H,
-    className: q,
-    listClassName: K,
-    listItemClassName: U,
-    listItemButtonClassName: z,
-    disabled: r,
-    mode: se,
-    showList: ne,
-    error: pe,
-    placeholder: G
-  } = N, T = se === void 0 ? "select" : se, p = ne === void 0 ? !0 : ne, ue = xe(), [i, u] = te(!1), M = re(!1), J = re(null), oe = re(null), {
-    format: d,
-    formattedTime: a,
-    setTimeDirectly: f,
-    setIsTyping: o
-  } = we(), l = me ?? `time-${ue}`, [m, S] = te(a), [fe, g] = te(), h = pe || fe;
-  let _, L;
-  e[0] !== a ? (_ = () => {
-    M.current || (S(a), g(void 0));
-  }, L = [a], e[0] = a, e[1] = _, e[2] = L) : (_ = e[1], L = e[2]), de(_, L);
-  let P;
-  e[3] !== r ? (P = () => {
-    r || u(ke);
-  }, e[3] = r, e[4] = P) : P = e[4];
-  const Q = P;
-  let R;
-  e[5] !== r || e[6] !== p ? (R = () => {
-    !r && p && u(!0), g(void 0);
-  }, e[5] = r, e[6] = p, e[7] = R) : R = e[7];
-  const X = R;
-  let A;
-  e[8] !== o ? (A = (s) => {
-    s.target !== oe.current && (M.current = !1, o(!1));
-  }, e[8] = o, e[9] = A) : A = e[9];
-  const ge = A;
-  let D;
-  e[10] !== d || e[11] !== o || e[12] !== f ? (D = (s) => {
-    if (J.current?.contains(s.relatedTarget))
-      return;
-    M.current = !1, o(!1), u(!1);
-    const c = s.currentTarget.value.trim();
-    if (c === "") {
-      g(void 0);
-      return;
-    }
-    const t = ce(c, d);
-    if (t) {
-      g(void 0), f(t);
-      const n = t.getHours(), C = t.getMinutes().toString().padStart(2, "0");
-      if (d === "24")
-        S(`${n.toString().padStart(2, "0")}:${C}`);
-      else {
-        const I = n % 12 || 12, ie = n >= 12 ? "PM" : "AM";
-        S(`${I}:${C} ${ie}`);
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { useId as Y, useState as I, useRef as N, useEffect as A, useCallback as f } from "react";
+import { Typography as T } from "../../../Typography/Typography.js";
+import { cn as $ } from "../../../../utils/index.js";
+import { timePickerVariants as Z } from "../../TimePicker.variants.js";
+import { parseTimeString as D } from "../../utils/index.js";
+import { WrapperList as _ } from "../WrapperList/WrapperList.js";
+import { C as ee } from "../../../../chevron-down-BBFYYzZq.js";
+import { useTimePickerContext as te } from "../../contexts/time-picker.hook.js";
+const pe = ({
+  name: O,
+  label: M,
+  isRequired: R,
+  scrollBehavior: V,
+  className: F,
+  listClassName: W,
+  listItemClassName: j,
+  listItemButtonClassName: B,
+  disabled: n,
+  mode: E = "select",
+  showList: w = !0,
+  error: H,
+  placeholder: L
+}) => {
+  const K = Y(), [g, o] = I(!1), h = N(!1), C = N(null), P = N(null), { format: s, formattedTime: d, setTimeDirectly: x, setIsTyping: l } = te(), v = O ?? `time-${K}`, [b, k] = I(d), [U, i] = I(), y = H || U;
+  A(() => {
+    h.current || (k(d), i(void 0));
+  }, [d]);
+  const q = f(() => {
+    n || o((t) => !t);
+  }, [n]), z = f(() => {
+    !n && w && o(!0), i(void 0);
+  }, [n, w]), G = f(
+    (t) => {
+      t.target !== P.current && (h.current = !1, l(!1));
+    },
+    [l]
+  ), J = f(
+    (t) => {
+      if (C.current?.contains(t.relatedTarget))
+        return;
+      h.current = !1, l(!1), o(!1);
+      const a = t.currentTarget.value.trim();
+      if (a === "") {
+        i(void 0);
+        return;
       }
-    } else
-      g("Invalid time");
-  }, e[10] = d, e[11] = o, e[12] = f, e[13] = D) : D = e[13];
-  const Y = D;
-  let B;
-  e[14] !== d || e[15] !== m || e[16] !== o || e[17] !== f ? (B = (s) => {
-    const c = s.target.value;
-    let t;
-    M.current = !0, o(!0);
-    const n = c.length < m.length;
-    if (d === "12") {
-      const I = c.replace(/[^0-9:apmAPM\s]/g, "").replace(/[apm]/gi, Ne);
-      I.match(/^(\d{0,2}):?(\d{0,2})\s?(A|AM|P|PM)?$/i) || I === "" ? (t = I.slice(0, 8), !n && /^\d{2}$/.test(t) && (t = t + ":")) : t = m;
-    } else
-      t = c.replace(/[^0-9:]/g, "").replace(/:+/g, ":").slice(0, 5), !n && /^\d{2}$/.test(t) && (t = t + ":");
-    S(t), g(void 0);
-    const C = ce(t, d);
-    C && f(C);
-  }, e[14] = d, e[15] = m, e[16] = o, e[17] = f, e[18] = B) : B = e[18];
-  const Z = B;
-  let O, V;
-  e[19] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (O = () => {
-    const s = new AbortController(), c = (n) => {
-      n.key === "Escape" && u(!1);
-    }, t = (n) => {
-      J.current?.contains(n.target) || u(!1);
+      const e = D(a, s);
+      if (e) {
+        i(void 0), x(e);
+        const r = e.getHours(), p = e.getMinutes().toString().padStart(2, "0");
+        if (s === "24")
+          k(`${r.toString().padStart(2, "0")}:${p}`);
+        else {
+          const u = r % 12 || 12, S = r >= 12 ? "PM" : "AM";
+          k(`${u}:${p} ${S}`);
+        }
+      } else
+        i("Invalid time");
+    },
+    [s, x, l]
+  ), Q = f(
+    (t) => {
+      const a = t.target.value;
+      let e = "";
+      h.current = !0, l(!0);
+      const r = a.length < b.length;
+      if (s === "12") {
+        const u = a.replace(/[^0-9:apmAPM\s]/g, "").replace(/[apm]/gi, (X) => X.toUpperCase());
+        u.match(/^(\d{0,2}):?(\d{0,2})\s?(A|AM|P|PM)?$/i) || u === "" ? (e = u.slice(0, 8), !r && /^\d{2}$/.test(e) && (e = e + ":")) : e = b;
+      } else
+        e = a.replace(/[^0-9:]/g, "").replace(/:+/g, ":").slice(0, 5), !r && /^\d{2}$/.test(e) && (e = e + ":");
+      k(e), i(void 0);
+      const p = D(e, s);
+      p && x(p);
+    },
+    [s, b, x, l]
+  );
+  return A(() => {
+    const t = new AbortController(), a = (r) => {
+      r.key === "Escape" && o(!1);
+    }, e = (r) => {
+      C.current?.contains(r.target) || o(!1);
     };
-    return document.addEventListener("mousedown", t, {
-      signal: s.signal
-    }), document.addEventListener("keydown", c, {
-      signal: s.signal
+    return document.addEventListener("mousedown", e, {
+      signal: t.signal
+    }), document.addEventListener("keydown", a, {
+      signal: t.signal
     }), () => {
-      s.abort();
+      t.abort();
     };
-  }, V = [], e[19] = O, e[20] = V) : (O = e[19], V = e[20]), de(O, V);
-  const ee = T === "input" ? ge : void 0;
-  let F;
-  e[21] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (F = le("w-full", "text-slate-800", "text-sm", "flex", "flex-col", "gap-2"), e[21] = F) : F = e[21];
-  let x;
-  e[22] !== j || e[23] !== E || e[24] !== l ? (x = E ? /* @__PURE__ */ $(ae, { component: "label", variant: "labelLarge", htmlFor: l, className: "font-medium", children: [
-    E,
-    " ",
-    j && /* @__PURE__ */ k(ae, { component: "span", className: "text-red-600 dark:text-red-500 text-sm font-normal", children: "*" })
-  ] }) : null, e[22] = j, e[23] = E, e[24] = l, e[25] = x) : x = e[25];
-  let b;
-  e[26] !== q || e[27] !== r || e[28] !== h || e[29] !== a || e[30] !== Y || e[31] !== Z || e[32] !== X || e[33] !== Q || e[34] !== m || e[35] !== i || e[36] !== l || e[37] !== T || e[38] !== G ? (b = T === "select" ? /* @__PURE__ */ $("button", { "aria-label": l, "aria-haspopup": "listbox", "aria-expanded": "true", "aria-controls": "time-options", className: le(be({
-    className: q
-  }), r && "opacity-50 cursor-not-allowed"), "data-open": i, onClick: Q, disabled: r, children: [
-    a,
-    /* @__PURE__ */ k(ye, { className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180", "data-open": i })
-  ] }) : /* @__PURE__ */ $("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ k("input", { ref: oe, type: "text", "aria-label": l, value: m, onChange: Z, onFocus: X, onBlur: Y, disabled: r, "data-error": !!h, "data-open": i, placeholder: G, className: le("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": h
-    }) }),
-    h && /* @__PURE__ */ k(ae, { component: "span", className: "text-red-600 dark:text-red-500 text-xs", children: h })
-  ] }), e[26] = q, e[27] = r, e[28] = h, e[29] = a, e[30] = Y, e[31] = Z, e[32] = X, e[33] = Q, e[34] = m, e[35] = i, e[36] = l, e[37] = T, e[38] = G, e[39] = b) : b = e[39];
-  let v;
-  e[40] !== i || e[41] !== K || e[42] !== z || e[43] !== U || e[44] !== H || e[45] !== p ? (v = p && /* @__PURE__ */ k(ve, { isOpen: i, scrollBehavior: H, listClassName: K, listItemClassName: U, listItemButtonClassName: z, onClose: () => u(!1) }), e[40] = i, e[41] = K, e[42] = z, e[43] = U, e[44] = H, e[45] = p, e[46] = v) : v = e[46];
-  let y;
-  e[47] !== b || e[48] !== v ? (y = /* @__PURE__ */ $("div", { className: "relative", children: [
-    b,
-    v
-  ] }), e[47] = b, e[48] = v, e[49] = y) : y = e[49];
-  let w;
-  e[50] !== a || e[51] !== l ? (w = /* @__PURE__ */ k("input", { type: "hidden", name: l, value: a, className: "hidden" }), e[50] = a, e[51] = l, e[52] = w) : w = e[52];
-  let W;
-  return e[53] !== ee || e[54] !== x || e[55] !== y || e[56] !== w ? (W = /* @__PURE__ */ $("div", { ref: J, onMouseDown: ee, className: F, children: [
-    x,
-    y,
-    w
-  ] }), e[53] = ee, e[54] = x, e[55] = y, e[56] = w, e[57] = W) : W = e[57], W;
+  }, []), /* @__PURE__ */ m(
+    "div",
+    {
+      ref: C,
+      onMouseDown: E === "input" ? G : void 0,
+      className: $(
+        "w-full",
+        "text-slate-800",
+        "text-sm",
+        "flex",
+        "flex-col",
+        "gap-2"
+      ),
+      children: [
+        M ? /* @__PURE__ */ m(
+          T,
+          {
+            component: "label",
+            variant: "labelLarge",
+            htmlFor: v,
+            className: "font-medium",
+            children: [
+              M,
+              " ",
+              R && /* @__PURE__ */ c(
+                T,
+                {
+                  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": v,
+              "aria-haspopup": "listbox",
+              "aria-expanded": "true",
+              "aria-controls": "time-options",
+              className: $(
+                Z({ className: F }),
+                n && "opacity-50 cursor-not-allowed"
+              ),
+              "data-open": g,
+              onClick: q,
+              disabled: n,
+              children: [
+                d,
+                /* @__PURE__ */ c(
+                  ee,
+                  {
+                    className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
+                    "data-open": g
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ c(
+              "input",
+              {
+                ref: P,
+                type: "text",
+                "aria-label": v,
+                value: b,
+                onChange: Q,
+                onFocus: z,
+                onBlur: J,
+                disabled: n,
+                "data-error": !!y,
+                "data-open": g,
+                placeholder: L,
+                className: $(
+                  "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": y
+                  }
+                )
+              }
+            ),
+            y && /* @__PURE__ */ c(
+              T,
+              {
+                component: "span",
+                className: "text-red-600 dark:text-red-500 text-xs",
+                children: y
+              }
+            )
+          ] }),
+          w && /* @__PURE__ */ c(
+            _,
+            {
+              isOpen: g,
+              scrollBehavior: V,
+              listClassName: W,
+              listItemClassName: j,
+              listItemButtonClassName: B,
+              onClose: () => o(!1)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ c(
+          "input",
+          {
+            type: "hidden",
+            name: v,
+            value: d,
+            className: "hidden"
+          }
+        )
+      ]
+    }
+  );
 };
-function ke(N) {
-  return !N;
-}
-function Ne(N) {
-  return N.toUpperCase();
-}
 export {
-  Re as Wrapper
+  pe as Wrapper
 };

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

@@ -1,47 +1,78 @@
-import { jsx as b, jsxs as L } from "react/jsx-runtime";
-import { c as M } from "../../../../compiler-runtime-DA41awpA.js";
-import { cn as N } from "../../../../utils/index.js";
-import { getHours as v, getMinutes as w } from "../../utils/index.js";
-import { HoursList as H } from "../HoursList/HoursList.js";
-import { MeridianList as j } from "../MeridianList/MeridianList.js";
-import { MinutesList as z } from "../MinutesList/MinutesList.js";
-import { useTimePickerContext as B } from "../../contexts/time-picker.hook.js";
-const T = (g) => {
-  const e = M.c(27), {
-    isOpen: C,
-    scrollBehavior: r,
-    listClassName: t,
-    listItemClassName: o,
-    listItemButtonClassName: s,
-    onClose: a
-  } = g, {
-    time: i,
-    format: k
-  } = B();
-  let c;
-  e[0] !== i ? (c = v(i), e[0] = i, e[1] = c) : c = e[1];
-  const d = c;
-  let f;
-  e[2] !== i ? (f = w(i), e[2] = i, e[3] = f) : f = e[3];
-  const x = f;
-  if (!C)
-    return null;
-  let p;
-  e[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (p = N("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"), e[4] = p) : p = e[4];
-  let m;
-  e[5] !== t || e[6] !== s || e[7] !== o || e[8] !== r || e[9] !== d ? (m = /* @__PURE__ */ b(H, { hours: d, scrollBehavior: r, listClassName: t, listItemClassName: o, listItemButtonClassName: s }), e[5] = t, e[6] = s, e[7] = o, e[8] = r, e[9] = d, e[10] = m) : m = e[10];
-  const h = k === "24" ? a : void 0;
-  let l;
-  e[11] !== t || e[12] !== s || e[13] !== o || e[14] !== r || e[15] !== x || e[16] !== h ? (l = /* @__PURE__ */ b(z, { minutes: x, scrollBehavior: r, listClassName: t, listItemClassName: o, listItemButtonClassName: s, onClose: h }), e[11] = t, e[12] = s, e[13] = o, e[14] = r, e[15] = x, e[16] = h, e[17] = l) : l = e[17];
-  let n;
-  e[18] !== t || e[19] !== s || e[20] !== o || e[21] !== a ? (n = /* @__PURE__ */ b(j, { listClassName: t, listItemClassName: o, listItemButtonClassName: s, onClose: a }), e[18] = t, e[19] = s, e[20] = o, e[21] = a, e[22] = n) : n = e[22];
-  let u;
-  return e[23] !== m || e[24] !== l || e[25] !== n ? (u = /* @__PURE__ */ L("div", { role: "group", className: p, children: [
-    m,
-    l,
-    n
-  ] }), e[23] = m, e[24] = l, e[25] = n, e[26] = u) : u = e[26], u;
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { cn as x } from "../../../../utils/index.js";
+import { getHours as g, getMinutes as a } from "../../utils/index.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 { useTimePickerContext as k } from "../../contexts/time-picker.hook.js";
+const W = ({
+  isOpen: p,
+  scrollBehavior: m,
+  listClassName: o,
+  listItemClassName: e,
+  listItemButtonClassName: i,
+  onClose: n
+}) => {
+  const { time: r, format: u } = k(), f = d(() => g(r), [r]), c = d(() => a(r), [r]);
+  return p ? /* @__PURE__ */ s(
+    "div",
+    {
+      role: "group",
+      className: x(
+        "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: e,
+            listItemButtonClassName: i
+          }
+        ),
+        /* @__PURE__ */ t(
+          h,
+          {
+            minutes: c,
+            scrollBehavior: m,
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i,
+            onClose: u === "24" ? n : void 0
+          }
+        ),
+        /* @__PURE__ */ t(
+          M,
+          {
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i,
+            onClose: n
+          }
+        )
+      ]
+    }
+  ) : null;
 };
 export {
-  T as WrapperList
+  W as WrapperList
 };

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

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