framepexls-ui-lib 0.1.7 → 0.1.9

package/dist/TimeRangeField.js

@@ -0,0 +1,269 @@
+"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 TimeRangeField_exports = {};
+__export(TimeRangeField_exports, {
+  default: () => TimeRangeField
+});
+module.exports = __toCommonJS(TimeRangeField_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_TimePopover = __toESM(require("./TimePopover"));
+const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+function parseHHmm(v) {
+  if (!v) return null;
+  const [hh, mm] = String(v).split(":").map((x) => parseInt(x, 10));
+  if (Number.isNaN(hh) || Number.isNaN(mm)) return null;
+  return { hh: Math.max(0, Math.min(23, hh)), mm: Math.max(0, Math.min(59, mm)) };
+}
+function fmtHHmm(hh, mm) {
+  return `${pad2(hh)}:${pad2(mm)}`;
+}
+function TimeRangeField({ value, onValueChange, portal = true, portalId, clearable = true, step = 5, placeholder = "Selecciona rango", className, disabled }) {
+  var _a, _b, _c, _d, _e, _f;
+  const anchorRef = (0, import_react.useRef)(null);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [portalRoot, setPortalRoot] = (0, import_react.useState)(null);
+  const [anchorRect, setAnchorRect] = (0, import_react.useState)(null);
+  const [from, setFrom] = (0, import_react.useState)(() => {
+    var _a2;
+    return (_a2 = parseHHmm(value == null ? void 0 : value.from)) != null ? _a2 : null;
+  });
+  const [to, setTo] = (0, import_react.useState)(() => {
+    var _a2;
+    return (_a2 = parseHHmm(value == null ? void 0 : value.to)) != null ? _a2 : null;
+  });
+  const fromBtnRef = (0, import_react.useRef)(null);
+  const toBtnRef = (0, import_react.useRef)(null);
+  const [showFromPop, setShowFromPop] = (0, import_react.useState)(false);
+  const [showToPop, setShowToPop] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    setFrom((_a2 = parseHHmm(value == null ? void 0 : value.from)) != null ? _a2 : null);
+  }, [value == null ? void 0 : value.from]);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    setTo((_a2 = parseHHmm(value == null ? void 0 : value.to)) != null ? _a2 : null);
+  }, [value == null ? void 0 : value.to]);
+  (0, import_react.useEffect)(() => {
+    if (!portal) return;
+    const el = portalId ? document.getElementById(portalId) : null;
+    setPortalRoot(el != null ? el : document.body);
+  }, [portal, portalId]);
+  const display = (0, import_react.useMemo)(() => {
+    var _a2;
+    const a = from ? fmtHHmm(from.hh, from.mm) : null;
+    const b = to ? fmtHHmm(to.hh, to.mm) : null;
+    if (!a && !b) return "";
+    if (a && b) return `${a} \u2013 ${b}`;
+    return (_a2 = a != null ? a : b) != null ? _a2 : "";
+  }, [from, to]);
+  const openPopover = () => {
+    if (disabled) return;
+    if (!anchorRef.current) return;
+    setAnchorRect(anchorRef.current.getBoundingClientRect());
+    setOpen(true);
+  };
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      var _a2;
+      const t = e.target;
+      if (t.closest("[data-trf-pop]")) return;
+      if (t.closest("[data-dtf-pop]")) return;
+      if ((_a2 = anchorRef.current) == null ? void 0 : _a2.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);
+    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 = 180;
+    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 commit = (f, t) => {
+    let f2 = f, t2 = t;
+    if (f2 && t2) {
+      const a = f2.hh * 60 + f2.mm;
+      const b = t2.hh * 60 + t2.mm;
+      if (b < a) t2 = { ...f2 };
+    }
+    setFrom(f2);
+    setTo(t2);
+    onValueChange == null ? void 0 : onValueChange({ from: f2 ? fmtHHmm(f2.hh, f2.mm) : null, to: t2 ? fmtHHmm(t2.hh, t2.mm) : null });
+  };
+  const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-trf-pop": true, style: stylePop, className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: "Selecciona horario" }),
+      /* @__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"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-3 border-t border-slate-100 p-3 text-sm dark:border-white/10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Desde" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            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: () => setShowFromPop((v) => !v),
+            ref: fromBtnRef,
+            children: from ? fmtHHmm(from.hh, from.mm) : "--:--"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ml-2 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 rounded = Math.round(t.getMinutes() / step) * step % 60;
+              commit({ hh: t.getHours(), mm: rounded }, to);
+            },
+            children: "Ahora"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Hasta" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            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: () => setShowToPop((v) => !v),
+            ref: toBtnRef,
+            children: to ? fmtHHmm(to.hh, to.mm) : "--:--"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ml-2 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 rounded = Math.round(t.getMinutes() / step) * step % 60;
+              const candidate = { hh: t.getHours(), mm: rounded };
+              commit(from, candidate);
+            },
+            children: "Ahora"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: anchorRef, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.default,
+      {
+        readOnly: true,
+        value: display,
+        placeholder,
+        onClick: openPopover,
+        clearable,
+        onClear: () => {
+          setFrom(null);
+          setTo(null);
+          onValueChange == null ? void 0 : onValueChange({ from: null, to: null });
+        },
+        disabled,
+        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 de horas",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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: "M12 7v5l3 3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" })
+            ] })
+          }
+        )
+      }
+    ),
+    open && (portal ? portalRoot && (0, import_react_dom.createPortal)(popover, portalRoot) : popover),
+    open && showFromPop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TimePopover.default,
+      {
+        anchorEl: fromBtnRef.current,
+        hh: (_a = from == null ? void 0 : from.hh) != null ? _a : 0,
+        mm: (_b = from == null ? void 0 : from.mm) != null ? _b : 0,
+        onChange: (H, M) => commit({ hh: H, mm: M }, to),
+        onClose: () => setShowFromPop(false),
+        step
+      }
+    ),
+    open && showToPop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TimePopover.default,
+      {
+        anchorEl: toBtnRef.current,
+        hh: (_d = to == null ? void 0 : to.hh) != null ? _d : (_c = from == null ? void 0 : from.hh) != null ? _c : 0,
+        mm: (_f = to == null ? void 0 : to.mm) != null ? _f : (_e = from == null ? void 0 : from.mm) != null ? _e : 0,
+        onChange: (H, M) => commit(from, { hh: H, mm: M }),
+        onClose: () => setShowToPop(false),
+        step
+      }
+    )
+  ] });
+}

package/dist/TimeRangeField.mjs

@@ -0,0 +1,239 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import Input from "./Input";
+import TimePopover from "./TimePopover";
+const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+function parseHHmm(v) {
+  if (!v) return null;
+  const [hh, mm] = String(v).split(":").map((x) => parseInt(x, 10));
+  if (Number.isNaN(hh) || Number.isNaN(mm)) return null;
+  return { hh: Math.max(0, Math.min(23, hh)), mm: Math.max(0, Math.min(59, mm)) };
+}
+function fmtHHmm(hh, mm) {
+  return `${pad2(hh)}:${pad2(mm)}`;
+}
+function TimeRangeField({ value, onValueChange, portal = true, portalId, clearable = true, step = 5, placeholder = "Selecciona rango", className, disabled }) {
+  var _a, _b, _c, _d, _e, _f;
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [portalRoot, setPortalRoot] = useState(null);
+  const [anchorRect, setAnchorRect] = useState(null);
+  const [from, setFrom] = useState(() => {
+    var _a2;
+    return (_a2 = parseHHmm(value == null ? void 0 : value.from)) != null ? _a2 : null;
+  });
+  const [to, setTo] = useState(() => {
+    var _a2;
+    return (_a2 = parseHHmm(value == null ? void 0 : value.to)) != null ? _a2 : null;
+  });
+  const fromBtnRef = useRef(null);
+  const toBtnRef = useRef(null);
+  const [showFromPop, setShowFromPop] = useState(false);
+  const [showToPop, setShowToPop] = useState(false);
+  useEffect(() => {
+    var _a2;
+    setFrom((_a2 = parseHHmm(value == null ? void 0 : value.from)) != null ? _a2 : null);
+  }, [value == null ? void 0 : value.from]);
+  useEffect(() => {
+    var _a2;
+    setTo((_a2 = parseHHmm(value == null ? void 0 : value.to)) != null ? _a2 : null);
+  }, [value == null ? void 0 : value.to]);
+  useEffect(() => {
+    if (!portal) return;
+    const el = portalId ? document.getElementById(portalId) : null;
+    setPortalRoot(el != null ? el : document.body);
+  }, [portal, portalId]);
+  const display = useMemo(() => {
+    var _a2;
+    const a = from ? fmtHHmm(from.hh, from.mm) : null;
+    const b = to ? fmtHHmm(to.hh, to.mm) : null;
+    if (!a && !b) return "";
+    if (a && b) return `${a} \u2013 ${b}`;
+    return (_a2 = a != null ? a : b) != null ? _a2 : "";
+  }, [from, to]);
+  const openPopover = () => {
+    if (disabled) return;
+    if (!anchorRef.current) return;
+    setAnchorRect(anchorRef.current.getBoundingClientRect());
+    setOpen(true);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      var _a2;
+      const t = e.target;
+      if (t.closest("[data-trf-pop]")) return;
+      if (t.closest("[data-dtf-pop]")) return;
+      if ((_a2 = anchorRef.current) == null ? void 0 : _a2.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);
+    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 = 180;
+    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 commit = (f, t) => {
+    let f2 = f, t2 = t;
+    if (f2 && t2) {
+      const a = f2.hh * 60 + f2.mm;
+      const b = t2.hh * 60 + t2.mm;
+      if (b < a) t2 = { ...f2 };
+    }
+    setFrom(f2);
+    setTo(t2);
+    onValueChange == null ? void 0 : onValueChange({ from: f2 ? fmtHHmm(f2.hh, f2.mm) : null, to: t2 ? fmtHHmm(t2.hh, t2.mm) : null });
+  };
+  const popover = /* @__PURE__ */ jsxs("div", { "data-trf-pop": true, style: stylePop, className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Selecciona horario" }),
+      /* @__PURE__ */ 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"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 border-t border-slate-100 p-3 text-sm dark:border-white/10", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Desde" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            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: () => setShowFromPop((v) => !v),
+            ref: fromBtnRef,
+            children: from ? fmtHHmm(from.hh, from.mm) : "--:--"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ml-2 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 rounded = Math.round(t.getMinutes() / step) * step % 60;
+              commit({ hh: t.getHours(), mm: rounded }, to);
+            },
+            children: "Ahora"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Hasta" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            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: () => setShowToPop((v) => !v),
+            ref: toBtnRef,
+            children: to ? fmtHHmm(to.hh, to.mm) : "--:--"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ml-2 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 rounded = Math.round(t.getMinutes() / step) * step % 60;
+              const candidate = { hh: t.getHours(), mm: rounded };
+              commit(from, candidate);
+            },
+            children: "Ahora"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { ref: anchorRef, className, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        readOnly: true,
+        value: display,
+        placeholder,
+        onClick: openPopover,
+        clearable,
+        onClear: () => {
+          setFrom(null);
+          setTo(null);
+          onValueChange == null ? void 0 : onValueChange({ from: null, to: null });
+        },
+        disabled,
+        rightSlot: /* @__PURE__ */ 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 de horas",
+            children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+              /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 3" }),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" })
+            ] })
+          }
+        )
+      }
+    ),
+    open && (portal ? portalRoot && createPortal(popover, portalRoot) : popover),
+    open && showFromPop && /* @__PURE__ */ jsx(
+      TimePopover,
+      {
+        anchorEl: fromBtnRef.current,
+        hh: (_a = from == null ? void 0 : from.hh) != null ? _a : 0,
+        mm: (_b = from == null ? void 0 : from.mm) != null ? _b : 0,
+        onChange: (H, M) => commit({ hh: H, mm: M }, to),
+        onClose: () => setShowFromPop(false),
+        step
+      }
+    ),
+    open && showToPop && /* @__PURE__ */ jsx(
+      TimePopover,
+      {
+        anchorEl: toBtnRef.current,
+        hh: (_d = to == null ? void 0 : to.hh) != null ? _d : (_c = from == null ? void 0 : from.hh) != null ? _c : 0,
+        mm: (_f = to == null ? void 0 : to.mm) != null ? _f : (_e = from == null ? void 0 : from.mm) != null ? _e : 0,
+        onChange: (H, M) => commit(from, { hh: H, mm: M }),
+        onClose: () => setShowToPop(false),
+        step
+      }
+    )
+  ] });
+}
+export {
+  TimeRangeField as default
+};

