my-animated-components 1.2.3 → 1.2.5

package/dist/index.js

@@ -933,11 +933,18 @@ const NavItem = ({ children, className = '', href, active = false, size = 'md',
 };
 
 const Navbar = ({ children, className = '', brand }) => {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     return (React.createElement(motion.nav, { className: `bg-white shadow ${className}`, initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
         React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" },
             React.createElement("div", { className: "flex justify-between h-16" },
                 React.createElement("div", { className: "flex-shrink-0 flex items-center" }, brand),
-                React.createElement("div", { className: "flex items-center" }, children)))));
+                React.createElement("div", { className: "hidden md:flex items-center space-x-4" }, children),
+                React.createElement("div", { className: "flex md:hidden items-center" },
+                    React.createElement("button", { type: "button", className: "text-gray-800 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400", onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen) }, isMobileMenuOpen ? (React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }))) : (React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 12h16M4 18h16" }))))))),
+        isMobileMenuOpen && (React.createElement("div", { className: "md:hidden bg-white shadow-md" },
+            React.createElement("div", { className: "space-y-2 px-4 py-2" }, React.Children.map(children, (child) => (React.createElement("div", { className: "text-gray-800 hover:text-gray-600" }, child))))))));
 };
 
 const Offcanvas = ({ children, className = '', isOpen, onClose, position = 'left' }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-animated-components",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "type": "module",
   "description": "",
   "main": "dist/index.js",
@@ -10,21 +10,58 @@
   },
   "keywords": [
     "react",
+    "react-components",
     "react-hooks",
+    "react-ui",
+    "animated-components",
+    "animation-library",
+    "motion-effects",
+    "motion-ui",
+    "framer-motion",
+    "tailwindcss",
+    "ui-library",
+    "responsive-ui",
+    "responsive-design",
+    "modern-ui",
+    "beautiful-ui",
+    "design-system",
+    "react-animations",
+    "css-animations",
+    "motion-animations",
+    "page-transitions",
+    "page-animations",
+    "interactive-ui",
+    "frontend-library",
+    "ui-kit",
+    "react-ui-kit",
+    "component-library",
+    "dynamic-components",
+    "custom-hooks",
     "useState",
     "useEffect",
     "useRef",
     "useContext",
     "useReducer",
-    "custom-hook",
-    "component",
-    "frontend",
-    "UI",
     "navigation",
     "routing",
-    "navigate",
+    "page-navigation",
     "router",
-    "page-navigation"
+    "menu-transitions",
+    "interactive-design",
+    "material-ui-alternative",
+    "bootstrap-alternative",
+    "animation-toolkit",
+    "transition-effects",
+    "micro-interactions",
+    "react-motion",
+    "motion-components",
+    "professional-ui",
+    "easy-to-use",
+    "developer-friendly",
+    "reusable-components",
+    "high-performance-ui",
+    "typescript-support",
+    "my-animated-components"
   ],
   "author": "",
   "license": "ISC",
@@ -46,4 +83,4 @@
     "tslib": "^2.6.2",
     "typescript": "^5.7.3"
   }
-}
+}

package/readme.md

@@ -1,219 +1,106 @@
 # My Animated Components
 
-**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.
+A comprehensive React component library with built-in animations and customization options.
 
