my-animated-components 1.3.7 → 1.3.8

package/dist/index.d.ts

@@ -19,6 +19,7 @@ interface SizeProps {
 }
 
 type Color$d = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type MotionVariantKey = keyof typeof motionVariants;
 interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
     variant?: 'solid' | 'outline' | 'ghost';
     color?: Color$d;
@@ -26,10 +27,10 @@ interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
      * Predefined motion variant name from motionVariants.
      * This will apply the corresponding animation configuration.
      */
-    motionVariant?: keyof typeof motionVariants;
-    whileHoverAnimation?: keyof typeof motionVariants;
-    whileTapAnimation?: keyof typeof motionVariants;
-    whileFocusAnimation?: keyof typeof motionVariants;
+    motionVariant?: MotionVariantKey;
+    whileHoverAnimation?: MotionVariantKey;
+    whileTapAnimation?: MotionVariantKey;
+    whileFocusAnimation?: MotionVariantKey;
 }
 declare const Button: React$1.FC<ButtonProps>;
 

package/dist/index.js

@@ -3,6 +3,10 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 
+function getVariantVisible(variantKey) {
+    const variant = motionVariants[variantKey]?.visible;
+    return typeof variant === 'function' ? undefined : variant;
+}
 const motionVariants = {
     null: {},
     fadeIn: {
@@ -524,9 +528,15 @@ whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
         lg: 'px-4 py-2 text-lg',
         xl: 'px-6 py-3 text-xl',
     };
-    const computedWhileHover = whileHoverAnimation || whileHover;
-    const computedWhileTap = whileTapAnimation || whileTap;
-    const computedWhileFocus = whileFocusAnimation || whileFocus;
+    const computedWhileHover = whileHoverAnimation
+        ? getVariantVisible(whileHoverAnimation)
+        : whileHover;
+    const computedWhileTap = whileTapAnimation
+        ? getVariantVisible(whileTapAnimation)
+        : whileTap;
+    const computedWhileFocus = whileFocusAnimation
+        ? getVariantVisible(whileFocusAnimation)
+        : whileFocus;
     return (React.createElement(framerMotion.motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus, ...rest }, children));
 };
 
@@ -571,9 +581,15 @@ const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onCl
         lg: 'p-2.5',
         xl: 'p-3',
     };
-    const computedWhileHover = whileHoverAnimation || whileHover;
-    const computedWhileTap = whileTapAnimation || whileTap;
-    const computedWhileFocus = whileFocusAnimation || whileFocus;
+    const computedWhileHover = whileHoverAnimation
+        ? getVariantVisible(whileHoverAnimation)
+        : whileHover;
+    const computedWhileTap = whileTapAnimation
+        ? getVariantVisible(whileTapAnimation)
+        : whileTap;
+    const computedWhileFocus = whileFocusAnimation
+        ? getVariantVisible(whileFocusAnimation)
+        : whileFocus;
     return (React.createElement(framerMotion.motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus, ...rest }, icon));
 };
 
@@ -1057,9 +1073,15 @@ const Pagination = ({ className = '', currentPage, totalPages, onPageChange, col
         warning: 'text-yellow-600 bg-yellow-50 hover:bg-yellow-100 hover:text-yellow-700 dark:bg-yellow-800 dark:hover:bg-yellow-700',
         info: 'text-blue-400 bg-blue-50 hover:bg-blue-100 hover:text-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700',
     };
-    const computedWhileHover = whileHoverAnimation || whileHover;
-    const computedWhileTap = whileTapAnimation || whileTap;
-    const computedWhileFocus = whileFocusAnimation || whileFocus;
+    const computedWhileHover = whileHoverAnimation
+        ? getVariantVisible(whileHoverAnimation)
+        : whileHover;
+    const computedWhileTap = whileTapAnimation
+        ? getVariantVisible(whileTapAnimation)
+        : whileTap;
+    const computedWhileFocus = whileFocusAnimation
+        ? getVariantVisible(whileFocusAnimation)
+        : whileFocus;
     return (React.createElement(framerMotion.motion.nav, { className: `flex justify-center ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", ...rest },
         React.createElement("div", { className: "w-full overflow-x-auto" },
             React.createElement("ul", { className: "flex items-center -space-x-px h-10" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-animated-components",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "type": "module",
   "description": "",
   "main": "dist/index.js",