@mci-ui/mci-ui 0.0.94 → 0.0.96

package/dist/shared/ui/mciTimePicker/MciTimePicker.js

@@ -1,9 +1,9 @@
-import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { jsx as l, jsxs as k } from "react/jsx-runtime";
 import { ClockCircle as De } from "@solar-icons/react";
-import { forwardRef as Me, useState as y, useRef as Pe, useMemo as $e, useCallback as k, useEffect as Q } from "react";
-import { useClickOutside as Se, useEscapeKey as Te, cn as g } from "../../lib/utils.js";
-import Ee from "../mciInput/MciInput.js";
-const c = (o) => o.toString().padStart(2, "0"), T = 31, ee = {
+import { forwardRef as Me, useState as x, useRef as Pe, useMemo as Se, useCallback as C, useEffect as F } from "react";
+import { useClickOutside as Te, useEscapeKey as Ee, cn as p } from "../../lib/utils.js";
+import Oe from "../mciInput/MciInput.js";
+const c = (u) => u.toString().padStart(2, "0"), E = 31, te = {
   en: {
     day: "Day",
     hour: "Hour",
@@ -31,7 +31,7 @@ const c = (o) => o.toString().padStart(2, "0"), T = 31, ee = {
     durationPlaceholder: "Дни, часы, минуты",
     units: { day: "дн", hour: "ч", minute: "мин" }
   }
-}, Oe = {
+}, Le = {
   blue: {
     button: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-[rgba(21,93,252,0.25)]",
     darkButton: "bg-blue-500 text-black hover:bg-blue-400 focus:ring-blue-500/35",
@@ -53,338 +53,349 @@ const c = (o) => o.toString().padStart(2, "0"), T = 31, ee = {
     darkStep: "text-orange-300 hover:bg-orange-500/10",
     input: "focus:border-orange-500 focus:ring-orange-500/20"
   }
-}, Le = (o, i) => `${c(o)}:${c(i)}`, Be = (o, i, e, r) => {
-  const { units: s } = ee[r];
-  return `${c(o)} ${s.day} ${c(i)} ${s.hour} ${c(e)} ${s.minute}`;
-}, ze = (o, i, e, r, s) => o === "duration" ? Be(i, e, r, s) : Le(e, r), V = (o, i, e, r, s) => o === "duration" && i === 0 && e === 0 && r === 0 ? null : ze(o, i, e, r, s), Z = (o, i, e, r, s) => V(o, i, e, r, s) ?? "", R = (o, i) => {
-  if (!o) return null;
-  const e = o.replace(/\D/g, "");
+}, Be = (u, i) => `${c(u)}:${c(i)}`, ze = (u, i, e, o, r = "text") => {
+  if (r === "dot")
+    return `${c(u)}.${c(i)}.${c(e)}`;
+  const { units: s } = te[o];
+  return `${c(u)} ${s.day} ${c(i)} ${s.hour} ${c(e)} ${s.minute}`;
+}, Re = (u, i, e, o, r, s = "text") => u === "duration" ? ze(i, e, o, r, s) : Be(e, o), A = (u, i, e, o, r, s = "text") => u === "duration" && i === 0 && e === 0 && o === 0 ? null : Re(u, i, e, o, r, s), ee = (u, i, e, o, r, s = "text") => A(u, i, e, o, r, s) ?? "", V = (u, i) => {
+  if (!u) return null;
+  const e = u.replace(/\D/g, "");
   if (i === "duration") {
     if (e.length !== 6) return null;
-    const C = Number.parseInt(e.slice(0, 2), 10), D = Number.parseInt(e.slice(2, 4), 10), d = Number.parseInt(e.slice(4, 6), 10);
-    return C < 0 || C > T || D < 0 || D > 23 || d < 0 || d > 59 ? null : { days: C, hours: D, minutes: d };
+    const s = Number.parseInt(e.slice(0, 2), 10), $ = Number.parseInt(e.slice(2, 4), 10), D = Number.parseInt(e.slice(4, 6), 10);
+    return s < 0 || s > E || $ < 0 || $ > 23 || D < 0 || D > 59 ? null : { days: s, hours: $, minutes: D };
   }
   if (e.length !== 4) return null;
-  const r = Number.parseInt(e.slice(0, 2), 10), s = Number.parseInt(e.slice(2, 4), 10);
-  return r < 0 || r > 23 || s < 0 || s > 59 ? null : { days: 0, hours: r, minutes: s };
-}, Re = (o, i, e) => {
-  const r = o.replace(/\D/g, "").slice(0, i === "duration" ? 6 : 4);
+  const o = Number.parseInt(e.slice(0, 2), 10), r = Number.parseInt(e.slice(2, 4), 10);
+  return o < 0 || o > 23 || r < 0 || r > 59 ? null : { days: 0, hours: o, minutes: r };
+}, Ve = (u, i, e, o = "text") => {
+  const r = u.replace(/\D/g, "").slice(0, i === "duration" ? 6 : 4);
   if (i === "duration") {
-    const { units: s } = ee[e];
+    if (o === "dot")
+      return r.length > 4 ? `${r.slice(0, 2)}.${r.slice(2, 4)}.${r.slice(4)}` : r.length > 2 ? `${r.slice(0, 2)}.${r.slice(2)}` : r;
+    const { units: s } = te[e];
     return r.length > 4 ? `${r.slice(0, 2)} ${s.day} ${r.slice(2, 4)} ${s.hour} ${r.slice(4)}` : r.length > 2 ? `${r.slice(0, 2)} ${s.day} ${r.slice(2)}` : r;
   }
   return r.length > 2 ? `${r.slice(0, 2)}:${r.slice(2)}` : r;
-}, Ve = Me(
+}, Ae = Me(
   ({
-    value: o,
+    value: u,
     onChange: i,
     mode: e = "time",
+    durationFormat: o = "text",
     variant: r = "orange",
     locale: s = "en",
-    placeholder: C,
+    placeholder: $,
     label: D,
-    darkMode: d = !1,
-    disabled: E = !1,
-    required: le = !1,
-    className: ce,
+    darkMode: b = !1,
+    disabled: O = !1,
+    required: ce = !1,
+    className: he,
     error: de,
-    showClear: he = !0,
-    allowManualInput: O = !0,
-    iconPosition: te = "left",
-    size: me = "base",
-    minuteStep: fe = 1,
-    align: A = "auto"
+    showClear: me = !0,
+    allowManualInput: L = !0,
+    iconPosition: ne = "left",
+    size: fe = "base",
+    minuteStep: ge = 1,
+    align: K = "auto"
   }, pe) => {
-    const [h, K] = y(!1), [ge, be] = y(null), [ne, b] = y(""), [F, re] = y(!1), [_, se] = y(A), [H, M] = y("00"), [j, P] = y("00"), [W, $] = y("00"), L = Pe(null), B = o !== void 0 ? o : ge, l = $e(() => R(B, e), [B, e]), oe = Math.min(Math.max(Math.floor(fe) || 1, 1), 59), v = ee[s], S = Oe[r], ye = C ?? (e === "duration" ? v.durationPlaceholder : v.timePlaceholder), N = k(
+    const [d, _] = x(!1), [be, ye] = x(null), [re, y] = x(""), [H, se] = x(!1), [j, oe] = x(K), [W, M] = x("00"), [U, P] = x("00"), [X, S] = x("00"), B = Pe(null), z = u !== void 0 ? u : be, h = Se(() => V(z, e), [z, e]), ue = Math.min(Math.max(Math.floor(ge) || 1, 1), 59), v = te[s], T = Le[r], xe = $ ?? (e === "duration" ? v.durationPlaceholder : v.timePlaceholder), N = C(
       (n) => {
-        o === void 0 && be(n), i?.(n);
+        u === void 0 && ye(n), i?.(n);
       },
-      [i, o]
-    ), ue = k(() => {
-      const n = R(B, e);
-      M(c(n?.days ?? 0)), P(c(n?.hours ?? 0)), $(c(n?.minutes ?? 0));
-    }, [B, e]), U = k(() => {
-      E || (ue(), K(!0));
-    }, [E, ue]), z = k(() => {
-      K(!1), b(
-        l ? Z(
+      [i, u]
+    ), ie = C(() => {
+      const n = V(z, e);
+      M(c(n?.days ?? 0)), P(c(n?.hours ?? 0)), S(c(n?.minutes ?? 0));
+    }, [z, e]), Y = C(() => {
+      O || (ie(), _(!0));
+    }, [O, ie]), R = C(() => {
+      _(!1), y(
+        h ? ee(
           e,
-          l.days,
-          l.hours,
-          l.minutes,
-          s
+          h.days,
+          h.hours,
+          h.minutes,
+          s,
+          o
         ) : ""
       );
-    }, [l, s, e]), Ne = k(
+    }, [h, o, s, e]), Ne = C(
       (n) => {
-        n.preventDefault(), n.stopPropagation(), h ? z() : U();
+        n.preventDefault(), n.stopPropagation(), d ? R() : Y();
       },
-      [z, h, U]
-    ), { handleClick: X } = Se(L, z), { handleEscape: Y } = Te(z);
-    Q(() => {
-      !h && !F && b(
-        l ? Z(
+      [R, d, Y]
+    ), { handleClick: q } = Te(B, R), { handleEscape: G } = Ee(R);
+    F(() => {
+      !d && !H && y(
+        h ? ee(
           e,
-          l.days,
-          l.hours,
-          l.minutes,
-          s
+          h.days,
+          h.hours,
+          h.minutes,
+          s,
+          o
         ) : ""
       );
-    }, [l, F, h, s, e]), Q(() => {
-      if (h && A === "auto" && L.current) {
-        const n = L.current.getBoundingClientRect(), u = window.innerWidth - n.right, t = n.left, f = e === "duration" ? 316 : 220;
-        u < f && t > f ? se("right") : se("left");
+    }, [h, o, H, d, s, e]), F(() => {
+      if (d && K === "auto" && B.current) {
+        const n = B.current.getBoundingClientRect(), a = window.innerWidth - n.right, t = n.left, f = e === "duration" ? 316 : 220;
+        a < f && t > f ? oe("right") : oe("left");
       }
-    }, [A, h, e]), Q(() => {
-      if (h)
-        return document.addEventListener("mousedown", X), document.addEventListener("keydown", Y), () => {
-          document.removeEventListener("mousedown", X), document.removeEventListener("keydown", Y);
+    }, [K, d, e]), F(() => {
+      if (d)
+        return document.addEventListener("mousedown", q), document.addEventListener("keydown", G), () => {
+          document.removeEventListener("mousedown", q), document.removeEventListener("keydown", G);
         };
-    }, [X, Y, h]);
+    }, [q, G, d]);
     const ve = () => {
-      re(!0), O || U();
-    }, xe = () => {
-      if (re(!1), !O) return;
-      const n = ne.trim();
+      se(!0), L || Y();
+    }, Ie = () => {
+      if (se(!1), !L) return;
+      const n = re.trim();
       if (!n) {
         N(null);
         return;
       }
-      const u = R(n, e);
-      if (u) {
-        const t = V(
+      const a = V(n, e);
+      if (a) {
+        const t = A(
           e,
-          u.days,
-          u.hours,
-          u.minutes,
-          s
+          a.days,
+          a.hours,
+          a.minutes,
+          s,
+          o
         );
-        N(t), b(t ?? "");
+        N(t), y(t ?? "");
         return;
       }
-      b(
-        l ? Z(
+      y(
+        h ? ee(
           e,
-          l.days,
-          l.hours,
-          l.minutes,
-          s
+          h.days,
+          h.hours,
+          h.minutes,
+          s,
+          o
         ) : ""
       );
-    }, Ie = (n) => {
-      if (!O) return;
-      const u = Re(n.target.value, e, s), t = u.replace(/\D/g, "");
+    }, we = (n) => {
+      if (!L) return;
+      const a = Ve(n.target.value, e, s, o), t = a.replace(/\D/g, "");
       if (e === "duration") {
-        if (t.length >= 1 && Number.parseInt(t[0] ?? "0", 10) > 3 || t.length >= 2 && Number.parseInt(t.slice(0, 2), 10) > T || t.length >= 3 && Number.parseInt(t[2] ?? "0", 10) > 2 || t.length >= 4 && Number.parseInt(t.slice(2, 4), 10) > 23 || t.length >= 5 && Number.parseInt(t[4] ?? "0", 10) > 5 || t.length >= 6 && Number.parseInt(t.slice(4, 6), 10) > 59)
+        if (t.length >= 1 && Number.parseInt(t[0] ?? "0", 10) > 3 || t.length >= 2 && Number.parseInt(t.slice(0, 2), 10) > E || t.length >= 3 && Number.parseInt(t[2] ?? "0", 10) > 2 || t.length >= 4 && Number.parseInt(t.slice(2, 4), 10) > 23 || t.length >= 5 && Number.parseInt(t[4] ?? "0", 10) > 5 || t.length >= 6 && Number.parseInt(t.slice(4, 6), 10) > 59)
           return;
       } else if (t.length >= 1 && Number.parseInt(t[0] ?? "0", 10) > 2 || t.length >= 2 && Number.parseInt(t.slice(0, 2), 10) > 23 || t.length >= 3 && Number.parseInt(t[2] ?? "0", 10) > 5 || t.length >= 4 && Number.parseInt(t.slice(2, 4), 10) > 59) return;
-      b(u);
+      y(a);
       const f = e === "duration" ? 6 : 4;
       if (t.length === f) {
-        const m = R(u, e);
+        const m = V(a, e);
         if (m) {
-          const p = V(
+          const g = A(
             e,
             m.days,
             m.hours,
             m.minutes,
-            s
+            s,
+            o
           );
-          N(p), b(p ?? "");
+          N(g), y(g ?? "");
         }
-      } else u === "" && N(null);
-    }, we = k(() => {
-      N(null), b(""), M("00"), P("00"), $("00");
-    }, [N]), q = (n, u) => {
-      const t = u.replace(/\D/g, "").slice(0, 2);
-      n === "days" && t.length === 2 && Number.parseInt(t, 10) > T || n === "hours" && t.length === 2 && Number.parseInt(t, 10) > 23 || n === "minutes" && t.length === 2 && Number.parseInt(t, 10) > 59 || (n === "days" ? M(t) : n === "hours" ? P(t) : $(t));
-    }, x = (n, u) => {
+      } else a === "" && N(null);
+    }, ke = C(() => {
+      N(null), y(""), M("00"), P("00"), S("00");
+    }, [N]), J = (n, a) => {
+      const t = a.replace(/\D/g, "").slice(0, 2);
+      n === "days" && t.length === 2 && Number.parseInt(t, 10) > E || n === "hours" && t.length === 2 && Number.parseInt(t, 10) > 23 || n === "minutes" && t.length === 2 && Number.parseInt(t, 10) > 59 || (n === "days" ? M(t) : n === "hours" ? P(t) : S(t));
+    }, I = (n, a) => {
       if (n === "days") {
-        const m = Number.parseInt(H || "0", 10), p = Math.min(Math.max(m + u, 0), T);
-        M(c(p));
+        const m = Number.parseInt(W || "0", 10), g = Math.min(Math.max(m + a, 0), E);
+        M(c(g));
         return;
       }
       if (n === "hours") {
-        const p = (Number.parseInt(j || "0", 10) + u + 24) % 24;
-        P(c(p));
+        const g = (Number.parseInt(U || "0", 10) + a + 24) % 24;
+        P(c(g));
         return;
       }
-      const f = (Number.parseInt(W || "0", 10) + u + 60) % 60;
-      $(c(f));
-    }, ke = () => {
-      const n = Number.parseInt(H || "0", 10), u = Number.parseInt(j || "0", 10), t = Number.parseInt(W || "0", 10), f = Math.min(Math.max(n, 0), T), m = Math.min(Math.max(u, 0), 23), p = Math.min(Math.max(t, 0), 59), ae = V(
+      const f = (Number.parseInt(X || "0", 10) + a + 60) % 60;
+      S(c(f));
+    }, Ce = () => {
+      const n = Number.parseInt(W || "0", 10), a = Number.parseInt(U || "0", 10), t = Number.parseInt(X || "0", 10), f = Math.min(Math.max(n, 0), E), m = Math.min(Math.max(a, 0), 23), g = Math.min(Math.max(t, 0), 59), le = A(
         e,
         f,
         m,
-        p,
-        s
+        g,
+        s,
+        o
       );
-      N(ae), b(ae ?? ""), M(c(f)), P(c(m)), $(c(p)), K(!1);
-    }, G = g(
+      N(le), y(le ?? ""), M(c(f)), P(c(m)), S(c(g)), _(!1);
+    }, Q = p(
       "mb-1 block text-center text-[11px] font-semibold leading-4",
-      d ? "text-neutral-100" : "text-slate-500"
-    ), I = g(
-      "h-6 w-full rounded-md text-base font-semibold leading-none transition-colors hover:cursor-pointer",
-      d ? S.darkStep : S.step
-    ), J = g(
+      b ? "text-neutral-100" : "text-slate-500"
+    ), w = p(
+      "h-6 w-full cursor-pointer rounded-md text-base font-semibold leading-none transition-colors",
+      b ? T.darkStep : T.step
+    ), Z = p(
       "h-8 w-full rounded-md border px-1 text-center text-sm font-semibold outline-none transition-colors focus:ring-2",
-      d ? "border-neutral-300 bg-[#1F2025]" : "border-slate-200 bg-white",
-      S.input
-    ), Ce = g(
-      "mt-2 h-8 w-full rounded-md text-sm font-semibold transition-colors hover:cursor-pointer focus:ring-2",
-      d ? S.darkButton : S.button
-    ), ie = /* @__PURE__ */ a(
+      b ? "border-neutral-300 bg-[#1F2025]" : "border-slate-200 bg-white",
+      T.input
+    ), $e = p(
+      "mt-2 h-8 w-full cursor-pointer rounded-md text-sm font-semibold transition-colors focus:ring-2",
+      b ? T.darkButton : T.button
+    ), ae = /* @__PURE__ */ l(
       "div",
       {
         onClick: Ne,
-        className: g(
+        className: p(
           "flex cursor-pointer items-center justify-center rounded-md p-1 transition-colors",
-          E ? "pointer-events-none opacity-50" : d ? "hover:bg-neutral-300 active:bg-neutral-200" : "hover:bg-slate-100 active:bg-slate-200"
+          O ? "pointer-events-none opacity-50" : b ? "hover:bg-neutral-300 active:bg-neutral-200" : "hover:bg-slate-100 active:bg-slate-200"
         ),
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ l(
           De,
           {
             weight: "Linear",
             size: 20,
-            className: g(
-              d ? h || F ? "text-white" : "text-neutral-100" : "text-slate-400"
+            className: p(
+              b ? d || H ? "text-white" : "text-neutral-100" : "text-slate-400"
             )
           }
         )
       }
     );
-    return /* @__PURE__ */ w("div", { ref: L, className: g("relative w-full group", ce), children: [
-      /* @__PURE__ */ a("div", { ref: pe, children: /* @__PURE__ */ a(
-        Ee,
+    return /* @__PURE__ */ k("div", { ref: B, className: p("relative w-full group", he), children: [
+      /* @__PURE__ */ l("div", { ref: pe, children: /* @__PURE__ */ l(
+        Oe,
         {
           label: D,
-          placeholder: ye,
-          value: ne,
-          onChange: Ie,
-          icon: te === "left" ? ie : void 0,
-          rightIcon: te === "right" ? ie : void 0,
-          disabled: E,
-          required: le,
+          placeholder: xe,
+          value: re,
+          onChange: we,
+          icon: ne === "left" ? ae : void 0,
+          rightIcon: ne === "right" ? ae : void 0,
+          disabled: O,
+          required: ce,
           error: de,
-          darkMode: d,
-          size: me,
+          darkMode: b,
+          size: fe,
           maxLength: e === "duration" ? 24 : 5,
           onFocus: ve,
-          onBlur: xe,
-          readOnly: !O,
-          showClearButton: he,
-          onClear: we
+          onBlur: Ie,
+          readOnly: !L,
+          showClearButton: me,
+          onClear: ke
         }
       ) }),
-      h && /* @__PURE__ */ w(
+      d && /* @__PURE__ */ k(
         "div",
         {
-          className: g(
+          className: p(
             "absolute top-[calc(100%+4px)] z-100 rounded-lg border p-2.5 shadow-xl",
             "animate-in fade-in zoom-in-95 duration-200",
             e === "duration" ? "w-[300px]" : "w-52",
-            d ? "border-neutral-200 bg-[#1F2025] text-neutral-50" : "border-slate-200 bg-white text-slate-700",
-            _ === "right" && "right-0 origin-top-right",
-            _ === "left" && "left-0 origin-top-left",
-            _ === "center" && "left-1/2 -translate-x-1/2 origin-top"
+            b ? "border-neutral-200 bg-[#1F2025] text-neutral-50" : "border-slate-200 bg-white text-slate-700",
+            j === "right" && "right-0 origin-top-right",
+            j === "left" && "left-0 origin-top-left",
+            j === "center" && "left-1/2 -translate-x-1/2 origin-top"
           ),
           onMouseDown: (n) => n.stopPropagation(),
           children: [
-            /* @__PURE__ */ w(
+            /* @__PURE__ */ k(
               "div",
               {
-                className: g(
+                className: p(
                   "grid gap-2",
                   e === "duration" ? "grid-cols-3" : "grid-cols-2"
                 ),
                 children: [
-                  e === "duration" && /* @__PURE__ */ w("div", { className: "space-y-1", children: [
-                    /* @__PURE__ */ a("span", { className: G, children: v.day }),
-                    /* @__PURE__ */ a(
+                  e === "duration" && /* @__PURE__ */ k("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ l("span", { className: Q, children: v.day }),
+                    /* @__PURE__ */ l(
                       "button",
                       {
                         type: "button",
-                        onClick: () => x("days", 1),
-                        className: I,
+                        onClick: () => I("days", 1),
+                        className: w,
                         children: "+"
                       }
                     ),
-                    /* @__PURE__ */ a(
+                    /* @__PURE__ */ l(
                       "input",
                       {
-                        value: H,
-                        onChange: (n) => q("days", n.target.value),
-                        className: J,
+                        value: W,
+                        onChange: (n) => J("days", n.target.value),
+                        className: Z,
                         inputMode: "numeric"
                       }
                     ),
-                    /* @__PURE__ */ a(
+                    /* @__PURE__ */ l(
                       "button",
                       {
                         type: "button",
-                        onClick: () => x("days", -1),
-                        className: I,
+                        onClick: () => I("days", -1),
+                        className: w,
                         children: "-"
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ w("div", { className: "space-y-1", children: [
-                    /* @__PURE__ */ a("span", { className: G, children: v.hour }),
-                    /* @__PURE__ */ a(
+                  /* @__PURE__ */ k("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ l("span", { className: Q, children: v.hour }),
+                    /* @__PURE__ */ l(
                       "button",
                       {
                         type: "button",
-                        onClick: () => x("hours", 1),
-                        className: I,
+                        onClick: () => I("hours", 1),
+                        className: w,
                         children: "+"
                       }
                     ),
-                    /* @__PURE__ */ a(
+                    /* @__PURE__ */ l(
                       "input",
                       {
-                        value: j,
-                        onChange: (n) => q("hours", n.target.value),
-                        className: J,
+                        value: U,
+                        onChange: (n) => J("hours", n.target.value),
+                        className: Z,
                         inputMode: "numeric"
                       }
                     ),
-                    /* @__PURE__ */ a(
+                    /* @__PURE__ */ l(
                       "button",
                       {
                         type: "button",
-                        onClick: () => x("hours", -1),
-                        className: I,
+                        onClick: () => I("hours", -1),
+                        className: w,
                         children: "-"
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ w("div", { className: "space-y-1", children: [
-                    /* @__PURE__ */ a("span", { className: G, children: v.minute }),
-                    /* @__PURE__ */ a(
+                  /* @__PURE__ */ k("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ l("span", { className: Q, children: v.minute }),
+                    /* @__PURE__ */ l(
                       "button",
                       {
                         type: "button",
-                        onClick: () => x("minutes", oe),
-                        className: I,
+                        onClick: () => I("minutes", ue),
+                        className: w,
                         children: "+"
                       }
                     ),
-                    /* @__PURE__ */ a(
+                    /* @__PURE__ */ l(
                       "input",
                       {
-                        value: W,
-                        onChange: (n) => q("minutes", n.target.value),
-                        className: J,
+                        value: X,
+                        onChange: (n) => J("minutes", n.target.value),
+                        className: Z,
                         inputMode: "numeric"
                       }
                     ),
-                    /* @__PURE__ */ a(
+                    /* @__PURE__ */ l(
                       "button",
                       {
                         type: "button",
-                        onClick: () => x("minutes", -oe),
-                        className: I,
+                        onClick: () => I("minutes", -ue),
+                        className: w,
                         children: "-"
                       }
                     )
@@ -392,12 +403,12 @@ const c = (o) => o.toString().padStart(2, "0"), T = 31, ee = {
                 ]
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ l(
               "button",
               {
                 type: "button",
-                onClick: ke,
-                className: Ce,
+                onClick: Ce,
+                className: $e,
                 children: v.ok
               }
             )
@@ -407,7 +418,7 @@ const c = (o) => o.toString().padStart(2, "0"), T = 31, ee = {
     ] });
   }
 );
-Ve.displayName = "MciTimePicker";
+Ae.displayName = "MciTimePicker";
 export {
-  Ve as default
+  Ae as default
 };