@moontra/moonui-pro 2.20.1 → 2.20.2

package/src/components/ui/index.ts

@@ -1,7 +1,13 @@
 // Core UI Components - Only MoonUI*Pro exports to avoid conflicts
 export { 
   MoonUIAccordionPro, MoonUIAccordionItemPro, MoonUIAccordionTriggerPro, MoonUIAccordionContentPro,
-  Accordion, AccordionItem, AccordionTrigger, AccordionContent
+  Accordion, AccordionItem, AccordionTrigger, AccordionContent,
+  useAccordionAnalytics,
+  type AccordionSize, type AccordionVariant, type AnimationMode,
+  type MoonUIAccordionProProps, type MoonUIAccordionProBaseProps,
+  type MoonUIAccordionProSingleProps, type MoonUIAccordionProMultipleProps,
+  type MoonUIAccordionItemProProps, type MoonUIAccordionTriggerProProps,
+  type MoonUIAccordionContentProProps
 } from './accordion';
 
 export { 
@@ -50,7 +56,10 @@ export {
 
 export { 
   MoonUICollapsiblePro, MoonUIcollapsibleTriggerVariantsPro, MoonUICollapsibleTriggerPro, MoonUIcollapsibleContentVariantsPro, MoonUICollapsibleContentPro,
-  Collapsible, collapsibleTriggerVariants, CollapsibleTrigger, collapsibleContentVariants, CollapsibleContent
+  Collapsible, collapsibleTriggerVariants, CollapsibleTrigger, collapsibleContentVariants, CollapsibleContent,
+  useCollapsibleAnalytics,
+  type MoonUICollapsibleProProps, type MoonUICollapsibleTriggerProProps, type MoonUICollapsibleContentProProps,
+  type CollapsibleSize, type CollapsibleVariant, type AnimationMode as CollapsibleAnimationMode, type BadgeVariant
 } from './collapsible';
 
 export { 
@@ -59,10 +68,11 @@ export {
 } from './color-picker';
 
 export { 
-  MoonUIcommandVariantsPro, MoonUICommandPro, MoonUICommandDialogPro, MoonUICommandInputPro, MoonUICommandListPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandItemPro, MoonUICommandShortcutPro, MoonUICommandSeparatorPro,
-  commandVariants, Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator
+  MoonUICommandPro, MoonUICommandDialogPro, MoonUICommandInputPro, MoonUICommandListPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandItemPro, MoonUICommandShortcutPro, MoonUICommandSeparatorPro,
+  commandVariantsPro, Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator
 } from './command';
 
+
 export { 
   MoonUIDialogPro, MoonUIDialogContentPro, MoonUIDialogHeaderPro, MoonUIDialogFooterPro, MoonUIDialogTitlePro, MoonUIDialogDescriptionPro, MoonUIDialogTriggerPro, MoonUIDialogClosePro,
   Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogTrigger, DialogClose
@@ -142,10 +152,20 @@ export {
 } from './table';
 
 export { 
-  MoonUITabsPro, MoonUITabsListPro, MoonUITabsTriggerPro, MoonUITabsContentPro,
   Tabs, TabsList, TabsTrigger, TabsContent
 } from './tabs';
 
+export { 
+  MoonUITabsPro as MoonUITabsEnhanced, // Backward compatibility
+  MoonUITabsPro,
+  MoonUITabsListPro,
+  MoonUITabsTriggerPro,
+  MoonUITabsContentPro,
+  type TabItem,
+  type MoonUITabsProProps,
+  type MoonUITabsProProps as MoonUITabsEnhancedProps // Backward compatibility
+} from './tabs-pro';
+
 export { 
   MoonUITextareaPro,
   Textarea
@@ -170,6 +190,18 @@ export {
   HoverCard, HoverCardTrigger, HoverCardContent
 } from './hover-card';
 
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle
+} from './navigation-menu';
+
 // HoverCard3D is exported from components/hover-card-3d/index.tsx
 
 // Note: Micro-interaction components are exported from their individual directories

package/src/components/ui/input.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";

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

@@ -110,7 +110,7 @@ const MagneticButton = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.95 }}
           transition={{ type: "spring", stiffness: 400, damping: 17 }}
-          {...props}
+          {...(props as any)}
         >
           <motion.span
             style={{ x: useTransform(x, (value) => value * 0.2), y: useTransform(y, (value) => value * 0.2) }}

package/src/components/ui/media-gallery.tsx

@@ -241,7 +241,7 @@ const MoonUIMediaGalleryPro = React.forwardRef<
   }
 
   const renderGalleryItem = (item: MediaItem, index: number) => {
-    const isLoaded = !lazyLoad || loadedImages.has(index)
+    const isLoaded = !lazyLoad || loadedImages.has(index) || (item.thumbnail && item.thumbnail.endsWith('.svg'))
 
     const itemContent = (
       <motion.div
@@ -450,7 +450,6 @@ const MoonUIMediaGalleryPro = React.forwardRef<
           className
         )}
         style={layout === "masonry" ? { columnGap: "1rem" } : undefined}
-        {...props}
       >
         {loadingState ? (
           <>

package/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

package/src/components/ui/pagination.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 import { cn } from "../../lib/utils"

package/src/components/ui/select.tsx

@@ -162,7 +162,7 @@ interface MoonUISelectContentProProps extends React.ComponentPropsWithoutRef<typ
 const MoonUISelectContentPro = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   MoonUISelectContentProProps
->(({ className, children, position = "popper", enableSearch, searchPlaceholder = "Search...", noResultsText = "No results found", searchLoading, searchIcon, ...props }, ref) => {
+>(({ className, children, position = "popper", side = "bottom", align = "start", enableSearch, searchPlaceholder = "Search...", noResultsText = "No results found", searchLoading, searchIcon, ...props }, ref) => {
   const [searchValue, setSearchValue] = React.useState("");
   
   // Filter children based on search
@@ -207,7 +207,11 @@ const MoonUISelectContentPro = React.forwardRef<
           className
         )}
         position={position}
-        sideOffset={5}
+        side={side}
+        align={align}
+        sideOffset={4}
+        avoidCollisions={true}
+        collisionPadding={10}
         {...props}
       >
         {enableSearch && (

package/src/components/ui/spotlight-card.tsx

@@ -74,7 +74,7 @@ const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
         onMouseLeave={handleMouseLeave}
         whileHover={{ scale: 1.02 }}
         transition={{ type: "spring", stiffness: 400, damping: 25 }}
-        {...props}
+        {...(props as any)}
       >
         {/* Spotlight overlay */}
         <motion.div

package/src/components/ui/table.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";