framepexls-ui-lib 0.2.8 → 0.2.10

package/dist/Textarea.js

@@ -34,6 +34,8 @@ __export(Textarea_exports, {
 module.exports = __toCommonJS(Textarea_exports);
 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");
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
@@ -55,23 +57,46 @@ const Textarea = import_react.default.forwardRef(
       );
     }
     const readOnly = !onChange;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "textarea",
-      {
-        ref,
-        value,
-        onChange,
-        readOnly,
-        "aria-invalid": error ? true : void 0,
-        className: cx(
-          baseControl,
-          (error || tone === "danger") && errorControl,
-          className
-        ),
-        rows,
-        ...props
-      }
-    );
+    const [focused, setFocused] = import_react.default.useState(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "textarea",
+        {
+          ref,
+          value,
+          onChange,
+          readOnly,
+          onFocus: (e) => {
+            var _a;
+            setFocused(true);
+            (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+          },
+          onBlur: (e) => {
+            var _a;
+            setFocused(false);
+            (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+          },
+          "aria-invalid": error ? true : void 0,
+          className: cx(
+            baseControl,
+            (error || tone === "danger") && errorControl,
+            className
+          ),
+          rows,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.span,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 rounded-2xl",
+          initial: false,
+          animate: { boxShadow: focused ? "0 0 0 2px rgba(59,130,246,0.18)" : "0 0 0 0 rgba(0,0,0,0)" },
+          transition: import_animations.microTransition
+        }
+      )
+    ] });
   }
 );
 Textarea.displayName = "Textarea";

package/dist/Textarea.mjs

@@ -1,6 +1,8 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
@@ -22,23 +24,46 @@ const Textarea = React.forwardRef(
       );
     }
     const readOnly = !onChange;
-    return /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref,
-        value,
-        onChange,
-        readOnly,
-        "aria-invalid": error ? true : void 0,
-        className: cx(
-          baseControl,
-          (error || tone === "danger") && errorControl,
-          className
-        ),
-        rows,
-        ...props
-      }
-    );
+    const [focused, setFocused] = React.useState(false);
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          value,
+          onChange,
+          readOnly,
+          onFocus: (e) => {
+            var _a;
+            setFocused(true);
+            (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+          },
+          onBlur: (e) => {
+            var _a;
+            setFocused(false);
+            (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+          },
+          "aria-invalid": error ? true : void 0,
+          className: cx(
+            baseControl,
+            (error || tone === "danger") && errorControl,
+            className
+          ),
+          rows,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 rounded-2xl",
+          initial: false,
+          animate: { boxShadow: focused ? "0 0 0 2px rgba(59,130,246,0.18)" : "0 0 0 0 rgba(0,0,0,0)" },
+          transition: microTransition
+        }
+      )
+    ] });
   }
 );
 Textarea.displayName = "Textarea";

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

