framepexls-ui-lib 0.1.4

package/dist/TimePanel.js

@@ -0,0 +1,145 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TimePanel_exports = {};
+__export(TimePanel_exports, {
+  default: () => TimePopover
+});
+module.exports = __toCommonJS(TimePanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+function TimePopover({
+  anchorRef,
+  hh,
+  mm,
+  step = 5,
+  onChange,
+  onClose
+}) {
+  const popRef = (0, import_react.useRef)(null);
+  const stylePop = (0, import_react.useMemo)(() => {
+    var _a;
+    const r = (_a = anchorRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (!r) return { visibility: "hidden" };
+    const W = 300, H = 180, GAP = 8, M = 8;
+    let left = r.left;
+    left = Math.max(M, Math.min(left, window.innerWidth - (W + M)));
+    let top = r.bottom + GAP;
+    if (top + H > window.innerHeight) top = Math.max(M, r.top - GAP - H);
+    return { position: "fixed", top, left, width: W, zIndex: 100001 };
+  }, [anchorRef]);
+  (0, import_react.useEffect)(() => {
+    const stopInside = (e) => {
+      var _a;
+      const t = e.target;
+      if ((_a = popRef.current) == null ? void 0 : _a.contains(t)) e.stopPropagation();
+    };
+    window.addEventListener("pointerdown", stopInside, true);
+    return () => window.removeEventListener("pointerdown", stopInside, true);
+  }, []);
+  const incH = () => onChange((hh + 1) % 24, mm);
+  const decH = () => onChange((hh + 23) % 24, mm);
+  const incM = () => onChange(hh, (mm + step) % 60);
+  const decM = () => onChange(hh, (mm + 60 - step) % 60);
+  const onWheelH = (e) => {
+    e.preventDefault();
+    if (e.deltaY > 0) {
+      decH();
+    } else {
+      incH();
+    }
+  };
+  const onWheelM = (e) => {
+    e.preventDefault();
+    if (e.deltaY > 0) {
+      decM();
+    } else {
+      incM();
+    }
+  };
+  const btn = "inline-flex h-7 w-7 items-center justify-center rounded-lg ring-1 ring-slate-200 bg-white hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5";
+  const chip = "min-w-[56px] rounded-xl ring-1 ring-slate-200 px-2 py-1 text-center font-medium dark:ring-white/10 dark:bg-white/5";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: popRef,
+      style: stylePop,
+      "data-dtf-pop": true,
+      className: "overflow-hidden 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-600 dark:text-slate-300", children: "Selecciona hora" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-slate-100 p-2 dark:border-white/10", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: "Hora" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incH, "aria-label": "Aumentar hora", children: "+" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: chip, onWheel: onWheelH, children: pad2(hh) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decH, "aria-label": "Disminuir hora", children: "\u2212" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-slate-100 p-2 dark:border-white/10", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: "Minutos" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incM, "aria-label": "Aumentar minutos", children: "+" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: chip, onWheel: onWheelM, children: pad2(mm) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decM, "aria-label": "Disminuir minutos", children: "\u2212" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: [0, 15, 30, 45].map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                className: "rounded-xl px-2 py-1 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5",
+                onPointerDown: (e) => e.preventDefault(),
+                onClick: () => onChange(hh, v),
+                children: [
+                  ":",
+                  pad2(v)
+                ]
+              },
+              v
+            )) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              className: "rounded-xl px-2.5 py-1.5 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5",
+              onPointerDown: (e) => e.preventDefault(),
+              onClick: () => {
+                const t = /* @__PURE__ */ new Date();
+                onChange(t.getHours(), t.getMinutes());
+              },
+              children: "Ahora"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              className: "rounded-xl bg-slate-900 px-3 py-1.5 text-sm text-white hover:opacity-95 active:scale-95 dark:bg-white dark:text-slate-900",
+              onPointerDown: (e) => e.preventDefault(),
+              onClick: onClose,
+              children: "Listo"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}

package/dist/TimePanel.mjs

