@lzzjokerzzl/react-ui-components 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Alex Buelvas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,174 @@
+# @alex-buelvas/react-ui-components
+
+A comprehensive React UI component library with animations, built with TypeScript and Tailwind CSS.
+
+## Features
+
+- 🎨 **Modern Design**: Clean and professional UI components
+- ⚡ **Smooth Animations**: Powered by Framer Motion
+- 🔧 **TypeScript Support**: Full type safety and IntelliSense
+- 🎯 **Tailwind CSS**: Utility-first CSS framework integration
+- 📱 **Responsive**: Mobile-first responsive design
+- ♿ **Accessible**: ARIA compliant components
+- 🎭 **Customizable**: Flexible styling with variants
+- 🚀 **Performance**: Optimized for production
+
+## Installation
+
+```bash
+npm install @alex-buelvas/react-ui-components
+# or
+yarn add @alex-buelvas/react-ui-components
+# or  
+pnpm add @alex-buelvas/react-ui-components
+# or
+bun add @alex-buelvas/react-ui-components
+```
+
+## Quick Start
+
+```tsx
+import { Button, Badge, Modal } from '@alex-buelvas/react-ui-components';
+import '@alex-buelvas/react-ui-components/styles';
+
+function App() {
+  return (
+    <div>
+      <Badge content="5" variant="solid" color="primary">
+        <Button>Notifications</Button>
+      </Badge>
+    </div>
+  );
+}
+```
+
+## Components
+
+### Basic Components
+- **Avatar** - User profile pictures with initials fallback
+- **Badge** - Notification indicators and labels  
+- **Button** - Interactive buttons with multiple variants
+- **Chip** - Compact elements for labels and filters
+- **Image** - Optimized images with loading states
+- **Input** - Form inputs with validation states
+- **Progress** - Progress indicators and loading bars
+- **Spinner** - Loading spinners with different styles
+- **Switch** - Toggle switches for boolean values
+
+### Layout & Navigation
+- **Modal** - Overlay dialogs and popups
+- **Navbar** - Navigation bars and headers
+- **Table** - Data tables with sorting and pagination
+
+### Animation Components
+- **AnimatedContainer** - Fade, slide, scale, bounce, flip, stagger, morphing, and parallax containers
+- **Animation** - Basic animation components (FadeIn, SlideIn, ScaleIn, RotateIn, Bounce, Stagger)
+- **TextAnimation** - Typewriter, reveal, counter, gradient, morphing, and glitch text effects
+
+## Usage Examples
+
+### Animated Containers
+
+```tsx
+import { FadeContainer, SlideContainer, BounceContainer } from '@alex-buelvas/react-ui-components';
+
+<FadeContainer triggerOnce>
+  <h1>This fades in when visible</h1>
+</FadeContainer>
+
+<SlideContainer direction="up" distance={50}>
+  <div>This slides up from bottom</div>
+</SlideContainer>
+
+<BounceContainer intensity="high">
+  <button>This bounces in</button>
+</BounceContainer>
+```
+
+### Text Animations
+
+```tsx
+import { TypeWriter, RevealText, CounterText } from '@alex-buelvas/react-ui-components';
+
+<TypeWriter 
+  text="Hello, World!" 
+  speed={100}
+  showCursor
+/>
+
+<RevealText 
+  text="Revealing word by word"
+  mode="word"
+  preset="elegant"
+/>
+
+<CounterText 
+  from={0}
+  to={1000}
+  duration={2000}
+  format="number"
+/>
+```
+
+### Interactive Components
+
+```tsx
+import { Modal, useModal, Switch, Progress } from '@alex-buelvas/react-ui-components';
+
+function Example() {
+  const { isOpen, open, close } = useModal();
+  const [enabled, setEnabled] = useState(false);
+  
+  return (
+    <>
+      <Switch 
+        checked={enabled}
+        onChange={setEnabled}
+        size="lg"
+        color="primary"
+      />
+      
+      <Progress 
+        value={75}
+        variant="gradient"
+        size="md"
+        showLabel
+      />
+      
+      <Modal isOpen={isOpen} onClose={close}>
+        <h2>Modal Content</h2>
+      </Modal>
+    </>
+  );
+}
+```
+
+## Styling
+
+This library uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project, or import the included styles:
+
+```tsx
+import '@alex-buelvas/react-ui-components/styles';
+```
+
+## TypeScript Support
+
+All components are built with TypeScript and include comprehensive type definitions:
+
+```tsx
+import type { 
+  ButtonProps, 
+  ModalProps, 
+  AnimatedContainerConfig,
+  TextAnimationPreset 
+} from '@alex-buelvas/react-ui-components';
+```
+
+## Requirements
+
+- React >= 18.0.0
+- React DOM >= 18.0.0
+
+## License
+
+MIT © Alex Buelvas