framepexls-ui-lib 0.2.9 → 0.2.10

package/dist/Steps.js

@@ -35,6 +35,8 @@ __export(Steps_exports, {
 module.exports = __toCommonJS(Steps_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 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(" ");
 function Steps({
   steps,
@@ -44,7 +46,8 @@ function Steps({
   clickable = true,
   compact = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const progressPct = steps.length > 1 ? current / (steps.length - 1) * 100 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "nav",
     {
       "aria-label": "Progreso",
@@ -52,44 +55,55 @@ function Steps({
         "w-full rounded-2xl border border-slate-200/80 bg-white/50 p-3 dark:border-white/10 dark:bg-white/[0.04]",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
-        const state = i < current ? "done" : i === current ? "current" : "upcoming";
-        const canClick = clickable && i <= current && !s.disabled && onChange;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_Button.default,
-          {
-            unstyled: true,
-            type: "button",
-            disabled: !canClick,
-            onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
-            className: cx(
-              "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
-              state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
-              state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
-              state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
-            ),
-            "aria-current": state === "current" ? "step" : void 0,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "span",
-                {
-                  className: cx(
-                    "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
-                    state === "current" && "bg-blue-600 text-white ring-black/0",
-                    state === "done" && "bg-emerald-600 text-white ring-black/0",
-                    state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
-                  ),
-                  children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
-                }
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
+          const state = i < current ? "done" : i === current ? "current" : "upcoming";
+          const canClick = clickable && i <= current && !s.disabled && onChange;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_Button.default,
+            {
+              unstyled: true,
+              type: "button",
+              disabled: !canClick,
+              onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
+              className: cx(
+                "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
+                state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
+                state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
+                state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
-                !compact && s.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
-              ] })
-            ]
+              "aria-current": state === "current" ? "step" : void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: cx(
+                      "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
+                      state === "current" && "bg-blue-600 text-white ring-black/0",
+                      state === "done" && "bg-emerald-600 text-white ring-black/0",
+                      state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
+                    ),
+                    children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
+                  !compact && s.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
+                ] })
+              ]
+            }
+          ) }, s.key);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200/70 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.div,
+          {
+            className: "h-full rounded-full bg-blue-600 dark:bg-blue-400",
+            initial: { width: 0 },
+            animate: { width: `${Math.max(0, Math.min(100, progressPct))}%` },
+            transition: import_animations.springSm
           }
-        ) }, s.key);
-      }) })
+        ) })
+      ]
     }
   );
 }

package/dist/Steps.mjs

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Button from "./Button";
+import { motion } from "framer-motion";
+import { springSm } from "./animations";
 const cx = (...a) => a.filter(Boolean).join(" ");
 function Steps({
   steps,
@@ -10,7 +12,8 @@ function Steps({
   clickable = true,
   compact = false
 }) {
-  return /* @__PURE__ */ jsx(
+  const progressPct = steps.length > 1 ? current / (steps.length - 1) * 100 : 0;
+  return /* @__PURE__ */ jsxs(
     "nav",
     {
       "aria-label": "Progreso",
@@ -18,44 +21,55 @@ function Steps({
         "w-full rounded-2xl border border-slate-200/80 bg-white/50 p-3 dark:border-white/10 dark:bg-white/[0.04]",
         className
       ),
-      children: /* @__PURE__ */ jsx("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
-        const state = i < current ? "done" : i === current ? "current" : "upcoming";
-        const canClick = clickable && i <= current && !s.disabled && onChange;
-        return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            unstyled: true,
-            type: "button",
-            disabled: !canClick,
-            onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
-            className: cx(
-              "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
-              state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
-              state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
-              state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
-            ),
-            "aria-current": state === "current" ? "step" : void 0,
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cx(
-                    "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
-                    state === "current" && "bg-blue-600 text-white ring-black/0",
-                    state === "done" && "bg-emerald-600 text-white ring-black/0",
-                    state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
-                  ),
-                  children: state === "done" ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
-                }
+      children: [
+        /* @__PURE__ */ jsx("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
+          const state = i < current ? "done" : i === current ? "current" : "upcoming";
+          const canClick = clickable && i <= current && !s.disabled && onChange;
+          return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              unstyled: true,
+              type: "button",
+              disabled: !canClick,
+              onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
+              className: cx(
+                "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
+                state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
+                state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
+                state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
               ),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
-                !compact && s.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
-              ] })
-            ]
+              "aria-current": state === "current" ? "step" : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx(
+                      "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
+                      state === "current" && "bg-blue-600 text-white ring-black/0",
+                      state === "done" && "bg-emerald-600 text-white ring-black/0",
+                      state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
+                    ),
+                    children: state === "done" ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
+                  !compact && s.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
+                ] })
+              ]
+            }
+          ) }, s.key);
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200/70 dark:bg-white/10", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "h-full rounded-full bg-blue-600 dark:bg-blue-400",
+            initial: { width: 0 },
+            animate: { width: `${Math.max(0, Math.min(100, progressPct))}%` },
+            transition: springSm
           }
-        ) }, s.key);
-      }) })
+        ) })
+      ]
     }
   );
 }

package/dist/StorageUsage.js

