@moontra/moonui-pro 3.4.43 → 3.4.44

package/README.md

@@ -2,116 +2,160 @@
 
 Premium React components for advanced web applications. MoonUI Pro extends the base MoonUI library with sophisticated, enterprise-grade components designed for complex use cases and professional applications.
 
-[![npm version](https://badge.fury.io/js/%40moontra%2Fmoonui-pro.svg)](https://badge.fury.io/js/%40moontra%2Fmoonui-pro)
+[![npm version](https://badge.fury.io/js/%40moontra%2Fmoonui-pro.svg)](https://www.npmjs.com/package/@moontra/moonui-pro)
 [![License: Commercial](https://img.shields.io/badge/License-Commercial-red.svg)](https://moonui.dev/license)
 [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
 
+> **A valid license is required.** Without a build-time license token, Pro components render a lock screen instead of their content. See [Setup](#-setup) — it is three steps and all three are mandatory.
+
 ## ✨ What's Included
 
-### 📊 **Data & Analytics**
-- **Advanced DataTable** - Enterprise-grade tables with quick filters, faceted filters, enum auto-detection, custom filter accessors, virtualization, sorting, pagination, row selection, and export functionality
-- **Charts Library** - Beautiful data visualizations with Recharts integration
-- **Dashboard Widgets** - KPI cards, metrics displays, and analytics components
-- **TreeView** - Hierarchical data display with drag & drop
-- **Timeline** - Event timelines with rich content support
-
-### ✏️ **Rich Content & Editors**
-- **RichTextEditor** - WYSIWYG editor with markdown support
-- **CodeEditor** - Syntax-highlighted code input with multiple languages
-- **FormWizard** - Multi-step forms with validation and progress tracking
-- **JSONEditor** - Visual JSON editing with validation
-- **MarkdownEditor** - Live markdown editor with preview
-
-### 🎮 **Interactive & Gesture**
-- **DragDropList** - Sortable lists with smooth animations
-- **SwipeableCard** - Touch-friendly card components
-- **GestureDrawer** - Mobile-optimized drawer with gestures
-- **VirtualList** - High-performance virtualized lists
-- **InfiniteScroll** - Lazy loading with infinite scrolling
-
-### 📅 **Advanced Date & Time**
-- **DateRangePicker** - Powerful date range selection
-- **TimezonePicker** - Timezone selection with search
-- **RecurrencePicker** - Recurring event configuration
-- **EventCalendar** - Full-featured calendar with event management
-- **WeekView** - Week-based calendar layout
-
-### 🎨 **Media & Visualization**
-- **VideoPlayer** - Custom video player with controls
-- **ImageCropper** - Image cropping with aspect ratio controls
-- **ColorPalette** - Advanced color selection tools
-- **IconLibrary** - Comprehensive icon browser and picker
-- **ChartBuilder** - Interactive chart creation tool
-
-### 🔧 **Advanced UI Patterns**
-- **CommandPalette** - Keyboard-driven command interface
-- **Spotlight** - macOS-style search and command launcher
-- **SplitPane** - Resizable panel layouts
-- **Kanban** - Drag-and-drop board layouts
-- **NotificationCenter** - Advanced notification management
-
-## 🚀 Quick Start
-
-### Installation
+A selection of what ships in the package. The full, always-current component list lives at **[moonui.dev/docs](https://moonui.dev/docs)**.
+
+### 📊 Data & Analytics
+- **`DataTable`** — Enterprise table with search, faceted/quick filters, export, row selection, expandable rows and bulk actions
+- **`Table`** — Lower-level styled table primitives
+- **`AdvancedChart`**, **`ChartWidget`** — Data visualization built on Recharts
+- **`Timeline`** — Event timelines with rich content
+- **`Kanban`** — Drag-and-drop board layouts
+
+### ✏️ Editors & Forms
+- **`RichTextEditor`** — WYSIWYG editor
+- **`FormWizard`** — Multi-step forms with validation and progress tracking
+- **`ColorPicker`** — Color selection
+
+### 🎮 Interactive & Gesture
+- **`DraggableList`** — Sortable lists with smooth animations
+- **`SwipeableCard`** — Touch-friendly cards
+- **`GestureDrawer`** — Mobile-optimized drawer with gestures
+- **`VirtualList`**, **`SelectableVirtualList`** — High-performance virtualized lists
+- **`LazyList`**, **`AnimatedList`** — Lazy and animated list rendering
+
+### 📅 Calendar
+- **`Calendar`**, **`AdvancedCalendar`** — Date selection and event calendars
+
+### 🎨 Visual & Motion
+- **`BentoGrid`** — Modern bento-style layouts
+- **`Spotlight`** — Search and command launcher
+- **`ParallaxScroll`**, **`ScrollReveal`** — Scroll-driven effects
+- **`GridPattern`**, **`GridDistortion`** — Decorative backgrounds
+- **`Marquee`**, **`Meteors`** — Motion accents
+- **`LightboxProvider`** — Image lightbox
+
+### 🔤 Text Effects
+- **`GlitchText`**, **`ShinyText`**, **`TextReveal`**, **`Text3D`**
+
+## 🚀 Installation
 
 ```bash
-# Install MoonUI Pro
 npm install @moontra/moonui-pro
+```
+
+MoonUI Pro is self-contained — it ships its own primitives (`Button`, `Card`, `Badge`, `Input`, …), so the free `@moontra/moonui` package is **optional**. Install it too if you also want the MIT-licensed base library:
 
-# Ensure base MoonUI is installed
+```bash
 npm install @moontra/moonui
 ```
 
-### CDN Usage (Browser/Artifacts)
-
-For quick prototyping or artifact environments:
-
-```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>
-
-<!-- Base MoonUI -->
-<script src="https://cdn.jsdelivr.net/npm/@moontra/moonui@2.3.2/dist/index.global.js"></script>
-
-<!-- MoonUI Pro -->
-<script src="https://cdn.jsdelivr.net/npm/@moontra/moonui-pro@2.24.3/dist/index.global.js"></script>
-
-<script>
-  const { Button } = window.MoonUI;
-  const { DataTable, Charts } = window.MoonUIPro;
-  
-  function App() {
-    return React.createElement('div', null,
-      React.createElement(Button, null, 'Base Component'),
-      React.createElement(DataTable, { 
-        data: [], 
-        columns: [] 
-      }, 'Pro Component')
-    );
-  }
-  
-  ReactDOM.render(React.createElement(App), document.getElementById('root'));
-</script>
+## 🔐 Setup
+
+Pro access is resolved **at build time**, not per request. The flow is:
+
+```
+MOONUI_LICENSE_KEY  ──►  postinstall.cjs  ──►  .moonui-license-token  ──►  withMoonUIProToken
+   (build env)            (validates)          (base64 JSON)              (inlines into bundle)
+                                                                                  │
+                                                    MoonUIAuthProvider  ◄─────────┘
+                                                    (reads it at runtime)
 ```
 
-### Setup
+All three steps are required. Skip any one and every Pro component renders `ProLockScreen`.
 
-1. **Configure your license** (required for production)
+### 1. Provide your license key at build time
 
 ```bash
-# Set your license key
-export MOONUI_PRO_LICENSE="your-license-key"
+# CI / Docker / any build environment
+MOONUI_LICENSE_KEY=moonui_xxxxxxxxxxxx
+```
+
+`MOONUI_LICENSE_KEY` is the canonical name. `NEXT_PUBLIC_MOONUI_LICENSE_KEY`, `VITE_MOONUI_LICENSE_KEY` and `REACT_APP_MOONUI_LICENSE_KEY` are also accepted as fallbacks.
+
+### 2. Generate the token before the build
 
-# Or in your .env file
-MOONUI_PRO_LICENSE=your-license-key
+Package managers skip lifecycle scripts in many CI setups, so run the token generator explicitly:
+
+```json
+{
+  "scripts": {
+    "prebuild": "node node_modules/@moontra/moonui-pro/scripts/postinstall.cjs",
+    "build": "next build"
+  }
+}
+```
+
+### 3. Inline the token and mount the provider
+
+**Next.js** — wrap your config:
+
+```js
+// next.config.mjs
+import { withMoonUIProToken } from '@moontra/moonui-pro/next-config';
+
+export default withMoonUIProToken({
+  // ...your Next.js config
+});
 ```
 
-2. **Import and use components**
+**Vite** — add the plugin:
+
+```js
+// vite.config.js
+import moonUIProPlugin from '@moontra/moonui-pro/vite';
+
+export default {
+  plugins: [moonUIProPlugin()],
+};
+```
+
+Then wrap your app **once**, at the root:
 
 ```jsx
-import { Button, Card } from '@moontra/moonui';
-import { DataTable, Charts, RichTextEditor } from '@moontra/moonui-pro';
+// app/layout.tsx
+import { MoonUIAuthProvider } from '@moontra/moonui-pro';
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <MoonUIAuthProvider>{children}</MoonUIAuthProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+`MoonUIAuthProvider` takes no `licenseKey` prop — it reads the token that step 2 and 3 produced.
+
+> ⚠️ **Without the provider, `hasProAccess` is always `false`.** `useMoonUIAuth()` does not throw when no provider is mounted; it silently returns a free-plan state. That is the single most common cause of "my license is valid but everything is locked".
+
+### Deploying
+
+The token is written the same way on every platform — Vercel, Netlify, Docker, Kubernetes, Dokploy, or a bare server. Just make sure `MOONUI_LICENSE_KEY` is present **during the build**, not only at runtime.
+
+```dockerfile
+ARG MOONUI_LICENSE_KEY
+ENV MOONUI_LICENSE_KEY=$MOONUI_LICENSE_KEY
+RUN npm run build
+```
+
+> **Self-hosted gotcha:** if you build with `NODE_ENV=production`, npm skips `devDependencies`. Keep `autoprefixer`, `tailwindcss` and `postcss` in `dependencies`, or the build fails before the token ever matters.
+
+Full deployment matrix: **[moonui.dev/docs/authentication](https://moonui.dev/docs/authentication)**
+
+## 🧩 Usage
+
+```jsx
+import { MoonUIAuthProvider, DataTable, RichTextEditor, Card } from '@moontra/moonui-pro';
 
 function App() {
   const data = [
@@ -125,503 +169,216 @@ function App() {
   ];
 
   return (
-    <Card className="p-6">
-      <h1 className="text-2xl font-bold mb-4">MoonUI Pro Demo</h1>
-      
-      {/* Pro DataTable */}
-      <DataTable 
-        data={data} 
-        columns={columns}
-        features={{
-          sorting: true,
-          filtering: true,
-          pagination: true
-        }}
-      />
-      
-      {/* Pro Rich Text Editor */}
-      <RichTextEditor
-        placeholder="Start writing..."
-        className="mt-4"
-      />
-    </Card>
+    <MoonUIAuthProvider>
+      <Card className="p-6">
+        <h1 className="text-2xl font-bold mb-4">MoonUI Pro Demo</h1>
+
+        <DataTable data={data} columns={columns} searchable pagination />
+
+        <RichTextEditor placeholder="Start writing..." className="mt-4" />
+      </Card>
+    </MoonUIAuthProvider>
   );
 }
 ```
 
-## 📊 Component Categories
+## 📊 DataTable
+
+`DataTable` is built on TanStack Table v8. Column definitions are standard `ColumnDef` objects.
 
-### Data Tables & Grids
 ```jsx
-import { DataTable, VirtualTable, TreeTable } from '@moontra/moonui-pro';
+<DataTable
+  data={data}
+  columns={columns}
+  searchable
+  filterable
+  selectable
+  pagination
+  pageSize={25}
+  exportable={{ formats: ['csv', 'json'], filename: 'users' }}
+  onRowSelect={(rows) => console.log(rows)}
+/>
+```
+
+### Feature flags
 
-// Advanced data table with all features
+`features` groups the table's optional capabilities:
+
+```jsx
 <DataTable
   data={data}
-  columns={[
-    {
-      accessorKey: 'status',
-      header: 'Status',
-      cell: ({ row }) => <Badge>{row.getValue('status')}</Badge>,
-      meta: {
-        filterType: 'select',
-        filterOptions: ['Active', 'Pending', 'Completed'],
-        filterValueAccessor: (row) => row.status // Access raw data, not rendered Badge
-      }
-    },
-    {
-      accessorKey: 'name',
-      header: 'Name'
-    }
-  ]}
-  quickFilters={[
-    {
-      column: 'status',
-      label: 'Status',
-      options: 'auto', // Auto-detect from data
-      showCounts: true // Show count for each option
-    },
-    {
-      column: 'department',
-      label: 'Department',
-      multi: true // Multi-select
-    }
-  ]}
-  facetedFilters={['category', 'tags']} // Checkbox filters with counts
+  columns={columns}
   features={{
     sorting: true,
     filtering: true,
     pagination: true,
+    search: true,
+    columnVisibility: true,
     rowSelection: true,
-    columnResizing: true,
-    virtualScrolling: true,
-    export: ['csv', 'excel', 'json']
+    density: true,
+    export: ['csv', 'json'],
   }}
-  onRowClick={handleRowClick}
-  onSelectionChange={handleSelection}
 />
 ```
 
-#### New Filter Features (v2.25.8+)
+### Quick filters
+
+Dropdown filters, optionally auto-detecting their options from the data:
 
-**Quick Filters** - Dropdown filters for common filter scenarios:
 ```jsx
-// Quick filter with auto-detection
 <DataTable
+  data={data}
+  columns={columns}
   quickFilters={[
-    {
-      column: 'status',
-      options: 'auto', // Automatically detects unique values from data
-      showCounts: true  // Shows count next to each option
-    }
+    { column: 'status', label: 'Status', options: 'auto', showCounts: true },
+    { column: 'department', label: 'Department', multi: true },
   ]}
 />
 ```
 
-**Faceted Filters** - Advanced checkbox filters with search:
+### Faceted filters
+
+Checkbox filters with counts:
+
 ```jsx
-// Faceted filters for categories
-<DataTable
-  facetedFilters={['category', 'brand', 'tags']}
-  columns={[
-    {
-      accessorKey: 'category',
-      meta: {
-        filterType: 'select',
-        filterOptions: ['Electronics', 'Clothing', 'Books'] // Predefined options
-      }
-    }
-  ]}
-/>
+<DataTable data={data} columns={columns} facetedFilters={['category', 'tags']} />
 ```
 
-**Filter Value Accessor** - Handle custom rendered cells:
+### Filtering custom-rendered cells
+
+When a cell renders a component, tell the filter where the raw value lives:
+
 ```jsx
-// Filter by raw data instead of rendered content
-columns={[
+const columns = [
   {
     accessorKey: 'status',
-    cell: ({ row }) => (
-      <Badge variant={getVariant(row.original.status)}>
-        {formatStatus(row.original.status)}
-      </Badge>
-    ),
+    header: 'Status',
+    cell: ({ row }) => <Badge>{row.getValue('status')}</Badge>,
     meta: {
-      filterValueAccessor: (row) => row.status // Access raw status value
-    }
-  }
-]}
-```
-
-### Charts & Visualizations
-```jsx
-import { LineChart, BarChart, PieChart, ScatterChart } from '@moontra/moonui-pro';
-
-// Beautiful charts with animations
-<LineChart
-  data={chartData}
-  xAxis={{ dataKey: 'month' }}
-  yAxis={{ domain: [0, 100] }}
-  animations={{
-    duration: 800,
-    easing: 'easeInOut'
-  }}
-/>
+      filterType: 'select',
+      filterOptions: ['Active', 'Pending', 'Completed'],
+      filterValueAccessor: (row) => row.status,
+    },
+  },
+];
 ```
 
-### Rich Content Editors
-```jsx
-import { RichTextEditor, CodeEditor, MarkdownEditor } from '@moontra/moonui-pro';
-
-// WYSIWYG editor with toolbar
-<RichTextEditor
-  value={content}
-  onChange={setContent}
-  toolbar={{
-    bold: true,
-    italic: true,
-    link: true,
-    image: true,
-    codeBlock: true
-  }}
-  placeholder="Start writing..."
-/>
-```
+### Expandable rows
 
-### Form Components
 ```jsx
-import { FormWizard, DateRangePicker, ColorPalette } from '@moontra/moonui-pro';
-
-// Multi-step form wizard
-<FormWizard
-  steps={[
-    { title: 'Personal Info', component: PersonalInfoStep },
-    { title: 'Preferences', component: PreferencesStep },
-    { title: 'Review', component: ReviewStep }
-  ]}
-  onComplete={handleFormComplete}
-  validation={formValidation}
+<DataTable
+  data={data}
+  columns={columns}
+  enableExpandable
+  renderSubComponent={({ row }) => <pre>{JSON.stringify(row.original, null, 2)}</pre>}
 />
 ```
 
-### Interactive Components
-```jsx
-import { DragDropList, SwipeableCard, VirtualList } from '@moontra/moonui-pro';
-
-// Sortable list with drag & drop
-<DragDropList
-  items={listItems}
-  onReorder={handleReorder}
-  renderItem={({ item, dragHandleProps }) => (
-    <div {...dragHandleProps}>
-      {item.name}
-    </div>
-  )}
-/>
-```
+## 🎨 Styling
 
-## 🎨 Advanced Theming
-
-MoonUI Pro extends the base theming system:
-
-```css
-:root {
-  /* Pro-specific color variables */
-  --chart-primary: 217 91% 60%;
-  --chart-secondary: 174 100% 29%;
-  --editor-background: 0 0% 98%;
-  --data-grid-header: 210 20% 98%;
-  
-  /* Animation variables */
-  --animation-duration-fast: 150ms;
-  --animation-duration-normal: 300ms;
-  --animation-duration-slow: 500ms;
-}
-```
+The ESM build **injects component styles from the JavaScript bundle**, so there is no stylesheet to import. Do not import `@moontra/moonui-pro/styles.css` — that entry point does not exist, and adding a stylesheet on top would apply the styles twice.
 
-### Custom Chart Themes
-```jsx
-import { ChartThemeProvider } from '@moontra/moonui-pro';
+(The CDN/IIFE bundle is different: it does not inject styles, and ships a companion `dist/cdn/index.css`. See [Package Details](#-package-details).)
 
-const customChartTheme = {
-  colors: ['#8884d8', '#82ca9d', '#ffc658', '#ff7300'],
-  fontSize: 12,
-  fontFamily: 'Inter, sans-serif'
-};
+MoonUI Pro follows the base MoonUI theming system: HSL values in CSS variables, `.dark` class for dark mode. Configure it exactly as you configure `@moontra/moonui`.
 
-<ChartThemeProvider theme={customChartTheme}>
-  <YourChartsHere />
-</ChartThemeProvider>
-```
+## ⚡ Performance
 
-## 🔧 Performance Features
+- **Virtualization** — `VirtualList`, `SelectableVirtualList` for large collections
+- **Lazy rendering** — `LazyList` defers offscreen work
+- **Tree shaking** — ESM-only build; import only what you use
 
-### Virtualization
 ```jsx
-import { VirtualList, VirtualTable } from '@moontra/moonui-pro';
+import { VirtualList } from '@moontra/moonui-pro';
 
-// Handle thousands of items efficiently
 <VirtualList
   items={thousandsOfItems}
   itemHeight={50}
-  overscan={5}
-  renderItem={({ item, index }) => (
-    <div key={item.id}>Row {index}: {item.name}</div>
-  )}
+  renderItem={({ item, index }) => <div key={item.id}>Row {index}: {item.name}</div>}
 />
 ```
 
-### Lazy Loading
-```jsx
-import { InfiniteScroll } from '@moontra/moonui-pro';
-
-// Infinite scrolling with lazy loading
-<InfiniteScroll
-  loadMore={loadMoreData}
-  hasMore={hasMoreData}
-  threshold={100}
-  loader={<div>Loading...</div>}
->
-  {items.map(item => <ItemComponent key={item.id} item={item} />)}
-</InfiniteScroll>
-```
+## 📱 Mobile & Touch
 
-### Memory Optimization
 ```jsx
-import { MemoryOptimizedTable } from '@moontra/moonui-pro';
-
-// Automatically manages memory for large datasets
-<MemoryOptimizedTable
-  data={massiveDataset}
-  columns={columns}
-  maxMemoryItems={1000}
-  recycleNodes={true}
-/>
-```
-
-## 📱 Mobile & Touch Support
+import { SwipeableCard, GestureDrawer } from '@moontra/moonui-pro';
 
-### Gesture Components
-```jsx
-import { SwipeableCard, GestureDrawer, TouchableArea } from '@moontra/moonui-pro';
-
-// Swipeable cards with gesture support
-<SwipeableCard
-  onSwipeLeft={handleSwipeLeft}
-  onSwipeRight={handleSwipeRight}
-  threshold={50}
-  velocityThreshold={0.3}
->
+<SwipeableCard onSwipeLeft={handleSwipeLeft} onSwipeRight={handleSwipeRight}>
   <CardContent />
 </SwipeableCard>
 ```
 
-### Responsive Data Tables
-```jsx
-import { ResponsiveDataTable } from '@moontra/moonui-pro';
-
-// Automatically adapts to mobile
-<ResponsiveDataTable
-  data={data}
-  columns={columns}
-  mobileBreakpoint={768}
-  mobileLayout="cards" // or "stack"
-  hideColumnsOnMobile={['id', 'created_at']}
-/>
-```
-
-## 📦 Version History
+## 📦 Package Details
 
-### v2.25.8 (Latest)
-- ✨ **New:** Quick Filters - Dropdown filters with auto-detection and counts
-- ✨ **New:** Faceted Filters - Advanced checkbox filters with search
-- ✨ **New:** Filter Value Accessor - Custom accessors for filtered data
-- ✨ **New:** Enum/Select filter support in filter drawer
-- 🐛 **Fixed:** Filter drawer z-index and stacking issues
-- 🐛 **Fixed:** Sorting behavior (single-column, three-state)
+- **Format**: ESM only (`dist/index.mjs`, ~3.4 MB unminified), styles injected by JS
+- **CDN**: minified IIFE bundle at `dist/cdn/index.global.js` (~2.9 MB), global name `MoonUIPro`, with a companion `dist/cdn/index.css`
+- **Types**: full TypeScript definitions included
+- **Peer dependencies**: React 18+ or 19, React DOM, `next-themes`
+- **Built on**: TanStack Table v8, Recharts, Framer Motion
 
-### v2.25.0
-- 🚀 DataTable performance improvements
-- ✨ Export functionality (CSV, Excel, JSON)
-- ✨ Bulk actions support
-- 🎨 Improved dark mode styling
+> The CDN bundle has no build step, so it cannot receive a license token. Pro components will render their lock screen. Use it for layout prototyping only.
 
-## 🔐 License & Security
+## 🔒 License & Privacy
 
-### License Validation
-```jsx
-import { LicenseProvider } from '@moontra/moonui-pro';
+- A valid license key is required for production builds; development works without one
+- The license key is validated once at build time against `moonui.dev`
+- **No telemetry.** The package does not phone home at runtime and does not transmit your domain
+- The published bundle is plain, readable ESM — it is licensed, not obfuscated
 
-// Wrap your app with license provider
-<LicenseProvider licenseKey={process.env.MOONUI_PRO_LICENSE}>
-  <App />
-</LicenseProvider>
-```
+## 💳 Pricing
 
-### Security Features
-- **License verification** - Validates license keys
-- **Component obfuscation** - Protects source code
-- **Usage analytics** - Optional usage tracking
-- **Domain restrictions** - License key domain binding
+MoonUI Pro is a **one-time purchase**. There is no subscription.
 
-## 📦 Package Details
+| Plan | Price | Includes |
+|------|-------|----------|
+| **Professional** | $79 one-time | 1 device, 100+ Pro components, lifetime updates |
+| **Team** | $199 one-time | 3 developer licenses |
+| **Enterprise** | $499 one-time | Unlimited devices, white-label |
 
-- **Bundle Size**: ~2.86MB (IIFE), ~2.96MB (ESM)
-- **CDN Bundle**: Available on JSDelivr and unpkg
-- **Dependencies**: React 18+, Framer Motion, TanStack Table
-- **TypeScript**: Full type definitions included
-- **Tree Shaking**: Import individual components
+[View pricing →](https://moonui.dev/pricing)
 
 ## 🛠️ Development
 
-### Requirements
-- Node.js 18+
-- React 18+
-- TypeScript 5+
-- Valid MoonUI Pro license
-
-### Local Development
 ```bash
-git clone https://github.com/moontra/moonui-pro
-cd moonui-pro/packages/moonui-pro
+git clone https://github.com/oguzhanayyldz/moonui
+cd moonui/packages/moonui-pro
 npm install
-npm run dev
-```
-
-### Building
-```bash
-npm run build      # Build for production
-npm run build:dts  # Generate type definitions
-npm run test       # Run tests
-npm run lint       # Lint code
-```
-
-## 🎯 Use Cases
-
-### Dashboard Applications
-- **Analytics dashboards** with interactive charts
-- **Admin panels** with data tables and forms
-- **KPI monitoring** with real-time updates
-- **Report builders** with drag-and-drop interfaces
-
-### Content Management
-- **Blog editors** with rich text formatting
-- **Documentation sites** with markdown support
-- **Media libraries** with advanced file management
-- **Publishing platforms** with workflow management
-
-### E-commerce & Business
-- **Product catalogs** with advanced filtering
-- **Order management** with status tracking
-- **Customer portals** with account management
-- **Inventory systems** with bulk operations
-
-### Developer Tools
-- **Code editors** with syntax highlighting
-- **API explorers** with interactive testing
-- **Configuration UIs** with form wizards
-- **Monitoring dashboards** with real-time metrics
-
-## 📚 Documentation
-
-- **🌐 Website**: [moonui.dev](https://moonui.dev)
-- **📖 Pro Docs**: [moonui.dev/docs/pro](https://moonui.dev/docs/pro)
-- **🎯 Examples**: [moonui.dev/examples](https://moonui.dev/examples)
-- **🔑 Licensing**: [moonui.dev/pricing](https://moonui.dev/pricing)
-
-## 🤖 AI Integration
-
-MoonUI Pro is fully integrated with our MCP Server:
-
-```bash
-# The MCP Server automatically detects Pro components
-npm install -g @moontra/moonui-mcp-server
-
-# AI assistants can help with:
-# - Pro component recommendations
-# - Advanced usage patterns
-# - Performance optimization
-# - Complex integrations
-```
-
-## 🚀 Migration from v1.x
 
-### Breaking Changes in v2.24.x
-- **DataTable**: New API with TanStack Table v8
-- **Charts**: Updated to Recharts v2.12
-- **Forms**: Enhanced validation with better TypeScript support
-- **Theming**: New CSS variable system
-
-### Migration Guide
-```jsx
-// v1.x (old)
-<DataTable 
-  data={data}
-  sorting={true}
-  filtering={true}
-/>
-
-// v2.x (new)
-<DataTable
-  data={data}
-  columns={columns}
-  features={{
-    sorting: true,
-    filtering: true
-  }}
-/>
+npm run dev     # watch build
+npm run build   # production build
+npm run test    # jest
+npm run lint    # eslint
 ```
 
-## 💳 Pricing & Licensing
-
-| Plan | Price | Features |
-|------|--------|----------|
-| **Pro Monthly** | $19/month | All Pro components, Updates, Support |
-| **Pro Annual** | $190/year | Save $38, All Pro features |
-| **Pro Lifetime** | $599 | One-time payment, Lifetime updates |
-| **Enterprise** | Custom | Custom components, Priority support |
+## 🔗 Ecosystem
 
-[View all pricing options →](https://moonui.dev/pricing)
+- **[@moontra/moonui](https://npmjs.com/package/@moontra/moonui)** — Base component library (MIT)
+- **[@moontra/moonui-cli](https://npmjs.com/package/@moontra/moonui-cli)** — Command line tools
+- **[@moontra/moonui-mcp-server](https://npmjs.com/package/@moontra/moonui-mcp-server)** — AI / MCP integration
 
-## 🔗 Ecosystem
+## 📚 Documentation & Support
 
-- **[@moontra/moonui](https://npmjs.com/package/@moontra/moonui)** - Base component library
-- **[@moontra/moonui-cli](https://npmjs.com/package/@moontra/moonui-cli)** - Command line tools
-- **[@moontra/moonui-mcp-server](https://npmjs.com/package/@moontra/moonui-mcp-server)** - AI integration
-- **[moonui-themes](https://github.com/moontra/moonui-themes)** - Community themes
+- **Website**: [moonui.dev](https://moonui.dev)
+- **Docs**: [moonui.dev/docs](https://moonui.dev/docs)
+- **License & deployment**: [moonui.dev/docs/authentication](https://moonui.dev/docs/authentication)
+- **Issues**: [github.com/oguzhanayyldz/moonui/issues](https://github.com/oguzhanayyldz/moonui/issues)
+- **Email**: [support@moonui.dev](mailto:support@moonui.dev)
 
 ## 📄 License
 
 Licensed under a **Commercial License**. See [LICENSE](LICENSE) for details.
 
-### License Requirements
 - Valid license key required for production use
-- Development usage allowed without license
+- Development usage allowed without a license
 - License includes updates and support
-- Single license per domain/application
-
-## 🙏 Acknowledgments
-
-Built with:
-- [React](https://reactjs.org/) - UI framework
-- [TanStack Table](https://tanstack.com/table) - Powerful tables
-- [Recharts](https://recharts.org/) - Chart library
-- [Framer Motion](https://framer.com/motion/) - Animations
-- [React DnD](https://react-dnd.github.io/react-dnd/) - Drag and drop
-
-## 📞 Support
-
-- **💬 Discord**: [Join our community](https://discord.gg/moonui)
-- **📧 Email**: [support@moonui.dev](mailto:support@moonui.dev)
-- **🐛 Issues**: [GitHub Issues](https://github.com/moontra/moonui-pro/issues)
-- **📖 Documentation**: [moonui.dev/docs](https://moonui.dev/docs)
+- Licensed per device/developer — see the pricing table above
 
 ---
 
 <div align="center">
 
-**[Website](https://moonui.dev) • [Pro Documentation](https://moonui.dev/docs/pro) • [Pricing](https://moonui.dev/pricing) • [Examples](https://moonui.dev/examples)**
+**[Website](https://moonui.dev) • [Documentation](https://moonui.dev/docs) • [Pricing](https://moonui.dev/pricing)**
 
 Built with ❤️ for developers who demand excellence
 
-</div>
+</div>

package/dist/cdn/index.global.js

@@ -1,5 +1,5 @@
 /**
- * @moontra/moonui-pro v2.0.9 - CDN Build
+ * @moontra/moonui-pro v3.4.44 - CDN Build
  * Premium UI components for MoonUI
  * (c) 2026 MoonUI. All rights reserved.
  * @license Commercial - https://moonui.dev/license

package/dist/index.mjs

@@ -40,7 +40,7 @@ import NProgress from 'nprogress';
 import { useTheme } from 'next-themes';
 
 /**
- * @moontra/moonui-pro v2.0.9
+ * @moontra/moonui-pro v3.4.44
  * Premium UI components for MoonUI
  * (c) 2026 MoonUI. All rights reserved.
  * @license Commercial - https://moonui.dev/license

package/dist/next-config-plugin.mjs

@@ -2,7 +2,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 
 /**
- * @moontra/moonui-pro v2.0.9
+ * @moontra/moonui-pro v3.4.44
  * Premium UI components for MoonUI
  * (c) 2026 MoonUI. All rights reserved.
  * @license Commercial - https://moonui.dev/license

package/dist/server.mjs

@@ -4,7 +4,7 @@ import * as crypto from 'crypto';
 import crypto__default from 'crypto';
 
 /**
- * @moontra/moonui-pro v2.0.9
+ * @moontra/moonui-pro v3.4.44
  * Premium UI components for MoonUI
  * (c) 2026 MoonUI. All rights reserved.
  * @license Commercial - https://moonui.dev/license

package/dist/styles/nprogress.mjs

@@ -1,5 +1,5 @@
 /**
- * @moontra/moonui-pro v2.0.9
+ * @moontra/moonui-pro v3.4.44
  * Premium UI components for MoonUI
  * (c) 2026 MoonUI. All rights reserved.
  * @license Commercial - https://moonui.dev/license

package/dist/vite-plugin.mjs

@@ -2,7 +2,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 
 /**
- * @moontra/moonui-pro v2.0.9
+ * @moontra/moonui-pro v3.4.44
  * Premium UI components for MoonUI
  * (c) 2026 MoonUI. All rights reserved.
  * @license Commercial - https://moonui.dev/license

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "3.4.43",
+    "version": "3.4.44",
     "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
     "type": "module",
     "main": "dist/index.mjs",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
-    "unpkg": "dist/index.global.js",
-    "jsdelivr": "dist/index.global.js",
+    "unpkg": "dist/cdn/index.global.js",
+    "jsdelivr": "dist/cdn/index.global.js",
     "files": [
         "dist",
         "scripts",
@@ -25,11 +25,8 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/index.mjs",
             "require": "./dist/index.mjs",
-            "default": "./dist/index.mjs",
-            "style": "./dist/index.css"
+            "default": "./dist/index.mjs"
         },
-        "./styles.css": "./dist/index.css",
-        "./css": "./dist/index.css",
         "./server": {
             "types": "./dist/server.d.ts",
             "import": "./dist/server.mjs",
@@ -143,7 +140,8 @@
         "react-window": "^1.8.8",
         "recharts": "^2.12.7",
         "tailwind-merge": "^2.5.4",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "use-sync-external-store": "^1.5.0"
     },
     "devDependencies": {
         "@testing-library/jest-dom": "^6.6.3",