@konstructio/ui 0.1.2-alpha.101 → 0.1.2-alpha.104

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

@@ -1,68 +1,68 @@
-import { t as s } from "../../../../utils-Cx-WzRZF.js";
+import { t as l } from "../../../../utils-Cx-WzRZF.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(() => {
+import { buttonVariants as k, liVariants as d, ulVariants as M } from "../../TimePicker.variants.js";
+import { useEffect as p, useRef as m } from "react";
+import { jsx as n } from "react/jsx-runtime";
+var S = ({ minutes: a, scrollBehavior: s, onClose: c }) => {
+  const i = m(null), y = m(a), { isTyping: u, onSelectMinute: f } = h();
+  p(() => {
     const t = i.current;
     if (t) {
       const e = `0${y.current}`.slice(-2);
       t.querySelector(`[data-value="${e}"]`)?.scrollIntoView({
-        behavior: u,
+        behavior: s,
         block: "center"
       });
     }
-  }, [u]), b(() => {
-    if (!f) return;
+  }, [s]), p(() => {
+    if (!u) return;
     const t = i.current;
     if (t) {
-      const e = `0${o}`.slice(-2);
+      const e = `0${a}`.slice(-2);
       t.querySelector(`[data-value="${e}"]`)?.scrollIntoView({
         behavior: "instant",
         block: "center"
       });
     }
-  }, [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;
+  }, [a, u]);
+  const b = (t, e) => {
+    f(t), e.currentTarget?.blur();
+  }, w = (t, e) => {
+    const o = i.current?.querySelectorAll("button");
+    if (!o) 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();
+      if (t.preventDefault(), f(e), c) {
+        c();
         return;
       }
       document.querySelector('[aria-label="meridian"]')?.querySelector('li[data-active="true"] button')?.focus();
       return;
     }
-    r !== e && a[r]?.focus();
-  }, [l, n]);
-  return /* @__PURE__ */ c("ul", {
+    r !== e && o[r]?.focus();
+  };
+  return /* @__PURE__ */ n("ul", {
     ref: i,
-    className: s(S()),
+    className: l(M()),
     "aria-label": "minutes",
     role: "listbox",
     children: Array.from({ length: 60 }, (t, e) => {
-      const a = o === e;
-      return /* @__PURE__ */ c("li", {
-        className: s(M()),
+      const o = a === e;
+      return /* @__PURE__ */ n("li", {
+        className: l(d()),
         "data-value": `0${e}`.slice(-2),
-        "data-active": a,
+        "data-active": o,
         role: "presentation",
-        children: /* @__PURE__ */ c("button", {
+        children: /* @__PURE__ */ n("button", {
           type: "button",
           role: "option",
-          tabIndex: a ? 0 : -1,
-          className: s(d()),
-          onClick: (r) => k(e, r),
+          tabIndex: o ? 0 : -1,
+          className: l(k()),
+          onClick: (r) => b(e, r),
           onKeyDown: (r) => w(r, e),
           children: `0${e}`.slice(-2)
         })
@@ -70,7 +70,7 @@ var D = ({ minutes: o, scrollBehavior: u, onClose: n }) => {
     })
   });
 };
-D.displayName = "MinutesList";
+S.displayName = "MinutesList";
 export {
-  D as MinutesList
+  S as MinutesList
 };

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

@@ -1,146 +1,138 @@
-import { t as I } from "../../../../utils-Cx-WzRZF.js";
+import { t as y } from "../../../../utils-Cx-WzRZF.js";
+import { useClickOutside as Q } from "../../../../hooks/useClickOutside.js";
 import { t as X } from "../../../../chevron-down-DNP-OOAQ.js";
-import { Typography as N } from "../../../Typography/Typography.js";
-import { parseTimeString as S } from "../../utils/index.js";
+import { Typography as w } from "../../../Typography/Typography.js";
+import { parseTimeString as P } from "../../utils/index.js";
 import { useTimePickerContext as Y } from "../../contexts/time-picker.hook.js";
 import { timePickerVariants as Z } from "../../TimePicker.variants.js";
 import { WrapperList as _ } from "../WrapperList/WrapperList.js";
-import { useCallback as m, useEffect as A, useId as ee, useRef as T, useState as $ } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-var ce = ({ name: D, label: M, isRequired: O, scrollBehavior: R, className: V, listClassName: F, listItemClassName: W, listItemButtonClassName: j, disabled: n, mode: E = "select", showList: w = !0, error: B, placeholder: H }) => {
-  const L = ee(), [g, o] = $(!1), h = T(!1), C = T(null), P = T(null), { format: s, formattedTime: c, setTimeDirectly: x, setIsTyping: l } = Y(), v = D ?? `time-${L}`, [b, k] = $(c), [K, i] = $(), y = B || K;
-  A(() => {
-    h.current || (k(c), i(void 0));
-  }, [c]);
-  const U = m(() => {
-    n || o((t) => !t);
-  }, [n]), q = m(() => {
-    !n && w && o(!0), i(void 0);
-  }, [n, w]), z = m((t) => {
-    t.target !== P.current && (h.current = !1, l(!1));
-  }, [l]), G = m((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);
+import { useCallback as ee, useEffect as S, useId as te, useRef as C, useState as I } from "react";
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+var ue = ({ name: A, label: N, isRequired: D, scrollBehavior: O, className: R, listClassName: V, listItemClassName: F, listItemButtonClassName: W, disabled: l, mode: T = "select", showList: $ = !0, error: j, placeholder: B }) => {
+  const H = te(), [u, a] = I(!1), m = C(!1), b = C(null), M = C(null), { format: f, formattedTime: i, setTimeDirectly: E, setIsTyping: v } = Y(), g = A ?? `time-${H}`, [k, h] = I(i), [L, n] = I(), x = j || L;
+  S(() => {
+    m.current || (h(i), n(void 0));
+  }, [i]);
+  const K = () => {
+    l || a((t) => !t);
+  }, U = () => {
+    !l && $ && a(!0), n(void 0);
+  }, q = (t) => {
+    t.target !== M.current && (m.current = !1, v(!1));
+  }, z = (t) => {
+    if (b.current?.contains(t.relatedTarget)) return;
+    m.current = !1, v(!1), a(!1);
+    const r = t.currentTarget.value.trim();
+    if (r === "") {
+      n(void 0);
       return;
     }
-    const e = S(a, s);
+    const e = P(r, f);
     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}`);
+      n(void 0), E(e);
+      const o = e.getHours(), d = e.getMinutes().toString().padStart(2, "0");
+      if (f === "24") h(`${o.toString().padStart(2, "0")}:${d}`);
       else {
-        const u = r % 12 || 12;
-        k(`${u}:${p} ${r >= 12 ? "PM" : "AM"}`);
+        const c = o % 12 || 12;
+        h(`${c}:${d} ${o >= 12 ? "PM" : "AM"}`);
       }
-    } else i("Invalid time");
-  }, [
-    s,
-    x,
-    l
-  ]), J = m((t) => {
-    const a = t.target.value;
+    } else n("Invalid time");
+  }, G = (t) => {
+    const r = 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, (Q) => Q.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;
+    m.current = !0, v(!0);
+    const o = r.length < k.length;
+    if (f === "12") {
+      const c = r.replace(/[^0-9:apmAPM\s]/g, "").replace(/[apm]/gi, (J) => J.toUpperCase());
+      c.match(/^(\d{0,2}):?(\d{0,2})\s?(A|AM|P|PM)?$/i) || c === "" ? (e = c.slice(0, 8), !o && /^\d{2}$/.test(e) && (e = e + ":")) : e = k;
     } 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 = S(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);
+      e = r.replace(/[^0-9:]/g, "").replace(/:+/g, ":").slice(0, 5), !o && /^\d{2}$/.test(e) && (e = e + ":");
+    h(e), n(void 0);
+    const d = P(e, f);
+    d && E(d);
+  };
+  return Q(b, ee(() => {
+    a(!1);
+  }, [])), S(() => {
+    const t = new AbortController(), r = (e) => {
+      e.key === "Escape" && a(!1);
     };
-    return document.addEventListener("mousedown", e, { signal: t.signal }), document.addEventListener("keydown", a, { signal: t.signal }), () => {
+    return document.addEventListener("keydown", r, { signal: t.signal }), () => {
       t.abort();
     };
-  }, []), /* @__PURE__ */ f("div", {
-    ref: C,
-    onMouseDown: E === "input" ? z : void 0,
-    className: I("w-full", "text-slate-800", "text-sm", "flex", "flex-col", "gap-2"),
+  }, []), /* @__PURE__ */ p("div", {
+    ref: b,
+    onMouseDown: T === "input" ? q : void 0,
+    className: y("w-full", "text-slate-800", "text-sm", "flex", "flex-col", "gap-2"),
     children: [
-      M ? /* @__PURE__ */ f(N, {
+      N ? /* @__PURE__ */ p(w, {
         component: "label",
         variant: "labelLarge",
-        htmlFor: v,
+        htmlFor: g,
         className: "font-medium",
         children: [
-          M,
+          N,
           " ",
-          O && /* @__PURE__ */ d(N, {
+          D && /* @__PURE__ */ s(w, {
             component: "span",
             className: "text-red-600 dark:text-red-500 text-sm font-normal",
             children: "*"
           })
         ]
       }) : null,
-      /* @__PURE__ */ f("div", {
+      /* @__PURE__ */ p("div", {
         className: "relative",
-        children: [E === "select" ? /* @__PURE__ */ f("button", {
-          "aria-label": v,
+        children: [T === "select" ? /* @__PURE__ */ p("button", {
+          "aria-label": g,
           "aria-haspopup": "listbox",
           "aria-expanded": "true",
           "aria-controls": "time-options",
-          className: I(Z({ className: V }), n && "opacity-50 cursor-not-allowed"),
-          "data-open": g,
-          onClick: U,
-          disabled: n,
-          children: [c, /* @__PURE__ */ d(X, {
+          className: y(Z({ className: R }), l && "opacity-50 cursor-not-allowed"),
+          "data-open": u,
+          onClick: K,
+          disabled: l,
+          children: [i, /* @__PURE__ */ s(X, {
             className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
-            "data-open": g
+            "data-open": u
           })]
-        }) : /* @__PURE__ */ f("div", {
+        }) : /* @__PURE__ */ p("div", {
           className: "flex flex-col gap-1",
-          children: [/* @__PURE__ */ d("input", {
-            ref: P,
+          children: [/* @__PURE__ */ s("input", {
+            ref: M,
             type: "text",
-            "aria-label": v,
-            value: b,
-            onChange: J,
-            onFocus: q,
-            onBlur: G,
-            disabled: n,
-            "data-error": !!y,
-            "data-open": g,
-            placeholder: H,
-            className: I("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__ */ d(N, {
+            "aria-label": g,
+            value: k,
+            onChange: G,
+            onFocus: U,
+            onBlur: z,
+            disabled: l,
+            "data-error": !!x,
+            "data-open": u,
+            placeholder: B,
+            className: y("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": x })
+          }), x && /* @__PURE__ */ s(w, {
             component: "span",
             className: "text-red-600 dark:text-red-500 text-xs",
-            children: y
+            children: x
           })]
-        }), w && /* @__PURE__ */ d(_, {
-          isOpen: g,
-          scrollBehavior: R,
-          listClassName: F,
-          listItemClassName: W,
-          listItemButtonClassName: j,
-          onClose: () => o(!1)
+        }), $ && /* @__PURE__ */ s(_, {
+          isOpen: u,
+          scrollBehavior: O,
+          listClassName: V,
+          listItemClassName: F,
+          listItemButtonClassName: W,
+          onClose: () => a(!1)
         })]
       }),
-      /* @__PURE__ */ d("input", {
+      /* @__PURE__ */ s("input", {
         type: "hidden",
-        name: v,
-        value: c,
+        name: g,
+        value: i,
         className: "hidden"
       })
     ]
   });
 };
 export {
-  ce as Wrapper
+  ue as Wrapper
 };

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

@@ -1,41 +1,40 @@
-import { t as s } from "../../../../utils-Cx-WzRZF.js";
-import { getHours as a, getMinutes as x } from "../../utils/index.js";
-import { useTimePickerContext as g } from "../../contexts/time-picker.hook.js";
-import { HoursList as b } from "../HoursList/HoursList.js";
-import { MeridianList as M } from "../MeridianList/MeridianList.js";
+import { t as c } from "../../../../utils-Cx-WzRZF.js";
+import { getHours as a, getMinutes as s } from "../../utils/index.js";
+import { useTimePickerContext as x } from "../../contexts/time-picker.hook.js";
+import { HoursList as g } from "../HoursList/HoursList.js";
+import { MeridianList as b } from "../MeridianList/MeridianList.js";
 import { MinutesList as h } from "../MinutesList/MinutesList.js";
-import { useMemo as d } from "react";
-import { jsx as t, jsxs as k } from "react/jsx-runtime";
-var W = ({ isOpen: p, scrollBehavior: m, listClassName: o, listItemClassName: e, listItemButtonClassName: i, onClose: n }) => {
-  const { time: r, format: u } = g(), f = d(() => a(r), [r]), c = d(() => x(r), [r]);
-  return p ? /* @__PURE__ */ k("div", {
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
+var P = ({ isOpen: d, scrollBehavior: t, listClassName: r, listItemClassName: o, listItemButtonClassName: e, onClose: m }) => {
+  const { time: n, format: p } = x(), u = a(n), f = s(n);
+  return d ? /* @__PURE__ */ k("div", {
     role: "group",
-    className: s("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"),
+    className: c("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__ */ i(g, {
+        hours: u,
+        scrollBehavior: t,
+        listClassName: r,
+        listItemClassName: o,
+        listItemButtonClassName: e
       }),
-      /* @__PURE__ */ t(h, {
-        minutes: c,
-        scrollBehavior: m,
-        listClassName: o,
-        listItemClassName: e,
-        listItemButtonClassName: i,
-        onClose: u === "24" ? n : void 0
+      /* @__PURE__ */ i(h, {
+        minutes: f,
+        scrollBehavior: t,
+        listClassName: r,
+        listItemClassName: o,
+        listItemButtonClassName: e,
+        onClose: p === "24" ? m : void 0
       }),
-      /* @__PURE__ */ t(M, {
-        listClassName: o,
-        listItemClassName: e,
-        listItemButtonClassName: i,
-        onClose: n
+      /* @__PURE__ */ i(b, {
+        listClassName: r,
+        listItemClassName: o,
+        listItemButtonClassName: e,
+        onClose: m
       })
     ]
   }) : null;
 };
 export {
-  W as WrapperList
+  P as WrapperList
 };

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

@@ -1,11 +1,11 @@
 import { getFormattedTime as g } from "../utils/index.js";
 import { TimePickerContext as v } from "./time-picker.context.js";
-import { useCallback as r, useEffect as H, useMemo as y, useState as u } from "react";
-import { jsx as k } from "react/jsx-runtime";
-var j = ({ children: f, time: c, format: m, onChange: l }) => {
-  const [i, w] = u(m), [e, a] = u(() => c), [T, D] = u(!1), n = y(() => e ? e.getHours() < 12 : !0, [e]), o = r((t) => {
+import { useCallback as r, useEffect as H, useState as u } from "react";
+import { jsx as y } from "react/jsx-runtime";
+var h = ({ children: f, time: c, format: m, onChange: l }) => {
+  const [i, w] = u(m), [e, a] = u(() => c), [T, D] = u(!1), n = e ? e.getHours() < 12 : !0, o = r((t) => {
     a(t), l?.(t);
-  }, [l]), M = r((t) => {
+  }, [l]), S = r((t) => {
     const s = e ? new Date(e) : /* @__PURE__ */ new Date();
     i === "12" ? t === 12 ? s.setHours(n ? 0 : 12) : s.setHours(n ? t : t + 12) : s.setHours(t), e || s.setMinutes(0, 0, 0), o(s);
   }, [
@@ -13,7 +13,7 @@ var j = ({ children: f, time: c, format: m, onChange: l }) => {
     n,
     e,
     o
-  ]), S = r((t) => {
+  ]), M = r((t) => {
     const s = e ? new Date(e) : /* @__PURE__ */ new Date();
     e || s.setHours(0, 0, 0, 0), s.setMinutes(t), o(s);
   }, [e, o]), p = r(() => {
@@ -37,15 +37,15 @@ var j = ({ children: f, time: c, format: m, onChange: l }) => {
     a(c);
   }, [c]), H(() => {
     w(m);
-  }, [m]), /* @__PURE__ */ k(v.Provider, {
+  }, [m]), /* @__PURE__ */ y(v.Provider, {
     value: {
       time: e,
       format: i,
       formattedTime: e ? g(e, i) : "",
       isAM: n,
       isTyping: T,
-      onSelectHour: M,
-      onSelectMinute: S,
+      onSelectHour: S,
+      onSelectMinute: M,
       onSelectAM: p,
       onSelectPM: d,
       setTimeDirectly: P,
@@ -55,5 +55,5 @@ var j = ({ children: f, time: c, format: m, onChange: l }) => {
   });
 };
 export {
-  j as TimePickerProvider
+  h as TimePickerProvider
 };

package/dist/components/Toast/Toast.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as o } from "../../Toast-CS-igZor.js";
+import { t as o } from "../../Toast-3NEz7LLa.js";
 export {
   o as Toast
 };

package/dist/components/Toast/Toast.variants.js

@@ -32,7 +32,7 @@ var t = a([
   "flex-col",
   "p-[var(--viewport-padding)]",
   "gap-8",
-  "w-[390px]",
+  "w-97.5",
   "max-w-[100vw]",
   "m-0",
   "z-50",

package/dist/components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { t as p } from "../../utils-Cx-WzRZF.js";
-import { a as c, i as h, n as x, o as f, r as g, t as w } from "../../dist-DnGj9MTf.js";
+import { a as c, i as h, n as x, o as f, r as g, t as w } from "../../dist-tGUUcv8n.js";
 import { jsx as r, jsxs as a } from "react/jsx-runtime";
 var C = ({ content: t, children: e, side: s = "top", sideOffset: o = 4, bgClassName: i = "bg-slate-700", arrowClassName: l = "fill-slate-700", textClassName: n = "text-white", className: d, delayDuration: m = 0 }) => /* @__PURE__ */ r(h, {
   delayDuration: m,