@mci-ui/mci-ui 0.0.93 → 0.0.95

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

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