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

package/dist/components/TagSelect/contexts/TagSelect.provider.js

@@ -1,68 +1,52 @@
-import { jsx as I } from "react/jsx-runtime";
-import { useRef as R, useState as T, useCallback as l } from "react";
-import { TagSelectContext as x } from "./TagSelect.context.js";
-import { useToggle as w } from "../../../hooks/useToggle.js";
-const k = ({
-  children: m,
-  defaultOptions: n = [],
-  multiselect: d = !0
-}) => {
-  const i = R(null), [p, a] = w(!1), [S, g] = T(n), [r, u] = T([]), o = l((t) => {
+import { useToggle as I } from "../../../hooks/useToggle.js";
+import { TagSelectContext as R } from "./TagSelect.context.js";
+import { useCallback as l, useRef as x, useState as T } from "react";
+import { jsx as w } from "react/jsx-runtime";
+var k = ({ children: m, defaultOptions: n = [], multiselect: d = !0 }) => {
+  const i = x(null), [p, c] = I(!1), [S, g] = T(n), [a, u] = T([]), o = l((t) => {
     if (i.current) {
-      const s = t.map(({ id: c, label: e }) => ({
-        id: c,
+      const s = t.map(({ id: r, label: e }) => ({
+        id: r,
         value: e
       }));
       i.current.value = JSON.stringify(s);
     }
-  }, []), f = l(
-    (t) => {
-      const s = [...d ? r : [], t];
-      u(s);
-      const c = s.map((e) => e.id);
-      g(() => d ? n.filter(
-        (e) => !c.includes(e.id)
-      ) : n.map((e) => ({
-        ...e,
-        isSelected: c.includes(e.id)
-      }))), o(s), a(!1);
+  }, []), f = l((t) => {
+    const s = [...d ? a : [], t];
+    u(s);
+    const r = s.map((e) => e.id);
+    g(() => d ? n.filter((e) => !r.includes(e.id)) : n.map((e) => ({
+      ...e,
+      isSelected: r.includes(e.id)
+    }))), o(s), c(!1);
+  }, [
+    n,
+    o,
+    d,
+    a,
+    c
+  ]), v = l((t) => {
+    const s = a.filter((e) => e.id !== t.id);
+    u(s);
+    const r = s.map((e) => e.id);
+    g(() => n.filter((e) => !r.includes(e.id))), o(s);
+  }, [
+    n,
+    o,
+    a
+  ]), h = l((t) => c(t), [c]);
+  return /* @__PURE__ */ w(R.Provider, {
+    value: {
+      tags: S,
+      selectedTags: a,
+      isOpen: p,
+      inputRef: i,
+      onSelectTag: f,
+      onRemoveTag: v,
+      onOpen: h
     },
-    [
-      n,
-      o,
-      d,
-      r,
-      a
-    ]
-  ), v = l(
-    (t) => {
-      const s = r.filter((e) => e.id !== t.id);
-      u(s);
-      const c = s.map((e) => e.id);
-      g(
-        () => n.filter((e) => !c.includes(e.id))
-      ), o(s);
-    },
-    [n, o, r]
-  ), h = l(
-    (t) => a(t),
-    [a]
-  );
-  return /* @__PURE__ */ I(
-    x.Provider,
-    {
-      value: {
-        tags: S,
-        selectedTags: r,
-        isOpen: p,
-        inputRef: i,
-        onSelectTag: f,
-        onRemoveTag: v,
-        onOpen: h
-      },
-      children: m
-    }
-  );
+    children: m
+  });
 };
 export {
   k as TagSelectProvider

package/dist/components/TagSelect/contexts/index.js

@@ -1,6 +1,6 @@
-import { useTagSelect as o } from "./TagSelect.hook.js";
-import { TagSelectProvider as a } from "./TagSelect.provider.js";
+import { useTagSelect as r } from "./TagSelect.hook.js";
+import { TagSelectProvider as t } from "./TagSelect.provider.js";
 export {
-  a as TagSelectProvider,
-  o as useTagSelect
+  t as TagSelectProvider,
+  r as useTagSelect
 };

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

@@ -1,32 +1,23 @@
-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) => {
+import { useTagSelect as o } from "../contexts/TagSelect.hook.js";
+import { useCallback as l, useEffect as c, useRef as u } from "react";
+var f = () => {
+  const n = u(null), { onOpen: e } = o();
+  return c(() => {
+    const t = new AbortController(), r = (a) => {
       a.key === "Escape" && e(!1);
-    }, o = (a) => {
+    }, s = (a) => {
       n.current?.contains(a.target) || e(!1);
     };
-    return document.addEventListener("keydown", s, {
-      signal: t.signal
-    }), document.addEventListener("mousedown", o, {
-      signal: t.signal
-    }), () => {
+    return document.addEventListener("keydown", r, { signal: t.signal }), document.addEventListener("mousedown", s, { signal: t.signal }), () => {
       t.abort();
     };
-  }, [e, n]);
-  const r = u(
-    (t) => {
-      t.target?.closest("[data-value]") || e(!0);
-    },
-    [e]
-  );
-  return {
+  }, [e, n]), {
     wrapperRef: n,
-    handleOpen: r
+    handleOpen: l((t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    }, [e])
   };
 };
 export {
-  g as useTagSelect
+  f as useTagSelect
 };

package/dist/components/TextArea/TextArea.js

@@ -1,37 +1,30 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { t as m } from "../../utils-DHuiYnx1.js";
+import { textAreaVariants as h } from "./TextArea.variants.js";
 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: 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
-        }
-      )
-    ] });
-  }
-);
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+var g = u(({ initialValue: s, label: r, labelWrapperClassName: o, name: i, placeholder: c, rows: d = 3, theme: n, className: f, ...a }, x) => {
+  const t = p(), l = i ? `${t}-name` : t;
+  return /* @__PURE__ */ v("div", {
+    className: "flex flex-col gap-2",
+    "data-theme": n,
+    children: [r ? /* @__PURE__ */ e("div", {
+      className: m(o),
+      children: /* @__PURE__ */ e("label", {
+        htmlFor: l,
+        className: "cursor-pointer",
+        children: r
+      })
+    }) : null, /* @__PURE__ */ e("textarea", {
+      id: l,
+      ref: x,
+      className: m(h({ className: f })),
+      rows: d,
+      placeholder: c,
+      value: s ?? a.value,
+      ...a
+    })]
+  });
+});
 export {
   g as TextArea
 };

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

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const o = r([
+import { t as r } from "../../dist-DtEbXv47.js";
+var i = r([
   "border",
   "border-gray-200",
   "disabled:cursor-not-allowed",
@@ -16,5 +16,5 @@ const o = r([
   "focus:ring-kubefirst-primary"
 ]);
 export {
-  o as textAreaVariants
+  i as textAreaVariants
 };

package/dist/components/TimePicker/TimePicker.js

@@ -1,15 +1,17 @@
+import { TimePickerProvider as c } from "./contexts/time-picker.provider.js";
+import { Wrapper as a } from "./components/Wrapper/Wrapper.js";
 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,
+var s = ({ format: e = "12", mode: i = "select", showList: m = !0, time: o, onChange: t, ...p }) => /* @__PURE__ */ r(c, {
+  format: e,
   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";
+  children: /* @__PURE__ */ r(a, {
+    mode: i,
+    showList: m,
+    ...p
+  })
+});
+s.displayName = "KonstructTimePicker";
 export {
-  P as TimePicker
+  s as TimePicker
 };

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

@@ -1,5 +1,5 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const r = t([
+import { t } from "../../dist-DtEbXv47.js";
+var r = t([
   "border",
   "rounded",
   "p-2.5",

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

@@ -1,125 +1,99 @@
+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";
-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,
+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;
+    }
+    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"
     });
-  }, [n, f]), H(() => {
+  }, [l, m]), D(() => {
     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({
+    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"
     });
-  }, [a, n, p]), n === "12") {
+  }, [
+    a,
+    l,
+    p
+  ]), l === "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
-          );
-        })
-      }
-    );
-  }
-  return /* @__PURE__ */ i(
-    "ul",
-    {
+    return /* @__PURE__ */ i("ul", {
       ref: c,
-      className: l(D()),
+      className: s(H()),
       "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
-        );
+      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);
       })
