@moontra/moonui-pro 2.19.0 → 2.20.1

package/package.json

@@ -1,139 +1,140 @@
 {
-  "name": "@moontra/moonui-pro",
-  "version": "2.19.0",
-  "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",
-  "files": [
-    "dist",
-    "src",
-    "scripts",
-    "README.md",
-    "LICENSE"
-  ],
-  "sideEffects": [
-    "**/*.css",
-    "dist/**/*.css",
-    "src/**/*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "style": "./dist/index.css"
+    "name": "@moontra/moonui-pro",
+    "version": "2.20.1",
+    "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",
+    "files": [
+        "dist",
+        "src",
+        "scripts",
+        "README.md",
+        "LICENSE"
+    ],
+    "sideEffects": [
+        "**/*.css",
+        "dist/**/*.css",
+        "src/**/*.css"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "require": "./dist/index.js",
+            "style": "./dist/index.css",
+            "import": "./dist/index.mjs"
+        },
+        "./styles.css": "./dist/index.css",
+        "./css": "./dist/index.css"
     },
-    "./styles.css": "./dist/index.css",
-    "./css": "./dist/index.css"
-  },
-  "scripts": {
-    "postinstall": "node scripts/postinstall.js",
-    "build": "tsup",
-    "build:dts": "tsup --dts",
-    "dev": "tsup --watch --sourcemap",
-    "clean": "rm -rf dist",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "prepublishOnly": "npm run clean && npm run build",
-    "pub": "npm version patch && npm run build && npm publish",
-    "pub:minor": "npm version minor && npm run build && npm publish",
-    "pub:major": "npm version major && npm run build && npm publish"
-  },
-  "keywords": [
-    "ui",
-    "components",
-    "react",
-    "typescript",
-    "moonui",
-    "premium",
-    "pro",
-    "virtual-list",
-    "performance",
-    "memory-efficient",
-    "animations",
-    "gestures",
-    "touch",
-    "interactive",
-    "3d-effects",
-    "charts",
-    "data-table",
-    "advanced-components"
-  ],
-  "author": "MoonUI Team",
-  "license": "Commercial",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/moontra/moonui-pro.git"
-  },
-  "homepage": "https://moonui.dev",
-  "peerDependencies": {
-    "react": ">=18.0.0 || ^19.0.0",
-    "react-dom": ">=18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "@moontra/moonui": "^2.1.9",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toast": "^1.2.14",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@tanstack/react-table": "^8.20.5",
-    "canvas-confetti": "^1.9.3",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "date-fns": "^3.6.0",
-    "framer-motion": "^11.11.17",
-    "lucide-react": "^0.525.0",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-colorful": "^5.6.1",
-    "react-day-picker": "^9.8.0",
-    "react-dropzone": "^14.3.5",
-    "react-grid-layout": "^1.5.2",
-    "react-hook-form": "^7.53.2",
-    "react-intersection-observer": "^9.13.1",
-    "react-virtualized-auto-sizer": "^1.0.24",
-    "react-window": "^1.8.8",
-    "recharts": "^2.12.7",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/canvas-confetti": "^1.9.0",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^18.16.0",
-    "@types/react": "^19.0.0",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^19.0.0",
-    "@types/react-window": "^1.8.8",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^8.39.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.17",
-    "ts-jest": "^29.1.0",
-    "tsup": "^6.7.0",
-    "typescript": "^5.0.4"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
+    "scripts": {
+        "postinstall": "node scripts/postinstall.js",
+        "build": "tsup",
+        "build:dts": "tsup --dts",
+        "dev": "tsup --watch --sourcemap",
+        "clean": "rm -rf dist",
+        "lint": "eslint \"src/**/*.{ts,tsx}\"",
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "test:coverage": "jest --coverage",
+        "prepublishOnly": "npm run clean && npm run build",
+        "pub": "npm version patch && npm run build && npm publish",
+        "pub:minor": "npm version minor && npm run build && npm publish",
+        "pub:major": "npm version major && npm run build && npm publish"
+    },
+    "keywords": [
+        "ui",
+        "components",
+        "react",
+        "typescript",
+        "moonui",
+        "premium",
+        "pro",
+        "virtual-list",
+        "performance",
+        "memory-efficient",
+        "animations",
+        "gestures",
+        "touch",
+        "interactive",
+        "3d-effects",
+        "charts",
+        "data-table",
+        "advanced-components"
+    ],
+    "author": "MoonUI Team",
+    "license": "Commercial",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/moontra/moonui-pro.git"
+    },
+    "homepage": "https://moonui.dev",
+    "peerDependencies": {
+        "react": ">=18.0.0 || ^19.0.0",
+        "react-dom": ">=18.0.0 || ^19.0.0"
+    },
+    "dependencies": {
+        "@moontra/moonui": "^2.1.9",
+        "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-scroll-area": "^1.2.9",
+        "@radix-ui/react-select": "^2.2.5",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.5",
+        "@radix-ui/react-tabs": "^1.1.12",
+        "@radix-ui/react-toast": "^1.2.14",
+        "@radix-ui/react-tooltip": "^1.2.7",
+        "@tanstack/react-table": "^8.20.5",
+        "canvas-confetti": "^1.9.3",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "date-fns": "^3.6.0",
+        "framer-motion": "^11.11.17",
+        "lucide-react": "^0.525.0",
+        "react-beautiful-dnd": "^13.1.1",
+        "react-colorful": "^5.6.1",
+        "react-day-picker": "^9.8.0",
+        "react-dropzone": "^14.3.5",
+        "react-grid-layout": "^1.5.2",
+        "react-hook-form": "^7.53.2",
+        "react-intersection-observer": "^9.13.1",
+        "react-virtualized-auto-sizer": "^1.0.24",
+        "react-window": "^1.8.8",
+        "recharts": "^2.12.7",
+        "tailwind-merge": "^2.5.4",
+        "tailwindcss-animate": "^1.0.7"
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/canvas-confetti": "^1.9.0",
+        "@types/jest": "^30.0.0",
+        "@types/node": "^18.16.0",
+        "@types/react": "^19.0.0",
+        "@types/react-beautiful-dnd": "^13.1.8",
+        "@types/react-dom": "^19.0.0",
+        "@types/react-grid-layout": "^1.3.5",
+        "@types/react-window": "^1.8.8",
+        "autoprefixer": "^10.4.21",
+        "eslint": "^8.39.0",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.17",
+        "ts-jest": "^29.1.0",
+        "tsup": "^6.7.0",
+        "typescript": "^5.0.4"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    }
 }