@@ -33,6 +33,8 @@ __export(StorageUsage_exports, {
 });
 module.exports = __toCommonJS(StorageUsage_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 var import_Badge = __toESM(require("./Badge"));
 var import_InfoGrid = __toESM(require("./InfoGrid"));
 function cx(...a) {
@@ -75,13 +77,15 @@ function StorageUsage({
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+      import_framer_motion.motion.div,
       {
         className: cx(
           "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
           barClassName
         ),
-        style: { width: `${pct}%` }
+        initial: { width: 0 },
+        animate: { width: `${pct}%` },
+        transition: import_animations.springSm
       }
     ) }),
     showGrid && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/StorageUsage.mjs

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { springSm } from "./animations";
 import Badge from "./Badge";
 import InfoGrid from "./InfoGrid";
 function cx(...a) {
@@ -42,13 +44,15 @@ function StorageUsage({
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(
-      "div",
+      motion.div,
       {
         className: cx(
           "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
           barClassName
         ),
-        style: { width: `${pct}%` }
+        initial: { width: 0 },
+        animate: { width: `${pct}%` },
+        transition: springSm
       }
     ) }),
     showGrid && /* @__PURE__ */ jsx(

package/dist/Table.d.mts

@@ -27,5 +27,9 @@ declare function Td({ children, className, align, colSpan, }: {
     align?: "left" | "center" | "right";
     colSpan?: number;
 }): react_jsx_runtime.JSX.Element;
+declare function AnimatedBody({ children, className }: {
+    children: React__default.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { SortTh, Td, Th };
+export { AnimatedBody, SortTh, Td, Th };

package/dist/Table.d.ts

@@ -27,5 +27,9 @@ declare function Td({ children, className, align, colSpan, }: {
     align?: "left" | "center" | "right";
     colSpan?: number;
 }): react_jsx_runtime.JSX.Element;
+declare function AnimatedBody({ children, className }: {
+    children: React__default.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { SortTh, Td, Th };
+export { AnimatedBody, SortTh, Td, Th };

package/dist/Table.js

@@ -29,6 +29,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Table_exports = {};
 __export(Table_exports, {
+  AnimatedBody: () => AnimatedBody,
   SortTh: () => SortTh,
   Td: () => Td,
   Th: () => Th
@@ -36,6 +37,8 @@ __export(Table_exports, {
 module.exports = __toCommonJS(Table_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 useMounted() {
   const [mounted, setMounted] = import_react.default.useState(false);
@@ -97,19 +100,31 @@ function SortTh({
             unstyled: true,
             type: "button",
             onClick,
-            className: "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/10",
+            className: "group relative inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/10",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative", children: [
+                children,
+                active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_framer_motion.motion.span,
+                  {
+                    layoutId: "sort-underline",
+                    className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70",
+                    transition: import_animations.microTransition
+                  }
+                )
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "svg",
+                import_framer_motion.motion.svg,
                 {
                   suppressHydrationWarning: true,
                   viewBox: "0 0 24 24",
-                  className: `h-4 w-4 transition ${active ? "opacity-80" : "opacity-30"} ${asc ? "" : "rotate-180"}`,
+                  className: `h-4 w-4 ${active ? "" : "opacity-30"}`,
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "2",
                   "aria-hidden": "true",
+                  animate: { rotate: asc ? 0 : 180, opacity: active ? 0.8 : 0.3 },
+                  transition: import_animations.microTransition,
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 14l5-5 5 5" })
                 }
               )
@@ -147,8 +162,20 @@ function Td({
     }
   );
 }
+function AnimatedBody({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.tbody,
+    {
+      className,
+      initial: false,
+      transition: import_animations.microTransition,
+      children
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimatedBody,
   SortTh,
   Td,
   Th

package/dist/Table.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 useMounted() {
   const [mounted, setMounted] = React.useState(false);
@@ -62,19 +64,31 @@ function SortTh({
             unstyled: true,
             type: "button",
             onClick,
-            className: "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/10",
+            className: "group relative inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/10",
             children: [
-              /* @__PURE__ */ jsx("span", { children }),
+              /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                children,
+                active && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    layoutId: "sort-underline",
+                    className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70",
+                    transition: microTransition
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsx(
-                "svg",
+                motion.svg,
                 {
                   suppressHydrationWarning: true,
                   viewBox: "0 0 24 24",
-                  className: `h-4 w-4 transition ${active ? "opacity-80" : "opacity-30"} ${asc ? "" : "rotate-180"}`,
+                  className: `h-4 w-4 ${active ? "" : "opacity-30"}`,
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "2",
                   "aria-hidden": "true",
+                  animate: { rotate: asc ? 0 : 180, opacity: active ? 0.8 : 0.3 },
+                  transition: microTransition,
                   children: /* @__PURE__ */ jsx("path", { d: "M7 14l5-5 5 5" })
                 }
               )
@@ -112,7 +126,19 @@ function Td({
     }
   );
 }
+function AnimatedBody({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    motion.tbody,
+    {
+      className,
+      initial: false,
+      transition: microTransition,
+      children
+    }
+  );
+}
 export {
+  AnimatedBody,
   SortTh,
   Td,
   Th

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";