framepexls-ui-lib 0.2.8 → 0.2.9

package/dist/AppTopbar.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(AppTopbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Button = __toESM(require("./Button"));
 function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[var(--fx-surface)]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })

package/dist/AppTopbar.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Button from "./Button";
 function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
-  return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
+  return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[var(--fx-surface)]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })

package/dist/BadgeCluster.js

@@ -89,7 +89,7 @@ function BadgeCluster({
       transition: { duration: 0.16, ease: "easeOut" },
       className: [
         "z-[9999] w-64 max-w-[80vw] rounded-xl border border-slate-200 bg-white p-2 shadow-lg ring-1 ring-black/5",
-        "dark:border-white/10 dark:bg-[#0b0a0a]",
+        "dark:border-white/10 dark:bg-[var(--fx-surface)]",
         usePortal ? "fixed" : "absolute",
         align === "right" ? "right-0" : "left-0"
       ].join(" "),

package/dist/BadgeCluster.mjs

@@ -56,7 +56,7 @@ function BadgeCluster({
       transition: { duration: 0.16, ease: "easeOut" },
       className: [
         "z-[9999] w-64 max-w-[80vw] rounded-xl border border-slate-200 bg-white p-2 shadow-lg ring-1 ring-black/5",
-        "dark:border-white/10 dark:bg-[#0b0a0a]",
+        "dark:border-white/10 dark:bg-[var(--fx-surface)]",
         usePortal ? "fixed" : "absolute",
         align === "right" ? "right-0" : "left-0"
       ].join(" "),

package/dist/ColumnSelector.js

@@ -61,7 +61,7 @@ function ColumnSelector({
         initial: { opacity: 0, y: 6 },
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -6 },
-        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
         children: items.map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "label",
           {

package/dist/ColumnSelector.mjs

@@ -28,7 +28,7 @@ function ColumnSelector({
         initial: { opacity: 0, y: 6 },
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -6 },
-        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
         children: items.map(({ key, label }) => /* @__PURE__ */ jsxs(
           "label",
           {

package/dist/ComboSelect.js

@@ -301,7 +301,7 @@ function ComboSelect({
         role: "listbox",
         id: listId,
         style: dropStyle,
-        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
         children: filteredRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: noResultsText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
           if (row.kind === "section") {
             const Header = renderSectionHeader != null ? renderSectionHeader : DefaultSectionHeader;

package/dist/ComboSelect.mjs

@@ -268,7 +268,7 @@ function ComboSelect({
         role: "listbox",
         id: listId,
         style: dropStyle,
-        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
         children: filteredRows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: noResultsText }) : /* @__PURE__ */ jsx("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
           if (row.kind === "section") {
             const Header = renderSectionHeader != null ? renderSectionHeader : DefaultSectionHeader;

package/dist/DateTimeField.js

@@ -250,7 +250,7 @@ function DateTimeField({
       ref: popRef,
       style: stylePop,
       "data-dtf-pop": true,
-      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+      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: [
         type !== "time" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_CalendarPanel.default,

package/dist/DateTimeField.mjs

@@ -217,7 +217,7 @@ function DateTimeField({
       ref: popRef,
       style: stylePop,
       "data-dtf-pop": true,
-      className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+      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: [
         type !== "time" && /* @__PURE__ */ jsx(
           CalendarPanel,

package/dist/Dialog.js

@@ -170,7 +170,7 @@ function DialogBase({
               ref: containerRef,
               className: cx(
                 "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
-                "dark:border-white/10 dark:bg-[#0b0a0a]",
+                "dark:border-white/10 dark:bg-[var(--fx-surface)]",
                 size === "full" ? "flex h-[calc(100vh-2rem)] flex-col" : "flex max-h-[88vh] flex-col",
                 sizeToMaxW[size],
                 className
@@ -249,7 +249,7 @@ function DialogFooter({
         "sticky bottom-0 z-10 flex items-center gap-2 rounded-b-3xl border-t border-slate-200",
         "bg-white px-6 py-4 text-sm",
         "[box-shadow:inset_0_8px_10px_-8px_rgba(2,6,23,0.10)]",
-        "dark:border-white/10 dark:bg-[#0b0a0a] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
+        "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
         map[align]
       ),
       children

package/dist/Dialog.mjs

@@ -130,7 +130,7 @@ function DialogBase({
               ref: containerRef,
               className: cx(
                 "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
-                "dark:border-white/10 dark:bg-[#0b0a0a]",
+                "dark:border-white/10 dark:bg-[var(--fx-surface)]",
                 size === "full" ? "flex h-[calc(100vh-2rem)] flex-col" : "flex max-h-[88vh] flex-col",
                 sizeToMaxW[size],
                 className
@@ -209,7 +209,7 @@ function DialogFooter({
         "sticky bottom-0 z-10 flex items-center gap-2 rounded-b-3xl border-t border-slate-200",
         "bg-white px-6 py-4 text-sm",
         "[box-shadow:inset_0_8px_10px_-8px_rgba(2,6,23,0.10)]",
-        "dark:border-white/10 dark:bg-[#0b0a0a] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
+        "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
         map[align]
       ),
       children

package/dist/Drawer.js

@@ -83,7 +83,7 @@ function Root({
             "aria-modal": "true",
             "aria-labelledby": labelId,
             className: [
-              "absolute right-0 top-0 h-full bg-white shadow-2xl dark:bg-[#0b0a0a]",
+              "absolute right-0 top-0 h-full bg-white shadow-2xl dark:bg-[var(--fx-surface)]",
               widthClass,
               "flex flex-col",
               className != null ? className : ""
@@ -121,7 +121,7 @@ function Footer({ className, children, sticky }) {
     {
       className: [
         "border-t border-slate-200/70 px-5 py-4 dark:border-white/10",
-        sticky ? "backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-[#0b0a0a]/60" : "",
+        sticky ? "backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-[var(--fx-surface)]/60" : "",
         className != null ? className : ""
       ].join(" "),
       children

package/dist/Drawer.mjs

@@ -46,7 +46,7 @@ function Root({
             "aria-modal": "true",
             "aria-labelledby": labelId,
             className: [
-              "absolute right-0 top-0 h-full bg-white shadow-2xl dark:bg-[#0b0a0a]",
+              "absolute right-0 top-0 h-full bg-white shadow-2xl dark:bg-[var(--fx-surface)]",
               widthClass,
               "flex flex-col",
               className != null ? className : ""
@@ -84,7 +84,7 @@ function Footer({ className, children, sticky }) {
     {
       className: [
         "border-t border-slate-200/70 px-5 py-4 dark:border-white/10",
-        sticky ? "backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-[#0b0a0a]/60" : "",
+        sticky ? "backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-[var(--fx-surface)]/60" : "",
         className != null ? className : ""
       ].join(" "),
       children

package/dist/Dropdown.js

@@ -285,7 +285,7 @@ function Content({
           "data-[open=false]:pointer-events-none data-[open=false]:opacity-0 data-[open=false]:scale-95",
           "data-[open=true]:opacity-100 data-[open=true]:scale-100 transition",
           pos.origin === "top-right" ? "origin-top-right" : "origin-top-left",
-          "dark:border-white/10 dark:bg-[#0b0a0a]",
+          "dark:border-white/10 dark:bg-[var(--fx-surface)]",
           className
         ].join(" "),
         "data-open": "true",

package/dist/Dropdown.mjs

@@ -255,7 +255,7 @@ function Content({
           "data-[open=false]:pointer-events-none data-[open=false]:opacity-0 data-[open=false]:scale-95",
           "data-[open=true]:opacity-100 data-[open=true]:scale-100 transition",
           pos.origin === "top-right" ? "origin-top-right" : "origin-top-left",
-          "dark:border-white/10 dark:bg-[#0b0a0a]",
+          "dark:border-white/10 dark:bg-[var(--fx-surface)]",
           className
         ].join(" "),
         "data-open": "true",

package/dist/FiltersMultiSelect.js

@@ -109,7 +109,7 @@ function FiltersMultiSelect({
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -6 },
         className: clsx(
-          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
           align === "end" ? "right-0" : "left-0"
         ),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap", style: panelStyle, children: groups.map((g) => {

package/dist/FiltersMultiSelect.mjs

@@ -76,7 +76,7 @@ function FiltersMultiSelect({
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -6 },
         className: clsx(
-          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
           align === "end" ? "right-0" : "left-0"
         ),
         children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap", style: panelStyle, children: groups.map((g) => {

package/dist/Select.js

@@ -235,7 +235,7 @@ function ModernSelect({
         className: [
           "fixed z-[1000] max-h-72 overflow-auto",
           "rounded-2xl border border-slate-200/80 bg-white/90 backdrop-blur-md shadow-2xl ring-1 ring-black/5",
-          "dark:border-white/10 dark:bg-[#0b0a0a]/90 dark:ring-white/10"
+          "dark:border-white/10 dark:bg-[var(--fx-surface)]/90 dark:ring-white/10"
         ].join(" "),
         style: {
           top: menuPos.top,
@@ -248,7 +248,7 @@ function ModernSelect({
             "li",
             {
               role: "presentation",
-              className: `${S[size].itemPad} sticky top-0 bg-white/90 dark:bg-[#0b0a0a]/90 backdrop-blur-md text-slate-400 select-none`,
+              className: `${S[size].itemPad} sticky top-0 bg-white/90 dark:bg-[var(--fx-surface)]/90 backdrop-blur-md text-slate-400 select-none`,
               children: placeholder
             }
           ),

package/dist/Select.mjs

@@ -202,7 +202,7 @@ function ModernSelect({
         className: [
           "fixed z-[1000] max-h-72 overflow-auto",
           "rounded-2xl border border-slate-200/80 bg-white/90 backdrop-blur-md shadow-2xl ring-1 ring-black/5",
-          "dark:border-white/10 dark:bg-[#0b0a0a]/90 dark:ring-white/10"
+          "dark:border-white/10 dark:bg-[var(--fx-surface)]/90 dark:ring-white/10"
         ].join(" "),
         style: {
           top: menuPos.top,
@@ -215,7 +215,7 @@ function ModernSelect({
             "li",
             {
               role: "presentation",
-              className: `${S[size].itemPad} sticky top-0 bg-white/90 dark:bg-[#0b0a0a]/90 backdrop-blur-md text-slate-400 select-none`,
+              className: `${S[size].itemPad} sticky top-0 bg-white/90 dark:bg-[var(--fx-surface)]/90 backdrop-blur-md text-slate-400 select-none`,
               children: placeholder
             }
           ),

package/dist/Sidebar.js

@@ -200,7 +200,7 @@ function Sidebar({
     setDrawerOpen(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-black/5 bg-white/80 px-3 backdrop-blur shadow-sm xl:hidden dark:bg-[#0b0a0a]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-black/5 bg-white/80 px-3 backdrop-blur shadow-sm xl:hidden dark:bg-[var(--fx-surface)]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.default,
         {
@@ -225,7 +225,7 @@ function Sidebar({
       "aside",
       {
         className: [
-          "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[#0b0a0a] z-40",
+          "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
           "transition-[width] duration-200",
           collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
         ].join(" "),
@@ -259,7 +259,7 @@ function Sidebar({
           animate: { x: 0 },
           exit: { x: -340 },
           transition: { type: "spring", stiffness: 260, damping: 28 },
-          className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[#0b0a0a]",
+          className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[var(--fx-surface)]",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/Sidebar.mjs

@@ -167,7 +167,7 @@ function Sidebar({
     setDrawerOpen(false);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-black/5 bg-white/80 px-3 backdrop-blur shadow-sm xl:hidden dark:bg-[#0b0a0a]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-black/5 bg-white/80 px-3 backdrop-blur shadow-sm xl:hidden dark:bg-[var(--fx-surface)]", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -192,7 +192,7 @@ function Sidebar({
       "aside",
       {
         className: [
-          "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[#0b0a0a] z-40",
+          "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
           "transition-[width] duration-200",
           collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
         ].join(" "),
@@ -226,7 +226,7 @@ function Sidebar({
           animate: { x: 0 },
           exit: { x: -340 },
           transition: { type: "spring", stiffness: 260, damping: 28 },
-          className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[#0b0a0a]",
+          className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[var(--fx-surface)]",
           children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
               /* @__PURE__ */ jsx(

package/dist/TimePanel.js

@@ -93,7 +93,7 @@ function TimePopover({
       ref: popRef,
       style: stylePop,
       "data-dtf-pop": true,
-      className: "overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+      className: "overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-600 dark:text-slate-300", children: "Selecciona hora" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [

package/dist/TimePanel.mjs

@@ -60,7 +60,7 @@ function TimePopover({
       ref: popRef,
       style: stylePop,
       "data-dtf-pop": true,
-      className: "overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+      className: "overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-600 dark:text-slate-300", children: "Selecciona hora" }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [

package/dist/TimePopover.js

@@ -136,7 +136,7 @@ function TimePopover({
       onPointerDownCapture: (e) => e.stopPropagation(),
       onKeyDown,
       style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
-      className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+      className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
@@ -350,7 +350,7 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
   }
   const selFrom = (_a = value == null ? void 0 : value.from) != null ? _a : null;
   const selTo = (_b = value == null ? void 0 : value.to) != null ? _b : null;
-  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]", children: [
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.default,
@@ -456,7 +456,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       selMonthIdx = ((_a = parts[1]) != null ? _a : 1) - 1;
     }
   }
-  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]", children: [
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.default,

package/dist/TimePopover.mjs

@@ -101,7 +101,7 @@ function TimePopover({
       onPointerDownCapture: (e) => e.stopPropagation(),
       onKeyDown,
       style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
-      className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+      className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
         /* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
@@ -315,7 +315,7 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
   }
   const selFrom = (_a = value == null ? void 0 : value.from) != null ? _a : null;
   const selTo = (_b = value == null ? void 0 : value.to) != null ? _b : null;
-  const body = /* @__PURE__ */ jsxs("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]", children: [
+  const body = /* @__PURE__ */ jsxs("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx(
         Button,
@@ -421,7 +421,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       selMonthIdx = ((_a = parts[1]) != null ? _a : 1) - 1;
     }
   }
-  const body = /* @__PURE__ */ jsxs("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]", children: [
+  const body = /* @__PURE__ */ jsxs("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx(
         Button,

package/dist/TimeRangeField.js

@@ -146,7 +146,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-[#0b0a0a]", children: [
+  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: [
     /* @__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)(

package/dist/TimeRangeField.mjs

@@ -113,7 +113,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-[#0b0a0a]", children: [
+  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: [
     /* @__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(

package/dist/Toast.js

@@ -132,7 +132,7 @@ function ToastView({ item, onClose, placement }) {
       onMouseEnter,
       onMouseLeave,
       className: [
-        "pointer-events-auto relative w-[380px] max-w-[92vw] overflow-hidden rounded-xl border bg-white p-3 pr-10 shadow-lg dark:bg-[#0b0a0a]",
+        "pointer-events-auto relative w-[380px] max-w-[92vw] overflow-hidden rounded-xl border bg-white p-3 pr-10 shadow-lg dark:bg-[var(--fx-surface)]",
         accent.border
       ].join(" "),
       children: [

package/dist/Toast.mjs

@@ -97,7 +97,7 @@ function ToastView({ item, onClose, placement }) {
       onMouseEnter,
       onMouseLeave,
       className: [
-        "pointer-events-auto relative w-[380px] max-w-[92vw] overflow-hidden rounded-xl border bg-white p-3 pr-10 shadow-lg dark:bg-[#0b0a0a]",
+        "pointer-events-auto relative w-[380px] max-w-[92vw] overflow-hidden rounded-xl border bg-white p-3 pr-10 shadow-lg dark:bg-[var(--fx-surface)]",
         accent.border
       ].join(" "),
       children: [

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.js"
     }
   },
   "files": [
@@ -61,4 +61,4 @@
     "url": "https://github.com/cponce-framepexls/ui-lib/issues"
   },
   "homepage": "https://github.com/cponce-framepexls/ui-lib#readme"
-}
+}