framepexls-ui-lib 0.1.4

package/dist/Table.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type SortThProps = {
+    children: React__default.ReactNode;
+    w?: number | string;
+    minW?: number;
+    align?: "left" | "center" | "right";
+    active?: boolean;
+    asc?: boolean;
+    onClick?: () => void;
+    className?: string;
+    resizable?: boolean;
+    colKey?: string;
+    onGripDown?: (colKey: string, e: React__default.MouseEvent<HTMLSpanElement>) => void;
+};
+declare function Th({ children, w, align, className, }: {
+    children: React__default.ReactNode;
+    w?: string | number;
+    align?: "left" | "center" | "right";
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SortTh({ children, w, minW, align, active, asc, onClick, className, resizable, colKey, onGripDown, }: SortThProps): react_jsx_runtime.JSX.Element;
+declare function Td({ children, className, align, colSpan, }: {
+    children: React__default.ReactNode;
+    className?: string;
+    align?: "left" | "center" | "right";
+    colSpan?: number;
+}): react_jsx_runtime.JSX.Element;
+
+export { SortTh, Td, Th };

package/dist/Table.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type SortThProps = {
+    children: React__default.ReactNode;
+    w?: number | string;
+    minW?: number;
+    align?: "left" | "center" | "right";
+    active?: boolean;
+    asc?: boolean;
+    onClick?: () => void;
+    className?: string;
+    resizable?: boolean;
+    colKey?: string;
+    onGripDown?: (colKey: string, e: React__default.MouseEvent<HTMLSpanElement>) => void;
+};
+declare function Th({ children, w, align, className, }: {
+    children: React__default.ReactNode;
+    w?: string | number;
+    align?: "left" | "center" | "right";
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SortTh({ children, w, minW, align, active, asc, onClick, className, resizable, colKey, onGripDown, }: SortThProps): react_jsx_runtime.JSX.Element;
+declare function Td({ children, className, align, colSpan, }: {
+    children: React__default.ReactNode;
+    className?: string;
+    align?: "left" | "center" | "right";
+    colSpan?: number;
+}): react_jsx_runtime.JSX.Element;
+
+export { SortTh, Td, Th };

package/dist/Table.js

@@ -0,0 +1,153 @@
+"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 Table_exports = {};
+__export(Table_exports, {
+  SortTh: () => SortTh,
+  Td: () => Td,
+  Th: () => Th
+});
+module.exports = __toCommonJS(Table_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+function useMounted() {
+  const [mounted, setMounted] = import_react.default.useState(false);
+  import_react.default.useEffect(() => setMounted(true), []);
+  return mounted;
+}
+function Th({
+  children,
+  w,
+  align,
+  className
+}) {
+  const mounted = useMounted();
+  const widthStyle = typeof w === "number" ? `${w}px` : typeof w === "string" ? w : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "th",
+    {
+      suppressHydrationWarning: true,
+      className: `px-4 py-3 text-xs font-semibold uppercase tracking-wide text-slate-500 ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} ${className != null ? className : ""}`,
+      style: mounted ? { width: widthStyle } : void 0,
+      children
+    }
+  );
+}
+function SortTh({
+  children,
+  w,
+  minW = 96,
+  align,
+  active = false,
+  asc = true,
+  onClick,
+  className,
+  resizable = false,
+  colKey,
+  onGripDown
+}) {
+  const mounted = useMounted();
+  const widthStyle = typeof w === "number" ? `${w}px` : typeof w === "string" ? w : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "th",
+    {
+      suppressHydrationWarning: true,
+      style: mounted ? { width: widthStyle, minWidth: `${minW}px` } : void 0,
+      "aria-sort": active ? asc ? "ascending" : "descending" : "none",
+      className: [
+        "relative px-2 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500 select-none",
+        align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left",
+        className != null ? className : ""
+      ].join(" "),
+      scope: "col",
+      role: "columnheader",
+      "data-active": active ? "1" : "0",
+      "data-asc": asc ? "1" : "0",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick,
+            className: "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/5",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "svg",
+                {
+                  suppressHydrationWarning: true,
+                  viewBox: "0 0 24 24",
+                  className: `h-4 w-4 transition ${active ? "opacity-80" : "opacity-30"} ${asc ? "" : "rotate-180"}`,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 14l5-5 5 5" })
+                }
+              )
+            ]
+          }
+        ),
+        mounted && resizable && colKey && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            onMouseDown: (e) => onGripDown == null ? void 0 : onGripDown(colKey, e),
+            className: "\n            absolute right-0 top-0 h-full w-2 cursor-col-resize\n            bg-transparent hover:bg-slate-300/40 dark:hover:bg-white/10\n            after:absolute after:inset-y-0 after:left-1/2 after:w-px after:bg-slate-300 dark:after:bg-white/30\n          ",
+            style: { transform: "translateX(50%)" },
+            title: "Arrastra para ajustar el ancho",
+            "aria-label": "Redimensionar columna",
+            role: "separator",
+            "aria-orientation": "vertical"
+          }
+        )
+      ]
+    }
+  );
+}
+function Td({
+  children,
+  className,
+  align,
+  colSpan
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "td",
+    {
+      className: `px-4 ${className != null ? className : ""} ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} py-2`,
+      colSpan,
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SortTh,
+  Td,
+  Th
+});

package/dist/Table.mjs

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+function useMounted() {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  return mounted;
+}
+function Th({
+  children,
+  w,
+  align,
+  className
+}) {
+  const mounted = useMounted();
+  const widthStyle = typeof w === "number" ? `${w}px` : typeof w === "string" ? w : void 0;
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      suppressHydrationWarning: true,
+      className: `px-4 py-3 text-xs font-semibold uppercase tracking-wide text-slate-500 ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} ${className != null ? className : ""}`,
+      style: mounted ? { width: widthStyle } : void 0,
+      children
+    }
+  );
+}
+function SortTh({
+  children,
+  w,
+  minW = 96,
+  align,
+  active = false,
+  asc = true,
+  onClick,
+  className,
+  resizable = false,
+  colKey,
+  onGripDown
+}) {
+  const mounted = useMounted();
+  const widthStyle = typeof w === "number" ? `${w}px` : typeof w === "string" ? w : void 0;
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      suppressHydrationWarning: true,
+      style: mounted ? { width: widthStyle, minWidth: `${minW}px` } : void 0,
+      "aria-sort": active ? asc ? "ascending" : "descending" : "none",
+      className: [
+        "relative px-2 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500 select-none",
+        align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left",
+        className != null ? className : ""
+      ].join(" "),
+      scope: "col",
+      role: "columnheader",
+      "data-active": active ? "1" : "0",
+      "data-asc": asc ? "1" : "0",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick,
+            className: "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/5",
+            children: [
+              /* @__PURE__ */ jsx("span", { children }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  suppressHydrationWarning: true,
+                  viewBox: "0 0 24 24",
+                  className: `h-4 w-4 transition ${active ? "opacity-80" : "opacity-30"} ${asc ? "" : "rotate-180"}`,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: "M7 14l5-5 5 5" })
+                }
+              )
+            ]
+          }
+        ),
+        mounted && resizable && colKey && /* @__PURE__ */ jsx(
+          "span",
+          {
+            onMouseDown: (e) => onGripDown == null ? void 0 : onGripDown(colKey, e),
+            className: "\n            absolute right-0 top-0 h-full w-2 cursor-col-resize\n            bg-transparent hover:bg-slate-300/40 dark:hover:bg-white/10\n            after:absolute after:inset-y-0 after:left-1/2 after:w-px after:bg-slate-300 dark:after:bg-white/30\n          ",
+            style: { transform: "translateX(50%)" },
+            title: "Arrastra para ajustar el ancho",
+            "aria-label": "Redimensionar columna",
+            role: "separator",
+            "aria-orientation": "vertical"
+          }
+        )
+      ]
+    }
+  );
+}
+function Td({
+  children,
+  className,
+  align,
+  colSpan
+}) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: `px-4 ${className != null ? className : ""} ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} py-2`,
+      colSpan,
+      children
+    }
+  );
+}
+export {
+  SortTh,
+  Td,
+  Th
+};