@@ -37,6 +37,8 @@ module.exports = __toCommonJS(TimePopover_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var 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_Button = __toESM(require("./Button"));
 var import_Input = __toESM(require("./Input"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
@@ -126,8 +128,13 @@ function TimePopover({
     return md === "AM" ? h12 : h12 + 12;
   };
   const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+    import_framer_motion.motion.div,
     {
+      variants: import_animations.popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: import_animations.menuTransition,
       ref: popRef,
       role: "dialog",
       "aria-label": "Selector de hora",
@@ -136,7 +143,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,48 +357,61 @@ 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: [
-    /* @__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,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year, month - 1, 1)),
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year, month + 1, 1)),
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
-      const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
-          onClick: () => onPick(w.from, w.to),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-              "Semana ",
-              idx + 1
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
-          ]
-        },
-        `${w.from.toISOString()}-${w.to.toISOString()}`
-      );
-    }) })
-  ] });
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      ref: popRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      variants: import_animations.popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: import_animations.menuTransition,
+      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,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year, month - 1, 1)),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year, month + 1, 1)),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
+          const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
+              onClick: () => onPick(w.from, w.to),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  "Semana ",
+                  idx + 1
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
+              ]
+            },
+            `${w.from.toISOString()}-${w.to.toISOString()}`
+          );
+        }) })
+      ]
+    }
+  );
   return (0, import_react_dom.createPortal)(body, document.body);
 }
 function sameDay(a, b) {
@@ -456,45 +476,58 @@ 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: [
-    /* @__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,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: year }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
-      const isSel = selYear === year && selMonthIdx === idx;
-      const base = "rounded-xl border px-2 py-2 text-sm ";
-      const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
-      const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: `${base} ${light} ${dark}`,
-          onClick: () => onPick(new Date(year, idx, 1)),
-          children: m
-        },
-        idx
-      );
-    }) })
-  ] });
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      ref: popRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      variants: import_animations.popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: import_animations.menuTransition,
+      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,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: year }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
+          const isSel = selYear === year && selMonthIdx === idx;
+          const base = "rounded-xl border px-2 py-2 text-sm ";
+          const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
+          const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: `${base} ${light} ${dark}`,
+              onClick: () => onPick(new Date(year, idx, 1)),
+              children: m
+            },
+            idx
+          );
+        }) })
+      ]
+    }
+  );
   return (0, import_react_dom.createPortal)(body, document.body);
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/TimePopover.mjs

@@ -2,6 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createPortal } from "react-dom";
+import { motion } from "framer-motion";
+import { popOver, menuTransition } from "./animations";
 import Button from "./Button";
 import Input from "./Input";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
@@ -91,8 +93,13 @@ function TimePopover({
     return md === "AM" ? h12 : h12 + 12;
   };
   const body = /* @__PURE__ */ jsxs(
-    "div",
+    motion.div,
     {
+      variants: popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: menuTransition,
       ref: popRef,
       role: "dialog",
       "aria-label": "Selector de hora",
@@ -101,7 +108,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,48 +322,61 @@ 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: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year, month - 1, 1)),
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year, month + 1, 1)),
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
-      const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
-      return /* @__PURE__ */ jsxs(
-        Button,
-        {
-          unstyled: true,
-          className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
-          onClick: () => onPick(w.from, w.to),
-          children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Semana ",
-              idx + 1
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
-          ]
-        },
-        `${w.from.toISOString()}-${w.to.toISOString()}`
-      );
-    }) })
-  ] });
+  const body = /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: popRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      variants: popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: menuTransition,
+      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,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year, month - 1, 1)),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year, month + 1, 1)),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
+          const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
+          return /* @__PURE__ */ jsxs(
+            Button,
+            {
+              unstyled: true,
+              className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
+              onClick: () => onPick(w.from, w.to),
+              children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Semana ",
+                  idx + 1
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
+              ]
+            },
+            `${w.from.toISOString()}-${w.to.toISOString()}`
+          );
+        }) })
+      ]
+    }
+  );
   return createPortal(body, document.body);
 }
 function sameDay(a, b) {
@@ -421,45 +441,58 @@ 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: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: year }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
-      const isSel = selYear === year && selMonthIdx === idx;
-      const base = "rounded-xl border px-2 py-2 text-sm ";
-      const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
-      const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: `${base} ${light} ${dark}`,
-          onClick: () => onPick(new Date(year, idx, 1)),
-          children: m
-        },
-        idx
-      );
-    }) })
-  ] });
+  const body = /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: popRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      variants: popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: menuTransition,
+      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,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: year }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
+          const isSel = selYear === year && selMonthIdx === idx;
+          const base = "rounded-xl border px-2 py-2 text-sm ";
+          const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
+          const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              className: `${base} ${light} ${dark}`,
+              onClick: () => onPick(new Date(year, idx, 1)),
+              children: m
+            },
+            idx
+          );
+        }) })
+      ]
+    }
+  );
   return createPortal(body, document.body);
 }
 export {