my-animated-components 1.0.7 → 1.0.9

package/dist/index.js

@@ -32,6 +32,7 @@ var css_248z = "@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;
 styleInject(css_248z);
 
 const motionVariants = {
+    null: {},
     fadeIn: {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: 0.5 } },
@@ -75,6 +76,435 @@ const motionVariants = {
         hidden: { rotateY: 90, opacity: 0 },
         visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
     },
+    fadeOut: {
+        hidden: { opacity: 1 },
+        visible: { opacity: 0, transition: { duration: 0.5 } },
+    },
+    zoomOut: {
+        hidden: { scale: 1, opacity: 1 },
+        visible: { scale: 0.8, opacity: 0, transition: { duration: 0.5 } },
+    },
+    scaleUp: {
+        hidden: { scale: 0.5, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
+    },
+    scaleDown: {
+        hidden: { scale: 1.2, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
+    },
+    fadeInUp: {
+        hidden: { opacity: 0, y: 50 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+    },
+    fadeInDown: {
+        hidden: { opacity: 0, y: -50 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+    },
+    fadeInLeft: {
+        hidden: { opacity: 0, x: -50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
+    },
+    fadeInRight: {
+        hidden: { opacity: 0, x: 50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
+    },
+    rotateBounce: {
+        hidden: { rotate: -45, opacity: 0 },
+        visible: { rotate: 0, opacity: 1, transition: { type: 'spring', stiffness: 100 } },
+    },
+    scaleBounce: {
+        hidden: { scale: 0.5 },
+        visible: { scale: 1.2, transition: { type: 'spring', stiffness: 100 } },
+    },
+    fadeInScale: {
+        hidden: { opacity: 0, scale: 0.8 },
+        visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } },
+    },
+    bounceOut: {
+        hidden: { scale: 1.2 },
+        visible: { scale: 0.8, transition: { type: 'spring', stiffness: 100 } },
+    },
+    shake: {
+        hidden: { x: 0 },
+        visible: { x: [0, -10, 10, -10, 10, 0], transition: { duration: 0.6, repeat: Infinity } },
+    },
+    pulse: {
+        hidden: { scale: 1 },
+        visible: { scale: [1, 1.1, 1], transition: { duration: 1.5, repeat: Infinity } },
+    },
+    fadeInFast: {
+        hidden: { opacity: 0 },
+        visible: { opacity: 1, transition: { duration: 0.2 } },
+    },
+    slideUpFast: {
+        hidden: { y: 30, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    fadeUp: {
+        hidden: { opacity: 0, y: 50 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+    },
+    zoomInFast: {
+        hidden: { scale: 0.6, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
+    },
+    zoomOutFast: {
+        hidden: { scale: 1, opacity: 1 },
+        visible: { scale: 0.6, opacity: 0, transition: { duration: 0.3 } },
+    },
+    slideDownFast: {
+        hidden: { y: -30, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    rotateOut: {
+        hidden: { rotate: 180, opacity: 0 },
+        visible: { rotate: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    flipFast: {
+        hidden: { rotateY: 90, opacity: 0 },
+        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    staggerUp: {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.15 },
+        },
+    },
+    flipIn: {
+        hidden: { rotateY: 180, opacity: 0 },
+        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    fadeInSlow: {
+        hidden: { opacity: 0 },
+        visible: { opacity: 1, transition: { duration: 1.5 } },
+    },
+    slideUpSlow: {
+        hidden: { y: 50, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
+    },
+    slideDownSlow: {
+        hidden: { y: -50, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
+    },
+    slideLeftSlow: {
+        hidden: { x: 50, opacity: 0 },
+        visible: { x: 0, opacity: 1, transition: { duration: 1.5 } },
+    },
+    slideRightSlow: {
+        hidden: { x: -50, opacity: 0 },
+        visible: { x: 0, opacity: 1, transition: { duration: 1.5 } },
+    },
+    bounceSlow: {
+        hidden: { scale: 0.8 },
+        visible: { scale: 1, transition: { type: 'spring', stiffness: 50 } },
+    },
+    rotateInSlow: {
+        hidden: { rotate: -90, opacity: 0 },
+        visible: { rotate: 0, opacity: 1, transition: { duration: 1.5 } },
+    },
+    staggerSlow: {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.5 },
+        },
+    },
+    flipSlow: {
+        hidden: { rotateY: 90, opacity: 0 },
+        visible: { rotateY: 0, opacity: 1, transition: { duration: 1.5 } },
+    },
+    scaleBounceSlow: {
+        hidden: { scale: 0.6 },
+        visible: { scale: 1, transition: { type: 'spring', stiffness: 50 } },
+    },
+    rotateOutFast: {
+        hidden: { rotate: 180, opacity: 0 },
+        visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    scaleUpFast: {
+        hidden: { scale: 0.5, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
+    },
+    scaleDownFast: {
+        hidden: { scale: 1.2, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
+    },
+    bounceFast: {
+        hidden: { scale: 0.8 },
+        visible: { scale: 1, transition: { type: 'spring', stiffness: 100 } },
+    },
+    flipInFast: {
+        hidden: { rotateY: 180, opacity: 0 },
+        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    fadeInLeftFast: {
+        hidden: { opacity: 0, x: -50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },
+    },
+    fadeInRightFast: {
+        hidden: { opacity: 0, x: 50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },
+    },
+    fadeInUpFast: {
+        hidden: { opacity: 0, y: 30 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
+    },
+    fadeInDownFast: {
+        hidden: { opacity: 0, y: -30 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
+    },
+    scaleUpSlow: {
+        hidden: { scale: 0.5, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
+    },
+    scaleDownSlow: {
+        hidden: { scale: 1.2, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
+    },
+    rotateInFast: {
+        hidden: { rotate: -90, opacity: 0 },
+        visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    staggerChildren: {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.25 },
+        },
+    },
+    fadeUpSlow: {
+        hidden: { opacity: 0, y: 50 },
+        visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
+    },
+    slideInFromLeft: {
+        hidden: { x: -100, opacity: 0 },
+        visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    slideInFromRight: {
+        hidden: { x: 100, opacity: 0 },
+        visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    slideInFromTop: {
+        hidden: { y: -100, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    slideInFromBottom: {
+        hidden: { y: 100, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    fadeInSlowFromTop: {
+        hidden: { opacity: 0, y: -50 },
+        visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
+    },
+    fadeInSlowFromBottom: {
+        hidden: { opacity: 0, y: 50 },
+        visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
+    },
+    fadeInSlowFromLeft: {
+        hidden: { opacity: 0, x: -50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
+    },
+    fadeInSlowFromRight: {
+        hidden: { opacity: 0, x: 50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
+    },
+    bounceIn: {
+        hidden: { scale: 0.8 },
+        visible: { scale: 1, transition: { type: 'spring', stiffness: 150 } },
+    },
+    zoomOutSlow: {
+        hidden: { scale: 1, opacity: 1 },
+        visible: { scale: 0.6, opacity: 0, transition: { duration: 1.5 } },
+    },
+    fadeInFastFromTop: {
+        hidden: { opacity: 0, y: -30 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
+    },
+    fadeInFastFromBottom: {
+        hidden: { opacity: 0, y: 30 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
+    },
+    slideInLeftFast: {
+        hidden: { x: -50, opacity: 0 },
+        visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    slideInRightFast: {
+        hidden: { x: 50, opacity: 0 },
+        visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    fadeInRotate: {
+        hidden: { opacity: 0, rotate: -45 },
+        visible: { opacity: 1, rotate: 0, transition: { duration: 0.5 } },
+    },
+    scaleInFast: {
+        hidden: { scale: 0.8 },
+        visible: { scale: 1, transition: { duration: 0.3 } },
+    },
+    zoomInBig: {
+        hidden: { scale: 0.3 },
+        visible: { scale: 1, transition: { duration: 1.5 } },
+    },
+    slideInDiagonal: {
+        hidden: { x: -100, y: -100, opacity: 0 },
+        visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    rotate360: {
+        hidden: { rotate: 0, opacity: 0 },
+        visible: { rotate: 360, opacity: 1, transition: { duration: 1 } },
+    },
+    flipInX: {
+        hidden: { rotateX: 90, opacity: 0 },
+        visible: { rotateX: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    staggerChildrenFast: {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.15, duration: 0.3 },
+        },
+    },
+    pulseFast: {
+        hidden: { scale: 1 },
+        visible: { scale: [1, 1.1, 1], transition: { duration: 0.8, repeat: Infinity } },
+    },
+    slideInDiagonalFast: {
+        hidden: { x: -80, y: -80, opacity: 0 },
+        visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    fadeInRightSlow: {
+        hidden: { opacity: 0, x: 50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
+    },
+    zoomOutSlowFromCenter: {
+        hidden: { scale: 1.2, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
+    },
+    flipBounce: {
+        hidden: { rotateY: 90, opacity: 0 },
+        visible: { rotateY: 0, opacity: 1, transition: { type: 'spring', stiffness: 150 } },
+    },
+    slideInFromTopFast: {
+        hidden: { y: -50, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    fadeInDiagonal: {
+        hidden: { opacity: 0, x: -50, y: -50 },
+        visible: { opacity: 1, x: 0, y: 0, transition: { duration: 0.5 } },
+    },
+    zoomInBounce: {
+        hidden: { scale: 0.5, opacity: 0 },
+        visible: { scale: 1.1, opacity: 1, transition: { type: 'spring', stiffness: 150 } },
+    },
+    rotateInOut: {
+        hidden: { rotate: -180, opacity: 0 },
+        visible: { rotate: 0, opacity: 1, transition: { duration: 1 } },
+    },
+    staggerUpFast: {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.1, duration: 0.3 },
+        },
+    },
+    fadeInRotateIn: {
+        hidden: { opacity: 0, rotate: -45 },
+        visible: { opacity: 1, rotate: 0, transition: { duration: 0.5 } },
+    },
+    scaleInQuick: {
+        hidden: { scale: 0.7, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 0.2 } },
+    },
+    slideInFromBottomSlow: {
+        hidden: { y: 80, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
+    },
+    flipRotateOut: {
+        hidden: { rotateY: 180, opacity: 0 },
+        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
+    },
+    slideLeftFast: {
+        hidden: { x: -50, opacity: 0 },
+        visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    zoomInBigFast: {
+        hidden: { scale: 0.4, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 0.2 } },
+    },
+    fadeInUpFastSlow: {
+        hidden: { opacity: 0, y: 30 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+    },
+    rotateOutSlow: {
+        hidden: { rotate: 90, opacity: 0 },
+        visible: { rotate: 0, opacity: 1, transition: { duration: 1.5 } },
+    },
+    staggerLeft: {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.2, duration: 0.6 },
+        },
+    },
+    rotateOutFastReverse: {
+        hidden: { rotate: 180, opacity: 0 },
+        visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    scaleDownBounce: {
+        hidden: { scale: 1.2 },
+        visible: { scale: 0.9, transition: { type: 'spring', stiffness: 100 } },
+    },
+    fadeInFastFromLeft: {
+        hidden: { opacity: 0, x: -50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 0.2 } },
+    },
+    fadeInFastFromRight: {
+        hidden: { opacity: 0, x: 50 },
+        visible: { opacity: 1, x: 0, transition: { duration: 0.2 } },
+    },
+    bounceSlowFast: {
+        hidden: { scale: 0.6 },
+        visible: { scale: 1, transition: { type: 'spring', stiffness: 75 } },
+    },
+    slideInFromTopFastReverse: {
+        hidden: { y: -80, opacity: 0 },
+        visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
+    },
+    fadeOutFast: {
+        hidden: { opacity: 1 },
+        visible: { opacity: 0, transition: { duration: 0.3 } },
+    },
+    flipScaleUp: {
+        hidden: { rotateY: 90, opacity: 0, scale: 0.7 },
+        visible: { rotateY: 0, opacity: 1, scale: 1, transition: { duration: 0.5 } },
+    },
+    slideOutRight: {
+        hidden: { x: 0, opacity: 1 },
+        visible: { x: 100, opacity: 0, transition: { duration: 0.5 } },
+    },
+    zoomOutBounce: {
+        hidden: { scale: 1, opacity: 1 },
+        visible: { scale: 0.5, opacity: 0, transition: { type: 'spring', stiffness: 150 } },
+    },
+    fadeUpReverse: {
+        hidden: { opacity: 0, y: -50 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+    },
+    staggerUpReverse: {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.2, duration: 0.4 },
+        },
+    },
+    scaleInFromLeft: {
+        hidden: { scale: 0.7, opacity: 0 },
+        visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
+    },
+    flipOut: {
+        hidden: { rotateY: 0, opacity: 1 },
+        visible: { rotateY: 90, opacity: 0, transition: { duration: 0.3 } },
+    },
 };
 
 const Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', // Default motion variant
@@ -503,9 +933,16 @@ const ModalHeader = ({ children, className = '' }) => {
         React.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900" }, children)));
 };
 
-const NavItem = ({ children, className = '', href, active = false }) => {
+const NavItem = ({ children, className = '', href, active = false, size = 'md', motionVariant = 'fadeIn', }) => {
     const activeClass = active ? 'text-gray-900 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700';
-    return (React.createElement(motion.a, { href: href, className: `inline-flex items-center px-1 pt-1 text-sm font-medium ${activeClass} ${className}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 } }, children));
+    const sizeClasses = {
+        xs: 'text-xs px-1 py-0.5',
+        sm: 'text-sm px-2 py-1',
+        md: 'text-base px-3 py-2',
+        lg: 'text-lg px-4 py-3',
+        xl: 'text-xl px-5 py-4',
+    };
+    return (React.createElement(motion.a, { href: href, className: `inline-flex items-center ${sizeClasses[size]} ${activeClass} ${className}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, children));
 };
 
 const Navbar = ({ children, className = '', brand }) => {

package/package.json

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

package/readme.md

@@ -1,56 +1,67 @@
-# MY Animated Components
+# My Animated Components
 
-**My Animated Components** is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons and icon buttons with different styles, sizes, and interactive animations.
+**My Animated Components** is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons, icon buttons, and other interactive UI elements with different styles, sizes, and animations.
 
 ---
 
 ## Features
 
-Animated Components
-Animated Components is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons, icon buttons, and other interactive UI elements with different styles, sizes, and animations.
-
-Features
-Customizable Buttons: Supports different variants (solid, outline, ghost) and colors (primary, secondary, etc.).
-Icon Button: Use any custom icon inside the button for more flexibility.
-Framer Motion Animations: Interactive hover and tap animations to enhance user experience.
-Various UI Elements: Includes components like Accordion, Alert, Badge, Modal, Dropdown, and more.
-Available Components
-Button
-IconButton
-Accordion
-Alert
-Avatar
-Badge
-Breadcrumb
-Card
-Dropdown
-Checkbox
-FileUpload
-Input
-Radio
-Select
-Switch
-Textarea
-Modal
-Navbar
-Pagination
-ProgressBar
-Slider
-Table
-Tabs
-Tooltip
-Heading
-Text
-
-## props 
-onClick (function): The function to call when the button is clicked.
-disabled (boolean): Disables the button.
-variant (string): The button style, one of solid, outline, or ghost.
-color (string): The button color, one of primary, secondary, success, danger, warning, or info.
-size (string): The size of the button, one of xs, sm, md, lg, or xl.
-motionVariant (string): A predefined motion animation for the button (fadeIn is the default).
+- **Customizable Buttons**: Supports different variants (solid, outline, ghost) and colors (primary, secondary, etc.).
+- **Icon Button**: Use any custom icon inside the button for more flexibility.
+- **Framer Motion Animations**: Interactive hover and tap animations to enhance user experience.
+- **Various UI Elements**: Includes components like Accordion, Alert, Badge, Modal, Dropdown, and more.
+
+## Available Components
+
+- Button
+- IconButton
+- Accordion
+- Alert
+- Avatar
+- Badge
+- Breadcrumb
+- Card
+- Dropdown
+- Checkbox
+- FileUpload
+- Input
+- Radio
+- Select
+- Switch
+- Textarea
+- Modal
+- Navbar
+- Pagination
+- ProgressBar
+- Slider
+- Table
+- Tabs
+- Tooltip
+- Heading
+- Text
+
+---
+
+## Props
+
+Here are the common props for the **Button** component:
+
+| Prop          | Type      | Description                                                   |
+|---------------|-----------|---------------------------------------------------------------|
+| `onClick`     | function  | The function to call when the button is clicked.              |
+| `disabled`    | boolean   | Disables the button if set to true.                           |
+| `variant`     | string    | The button style, one of `solid`, `outline`, or `ghost`.      |
+| `color`       | string    | The button color, one of `primary`, `secondary`, `success`, `danger`, `warning`, or `info`. |
+| `size`        | string    | The size of the button, one of `xs`, `sm`, `md`, `lg`, or `xl`. |
+| `motionVariant` | string  | A predefined motion animation for the button (default is `fadeIn`). |
+
+---
 
 ## Example Usage
+
+### Button Example
+
+```tsx
 import { Button } from 'my-animated-components';
 
 const MyComponent = () => {
@@ -61,45 +72,3 @@ const MyComponent = () => {
   );
 };
 
-## other example 
-
-import { IconButton } from 'my-animated-components';
-import { FaBeer } from 'react-icons/fa';
-
-const MyComponent = () => {
-  return (
-    <IconButton color="secondary" size="lg">
-      <FaBeer />
-    </IconButton>
-  );
-};
-
-
-
-## Installation
-To install my-animated-components in your React project, you also need to install Tailwind CSS and Framer Motion as dependencies. Run the following commands:
-
-Install my-animated-components:
-bash
-Copy code
-npm install my-animated-components
-Install Tailwind CSS (if not already installed in your project):
-bash
-Copy code
-npm install -D tailwindcss
-Install Framer Motion (for animations):
-bash
-Copy code
-npm install framer-motion
-Add Tailwind to your CSS file (e.g., src/index.css):
-css
-Copy code
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-Make sure to configure Tailwind in your tailwind.config.js file if it is not already set up:
-bash
-Copy code
-npx tailwindcss init
-
-npm install my-animated-components

package/dist/src/components/accordion/Accordion.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { BaseProps, WithChildren } from '../../../types/common';
-import { motionVariants } from '../../utils/motionVariants';
-type Color = 'primary' | 'secondary' | 'danger' | 'success' | 'info' | 'warning';
-type Variant = 'solid' | 'outline' | 'ghost';
-interface AccordionProps extends BaseProps, WithChildren {
-    items: {
-        title: string;
-        content: React.ReactNode;
-    }[];
-    color?: Color;
-    variant?: Variant;
-    motionVariant?: keyof typeof motionVariants;
-}
-export declare const Accordion: React.FC<AccordionProps>;
-export {};

package/dist/src/components/alert/Alert.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { BaseProps, WithChildren, ColorProps } from '../../../types/common';
-import { motionVariants } from '../../utils/motionVariants';
-interface AlertProps extends BaseProps, WithChildren, ColorProps {
-    onClose?: () => void;
-    motionVariant?: keyof typeof motionVariants;
-}
-export declare const Alert: React.FC<AlertProps>;
-export {};

package/dist/src/components/avatar/Avatar.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { BaseProps, SizeProps } from '../../../types/common';
-interface AvatarProps extends BaseProps, SizeProps {
-    src?: string;
-    alt?: string;
-    initials?: string;
-}
-export declare const Avatar: React.FC<AvatarProps>;
-export {};

package/dist/src/components/badge/Badge.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { BaseProps, WithChildren, ColorProps, SizeProps } from '../../../types/common';
-import { motionVariants } from '../../utils/motionVariants';
-interface BadgeProps extends BaseProps, WithChildren, ColorProps, SizeProps {
-    motionVariant?: keyof typeof motionVariants;
-}
-export declare const Badge: React.FC<BadgeProps>;
-export {};

package/dist/src/components/breadcrumb/Breadcrumb.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { BaseProps } from '../../../types/common';
-import { motionVariants } from '../../utils/motionVariants';
-interface BreadcrumbProps extends BaseProps {
-    items: {
-        label: string;
-        href: string;
-    }[];
-    motionVariant?: keyof typeof motionVariants;
-}
-export declare const Breadcrumb: React.FC<BreadcrumbProps>;
-export {};