----
 ## Documentation
 
 For detailed documentation and examples, visit the [official documentation](https://mukeshdev.vercel.app/my-animated-components).
 
 ## 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.
+- 🎨 Customizable colors and sizes
+- 🌟 Built-in animations using Framer Motion
+- 📱 Responsive design
+- 🎭 Accessible components
+- 🧩 Easy to use and integrate
+
+## Installation
+
+Install the package using npm:
+
+```bash
+npm install my-animated-components
+```
+
+Or using yarn:
+
+```bash
+yarn add my-animated-components
+```
+
+## Usage
+
+Import the components you need in your React application:
+
+```jsx
+import { Button, Card, Modal } from 'my-animated-components';
+```
+
+Then use them in your components:
+
+```jsx
+function MyComponent() {
+  return (
+    <Card>
+      <h2>Welcome to My App</h2>
+      <Button color="primary" motionVariant="fadeIn">
+        Click me!
+      </Button>
+    </Card>
+  );
+}
+```
 
 ## Available Components
 
-- Button
-- IconButton
 - Accordion
 - Alert
 - Avatar
 - Badge
 - Breadcrumb
-- Card
-- CardBody
-- CardFooter
-- CardHeader
-- Dropdown
-- DropdownItem
+- Button
+- Card (with CardBody, CardFooter, CardHeader)
 - Checkbox
-- FileUpload
-- Input
-- Radio
-- Select
-- Switch
-- Textarea
 - Container
+- Dropdown
+- FileUpload
 - Flex
 - Grid
-- List
-- ListItem
-- Modal
-- ModalBody
-- ModalFooter
-- ModalHeader
+- Heading
+- IconButton
+- Input
+- List (with ListItem)
+- Modal (with ModalBody, ModalFooter, ModalHeader)
 - NavItem
 - Navbar
-- Offcanvas
-- OffcanvasBody
-- OffcanvasHeader
+- Offcanvas (with OffcanvasBody, OffcanvasHeader)
 - Pagination
 - ProgressBar
+- Radio
+- RangeSlider
+- Select
 - Skeleton
 - Slider
-- RangeSlider
 - Stepper
-- Table
-- TableBody
-- TableCell
-- TableHead
-- TableRow
+- Switch
+- Table (with TableBody, TableCell, TableHead, TableRow)
 - Tabs
-- Tooltip
-- Heading
 - Text
+- Textarea
+- Tooltip
 
+## Customization
 
----
-
-## 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`). |
-
----
-
-## Available Motion Variants
-
-- null
-- fadeIn
-- zoomIn
-- slideUp
-- slideDown
-- slideLeft
-- slideRight
-- bounce
-- rotateIn
-- stagger
-- flip
-- fadeOut
-- zoomOut
-- scaleUp
-- scaleDown
-- fadeInUp
-- fadeInDown
-- fadeInLeft
-- fadeInRight
-- rotateBounce
-- scaleBounce
-- fadeInScale
-- bounceOut
-- shake
-- pulse
-- fadeInFast
-- slideUpFast
-- fadeUp
-- zoomInFast
-- zoomOutFast
-- slideDownFast
-- rotateOut
-- flipFast
-- staggerUp
-- flipIn
-- fadeInSlow
-- slideUpSlow
-- slideDownSlow
-- slideLeftSlow
-- slideRightSlow
-- bounceSlow
-- rotateInSlow
-- staggerSlow
-- flipSlow
-- scaleBounceSlow
-- rotateOutFast
-- scaleUpFast
-- scaleDownFast
-- bounceFast
-- flipInFast
-- fadeInLeftFast
-- fadeInRightFast
-- fadeInUpFast
-- fadeInDownFast
-- scaleUpSlow
-- scaleDownSlow
-- rotateInFast
-- staggerChildren
-- fadeUpSlow
-- slideInFromLeft
-- slideInFromRight
-- slideInFromTop
-- slideInFromBottom
-- fadeInSlowFromTop
-- fadeInSlowFromBottom
-- fadeInSlowFromLeft
-- fadeInSlowFromRight
-- bounceIn
-- zoomOutSlow
-- fadeInFastFromTop
-- fadeInFastFromBottom
-- slideInLeftFast
-- slideInRightFast
-- fadeInRotate
-- scaleInFast
-- zoomInBig
-- slideInDiagonal
-- rotate360
-- flipInX
-- staggerChildrenFast
-- pulseFast
-- slideInDiagonalFast
-- fadeInRightSlow
-- zoomOutSlowFromCenter
-- flipBounce
-- slideInFromTopFast
-- fadeInDiagonal
-- zoomInBounce
-- rotateInOut
-- staggerUpFast
-- fadeInRotateIn
-- scaleInQuick
-- slideInFromBottomSlow
-- flipRotateOut
-- slideLeftFast
-- zoomInBigFast
-- fadeInUpFastSlow
-- rotateOutSlow
-- staggerLeft
-- rotateOutFastReverse
-- scaleDownBounce
-- fadeInFastFromLeft
-- fadeInFastFromRight
-- bounceSlowFast
-- slideInFromTopFastReverse
-- fadeOutFast
-- flipScaleUp
-- slideOutRight
-- zoomOutBounce
-- fadeUpReverse
-- staggerUpReverse
-- scaleInFromLeft
-- flipOut
-
----
-
-## Example Usage
-
-### Button Example
-
-```tsx
-import { Button } from 'my-animated-components';
-
-const MyComponent = () => {
-  return (
-    <Button color="primary" size="md" className="my-custom-class" motionVariant='slideUp'>
-      Click Me
-    </Button>
-  );
-};
+Most components accept props for customization, including:
+
+- `color`: Choose from 'primary', 'secondary', 'success', 'danger', 'warning', 'info'
+- `size`: Usually 'xs', 'sm', 'md', 'lg', 'xl'
+- `motionVariant`: Animation variant (e.g., 'fadeIn', 'slideUp', 'zoomIn')
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
 
+This project is licensed under the MIT License.