framepexls-ui-lib 0.2.8 → 0.2.10

package/dist/Checkbox.js

@@ -34,10 +34,11 @@ __export(Checkbox_exports, {
 module.exports = __toCommonJS(Checkbox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
-const baseInput = "rounded border border-slate-300 text-blue-600 shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10";
+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 sizeMap = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
@@ -59,6 +60,11 @@ const Checkbox = import_react.default.forwardRef(
   }, ref) => {
     const internalId = (0, import_react.useId)();
     const inputRef = (0, import_react.useRef)(null);
+    const [animChecked, setAnimChecked] = import_react.default.useState(() => {
+      var _a, _b;
+      const p = props;
+      return Boolean((_b = (_a = p.checked) != null ? _a : p.defaultChecked) != null ? _b : false);
+    });
     (0, import_react.useEffect)(() => {
       if (!ref) return;
       if (typeof ref === "function") ref(inputRef.current);
@@ -67,28 +73,55 @@ const Checkbox = import_react.default.forwardRef(
     (0, import_react.useEffect)(() => {
       if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
     }, [indeterminate]);
+    (0, import_react.useEffect)(() => {
+      var _a;
+      setAnimChecked(Boolean((_a = inputRef.current) == null ? void 0 : _a.checked));
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (Object.prototype.hasOwnProperty.call(props, "checked")) {
+        setAnimChecked(Boolean(props.checked));
+      }
+    }, [props.checked]);
     if (unstyled) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: inputRef, id, type: "checkbox", ...props });
     }
     const descId = description ? `${id != null ? id : internalId}-desc` : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: cx("inline-flex select-none items-start gap-2", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
-        {
-          ref: inputRef,
-          id: id != null ? id : internalId,
-          type: "checkbox",
-          "aria-invalid": error ? true : void 0,
-          "aria-describedby": descId,
-          className: cx(
-            baseInput,
-            sizeMap[size],
-            (error || tone === "danger") && "border-blue-400 focus:ring-blue-500/30",
-            inputClassName
-          ),
-          ...props
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-grid place-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            id: id != null ? id : internalId,
+            type: "checkbox",
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": descId,
+            className: cx(
+              baseInput,
+              sizeMap[size],
+              (error || tone === "danger") && "border-blue-400 focus:ring-blue-500/30",
+              inputClassName
+            ),
+            onChange: (e) => {
+              var _a;
+              setAnimChecked(e.currentTarget.checked || !!indeterminate);
+              (_a = props.onChange) == null ? void 0 : _a.call(props, e);
+            },
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.svg,
+          {
+            viewBox: "0 0 24 24",
+            className: cx("pointer-events-none absolute", size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5"),
+            initial: { pathLength: 0, opacity: 0 },
+            animate: { pathLength: animChecked || !!indeterminate ? 1 : 0, opacity: animChecked || !!indeterminate ? 1 : 0 },
+            transition: { duration: 0.18, ease: "easeOut" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.path, { d: "M5 12l4 4L19 7", stroke: "white", strokeWidth: 2.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        )
+      ] }),
       (label || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "leading-tight", children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: label }),
         description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: descId, className: "text-[12px] text-slate-500 dark:text-slate-400", children: description })

package/dist/Checkbox.mjs

@@ -1,10 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useId, useRef } from "react";
+import { motion } from "framer-motion";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
-const baseInput = "rounded border border-slate-300 text-blue-600 shadow-sm outline-none focus:ring-4 focus:ring-blue-300/40 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10";
+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 sizeMap = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
@@ -26,6 +27,11 @@ const Checkbox = React.forwardRef(
   }, ref) => {
     const internalId = useId();
     const inputRef = useRef(null);
+    const [animChecked, setAnimChecked] = React.useState(() => {
+      var _a, _b;
+      const p = props;
+      return Boolean((_b = (_a = p.checked) != null ? _a : p.defaultChecked) != null ? _b : false);
+    });
     useEffect(() => {
       if (!ref) return;
       if (typeof ref === "function") ref(inputRef.current);
@@ -34,28 +40,55 @@ const Checkbox = React.forwardRef(
     useEffect(() => {
       if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
     }, [indeterminate]);
+    useEffect(() => {
+      var _a;
+      setAnimChecked(Boolean((_a = inputRef.current) == null ? void 0 : _a.checked));
+    }, []);
+    useEffect(() => {
+      if (Object.prototype.hasOwnProperty.call(props, "checked")) {
+        setAnimChecked(Boolean(props.checked));
+      }
+    }, [props.checked]);
     if (unstyled) {
       return /* @__PURE__ */ jsx("input", { ref: inputRef, id, type: "checkbox", ...props });
     }
     const descId = description ? `${id != null ? id : internalId}-desc` : void 0;
     return /* @__PURE__ */ jsxs("label", { className: cx("inline-flex select-none items-start gap-2", className), children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          id: id != null ? id : internalId,
-          type: "checkbox",
-          "aria-invalid": error ? true : void 0,
-          "aria-describedby": descId,
-          className: cx(
-            baseInput,
-            sizeMap[size],
-            (error || tone === "danger") && "border-blue-400 focus:ring-blue-500/30",
-            inputClassName
-          ),
-          ...props
-        }
-      ),
+      /* @__PURE__ */ jsxs("span", { className: "relative inline-grid place-items-center", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: id != null ? id : internalId,
+            type: "checkbox",
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": descId,
+            className: cx(
+              baseInput,
+              sizeMap[size],
+              (error || tone === "danger") && "border-blue-400 focus:ring-blue-500/30",
+              inputClassName
+            ),
+            onChange: (e) => {
+              var _a;
+              setAnimChecked(e.currentTarget.checked || !!indeterminate);
+              (_a = props.onChange) == null ? void 0 : _a.call(props, e);
+            },
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.svg,
+          {
+            viewBox: "0 0 24 24",
+            className: cx("pointer-events-none absolute", size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5"),
+            initial: { pathLength: 0, opacity: 0 },
+            animate: { pathLength: animChecked || !!indeterminate ? 1 : 0, opacity: animChecked || !!indeterminate ? 1 : 0 },
+            transition: { duration: 0.18, ease: "easeOut" },
+            children: /* @__PURE__ */ jsx(motion.path, { d: "M5 12l4 4L19 7", stroke: "white", strokeWidth: 2.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        )
+      ] }),
       (label || description) && /* @__PURE__ */ jsxs("span", { className: "leading-tight", children: [
         label && /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: label }),
         description && /* @__PURE__ */ jsx("div", { id: descId, className: "text-[12px] text-slate-500 dark:text-slate-400", children: description })

package/dist/ColorPicker.js

@@ -37,6 +37,8 @@ var import_react = __toESM(require("react"));
 var import_Input = __toESM(require("./Input"));
 var import_Button = __toESM(require("./Button"));
 var import_Dialog = __toESM(require("./Dialog"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 function clamp(v, min = 0, max = 255) {
   return Math.max(min, Math.min(max, v));
 }
@@ -127,13 +129,16 @@ function ColorPicker({ value, onChange, presets = DEFAULTS, className, label })
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
+      import_framer_motion.motion.button,
       {
         type: "button",
         onClick: () => setOpen(true),
         title: hex,
-        className: "h-9 w-9 rounded-xl border border-slate-300 shadow-sm outline-none ring-0 transition hover:scale-105 active:scale-95 dark:border-white/10",
-        style: { backgroundColor: hex }
+        className: "h-9 w-9 rounded-xl border border-slate-300 shadow-sm outline-none ring-0 transition dark:border-white/10",
+        style: { backgroundColor: hex },
+        whileHover: { scale: 1.05 },
+        whileTap: { scale: 0.96 },
+        transition: import_animations.microTransition
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, { open, onClose: () => setOpen(false), size: "md", children: [
@@ -146,7 +151,7 @@ function ColorPicker({ value, onChange, presets = DEFAULTS, className, label })
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { placeholder: "r, g, b", value: rgb, onChange: (e) => setRgb(e.target.value), onBlur: () => commitRgb(rgb) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 grid grid-cols-9 gap-1", children: presets.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", title: c, className: "h-7 w-7 rounded-lg border border-slate-300 shadow-sm transition hover:scale-105 active:scale-95 dark:border-white/10", style: { backgroundColor: c }, onClick: () => setHex(c) }, c)) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 grid grid-cols-9 gap-1", children: presets.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.button, { type: "button", title: c, className: "h-7 w-7 rounded-lg border border-slate-300 shadow-sm dark:border-white/10", style: { backgroundColor: c }, onClick: () => setHex(c), whileHover: { scale: 1.07 }, whileTap: { scale: 0.96 }, transition: import_animations.microTransition }, c)) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default.Footer, { align: "end", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", onClick: () => setOpen(false), children: "Cancelar" }),

package/dist/ColorPicker.mjs

@@ -4,6 +4,8 @@ import React from "react";
 import Input from "./Input";
 import Button from "./Button";
 import Dialog from "./Dialog";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 function clamp(v, min = 0, max = 255) {
   return Math.max(min, Math.min(max, v));
 }
@@ -94,13 +96,16 @@ function ColorPicker({ value, onChange, presets = DEFAULTS, className, label })
   };
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsx(
-      "button",
+      motion.button,
       {
         type: "button",
         onClick: () => setOpen(true),
         title: hex,
-        className: "h-9 w-9 rounded-xl border border-slate-300 shadow-sm outline-none ring-0 transition hover:scale-105 active:scale-95 dark:border-white/10",
-        style: { backgroundColor: hex }
+        className: "h-9 w-9 rounded-xl border border-slate-300 shadow-sm outline-none ring-0 transition dark:border-white/10",
+        style: { backgroundColor: hex },
+        whileHover: { scale: 1.05 },
+        whileTap: { scale: 0.96 },
+        transition: microTransition
       }
     ),
     /* @__PURE__ */ jsxs(Dialog, { open, onClose: () => setOpen(false), size: "md", children: [
@@ -113,7 +118,7 @@ function ColorPicker({ value, onChange, presets = DEFAULTS, className, label })
             /* @__PURE__ */ jsx(Input, { placeholder: "r, g, b", value: rgb, onChange: (e) => setRgb(e.target.value), onBlur: () => commitRgb(rgb) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-9 gap-1", children: presets.map((c) => /* @__PURE__ */ jsx("button", { type: "button", title: c, className: "h-7 w-7 rounded-lg border border-slate-300 shadow-sm transition hover:scale-105 active:scale-95 dark:border-white/10", style: { backgroundColor: c }, onClick: () => setHex(c) }, c)) })
+        /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-9 gap-1", children: presets.map((c) => /* @__PURE__ */ jsx(motion.button, { type: "button", title: c, className: "h-7 w-7 rounded-lg border border-slate-300 shadow-sm dark:border-white/10", style: { backgroundColor: c }, onClick: () => setHex(c), whileHover: { scale: 1.07 }, whileTap: { scale: 0.96 }, transition: microTransition }, c)) })
       ] }),
       /* @__PURE__ */ jsxs(Dialog.Footer, { align: "end", children: [
         /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setOpen(false), children: "Cancelar" }),

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

@@ -38,6 +38,8 @@ var import_react_dom = require("react-dom");
 var import_AvatarSquare = __toESM(require("./AvatarSquare"));
 var import_Input = __toESM(require("./Input"));
 var import_Button = __toESM(require("./Button"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 const cx = (...a) => a.filter(Boolean).join(" ");
 const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-4 focus-within:ring-slate-900/5 focus-within: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-within:ring-white/10";
 const isFocusableOrInteractive = (el) => {
@@ -278,7 +280,7 @@ function ComboSelect({
       ]
     }
   );
-  const dropdown = open && dropStyle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  const dropdown = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && dropStyle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -295,13 +297,18 @@ function ComboSelect({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+      import_framer_motion.motion.div,
       {
         ref: dropRef,
         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]",
+        variants: import_animations.popOver,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: import_animations.menuTransition,
+        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;
@@ -348,7 +355,7 @@ function ComboSelect({
         }) })
       }
     )
-  ] }) : null;
+  ] }) : null });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {

package/dist/ComboSelect.mjs

@@ -5,6 +5,8 @@ import { createPortal } from "react-dom";
 import AvatarSquare from "./AvatarSquare";
 import Input from "./Input";
 import Button from "./Button";
+import { AnimatePresence, motion } from "framer-motion";
+import { popOver, menuTransition } from "./animations";
 const cx = (...a) => a.filter(Boolean).join(" ");
 const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-4 focus-within:ring-slate-900/5 focus-within: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-within:ring-white/10";
 const isFocusableOrInteractive = (el) => {
@@ -245,7 +247,7 @@ function ComboSelect({
       ]
     }
   );
-  const dropdown = open && dropStyle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const dropdown = /* @__PURE__ */ jsx(AnimatePresence, { children: open && dropStyle ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -262,13 +264,18 @@ function ComboSelect({
       }
     ),
     /* @__PURE__ */ jsx(
-      "div",
+      motion.div,
       {
         ref: dropRef,
         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]",
+        variants: popOver,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: menuTransition,
+        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;
@@ -315,7 +322,7 @@ function ComboSelect({
         }) })
       }
     )
-  ] }) : null;
+  ] }) : null });
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/DateTimeField.js

