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

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

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

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

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

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

@@ -1,77 +1,40 @@
-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 { t as s } from "../../../../utils-DHuiYnx1.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 { 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 { 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", {
+    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"),
+    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;
 };
 export {
   W as WrapperList

package/dist/components/TimePicker/components/index.js

@@ -1,4 +1,4 @@
-import { WrapperList as e } from "./WrapperList/WrapperList.js";
+import { WrapperList as p } from "./WrapperList/WrapperList.js";
 export {
-  e as WrapperList
+  p as WrapperList
 };