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

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

@@ -1,235 +1,151 @@
-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;
+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}`);
       }
-      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);
+    } 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);
     };
-    return document.addEventListener("mousedown", e, {
-      signal: t.signal
-    }), document.addEventListener("keydown", a, {
-      signal: t.signal
+    return document.addEventListener("mousedown", t, {
+      signal: s.signal
+    }), document.addEventListener("keydown", c, {
+      signal: s.signal
     }), () => {
-      t.abort();
+      s.abort();
     };
-  }, []), /* @__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"
-          }
-        )
-      ]
-    }
-  );
+  }, 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;
 };
+function ke(N) {
+  return !N;
+}
+function Ne(N) {
+  return N.toUpperCase();
+}
 export {
-  pe as Wrapper
+  Re as Wrapper
 };

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

@@ -1,78 +1,47 @@
-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;
+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;
 };
 export {
-  W as WrapperList
+  T as WrapperList
 };

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

@@ -3,9 +3,7 @@ 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 {