@@ -0,0 +1,125 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+function TimePopover({
+  anchorRef,
+  hh,
+  mm,
+  step = 5,
+  onChange,
+  onClose
+}) {
+  const popRef = useRef(null);
+  const stylePop = useMemo(() => {
+    var _a;
+    const r = (_a = anchorRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (!r) return { visibility: "hidden" };
+    const W = 300, H = 180, GAP = 8, M = 8;
+    let left = r.left;
+    left = Math.max(M, Math.min(left, window.innerWidth - (W + M)));
+    let top = r.bottom + GAP;
+    if (top + H > window.innerHeight) top = Math.max(M, r.top - GAP - H);
+    return { position: "fixed", top, left, width: W, zIndex: 100001 };
+  }, [anchorRef]);
+  useEffect(() => {
+    const stopInside = (e) => {
+      var _a;
+      const t = e.target;
+      if ((_a = popRef.current) == null ? void 0 : _a.contains(t)) e.stopPropagation();
+    };
+    window.addEventListener("pointerdown", stopInside, true);
+    return () => window.removeEventListener("pointerdown", stopInside, true);
+  }, []);
+  const incH = () => onChange((hh + 1) % 24, mm);
+  const decH = () => onChange((hh + 23) % 24, mm);
+  const incM = () => onChange(hh, (mm + step) % 60);
+  const decM = () => onChange(hh, (mm + 60 - step) % 60);
+  const onWheelH = (e) => {
+    e.preventDefault();
+    if (e.deltaY > 0) {
+      decH();
+    } else {
+      incH();
+    }
+  };
+  const onWheelM = (e) => {
+    e.preventDefault();
+    if (e.deltaY > 0) {
+      decM();
+    } else {
+      incM();
+    }
+  };
+  const btn = "inline-flex h-7 w-7 items-center justify-center rounded-lg ring-1 ring-slate-200 bg-white hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5";
+  const chip = "min-w-[56px] rounded-xl ring-1 ring-slate-200 px-2 py-1 text-center font-medium dark:ring-white/10 dark:bg-white/5";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: popRef,
+      style: stylePop,
+      "data-dtf-pop": true,
+      className: "overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-600 dark:text-slate-300", children: "Selecciona hora" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-100 p-2 dark:border-white/10", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: "Hora" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incH, "aria-label": "Aumentar hora", children: "+" }),
+              /* @__PURE__ */ jsx("div", { className: chip, onWheel: onWheelH, children: pad2(hh) }),
+              /* @__PURE__ */ jsx("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decH, "aria-label": "Disminuir hora", children: "\u2212" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-100 p-2 dark:border-white/10", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: "Minutos" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incM, "aria-label": "Aumentar minutos", children: "+" }),
+              /* @__PURE__ */ jsx("div", { className: chip, onWheel: onWheelM, children: pad2(mm) }),
+              /* @__PURE__ */ jsx("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decM, "aria-label": "Disminuir minutos", children: "\u2212" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: [0, 15, 30, 45].map((v) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "rounded-xl px-2 py-1 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5",
+                onPointerDown: (e) => e.preventDefault(),
+                onClick: () => onChange(hh, v),
+                children: [
+                  ":",
+                  pad2(v)
+                ]
+              },
+              v
+            )) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded-xl px-2.5 py-1.5 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5",
+              onPointerDown: (e) => e.preventDefault(),
+              onClick: () => {
+                const t = /* @__PURE__ */ new Date();
+                onChange(t.getHours(), t.getMinutes());
+              },
+              children: "Ahora"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded-xl bg-slate-900 px-3 py-1.5 text-sm text-white hover:opacity-95 active:scale-95 dark:bg-white dark:text-slate-900",
+              onPointerDown: (e) => e.preventDefault(),
+              onClick: onClose,
+              children: "Listo"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  TimePopover as default
+};

package/dist/TimePopover.d.mts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+type Props = {
+    /** ancla (el botón/chip que abriste) */
+    anchorEl: HTMLElement | null;
+    hh: number;
+    mm: number;
+    onChange: (hh: number, mm: number) => void;
+    onClose: () => void;
+    step?: number;
+};
+declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step }: Props): React.ReactPortal;
+declare function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }: {
+    anchorEl: HTMLElement | null;
+    cursor: Date;
+    value?: {
+        from: Date;
+        to: Date;
+    } | null;
+    onCursorChange: (d: Date) => void;
+    onPick: (from: Date, to: Date) => void;
+    onClose: () => void;
+}): React.ReactPortal;
+declare function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }: {
+    anchorEl: HTMLElement | null;
+    cursor: Date;
+    value?: string;
+    onCursorChange: (d: Date) => void;
+    onPick: (d: Date) => void;
+    onClose: () => void;
+}): React.ReactPortal;
+
+export { MonthPopover, WeekPopover, TimePopover as default };

package/dist/TimePopover.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+type Props = {
+    /** ancla (el botón/chip que abriste) */
+    anchorEl: HTMLElement | null;
+    hh: number;
+    mm: number;
+    onChange: (hh: number, mm: number) => void;
+    onClose: () => void;
+    step?: number;
+};
+declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step }: Props): React.ReactPortal;
+declare function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }: {
+    anchorEl: HTMLElement | null;
+    cursor: Date;
+    value?: {
+        from: Date;
+        to: Date;
+    } | null;
+    onCursorChange: (d: Date) => void;
+    onPick: (from: Date, to: Date) => void;
+    onClose: () => void;
+}): React.ReactPortal;
+declare function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }: {
+    anchorEl: HTMLElement | null;
+    cursor: Date;
+    value?: string;
+    onCursorChange: (d: Date) => void;
+    onPick: (d: Date) => void;
+    onClose: () => void;
+}): React.ReactPortal;
+
+export { MonthPopover, WeekPopover, TimePopover as default };