package/dist/TimeAgo.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TimeAgoInput = string | number | Date | null | undefined;
+type StrategyNoTZ = "local" | "utc";
+declare function TimeAgo({ iso, refreshMs, className, strategyNoTZ, }: {
+    iso: TimeAgoInput;
+    refreshMs?: number;
+    className?: string;
+    strategyNoTZ?: StrategyNoTZ;
+}): react_jsx_runtime.JSX.Element;
+
+export { TimeAgo as default };

package/dist/TimeAgo.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TimeAgoInput = string | number | Date | null | undefined;
+type StrategyNoTZ = "local" | "utc";
+declare function TimeAgo({ iso, refreshMs, className, strategyNoTZ, }: {
+    iso: TimeAgoInput;
+    refreshMs?: number;
+    className?: string;
+    strategyNoTZ?: StrategyNoTZ;
+}): react_jsx_runtime.JSX.Element;
+
+export { TimeAgo as default };

package/dist/TimeAgo.js

@@ -0,0 +1,104 @@
+"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 TimeAgo_exports = {};
+__export(TimeAgo_exports, {
+  default: () => TimeAgo
+});
+module.exports = __toCommonJS(TimeAgo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+function normalizeToDate(input, strategy) {
+  var _a, _b, _c, _d;
+  if (input == null) return null;
+  if (input instanceof Date) return isNaN(input.getTime()) ? null : input;
+  if (typeof input === "number") {
+    const d = new Date(input);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  const s = String(input).trim();
+  if (!s) return null;
+  if (/[zZ]|[+\-]\d{2}:\d{2}$/.test(s)) {
+    const d = new Date(s);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  const m = s.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/) || s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (m) {
+    const y = Number(m[1]);
+    const M = Number(m[2]) - 1;
+    const d = Number(m[3]);
+    const hh = Number((_a = m[4]) != null ? _a : 0);
+    const mm = Number((_b = m[5]) != null ? _b : 0);
+    const ss = Number((_c = m[6]) != null ? _c : 0);
+    const ms = Number((_d = m[7]) != null ? _d : 0);
+    return strategy === "utc" ? new Date(Date.UTC(y, M, d, hh, mm, ss, ms)) : new Date(y, M, d, hh, mm, ss, ms);
+  }
+  const dflt = new Date(s);
+  return isNaN(dflt.getTime()) ? null : dflt;
+}
+function formatRelative(from, to) {
+  let diffSec = Math.trunc((to.getTime() - from.getTime()) / 1e3);
+  if (Math.abs(diffSec) < 1) diffSec = 0;
+  const rtf = new Intl.RelativeTimeFormat("es", { numeric: "auto" });
+  const abs = Math.abs(diffSec);
+  const YEAR = 31536e3;
+  const MONTH = 2592e3;
+  const DAY = 86400;
+  const HOUR = 3600;
+  const MIN = 60;
+  if (abs >= YEAR) return rtf.format(Math.trunc(diffSec / YEAR), "year");
+  if (abs >= MONTH) return rtf.format(Math.trunc(diffSec / MONTH), "month");
+  if (abs >= DAY) return rtf.format(Math.trunc(diffSec / DAY), "day");
+  if (abs >= HOUR) return rtf.format(Math.trunc(diffSec / HOUR), "hour");
+  if (abs >= MIN) return rtf.format(Math.trunc(diffSec / MIN), "minute");
+  return rtf.format(diffSec, "second");
+}
+function TimeAgo({
+  iso,
+  refreshMs = 6e4,
+  className,
+  strategyNoTZ = "local"
+}) {
+  const [text, setText] = import_react.default.useState("\u2014");
+  import_react.default.useEffect(() => {
+    const date = normalizeToDate(iso, strategyNoTZ);
+    if (!date) {
+      setText("\u2014");
+      return;
+    }
+    const tick = () => {
+      const now = /* @__PURE__ */ new Date();
+      setText(formatRelative(now, date));
+    };
+    tick();
+    const id = setInterval(tick, refreshMs);
+    return () => clearInterval(id);
+  }, [iso, refreshMs, strategyNoTZ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, suppressHydrationWarning: true, children: text });
+}

package/dist/TimeAgo.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+function normalizeToDate(input, strategy) {
+  var _a, _b, _c, _d;
+  if (input == null) return null;
+  if (input instanceof Date) return isNaN(input.getTime()) ? null : input;
+  if (typeof input === "number") {
+    const d = new Date(input);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  const s = String(input).trim();
+  if (!s) return null;
+  if (/[zZ]|[+\-]\d{2}:\d{2}$/.test(s)) {
+    const d = new Date(s);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  const m = s.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/) || s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (m) {
+    const y = Number(m[1]);
+    const M = Number(m[2]) - 1;
+    const d = Number(m[3]);
+    const hh = Number((_a = m[4]) != null ? _a : 0);
+    const mm = Number((_b = m[5]) != null ? _b : 0);
+    const ss = Number((_c = m[6]) != null ? _c : 0);
+    const ms = Number((_d = m[7]) != null ? _d : 0);
+    return strategy === "utc" ? new Date(Date.UTC(y, M, d, hh, mm, ss, ms)) : new Date(y, M, d, hh, mm, ss, ms);
+  }
+  const dflt = new Date(s);
+  return isNaN(dflt.getTime()) ? null : dflt;
+}
+function formatRelative(from, to) {
+  let diffSec = Math.trunc((to.getTime() - from.getTime()) / 1e3);
+  if (Math.abs(diffSec) < 1) diffSec = 0;
+  const rtf = new Intl.RelativeTimeFormat("es", { numeric: "auto" });
+  const abs = Math.abs(diffSec);
+  const YEAR = 31536e3;
+  const MONTH = 2592e3;
+  const DAY = 86400;
+  const HOUR = 3600;
+  const MIN = 60;
+  if (abs >= YEAR) return rtf.format(Math.trunc(diffSec / YEAR), "year");
+  if (abs >= MONTH) return rtf.format(Math.trunc(diffSec / MONTH), "month");
+  if (abs >= DAY) return rtf.format(Math.trunc(diffSec / DAY), "day");
+  if (abs >= HOUR) return rtf.format(Math.trunc(diffSec / HOUR), "hour");
+  if (abs >= MIN) return rtf.format(Math.trunc(diffSec / MIN), "minute");
+  return rtf.format(diffSec, "second");
+}
+function TimeAgo({
+  iso,
+  refreshMs = 6e4,
+  className,
+  strategyNoTZ = "local"
+}) {
+  const [text, setText] = React.useState("\u2014");
+  React.useEffect(() => {
+    const date = normalizeToDate(iso, strategyNoTZ);
+    if (!date) {
+      setText("\u2014");
+      return;
+    }
+    const tick = () => {
+      const now = /* @__PURE__ */ new Date();
+      setText(formatRelative(now, date));
+    };
+    tick();
+    const id = setInterval(tick, refreshMs);
+    return () => clearInterval(id);
+  }, [iso, refreshMs, strategyNoTZ]);
+  return /* @__PURE__ */ jsx("span", { className, suppressHydrationWarning: true, children: text });
+}
+export {
+  TimeAgo as default
+};

package/dist/TimePanel.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Props = {
+    anchorRef: React__default.RefObject<HTMLElement>;
+    hh: number;
+    mm: number;
+    step?: number;
+    onChange: (hh: number, mm: number) => void;
+    onClose: () => void;
+};
+declare function TimePopover({ anchorRef, hh, mm, step, onChange, onClose, }: Props): react_jsx_runtime.JSX.Element;
+
+export { TimePopover as default };

package/dist/TimePanel.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Props = {
+    anchorRef: React__default.RefObject<HTMLElement>;
+    hh: number;
+    mm: number;
+    step?: number;
+    onChange: (hh: number, mm: number) => void;
+    onClose: () => void;
+};
+declare function TimePopover({ anchorRef, hh, mm, step, onChange, onClose, }: Props): react_jsx_runtime.JSX.Element;
+
+export { TimePopover as default };