@lzzjokerzzl/react-ui-components 1.1.2 → 1.3.0

package/README.md

@@ -1,4 +1,4 @@
-# @alex-buelvas/react-ui-components
+# @lzzjokerzzl/react-ui-components
 
 A comprehensive React UI component library with animations, built with TypeScript and Tailwind CSS.
 
@@ -16,20 +16,20 @@ A comprehensive React UI component library with animations, built with TypeScrip
 ## Installation
 
 ```bash
-npm install @alex-buelvas/react-ui-components
+npm install @lzzjokerzzl/react-ui-components
 # or
-yarn add @alex-buelvas/react-ui-components
-# or  
-pnpm add @alex-buelvas/react-ui-components
+yarn add @lzzjokerzzl/react-ui-components
 # or
-bun add @alex-buelvas/react-ui-components
+pnpm add @lzzjokerzzl/react-ui-components
+# or
+bun add @lzzjokerzzl/react-ui-components
 ```
 
 ## Quick Start
 
 ```tsx
-import { Button, Badge, Modal } from '@alex-buelvas/react-ui-components';
-import '@alex-buelvas/react-ui-components/styles';
+import { Button, Badge, Modal } from "@lzzjokerzzl/react-ui-components";
+import "@lzzjokerzzl/react-ui-components/styles";
 
 function App() {
   return (
@@ -45,22 +45,41 @@ function App() {
 ## Components
 
 ### Basic Components
+
+- **Accordion** - Collapsible content sections
+- **Autocomplete** - Search input with suggestions
 - **Avatar** - User profile pictures with initials fallback
-- **Badge** - Notification indicators and labels  
+- **Badge** - Notification indicators and labels
 - **Button** - Interactive buttons with multiple variants
+- **Card** - Content containers with various styles  
+- **Checkbox** - Checkbox inputs with custom styling
 - **Chip** - Compact elements for labels and filters
 - **Image** - Optimized images with loading states
 - **Input** - Form inputs with validation states
+- **Pagination** - Page navigation controls
 - **Progress** - Progress indicators and loading bars
 - **Spinner** - Loading spinners with different styles
 - **Switch** - Toggle switches for boolean values
+- **Toast** - Notification messages and alerts
+- **Tooltip** - Contextual information overlays
+- **User** - User profile display components
 
 ### Layout & Navigation
+
+- **Breadcrumb** - Navigation breadcrumbs with router support
 - **Modal** - Overlay dialogs and popups
 - **Navbar** - Navigation bars and headers
+- **Sidebar** - Collapsible sidebar navigation with router integration
 - **Table** - Data tables with sorting and pagination
 
+### Router Components
+
+- **LibraryLink** - Enhanced Link component with active state management
+- **Navigation** - Navigation components with React Router integration
+- **useLibraryNavigation** - Hook for programmatic navigation
+
 ### 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
@@ -70,7 +89,7 @@ function App() {
 ### Animated Containers
 
 ```tsx
-import { FadeContainer, SlideContainer, BounceContainer } from '@alex-buelvas/react-ui-components';
+import { FadeContainer, SlideContainer, BounceContainer } from '@lzzjokerzzl/react-ui-components';
 
 <FadeContainer triggerOnce>
   <h1>This fades in when visible</h1>
@@ -88,21 +107,21 @@ import { FadeContainer, SlideContainer, BounceContainer } from '@alex-buelvas/re
 ### Text Animations
 
 ```tsx
-import { TypeWriter, RevealText, CounterText } from '@alex-buelvas/react-ui-components';
+import { TypeWriter, RevealText, CounterText } from '@lzzjokerzzl/react-ui-components';
 
-<TypeWriter 
-  text="Hello, World!" 
+<TypeWriter
+  text="Hello, World!"
   speed={100}
   showCursor
 />
 
-<RevealText 
+<RevealText
   text="Revealing word by word"
   mode="word"
   preset="elegant"
 />
 
-<CounterText 
+<CounterText
   from={0}
   to={1000}
   duration={2000}
@@ -113,28 +132,28 @@ import { TypeWriter, RevealText, CounterText } from '@alex-buelvas/react-ui-comp
 ### Interactive Components
 
 ```tsx
