@moontra/moonui 0.1.1 → 2.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 MoonUI
+
+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

@@ -1,24 +1,33 @@
-# MoonUI
+# MoonUI - Modern React Component Library
 
-MoonUI is a modern UI component library for React applications. It provides a comprehensive set of accessible, customizable, and reusable components that make building modern web applications faster and easier.
+[![npm version](https://img.shields.io/npm/v/@moontra/moonui.svg)](https://www.npmjs.com/package/@moontra/moonui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+A premium React component library built on top of Radix UI and Tailwind CSS. Fully customizable, accessible, and production-ready components for modern web applications.
 
 ## Features
 
-- 🌙 **Modern Design**: Beautiful, clean UI components with a consistent design language
-- 🎨 **Customizable**: Easily customize components with variants and Tailwind CSS
-- ♿ **Accessible**: Built on top of Radix UI primitives for robust accessibility
-- 🔍 **Type Safe**: Written in TypeScript with comprehensive type definitions
-- 🌗 **Dark Mode**: Built-in dark mode support for all components
-- 📱 **Responsive**: All components are designed to work on any device size
+- 🎨 **Beautiful by default** - Carefully crafted components with modern design
+- 🌙 **Dark mode ready** - Built-in dark mode support with smooth transitions
+- ♿ **Fully accessible** - WAI-ARIA compliant components built on Radix UI
+- 🎯 **TypeScript first** - Written in TypeScript with complete type definitions
+- 🎨 **Highly customizable** - Easy to customize with Tailwind CSS
+- 📦 **Tree-shakeable** - Only import what you need
+- 🚀 **Production ready** - Used in production by many companies
 
 ## Installation
 
 ```bash
-npm install moonui
-# or
-yarn add moonui
-# or
-pnpm add moonui
+npm install @moontra/moonui
+```
+
+```bash
+yarn add @moontra/moonui
+```
+
+```bash
+pnpm add @moontra/moonui
 ```
 
 ## Setup
@@ -174,42 +183,281 @@ Add the following CSS variables to your global CSS file:
 }
 ```
 
-## Usage
+## Installation & Usage
+
+### Recommended: Use MoonUI CLI
+
+The best way to use MoonUI is through our CLI tool, which gives you full control over the components:
+
+```bash
+# Install CLI globally
+npm install -g @moontra/moonui-cli
+
+# Initialize MoonUI in your project
+moonui init
+
+# Add components
+moonui add button card badge
+```
 
-```jsx
-import { Button } from 'moonui';
+Then import from your project:
+```tsx
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 
-export default function App() {
+function App() {
   return (
-    <Button variant="default">
-      Click me
-    </Button>
-  );
+    <Card>
+      <h2>Welcome to MoonUI</h2>
+      <p>Build beautiful interfaces with ease</p>
+      <Button variant="primary">Get Started</Button>
+      <Badge>New</Badge>
+    </Card>
+  )
 }
 ```
 
-## Components
+### Alternative: Direct NPM Usage
+
+You can also use components directly from NPM (limited customization):
+
+```tsx
+import { Button, Card, Badge } from '@moontra/moonui'
+```
+
+### Advanced Examples
+
+#### Interactive Components
+```tsx
+import { 
+  MagneticButton, 
+  SpotlightCard, 
+  GestureDrawer,
+  SwipeableCard 
+} from '@moontra/moonui'
 
-MoonUI provides a wide range of components:
+function InteractiveDemo() {
+  return (
+    <div className="space-y-6">
+      {/* Magnetic Button with mouse following effect */}
+      <MagneticButton strength={0.3}>
+        Hover for magnetic effect
+      </MagneticButton>
+
+      {/* Card with spotlight effect */}
+      <SpotlightCard>
+        <h3>Interactive Card</h3>
+        <p>Move your mouse around to see the spotlight effect</p>
+      </SpotlightCard>
+
+      {/* Swipeable Card for mobile */}
+      <SwipeableCard onSwipeLeft={() => console.log('Swiped left')}>
+        <p>Swipe me on mobile devices</p>
+      </SwipeableCard>
+    </div>
+  )
+}
+```
 
-- **Form Components**: Button, Input, Checkbox, Radio, Select, Switch, etc.
-- **Layout Components**: Card, Dialog, Accordion, Sheet, Popover, etc.
-- **Navigation Components**: Tabs, Breadcrumb, DropdownMenu, NavigationMenu, etc.
-- **Data Display Components**: Badge, Table, Avatar, Progress, Skeleton, etc.
+#### Performance Components
+```tsx
+import { 
+  VirtualList, 
+  MemoryEfficientData,
+  LazyComponent,
+  OptimizedImage 
+} from '@moontra/moonui'
+
+function PerformanceDemo() {
+  const largeDataset = Array.from({ length: 10000 }, (_, i) => ({ 
+    id: i, 
+    name: `Item ${i}` 
+  }))
+
+  return (
+    <div>
+      {/* Virtualized list for large datasets */}
+      <VirtualList
+        items={largeDataset}
+        itemHeight={50}
+        renderItem={({ item }) => <div key={item.id}>{item.name}</div>}
+      />
+
+      {/* Memory efficient data handling */}
+      <MemoryEfficientData
+        data={largeDataset}
+        chunkSize={100}
+        renderChunk={(chunk) => (
+          <div>{chunk.map(item => <div key={item.id}>{item.name}</div>)}</div>
+        )}
+      />
+
+      {/* Lazy loaded component */}
+      <LazyComponent>
+        <OptimizedImage 
+          src="/large-image.jpg" 
+          alt="Optimized image"
+          loading="lazy"
+        />
+      </LazyComponent>
+    </div>
+  )
+}
+```
+
+## Available Components (50+ Components)
+
+### Core Components
+- **Button** - Multiple variants with loading states
+- **Card** - Flexible container with header/footer support
+- **Badge** - Status indicators and labels
+- **Input** - Text input with validation
+- **Textarea** - Multi-line text input
+- **Label** - Form labels with accessibility
+- **Separator** - Visual dividers
+
+### Form Components
+- **Select** - Dropdown selection with search
+- **Switch** - Toggle switches
+- **Checkbox** - Single and group checkboxes
+- **RadioGroup** - Radio button groups
+- **Slider** - Range and single value sliders
+- **Color Picker** - Color selection component
+- **Date Picker** - Calendar-based date selection
+
+### Layout Components
+- **Dialog** - Modal dialogs and overlays
+- **Sheet** - Slide-out panels
+- **Tabs** - Tabbed content areas
+- **Accordion** - Collapsible content sections
+- **Collapsible** - Expandable content
+- **Command** - Command palette interface
+- **Aspect Ratio** - Responsive aspect ratio containers
+
+### Data Display
+- **Alert** - Notification and status messages
+- **Avatar** - User profile images with fallbacks
+- **Progress** - Progress bars and indicators
+- **Skeleton** - Loading state placeholders
+- **Table** - Data tables with sorting
+- **Data Table** - Advanced data grid
+- **Tooltip** - Contextual help text
+- **Calendar** - Date display and navigation
+
+### Navigation
+- **Breadcrumb** - Navigation breadcrumbs
+- **Dropdown Menu** - Context menus
+- **Navigation Menu** - Main navigation
+- **Pagination** - Page navigation controls
+
+### Feedback & Overlays
+- **Toast** - Temporary notifications
+- **Popover** - Floating content containers
+- **Hover Card** - Hover-triggered content
+
+### Interactive Components
+- **Animated Button** - Buttons with micro-interactions
+- **Draggable List** - Drag and drop sortable lists
+- **Floating Action Button** - FAB with expandable menu
+- **Gesture Drawer** - Touch-gesture driven drawers
+- **Hover Card 3D** - 3D hover effects
+- **Magnetic Button** - Mouse-following magnetic effects
+- **Spotlight Card** - Interactive spotlight effects
+- **Swipeable Card** - Touch swipe interactions
+- **Pinch Zoom** - Touch zoom functionality
+
+### Performance & Utility
+- **Error Boundary** - React error boundaries
+- **File Upload** - File upload with progress
+- **GitHub Stars** - GitHub repository stats
+- **Health Check** - System health monitoring
+- **Lazy Component** - Code splitting support
+- **Locked Component** - Access control wrapper
+- **Memory Efficient Data** - Optimized data handling
+- **Optimized Image** - Performance-optimized images
+- **Performance Debugger** - Performance analysis tools
+- **Performance Monitor** - Real-time performance tracking
+- **Simple Editor** - Basic text editor
+- **Rich Text Editor** - Advanced WYSIWYG editor
+- **Virtual List** - Virtualized large lists
+- **Moon Logo** - MoonUI branding component
+
+### Specialized
+- **Toggle** - Toggle switches with states
+
+## Pro Components
+
+Looking for more advanced enterprise-grade components? Check out [MoonUI Pro](https://moonui.dev/pro) for:
+
+- 📊 **Advanced Data Table** - Enterprise data grid with filtering, sorting, export
+- 📈 **Advanced Charts** - Interactive charts with real-time data
+- 📅 **Calendar Pro** - Full-featured calendar with events and scheduling
+- 📝 **Rich Text Editor Pro** - WYSIWYG editor with AI assistance and collaboration
+- 📤 **File Upload Pro** - Advanced file handling with cloud storage
+- 🗂️ **Kanban Board** - Drag & drop project management
+- 📍 **Timeline** - Interactive project timelines
+- 🚀 **Memory Efficient Data** - Large dataset handling
+- 📊 **Virtual List Pro** - Performance virtualization
+- And many more enterprise features...
 
 ## Documentation
 
-For full documentation, visit [moonui.com/docs](https://moonui.com/docs).
+Visit [moonui.dev/docs](https://moonui.dev/docs) for full documentation.
 
-## CLI Tool
+## Customization
 
-MoonUI also provides a CLI tool for easy integration:
+MoonUI components are built with customization in mind. You can easily customize them using:
 
-```bash
-npm install -g @moonui/cli
-moonui init
+### 1. CSS Variables
+```css
+:root {
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+}
+```
+
+### 2. Tailwind Classes
+```tsx
+<Button className="bg-blue-500 hover:bg-blue-600">
+  Custom Button
+</Button>
+```
+
+### 3. Component Variants
+```tsx
+<Button variant="destructive" size="lg">
+  Delete
+</Button>
 ```
 
+## Theme Provider
+
+Use the ThemeProvider to enable theme support:
+
+```tsx
+import { ThemeProvider } from '@moontra/moonui'
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark">
+      {/* Your app */}
+    </ThemeProvider>
+  )
+}
+```
+
+## Requirements
+
+- React 18.0.0 or higher
+- Tailwind CSS 3.0.0 or higher
+
 ## License
 
-MIT © MoonUI
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Support
+
+- Documentation: [moonui.dev/docs](https://moonui.dev/docs)
+- Discord: [Join our community](https://discord.gg/moonui)
+- GitHub Issues: [Report bugs](https://github.com/moontra/moonui/issues)