framepexls-ui-lib 0.1.4

package/dist/TimePopover.js

@@ -0,0 +1,441 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TimePopover_exports = {};
+__export(TimePopover_exports, {
+  MonthPopover: () => MonthPopover,
+  WeekPopover: () => WeekPopover,
+  default: () => TimePopover
+});
+module.exports = __toCommonJS(TimePopover_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+function TimePopover({
+  anchorEl,
+  hh,
+  mm,
+  onChange,
+  onClose,
+  step = 5
+}) {
+  const popRef = React.useRef(null);
+  const [pos, setPos] = React.useState({ top: -9999, left: -9999 });
+  const [H, setH] = React.useState(hh);
+  const [M, setM] = React.useState(mm);
+  React.useEffect(() => {
+    setH(hh);
+  }, [hh]);
+  React.useEffect(() => {
+    setM(mm);
+  }, [mm]);
+  const commit = (h, m) => {
+    setH(h);
+    setM(m);
+    onChange(h, m);
+  };
+  const place = React.useCallback(() => {
+    const a = anchorEl == null ? void 0 : anchorEl.getBoundingClientRect();
+    if (!a) return;
+    const W = 220, Hh = 128, GAP = 8, MARGIN = 8;
+    let left = Math.min(a.left, window.innerWidth - W - MARGIN);
+    left = Math.max(MARGIN, left);
+    let top = a.bottom + GAP;
+    if (top + Hh > window.innerHeight) top = Math.max(MARGIN, a.top - GAP - Hh);
+    setPos({ top, left });
+  }, [anchorEl]);
+  React.useEffect(() => {
+    place();
+    const onDown = (e) => {
+      var _a;
+      const t = e.target;
+      if ((_a = popRef.current) == null ? void 0 : _a.contains(t)) return;
+      if (anchorEl && t instanceof Node && anchorEl.contains(t)) return;
+      onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const onScroll = () => place();
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [place, onClose, anchorEl]);
+  const incH = (d) => commit((H + d + 24) % 24, M);
+  const incM = (d) => {
+    const t = (H * 60 + M + d + 24 * 60) % (24 * 60);
+    commit(Math.floor(t / 60), t % 60);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      incH(1);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      incH(-1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      incM(+step);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      incM(-step);
+    } else if (e.key === "Enter") onClose();
+  };
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: popRef,
+      role: "dialog",
+      "aria-label": "Selector de hora",
+      tabIndex: 0,
+      "data-dtf-pop": true,
+      onPointerDownCapture: (e) => e.stopPropagation(),
+      onKeyDown,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
+                onClick: () => incH(1),
+                "aria-label": "Aumentar hora",
+                children: "+"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                inputMode: "numeric",
+                "aria-label": "Hora",
+                value: pad2(H),
+                onChange: (e) => {
+                  const v = e.target.value.replace(/\D/g, "").slice(-2);
+                  if (!v) return;
+                  let n = parseInt(v, 10);
+                  if (Number.isNaN(n)) return;
+                  if (n > 23) n = 23;
+                  commit(n, M);
+                },
+                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-white/5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
+                onClick: () => incH(-1),
+                "aria-label": "Disminuir hora",
+                children: "\u2212"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
+                onClick: () => incM(+step),
+                "aria-label": "Aumentar minutos",
+                children: "+"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                inputMode: "numeric",
+                "aria-label": "Minutos",
+                value: pad2(M),
+                onChange: (e) => {
+                  const v = e.target.value.replace(/\D/g, "").slice(-2);
+                  if (!v) return;
+                  let n = parseInt(v, 10);
+                  if (Number.isNaN(n)) return;
+                  if (n > 59) n = 59;
+                  commit(H, n);
+                },
+                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-white/5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
+                onClick: () => incM(-step),
+                "aria-label": "Disminuir minutos",
+                children: "\u2212"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-xl px-2.5 py-1.5 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
+              onClick: () => {
+                const t = /* @__PURE__ */ new Date();
+                const rounded = Math.round(t.getMinutes() / step) * step % 60;
+                commit(t.getHours(), rounded);
+              },
+              children: "Ahora"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-xl bg-slate-900 px-3 py-1.5 text-sm text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
+              onClick: onClose,
+              children: "Listo"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return (0, import_react_dom.createPortal)(body, document.body);
+}
+function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }) {
+  var _a, _b;
+  const popRef = React.useRef(null);
+  const [pos, setPos] = React.useState({ top: -9999, left: -9999 });
+  const place = React.useCallback(() => {
+    const a = anchorEl == null ? void 0 : anchorEl.getBoundingClientRect();
+    if (!a) return;
+    const W = 360, H = 320, GAP = 8, M = 8;
+    let left = Math.min(a.left, window.innerWidth - W - M);
+    left = Math.max(M, left);
+    let top = a.bottom + GAP;
+    if (top + H > window.innerHeight) top = Math.max(M, a.top - GAP - H);
+    setPos({ top, left });
+  }, [anchorEl]);
+  React.useEffect(() => {
+    place();
+    const onDown = (e) => {
+      var _a2;
+      const t = e.target;
+      if ((_a2 = popRef.current) == null ? void 0 : _a2.contains(t)) return;
+      if (anchorEl && anchorEl.contains(t)) return;
+      onClose();
+    };
+    const onScroll = () => place();
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [place, onClose, anchorEl]);
+  const year = cursor.getFullYear();
+  const month = cursor.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+  const start = new Date(firstOfMonth);
+  start.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+  const lastOfMonth = new Date(year, month + 1, 0);
+  const end = new Date(lastOfMonth);
+  end.setDate(lastOfMonth.getDate() + (6 - lastOfMonth.getDay()));
+  const weeks = [];
+  for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 7)) {
+    const from = new Date(d);
+    const to = new Date(d);
+    to.setDate(to.getDate() + 6);
+    weeks.push({ from, to });
+  }
+  const selFrom = (_a = value == null ? void 0 : value.from) != null ? _a : null;
+  const selTo = (_b = value == null ? void 0 : value.to) != null ? _b : null;
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+          onClick: () => onCursorChange(new Date(year, month - 1, 1)),
+          children: "\u25C0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+          onClick: () => onCursorChange(new Date(year, month + 1, 1)),
+          children: "\u25B6"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
+      const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
+          onClick: () => onPick(w.from, w.to),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+              "Semana ",
+              idx + 1
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
+          ]
+        },
+        `${w.from.toISOString()}-${w.to.toISOString()}`
+      );
+    }) })
+  ] });
+  return (0, import_react_dom.createPortal)(body, document.body);
+}
+function sameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function formatWeekLabel(from, to) {
+  const opts = { day: "2-digit", month: "short" };
+  try {
+    const f = from.toLocaleDateString("es-MX", opts);
+    const t = to.toLocaleDateString("es-MX", opts);
+    return `${f} \u2013 ${t}`;
+  } catch {
+    return `${from.getDate()}/${from.getMonth() + 1} \u2013 ${to.getDate()}/${to.getMonth() + 1}`;
+  }
+}
+function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }) {
+  var _a;
+  const popRef = React.useRef(null);
+  const [pos, setPos] = React.useState({ top: -9999, left: -9999 });
+  const place = React.useCallback(() => {
+    const a = anchorEl == null ? void 0 : anchorEl.getBoundingClientRect();
+    if (!a) return;
+    const W = 320, H = 360, GAP = 8, M = 8;
+    let left = Math.min(a.left, window.innerWidth - W - M);
+    left = Math.max(M, left);
+    let top = a.bottom + GAP;
+    if (top + H > window.innerHeight) top = Math.max(M, a.top - GAP - H);
+    setPos({ top, left });
+  }, [anchorEl]);
+  React.useEffect(() => {
+    place();
+    const onDown = (e) => {
+      var _a2;
+      const t = e.target;
+      if ((_a2 = popRef.current) == null ? void 0 : _a2.contains(t)) return;
+      if (anchorEl && anchorEl.contains(t)) return;
+      onClose();
+    };
+    const onScroll = () => place();
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [place, onClose, anchorEl]);
+  const year = cursor.getFullYear();
+  const months = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];
+  let selYear = null;
+  let selMonthIdx = null;
+  if (value) {
+    const parts = value.split("-").map(Number);
+    if (parts.length >= 2 && Number.isFinite(parts[0]) && Number.isFinite(parts[1])) {
+      selYear = parts[0];
+      selMonthIdx = ((_a = parts[1]) != null ? _a : 1) - 1;
+    }
+  }
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+          onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
+          children: "\u25C0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: year }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+          onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
+          children: "\u25B6"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
+      const isSel = selYear === year && selMonthIdx === idx;
+      const base = "rounded-xl border px-2 py-2 text-sm ";
+      const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
+      const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: `${base} ${light} ${dark}`,
+          onClick: () => onPick(new Date(year, idx, 1)),
+          children: m
+        },
+        idx
+      );
+    }) })
+  ] });
+  return (0, import_react_dom.createPortal)(body, document.body);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MonthPopover,
+  WeekPopover
+});