framepexls-ui-lib 0.3.1 → 0.3.3

package/dist/StatCard.mjs

@@ -23,7 +23,7 @@ function StatCard({ title, value, hint, spark }) {
   const gid = useId();
   const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
   const isNumber = typeof value === "number";
-  return /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ jsxs("div", { className: "h-full group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:shadow-md dark:border-white/10 dark:bg-white/5", children: [
+  return /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ jsxs("div", { className: "h-full group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:shadow-md dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative z-10", 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 }),

package/dist/Steps.js

@@ -70,7 +70,7 @@ function Steps({
                 "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
                 state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
                 state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
-                state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
+                state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-[var(--fx-surface)]"
               ),
               "aria-current": state === "current" ? "step" : void 0,
               children: [
@@ -81,7 +81,7 @@ function Steps({
                       "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
                       state === "current" && "bg-blue-600 text-white ring-black/0",
                       state === "done" && "bg-emerald-600 text-white ring-black/0",
-                      state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
+                      state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-[var(--fx-surface)] dark:text-slate-200"
                     ),
                     children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
                   }

package/dist/Steps.mjs

@@ -36,7 +36,7 @@ function Steps({
                 "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
                 state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
                 state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
-                state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
+                state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-[var(--fx-surface)]"
               ),
               "aria-current": state === "current" ? "step" : void 0,
               children: [
@@ -47,7 +47,7 @@ function Steps({
                       "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
                       state === "current" && "bg-blue-600 text-white ring-black/0",
                       state === "done" && "bg-emerald-600 text-white ring-black/0",
-                      state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
+                      state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-[var(--fx-surface)] dark:text-slate-200"
                     ),
                     children: state === "done" ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
                   }

package/dist/Table.js

@@ -57,7 +57,7 @@ function Th({
     "th",
     {
       suppressHydrationWarning: true,
-      className: `px-4 py-3 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400 ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} ${className != null ? className : ""}`,
+      className: `px-4 py-3 text-[11px] font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-300 ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} ${className != null ? className : ""}`,
       style: mounted ? { width: widthStyle } : void 0,
       children
     }
@@ -85,7 +85,7 @@ function SortTh({
       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 dark:text-slate-400 select-none",
+        "relative px-2 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-300 select-none",
         align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left",
         className != null ? className : ""
       ].join(" "),
@@ -100,7 +100,7 @@ function SortTh({
             unstyled: true,
             type: "button",
             onClick,
-            className: "group relative 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/10",
+            className: "group relative 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/10 dark:focus:ring-white/10",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative", children: [
                 children,
@@ -137,7 +137,7 @@ function SortTh({
           "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          ",
+            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",
             "aria-label": "Redimensionar columna",
@@ -158,7 +158,7 @@ function Td({
   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`,
+      className: `px-4 ${className != null ? className : ""} ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} py-2 text-slate-700 dark:text-slate-200`,
       colSpan,
       children
     }

package/dist/Table.mjs

@@ -21,7 +21,7 @@ function Th({
     "th",
     {
       suppressHydrationWarning: true,
-      className: `px-4 py-3 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400 ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} ${className != null ? className : ""}`,
+      className: `px-4 py-3 text-[11px] font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-300 ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} ${className != null ? className : ""}`,
       style: mounted ? { width: widthStyle } : void 0,
       children
     }
@@ -49,7 +49,7 @@ function SortTh({
       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 dark:text-slate-400 select-none",
+        "relative px-2 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-300 select-none",
         align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left",
         className != null ? className : ""
       ].join(" "),
@@ -64,7 +64,7 @@ function SortTh({
             unstyled: true,
             type: "button",
             onClick,
-            className: "group relative 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/10",
+            className: "group relative 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/10 dark:focus:ring-white/10",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "relative", children: [
                 children,
@@ -101,7 +101,7 @@ function SortTh({
           "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          ",
+            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",
             "aria-label": "Redimensionar columna",
@@ -122,7 +122,7 @@ function Td({
   return /* @__PURE__ */ jsx(
     "td",
     {
-      className: `px-4 ${className != null ? className : ""} ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} py-2`,
+      className: `px-4 ${className != null ? className : ""} ${align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left"} py-2 text-slate-700 dark:text-slate-200`,
       colSpan,
       children
     }

package/dist/Textarea.js

@@ -39,7 +39,7 @@ var import_animations = require("./animations");
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
-const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus:ring-white/10";
+const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus:ring-white/10";
 const errorControl = "border-blue-300 focus:border-blue-300 focus:ring-blue-500/15";
 const Textarea = import_react.default.forwardRef(
   ({ className, error, tone = "default", value, onChange, unstyled, rows = 3, ...props }, ref) => {

package/dist/Textarea.mjs

@@ -6,7 +6,7 @@ import { microTransition } from "./animations";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
-const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus:ring-white/10";
+const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus:ring-white/10";
 const errorControl = "border-blue-300 focus:border-blue-300 focus:ring-blue-500/15";
 const Textarea = React.forwardRef(
   ({ className, error, tone = "default", value, onChange, unstyled, rows = 3, ...props }, ref) => {

package/dist/TimePanel.js

@@ -85,8 +85,8 @@ function TimePopover({
       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";
+  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-[var(--fx-surface)]";
+  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-[var(--fx-surface)]";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -116,7 +116,7 @@ function TimePopover({
               import_Button.default,
               {
                 unstyled: true,
-                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",
+                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-[var(--fx-surface)]",
                 onPointerDown: (e) => e.preventDefault(),
                 onClick: () => onChange(hh, v),
                 children: [
@@ -133,7 +133,7 @@ function TimePopover({
             import_Button.default,
             {
               unstyled: true,
-              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",
+              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-[var(--fx-surface)]",
               onPointerDown: (e) => e.preventDefault(),
               onClick: () => {
                 const t = /* @__PURE__ */ new Date();

package/dist/TimePanel.mjs

@@ -52,8 +52,8 @@ function TimePopover({
       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";
+  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-[var(--fx-surface)]";
+  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-[var(--fx-surface)]";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -83,7 +83,7 @@ function TimePopover({
               Button,
               {
                 unstyled: true,
-                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",
+                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-[var(--fx-surface)]",
                 onPointerDown: (e) => e.preventDefault(),
                 onClick: () => onChange(hh, v),
                 children: [
@@ -100,7 +100,7 @@ function TimePopover({
             Button,
             {
               unstyled: true,
-              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",
+              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-[var(--fx-surface)]",
               onPointerDown: (e) => e.preventDefault(),
               onClick: () => {
                 const t = /* @__PURE__ */ new Date();

package/dist/TimePopover.js

@@ -191,7 +191,7 @@ function TimePopover({
                     commit(n, M);
                   }
                 },
-                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-white/5"
+                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-[var(--fx-surface)]"
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -233,7 +233,7 @@ function TimePopover({
                   if (n > 59) n = 59;
                   commit(H, n);
                 },
-                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-white/5"
+                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-[var(--fx-surface)]"
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/TimePopover.mjs

@@ -156,7 +156,7 @@ function TimePopover({
                     commit(n, M);
                   }
                 },
-                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-white/5"
+                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-[var(--fx-surface)]"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -198,7 +198,7 @@ function TimePopover({
                   if (n > 59) n = 59;
                   commit(H, n);
                 },
-                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-white/5"
+                className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-[var(--fx-surface)]"
               }
             ),
             /* @__PURE__ */ jsx(

package/dist/TimeRangeField.js

@@ -128,12 +128,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
   }, [open]);
   const stylePop = (() => {
     if (!anchorRect) return { visibility: "hidden" };
-    const W = 360, GAP = 8, MARGIN = 8, H = 180;
+    const GAP = 8, MARGIN = 8;
+    const W = Math.min(420, Math.max(300, window.innerWidth - MARGIN * 2));
+    const H = Math.min(360, Math.max(200, Math.floor(window.innerHeight * 0.6)));
     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 maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
+    return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
   })();
   const commit = (f, t) => {
     let f2 = f, t2 = t;
@@ -146,7 +149,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     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-[var(--fx-surface)]", children: [
+  const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-trf-pop": true, style: stylePop, className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", 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)(
@@ -239,7 +242,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           {
             unstyled: true,
             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",
+            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-[var(--fx-surface)]",
             onClick: (e) => {
               e.preventDefault();
               openPopover();

package/dist/TimeRangeField.mjs

@@ -95,12 +95,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
   }, [open]);
   const stylePop = (() => {
     if (!anchorRect) return { visibility: "hidden" };
-    const W = 360, GAP = 8, MARGIN = 8, H = 180;
+    const GAP = 8, MARGIN = 8;
+    const W = Math.min(420, Math.max(300, window.innerWidth - MARGIN * 2));
+    const H = Math.min(360, Math.max(200, Math.floor(window.innerHeight * 0.6)));
     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 maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
+    return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
   })();
   const commit = (f, t) => {
     let f2 = f, t2 = t;
@@ -113,7 +116,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     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-[var(--fx-surface)]", children: [
+  const popover = /* @__PURE__ */ jsxs("div", { "data-trf-pop": true, style: stylePop, className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", 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(
@@ -206,7 +209,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           {
             unstyled: true,
             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",
+            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-[var(--fx-surface)]",
             onClick: (e) => {
               e.preventDefault();
               openPopover();

package/dist/Tooltip.js

@@ -127,7 +127,7 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
           transition: import_animations.menuTransition,
           className: [
             "pointer-events-none fixed z-[2000] max-w-xs rounded-xl border border-slate-200/80 bg-slate-900/95 px-2.5 py-1.5 text-[12px] text-white shadow-xl backdrop-blur",
-            "dark:border-white/10 dark:bg-white/10",
+            "dark:border-white/10 dark:bg-[var(--fx-surface)]",
             className != null ? className : ""
           ].join(" "),
           style: {

package/dist/Tooltip.mjs

@@ -94,7 +94,7 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
           transition: menuTransition,
           className: [
             "pointer-events-none fixed z-[2000] max-w-xs rounded-xl border border-slate-200/80 bg-slate-900/95 px-2.5 py-1.5 text-[12px] text-white shadow-xl backdrop-blur",
-            "dark:border-white/10 dark:bg-white/10",
+            "dark:border-white/10 dark:bg-[var(--fx-surface)]",
             className != null ? className : ""
           ].join(" "),
           style: {

package/dist/UploadCard.js

@@ -46,7 +46,7 @@ function UploadCard({
   multiple = true,
   disabled,
   buttonLabel = "Seleccionar",
-  dropLabel = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
+  dropLabel = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium text-slate-700 dark:text-slate-200", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
   note = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: "M\xE1ximo recomendado 16MB por archivo" }),
   uploads,
   className,
@@ -94,13 +94,13 @@ function UploadCard({
               var _a;
               return (_a = inputRef.current) == null ? void 0 : _a.click();
             },
-            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
+            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 ring-1 ring-black/5 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:from-white/10 dark:to-white/5 dark:hover:bg-white/10",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "svg",
                 {
                   viewBox: "0 0 24 24",
-                  className: "h-8 w-8 text-slate-400",
+                  className: "h-8 w-8 text-slate-400 dark:text-slate-400",
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "1.6",
@@ -123,11 +123,11 @@ function UploadCard({
               animate: { opacity: 1, y: 0 },
               exit: { opacity: 0, y: -6 },
               transition: import_animations.springSm,
-              className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white/70 p-2 dark:border-white/10 dark:bg-white/5",
+              className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white/70 p-2 dark:border-white/10 dark:bg-[var(--fx-surface)]",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-medium", children: u.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-medium text-slate-700 dark:text-slate-100", children: u.name }),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
                       pct,
                       "%"
@@ -142,9 +142,9 @@ function UploadCard({
                       transition: import_animations.springSm
                     }
                   ) }),
-                  u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-blue-600", children: u.error })
+                  u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-blue-600 dark:text-blue-400", children: u.error })
                 ] }),
-                u.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5 text-emerald-600", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 13l4 4L19 7" }) })
+                u.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5 text-emerald-600 dark:text-emerald-400", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 13l4 4L19 7" }) })
               ]
             },
             u.id

package/dist/UploadCard.mjs

@@ -13,7 +13,7 @@ function UploadCard({
   multiple = true,
   disabled,
   buttonLabel = "Seleccionar",
-  dropLabel = /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
+  dropLabel = /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-slate-700 dark:text-slate-200", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
   note = /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: "M\xE1ximo recomendado 16MB por archivo" }),
   uploads,
   className,
@@ -61,13 +61,13 @@ function UploadCard({
               var _a;
               return (_a = inputRef.current) == null ? void 0 : _a.click();
             },
-            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
+            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 ring-1 ring-black/5 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:from-white/10 dark:to-white/5 dark:hover:bg-white/10",
             children: [
               /* @__PURE__ */ jsx(
                 "svg",
                 {
                   viewBox: "0 0 24 24",
-                  className: "h-8 w-8 text-slate-400",
+                  className: "h-8 w-8 text-slate-400 dark:text-slate-400",
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "1.6",
@@ -90,11 +90,11 @@ function UploadCard({
               animate: { opacity: 1, y: 0 },
               exit: { opacity: 0, y: -6 },
               transition: springSm,
-              className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white/70 p-2 dark:border-white/10 dark:bg-white/5",
+              className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white/70 p-2 dark:border-white/10 dark:bg-[var(--fx-surface)]",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-                    /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: u.name }),
+                    /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-slate-700 dark:text-slate-100", children: u.name }),
                     /* @__PURE__ */ jsxs("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
                       pct,
                       "%"
@@ -109,9 +109,9 @@ function UploadCard({
                       transition: springSm
                     }
                   ) }),
-                  u.status === "error" && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-blue-600", children: u.error })
+                  u.status === "error" && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-blue-600 dark:text-blue-400", children: u.error })
                 ] }),
-                u.status === "done" && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5 text-emerald-600", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" }) })
+                u.status === "done" && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5 text-emerald-600 dark:text-emerald-400", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" }) })
               ]
             },
             u.id

package/dist/index.d.mts

@@ -18,6 +18,8 @@ export { default as ChartCard } from './ChartCard.mjs';
 export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.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 Skeleton, SkeletonBaseProps } from './Skeleton.mjs';
 export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.mjs';
 export { default as StatCard } from './StatCard.mjs';
 export { default as KpiCard, KpiCardProps } from './KpiCard.mjs';

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export { default as ChartCard } from './ChartCard.js';
 export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.js';
 export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.js';
 export { default as MediaCard, MediaCardProps } from './MediaCard.js';
+export { default as MediaTile, MediaTileProps } from './MediaTile.js';
+export { default as Skeleton, SkeletonBaseProps } from './Skeleton.js';
 export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.js';
 export { default as StatCard } from './StatCard.js';
 export { default as KpiCard, KpiCardProps } from './KpiCard.js';

package/dist/index.js

@@ -61,6 +61,7 @@ __export(index_exports, {
   Link: () => import_Link.default,
   MediaCard: () => import_MediaCard.default,
   MediaSelector: () => import_MediaSelector.default,
+  MediaTile: () => import_MediaTile.default,
   Money: () => import_Money.default,
   MonthPopover: () => import_TimePopover2.MonthPopover,
   MotionProvider: () => import_MotionProvider.default,
@@ -72,6 +73,7 @@ __export(index_exports, {
   SearchInput: () => import_SearchInput.default,
   Select: () => import_Select.default,
   Sidebar: () => import_Sidebar.default,
+  Skeleton: () => import_Skeleton.default,
   SortTh: () => import_Table.SortTh,
   StatCard: () => import_StatCard.default,
   Steps: () => import_Steps.default,
@@ -118,6 +120,8 @@ var import_ChartCard = __toESM(require("./ChartCard"));
 var import_AnalyticsCharts = require("./AnalyticsCharts");
 var import_UploadCard = __toESM(require("./UploadCard"));
 var import_MediaCard = __toESM(require("./MediaCard"));
+var import_MediaTile = __toESM(require("./MediaTile"));
+var import_Skeleton = __toESM(require("./Skeleton"));
 var import_MediaSelector = __toESM(require("./MediaSelector"));
 var import_StatCard = __toESM(require("./StatCard"));
 var import_KpiCard = __toESM(require("./KpiCard"));
@@ -190,6 +194,7 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
   Link,
   MediaCard,
   MediaSelector,
+  MediaTile,
   Money,
   MonthPopover,
   MotionProvider,
@@ -201,6 +206,7 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
   SearchInput,
   Select,
   Sidebar,
+  Skeleton,
   SortTh,
   StatCard,
   Steps,