@@ -39,6 +39,8 @@ var import_Input = __toESM(require("./Input"));
 var import_Button = __toESM(require("./Button"));
 var import_CalendarPanel = __toESM(require("./CalendarPanel"));
 var import_TimePopover = __toESM(require("./TimePopover"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 const DATE_ONLY_REGEX = /^\d{4}-\d{2}-\d{2}$/;
 const fmtISODate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
@@ -245,12 +247,16 @@ function DateTimeField({
   const timeBtnRef = (0, import_react.useRef)(null);
   const [showTimePop, setShowTimePop] = (0, import_react.useState)(false);
   const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+    import_framer_motion.motion.div,
     {
+      variants: import_animations.popOver,
+      initial: "initial",
+      animate: "animate",
+      transition: import_animations.menuTransition,
       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

@@ -6,6 +6,8 @@ import Input from "./Input";
 import Button from "./Button";
 import CalendarPanel from "./CalendarPanel";
 import TimePopover from "./TimePopover";
+import { motion } from "framer-motion";
+import { popOver, menuTransition } from "./animations";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 const DATE_ONLY_REGEX = /^\d{4}-\d{2}-\d{2}$/;
 const fmtISODate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
@@ -212,12 +214,16 @@ function DateTimeField({
   const timeBtnRef = useRef(null);
   const [showTimePop, setShowTimePop] = useState(false);
   const popover = /* @__PURE__ */ jsxs(
-    "div",
+    motion.div,
     {
+      variants: popOver,
+      initial: "initial",
+      animate: "animate",
+      transition: menuTransition,
       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

@@ -41,6 +41,8 @@ module.exports = __toCommonJS(Dropdown_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 var import_iconos = require("./iconos/index");
 var import_Button = __toESM(require("./Button"));
 const DropdownCtx = (0, import_react.createContext)(null);
@@ -263,16 +265,20 @@ function Content({
     }
     return out;
   }, [children, isAllowed, defaultHideUnauthorized]);
-  if (!open) return null;
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+  return typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
       {
         role: "menu",
         id: menuId,
         "aria-labelledby": labelId,
         ref: menuRef,
         onKeyDown,
+        variants: import_animations.popOver,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: import_animations.menuTransition,
         style: {
           position: "fixed",
           top: pos.top,
@@ -282,18 +288,16 @@ function Content({
         },
         className: [
           "z-[9999] overflow-auto rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xl",
-          "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",
+        "data-open": open ? "true" : "false",
         children: normalizedChildren
       }
-    ),
+    ) : null }),
     document.body
-  );
+  ) : null;
 }
 function Label({ children }) {
   const { labelId } = useDropdown();

package/dist/Dropdown.mjs

@@ -11,6 +11,8 @@ import React, {
   useState
 } from "react";
 import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import { popOver, menuTransition } from "./animations";
 import { MenuPuntosVerticalIcon } from "./iconos/index";
 import Button from "./Button";
 const DropdownCtx = createContext(null);
@@ -233,16 +235,20 @@ function Content({
     }
     return out;
   }, [children, isAllowed, defaultHideUnauthorized]);
-  if (!open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
+  return typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
+      motion.div,
       {
         role: "menu",
         id: menuId,
         "aria-labelledby": labelId,
         ref: menuRef,
         onKeyDown,
+        variants: popOver,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: menuTransition,
         style: {
           position: "fixed",
           top: pos.top,
@@ -252,18 +258,16 @@ function Content({
         },
         className: [
           "z-[9999] overflow-auto rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xl",
-          "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",
+        "data-open": open ? "true" : "false",
         children: normalizedChildren
       }
-    ),
+    ) : null }),
     document.body
-  );
+  ) : null;
 }
 function Label({ children }) {
   const { labelId } = useDropdown();