@lzzjokerzzl/react-ui-components 1.4.8 → 1.4.9

package/README.md

@@ -1,6 +1,6 @@
 # @lzzjokerzzl/react-ui-components
 
-A comprehensive React UI component library with animations, built with TypeScript and Tailwind CSS.
+A comprehensive React UI component library with animations, built with TypeScript and Tailwind CSS. Compatible with React and Next.js.
 
 ## Features
 
@@ -12,6 +12,7 @@ A comprehensive React UI component library with animations, built with TypeScrip
 - ♿ **Accessible**: ARIA compliant components
 - 🎭 **Customizable**: Flexible styling with variants
 - 🚀 **Performance**: Optimized for production
+- ⚛️ **Framework Compatible**: Works with React and Next.js
 
 ## Installation
 
@@ -66,18 +67,12 @@ function App() {
 
 ### Layout & Navigation
 
-- **Breadcrumb** - Navigation breadcrumbs with router support
+- **Breadcrumb** - Navigation breadcrumbs
 - **Modal** - Overlay dialogs and popups
 - **Navbar** - Navigation bars and headers
-- **Sidebar** - Collapsible sidebar navigation with router integration
+- **Sidebar** - Collapsible sidebar navigation
 - **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
@@ -162,23 +157,7 @@ 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
+### Breadcrumb Navigation
 
 ```tsx
 import { Breadcrumb, BreadcrumbItem } from '@lzzjokerzzl/react-ui-components';
@@ -186,19 +165,20 @@ import { Breadcrumb, BreadcrumbItem } from '@lzzjokerzzl/react-ui-components';
 function Navigation() {
   return (
     <Breadcrumb>
-      <BreadcrumbItem to="/">Home</BreadcrumbItem>
-      <BreadcrumbItem to="/products">Products</BreadcrumbItem>
+      <BreadcrumbItem href="/">Home</BreadcrumbItem>
+      <BreadcrumbItem href="/products">Products</BreadcrumbItem>
       <BreadcrumbItem isCurrent>Laptop</BreadcrumbItem>
     </Breadcrumb>
   );
 }
 ```
 
-#### Sidebar Navigation
+### Sidebar Navigation
 
 ```tsx
 import { 
   Sidebar, 
+  SidebarProvider,
   SidebarHeader, 
   SidebarContent, 
   SidebarItem, 
@@ -207,105 +187,35 @@ import {
 
 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>
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <h2>My App</h2>
+        </SidebarHeader>
+        
+        <SidebarContent>
+          <SidebarItem href="/dashboard" icon={<DashboardIcon />}>
+            Dashboard
+          </SidebarItem>
+          <SidebarItem href="/profile" icon={<ProfileIcon />}>
+            Profile
+          </SidebarItem>
+          <SidebarItem href="/settings" icon={<SettingsIcon />}>
+            Settings
+          </SidebarItem>
+        </SidebarContent>
+        
+        <SidebarFooter>
+          <SidebarItem href="/logout" icon={<LogoutIcon />}>
+            Logout
+          </SidebarItem>
+        </SidebarFooter>
+      </Sidebar>
+    </SidebarProvider>
   );
 }
 ```
 
-#### 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:
@@ -323,7 +233,6 @@ import type {
   ButtonProps,
   ModalProps,
   AnimatedContainerConfig,
-  TextAnimationPreset,
 } from "@lzzjokerzzl/react-ui-components";
 ```
 
@@ -331,7 +240,6 @@ import type {
 
 - React >= 18.0.0
 - React DOM >= 18.0.0
-- React Router >= 6.0.0 (optional, for router components)
 
 ## License