package/dist/index.d.mts

@@ -23,9 +23,12 @@ export { default as AvatarSquare } from './AvatarSquare.mjs';
 export { default as AppTopbar } from './AppTopbar.mjs';
 export { default as OrderButton } from './OrderButton.mjs';
 export { default as SearchInput } from './SearchInput.mjs';
+export { default as ReviewHistory, ReviewHistoryDialog } from './ReviewHistory.mjs';
+export { default as Sidebar } from './Sidebar.mjs';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.mjs';
 export { MonthPopover, default as TimePopover, WeekPopover } from './TimePopover.mjs';
 export { default as TimePanel } from './TimePanel.mjs';
+export { TimeRange, default as TimeRangeField, TimeRangeFieldProps } from './TimeRangeField.mjs';
 export { StepDef, default as Steps, StepsNav } from './Steps.mjs';
 export { Aficionados, AuditarDocumento, Borrar, CajaDeMano, Cajas, Calendario, ChevronLeftRightIcon, CirculoAdvertencia, CirculoExito, CirculoPeligro, CirculoPorDefecto, ClientsIcon, CloseIcon, ContraseniaDeEmailIcon, Cotizaciones, DashboardIcon, Directorio, Edificio, Editar, Empresa, EscaneoFacial, EyeIcon, FlechaAbajo, FlechaArriba, Imagenes, LlamadaTelefonica, LogoutIcon, MarketingDigital, MediosDeComunicacionSocial, MenuIcon, MenuPuntosVerticalIcon, Nota, Ojo, OrdersIcon, PencilIcon, PermsIcon, ProductsIcon, PromoIcon, Retroalimentacion, RolesIcon, Sobre, Tablero, Tarea, Tickets, TrabajoEnEquipo, TrashIcon, UserIcon, UsersIcon, UsuarioProhibidoIcon, Usuarios } from './iconos/index.mjs';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -23,9 +23,12 @@ export { default as AvatarSquare } from './AvatarSquare.js';
 export { default as AppTopbar } from './AppTopbar.js';
 export { default as OrderButton } from './OrderButton.js';
 export { default as SearchInput } from './SearchInput.js';
