framepexls-ui-lib 0.3.0 → 0.3.2

package/dist/Skeleton.js

@@ -0,0 +1,92 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Skeleton_exports = {};
+__export(Skeleton_exports, {
+  Skeleton: () => Skeleton,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonContainer: () => SkeletonContainer,
+  SkeletonLine: () => SkeletonLine,
+  SkeletonText: () => SkeletonText,
+  default: () => Skeleton_default
+});
+module.exports = __toCommonJS(Skeleton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Skeleton({ className, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: [
+        "animate-pulse rounded bg-slate-200 dark:bg-white/10",
+        className != null ? className : ""
+      ].join(" "),
+      style
+    }
+  );
+}
+function SkeletonCircle({ size = 40, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Skeleton,
+    {
+      className: ["rounded-full", className != null ? className : ""].join(" "),
+      style: { width: size, height: size }
+    }
+  );
+}
+function SkeletonLine({ width = "100%", height = 12, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Skeleton,
+    {
+      className: ["", className != null ? className : ""].join(" "),
+      style: { width, height, borderRadius: 6 }
+    }
+  );
+}
+function SkeletonText({ lines = 3, widths }) {
+  const arr = Array.from({ length: Math.max(1, lines) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: arr.map((_, i) => {
+    var _a;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SkeletonLine,
+      {
+        height: 12,
+        width: (_a = widths == null ? void 0 : widths[i]) != null ? _a : i === arr.length - 1 ? "70%" : "100%"
+      },
+      i
+    );
+  }) });
+}
+function SkeletonContainer({ loading, skeleton, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: loading ? skeleton : children });
+}
+const SkeletonCompound = Object.assign(Skeleton, {
+  Circle: SkeletonCircle,
+  Line: SkeletonLine,
+  Text: SkeletonText,
+  Container: SkeletonContainer
+});
+var Skeleton_default = SkeletonCompound;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonContainer,
+  SkeletonLine,
+  SkeletonText
+});

package/dist/Skeleton.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+function Skeleton({ className, style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "animate-pulse rounded bg-slate-200 dark:bg-white/10",
+        className != null ? className : ""
+      ].join(" "),
+      style
+    }
+  );
+}
+function SkeletonCircle({ size = 40, className }) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: ["rounded-full", className != null ? className : ""].join(" "),
+      style: { width: size, height: size }
+    }
+  );
+}
+function SkeletonLine({ width = "100%", height = 12, className }) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: ["", className != null ? className : ""].join(" "),
+      style: { width, height, borderRadius: 6 }
+    }
+  );
+}
+function SkeletonText({ lines = 3, widths }) {
+  const arr = Array.from({ length: Math.max(1, lines) });
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: arr.map((_, i) => {
+    var _a;
+    return /* @__PURE__ */ jsx(
+      SkeletonLine,
+      {
+        height: 12,
+        width: (_a = widths == null ? void 0 : widths[i]) != null ? _a : i === arr.length - 1 ? "70%" : "100%"
+      },
+      i
+    );
+  }) });
+}
+function SkeletonContainer({ loading, skeleton, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: loading ? skeleton : children });
+}
+const SkeletonCompound = Object.assign(Skeleton, {
+  Circle: SkeletonCircle,
+  Line: SkeletonLine,
+  Text: SkeletonText,
+  Container: SkeletonContainer
+});
+var Skeleton_default = SkeletonCompound;
+export {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonContainer,
+  SkeletonLine,
+  SkeletonText,
+  Skeleton_default as default
+};

package/dist/StatCard.js

@@ -46,7 +46,7 @@ function StatCard({ title, value, hint, spark }) {
   const gid = (0, import_react.useId)();
   const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
   const isNumber = typeof value === "number";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative z-10", 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 }),

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

@@ -239,7 +239,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

@@ -206,7 +206,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/iconos/index.js

@@ -405,20 +405,10 @@ const CloseIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18" }) });
 };
 const ChevronLeftRightIcon = ({ collapsed }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      className: `h-5 w-5 transition-transform ${collapsed ? "rotate-180" : ""}`,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 18l-6-6 6-6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 6l6 6-6 6" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "4", y: "4", width: "3", height: "16", rx: "1.5" }),
+    collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 8l4 4-4 4" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 8l-4 4 4 4" })
+  ] });
 };
 const MenuPuntosVerticalIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "currentColor", children: [