framepexls-ui-lib 0.1.4

package/dist/DateTimeField.js

@@ -0,0 +1,409 @@
+"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 DateTimeField_exports = {};
+__export(DateTimeField_exports, {
+  default: () => DateTimeField
+});
+module.exports = __toCommonJS(DateTimeField_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_Input = __toESM(require("./Input"));
+var import_CalendarPanel = __toESM(require("./CalendarPanel"));
+var import_TimePopover = __toESM(require("./TimePopover"));
+const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const DATE_ONLY_REGEX = /^\d{4}-\d{2}-\d{2}$/;
+const fmtISODate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+const fmtISODateTimeLocal = (d) => `${fmtISODate(d)}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+const parseDateOnly = (value) => {
+  if (!DATE_ONLY_REGEX.test(value)) return null;
+  const [y, m, d] = value.split("-").map(Number);
+  if ([y, m, d].some((n) => Number.isNaN(n))) return null;
+  return new Date(y, (m != null ? m : 1) - 1, d != null ? d : 1, 0, 0, 0, 0);
+};
+const parseTimeOnly = (value) => {
+  const parts = value.split(":").map(Number);
+  if (parts.length < 2) return null;
+  const [h, m] = parts;
+  if (Number.isNaN(h) || Number.isNaN(m)) return null;
+  const now = /* @__PURE__ */ new Date();
+  now.setSeconds(0, 0);
+  now.setHours(Math.max(0, Math.min(23, h)), Math.max(0, Math.min(59, m)));
+  return now;
+};
+const parseValueByType = (value, mode) => {
+  if (!value) return null;
+  if (mode === "date") return parseDateOnly(value);
+  if (mode === "time") return parseTimeOnly(value);
+  const dt = new Date(value);
+  return Number.isNaN(dt.getTime()) ? null : dt;
+};
+const parseBoundValue = (value) => {
+  if (!value) return null;
+  if (DATE_ONLY_REGEX.test(value)) return parseDateOnly(value);
+  const dt = new Date(value);
+  return Number.isNaN(dt.getTime()) ? null : dt;
+};
+const withinBounds = (d, min, max) => {
+  const t = d.getTime();
+  const minDate = parseBoundValue(min);
+  if (minDate) {
+    const minTime = min && DATE_ONLY_REGEX.test(min) ? minDate.getTime() : minDate.getTime();
+    if (t < minTime) return false;
+  }
+  const maxDate = parseBoundValue(max);
+  if (maxDate) {
+    let maxTime = maxDate.getTime();
+    if (max && DATE_ONLY_REGEX.test(max)) {
+      maxTime += 24 * 60 * 60 * 1e3 - 1;
+    }
+    if (t > maxTime) return false;
+  }
+  return true;
+};
+const formatDisplayValue = (value, mode) => {
+  if (!value) return "";
+  if (mode === "time") return value;
+  const parsed = parseValueByType(value, mode);
+  if (!parsed) return value;
+  if (mode === "date") {
+    try {
+      return parsed.toLocaleDateString("es-MX", { day: "2-digit", month: "short", year: "numeric" });
+    } catch {
+      return fmtISODate(parsed);
+    }
+  }
+  try {
+    return parsed.toLocaleString("es-MX", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  } catch {
+    return fmtISODateTimeLocal(parsed);
+  }
+};
+const CalendarIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: 1.8, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "4.5", width: "18", height: "16", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 2.5v4M8 2.5v4M3 10.5h18" })
+] });
+function DateTimeField({
+  type = "datetime-local",
+  value,
+  min,
+  max,
+  onValueChange,
+  portal = true,
+  portalId,
+  clearable = true,
+  ...inputProps
+}) {
+  var _a;
+  const htmlOnChange = inputProps.onChange;
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [anchorRect, setAnchorRect] = (0, import_react.useState)(null);
+  const anchorRef = (0, import_react.useRef)(null);
+  const popRef = (0, import_react.useRef)(null);
+  const [portalRoot, setPortalRoot] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!portal) return;
+    const el = portalId ? document.getElementById(portalId) : null;
+    setPortalRoot(el != null ? el : document.body);
+  }, [portal, portalId]);
+  const openPopover = () => {
+    if (!anchorRef.current) return;
+    setAnchorRect(anchorRef.current.getBoundingClientRect());
+    setOpen(true);
+  };
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      var _a2, _b;
+      const t = e.target;
+      if (t.closest("[data-dtf-pop]")) return;
+      if ((_a2 = popRef.current) == null ? void 0 : _a2.contains(t)) return;
+      if ((_b = anchorRef.current) == null ? void 0 : _b.contains(t)) return;
+      setOpen(false);
+    };
+    const update = () => {
+      if (!anchorRef.current) return;
+      setAnchorRect(anchorRef.current.getBoundingClientRect());
+    };
+    const onEsc = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    window.addEventListener("keydown", onEsc);
+    update();
+    return () => {
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+      window.removeEventListener("keydown", onEsc);
+    };
+  }, [open]);
+  const stylePop = (() => {
+    if (!anchorRect) return { visibility: "hidden" };
+    const W = 360, GAP = 8, MARGIN = 8, H = 420;
+    let left = anchorRect.right - W;
+    left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
+    let top = anchorRect.bottom + GAP;
+    if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
+    return { position: "fixed", top, left, zIndex: 1e5 };
+  })();
+  const parsed = (0, import_react.useMemo)(() => value ? parseValueByType(value, type) : null, [value, type]);
+  const [cursor, setCursor] = (0, import_react.useState)(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
+  (0, import_react.useEffect)(() => {
+    if (parsed) setCursor(parsed);
+  }, [parsed]);
+  const baseForTime = (_a = parsed != null ? parsed : cursor) != null ? _a : /* @__PURE__ */ new Date();
+  const [hh, setHh] = (0, import_react.useState)(baseForTime.getHours());
+  const [mm, setMm] = (0, import_react.useState)(baseForTime.getMinutes());
+  (0, import_react.useEffect)(() => {
+    const t = parsed != null ? parsed : /* @__PURE__ */ new Date();
+    setHh(t.getHours());
+    setMm(t.getMinutes());
+  }, [parsed]);
+  const emit = (next) => {
+    onValueChange == null ? void 0 : onValueChange(next);
+    if (htmlOnChange) {
+      const ev = { target: { value: next != null ? next : "" } };
+      htmlOnChange(ev);
+    }
+  };
+  const commitDate = (d) => {
+    if (type === "date") {
+      if (withinBounds(d, min, max)) emit(fmtISODate(d));
+      return;
+    }
+    if (type === "time") {
+      emit(`${pad2(hh)}:${pad2(mm)}`);
+      return;
+    }
+    const next = new Date(d);
+    next.setHours(hh, mm, 0, 0);
+    if (withinBounds(next, min, max)) emit(fmtISODateTimeLocal(next));
+  };
+  const commitTime = (H, M) => {
+    var _a2;
+    setHh(H);
+    setMm(M);
+    if (type === "time") {
+      emit(`${pad2(H)}:${pad2(M)}`);
+      return;
+    }
+    if (type === "datetime-local") {
+      const base = (_a2 = parsed != null ? parsed : cursor) != null ? _a2 : /* @__PURE__ */ new Date();
+      const next = new Date(base);
+      next.setHours(H, M, 0, 0);
+      if (withinBounds(next, min, max)) emit(fmtISODateTimeLocal(next));
+    }
+  };
+  const display = (0, import_react.useMemo)(() => formatDisplayValue(value != null ? value : "", type), [value, type]);
+  const timeBtnRef = (0, import_react.useRef)(null);
+  const [showTimePop, setShowTimePop] = (0, import_react.useState)(false);
+  const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: popRef,
+      style: stylePop,
+      "data-dtf-pop": true,
+      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+      children: [
+        type !== "time" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_CalendarPanel.default,
+          {
+            cursor,
+            value: parsed != null ? parsed : null,
+            min,
+            max,
+            onCursorChange: setCursor,
+            onPick: (d) => {
+              setCursor(d);
+              commitDate(d);
+              if (type === "date") setOpen(false);
+            }
+          }
+        ),
+        (type === "time" || type === "datetime-local") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                ref: timeBtnRef,
+                type: "button",
+                className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
+                onClick: () => setShowTimePop((v) => !v),
+                "aria-haspopup": "dialog",
+                "aria-expanded": showTimePop,
+                title: "Editar hora",
+                children: [
+                  pad2(hh),
+                  ":",
+                  pad2(mm)
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
+                onClick: () => {
+                  const t = /* @__PURE__ */ new Date();
+                  const H = t.getHours();
+                  const M = t.getMinutes();
+                  setHh(H);
+                  setMm(M);
+                  commitTime(H, M);
+                },
+                children: "Ahora"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-xl bg-slate-900 px-3 py-1.5 text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
+              onClick: () => setOpen(false),
+              children: "Aplicar"
+            }
+          )
+        ] }),
+        type !== "time" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
+                onClick: () => {
+                  const t = /* @__PURE__ */ new Date();
+                  setCursor(t);
+                  commitDate(t);
+                  if (type === "date") setOpen(false);
+                },
+                children: "Hoy"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
+                onClick: () => {
+                  const t = /* @__PURE__ */ new Date();
+                  t.setDate(t.getDate() + 1);
+                  setCursor(t);
+                  commitDate(t);
+                  if (type === "date") setOpen(false);
+                },
+                children: "Ma\xF1ana"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
+                onClick: () => {
+                  const t = /* @__PURE__ */ new Date();
+                  t.setDate(t.getDate() + 7);
+                  setCursor(t);
+                  commitDate(t);
+                  if (type === "date") setOpen(false);
+                },
+                children: "+1 semana"
+              }
+            )
+          ] }),
+          value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              className: "rounded-lg px-2 py-1 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10",
+              onClick: () => {
+                emit(null);
+                setOpen(false);
+              },
+              children: "Limpiar"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: anchorRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.default,
+      {
+        readOnly: true,
+        leftSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, {}),
+        rightSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
+            onClick: (e) => {
+              e.preventDefault();
+              openPopover();
+            },
+            title: "Abrir selector",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 10h8M8 14h5" }) })
+          }
+        ),
+        value: display,
+        onClick: openPopover,
+        clearable,
+        onClear: () => emit(null),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        ...inputProps
+      }
+    ),
+    open && (portal ? portalRoot && (0, import_react_dom.createPortal)(popover, portalRoot) : popover),
+    open && (type === "datetime-local" || type === "time") && showTimePop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TimePopover.default,
+      {
+        anchorEl: timeBtnRef.current,
+        hh,
+        mm,
+        onChange: (H, M) => {
+          setHh(H);
+          setMm(M);
+          commitTime(H, M);
+        },
+        onClose: () => setShowTimePop(false),
+        step: 1
+      }
+    )
+  ] });
+}