@moontra/moonui 2.3.2 → 2.3.4

package/README.md

@@ -1,463 +1,374 @@
-# MoonUI - Modern React Component Library
+# MoonUI 🌙
 
-[![npm version](https://img.shields.io/npm/v/@moontra/moonui.svg)](https://www.npmjs.com/package/@moontra/moonui)
+A premium React component library built for modern web applications. MoonUI provides beautifully designed, accessible, and highly customizable components that help you build stunning user interfaces faster.
+
+[![npm version](https://badge.fury.io/js/%40moontra%2Fmoonui.svg)](https://badge.fury.io/js/%40moontra%2Fmoonui)
 [![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/)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+
+## ✨ Features
+
+### 🎨 **Beautiful Design**
+- **50+ Premium Components** - Carefully crafted with attention to detail
+- **Modern Aesthetics** - Clean, minimalist design that works everywhere
+- **Consistent Typography** - Harmonious text hierarchy and spacing
+- **Smooth Animations** - Delightful micro-interactions powered by Framer Motion
 
-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.
+### 🌙 **Dark Mode Ready**
+- **Built-in Dark Mode** - Seamless light/dark theme switching
+- **CSS Variables** - Easy customization with design tokens
+- **Theme Provider** - Consistent theming across your application
+- **Custom Themes** - Create your own color palettes
 
-## Features
+### ♿ **Accessibility First**
+- **WCAG Compliant** - Meets accessibility standards
+- **Keyboard Navigation** - Full keyboard support
+- **Screen Reader Friendly** - Proper ARIA labels and descriptions
+- **Focus Management** - Intuitive focus handling
 
-- 🎨 **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
+### 🔧 **Developer Experience**
+- **TypeScript** - Full type safety and IntelliSense
+- **Tree Shaking** - Import only what you use
+- **Zero Config** - Works out of the box
+- **CLI Tool** - Easy installation with `moonui` CLI
+- **Storybook** - Interactive component documentation
 
-## Installation
+### 📱 **Responsive & Performance**
+- **Mobile First** - Optimized for all screen sizes
+- **Lightweight** - Minimal bundle impact
+- **React 18+ Compatible** - Latest React features
+- **SSR Ready** - Next.js and other SSR frameworks
+
+## 🚀 Quick Start
+
+### Installation
 
 ```bash
+# Install the package
 npm install @moontra/moonui
-```
 
-```bash
-yarn add @moontra/moonui
+# Or use the CLI (recommended)
+npx @moontra/moonui-cli@latest init
 ```
 
-```bash
-pnpm add @moontra/moonui
-```
+### CDN Usage (Browser/Artifacts)
 
-## Setup
+For quick prototyping or artifact environments:
 
-### 1. Install dependencies
+```html
+<!-- Dependencies -->
+<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 
-MoonUI requires the following peer dependencies:
+<!-- MoonUI -->
+<script src="https://cdn.jsdelivr.net/npm/@moontra/moonui@2.3.2/dist/index.global.js"></script>
 
-```bash
-npm install tailwindcss
+<script>
+  const { Button, Card } = window.MoonUI;
+  
+  function App() {
+    return React.createElement(Card, null,
+      React.createElement(Button, { variant: 'default' }, 'Hello MoonUI!')
+    );
+  }
+  
+  ReactDOM.render(React.createElement(App), document.getElementById('root'));
+</script>
 ```
 
-### 2. Add Tailwind CSS configuration
+### Setup
 
-Add MoonUI's Tailwind CSS configuration to your `tailwind.config.js`:
+1. **Configure Tailwind CSS** (required)
 
-```js
+```javascript
 // tailwind.config.js
-/** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
   content: [
-    // ...
-    "./node_modules/moonui/dist/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@moontra/moonui/**/*.{js,mjs}"
   ],
   theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
+    extend: {},
   },
+  plugins: [],
 }
 ```
 
-### 3. Add CSS variables
-
-Add the following CSS variables to your global CSS file:
+2. **Import styles** (in your main CSS file)
 
 ```css
+@import '@moontra/moonui/styles';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+```
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+3. **Start using components**
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+```jsx
+import { Button, Card, Input } from '@moontra/moonui';
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+function App() {
+  return (
+    <Card className="p-6">
+      <h1 className="text-2xl font-bold mb-4">Welcome to MoonUI</h1>
+      <div className="space-y-4">
+        <Input placeholder="Enter your name" />
+        <Button variant="default" size="lg">
+          Get Started
+        </Button>
+      </div>
+    </Card>
+  );
+}
+```
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+## 📚 Components
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+### Layout & Structure
+- **Card** - Flexible content containers
+- **Separator** - Visual content dividers
+- **AspectRatio** - Responsive aspect ratio containers
+- **ScrollArea** - Custom scrollable areas
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+### Navigation
+- **Breadcrumb** - Hierarchical navigation
+- **Pagination** - Page navigation controls
+- **Tabs** - Tabbed interfaces
+- **Navigation Menu** - Complex navigation structures
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+### Form Controls
+- **Button** - Interactive buttons with variants
+- **Input** - Text input fields
+- **Textarea** - Multi-line text input
+- **Select** - Dropdown selections
+- **Checkbox** - Boolean selections
+- **RadioGroup** - Single choice selections
+- **Switch** - Toggle controls
+- **Slider** - Range inputs
+- **Label** - Form field labels
 
-    --radius: 0.5rem;
-  }
+### Feedback & Overlays
+- **Dialog** - Modal dialogs
+- **AlertDialog** - Confirmation dialogs
+- **Toast** - Notification messages
+- **Alert** - Inline notifications
+- **Tooltip** - Contextual information
+- **Popover** - Floating content panels
+- **HoverCard** - Hover-triggered content
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+### Data Display
+- **Avatar** - User profile images
+- **Badge** - Status indicators
+- **Progress** - Loading indicators
+- **Skeleton** - Loading placeholders
+- **Table** - Structured data display
+- **DataTable** - Advanced data tables
+- **Accordion** - Collapsible content
+
+### Media & Graphics
+- **Calendar** - Date selection
+- **DatePicker** - Date input controls
+- **ColorPicker** - Color selection
+- **FileUpload** - File upload interface
+
+### Advanced
+- **Command** - Command palette interface
+- **Collapsible** - Expandable content
+- **DropdownMenu** - Context menus
+- **Menubar** - Application menu bars
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+## 🎨 Theming
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+### CSS Variables
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+MoonUI uses CSS variables for easy theming:
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  /* ... more variables */
+}
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  /* ... dark theme variables */
+}
+```
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+### Theme Provider
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+```jsx
+import { ThemeProvider } from '@moontra/moonui/theme';
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
+function App() {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system">
+      <YourApp />
+    </ThemeProvider>
+  );
 }
+```
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+### Custom Colors
+
+```css
+:root {
+  --primary: 142 76% 36%; /* Custom green */
+  --secondary: 210 40% 95%;
 }
 ```
 
-## Installation & Usage
+## 🔧 CLI Tool
 
-### Recommended: Use MoonUI CLI
-
-The best way to use MoonUI is through our CLI tool, which gives you full control over the components:
+The MoonUI CLI helps you add components easily:
 
 ```bash
-# Install CLI globally
-npm install -g @moontra/moonui-cli
-
 # Initialize MoonUI in your project
-moonui init
+npx @moontra/moonui-cli@latest init
+
+# Add specific components
+npx @moontra/moonui-cli@latest add button
+npx @moontra/moonui-cli@latest add card input
 
-# Add components
-moonui add button card badge
+# Add multiple components
+npx @moontra/moonui-cli@latest add button card input dialog
 ```
 
-Then import from your project:
-```tsx
-import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
+## 📖 Documentation
 
-function App() {
-  return (
-    <Card>
-      <h2>Welcome to MoonUI</h2>
-      <p>Build beautiful interfaces with ease</p>
-      <Button variant="primary">Get Started</Button>
-      <Badge>New</Badge>
-    </Card>
-  )
+- **🌐 Website**: [moonui.dev](https://moonui.dev)
+- **📚 Components**: [moonui.dev/docs/components](https://moonui.dev/docs/components)
+- **🎨 Theming**: [moonui.dev/docs/theming](https://moonui.dev/docs/theming)
+- **🔧 CLI**: [moonui.dev/docs/cli](https://moonui.dev/docs/cli)
+
+## 🤖 AI Integration
+
+MoonUI includes MCP (Model Context Protocol) support for AI assistants:
+
+```bash
+# Install MCP Server
+npm install -g @moontra/moonui-mcp-server
+
+# Configure in Claude Desktop
+{
+  "mcpServers": {
+    "moonui": {
+      "command": "npx",
+      "args": ["@moontra/moonui-mcp-server"]
+    }
+  }
 }
 ```
 
-### Alternative: Direct NPM Usage
+AI assistants can then help you:
+- 🎯 Find the right components for your use case
+- 🔧 Generate component code automatically
+- 🐛 Fix import issues
+- 🎨 Configure theming and customization
+- 📱 Detect environment (CDN vs NPM) automatically
 
-You can also use components directly from NPM (limited customization):
+## 💼 Pro Version
 
-```tsx
-import { Button, Card, Badge } from '@moontra/moonui'
-```
+Upgrade to MoonUI Pro for advanced components:
 
-### Advanced Examples
+- **DataTable** - Advanced data grids with sorting, filtering, pagination
+- **Charts** - Beautiful data visualizations
+- **RichTextEditor** - WYSIWYG editor
+- **FormWizard** - Multi-step forms
+- **Calendar** - Advanced date/time pickers
+- **DragDropList** - Sortable lists
+- **TreeView** - Hierarchical data display
+- **Timeline** - Event timelines
+- **VideoPlayer** - Custom video controls
+- **CodeEditor** - Syntax-highlighted code input
 
-#### Interactive Components
-```tsx
-import { 
-  MagneticButton, 
-  SpotlightCard, 
-  GestureDrawer,
-  SwipeableCard 
-} from '@moontra/moonui'
+[Learn more about Pro →](https://moonui.dev/pricing)
 
-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>
-  )
-}
+## 🛠️ Development
+
+### Requirements
+
+- Node.js 18+ 
+- React 18+
+- TypeScript 5+
+- Tailwind CSS 3+
+
+### Local Development
+
+```bash
+git clone https://github.com/moontra/moonui
+cd moonui/packages/moonui
+npm install
+npm run dev
 ```
 
-#### 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}` 
-  }))
+### Building
 
-  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>
-  )
-}
+```bash
+npm run build      # Build for production
+npm run build:dts  # Generate type definitions
+npm run lint       # Lint code
+npm run test       # Run tests
 ```
 
-## Available Components (50+ Components)
+## 🤝 Contributing
 
-### 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
+We welcome contributions! See our [Contributing Guide](CONTRIBUTING.md) for details.
 
-### 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
+### Development Workflow
 
-### Navigation
-- **Breadcrumb** - Navigation breadcrumbs
-- **Dropdown Menu** - Context menus
-- **Navigation Menu** - Main navigation
-- **Pagination** - Page navigation controls
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests and documentation
+5. Submit a pull request
 
-### 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
-
-Visit [moonui.dev/docs](https://moonui.dev/docs) for full documentation.
-
-## Customization
-
-MoonUI components are built with customization in mind. You can easily customize them using:
-
-### 1. CSS Variables
-```css
-:root {
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-}
-```
+### Component Guidelines
 
-### 2. Tailwind Classes
-```tsx
-<Button className="bg-blue-500 hover:bg-blue-600">
-  Custom Button
-</Button>
-```
+- Follow accessibility best practices
+- Include TypeScript types
+- Add Storybook stories
+- Write comprehensive tests
+- Document props and usage
 
-### 3. Component Variants
-```tsx
-<Button variant="destructive" size="lg">
-  Delete
-</Button>
-```
+## 📦 Package Details
 
-## Theme Provider
+- **Bundle Size**: ~460KB (ESM), ~485KB (CJS)
+- **CDN Bundle**: ~742KB (includes all dependencies)
+- **Type Definitions**: Full TypeScript support
+- **Tree Shaking**: Import individual components
+- **Side Effects**: false (webpack optimization)
 
-Use the ThemeProvider to enable theme support:
+## 🔗 Ecosystem
 
-```tsx
-import { ThemeProvider } from '@moontra/moonui'
+- **[@moontra/moonui-pro](https://npmjs.com/package/@moontra/moonui-pro)** - Premium components
+- **[@moontra/moonui-cli](https://npmjs.com/package/@moontra/moonui-cli)** - Command line tool
+- **[@moontra/moonui-mcp-server](https://npmjs.com/package/@moontra/moonui-mcp-server)** - AI integration
 
-function App() {
-  return (
-    <ThemeProvider defaultTheme="dark">
-      {/* Your app */}
-    </ThemeProvider>
-  )
-}
-```
+## 📄 License
+
+Licensed under the [MIT License](LICENSE).
+
+## 🙏 Acknowledgments
 
-## Requirements
+Built with:
+- [React](https://reactjs.org/)
+- [Radix UI](https://radix-ui.com/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Framer Motion](https://framer.com/motion/)
+- [Lucide Icons](https://lucide.dev/)
 
-- React 18.0.0 or higher
-- Tailwind CSS 3.0.0 or higher
+---
 
-## License
+<div align="center">
 
-MIT License - see the [LICENSE](LICENSE) file for details.
+**[Website](https://moonui.dev) • [Documentation](https://moonui.dev/docs) • [Components](https://moonui.dev/docs/components) • [GitHub](https://github.com/moontra/moonui)**
 
-## Support
+Made with ❤️ by the MoonUI team
 
-- 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)
+</div>