framepexls-ui-lib 0.3.1 → 0.3.3

package/dist/AvatarGroup.js

@@ -68,7 +68,7 @@ function AvatarGroup({
               overlap && visible.length > 0 ? "-ml-2" : "",
               "grid place-items-center",
               radiusClass,
-              "border border-slate-200 bg-white text-[11px] font-medium text-slate-600 dark:border-white/10 dark:bg-white/5 dark:text-slate-300"
+              "border border-slate-200 bg-white text-[11px] font-medium text-slate-600 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-300"
             ].join(" "),
             style: { width: size, height: size },
             "aria-label": `+${rest}`,

package/dist/AvatarGroup.mjs

@@ -35,7 +35,7 @@ function AvatarGroup({
               overlap && visible.length > 0 ? "-ml-2" : "",
               "grid place-items-center",
               radiusClass,
-              "border border-slate-200 bg-white text-[11px] font-medium text-slate-600 dark:border-white/10 dark:bg-white/5 dark:text-slate-300"
+              "border border-slate-200 bg-white text-[11px] font-medium text-slate-600 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-300"
             ].join(" "),
             style: { width: size, height: size },
             "aria-label": `+${rest}`,

package/dist/Badge.js

@@ -26,18 +26,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_framer_motion = require("framer-motion");
 var import_animations = require("./animations");
 const tones = {
-  emerald: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
-  indigo: "bg-indigo-100 text-indigo-700 ring-1 ring-indigo-200",
-  amber: "bg-amber-100 text-amber-700 ring-1 ring-amber-200",
-  slate: "bg-slate-100 text-slate-700 ring-1 ring-slate-200",
-  rose: "bg-rose-100 text-rose-700 ring-1 ring-rose-200",
-  sky: "bg-sky-100 text-sky-700 ring-1 ring-sky-200",
-  violet: "bg-blue-100 text-blue-700 ring-1 ring-blue-200",
-  cyan: "bg-cyan-100 text-cyan-700 ring-1 ring-cyan-200",
-  teal: "bg-teal-100 text-teal-700 ring-1 ring-teal-200",
-  pink: "bg-pink-100 text-pink-700 ring-1 ring-pink-200",
-  orange: "bg-orange-100 text-orange-700 ring-1 ring-orange-200",
-  lime: "bg-lime-100 text-lime-700 ring-1 ring-lime-200"
+  emerald: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200 dark:bg-[var(--fx-surface)] dark:text-emerald-300 dark:ring-white/10",
+  indigo: "bg-indigo-100 text-indigo-700 ring-1 ring-indigo-200 dark:bg-[var(--fx-surface)] dark:text-indigo-300 dark:ring-white/10",
+  amber: "bg-amber-100 text-amber-700 ring-1 ring-amber-200 dark:bg-[var(--fx-surface)] dark:text-amber-300 dark:ring-white/10",
+  slate: "bg-slate-100 text-slate-700 ring-1 ring-slate-200 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:ring-white/10",
+  rose: "bg-rose-100 text-rose-700 ring-1 ring-rose-200 dark:bg-[var(--fx-surface)] dark:text-rose-300 dark:ring-white/10",
+  sky: "bg-sky-100 text-sky-700 ring-1 ring-sky-200 dark:bg-[var(--fx-surface)] dark:text-sky-300 dark:ring-white/10",
+  violet: "bg-violet-100 text-violet-700 ring-1 ring-violet-200 dark:bg-[var(--fx-surface)] dark:text-violet-300 dark:ring-white/10",
+  cyan: "bg-cyan-100 text-cyan-700 ring-1 ring-cyan-200 dark:bg-[var(--fx-surface)] dark:text-cyan-300 dark:ring-white/10",
+  teal: "bg-teal-100 text-teal-700 ring-1 ring-teal-200 dark:bg-[var(--fx-surface)] dark:text-teal-300 dark:ring-white/10",
+  pink: "bg-pink-100 text-pink-700 ring-1 ring-pink-200 dark:bg-[var(--fx-surface)] dark:text-pink-300 dark:ring-white/10",
+  orange: "bg-orange-100 text-orange-700 ring-1 ring-orange-200 dark:bg-[var(--fx-surface)] dark:text-orange-300 dark:ring-white/10",
+  lime: "bg-lime-100 text-lime-700 ring-1 ring-lime-200 dark:bg-[var(--fx-surface)] dark:text-lime-300 dark:ring-white/10"
 };
 const sizeClasses = {
   sm: { wrap: "px-2 py-0.5 text-[11px]", dot: "h-1.5 w-1.5", gap: "gap-1.5" },

package/dist/Badge.mjs

@@ -3,18 +3,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 import { microTransition } from "./animations";
 const tones = {
-  emerald: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
-  indigo: "bg-indigo-100 text-indigo-700 ring-1 ring-indigo-200",
-  amber: "bg-amber-100 text-amber-700 ring-1 ring-amber-200",
-  slate: "bg-slate-100 text-slate-700 ring-1 ring-slate-200",
-  rose: "bg-rose-100 text-rose-700 ring-1 ring-rose-200",
-  sky: "bg-sky-100 text-sky-700 ring-1 ring-sky-200",
-  violet: "bg-blue-100 text-blue-700 ring-1 ring-blue-200",
-  cyan: "bg-cyan-100 text-cyan-700 ring-1 ring-cyan-200",
-  teal: "bg-teal-100 text-teal-700 ring-1 ring-teal-200",
-  pink: "bg-pink-100 text-pink-700 ring-1 ring-pink-200",
-  orange: "bg-orange-100 text-orange-700 ring-1 ring-orange-200",
-  lime: "bg-lime-100 text-lime-700 ring-1 ring-lime-200"
+  emerald: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200 dark:bg-[var(--fx-surface)] dark:text-emerald-300 dark:ring-white/10",
+  indigo: "bg-indigo-100 text-indigo-700 ring-1 ring-indigo-200 dark:bg-[var(--fx-surface)] dark:text-indigo-300 dark:ring-white/10",
+  amber: "bg-amber-100 text-amber-700 ring-1 ring-amber-200 dark:bg-[var(--fx-surface)] dark:text-amber-300 dark:ring-white/10",
+  slate: "bg-slate-100 text-slate-700 ring-1 ring-slate-200 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:ring-white/10",
+  rose: "bg-rose-100 text-rose-700 ring-1 ring-rose-200 dark:bg-[var(--fx-surface)] dark:text-rose-300 dark:ring-white/10",
+  sky: "bg-sky-100 text-sky-700 ring-1 ring-sky-200 dark:bg-[var(--fx-surface)] dark:text-sky-300 dark:ring-white/10",
+  violet: "bg-violet-100 text-violet-700 ring-1 ring-violet-200 dark:bg-[var(--fx-surface)] dark:text-violet-300 dark:ring-white/10",
+  cyan: "bg-cyan-100 text-cyan-700 ring-1 ring-cyan-200 dark:bg-[var(--fx-surface)] dark:text-cyan-300 dark:ring-white/10",
+  teal: "bg-teal-100 text-teal-700 ring-1 ring-teal-200 dark:bg-[var(--fx-surface)] dark:text-teal-300 dark:ring-white/10",
+  pink: "bg-pink-100 text-pink-700 ring-1 ring-pink-200 dark:bg-[var(--fx-surface)] dark:text-pink-300 dark:ring-white/10",
+  orange: "bg-orange-100 text-orange-700 ring-1 ring-orange-200 dark:bg-[var(--fx-surface)] dark:text-orange-300 dark:ring-white/10",
+  lime: "bg-lime-100 text-lime-700 ring-1 ring-lime-200 dark:bg-[var(--fx-surface)] dark:text-lime-300 dark:ring-white/10"
 };
 const sizeClasses = {
   sm: { wrap: "px-2 py-0.5 text-[11px]", dot: "h-1.5 w-1.5", gap: "gap-1.5" },

package/dist/BadgeCluster.js

@@ -111,7 +111,7 @@ function BadgeCluster({
           ref: btnRef,
           type: "button",
           onClick: () => setOpen((v) => !v),
-          className: "inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700 ring-1 ring-slate-200 hover:bg-slate-200 dark:bg-white/10 dark:text-slate-100 dark:ring-white/10",
+          className: "inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700 ring-1 ring-slate-200 hover:bg-slate-200 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:ring-white/10",
           title: rest.map((r) => r.label).join(", "),
           children: [
             "+",

package/dist/BadgeCluster.mjs

@@ -78,7 +78,7 @@ function BadgeCluster({
           ref: btnRef,
           type: "button",
           onClick: () => setOpen((v) => !v),
-          className: "inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700 ring-1 ring-slate-200 hover:bg-slate-200 dark:bg-white/10 dark:text-slate-100 dark:ring-white/10",
+          className: "inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700 ring-1 ring-slate-200 hover:bg-slate-200 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:ring-white/10",
           title: rest.map((r) => r.label).join(", "),
           children: [
             "+",

package/dist/Button.js

@@ -149,7 +149,7 @@ const Button = import_react.default.forwardRef(({
       case "primary":
         return color ? SOLID[color] : "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900";
       case "secondary":
-        return inverted ? "border border-white/15 bg-white/10 text-white hover:bg-white/15 active:scale-[.98]" : "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
+        return inverted ? "border border-white/15 bg-white/10 text-white hover:bg-white/15 active:scale-[.98]" : "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10";
       case "outline":
         return inverted ? "border border-white/20 bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : color ? OUTLINE[color] : "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10";
       case "ghost":

package/dist/Button.mjs

@@ -116,7 +116,7 @@ const Button = React.forwardRef(({
       case "primary":
         return color ? SOLID[color] : "bg-slate-900 text-white hover:opacity-90 active:scale-[.98] dark:bg-white dark:text-slate-900";
       case "secondary":
-        return inverted ? "border border-white/15 bg-white/10 text-white hover:bg-white/15 active:scale-[.98]" : "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
+        return inverted ? "border border-white/15 bg-white/10 text-white hover:bg-white/15 active:scale-[.98]" : "border border-slate-300/80 bg-white text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10";
       case "outline":
         return inverted ? "border border-white/20 bg-transparent text-white hover:bg-white/10 active:scale-[.98]" : color ? OUTLINE[color] : "border border-slate-300/80 bg-transparent text-slate-700 hover:bg-slate-50 active:scale-[.98] dark:border-white/10 dark:text-slate-200 dark:hover:bg-white/10";
       case "ghost":

package/dist/Card.js

@@ -36,7 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_framer_motion = require("framer-motion");
 var import_animations = require("./animations");
-const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5";
+const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]";
 const Card = import_react.default.forwardRef(
   ({ className, children, ...rest }, ref) => {
     const { onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, ...domRest } = rest;

package/dist/Card.mjs

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { motion } from "framer-motion";
 import { microTransition } from "./animations";
-const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5";
+const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]";
 const Card = React.forwardRef(
   ({ className, children, ...rest }, ref) => {
     const { onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, ...domRest } = rest;

package/dist/ChartCard.js

@@ -27,7 +27,7 @@ function ChartCard({ title, subtitle, right, children, footer, compact, classNam
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: ["relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-white/5", className != null ? className : ""].join(" "),
+      className: ["relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-[var(--fx-surface)]", className != null ? className : ""].join(" "),
       children: [
         (title || subtitle || right) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["flex items-center justify-between gap-3 border-b border-slate-100 px-4", compact ? "py-2" : "py-3", "dark:border-white/10"].join(" "), children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [

package/dist/ChartCard.mjs

@@ -4,7 +4,7 @@ function ChartCard({ title, subtitle, right, children, footer, compact, classNam
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: ["relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-white/5", className != null ? className : ""].join(" "),
+      className: ["relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-[var(--fx-surface)]", className != null ? className : ""].join(" "),
       children: [
         (title || subtitle || right) && /* @__PURE__ */ jsxs("div", { className: ["flex items-center justify-between gap-3 border-b border-slate-100 px-4", compact ? "py-2" : "py-3", "dark:border-white/10"].join(" "), children: [
           /* @__PURE__ */ jsxs("div", { children: [

package/dist/Checkbox.js

@@ -38,7 +38,7 @@ var import_framer_motion = require("framer-motion");
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
-const baseInput = "appearance-none grid place-items-center rounded border border-slate-300 bg-white shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 checked:bg-blue-600 checked:border-blue-600 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:checked:bg-blue-500 dark:checked:border-blue-500";
+const baseInput = "appearance-none grid place-items-center rounded border border-slate-300 bg-white shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 checked:bg-blue-600 checked:border-blue-600 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-[var(--fx-surface)] dark:checked:bg-blue-500 dark:checked:border-blue-500";
 const sizeMap = {
   sm: "h-4 w-4",
   md: "h-5 w-5",

package/dist/Checkbox.mjs

@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
-const baseInput = "appearance-none grid place-items-center rounded border border-slate-300 bg-white shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 checked:bg-blue-600 checked:border-blue-600 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:checked:bg-blue-500 dark:checked:border-blue-500";
+const baseInput = "appearance-none grid place-items-center rounded border border-slate-300 bg-white shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 checked:bg-blue-600 checked:border-blue-600 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-[var(--fx-surface)] dark:checked:bg-blue-500 dark:checked:border-blue-500";
 const sizeMap = {
   sm: "h-4 w-4",
   md: "h-5 w-5",

package/dist/CheckboxPillsGroup.js

@@ -79,10 +79,10 @@ const ACTIVE_GLASS = {
 };
 function activeClasses(accent, variant) {
   if (variant === "soft") return ACTIVE_SOFT[accent];
-  if (variant === "outline") return ACTIVE_OUTLINE[accent] + " bg-white/70 dark:bg-white/5";
+  if (variant === "outline") return ACTIVE_OUTLINE[accent] + " bg-white/70 dark:bg-[var(--fx-surface)]";
   return ACTIVE_GLASS[accent] + " backdrop-blur-[2px]";
 }
-const NEUTRAL = "border-slate-200 bg-white/70 text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
+const NEUTRAL = "border-slate-200 bg-white/70 text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10";
 function CheckboxPillsGroup({
   options,
   value,
@@ -160,7 +160,7 @@ function CheckboxPillsGroup({
               }
             ),
             withIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative mr-2 inline-block h-[22px] w-[22px] flex-none", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-0" : "opacity-100"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "grid place-items-center rounded-full border border-slate-300/80 bg-white/70 text-slate-500 dark:border-white/15 dark:bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "7" }) }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-0" : "opacity-100"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "grid place-items-center rounded-full border border-slate-300/80 bg-white/70 text-slate-500 dark:border-white/15 dark:bg-[var(--fx-surface)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "7" }) }) }) }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-100" : "opacity-0"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "span",
                 {

package/dist/CheckboxPillsGroup.mjs

@@ -46,10 +46,10 @@ const ACTIVE_GLASS = {
 };
 function activeClasses(accent, variant) {
   if (variant === "soft") return ACTIVE_SOFT[accent];
-  if (variant === "outline") return ACTIVE_OUTLINE[accent] + " bg-white/70 dark:bg-white/5";
+  if (variant === "outline") return ACTIVE_OUTLINE[accent] + " bg-white/70 dark:bg-[var(--fx-surface)]";
   return ACTIVE_GLASS[accent] + " backdrop-blur-[2px]";
 }
-const NEUTRAL = "border-slate-200 bg-white/70 text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10";
+const NEUTRAL = "border-slate-200 bg-white/70 text-slate-700 hover:bg-slate-50 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10";
 function CheckboxPillsGroup({
   options,
   value,
@@ -127,7 +127,7 @@ function CheckboxPillsGroup({
               }
             ),
             withIcon && /* @__PURE__ */ jsxs("span", { className: "relative mr-2 inline-block h-[22px] w-[22px] flex-none", children: [
-              /* @__PURE__ */ jsx("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-0" : "opacity-100"), children: /* @__PURE__ */ jsx("span", { className: "grid place-items-center rounded-full border border-slate-300/80 bg-white/70 text-slate-500 dark:border-white/15 dark:bg-white/5", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7" }) }) }) }),
+              /* @__PURE__ */ jsx("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-0" : "opacity-100"), children: /* @__PURE__ */ jsx("span", { className: "grid place-items-center rounded-full border border-slate-300/80 bg-white/70 text-slate-500 dark:border-white/15 dark:bg-[var(--fx-surface)]", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: sz.icon, fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7" }) }) }) }),
               /* @__PURE__ */ jsx("span", { className: cx("absolute inset-0 grid place-items-center transition-opacity duration-150", active ? "opacity-100" : "opacity-0"), children: /* @__PURE__ */ jsx(
                 "span",
                 {

package/dist/ComboSelect.js

@@ -405,7 +405,7 @@ function ComboSelect({
               unstyled: true,
               type: "button",
               title: "Limpiar",
-              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)]",
               onMouseDown: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -433,7 +433,7 @@ function ComboSelect({
               title: open ? "Cerrar" : "Abrir",
               disabled,
               className: cx(
-                disabled ? "pointer-events-none opacity-60" : "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"
+                disabled ? "pointer-events-none opacity-60" : "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)]"
               ),
               onMouseDown: (e) => {
                 e.preventDefault();

package/dist/ComboSelect.mjs

@@ -372,7 +372,7 @@ function ComboSelect({
               unstyled: true,
               type: "button",
               title: "Limpiar",
-              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)]",
               onMouseDown: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -400,7 +400,7 @@ function ComboSelect({
               title: open ? "Cerrar" : "Abrir",
               disabled,
               className: cx(
-                disabled ? "pointer-events-none opacity-60" : "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"
+                disabled ? "pointer-events-none opacity-60" : "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)]"
               ),
               onMouseDown: (e) => {
                 e.preventDefault();

package/dist/DateTimeField.js

@@ -188,12 +188,15 @@ function DateTimeField({
   }, [open]);
   const stylePop = (() => {
     if (!anchorRect) return { visibility: "hidden" };
-    const W = 360, GAP = 8, MARGIN = 8, H = 420;
+    const GAP = 8, MARGIN = 8;
+    const W = Math.min(420, Math.max(320, window.innerWidth - MARGIN * 2));
+    const H = Math.min(520, Math.max(320, Math.floor(window.innerHeight * 0.75)));
     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 parsed = (0, import_react.useMemo)(() => value ? parseValueByType(value, type) : null, [value, type]);
   const [cursor, setCursor] = (0, import_react.useState)(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -256,7 +259,7 @@ function DateTimeField({
       ref: popRef,
       style: { ...stylePop, willChange: "transform, opacity" },
       "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-[var(--fx-surface)]",
+      className: "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,
@@ -393,7 +396,7 @@ function DateTimeField({
           {
             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/DateTimeField.mjs

@@ -155,12 +155,15 @@ function DateTimeField({
   }, [open]);
   const stylePop = (() => {
     if (!anchorRect) return { visibility: "hidden" };
-    const W = 360, GAP = 8, MARGIN = 8, H = 420;
+    const GAP = 8, MARGIN = 8;
+    const W = Math.min(420, Math.max(320, window.innerWidth - MARGIN * 2));
+    const H = Math.min(520, Math.max(320, Math.floor(window.innerHeight * 0.75)));
     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 parsed = useMemo(() => value ? parseValueByType(value, type) : null, [value, type]);
   const [cursor, setCursor] = useState(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -223,7 +226,7 @@ function DateTimeField({
       ref: popRef,
       style: { ...stylePop, willChange: "transform, opacity" },
       "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-[var(--fx-surface)]",
+      className: "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,
@@ -360,7 +363,7 @@ function DateTimeField({
           {
             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/EmptyState.js

@@ -28,7 +28,7 @@ function EmptyState({
   subtitle = "Intenta cambiar el t\xE9rmino de b\xFAsqueda o los filtros."
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto mb-4 h-14 w-14 rounded-2xl bg-slate-100 ring-1 ring-slate-200 dark:bg-white/5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto mb-4 h-14 w-14 rounded-2xl bg-slate-100 ring-1 ring-slate-200 dark:bg-[var(--fx-surface)] dark:ring-white/10" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-medium", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: subtitle })
   ] });

package/dist/EmptyState.mjs

@@ -5,7 +5,7 @@ function EmptyState({
   subtitle = "Intenta cambiar el t\xE9rmino de b\xFAsqueda o los filtros."
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-sm", children: [
-    /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 h-14 w-14 rounded-2xl bg-slate-100 ring-1 ring-slate-200 dark:bg-white/5" }),
+    /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 h-14 w-14 rounded-2xl bg-slate-100 ring-1 ring-slate-200 dark:bg-[var(--fx-surface)] dark:ring-white/10" }),
     /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: title }),
     /* @__PURE__ */ jsx("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: subtitle })
   ] });

package/dist/FiltersMultiSelect.js

@@ -93,12 +93,12 @@ function FiltersMultiSelect({
         className: clsx(
           "relative inline-flex items-center gap-2 min-h-[44px] rounded-2xl border border-slate-200 bg-white px-3 pr-9 text-sm text-slate-900 shadow-sm outline-none transition",
           "hover:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300",
-          "dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:focus:ring-white/10"
+          "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:focus:ring-white/10"
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: triggerLabel }),
-          showActiveCount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-white/10 dark:text-slate-200", children: activeCount }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 dark:border-white/10 dark:bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: clsx("h-4 w-4 transition", open && "rotate-180"), fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" }) }) })
+          showActiveCount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:ring-1 dark:ring-white/10", children: activeCount }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 dark:border-white/10 dark:bg-[var(--fx-surface)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: clsx("h-4 w-4 transition", open && "rotate-180"), fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" }) }) })
         ]
       }
     ),

package/dist/FiltersMultiSelect.mjs

@@ -60,12 +60,12 @@ function FiltersMultiSelect({
         className: clsx(
           "relative inline-flex items-center gap-2 min-h-[44px] rounded-2xl border border-slate-200 bg-white px-3 pr-9 text-sm text-slate-900 shadow-sm outline-none transition",
           "hover:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300",
-          "dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:focus:ring-white/10"
+          "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:focus:ring-white/10"
         ),
         children: [
           /* @__PURE__ */ jsx("span", { children: triggerLabel }),
-          showActiveCount && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-white/10 dark:text-slate-200", children: activeCount }),
-          /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 dark:border-white/10 dark:bg-white/5", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: clsx("h-4 w-4 transition", open && "rotate-180"), fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) })
+          showActiveCount && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:ring-1 dark:ring-white/10", children: activeCount }),
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 dark:border-white/10 dark:bg-[var(--fx-surface)]", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: clsx("h-4 w-4 transition", open && "rotate-180"), fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) })
         ]
       }
     ),

package/dist/Input.js

@@ -40,7 +40,7 @@ var import_Button = __toESM(require("./Button"));
 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 Input = import_react.default.forwardRef(
   ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, unstyled, ...props }, ref) => {
@@ -60,7 +60,7 @@ const Input = import_react.default.forwardRef(
     const readOnly = !onChange;
     const [focused, setFocused] = import_react.default.useState(false);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative content-center", children: [
-      leftSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400", children: leftSlot }),
+      leftSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-400", children: leftSlot }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "input",
         {
@@ -89,14 +89,14 @@ const Input = import_react.default.forwardRef(
           ...props
         }
       ),
-      rightSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot }),
+      rightSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-400", children: rightSlot }),
       showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.default,
         {
           unstyled: true,
           type: "button",
           title: "Limpiar",
-          className: `absolute ${rightSlot ? "right-9" : "right-2.5"} top-1/2 -translate-y-1/2 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: `absolute ${rightSlot ? "right-9" : "right-2.5"} top-1/2 -translate-y-1/2 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();
             onClear == null ? void 0 : onClear();

package/dist/Input.mjs

@@ -7,7 +7,7 @@ import Button from "./Button";
 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 Input = React.forwardRef(
   ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, unstyled, ...props }, ref) => {
@@ -27,7 +27,7 @@ const Input = React.forwardRef(
     const readOnly = !onChange;
     const [focused, setFocused] = React.useState(false);
     return /* @__PURE__ */ jsxs("div", { className: "relative content-center", children: [
-      leftSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400", children: leftSlot }),
+      leftSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-400", children: leftSlot }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -56,14 +56,14 @@ const Input = React.forwardRef(
           ...props
         }
       ),
-      rightSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot }),
+      rightSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-400", children: rightSlot }),
       showClear && /* @__PURE__ */ jsx(
         Button,
         {
           unstyled: true,
           type: "button",
           title: "Limpiar",
-          className: `absolute ${rightSlot ? "right-9" : "right-2.5"} top-1/2 -translate-y-1/2 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: `absolute ${rightSlot ? "right-9" : "right-2.5"} top-1/2 -translate-y-1/2 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();
             onClear == null ? void 0 : onClear();

package/dist/KpiCard.js

@@ -39,7 +39,7 @@ function MotionNumber({ value, format }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
 }
 function KpiCard({ label, value, delta, help }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-white/10 dark:text-white", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-white", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-600 dark:text-white/80", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/KpiCard.mjs

@@ -16,7 +16,7 @@ function MotionNumber({ value, format }) {
   return /* @__PURE__ */ jsx("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
 }
 function KpiCard({ label, value, delta, help }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-white/10 dark:text-white", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-white", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("span", { className: "text-slate-600 dark:text-white/80", children: label }),
       /* @__PURE__ */ jsx(

package/dist/MediaCard.js

@@ -64,7 +64,7 @@ function MediaCard({
       whileHover: { y: -2 },
       transition: import_animations.microTransition,
       className: [
-        "group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-white/5",
+        "group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-[var(--fx-surface)]",
         className != null ? className : ""
       ].join(" "),
       children: [

package/dist/MediaCard.mjs

@@ -31,7 +31,7 @@ function MediaCard({
       whileHover: { y: -2 },
       transition: microTransition,
       className: [
-        "group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-white/5",
+        "group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-[var(--fx-surface)]",
         className != null ? className : ""
       ].join(" "),
       children: [