framepexls-ui-lib 0.2.9 → 0.2.11

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/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, { initial: false, children: open && dropStyle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -295,12 +297,17 @@ function ComboSelect({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+      import_framer_motion.motion.div,
       {
         ref: dropRef,
         role: "listbox",
         id: listId,
-        style: dropStyle,
+        style: { ...dropStyle, willChange: "transform, opacity" },
+        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") {
@@ -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, { initial: false, children: open && dropStyle ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -262,12 +264,17 @@ function ComboSelect({
       }
     ),
     /* @__PURE__ */ jsx(
-      "div",
+      motion.div,
       {
         ref: dropRef,
         role: "listbox",
         id: listId,
-        style: dropStyle,
+        style: { ...dropStyle, willChange: "transform, opacity" },
+        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") {
@@ -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,10 +247,14 @@ 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,
+      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)]",
       children: [

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,10 +214,14 @@ 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,
+      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)]",
       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,37 +265,40 @@ 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, { initial: false, 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,
           left: pos.left,
           maxHeight: pos.maxH,
-          maxWidth: "calc(100vw - 16px)"
+          maxWidth: "calc(100vw - 16px)",
+          willChange: "transform, opacity"
         },
         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-[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,37 +235,40 @@ function Content({
     }
     return out;
   }, [children, isAllowed, defaultHideUnauthorized]);
-  if (!open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
+  return typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, 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,
           left: pos.left,
           maxHeight: pos.maxH,
-          maxWidth: "calc(100vw - 16px)"
+          maxWidth: "calc(100vw - 16px)",
+          willChange: "transform, opacity"
         },
         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-[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/Input.js

@@ -34,6 +34,8 @@ __export(Input_exports, {
 module.exports = __toCommonJS(Input_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");
 var import_Button = __toESM(require("./Button"));
 function cx(...a) {
   return a.filter(Boolean).join(" ");
@@ -56,6 +58,7 @@ const Input = import_react.default.forwardRef(
     }
     const showClear = clearable && !!value && !props.disabled;
     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 }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -65,6 +68,16 @@ const Input = import_react.default.forwardRef(
           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,
@@ -94,6 +107,16 @@ const Input = import_react.default.forwardRef(
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
         }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.span,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
+          initial: { opacity: 0 },
+          animate: { opacity: focused ? 1 : 0 },
+          transition: import_animations.microTransition
+        }
       )
     ] });
   }

package/dist/Input.mjs

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 import Button from "./Button";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
@@ -23,6 +25,7 @@ const Input = React.forwardRef(
     }
     const showClear = clearable && !!value && !props.disabled;
     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 }),
       /* @__PURE__ */ jsx(
@@ -32,6 +35,16 @@ const Input = React.forwardRef(
           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,
@@ -61,6 +74,16 @@ const Input = React.forwardRef(
           },
           children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
         }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
+          initial: { opacity: 0 },
+          animate: { opacity: focused ? 1 : 0 },
+          transition: microTransition
+        }
       )
     ] });
   }