+export { default as ReviewHistory, ReviewHistoryDialog } from './ReviewHistory.js';
+export { default as Sidebar } from './Sidebar.js';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.js';
 export { MonthPopover, default as TimePopover, WeekPopover } from './TimePopover.js';
 export { default as TimePanel } from './TimePanel.js';
+export { TimeRange, default as TimeRangeField, TimeRangeFieldProps } from './TimeRangeField.js';
 export { StepDef, default as Steps, StepsNav } from './Steps.js';
 export { Aficionados, AuditarDocumento, Borrar, CajaDeMano, Cajas, Calendario, ChevronLeftRightIcon, CirculoAdvertencia, CirculoExito, CirculoPeligro, CirculoPorDefecto, ClientsIcon, CloseIcon, ContraseniaDeEmailIcon, Cotizaciones, DashboardIcon, Directorio, Edificio, Editar, Empresa, EscaneoFacial, EyeIcon, FlechaAbajo, FlechaArriba, Imagenes, LlamadaTelefonica, LogoutIcon, MarketingDigital, MediosDeComunicacionSocial, MenuIcon, MenuPuntosVerticalIcon, Nota, Ojo, OrdersIcon, PencilIcon, PermsIcon, ProductsIcon, PromoIcon, Retroalimentacion, RolesIcon, Sobre, Tablero, Tarea, Tickets, TrabajoEnEquipo, TrashIcon, UserIcon, UsersIcon, UsuarioProhibidoIcon, Usuarios } from './iconos/index.js';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -51,8 +51,11 @@ __export(index_exports, {
   MonthPopover: () => import_TimePopover2.MonthPopover,
   OrderButton: () => import_OrderButton.default,
   Pagination: () => import_Pagination.default,
+  ReviewHistory: () => import_ReviewHistory.default,
+  ReviewHistoryDialog: () => import_ReviewHistory2.ReviewHistoryDialog,
   SearchInput: () => import_SearchInput.default,
   Select: () => import_Select.default,
+  Sidebar: () => import_Sidebar.default,
   SortTh: () => import_Table.SortTh,
   StatCard: () => import_StatCard.default,
   Steps: () => import_Steps.default,
@@ -62,6 +65,7 @@ __export(index_exports, {
   TimeAgo: () => import_TimeAgo.default,
   TimePanel: () => import_TimePanel.default,
   TimePopover: () => import_TimePopover.default,
+  TimeRangeField: () => import_TimeRangeField.default,
   WeekPopover: () => import_TimePopover2.WeekPopover
 });
 module.exports = __toCommonJS(index_exports);
@@ -92,10 +96,14 @@ var import_AvatarSquare = __toESM(require("./AvatarSquare"));
 var import_AppTopbar = __toESM(require("./AppTopbar"));
 var import_OrderButton = __toESM(require("./OrderButton"));
 var import_SearchInput = __toESM(require("./SearchInput"));
+var import_ReviewHistory = __toESM(require("./ReviewHistory"));
+var import_ReviewHistory2 = require("./ReviewHistory");
+var import_Sidebar = __toESM(require("./Sidebar"));
 var import_CalendarPanel = __toESM(require("./CalendarPanel"));
 var import_TimePopover = __toESM(require("./TimePopover"));
 var import_TimePopover2 = require("./TimePopover");
 var import_TimePanel = __toESM(require("./TimePanel"));
+var import_TimeRangeField = __toESM(require("./TimeRangeField"));
 var import_Steps = __toESM(require("./Steps"));
 var import_Steps2 = require("./Steps");
 __reExport(index_exports, require("./iconos"), module.exports);
@@ -123,8 +131,11 @@ __reExport(index_exports, require("./iconos"), module.exports);
   MonthPopover,
   OrderButton,
   Pagination,
+  ReviewHistory,
+  ReviewHistoryDialog,
   SearchInput,
   Select,
+  Sidebar,
   SortTh,
   StatCard,
   Steps,
@@ -134,6 +145,7 @@ __reExport(index_exports, require("./iconos"), module.exports);
   TimeAgo,
   TimePanel,
   TimePopover,
+  TimeRangeField,
   WeekPopover,
   ...require("./Dialog"),
   ...require("./Dropdown"),

package/dist/index.mjs

@@ -25,11 +25,15 @@ import { default as default22 } from "./AvatarSquare";
 import { default as default23 } from "./AppTopbar";
 import { default as default24 } from "./OrderButton";
 import { default as default25 } from "./SearchInput";
-import { default as default26 } from "./CalendarPanel";
-import { default as default27 } from "./TimePopover";
+import { default as default26 } from "./ReviewHistory";
+import { ReviewHistoryDialog } from "./ReviewHistory";
+import { default as default27 } from "./Sidebar";
+import { default as default28 } from "./CalendarPanel";
+import { default as default29 } from "./TimePopover";
 import { WeekPopover, MonthPopover } from "./TimePopover";
-import { default as default28 } from "./TimePanel";
-import { default as default29 } from "./Steps";
+import { default as default30 } from "./TimePanel";
+import { default as default31 } from "./TimeRangeField";
+import { default as default32 } from "./Steps";
 import { StepsNav } from "./Steps";
 export * from "./iconos";
 export {
@@ -40,7 +44,7 @@ export {
   default17 as BadgeCluster,
   default18 as Breadcrumb,
   default2 as Button,
-  default26 as CalendarPanel,
+  default28 as CalendarPanel,
   default14 as ChartCard,
   default5 as CheckboxPillsGroup,
   default8 as ColumnSelector,
@@ -55,16 +59,20 @@ export {
   MonthPopover,
   default24 as OrderButton,
   default12 as Pagination,
+  default26 as ReviewHistory,
+  ReviewHistoryDialog,
   default25 as SearchInput,
   default6 as Select,
+  default27 as Sidebar,
   SortTh,
   default15 as StatCard,
-  default29 as Steps,
+  default32 as Steps,
   StepsNav,
   Td,
   Th,
   default21 as TimeAgo,
-  default28 as TimePanel,
-  default27 as TimePopover,
+  default30 as TimePanel,
+  default29 as TimePopover,
+  default31 as TimeRangeField,
   WeekPopover
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",
@@ -36,8 +36,8 @@
   "devDependencies": {
     "typescript": "^5.6.3",
     "tsup": "^8.1.0",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "tailwindcss": "^4.1.13",
     "@tailwindcss/postcss": "^4.1.13",
     "motion": "^12.23.16",
@@ -58,4 +58,4 @@
     "url": "https://github.com/cponce-framepexls/ui-lib/issues"
   },
   "homepage": "https://github.com/cponce-framepexls/ui-lib#readme"
-}
+}