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

package/dist/components/TagSelect/hooks/useTagSelect.js

@@ -1,36 +1,32 @@
-import { c as d } from "../../../compiler-runtime-DA41awpA.js";
-import { useRef as p, useEffect as g } from "react";
-import { useTagSelect as m } from "../contexts/TagSelect.hook.js";
-const b = () => {
-  const e = d.c(7), l = p(null), {
-    onOpen: t
-  } = m();
-  let a, s;
-  e[0] !== t ? (a = () => {
-    const n = new AbortController(), u = (i) => {
-      i.key === "Escape" && t(!1);
-    }, f = (i) => {
-      l.current?.contains(i.target) || t(!1);
+import { useRef as l, useEffect as c, useCallback as u } from "react";
+import { useTagSelect as i } from "../contexts/TagSelect.hook.js";
+const g = () => {
+  const n = l(null), { onOpen: e } = i();
+  c(() => {
+    const t = new AbortController(), s = (a) => {
+      a.key === "Escape" && e(!1);
+    }, o = (a) => {
+      n.current?.contains(a.target) || e(!1);
     };
-    return document.addEventListener("keydown", u, {
-      signal: n.signal
-    }), document.addEventListener("mousedown", f, {
-      signal: n.signal
+    return document.addEventListener("keydown", s, {
+      signal: t.signal
+    }), document.addEventListener("mousedown", o, {
+      signal: t.signal
     }), () => {
-      n.abort();
+      t.abort();
     };
-  }, s = [t, l], e[0] = t, e[1] = a, e[2] = s) : (a = e[1], s = e[2]), g(a, s);
-  let o;
-  e[3] !== t ? (o = (n) => {
-    n.target?.closest("[data-value]") || t(!0);
-  }, e[3] = t, e[4] = o) : o = e[4];
-  const c = o;
-  let r;
-  return e[5] !== c ? (r = {
-    wrapperRef: l,
-    handleOpen: c
-  }, e[5] = c, e[6] = r) : r = e[6], r;
+  }, [e, n]);
+  const r = u(
+    (t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    },
+    [e]
+  );
+  return {
+    wrapperRef: n,
+    handleOpen: r
+  };
 };
 export {
-  b as useTagSelect
+  g as useTagSelect
 };

package/dist/components/TextArea/TextArea.js

@@ -1,38 +1,37 @@
-import { jsx as b, jsxs as A } from "react/jsx-runtime";
-import { c as I } from "../../compiler-runtime-DA41awpA.js";
-import { forwardRef as R, useId as V } from "react";
-import { cn as j } from "../../utils/index.js";
-import { textAreaVariants as $ } from "./TextArea.variants.js";
-const W = R((h, u) => {
-  const e = I.c(28);
-  let a, d, l, s, f, r, t, p, o;
-  e[0] !== h ? ({
-    initialValue: d,
-    label: l,
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u, useId as p } from "react";
+import { cn as m } from "../../utils/index.js";
+import { textAreaVariants as v } from "./TextArea.variants.js";
+const g = u(
+  ({
+    initialValue: o,
+    label: r,
     labelWrapperClassName: s,
-    name: f,
-    placeholder: r,
-    rows: p,
-    theme: o,
-    className: a,
-    ...t
-  } = h, e[0] = h, e[1] = a, e[2] = d, e[3] = l, e[4] = s, e[5] = f, e[6] = r, e[7] = t, e[8] = p, e[9] = o) : (a = e[1], d = e[2], l = e[3], s = e[4], f = e[5], r = e[6], t = e[7], p = e[8], o = e[9]);
-  const N = p === void 0 ? 3 : p, w = V(), i = f ? `${w}-name` : w;
-  let m;
-  e[10] !== i || e[11] !== l || e[12] !== s ? (m = l ? /* @__PURE__ */ b("div", { className: j(s), children: /* @__PURE__ */ b("label", { htmlFor: i, className: "cursor-pointer", children: l }) }) : null, e[10] = i, e[11] = l, e[12] = s, e[13] = m) : m = e[13];
-  let c;
-  e[14] !== a ? (c = j($({
-    className: a
-  })), e[14] = a, e[15] = c) : c = e[15];
-  const v = d ?? t.value;
-  let n;
-  e[16] !== i || e[17] !== r || e[18] !== t || e[19] !== u || e[20] !== N || e[21] !== c || e[22] !== v ? (n = /* @__PURE__ */ b("textarea", { id: i, ref: u, className: c, rows: N, placeholder: r, value: v, ...t }), e[16] = i, e[17] = r, e[18] = t, e[19] = u, e[20] = N, e[21] = c, e[22] = v, e[23] = n) : n = e[23];
-  let x;
-  return e[24] !== m || e[25] !== n || e[26] !== o ? (x = /* @__PURE__ */ A("div", { className: "flex flex-col gap-2", "data-theme": o, children: [
-    m,
-    n
-  ] }), e[24] = m, e[25] = n, e[26] = o, e[27] = x) : x = e[27], x;
-});
+    name: c,
+    placeholder: i,
+    rows: n = 3,
+    theme: d,
+    className: f,
+    ...a
+  }, x) => {
+    const t = p(), l = c ? `${t}-name` : t;
+    return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2", "data-theme": d, children: [
+      r ? /* @__PURE__ */ e("div", { className: m(s), children: /* @__PURE__ */ e("label", { htmlFor: l, className: "cursor-pointer", children: r }) }) : null,
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          id: l,
+          ref: x,
+          className: m(v({ className: f })),
+          rows: n,
+          placeholder: i,
+          value: o ?? a.value,
+          ...a
+        }
+      )
+    ] });
+  }
+);
 export {
-  W as TextArea
+  g as TextArea
 };

