@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/components/index.ts

@@ -30,9 +30,8 @@ export * from "./spotlight-card"
 
 // Calendar component (Advanced version with events)
 export { Calendar as AdvancedCalendar } from "./calendar"
-
-// Calendar Pro - Full-featured event management calendar
-export * from "./calendar-pro"
+export { Calendar as CalendarPro } from "./calendar"
+export type { CalendarEvent } from "./calendar"
 
 // Kanban
 export { Kanban } from "./kanban"
@@ -94,6 +93,9 @@ export * from "./data-table"
 // Sidebar
 export * from "./sidebar"
 
+// Navbar
+export * from "./navbar"
+
 // Form Wizard
 export * from "./form-wizard"
 

package/src/components/kanban/kanban.tsx

@@ -380,12 +380,14 @@ const KanbanCardComponent = ({
 
           {/* Progress bar */}
           {cardShowProgress && (card.progress !== undefined || card.checklist) && (
-            <div className="mb-3">
+            <div className="mb-3 px-2">
               <div className="flex justify-between text-xs text-muted-foreground mb-1">
                 <span>Progress</span>
                 <span>{Math.round(card.progress || checklistProgress)}%</span>
               </div>
-              <Progress value={card.progress || checklistProgress} className="h-1" />
+              <div className="flex items-center">
+                <Progress value={card.progress || checklistProgress} className="h-1.5 w-full" />
+              </div>
             </div>
           )}
 
@@ -1044,7 +1046,7 @@ export function Kanban({
     <div className={cn("w-full", className)}>
       {/* Header with search and filters */}
       {(showSearch || showFilters) && (
-        <div className="mb-6 space-y-4">
+        <div className="mb-6 p-4 bg-muted/30 rounded-lg space-y-4">
           <div className="flex items-center justify-between gap-4">
             {/* Search */}
             {showSearch && (
@@ -1055,13 +1057,13 @@ export function Kanban({
                   placeholder="Search cards..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-9"
+                  className="pl-9 bg-background"
                 />
               </div>
             )}
 
             {/* Actions */}
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 flex-shrink-0">
               {/* Filters */}
               {showFilters && filters.length > 0 && (
                 <DropdownMenu>
@@ -1168,14 +1170,15 @@ export function Kanban({
       )}
 
       {/* Kanban board */}
-      <div 
-        ref={scrollRef}
-        className="flex overflow-x-auto pb-4"
-        style={{ gap: `${columnGap}px` }}
-        onDragOver={(e) => e.preventDefault()}
-      >
-        <AnimatePresence mode="sync">
-          {filteredColumns.map((column) => {
+      <div className="w-full overflow-x-auto py-6">
+        <div 
+          ref={scrollRef}
+          className="flex min-w-fit mx-auto px-4"
+          style={{ gap: `${columnGap}px` }}
+          onDragOver={(e) => e.preventDefault()}
+        >
+          <AnimatePresence mode="sync">
+            {filteredColumns.map((column) => {
             const isOverLimit = column.limit && column.cards.length >= column.limit
             const isDraggedOver = draggedOverColumn === column.id
             
@@ -1191,8 +1194,9 @@ export function Kanban({
                   isDraggedOver && "scale-105"
                 )}
                 style={{ 
-                  width: columnWidth === 'auto' ? 'auto' : (columnWidth || 320) + 'px',
-                  minWidth: columnWidth === 'auto' ? '300px' : undefined,
+                  width: columnWidth === 'auto' ? 'auto' : (columnWidth || 360) + 'px',
+                  minWidth: columnWidth === 'auto' ? '320px' : undefined,
+                  flexShrink: 0,
                   transitionDuration: enableAnimations ? `${animationDuration}s` : '0s'
                 }}
                 onDragOver={(e) => handleDragOver(e, column.id)}
@@ -1467,10 +1471,10 @@ export function Kanban({
               </motion.div>
             )
           })}
-        </AnimatePresence>
+          </AnimatePresence>
 
-        {/* Add column */}
-        {showAddColumn && onAddColumn && (
+          {/* Add column */}
+          {showAddColumn && onAddColumn && (
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -1569,6 +1573,7 @@ export function Kanban({
             )}
           </motion.div>
         )}
+        </div>
       </div>
 
       {/* Modals */}

package/src/components/license-error/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import React from 'react'
 import { cn } from '../../lib/utils'
 

package/src/components/magnetic-button/index.tsx

@@ -3,12 +3,51 @@
 import React, { useRef, useState } from "react"
 import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
 import { cn } from "../../lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
 import { Lock, Sparkles } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface MagneticButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+const magneticButtonVariants = cva(
+  "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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm 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 shadow-lg hover:from-purple-700 hover:to-pink-700",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        full: "rounded-full",
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "md",
+    },
+  }
+)
+
+export interface MagneticButtonProps 
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof magneticButtonVariants> {
   strength?: number
   range?: number
   springConfig?: {
@@ -20,7 +59,10 @@ export interface MagneticButtonProps extends React.ButtonHTMLAttributes<HTMLButt
 const MagneticButtonInternal = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(
   ({ 
     children, 
-    className, 
+    className,
+    variant,
+    size,
+    radius, 
     strength = 0.3, 
     range = 100,
     springConfig = { stiffness: 200, damping: 15 },
@@ -77,9 +119,7 @@ const MagneticButtonInternal = React.forwardRef<HTMLButtonElement, MagneticButto
           }
         }}
         className={cn(
-          "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-          "h-9 px-4 py-2",
+          magneticButtonVariants({ variant, size, radius }),
           className
         )}
         onMouseMove={handleMouseMove}
@@ -101,7 +141,7 @@ const MagneticButtonInternal = React.forwardRef<HTMLButtonElement, MagneticButto
         transition={{ duration: 0.3 }}
       >
         <motion.div
-          className="relative z-10"
+          className="relative z-10 flex items-center justify-center"
           animate={{
             scale: isHovered ? 1.02 : 1,
           }}
@@ -112,7 +152,16 @@ const MagneticButtonInternal = React.forwardRef<HTMLButtonElement, MagneticButto
 
         {/* Glow effect */}
         <motion.div
-          className="absolute inset-0 rounded-md bg-primary/20 blur-md"
+          className={cn(
+            "absolute inset-0 bg-primary/20 blur-md",
+            radius === "none" && "rounded-none",
+            radius === "sm" && "rounded-sm",
+            radius === "md" && "rounded-md",
+            radius === "lg" && "rounded-lg",
+            radius === "xl" && "rounded-xl",
+            radius === "full" && "rounded-full",
+            !radius && "rounded-md"
+          )}
           animate={{
             opacity: isHovered ? 0.8 : 0,
             scale: isHovered ? 1.1 : 1,