package/src/__tests__/use-local-storage.test.tsx

@@ -63,7 +63,7 @@ describe('useLocalStorage', () => {
     const { result } = renderHook(() => useLocalStorage('test-key', 10))
     
     act(() => {
-      result.current[1]((prev) => prev + 5)
+      result.current[1]((prev) => (prev ?? 0) + 5)
     })
     
     expect(result.current[0]).toBe(15)
@@ -143,7 +143,7 @@ describe('useLocalStorage', () => {
   })
 
   it('handles null values correctly', () => {
-    const { result } = renderHook(() => useLocalStorage('null-key', null))
+    const { result } = renderHook(() => useLocalStorage<string | null>('null-key', null))
     
     act(() => {
       result.current[1]('not-null')

package/src/components/advanced-chart/index.tsx

@@ -84,11 +84,11 @@ import {
 
 export type ChartType = 'line' | 'bar' | 'area' | 'pie' | 'scatter' | 'composed' | 'radar' | 'radialBar' | 'treemap' | 'funnel'
 
-interface ChartDataPoint {
+export interface ChartDataPoint {
   [key: string]: string | number | null
 }
 
-interface ChartSeries {
+export interface ChartSeries {
   dataKey: string
   name: string
   color: string
@@ -190,7 +190,7 @@ const CustomTooltip: React.FC<any> = ({ active, payload, label }) => {
       initial={{ opacity: 0, scale: 0.9 }}
       animate={{ opacity: 1, scale: 1 }}
       exit={{ opacity: 0, scale: 0.9 }}
-      className="backdrop-blur-xl bg-background/80 dark:bg-gray-900/90 p-3 rounded-xl shadow-2xl border border-border/50 dark:border-gray-700/50"
+      className="backdrop-blur-xl bg-background/80 p-3 rounded-xl shadow-2xl border border-border/50"
     >
       <p className="text-sm font-medium mb-2">{label}</p>
       {payload.map((entry: any, index: number) => (
@@ -219,7 +219,7 @@ const CustomLegend: React.FC<any> = ({ payload, onItemClick }) => {
           onClick={() => onItemClick && onItemClick(entry)}
           className={cn(
             "flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all",
-            "hover:bg-accent/10 dark:hover:bg-gray-800/50",
+            "hover:bg-accent/10",
             entry.inactive && "opacity-50"
           )}
         >
@@ -971,13 +971,13 @@ export function AdvancedChart({
                     <TrendingDown className="h-4 w-4 text-red-500 dark:text-red-400" />
                   )}
                   {trend.direction === 'neutral' && (
-                    <Minus className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+                    <Minus className="h-4 w-4 text-muted-foreground" />
                   )}
                   <span className={cn(
                     "ml-1 text-sm font-semibold",
                     trend.direction === 'up' && "text-green-500 dark:text-green-400",
                     trend.direction === 'down' && "text-red-500 dark:text-red-400",
-                    trend.direction === 'neutral' && "text-gray-500 dark:text-gray-400"
+                    trend.direction === 'neutral' && "text-muted-foreground"
                   )}>
                     {trend.percentage}%
                   </span>

package/src/components/calendar/event-dialog.tsx

@@ -57,7 +57,7 @@ export function EventDialog({
     startTime: string
     endTime: string
     location: string
-    type: 'meeting' | 'task' | 'reminder' | 'event'
+    type: 'meeting' | 'task' | 'reminder' | 'event' | 'birthday' | 'holiday' | 'conference'
     color: string
     attendees: string
   }>({

package/src/components/calendar/index.tsx

@@ -138,7 +138,7 @@ const EVENT_COLORS = {
 }
 
 const PRIORITY_COLORS = {
-  low: 'border-l-4 border-l-gray-400',
+  low: 'border-l-4 border-l-muted-foreground',
   medium: 'border-l-4 border-l-yellow-500',
   high: 'border-l-4 border-l-red-500'
 }

package/src/components/calendar-pro/index.tsx

@@ -1084,7 +1084,7 @@ END:VCALENDAR`
                     <div className="space-y-1">
                       {dayEvents.slice(0, 3).map(event => {
                         return (
-                          <motion.div
+                          <div
                             key={event.id}
                             draggable={allowEventDragging}
                             onDragStart={(e) => handleDragStart(e, event)}
@@ -1096,8 +1096,6 @@ END:VCALENDAR`
                               opacity: draggedEventId === event.id ? 0.5 : 1,
                               cursor: allowEventDragging ? 'move' : 'pointer'
                             }}
-                            whileHover={{ scale: 1.02 }}
-                            whileTap={{ scale: 0.98 }}
                             onClick={(e) => {
                               e.stopPropagation()
                               handleEventClick(event, e)
@@ -1110,7 +1108,7 @@ END:VCALENDAR`
                                 {format(new Date(event.start), 'HH:mm')} {event.title}
                               </>
                             )}
-                          </motion.div>
+                          </div>
                         )
                       })}
                       {dayEvents.length > 3 && (

package/src/components/dashboard/demo.tsx

@@ -282,7 +282,7 @@ const customUserMenuItems = [
     icon: <CreditCard className="h-4 w-4" />,
     onClick: () => console.log('Billing clicked')
   },
-  { id: 'sep1', separator: true },
+  { id: 'sep1', label: '', separator: true },
   {
     id: 'settings',
     label: 'Settings',
@@ -295,7 +295,7 @@ const customUserMenuItems = [
     icon: <HelpCircle className="h-4 w-4" />,
     onClick: () => console.log('Help clicked')
   },
-  { id: 'sep2', separator: true },
+  { id: 'sep2', label: '', separator: true },
   {
     id: 'logout',
     label: 'Sign Out',

package/src/components/dashboard/widgets/activity-feed.tsx

@@ -190,7 +190,7 @@ export function ActivityFeed({
             animate={{ scale: 1 }}
             className="inline-block mt-1"
           >
-            <Badge variant="default" className="text-xs">New</Badge>
+            <Badge variant="secondary" className="text-xs">New</Badge>
           </motion.div>
         )}
       </div>

package/src/components/dashboard/widgets/metric-card.tsx

@@ -65,7 +65,7 @@ export function MetricCard({
       case 'decrease':
         return 'text-red-600 dark:text-red-400'
       default:
-        return 'text-gray-600 dark:text-gray-400'
+        return 'text-muted-foreground'
     }
   }
 

package/src/components/enhanced/button.tsx

@@ -7,23 +7,23 @@ import { cn } from "../../lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const enhancedButtonVariants = cva(
-  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 overflow-hidden",
+  "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 overflow-hidden transform active:scale-[0.98] rounded-lg",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-        gradient: "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700",
+        default: "bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground hover:bg-primary/90 dark:hover:bg-primary/90 shadow-sm hover:shadow-md",
+        destructive: "bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground hover:bg-destructive/90 dark:hover:bg-destructive/90 shadow-sm hover:shadow-md",
+        outline: "border border-input dark:border-input bg-background dark:bg-background text-foreground dark:text-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground transition-all duration-200",
+        secondary: "bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground hover:bg-muted/80 dark:hover:bg-muted/80 border border-input dark:border-input shadow-sm hover:shadow-md",
+        ghost: "text-foreground dark:text-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground transition-all duration-200",
+        link: "text-primary underline-offset-4 hover:underline hover:text-primary/80",
+        gradient: "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 shadow-md hover:shadow-lg",
         glow: "bg-primary text-primary-foreground shadow-lg shadow-primary/50 hover:shadow-xl hover:shadow-primary/60",
       },
       size: {
         default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
         icon: "h-10 w-10",
       },
       animation: {
@@ -198,9 +198,9 @@ export const ButtonPro = React.forwardRef<HTMLButtonElement, ButtonProProps>(
     const getBackgroundColor = () => {
       switch (currentState) {
         case "success":
-          return "bg-green-600"
+          return "bg-success"
         case "error":
-          return "bg-red-600"
+          return "bg-destructive"
         default:
           return ""
       }
@@ -359,4 +359,4 @@ export const ButtonPro = React.forwardRef<HTMLButtonElement, ButtonProProps>(
 
 ButtonPro.displayName = "ButtonPro"
 
-export { enhancedButtonVariants }
+export { ButtonPro as Button, enhancedButtonVariants }