framepexls-ui-lib 0.2.8 → 0.2.10

package/dist/AppTopbar.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(AppTopbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Button = __toESM(require("./Button"));
 function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-[var(--fx-surface)] backdrop-blur-xl dark:bg-[var(--fx-surface)]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })

package/dist/AppTopbar.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Button from "./Button";
 function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
-  return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
+  return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-[var(--fx-surface)] backdrop-blur-xl dark:bg-[var(--fx-surface)]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })

package/dist/AvatarGroup.js

@@ -34,6 +34,8 @@ __export(AvatarGroup_exports, {
 module.exports = __toCommonJS(AvatarGroup_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_AvatarSquare = __toESM(require("./AvatarSquare"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 function AvatarGroup({
   sources,
   images,
@@ -57,10 +59,10 @@ function AvatarGroup({
       children: [
         visible.map((src, i) => {
           var _a2;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: i > 0 && overlap ? "-ml-2" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { src: src != null ? src : void 0, size, radiusClass, alt: (_a2 = labels == null ? void 0 : labels[i]) != null ? _a2 : "", initials: computeInitials(labels == null ? void 0 : labels[i]) }) }, `${src}-${i}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { className: i > 0 && overlap ? "-ml-2" : void 0, layout: true, initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, transition: import_animations.microTransition, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { src: src != null ? src : void 0, size, radiusClass, alt: (_a2 = labels == null ? void 0 : labels[i]) != null ? _a2 : "", initials: computeInitials(labels == null ? void 0 : labels[i]) }) }, `${src}-${i}`);
         }),
         showCounter && rest > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
+          import_framer_motion.motion.div,
           {
             className: [
               overlap && visible.length > 0 ? "-ml-2" : "",
@@ -71,6 +73,9 @@ function AvatarGroup({
             style: { width: size, height: size },
             "aria-label": `+${rest}`,
             title: `+${rest}`,
+            initial: { opacity: 0, scale: 0.9 },
+            animate: { opacity: 1, scale: 1 },
+            transition: import_animations.microTransition,
             children: [
               "+",
               rest

package/dist/AvatarGroup.mjs

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import AvatarSquare from "./AvatarSquare";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 function AvatarGroup({
   sources,
   images,
@@ -24,10 +26,10 @@ function AvatarGroup({
       children: [
         visible.map((src, i) => {
           var _a2;
-          return /* @__PURE__ */ jsx("div", { className: i > 0 && overlap ? "-ml-2" : void 0, children: /* @__PURE__ */ jsx(AvatarSquare, { src: src != null ? src : void 0, size, radiusClass, alt: (_a2 = labels == null ? void 0 : labels[i]) != null ? _a2 : "", initials: computeInitials(labels == null ? void 0 : labels[i]) }) }, `${src}-${i}`);
+          return /* @__PURE__ */ jsx(motion.div, { className: i > 0 && overlap ? "-ml-2" : void 0, layout: true, initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, transition: microTransition, children: /* @__PURE__ */ jsx(AvatarSquare, { src: src != null ? src : void 0, size, radiusClass, alt: (_a2 = labels == null ? void 0 : labels[i]) != null ? _a2 : "", initials: computeInitials(labels == null ? void 0 : labels[i]) }) }, `${src}-${i}`);
         }),
         showCounter && rest > 0 && /* @__PURE__ */ jsxs(
-          "div",
+          motion.div,
           {
             className: [
               overlap && visible.length > 0 ? "-ml-2" : "",
@@ -38,6 +40,9 @@ function AvatarGroup({
             style: { width: size, height: size },
             "aria-label": `+${rest}`,
             title: `+${rest}`,
+            initial: { opacity: 0, scale: 0.9 },
+            animate: { opacity: 1, scale: 1 },
+            transition: microTransition,
             children: [
               "+",
               rest

package/dist/Badge.js

@@ -23,6 +23,8 @@ __export(Badge_exports, {
 });
 module.exports = __toCommonJS(Badge_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 const tones = {
   emerald: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
   indigo: "bg-indigo-100 text-indigo-700 ring-1 ring-indigo-200",
@@ -56,7 +58,7 @@ function Badge({
   const sz = (_a = sizeClasses[size]) != null ? _a : sizeClasses.md;
   const chosenTone = color != null ? color : tone;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "span",
+    import_framer_motion.motion.span,
     {
       title,
       onClick,
@@ -68,6 +70,9 @@ function Badge({
         clickable ? "cursor-pointer hover:opacity-90 active:scale-[0.98]" : "",
         className
       ].join(" "),
+      initial: { opacity: 0, scale: 0.96 },
+      animate: { opacity: 1, scale: 1 },
+      transition: import_animations.microTransition,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: ["inline-block rounded-full bg-current opacity-70", sz.dot].join(" ") }),
         children

package/dist/Badge.mjs

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 const tones = {
   emerald: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
   indigo: "bg-indigo-100 text-indigo-700 ring-1 ring-indigo-200",
@@ -33,7 +35,7 @@ function Badge({
   const sz = (_a = sizeClasses[size]) != null ? _a : sizeClasses.md;
   const chosenTone = color != null ? color : tone;
   return /* @__PURE__ */ jsxs(
-    "span",
+    motion.span,
     {
       title,
       onClick,
@@ -45,6 +47,9 @@ function Badge({
         clickable ? "cursor-pointer hover:opacity-90 active:scale-[0.98]" : "",
         className
       ].join(" "),
+      initial: { opacity: 0, scale: 0.96 },
+      animate: { opacity: 1, scale: 1 },
+      transition: microTransition,
       children: [
         /* @__PURE__ */ jsx("span", { className: ["inline-block rounded-full bg-current opacity-70", sz.dot].join(" ") }),
         children

package/dist/BadgeCluster.js

@@ -89,7 +89,7 @@ function BadgeCluster({
       transition: { duration: 0.16, ease: "easeOut" },
       className: [
         "z-[9999] w-64 max-w-[80vw] rounded-xl border border-slate-200 bg-white p-2 shadow-lg ring-1 ring-black/5",
-        "dark:border-white/10 dark:bg-[#0b0a0a]",
+        "dark:border-white/10 dark:bg-[var(--fx-surface)]",
         usePortal ? "fixed" : "absolute",
         align === "right" ? "right-0" : "left-0"
       ].join(" "),

package/dist/BadgeCluster.mjs

@@ -56,7 +56,7 @@ function BadgeCluster({
       transition: { duration: 0.16, ease: "easeOut" },
       className: [
         "z-[9999] w-64 max-w-[80vw] rounded-xl border border-slate-200 bg-white p-2 shadow-lg ring-1 ring-black/5",
-        "dark:border-white/10 dark:bg-[#0b0a0a]",
+        "dark:border-white/10 dark:bg-[var(--fx-surface)]",
         usePortal ? "fixed" : "absolute",
         align === "right" ? "right-0" : "left-0"
       ].join(" "),

package/dist/Breadcrumb.js

@@ -34,9 +34,53 @@ __export(Breadcrumb_exports, {
 module.exports = __toCommonJS(Breadcrumb_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 Breadcrumb({ items }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "mb-4 flex items-center text-sm text-slate-500 dark:text-slate-400", "aria-label": "Breadcrumb", children: items.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
-    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 20 20", className: "mx-2 h-4 w-4 opacity-50", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 4l6 6-6 6" }) }),
-    it.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "hover:text-slate-700", href: it.href, children: it.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-slate-900 dark:text-slate-100", children: it.label })
+    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.svg,
+      {
+        viewBox: "0 0 20 20",
+        className: "mx-2 h-4 w-4 opacity-50",
+        fill: "currentColor",
+        initial: { opacity: 0, x: -4 },
+        animate: { opacity: 0.5, x: 0 },
+        transition: import_animations.microTransition,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 4l6 6-6 6" })
+      }
+    ),
+    it.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_framer_motion.motion.a,
+      {
+        className: "relative hover:text-slate-700",
+        href: it.href,
+        initial: { opacity: 0, y: 4 },
+        animate: { opacity: 1, y: 0 },
+        transition: import_animations.microTransition,
+        children: [
+          it.label,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_framer_motion.motion.span,
+            {
+              className: "absolute left-0 right-0 -bottom-0.5 h-[2px] origin-left rounded-full opacity-0",
+              style: { backgroundColor: "currentColor" },
+              whileHover: { opacity: 1, scaleX: 1 },
+              initial: { scaleX: 0 },
+              transition: import_animations.microTransition
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.span,
+      {
+        className: "font-medium text-slate-900 dark:text-slate-100",
+        initial: { opacity: 0, y: 4 },
+        animate: { opacity: 1, y: 0 },
+        transition: import_animations.microTransition,
+        children: it.label
+      }
+    )
   ] }, i)) });
 }

package/dist/Breadcrumb.mjs

@@ -1,10 +1,54 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 function Breadcrumb({ items }) {
   return /* @__PURE__ */ jsx("nav", { className: "mb-4 flex items-center text-sm text-slate-500 dark:text-slate-400", "aria-label": "Breadcrumb", children: items.map((it, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    i > 0 && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "mx-2 h-4 w-4 opacity-50", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M7 4l6 6-6 6" }) }),
-    it.href ? /* @__PURE__ */ jsx("a", { className: "hover:text-slate-700", href: it.href, children: it.label }) : /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-900 dark:text-slate-100", children: it.label })
+    i > 0 && /* @__PURE__ */ jsx(
+      motion.svg,
+      {
+        viewBox: "0 0 20 20",
+        className: "mx-2 h-4 w-4 opacity-50",
+        fill: "currentColor",
+        initial: { opacity: 0, x: -4 },
+        animate: { opacity: 0.5, x: 0 },
+        transition: microTransition,
+        children: /* @__PURE__ */ jsx("path", { d: "M7 4l6 6-6 6" })
+      }
+    ),
+    it.href ? /* @__PURE__ */ jsxs(
+      motion.a,
+      {
+        className: "relative hover:text-slate-700",
+        href: it.href,
+        initial: { opacity: 0, y: 4 },
+        animate: { opacity: 1, y: 0 },
+        transition: microTransition,
+        children: [
+          it.label,
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: "absolute left-0 right-0 -bottom-0.5 h-[2px] origin-left rounded-full opacity-0",
+              style: { backgroundColor: "currentColor" },
+              whileHover: { opacity: 1, scaleX: 1 },
+              initial: { scaleX: 0 },
+              transition: microTransition
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        className: "font-medium text-slate-900 dark:text-slate-100",
+        initial: { opacity: 0, y: 4 },
+        animate: { opacity: 1, y: 0 },
+        transition: microTransition,
+        children: it.label
+      }
+    )
   ] }, i)) });
 }
 export {

package/dist/Button.js

@@ -34,6 +34,8 @@ __export(Button_exports, {
 module.exports = __toCommonJS(Button_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");
 const Button = import_react.default.forwardRef(({
   children,
   variant = "primary",
@@ -163,8 +165,9 @@ const Button = import_react.default.forwardRef(({
   const iconRight = !loading ? rightIcon : void 0;
   const visibleParts = [iconLeft, showText ? true : null, iconRight].filter(Boolean).length;
   const gapClass = visibleParts > 1 ? "gap-2" : "gap-0";
+  const { onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, ...domRest } = rest;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
+    import_framer_motion.motion.button,
     {
       ref,
       type,
@@ -179,7 +182,10 @@ const Button = import_react.default.forwardRef(({
         block ? "w-full" : "",
         className
       ].join(" "),
-      ...rest,
+      whileTap: !disabled && !loading ? { scale: 0.98 } : void 0,
+      whileHover: !disabled && !loading ? { y: -0.5 } : void 0,
+      transition: import_animations.microTransition,
+      ...domRest,
       children: [
         loading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 animate-spin", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9", className: "opacity-25" }),

package/dist/Button.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";
 const Button = React.forwardRef(({
   children,
   variant = "primary",
@@ -130,8 +132,9 @@ const Button = React.forwardRef(({
   const iconRight = !loading ? rightIcon : void 0;
   const visibleParts = [iconLeft, showText ? true : null, iconRight].filter(Boolean).length;
   const gapClass = visibleParts > 1 ? "gap-2" : "gap-0";
+  const { onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, ...domRest } = rest;
   return /* @__PURE__ */ jsxs(
-    "button",
+    motion.button,
     {
       ref,
       type,
@@ -146,7 +149,10 @@ const Button = React.forwardRef(({
         block ? "w-full" : "",
         className
       ].join(" "),
-      ...rest,
+      whileTap: !disabled && !loading ? { scale: 0.98 } : void 0,
+      whileHover: !disabled && !loading ? { y: -0.5 } : void 0,
+      transition: microTransition,
+      ...domRest,
       children: [
         loading && /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 animate-spin", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
           /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", className: "opacity-25" }),

package/dist/CalendarPanel.js

@@ -34,6 +34,8 @@ __export(CalendarPanel_exports, {
 module.exports = __toCommonJS(CalendarPanel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Button = __toESM(require("./Button"));
+var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 const fmtISODate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
 const dow = ["D", "L", "M", "M", "J", "V", "S"];
@@ -59,6 +61,7 @@ function CalendarPanel({
   const month = cursor.getMonth();
   const today = /* @__PURE__ */ new Date();
   const grid = buildMonthGrid(year, month);
+  const dirRef = import_react.default.useRef(0);
   const withinBounds = (d) => {
     if (!min && !max) return true;
     const t = d.getTime();
@@ -82,7 +85,10 @@ function CalendarPanel({
             unstyled: true,
             type: "button",
             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/15",
-            onClick: () => onCursorChange(new Date(year, month - 1, 1)),
+            onClick: () => {
+              dirRef.current = -1;
+              onCursorChange(new Date(year, month - 1, 1));
+            },
             children: "\u25C0"
           }
         ),
@@ -92,36 +98,49 @@ function CalendarPanel({
             unstyled: true,
             type: "button",
             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/15",
-            onClick: () => onCursorChange(new Date(year, month + 1, 1)),
+            onClick: () => {
+              dirRef.current = 1;
+              onCursorChange(new Date(year, month + 1, 1));
+            },
             children: "\u25B6"
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2 text-center text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400", children: dow.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-1", children: d }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2", children: grid.map((d) => {
-      const inMonth = d.getMonth() === month;
-      const selected = value && fmtISODate(d) === fmtISODate(value);
-      const isToday = fmtISODate(d) === fmtISODate(today);
-      const disabled = !withinBounds(d);
-      const key = d.toISOString().slice(0, 10);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          type: "button",
-          disabled,
-          onClick: () => !disabled && onPick(d),
-          className: [
-            "h-9 rounded-xl text-sm flex items-center justify-center leading-none",
-            selected ? "bg-slate-900 text-white dark:bg-white dark:text-slate-900" : isToday ? "border border-slate-300/70 dark:border-white/20" : "hover:bg-slate-100 dark:hover:bg-white/15",
-            inMonth ? "text-slate-700 dark:text-slate-100" : "text-slate-400 dark:text-white/40",
-            disabled && "opacity-40 cursor-not-allowed"
-          ].filter(Boolean).join(" "),
-          children: d.getDate()
-        },
-        key
-      );
-    }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        className: "grid grid-cols-7 gap-1 px-2 pb-2",
+        initial: { x: dirRef.current === 0 ? 0 : dirRef.current > 0 ? 32 : -32, opacity: 0 },
+        animate: { x: 0, opacity: 1 },
+        transition: { type: "spring", stiffness: 260, damping: 24 },
+        children: grid.map((d) => {
+          const inMonth = d.getMonth() === month;
+          const selected = value && fmtISODate(d) === fmtISODate(value);
+          const isToday = fmtISODate(d) === fmtISODate(today);
+          const disabled = !withinBounds(d);
+          const key = d.toISOString().slice(0, 10);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              type: "button",
+              disabled,
+              onClick: () => !disabled && onPick(d),
+              className: [
+                "h-9 rounded-xl text-sm flex items-center justify-center leading-none",
+                selected ? "bg-slate-900 text-white dark:bg-white dark:text-slate-900" : isToday ? "border border-slate-300/70 dark:border-white/20" : "hover:bg-slate-100 dark:hover:bg-white/15",
+                inMonth ? "text-slate-700 dark:text-slate-100" : "text-slate-400 dark:text-white/40",
+                disabled && "opacity-40 cursor-not-allowed"
+              ].filter(Boolean).join(" "),
+              children: d.getDate()
+            },
+            key
+          );
+        })
+      },
+      `${year}-${month}`
+    )
   ] });
 }

package/dist/CalendarPanel.mjs

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Button from "./Button";
+import React from "react";
+import { motion } from "framer-motion";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 const fmtISODate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
 const dow = ["D", "L", "M", "M", "J", "V", "S"];
@@ -26,6 +28,7 @@ function CalendarPanel({
   const month = cursor.getMonth();
   const today = /* @__PURE__ */ new Date();
   const grid = buildMonthGrid(year, month);
+  const dirRef = React.useRef(0);
   const withinBounds = (d) => {
     if (!min && !max) return true;
     const t = d.getTime();
@@ -49,7 +52,10 @@ function CalendarPanel({
             unstyled: true,
             type: "button",
             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/15",
-            onClick: () => onCursorChange(new Date(year, month - 1, 1)),
+            onClick: () => {
+              dirRef.current = -1;
+              onCursorChange(new Date(year, month - 1, 1));
+            },
             children: "\u25C0"
           }
         ),
@@ -59,37 +65,50 @@ function CalendarPanel({
             unstyled: true,
             type: "button",
             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/15",
-            onClick: () => onCursorChange(new Date(year, month + 1, 1)),
+            onClick: () => {
+              dirRef.current = 1;
+              onCursorChange(new Date(year, month + 1, 1));
+            },
             children: "\u25B6"
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2 text-center text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400", children: dow.map((d, i) => /* @__PURE__ */ jsx("div", { className: "py-1", children: d }, i)) }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 px-2 pb-2", children: grid.map((d) => {
-      const inMonth = d.getMonth() === month;
-      const selected = value && fmtISODate(d) === fmtISODate(value);
-      const isToday = fmtISODate(d) === fmtISODate(today);
-      const disabled = !withinBounds(d);
-      const key = d.toISOString().slice(0, 10);
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          type: "button",
-          disabled,
-          onClick: () => !disabled && onPick(d),
-          className: [
-            "h-9 rounded-xl text-sm flex items-center justify-center leading-none",
-            selected ? "bg-slate-900 text-white dark:bg-white dark:text-slate-900" : isToday ? "border border-slate-300/70 dark:border-white/20" : "hover:bg-slate-100 dark:hover:bg-white/15",
-            inMonth ? "text-slate-700 dark:text-slate-100" : "text-slate-400 dark:text-white/40",
-            disabled && "opacity-40 cursor-not-allowed"
-          ].filter(Boolean).join(" "),
-          children: d.getDate()
-        },
-        key
-      );
-    }) })
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "grid grid-cols-7 gap-1 px-2 pb-2",
+        initial: { x: dirRef.current === 0 ? 0 : dirRef.current > 0 ? 32 : -32, opacity: 0 },
+        animate: { x: 0, opacity: 1 },
+        transition: { type: "spring", stiffness: 260, damping: 24 },
+        children: grid.map((d) => {
+          const inMonth = d.getMonth() === month;
+          const selected = value && fmtISODate(d) === fmtISODate(value);
+          const isToday = fmtISODate(d) === fmtISODate(today);
+          const disabled = !withinBounds(d);
+          const key = d.toISOString().slice(0, 10);
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              type: "button",
+              disabled,
+              onClick: () => !disabled && onPick(d),
+              className: [
+                "h-9 rounded-xl text-sm flex items-center justify-center leading-none",
+                selected ? "bg-slate-900 text-white dark:bg-white dark:text-slate-900" : isToday ? "border border-slate-300/70 dark:border-white/20" : "hover:bg-slate-100 dark:hover:bg-white/15",
+                inMonth ? "text-slate-700 dark:text-slate-100" : "text-slate-400 dark:text-white/40",
+                disabled && "opacity-40 cursor-not-allowed"
+              ].filter(Boolean).join(" "),
+              children: d.getDate()
+            },
+            key
+          );
+        })
+      },
+      `${year}-${month}`
+    )
   ] });
 }
 export {

package/dist/Card.js

@@ -34,15 +34,20 @@ __export(Card_exports, {
 module.exports = __toCommonJS(Card_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");
 const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5";
 const Card = import_react.default.forwardRef(
   ({ className, children, ...rest }, ref) => {
+    const { onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, ...domRest } = rest;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+      import_framer_motion.motion.div,
       {
         ref,
         className: [base, className].filter(Boolean).join(" "),
-        ...rest,
+        whileHover: { y: -2 },
+        transition: import_animations.microTransition,
+        ...domRest,
         children
       }
     );

package/dist/Card.mjs

@@ -1,15 +1,20 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 const base = "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5";
 const Card = React.forwardRef(
   ({ className, children, ...rest }, ref) => {
+    const { onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, ...domRest } = rest;
     return /* @__PURE__ */ jsx(
-      "div",
+      motion.div,
       {
         ref,
         className: [base, className].filter(Boolean).join(" "),
-        ...rest,
+        whileHover: { y: -2 },
+        transition: microTransition,
+        ...domRest,
         children
       }
     );