-import { Modal, useModal, Switch, Progress } from '@alex-buelvas/react-ui-components';
+import {
+  Modal,
+  useModal,
+  Switch,
+  Progress,
+} from "@lzzjokerzzl/react-ui-components";
 
 function Example() {
   const { isOpen, open, close } = useModal();
   const [enabled, setEnabled] = useState(false);
-  
+
   return (
     <>
-      <Switch 
+      <Switch
         checked={enabled}
         onChange={setEnabled}
         size="lg"
         color="primary"
       />
-      
-      <Progress 
-        value={75}
-        variant="gradient"
-        size="md"
-        showLabel
-      />
-      
+
+      <Progress value={75} variant="gradient" size="md" showLabel />
+
       <Modal isOpen={isOpen} onClose={close}>
         <h2>Modal Content</h2>
       </Modal>
@@ -143,12 +162,156 @@ function Example() {
 }
 ```
 
+## Router Integration
+
+The library includes router components that integrate seamlessly with React Router while maintaining backward compatibility.
+
+### Setup
+
+For router functionality, install React Router as a peer dependency:
+
+```bash
+npm install react-router
+# or
+yarn add react-router
+```
+
+### Navigation Components
+
+#### Breadcrumb with Router Support
+
+```tsx
+import { Breadcrumb, BreadcrumbItem } from '@lzzjokerzzl/react-ui-components';
+
+function Navigation() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbItem to="/">Home</BreadcrumbItem>
+      <BreadcrumbItem to="/products">Products</BreadcrumbItem>
+      <BreadcrumbItem isCurrent>Laptop</BreadcrumbItem>
+    </Breadcrumb>
+  );
+}
+```
+
+#### Sidebar Navigation
+
+```tsx
+import { 
+  Sidebar, 
+  SidebarHeader, 
+  SidebarContent, 
+  SidebarItem, 
+  SidebarFooter 
+} from '@lzzjokerzzl/react-ui-components';
+
+function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <h2>My App</h2>
+      </SidebarHeader>
+      
+      <SidebarContent>
+        <SidebarItem to="/dashboard" icon={<DashboardIcon />}>
+          Dashboard
+        </SidebarItem>
+        <SidebarItem to="/profile" icon={<ProfileIcon />}>
+          Profile
+        </SidebarItem>
+        <SidebarItem to="/settings" icon={<SettingsIcon />}>
+          Settings
+        </SidebarItem>
+      </SidebarContent>
+      
+      <SidebarFooter>
+        <SidebarItem to="/logout" icon={<LogoutIcon />}>
+          Logout
+        </SidebarItem>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+```
+
+#### LibraryLink Component
+
+```tsx
+import { LibraryLink } from '@lzzjokerzzl/react-ui-components';
+
+function CustomNavigation() {
+  return (
+    <nav>
+      <LibraryLink 
+        to="/dashboard" 
+        activeClassName="text-blue-500 font-bold"
+        exact
+      >
+        Dashboard
+      </LibraryLink>
+      
+      <LibraryLink 
+        to="/profile" 
+        activeClassName="text-blue-500 font-bold"
+      >
+        Profile
+      </LibraryLink>
+    </nav>
+  );
+}
+```
+
+#### Programmatic Navigation
+
+```tsx
+import { useLibraryNavigation } from '@lzzjokerzzl/react-ui-components';
+
+function MyComponent() {
+  const { navigate, goBack, goForward } = useLibraryNavigation();
+  
+  const handleSaveAndRedirect = async () => {
+    await saveData();
+    navigate('/success', { replace: true });
+  };
+  
+  return (
+    <div>
+      <button onClick={() => navigate('/profile')}>
+        Go to Profile
+      </button>
+      <button onClick={goBack}>
+        Go Back
+      </button>
+      <button onClick={handleSaveAndRedirect}>
+        Save and Continue
+      </button>
+    </div>
+  );
+}
+```
+
+### Backward Compatibility
+
+All navigation components support both old (`href`) and new (`to`) props:
+
+```tsx
+// Old way (still supported)
+<BreadcrumbItem href="/home">Home</BreadcrumbItem>
+<SidebarItem href="/dashboard">Dashboard</SidebarItem>
+
+// New way (recommended for React Router integration)
+<BreadcrumbItem to="/home">Home</BreadcrumbItem>
+<SidebarItem to="/dashboard">Dashboard</SidebarItem>
+```
+
+When both props are provided, `to` takes precedence, allowing for gradual migration.
+
 ## 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';
+import "@lzzjokerzzl/react-ui-components/styles";
 ```
 
 ## TypeScript Support
@@ -156,18 +319,19 @@ import '@alex-buelvas/react-ui-components/styles';
 All components are built with TypeScript and include comprehensive type definitions:
 
 ```tsx
-import type { 
-  ButtonProps, 
-  ModalProps, 
+import type {
+  ButtonProps,
+  ModalProps,
   AnimatedContainerConfig,
-  TextAnimationPreset 
-} from '@alex-buelvas/react-ui-components';
+  TextAnimationPreset,
+} from "@lzzjokerzzl/react-ui-components";
 ```
 
 ## Requirements
 
 - React >= 18.0.0
 - React DOM >= 18.0.0
+- React Router >= 6.0.0 (optional, for router components)
 
 ## License