package/dist/components/TextArea/TextArea.variants.js

@@ -1,5 +1,20 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const o = r(["border", "border-gray-200", "disabled:cursor-not-allowed", "disabled:opacity-50", "focus-visible:outline-none", "focus-visible:ring-1", "focus-visible:ring-ring", "p-2", "placeholder:text-gray-300", "resize-none", "rounded-md", "shadow-xs", "w-full", "focus:ring-kubefirst-primary"]);
+const o = r([
+  "border",
+  "border-gray-200",
+  "disabled:cursor-not-allowed",
+  "disabled:opacity-50",
+  "focus-visible:outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-ring",
+  "p-2",
+  "placeholder:text-gray-300",
+  "resize-none",
+  "rounded-md",
+  "shadow-xs",
+  "w-full",
+  "focus:ring-kubefirst-primary"
+]);
 export {
   o as textAreaVariants
 };

package/dist/components/TimePicker/TimePicker.js

@@ -1,24 +1,14 @@
-import { jsx as a } from "react/jsx-runtime";
-import { c as h } from "../../compiler-runtime-DA41awpA.js";
-import { TimePickerProvider as u } from "./contexts/time-picker.provider.js";
-import { Wrapper as v } from "./components/Wrapper/Wrapper.js";
-const P = (n) => {
-  const e = h.c(16);
-  let t, o, m, s, l, r;
-  e[0] !== n ? ({
-    format: m,
-    mode: s,
-    showList: l,
-    time: r,
-    onChange: o,
-    ...t
-  } = n, e[0] = n, e[1] = t, e[2] = o, e[3] = m, e[4] = s, e[5] = l, e[6] = r) : (t = e[1], o = e[2], m = e[3], s = e[4], l = e[5], r = e[6]);
-  const d = m === void 0 ? "12" : m, p = s === void 0 ? "select" : s, f = l === void 0 ? !0 : l;
-  let i;
-  e[7] !== t || e[8] !== p || e[9] !== f ? (i = /* @__PURE__ */ a(v, { mode: p, showList: f, ...t }), e[7] = t, e[8] = p, e[9] = f, e[10] = i) : i = e[10];
-  let c;
-  return e[11] !== d || e[12] !== o || e[13] !== i || e[14] !== r ? (c = /* @__PURE__ */ a(u, { format: d, time: r, onChange: o, children: i }), e[11] = d, e[12] = o, e[13] = i, e[14] = r, e[15] = c) : c = e[15], c;
-};
+import { jsx as r } from "react/jsx-runtime";
+import { TimePickerProvider as p } from "./contexts/time-picker.provider.js";
+import { Wrapper as s } from "./components/Wrapper/Wrapper.js";
+const P = ({
+  format: e = "12",
+  mode: i = "select",
+  showList: m = !0,
+  time: o,
+  onChange: t,
+  ...c
+}) => /* @__PURE__ */ r(p, { format: e, time: o, onChange: t, children: /* @__PURE__ */ r(s, { mode: i, showList: m, ...c }) });
 P.displayName = "KonstructTimePicker";
 export {
   P as TimePicker

package/dist/components/TimePicker/TimePicker.variants.js

@@ -1,5 +1,68 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const r = t(["border", "rounded", "p-2.5", "w-full", "flex", "items-center", "justify-between", "bg-white", "border-gray-300", "dark:border-metal-700", "dark:bg-metal-800", "cursor-pointer", "transition-all", "transition-duration-100", "data-[open=true]:border-aurora-500", "text-sm", "text-slate-800", "dark:text-slate-50"]), e = t(["snap-y", "snap-mandatory", "overflow-y-scroll", "scrollbar-none", "flex", "flex-col", "dark:text-metal-50"]), o = t(["w-15", "h-10", "snap-start", "rounded", "transition-all", "transition-duration-100", "outline-none", "border-2", "border-transparent", "hover:bg-gray-100", "focus-within:bg-gray-100", "data-[active=true]:bg-blue-600", "data-[active=true]:text-white", "data-[active=true]:font-medium", "data-[active=true]:hover:border-blue-200", "data-[active=true]:focus-within:bg-blue-600", "data-[active=true]:focus-within:border-blue-200", "dark:data-[active=true]:bg-aurora-500", "dark:data-[active=true]:text-metal-900", "dark:data-[active=true]:hover:border-aurora-50", "dark:data-[active=true]:focus-within:bg-aurora-500", "dark:data-[active=true]:focus-within:border-aurora-50", "dark:hover:bg-metal-700", "dark:focus-within:bg-metal-700"]), i = t(["flex", "items-center", "justify-center", "cursor-pointer", "w-full", "h-full", "px-6", "py-3", "outline-none", "text-sm"]);
+const r = t([
+  "border",
+  "rounded",
+  "p-2.5",
+  "w-full",
+  "flex",
+  "items-center",
+  "justify-between",
+  "bg-white",
+  "border-gray-300",
+  "dark:border-metal-700",
+  "dark:bg-metal-800",
+  "cursor-pointer",
+  "transition-all",
+  "transition-duration-100",
+  "data-[open=true]:border-aurora-500",
+  "text-sm",
+  "text-slate-800",
+  "dark:text-slate-50"
+]), e = t([
+  "snap-y",
+  "snap-mandatory",
+  "overflow-y-scroll",
+  "scrollbar-none",
+  "flex",
+  "flex-col",
+  "dark:text-metal-50"
+]), o = t([
+  "w-15",
+  "h-10",
+  "snap-start",
+  "rounded",
+  "transition-all",
+  "transition-duration-100",
+  "outline-none",
+  "border-2",
+  "border-transparent",
+  "hover:bg-gray-100",
+  "focus-within:bg-gray-100",
+  "data-[active=true]:bg-blue-600",
+  "data-[active=true]:text-white",
+  "data-[active=true]:font-medium",
+  "data-[active=true]:hover:border-blue-200",
+  "data-[active=true]:focus-within:bg-blue-600",
+  "data-[active=true]:focus-within:border-blue-200",
+  "dark:data-[active=true]:bg-aurora-500",
+  "dark:data-[active=true]:text-metal-900",
+  "dark:data-[active=true]:hover:border-aurora-50",
+  "dark:data-[active=true]:focus-within:bg-aurora-500",
+  "dark:data-[active=true]:focus-within:border-aurora-50",
+  "dark:hover:bg-metal-700",
+  "dark:focus-within:bg-metal-700"
+]), i = t([
+  "flex",
+  "items-center",
+  "justify-center",
+  "cursor-pointer",
+  "w-full",
+  "h-full",
+  "px-6",
+  "py-3",
+  "outline-none",
+  "text-sm"
+]);
 export {
   i as buttonVariants,
   o as liVariants,

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

@@ -1,86 +1,125 @@
-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();
-      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,
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as k, useCallback as d, useEffect as H } from "react";
+import { cn as l } from "../../../../utils/index.js";
+import { buttonVariants as A, liVariants as v, ulVariants as D } from "../../TimePicker.variants.js";
+import { useTimePickerContext as S } from "../../contexts/time-picker.hook.js";
+const h = ({ hours: a, scrollBehavior: f }) => {
+  const c = k(null), N = k(a), { format: n, isTyping: p, onSelectHour: u } = S(), b = n === "12" && a >= 12 ? a - 12 : a, m = n === "12" ? 12 : 24, y = d(
+    (e, t) => {
+      e.currentTarget?.blur(), u(t);
+    },
+    [u]
+  ), w = d(
+    (e, t) => {
+      const o = c.current?.querySelectorAll("button");
+      if (!o) return;
+      let r = t;
+      if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey)
+        e.preventDefault(), r = (t + 1) % m;
+      else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey)
+        e.preventDefault(), r = (t - 1 + m) % m;
+      else if (e.key === "Enter") {
+        e.preventDefault();
+        const s = n === "12" ? t + 1 : t;
+        u(s), document.querySelector('[aria-label="minutes"]')?.querySelector(
+          'li[data-active="true"] button'
+        )?.focus();
+        return;
+      }
+      r !== t && o[r]?.focus();
+    },
+    [n, m, u]
+  );
+  if (H(() => {
+    const e = c.current, t = N.current, o = n === "12" && t >= 12 ? t - 12 : t, r = o === 0 && n === "12" ? 12 : o;
+    e && e.querySelector(
+      `[data-value="${`0${r}`.slice(-2)}"]`
+    )?.scrollIntoView({
+      behavior: f,
       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({
+  }, [n, f]), H(() => {
+    if (!p) return;
+    const e = c.current, t = n === "12" && a >= 12 ? a - 12 : a, o = t === 0 && n === "12" ? 12 : t;
+    e && e.querySelector(
+      `[data-value="${`0${o}`.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, n, p]), n === "12") {
+    const e = b === 0 ? 12 : b;
+    return /* @__PURE__ */ i(
+      "ul",
+      {
+        ref: c,
+        className: l(D()),
+        "aria-label": "hours",
+        role: "listbox",
+        children: Array.from({ length: 12 }, (t, o) => {
+          const r = e - 1 === o;
+          return /* @__PURE__ */ i(
+            "li",
+            {
+              className: l(v()),
+              "data-value": `0${o + 1}`.slice(-2),
+              "data-active": r,
+              role: "presentation",
+              children: /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  tabIndex: r ? 0 : -1,
+                  className: l(A()),
+                  onClick: (s) => y(s, o + 1),
+                  onKeyDown: (s) => w(s, o),
+                  children: o + 1
+                }
+              )
+            },
+            o
+          );
+        })
+      }
+    );
   }
-  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: l(D()),
+      "aria-label": "hours",
+      role: "listbox",
+      children: Array.from({ length: 24 }, (e, t) => {
+        const o = a === t;
+        return /* @__PURE__ */ i(
+          "li",
+          {
+            className: l(v()),
+            "data-value": `0${t}`.slice(-2),
+            "data-active": o,
+            role: "presentation",
+            children: /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                tabIndex: o ? 0 : -1,
+                className: l(A()),
+                onClick: (r) => y(r, t),
+                onKeyDown: (r) => w(r, t),
+                children: t
+              }
+            )
+          },
+          t
+        );
+      })
+    }
+  );
 };
-P.displayName = "HoursList";
+h.displayName = "HoursList";
 export {
-  P as HoursList
+  h as HoursList
 };