-    }
-  );
+    });
+  }
+  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);
+    })
+  });
 };
-h.displayName = "HoursList";
+$.displayName = "HoursList";
 export {
-  h as HoursList
+  $ as HoursList
 };

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

@@ -1,91 +1,56 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import { useRef as A, useCallback as p } from "react";
-import { cn as t } from "../../../../utils/index.js";
-import { buttonVariants as b, liVariants as y } from "../../TimePicker.variants.js";
-import { useTimePickerContext as D } from "../../contexts/time-picker.hook.js";
-const M = ({
-  listClassName: k,
-  listItemClassName: n,
-  listItemButtonClassName: c,
-  onClose: f
-}) => {
-  const u = A(null), { format: w, isAM: r, onSelectAM: s, onSelectPM: i } = D(), m = p(
-    (e, a) => {
-      e.currentTarget?.blur(), a();
-    },
-    []
-  ), d = p(
-    (e, a) => {
-      const l = u.current?.querySelectorAll("button");
-      if (!l) return;
-      const x = e.key === "Tab" && !e.shiftKey, h = e.key === "Tab" && e.shiftKey;
-      e.key === "ArrowDown" || e.key === "ArrowUp" || x || h ? (e.preventDefault(), a ? l[1]?.focus() : l[0]?.focus()) : e.key === "Enter" && (e.preventDefault(), a ? s() : i(), f?.());
-    },
-    [s, i, f]
-  );
-  return w === "24" ? null : /* @__PURE__ */ N(
-    "ul",
-    {
-      ref: u,
-      className: t("flex items-center justify-center flex-col", k),
-      "aria-label": "meridian",
-      role: "listbox",
-      children: [
-        /* @__PURE__ */ o(
-          "li",
-          {
-            className: t(y({ className: n })),
-            "data-active": r,
-            role: "presentation",
-            children: /* @__PURE__ */ o(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                tabIndex: r ? 0 : -1,
-                className: t(
-                  b({ className: c }),
-                  {
-                    "dark:text-slate-50": !r
-                  }
-                ),
-                onClick: (e) => m(e, s),
-                onKeyDown: (e) => d(e, !0),
-                children: "AM"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ o(
-          "li",
-          {
-            className: t(y({ className: n })),
-            "data-active": !r,
-            role: "presentation",
-            children: /* @__PURE__ */ o(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                tabIndex: r ? -1 : 0,
-                className: t(
-                  b({ className: c }),
-                  {
-                    "dark:text-slate-50": r
-                  }
-                ),
-                onClick: (e) => m(e, i),
-                onKeyDown: (e) => d(e, !1),
-                children: "PM"
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+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"
+      })
+    })]
+  });
 };
-M.displayName = "MeridianList";
+T.displayName = "MeridianList";
 export {
-  M as MeridianList
+  T as MeridianList
 };