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

package/dist/components/TimePicker/components/HoursList/HoursList.js

@@ -1,86 +1,99 @@
-import { jsx as p } from "react/jsx-runtime";
-import { c as E } from "../../../../compiler-runtime-DA41awpA.js";
-import { useRef as T, useEffect as V } from "react";
-import { cn as b } from "../../../../utils/index.js";
-import { ulVariants as g, buttonVariants as L, liVariants as R } from "../../TimePicker.variants.js";
-import { useTimePickerContext as M } from "../../contexts/time-picker.hook.js";
-const P = (j) => {
-  const t = E.c(31), {
-    hours: i,
-    scrollBehavior: w
-  } = j, y = T(null), C = T(i), {
-    format: l,
-    isTyping: d,
-    onSelectHour: n
-  } = M(), K = l === "12" && i >= 12 ? i - 12 : i, h = l === "12" ? 12 : 24;
-  let k;
-  t[0] !== n ? (k = (o, e) => {
-    o.currentTarget?.blur(), n(e);
-  }, t[0] = n, t[1] = k) : k = t[1];
-  const c = k;
-  let H;
-  t[2] !== l || t[3] !== h || t[4] !== n ? (H = (o, e) => {
-    const r = y.current?.querySelectorAll("button");
-    if (!r)
-      return;
-    let s = e;
-    if (o.key === "ArrowDown" || o.key === "Tab" && !o.shiftKey)
-      o.preventDefault(), s = (e + 1) % h;
-    else if (o.key === "ArrowUp" || o.key === "Tab" && o.shiftKey)
-      o.preventDefault(), s = (e - 1 + h) % h;
-    else if (o.key === "Enter") {
-      o.preventDefault();
-      const $ = l === "12" ? e + 1 : e;
-      n($), document.querySelector('[aria-label="minutes"]')?.querySelector('li[data-active="true"] button')?.focus();
+import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { useTimePickerContext as v } from "../../contexts/time-picker.hook.js";
+import { buttonVariants as k, liVariants as d, ulVariants as H } from "../../TimePicker.variants.js";
+import { useCallback as A, useEffect as D, useRef as N } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var $ = ({ hours: a, scrollBehavior: m }) => {
+  const c = N(null), S = N(a), { format: l, isTyping: p, onSelectHour: n } = v(), b = l === "12" && a >= 12 ? a - 12 : a, u = l === "12" ? 12 : 24, y = A((e, t) => {
+    e.currentTarget?.blur(), n(t);
+  }, [n]), w = A((e, t) => {
+    const r = c.current?.querySelectorAll("button");
+    if (!r) return;
+    let o = t;
+    if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey)
+      e.preventDefault(), o = (t + 1) % u;
+    else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey)
+      e.preventDefault(), o = (t - 1 + u) % u;
+    else if (e.key === "Enter") {
+      e.preventDefault(), n(l === "12" ? t + 1 : t), document.querySelector('[aria-label="minutes"]')?.querySelector('li[data-active="true"] button')?.focus();
       return;
     }
-    s !== e && r[s]?.focus();
-  }, t[2] = l, t[3] = h, t[4] = n, t[5] = H) : H = t[5];
-  const u = H;
-  let v, S;
-  t[6] !== l || t[7] !== w ? (v = () => {
-    const o = y.current, e = C.current, r = l === "12" && e >= 12 ? e - 12 : e, s = r === 0 && l === "12" ? 12 : r;
-    o && o.querySelector(`[data-value="${`0${s}`.slice(-2)}"]`)?.scrollIntoView({
-      behavior: w,
+    o !== t && r[o]?.focus();
+  }, [
+    l,
+    u,
+    n
+  ]);
+  if (D(() => {
+    const e = c.current, t = S.current, r = l === "12" && t >= 12 ? t - 12 : t, o = r === 0 && l === "12" ? 12 : r;
+    e && e.querySelector(`[data-value="${`0${o}`.slice(-2)}"]`)?.scrollIntoView({
+      behavior: m,
       block: "center"
     });
-  }, S = [l, w], t[6] = l, t[7] = w, t[8] = v, t[9] = S) : (v = t[8], S = t[9]), V(v, S);
-  let A, D;
-  if (t[10] !== l || t[11] !== i || t[12] !== d ? (A = () => {
-    if (!d)
-      return;
-    const o = y.current, e = l === "12" && i >= 12 ? i - 12 : i, r = e === 0 && l === "12" ? 12 : e;
-    o && o.querySelector(`[data-value="${`0${r}`.slice(-2)}"]`)?.scrollIntoView({
+  }, [l, m]), D(() => {
+    if (!p) return;
+    const e = c.current, t = l === "12" && a >= 12 ? a - 12 : a, r = t === 0 && l === "12" ? 12 : t;
+    e && e.querySelector(`[data-value="${`0${r}`.slice(-2)}"]`)?.scrollIntoView({
       behavior: "instant",
       block: "center"
     });
-  }, D = [i, l, d], t[10] = l, t[11] = i, t[12] = d, t[13] = A, t[14] = D) : (A = t[13], D = t[14]), V(A, D), l === "12") {
-    const o = K === 0 ? 12 : K;
-    let e;
-    t[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e = b(g()), t[15] = e) : e = t[15];
-    let r;
-    t[16] !== o || t[17] !== u || t[18] !== c ? (r = Array.from({
-      length: 12
-    }, ($, a) => {
-      const q = o - 1 === a;
-      return /* @__PURE__ */ p("li", { className: b(R()), "data-value": `0${a + 1}`.slice(-2), "data-active": q, role: "presentation", children: /* @__PURE__ */ p("button", { type: "button", role: "option", tabIndex: q ? 0 : -1, className: b(L()), onClick: (B) => c(B, a + 1), onKeyDown: (B) => u(B, a), children: a + 1 }) }, a);
-    }), t[16] = o, t[17] = u, t[18] = c, t[19] = r) : r = t[19];
-    let s;
-    return t[20] !== e || t[21] !== r ? (s = /* @__PURE__ */ p("ul", { ref: y, className: e, "aria-label": "hours", role: "listbox", children: r }), t[20] = e, t[21] = r, t[22] = s) : s = t[22], s;
+  }, [
+    a,
+    l,
+    p
+  ]), l === "12") {
+    const e = b === 0 ? 12 : b;
+    return /* @__PURE__ */ i("ul", {
+      ref: c,
+      className: s(H()),
+      "aria-label": "hours",
+      role: "listbox",
+      children: Array.from({ length: 12 }, (t, r) => {
+        const o = e - 1 === r;
+        return /* @__PURE__ */ i("li", {
+          className: s(d()),
+          "data-value": `0${r + 1}`.slice(-2),
+          "data-active": o,
+          role: "presentation",
+          children: /* @__PURE__ */ i("button", {
+            type: "button",
+            role: "option",
+            tabIndex: o ? 0 : -1,
+            className: s(k()),
+            onClick: (f) => y(f, r + 1),
+            onKeyDown: (f) => w(f, r),
+            children: r + 1
+          })
+        }, r);
+      })
+    });
   }
-  let f;
-  t[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (f = b(g()), t[23] = f) : f = t[23];
-  let m;
-  t[24] !== u || t[25] !== c || t[26] !== i ? (m = Array.from({
-    length: 24
-  }, (o, e) => {
-    const r = i === e;
-    return /* @__PURE__ */ p("li", { className: b(R()), "data-value": `0${e}`.slice(-2), "data-active": r, role: "presentation", children: /* @__PURE__ */ p("button", { type: "button", role: "option", tabIndex: r ? 0 : -1, className: b(L()), onClick: (s) => c(s, e), onKeyDown: (s) => u(s, e), children: e }) }, e);
-  }), t[24] = u, t[25] = c, t[26] = i, t[27] = m) : m = t[27];
-  let N;
-  return t[28] !== f || t[29] !== m ? (N = /* @__PURE__ */ p("ul", { ref: y, className: f, "aria-label": "hours", role: "listbox", children: m }), t[28] = f, t[29] = m, t[30] = N) : N = t[30], N;
+  return /* @__PURE__ */ i("ul", {
+    ref: c,
+    className: s(H()),
+    "aria-label": "hours",
+    role: "listbox",
+    children: Array.from({ length: 24 }, (e, t) => {
+      const r = a === t;
+      return /* @__PURE__ */ i("li", {
+        className: s(d()),
+        "data-value": `0${t}`.slice(-2),
+        "data-active": r,
+        role: "presentation",
+        children: /* @__PURE__ */ i("button", {
+          type: "button",
+          role: "option",
+          tabIndex: r ? 0 : -1,
+          className: s(k()),
+          onClick: (o) => y(o, t),
+          onKeyDown: (o) => w(o, t),
+          children: t
+        })
+      }, t);
+    })
+  });
 };
-P.displayName = "HoursList";
+$.displayName = "HoursList";
 export {
-  P as HoursList
+  $ as HoursList
 };

package/dist/components/TimePicker/components/MeridianList/MeridianList.js

@@ -1,82 +1,56 @@
-import { jsx as D, jsxs as U } from "react/jsx-runtime";
-import { c as $ } from "../../../../compiler-runtime-DA41awpA.js";
-import { useRef as z } from "react";
-import { cn as h } from "../../../../utils/index.js";
-import { liVariants as L, buttonVariants as V } from "../../TimePicker.variants.js";
-import { useTimePickerContext as G } from "../../contexts/time-picker.hook.js";
-const H = (M) => {
-  const e = $.c(46), {
-    listClassName: T,
-    listItemClassName: s,
-    listItemButtonClassName: i,
-    onClose: K
-  } = M, S = z(null), {
-    format: g,
-    isAM: l,
-    onSelectAM: o,
-    onSelectPM: r
-  } = G(), B = J;
-  let A;
-  e[0] !== K || e[1] !== o || e[2] !== r ? (A = (t, E) => {
-    const R = S.current?.querySelectorAll("button");
-    if (!R)
-      return;
-    const q = t.key === "Tab" && !t.shiftKey, F = t.key === "Tab" && t.shiftKey;
-    t.key === "ArrowDown" || t.key === "ArrowUp" || q || F ? (t.preventDefault(), E ? R[1]?.focus() : R[0]?.focus()) : t.key === "Enter" && (t.preventDefault(), E ? o() : r(), K?.());
-  }, e[0] = K, e[1] = o, e[2] = r, e[3] = A) : A = e[3];
-  const a = A;
-  if (g === "24")
-    return null;
-  let n;
-  e[4] !== T ? (n = h("flex items-center justify-center flex-col", T), e[4] = T, e[5] = n) : n = e[5];
-  let c;
-  e[6] !== s ? (c = h(L({
-    className: s
-  })), e[6] = s, e[7] = c) : c = e[7];
-  const I = l ? 0 : -1;
-  let f;
-  e[8] !== l || e[9] !== i ? (f = h(V({
-    className: i
-  }), {
-    "dark:text-slate-50": !l
-  }), e[8] = l, e[9] = i, e[10] = f) : f = e[10];
-  let m;
-  e[11] !== o ? (m = (t) => B(t, o), e[11] = o, e[12] = m) : m = e[12];
-  let u;
-  e[13] !== a ? (u = (t) => a(t, !0), e[13] = a, e[14] = u) : u = e[14];
-  let p;
-  e[15] !== I || e[16] !== f || e[17] !== m || e[18] !== u ? (p = /* @__PURE__ */ D("button", { type: "button", role: "option", tabIndex: I, className: f, onClick: m, onKeyDown: u, children: "AM" }), e[15] = I, e[16] = f, e[17] = m, e[18] = u, e[19] = p) : p = e[19];
-  let d;
-  e[20] !== l || e[21] !== c || e[22] !== p ? (d = /* @__PURE__ */ D("li", { className: c, "data-active": l, role: "presentation", children: p }), e[20] = l, e[21] = c, e[22] = p, e[23] = d) : d = e[23];
-  let b;
-  e[24] !== s ? (b = h(L({
-    className: s
-  })), e[24] = s, e[25] = b) : b = e[25];
-  const j = !l, P = l ? -1 : 0;
-  let y;
-  e[26] !== l || e[27] !== i ? (y = h(V({
-    className: i
-  }), {
-    "dark:text-slate-50": l
-  }), e[26] = l, e[27] = i, e[28] = y) : y = e[28];
-  let N;
-  e[29] !== r ? (N = (t) => B(t, r), e[29] = r, e[30] = N) : N = e[30];
-  let k;
-  e[31] !== a ? (k = (t) => a(t, !1), e[31] = a, e[32] = k) : k = e[32];
-  let x;
-  e[33] !== P || e[34] !== y || e[35] !== N || e[36] !== k ? (x = /* @__PURE__ */ D("button", { type: "button", role: "option", tabIndex: P, className: y, onClick: N, onKeyDown: k, children: "PM" }), e[33] = P, e[34] = y, e[35] = N, e[36] = k, e[37] = x) : x = e[37];
-  let w;
-  e[38] !== b || e[39] !== j || e[40] !== x ? (w = /* @__PURE__ */ D("li", { className: b, "data-active": j, role: "presentation", children: x }), e[38] = b, e[39] = j, e[40] = x, e[41] = w) : w = e[41];
-  let C;
-  return e[42] !== w || e[43] !== n || e[44] !== d ? (C = /* @__PURE__ */ U("ul", { ref: S, className: n, "aria-label": "meridian", role: "listbox", children: [
-    d,
-    w
-  ] }), e[42] = w, e[43] = n, e[44] = d, e[45] = C) : C = e[45], C;
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { useTimePickerContext as N } from "../../contexts/time-picker.hook.js";
+import { buttonVariants as p, liVariants as b } from "../../TimePicker.variants.js";
+import { useCallback as y, useRef as D } from "react";
+import { jsx as o, jsxs as M } from "react/jsx-runtime";
+var T = ({ listClassName: k, listItemClassName: n, listItemButtonClassName: c, onClose: f }) => {
+  const u = D(null), { format: x, isAM: r, onSelectAM: l, onSelectPM: s } = N(), m = y((e, a) => {
+    e.currentTarget?.blur(), a();
+  }, []), d = y((e, a) => {
+    const i = u.current?.querySelectorAll("button");
+    if (!i) return;
+    const h = e.key === "Tab" && !e.shiftKey, w = e.key === "Tab" && e.shiftKey;
+    e.key === "ArrowDown" || e.key === "ArrowUp" || h || w ? (e.preventDefault(), a ? i[1]?.focus() : i[0]?.focus()) : e.key === "Enter" && (e.preventDefault(), a ? l() : s(), f?.());
+  }, [
+    l,
+    s,
+    f
+  ]);
+  return x === "24" ? null : /* @__PURE__ */ M("ul", {
+    ref: u,
+    className: t("flex items-center justify-center flex-col", k),
+    "aria-label": "meridian",
+    role: "listbox",
+    children: [/* @__PURE__ */ o("li", {
+      className: t(b({ className: n })),
+      "data-active": r,
+      role: "presentation",
+      children: /* @__PURE__ */ o("button", {
+        type: "button",
+        role: "option",
+        tabIndex: r ? 0 : -1,
+        className: t(p({ className: c }), { "dark:text-slate-50": !r }),
+        onClick: (e) => m(e, l),
+        onKeyDown: (e) => d(e, !0),
+        children: "AM"
+      })
+    }), /* @__PURE__ */ o("li", {
+      className: t(b({ className: n })),
+      "data-active": !r,
+      role: "presentation",
+      children: /* @__PURE__ */ o("button", {
+        type: "button",
+        role: "option",
+        tabIndex: r ? -1 : 0,
+        className: t(p({ className: c }), { "dark:text-slate-50": r }),
+        onClick: (e) => m(e, s),
+        onKeyDown: (e) => d(e, !1),
+        children: "PM"
+      })
+    })]
+  });
 };
-H.displayName = "MeridianList";
-function J(M, e) {
-  M.currentTarget?.blur(), e();
-}
+T.displayName = "MeridianList";
 export {
-  H as MeridianList
+  T as MeridianList
 };

package/dist/components/TimePicker/components/MinutesList/MinutesList.js

@@ -1,79 +1,76 @@
-import { jsx as S } from "react/jsx-runtime";
-import { c as T } from "../../../../compiler-runtime-DA41awpA.js";
-import { useRef as D, useEffect as q } from "react";
-import { cn as $ } from "../../../../utils/index.js";
-import { ulVariants as V, buttonVariants as K, liVariants as L } from "../../TimePicker.variants.js";
-import { useTimePickerContext as N } from "../../contexts/time-picker.hook.js";
-const R = (v) => {
-  const t = T.c(17), {
-    minutes: i,
-    scrollBehavior: s,
-    onClose: a
-  } = v, c = D(null), A = D(i), {
-    isTyping: u,
-    onSelectMinute: n
-  } = N();
-  let f, m;
-  t[0] !== s ? (f = () => {
-    const e = c.current;
-    if (e) {
-      const r = `0${A.current}`.slice(-2);
-      e.querySelector(`[data-value="${r}"]`)?.scrollIntoView({
-        behavior: s,
+import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { useTimePickerContext as h } from "../../contexts/time-picker.hook.js";
+import { buttonVariants as d, liVariants as M, ulVariants as S } from "../../TimePicker.variants.js";
+import { useCallback as p, useEffect as b, useRef as m } from "react";
+import { jsx as c } from "react/jsx-runtime";
+var D = ({ minutes: o, scrollBehavior: u, onClose: n }) => {
+  const i = m(null), y = m(o), { isTyping: f, onSelectMinute: l } = h();
+  b(() => {
+    const t = i.current;
+    if (t) {
+      const e = `0${y.current}`.slice(-2);
+      t.querySelector(`[data-value="${e}"]`)?.scrollIntoView({
+        behavior: u,
         block: "center"
       });
     }
-  }, m = [s], t[0] = s, t[1] = f, t[2] = m) : (f = t[1], m = t[2]), q(f, m);
-  let p, y;
-  t[3] !== u || t[4] !== i ? (p = () => {
-    if (!u)
-      return;
-    const e = c.current;
-    if (e) {
-      const r = `0${i}`.slice(-2);
-      e.querySelector(`[data-value="${r}"]`)?.scrollIntoView({
+  }, [u]), b(() => {
+    if (!f) return;
+    const t = i.current;
+    if (t) {
+      const e = `0${o}`.slice(-2);
+      t.querySelector(`[data-value="${e}"]`)?.scrollIntoView({
         behavior: "instant",
         block: "center"
       });
     }
-  }, y = [i, u], t[3] = u, t[4] = i, t[5] = p, t[6] = y) : (p = t[5], y = t[6]), q(p, y);
-  let b;
-  t[7] !== n ? (b = (e, r) => {
-    n(e), r.currentTarget?.blur();
-  }, t[7] = n, t[8] = b) : b = t[8];
-  const k = b;
-  let d;
-  t[9] !== a || t[10] !== n ? (d = (e, r) => {
-    const l = c.current?.querySelectorAll("button");
-    if (!l)
-      return;
-    let o = r;
-    if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey)
-      e.preventDefault(), o = (r + 1) % 60;
-    else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey)
-      e.preventDefault(), o = (r - 1 + 60) % 60;
-    else if (e.key === "Enter") {
-      if (e.preventDefault(), n(r), a) {
-        a();
+  }, [o, f]);
+  const k = p((t, e) => {
+    l(t), e.currentTarget?.blur();
+  }, [l]), w = p((t, e) => {
+    const a = i.current?.querySelectorAll("button");
+    if (!a) return;
+    let r = e;
+    if (t.key === "ArrowDown" || t.key === "Tab" && !t.shiftKey)
+      t.preventDefault(), r = (e + 1) % 60;
+    else if (t.key === "ArrowUp" || t.key === "Tab" && t.shiftKey)
+      t.preventDefault(), r = (e - 1 + 60) % 60;
+    else if (t.key === "Enter") {
+      if (t.preventDefault(), l(e), n) {
+        n();
         return;
       }
       document.querySelector('[aria-label="meridian"]')?.querySelector('li[data-active="true"] button')?.focus();
       return;
     }
-    o !== r && l[o]?.focus();
-  }, t[9] = a, t[10] = n, t[11] = d) : d = t[11];
-  const M = d;
-  let h;
-  t[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = $(V()), t[12] = h) : h = t[12];
-  let w;
-  return t[13] !== M || t[14] !== k || t[15] !== i ? (w = /* @__PURE__ */ S("ul", { ref: c, className: h, "aria-label": "minutes", role: "listbox", children: Array.from({
-    length: 60
-  }, (e, r) => {
-    const l = i === r;
-    return /* @__PURE__ */ S("li", { className: $(L()), "data-value": `0${r}`.slice(-2), "data-active": l, role: "presentation", children: /* @__PURE__ */ S("button", { type: "button", role: "option", tabIndex: l ? 0 : -1, className: $(K()), onClick: (o) => k(r, o), onKeyDown: (o) => M(o, r), children: `0${r}`.slice(-2) }) }, r);
-  }) }), t[13] = M, t[14] = k, t[15] = i, t[16] = w) : w = t[16], w;
+    r !== e && a[r]?.focus();
+  }, [l, n]);
+  return /* @__PURE__ */ c("ul", {
+    ref: i,
+    className: s(S()),
+    "aria-label": "minutes",
+    role: "listbox",
+    children: Array.from({ length: 60 }, (t, e) => {
+      const a = o === e;
+      return /* @__PURE__ */ c("li", {
+        className: s(M()),
+        "data-value": `0${e}`.slice(-2),
+        "data-active": a,
+        role: "presentation",
+        children: /* @__PURE__ */ c("button", {
+          type: "button",
+          role: "option",
+          tabIndex: a ? 0 : -1,
+          className: s(d()),
+          onClick: (r) => k(e, r),
+          onKeyDown: (r) => w(r, e),
+          children: `0${e}`.slice(-2)
+        })
+      }, e);
+    })
+  });
 };
-R.displayName = "MinutesList";
+D.displayName = "MinutesList";
 export {
-  R as MinutesList
+  D as MinutesList
 };