framepexls-ui-lib 1.16.0 → 2.0.0

package/dist/StatCard.js

@@ -36,16 +36,16 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_framer_motion = require("framer-motion");
 var import_react = require("react");
 var import_recharts = require("recharts");
+var import_Dropdown = __toESM(require("./Dropdown"));
+var import_iconos = require("./iconos");
 var import_AutoSize = __toESM(require("./internal/AutoSize"));
 var import_skeleton = require("./internal/skeleton");
 function MotionNumber({ value, format }) {
   const mv = (0, import_framer_motion.useMotionValue)(value);
   const [display, setDisplay] = (0, import_react.useState)(value);
-  const prevRef = (0, import_react.useRef)(value);
   (0, import_react.useEffect)(() => {
     const controls = (0, import_framer_motion.animate)(mv, value, { duration: 0.5, ease: "easeOut" });
     const unsub = mv.on("change", (v) => setDisplay(v));
-    prevRef.current = value;
     return () => {
       controls.stop();
       unsub();
@@ -53,7 +53,91 @@ function MotionNumber({ value, format }) {
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
 }
-function StatCard({ title, value, hint, spark, loading, loadingMinDurationMs = import_skeleton.DEFAULT_SKELETON_MIN_DURATION_MS, skeleton }) {
+function resolveComparisonLabel(comparison) {
+  if (comparison.label !== void 0) return comparison.label;
+  if (!comparison.period) return null;
+  const periodLabels = comparison.locale === "es" ? {
+    day: "vs \xFAltimo d\xEDa",
+    week: "vs \xFAltima semana",
+    month: "vs \xFAltimo mes",
+    quarter: "vs \xFAltimo trimestre",
+    year: "vs \xFAltimo a\xF1o"
+  } : {
+    day: "vs last day",
+    week: "vs last week",
+    month: "vs last month",
+    quarter: "vs last quarter",
+    year: "vs last year"
+  };
+  return periodLabels[comparison.period];
+}
+function resolveComparisonTrend(comparison) {
+  if (comparison.trend && comparison.trend !== "auto") return comparison.trend;
+  if (comparison.value > 0) return "up";
+  if (comparison.value < 0) return "down";
+  return "flat";
+}
+function formatComparisonValue(comparison) {
+  var _a, _b;
+  if (comparison.formatter) return comparison.formatter(comparison.value);
+  const absoluteValue = Math.abs(comparison.value);
+  const precision = (_a = comparison.precision) != null ? _a : Number.isInteger(absoluteValue) ? 0 : 1;
+  const formatted = absoluteValue.toLocaleString(void 0, {
+    minimumFractionDigits: precision,
+    maximumFractionDigits: precision
+  });
+  const prefix = comparison.showSign && comparison.value !== 0 ? comparison.value > 0 ? "+" : "-" : "";
+  return `${prefix}${formatted}${(_b = comparison.suffix) != null ? _b : "%"}`;
+}
+function ComparisonLine({ comparison }) {
+  var _a;
+  const trend = resolveComparisonTrend(comparison);
+  const positiveIsGood = (_a = comparison.positiveIsGood) != null ? _a : true;
+  const isPositiveTone = trend !== "flat" && (positiveIsGood ? trend === "up" : trend === "down");
+  const toneClass = trend === "flat" ? "text-slate-400 dark:text-slate-500" : isPositiveTone ? "text-emerald-500 dark:text-emerald-400" : "text-rose-500 dark:text-rose-400";
+  const label = resolveComparisonLabel(comparison);
+  const Icon = trend === "up" ? import_iconos.TrendUpIcon : trend === "down" ? import_iconos.TrendDownIcon : import_iconos.MinusIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `inline-flex items-center gap-1 font-medium ${toneClass}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { "aria-hidden": true, className: "h-3.5 w-3.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatComparisonValue(comparison) })
+    ] }),
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-400 dark:text-slate-500", children: label }) : null
+  ] });
+}
+function CardMenu({ menu }) {
+  var _a, _b, _c, _d;
+  if (!menu.items.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { onClickCapture: (e) => e.stopPropagation(), onMouseDownCapture: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default, { align: (_a = menu.align) != null ? _a : "end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Dropdown.default.Trigger,
+      {
+        "aria-label": (_b = menu.triggerAriaLabel) != null ? _b : "M\xE1s opciones",
+        className: "h-8 w-8 shrink-0 !gap-0 rounded-xl border-transparent bg-transparent p-0 text-slate-400 shadow-none hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-white/5 dark:hover:text-slate-300",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.MenuPuntosVerticalIcon, { "aria-hidden": true, className: "h-4.5 w-4.5" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dropdown.default.Content, { className: (_c = menu.contentClassName) != null ? _c : "w-[220px]", maxHeight: (_d = menu.maxHeight) != null ? _d : 280, children: [
+      menu.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dropdown.default.Label, { children: menu.label }) : null,
+      menu.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Dropdown.default.Item,
+        {
+          icon: item.icon,
+          kbd: item.kbd,
+          danger: item.danger,
+          disabled: item.disabled,
+          require: item.require,
+          hideIfUnauthorized: item.hideIfUnauthorized,
+          disableIfUnauthorized: item.disableIfUnauthorized,
+          onSelect: item.onSelect,
+          children: item.label
+        },
+        index
+      ))
+    ] })
+  ] }) });
+}
+function StatCard({ title, value, hint, comparison, menu, spark, loading, loadingMinDurationMs = import_skeleton.DEFAULT_SKELETON_MIN_DURATION_MS, skeleton }) {
   var _a, _b, _c, _d, _e;
   const gid = (0, import_react.useId)();
   const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
@@ -66,9 +150,13 @@ function StatCard({ title, value, hint, spark, loading, loadingMinDurationMs = i
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: (_d = skeleton == null ? void 0 : skeleton.valueWidth) != null ? _d : "32%", height: 26, borderRadius: 12 } }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: (_e = skeleton == null ? void 0 : skeleton.hintWidth) != null ? _e : "58%", height: 10, borderRadius: 10, opacity: 0.9 } })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: isNumber ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MotionNumber, { value }) : value }),
-      hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-slate-400", children: hint })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 text-xs font-medium text-slate-500 dark:text-slate-400", children: title }),
+        menu ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardMenu, { menu }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-50", children: isNumber ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MotionNumber, { value }) : value }),
+      comparison ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComparisonLine, { comparison }) : null,
+      hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${comparison ? "mt-1" : "mt-2"} text-xs text-slate-400 dark:text-slate-500`, children: hint })
     ] }) }),
     showSpark && (showLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-90", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton h-full w-full", style: { borderRadius: 0 } }) }) : null),
     !showLoading && spark && spark.values.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AutoSize.default, { className: "pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-90", children: ({ width, height }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/StatCard.mjs

@@ -1,18 +1,18 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { animate, motion, useMotionValue } from "framer-motion";
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { Area, AreaChart } from "recharts";
+import Dropdown from "./Dropdown.mjs";
+import { MenuPuntosVerticalIcon, MinusIcon, TrendDownIcon, TrendUpIcon } from "./iconos/index.mjs";
 import AutoSize from "./internal/AutoSize.mjs";
 import { DEFAULT_SKELETON_MIN_DURATION_MS, useMinVisible } from "./internal/skeleton.mjs";
 function MotionNumber({ value, format }) {
   const mv = useMotionValue(value);
   const [display, setDisplay] = useState(value);
-  const prevRef = useRef(value);
   useEffect(() => {
     const controls = animate(mv, value, { duration: 0.5, ease: "easeOut" });
     const unsub = mv.on("change", (v) => setDisplay(v));
-    prevRef.current = value;
     return () => {
       controls.stop();
       unsub();
@@ -20,7 +20,91 @@ function MotionNumber({ value, format }) {
   }, [value]);
   return /* @__PURE__ */ jsx("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
 }
-function StatCard({ title, value, hint, spark, loading, loadingMinDurationMs = DEFAULT_SKELETON_MIN_DURATION_MS, skeleton }) {
+function resolveComparisonLabel(comparison) {
+  if (comparison.label !== void 0) return comparison.label;
+  if (!comparison.period) return null;
+  const periodLabels = comparison.locale === "es" ? {
+    day: "vs \xFAltimo d\xEDa",
+    week: "vs \xFAltima semana",
+    month: "vs \xFAltimo mes",
+    quarter: "vs \xFAltimo trimestre",
+    year: "vs \xFAltimo a\xF1o"
+  } : {
+    day: "vs last day",
+    week: "vs last week",
+    month: "vs last month",
+    quarter: "vs last quarter",
+    year: "vs last year"
+  };
+  return periodLabels[comparison.period];
+}
+function resolveComparisonTrend(comparison) {
+  if (comparison.trend && comparison.trend !== "auto") return comparison.trend;
+  if (comparison.value > 0) return "up";
+  if (comparison.value < 0) return "down";
+  return "flat";
+}
+function formatComparisonValue(comparison) {
+  var _a, _b;
+  if (comparison.formatter) return comparison.formatter(comparison.value);
+  const absoluteValue = Math.abs(comparison.value);
+  const precision = (_a = comparison.precision) != null ? _a : Number.isInteger(absoluteValue) ? 0 : 1;
+  const formatted = absoluteValue.toLocaleString(void 0, {
+    minimumFractionDigits: precision,
+    maximumFractionDigits: precision
+  });
+  const prefix = comparison.showSign && comparison.value !== 0 ? comparison.value > 0 ? "+" : "-" : "";
+  return `${prefix}${formatted}${(_b = comparison.suffix) != null ? _b : "%"}`;
+}
+function ComparisonLine({ comparison }) {
+  var _a;
+  const trend = resolveComparisonTrend(comparison);
+  const positiveIsGood = (_a = comparison.positiveIsGood) != null ? _a : true;
+  const isPositiveTone = trend !== "flat" && (positiveIsGood ? trend === "up" : trend === "down");
+  const toneClass = trend === "flat" ? "text-slate-400 dark:text-slate-500" : isPositiveTone ? "text-emerald-500 dark:text-emerald-400" : "text-rose-500 dark:text-rose-400";
+  const label = resolveComparisonLabel(comparison);
+  const Icon = trend === "up" ? TrendUpIcon : trend === "down" ? TrendDownIcon : MinusIcon;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs", children: [
+    /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 font-medium ${toneClass}`, children: [
+      /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "h-3.5 w-3.5" }),
+      /* @__PURE__ */ jsx("span", { children: formatComparisonValue(comparison) })
+    ] }),
+    label ? /* @__PURE__ */ jsx("span", { className: "text-slate-400 dark:text-slate-500", children: label }) : null
+  ] });
+}
+function CardMenu({ menu }) {
+  var _a, _b, _c, _d;
+  if (!menu.items.length) return null;
+  return /* @__PURE__ */ jsx("div", { onClickCapture: (e) => e.stopPropagation(), onMouseDownCapture: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Dropdown, { align: (_a = menu.align) != null ? _a : "end", children: [
+    /* @__PURE__ */ jsx(
+      Dropdown.Trigger,
+      {
+        "aria-label": (_b = menu.triggerAriaLabel) != null ? _b : "M\xE1s opciones",
+        className: "h-8 w-8 shrink-0 !gap-0 rounded-xl border-transparent bg-transparent p-0 text-slate-400 shadow-none hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-white/5 dark:hover:text-slate-300",
+        children: /* @__PURE__ */ jsx(MenuPuntosVerticalIcon, { "aria-hidden": true, className: "h-4.5 w-4.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Dropdown.Content, { className: (_c = menu.contentClassName) != null ? _c : "w-[220px]", maxHeight: (_d = menu.maxHeight) != null ? _d : 280, children: [
+      menu.label ? /* @__PURE__ */ jsx(Dropdown.Label, { children: menu.label }) : null,
+      menu.items.map((item, index) => /* @__PURE__ */ jsx(
+        Dropdown.Item,
+        {
+          icon: item.icon,
+          kbd: item.kbd,
+          danger: item.danger,
+          disabled: item.disabled,
+          require: item.require,
+          hideIfUnauthorized: item.hideIfUnauthorized,
+          disableIfUnauthorized: item.disableIfUnauthorized,
+          onSelect: item.onSelect,
+          children: item.label
+        },
+        index
+      ))
+    ] })
+  ] }) });
+}
+function StatCard({ title, value, hint, comparison, menu, spark, loading, loadingMinDurationMs = DEFAULT_SKELETON_MIN_DURATION_MS, skeleton }) {
   var _a, _b, _c, _d, _e;
   const gid = useId();
   const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
@@ -33,9 +117,13 @@ function StatCard({ title, value, hint, spark, loading, loadingMinDurationMs = D
       /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: (_d = skeleton == null ? void 0 : skeleton.valueWidth) != null ? _d : "32%", height: 26, borderRadius: 12 } }),
       /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: (_e = skeleton == null ? void 0 : skeleton.hintWidth) != null ? _e : "58%", height: 10, borderRadius: 10, opacity: 0.9 } })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: isNumber ? /* @__PURE__ */ jsx(MotionNumber, { value }) : value }),
-      hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-slate-400", children: hint })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 text-xs font-medium text-slate-500 dark:text-slate-400", children: title }),
+        menu ? /* @__PURE__ */ jsx(CardMenu, { menu }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-50", children: isNumber ? /* @__PURE__ */ jsx(MotionNumber, { value }) : value }),
+      comparison ? /* @__PURE__ */ jsx(ComparisonLine, { comparison }) : null,
+      hint && /* @__PURE__ */ jsx("div", { className: `${comparison ? "mt-1" : "mt-2"} text-xs text-slate-400 dark:text-slate-500`, children: hint })
     ] }) }),
     showSpark && (showLoading ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-90", children: /* @__PURE__ */ jsx("div", { className: "fx-skeleton h-full w-full", style: { borderRadius: 0 } }) }) : null),
     !showLoading && spark && spark.values.length > 1 && /* @__PURE__ */ jsx(AutoSize, { className: "pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-90", children: ({ width, height }) => /* @__PURE__ */ jsxs(

package/dist/Table.js

@@ -46,11 +46,71 @@ function useMounted() {
   import_react.default.useEffect(() => setMounted(true), []);
   return mounted;
 }
+const TableColumnResizeContext = import_react.default.createContext(null);
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function toNumericWidth(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim().toLowerCase();
+  if (!normalized.endsWith("px")) return void 0;
+  const parsed = Number.parseFloat(normalized.slice(0, -2));
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
 const Table = import_react.default.forwardRef(function Table2({ className, dense = false, children, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const [widths, setWidths] = import_react.default.useState({});
+  const resizingRef = import_react.default.useRef(null);
+  const resolveWidth = import_react.default.useCallback((colKey, fallbackW, minW, maxW) => {
+    const current = widths[colKey];
+    if (typeof current !== "number") {
+      return fallbackW;
+    }
+    const min = typeof minW === "number" ? minW : 72;
+    const max = typeof maxW === "number" ? maxW : 920;
+    return Math.round(clamp(current, min, max));
+  }, [widths]);
+  const onGripDown = import_react.default.useCallback((colKey, e, options) => {
+    var _a, _b;
+    e.preventDefault();
+    e.stopPropagation();
+    const th = e.currentTarget.closest("th");
+    const measured = th == null ? void 0 : th.getBoundingClientRect().width;
+    const fallback = toNumericWidth(options == null ? void 0 : options.fallbackW);
+    const startW = typeof measured === "number" && measured > 0 ? measured : (_b = (_a = widths[colKey]) != null ? _a : fallback) != null ? _b : 140;
+    const min = typeof (options == null ? void 0 : options.minW) === "number" ? options.minW : Math.min(startW, 72);
+    const max = typeof (options == null ? void 0 : options.maxW) === "number" ? options.maxW : 920;
+    resizingRef.current = {
+      key: colKey,
+      startX: e.clientX,
+      startW,
+      min,
+      max
+    };
+    const onMove = (ev) => {
+      const state = resizingRef.current;
+      if (!state) return;
+      const next = clamp(state.startW + (ev.clientX - state.startX), state.min, state.max);
+      setWidths((prev) => ({ ...prev, [state.key]: Math.round(next) }));
+    };
+    const onUp = () => {
+      resizingRef.current = null;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  }, [widths]);
+  const contextValue = import_react.default.useMemo(() => ({
+    resolveWidth,
+    onGripDown
+  }), [onGripDown, resolveWidth]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableColumnResizeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "table",
     {
       ref,
@@ -62,7 +122,7 @@ const Table = import_react.default.forwardRef(function Table2({ className, dense
       ...rest,
       children
     }
-  ) });
+  ) }) });
 });
 function Th({
   children,
@@ -76,7 +136,20 @@ function Th({
   onGripDown
 }) {
   const mounted = useMounted();
-  const widthStyle = typeof w === "number" ? `${w}px` : typeof w === "string" ? w : void 0;
+  const resizeContext = import_react.default.useContext(TableColumnResizeContext);
+  const resolvedW = mounted && resizeContext && resizable && colKey && !onGripDown ? resizeContext.resolveWidth(colKey, w, minW, maxW) : w;
+  const widthStyle = typeof resolvedW === "number" ? `${resolvedW}px` : typeof resolvedW === "string" ? resolvedW : void 0;
+  const handleGripDown = (key, e) => {
+    if (onGripDown) {
+      onGripDown(key, e);
+      return;
+    }
+    resizeContext == null ? void 0 : resizeContext.onGripDown(key, e, {
+      fallbackW: w,
+      minW,
+      maxW
+    });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "th",
     {
@@ -92,7 +165,7 @@ function Th({
         mounted && resizable && colKey && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            onPointerDown: (e) => onGripDown == null ? void 0 : onGripDown(colKey, e),
+            onPointerDown: (e) => handleGripDown(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/80 dark:after:bg-white/20\n          ",
             style: { transform: "translateX(50%)" },
             title: "Arrastra para ajustar el ancho",
@@ -120,7 +193,20 @@ function SortTh({
   onGripDown
 }) {
   const mounted = useMounted();
-  const widthStyle = typeof w === "number" ? `${w}px` : typeof w === "string" ? w : void 0;
+  const resizeContext = import_react.default.useContext(TableColumnResizeContext);
+  const resolvedW = mounted && resizeContext && resizable && colKey && !onGripDown ? resizeContext.resolveWidth(colKey, w, minW, maxW) : w;
+  const widthStyle = typeof resolvedW === "number" ? `${resolvedW}px` : typeof resolvedW === "string" ? resolvedW : void 0;
+  const handleGripDown = (key, e) => {
+    if (onGripDown) {
+      onGripDown(key, e);
+      return;
+    }
+    resizeContext == null ? void 0 : resizeContext.onGripDown(key, e, {
+      fallbackW: w,
+      minW,
+      maxW
+    });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "th",
     {
@@ -185,7 +271,7 @@ function SortTh({
         mounted && resizable && colKey && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            onPointerDown: (e) => onGripDown == null ? void 0 : onGripDown(colKey, e),
+            onPointerDown: (e) => handleGripDown(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/80 dark:after:bg-white/20\n          ",
             style: { transform: "translateX(50%)" },
             title: "Arrastra para ajustar el ancho",

package/dist/Table.mjs

@@ -9,11 +9,71 @@ function useMounted() {
   React.useEffect(() => setMounted(true), []);
   return mounted;
 }
+const TableColumnResizeContext = React.createContext(null);
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function toNumericWidth(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim().toLowerCase();
+  if (!normalized.endsWith("px")) return void 0;
+  const parsed = Number.parseFloat(normalized.slice(0, -2));
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
 const Table = React.forwardRef(function Table2({ className, dense = false, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ jsx(
+  const [widths, setWidths] = React.useState({});
+  const resizingRef = React.useRef(null);
+  const resolveWidth = React.useCallback((colKey, fallbackW, minW, maxW) => {
+    const current = widths[colKey];
+    if (typeof current !== "number") {
+      return fallbackW;
+    }
+    const min = typeof minW === "number" ? minW : 72;
+    const max = typeof maxW === "number" ? maxW : 920;
+    return Math.round(clamp(current, min, max));
+  }, [widths]);
+  const onGripDown = React.useCallback((colKey, e, options) => {
+    var _a, _b;
+    e.preventDefault();
+    e.stopPropagation();
+    const th = e.currentTarget.closest("th");
+    const measured = th == null ? void 0 : th.getBoundingClientRect().width;
+    const fallback = toNumericWidth(options == null ? void 0 : options.fallbackW);
+    const startW = typeof measured === "number" && measured > 0 ? measured : (_b = (_a = widths[colKey]) != null ? _a : fallback) != null ? _b : 140;
+    const min = typeof (options == null ? void 0 : options.minW) === "number" ? options.minW : Math.min(startW, 72);
+    const max = typeof (options == null ? void 0 : options.maxW) === "number" ? options.maxW : 920;
+    resizingRef.current = {
+      key: colKey,
+      startX: e.clientX,
+      startW,
+      min,
+      max
+    };
+    const onMove = (ev) => {
+      const state = resizingRef.current;
+      if (!state) return;
+      const next = clamp(state.startW + (ev.clientX - state.startX), state.min, state.max);
+      setWidths((prev) => ({ ...prev, [state.key]: Math.round(next) }));
+    };
+    const onUp = () => {
+      resizingRef.current = null;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  }, [widths]);
+  const contextValue = React.useMemo(() => ({
+    resolveWidth,
+    onGripDown
+  }), [onGripDown, resolveWidth]);
+  return /* @__PURE__ */ jsx(TableColumnResizeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ jsx(
     "table",
     {
       ref,
@@ -25,7 +85,7 @@ const Table = React.forwardRef(function Table2({ className, dense = false, child
       ...rest,
       children
     }
-  ) });
+  ) }) });
 });
 function Th({
   children,
@@ -39,7 +99,20 @@ function Th({
   onGripDown
 }) {
   const mounted = useMounted();
-  const widthStyle = typeof w === "number" ? `${w}px` : typeof w === "string" ? w : void 0;
+  const resizeContext = React.useContext(TableColumnResizeContext);
+  const resolvedW = mounted && resizeContext && resizable && colKey && !onGripDown ? resizeContext.resolveWidth(colKey, w, minW, maxW) : w;
+  const widthStyle = typeof resolvedW === "number" ? `${resolvedW}px` : typeof resolvedW === "string" ? resolvedW : void 0;
+  const handleGripDown = (key, e) => {
+    if (onGripDown) {
+      onGripDown(key, e);
+      return;
+    }
+    resizeContext == null ? void 0 : resizeContext.onGripDown(key, e, {
+      fallbackW: w,
+      minW,
+      maxW
+    });
+  };
   return /* @__PURE__ */ jsxs(
     "th",
     {
@@ -55,7 +128,7 @@ function Th({
         mounted && resizable && colKey && /* @__PURE__ */ jsx(
           "span",
           {
-            onPointerDown: (e) => onGripDown == null ? void 0 : onGripDown(colKey, e),
+            onPointerDown: (e) => handleGripDown(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/80 dark:after:bg-white/20\n          ",
             style: { transform: "translateX(50%)" },
             title: "Arrastra para ajustar el ancho",
@@ -83,7 +156,20 @@ function SortTh({
   onGripDown
 }) {
   const mounted = useMounted();
-  const widthStyle = typeof w === "number" ? `${w}px` : typeof w === "string" ? w : void 0;
+  const resizeContext = React.useContext(TableColumnResizeContext);
+  const resolvedW = mounted && resizeContext && resizable && colKey && !onGripDown ? resizeContext.resolveWidth(colKey, w, minW, maxW) : w;
+  const widthStyle = typeof resolvedW === "number" ? `${resolvedW}px` : typeof resolvedW === "string" ? resolvedW : void 0;
+  const handleGripDown = (key, e) => {
+    if (onGripDown) {
+      onGripDown(key, e);
+      return;
+    }
+    resizeContext == null ? void 0 : resizeContext.onGripDown(key, e, {
+      fallbackW: w,
+      minW,
+      maxW
+    });
+  };
   return /* @__PURE__ */ jsxs(
     "th",
     {
@@ -148,7 +234,7 @@ function SortTh({
         mounted && resizable && colKey && /* @__PURE__ */ jsx(
           "span",
           {
-            onPointerDown: (e) => onGripDown == null ? void 0 : onGripDown(colKey, e),
+            onPointerDown: (e) => handleGripDown(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/80 dark:after:bg-white/20\n          ",
             style: { transform: "translateX(50%)" },
             title: "Arrastra para ajustar el ancho",

package/dist/charts.d.mts

@@ -0,0 +1,7 @@
+export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.mjs';
+export { BarSeries, default as RechartsBarCard, RechartsBarCardProps } from './RechartsBarCard.mjs';
+export { LineSeries, default as RechartsTimeSeriesCard, RechartsTimeSeriesCardProps } from './RechartsTimeSeriesCard.mjs';
+export { default as RechartsDonutCard, RechartsDonutCardProps } from './RechartsDonutCard.mjs';
+export { default as StatCard, StatCardComparison, StatCardComparisonPeriod, StatCardComparisonTrend, StatCardMenu, StatCardMenuItem, StatCardProps } from './StatCard.mjs';
+import 'react/jsx-runtime';
+import 'react';

package/dist/charts.d.ts

@@ -0,0 +1,7 @@
+export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.js';
+export { BarSeries, default as RechartsBarCard, RechartsBarCardProps } from './RechartsBarCard.js';
+export { LineSeries, default as RechartsTimeSeriesCard, RechartsTimeSeriesCardProps } from './RechartsTimeSeriesCard.js';
+export { default as RechartsDonutCard, RechartsDonutCardProps } from './RechartsDonutCard.js';
+export { default as StatCard, StatCardComparison, StatCardComparisonPeriod, StatCardComparisonTrend, StatCardMenu, StatCardMenuItem, StatCardProps } from './StatCard.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/charts.js

@@ -0,0 +1,54 @@
+"use strict";
+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 charts_exports = {};
+__export(charts_exports, {
+  CtrHorizontalBar: () => import_AnalyticsCharts.CtrHorizontalBar,
+  DestinoDonut: () => import_AnalyticsCharts.DestinoDonut,
+  RechartsBarCard: () => import_RechartsBarCard.default,
+  RechartsDonutCard: () => import_RechartsDonutCard.default,
+  RechartsTimeSeriesCard: () => import_RechartsTimeSeriesCard.default,
+  StatCard: () => import_StatCard.default,
+  TopImpresionesBar: () => import_AnalyticsCharts.TopImpresionesBar
+});
+module.exports = __toCommonJS(charts_exports);
+var import_AnalyticsCharts = require("./AnalyticsCharts");
+var import_RechartsBarCard = __toESM(require("./RechartsBarCard"));
+var import_RechartsTimeSeriesCard = __toESM(require("./RechartsTimeSeriesCard"));
+var import_RechartsDonutCard = __toESM(require("./RechartsDonutCard"));
+var import_StatCard = __toESM(require("./StatCard"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CtrHorizontalBar,
+  DestinoDonut,
+  RechartsBarCard,
+  RechartsDonutCard,
+  RechartsTimeSeriesCard,
+  StatCard,
+  TopImpresionesBar
+});

package/dist/charts.mjs

@@ -0,0 +1,14 @@
+import { TopImpresionesBar, CtrHorizontalBar, DestinoDonut } from "./AnalyticsCharts.mjs";
+import { default as default2 } from "./RechartsBarCard.mjs";
+import { default as default3 } from "./RechartsTimeSeriesCard.mjs";
+import { default as default4 } from "./RechartsDonutCard.mjs";
+import { default as default5 } from "./StatCard.mjs";
+export {
+  CtrHorizontalBar,
+  DestinoDonut,
+  default2 as RechartsBarCard,
+  default4 as RechartsDonutCard,
+  default3 as RechartsTimeSeriesCard,
+  default5 as StatCard,
+  TopImpresionesBar
+};

package/dist/index.d.mts

@@ -22,15 +22,10 @@ export { default as TableRecordButton } from './TableRecordButton.mjs';
 export { default as Pagination, PaginationProps } from './Pagination.mjs';
 export { default as InfoGrid, InfoItem } from './InfoGrid.mjs';
 export { default as ChartCard } from './ChartCard.mjs';
-export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.mjs';
-export { BarSeries, default as RechartsBarCard, RechartsBarCardProps } from './RechartsBarCard.mjs';
-export { LineSeries, default as RechartsTimeSeriesCard, RechartsTimeSeriesCardProps } from './RechartsTimeSeriesCard.mjs';
-export { default as RechartsDonutCard, RechartsDonutCardProps } from './RechartsDonutCard.mjs';
 export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.mjs';
 export { default as MediaCard, MediaCardProps } from './MediaCard.mjs';
 export { default as MediaTile, MediaTileProps } from './MediaTile.mjs';
 export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.mjs';
-export { default as StatCard, StatCardProps } from './StatCard.mjs';
 export { default as KpiCard, KpiCardProps } from './KpiCard.mjs';
 export { default as Badge, Tone as BadgeTone } from './Badge.mjs';
 export { default as BadgeCluster } from './BadgeCluster.mjs';