@moontra/moonui 2.1.9 → 2.2.1

package/src/components/ui/popover-pro.tsx

@@ -0,0 +1,424 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { motion, AnimatePresence, useSpring, useTransform } from "framer-motion"
+import { cn } from "../../lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+
+const PopoverPro = PopoverPrimitive.Root
+const PopoverTriggerPro = PopoverPrimitive.Trigger
+const PopoverAnchorPro = PopoverPrimitive.Anchor
+const PopoverPortalPro = PopoverPrimitive.Portal
+
+// Animation variants
+const popoverAnimations = {
+  // Basic animations
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 }
+  },
+  slide: {
+    initial: { opacity: 0, y: -10 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -10 }
+  },
+  // Advanced animations
+  spring: {
+    initial: { opacity: 0, scale: 0.8, y: -20 },
+    animate: { 
+      opacity: 1, 
+      scale: 1, 
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 20
+      }
+    },
+    exit: { opacity: 0, scale: 0.8, y: -20 }
+  },
+  elastic: {
+    initial: { opacity: 0, scale: 0.5, rotate: -10 },
+    animate: { 
+      opacity: 1, 
+      scale: 1, 
+      rotate: 0,
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 15
+      }
+    },
+    exit: { opacity: 0, scale: 0.5, rotate: 10 }
+  },
+  bounce: {
+    initial: { opacity: 0, y: -30 },
+    animate: { 
+      opacity: 1, 
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 15,
+        mass: 1
+      }
+    },
+    exit: { opacity: 0, y: -30 }
+  },
+  flip: {
+    initial: { opacity: 0, rotateX: -90 },
+    animate: { 
+      opacity: 1, 
+      rotateX: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 20
+      }
+    },
+    exit: { opacity: 0, rotateX: 90 }
+  },
+  slideFromBottom: {
+    initial: { opacity: 0, y: 20 },
+    animate: { 
+      opacity: 1, 
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 25
+      }
+    },
+    exit: { opacity: 0, y: 20 }
+  },
+  zoom: {
+    initial: { opacity: 0, scale: 0 },
+    animate: { 
+      opacity: 1, 
+      scale: 1,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 20
+      }
+    },
+    exit: { opacity: 0, scale: 0 }
+  },
+  morph: {
+    initial: { 
+      opacity: 0, 
+      scale: 0.8,
+      borderRadius: "50%"
+    },
+    animate: { 
+      opacity: 1, 
+      scale: 1,
+      borderRadius: "12px",
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 25
+      }
+    },
+    exit: { 
+      opacity: 0, 
+      scale: 0.8,
+      borderRadius: "50%"
+    }
+  }
+}
+
+const popoverContentVariants = cva(
+  "z-50 w-72 rounded-md p-4 shadow-md outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border bg-popover text-popover-foreground",
+        glass: [
+          "border border-white/20 bg-white/80 backdrop-blur-xl",
+          "dark:border-gray-800/50 dark:bg-gray-900/80",
+          "shadow-xl"
+        ],
+        gradient: [
+          "bg-gradient-to-br from-white to-gray-50",
+          "dark:from-gray-900 dark:to-gray-950",
+          "border border-gray-200 dark:border-gray-800",
+          "shadow-xl"
+        ],
+        solid: [
+          "bg-white dark:bg-gray-900",
+          "border-2 border-gray-200 dark:border-gray-700",
+          "shadow-2xl"
+        ],
+        floating: [
+          "bg-white dark:bg-gray-900",
+          "shadow-2xl shadow-black/20 dark:shadow-black/40",
+          "border border-gray-100 dark:border-gray-800"
+        ],
+        neumorphic: [
+          "bg-gray-100 dark:bg-gray-900",
+          "shadow-[20px_20px_60px_#bebebe,-20px_-20px_60px_#ffffff]",
+          "dark:shadow-[20px_20px_60px_#1a1a1a,-20px_-20px_60px_#2a2a2a]",
+          "border-0"
+        ]
+      },
+      size: {
+        sm: "w-56 p-3",
+        default: "w-72 p-4",
+        lg: "w-96 p-6",
+        xl: "w-[32rem] p-8",
+        auto: "w-auto p-4"
+      },
+      overlayBlur: {
+        none: "",
+        sm: "backdrop-blur-sm",
+        md: "backdrop-blur-md",
+        lg: "backdrop-blur-lg",
+        xl: "backdrop-blur-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      overlayBlur: "none"
+    }
+  }
+)
+
+export interface PopoverContentProProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,
+    VariantProps<typeof popoverContentVariants> {
+  animation?: keyof typeof popoverAnimations
+  enableSpringPhysics?: boolean
+  showArrow?: boolean
+  arrowSize?: number
+  customBackdrop?: boolean
+  dragToDismiss?: boolean
+  pinnable?: boolean
+  resizable?: boolean
+  focusTrap?: boolean
+  closeOnEscape?: boolean
+  closeOnClickOutside?: boolean
+  staggerChildren?: boolean
+  glowEffect?: boolean
+  magneticEdges?: boolean
+}
+
+const PopoverContentPro = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProProps
+>(
+  (
+    {
+      className,
+      align = "center",
+      sideOffset = 4,
+      variant,
+      size,
+      overlayBlur,
+      animation = "spring",
+      enableSpringPhysics = false,
+      showArrow = false,
+      arrowSize = 8,
+      customBackdrop = false,
+      dragToDismiss = false,
+      pinnable = false,
+      resizable = false,
+      focusTrap = false,
+      closeOnEscape = true,
+      closeOnClickOutside = true,
+      staggerChildren = false,
+      glowEffect = false,
+      magneticEdges = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [isPinned, setIsPinned] = React.useState(false)
+    const [isDragging, setIsDragging] = React.useState(false)
+    const animationVariant = popoverAnimations[animation] || popoverAnimations.spring
+
+    // Spring physics for magnetic edges
+    const x = useSpring(0, { stiffness: 300, damping: 30 })
+    const y = useSpring(0, { stiffness: 300, damping: 30 })
+
+    const contentElement = (
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        onEscapeKeyDown={(e) => {
+          if (!closeOnEscape || isPinned) {
+            e.preventDefault()
+          }
+        }}
+        onPointerDownOutside={(e) => {
+          if (!closeOnClickOutside || isPinned) {
+            e.preventDefault()
+          }
+        }}
+        className={cn(
+          popoverContentVariants({ variant, size, overlayBlur }),
+          glowEffect && "shadow-[0_0_30px_rgba(59,130,246,0.3)]",
+          resizable && "resize overflow-auto",
+          isDragging && "cursor-grabbing",
+          className
+        )}
+        {...props}
+      >
+        {pinnable && (
+          <button
+            onClick={() => setIsPinned(!isPinned)}
+            className="absolute top-2 right-2 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+            aria-label={isPinned ? "Unpin popover" : "Pin popover"}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              className={cn(
+                "transition-transform",
+                isPinned && "rotate-45"
+              )}
+            >
+              <path d="M12 17v5M9 10V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6M9 10l-2 2v3h10v-3l-2-2" />
+            </svg>
+          </button>
+        )}
+        
+        {showArrow && (
+          <PopoverPrimitive.Arrow
+            width={arrowSize * 2}
+            height={arrowSize}
+            className={cn(
+              "fill-current",
+              variant === "glass" && "text-white/80 dark:text-gray-900/80",
+              variant === "gradient" && "text-white dark:text-gray-900",
+              variant === "default" && "text-popover"
+            )}
+          />
+        )}
+        
+        <div
+          className={cn(
+            staggerChildren && "space-y-2",
+            dragToDismiss && "select-none"
+          )}
+        >
+          {children}
+        </div>
+      </PopoverPrimitive.Content>
+    )
+
+    if (enableSpringPhysics || magneticEdges) {
+      return (
+        <AnimatePresence mode="wait">
+          <motion.div
+            {...(animationVariant as any)}
+            style={magneticEdges ? { x, y } : undefined}
+            drag={dragToDismiss}
+            dragElastic={0.2}
+            dragConstraints={{ left: -50, right: 50, top: -50, bottom: 50 }}
+            onDragStart={() => setIsDragging(true)}
+            onDragEnd={() => setIsDragging(false)}
+          >
+            {contentElement}
+          </motion.div>
+        </AnimatePresence>
+      )
+    }
+
+    return contentElement
+  }
+)
+
+PopoverContentPro.displayName = PopoverPrimitive.Content.displayName
+
+// Additional Pro components
+const PopoverHeaderPro = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("mb-4 space-y-1", className)}
+    {...props}
+  />
+))
+PopoverHeaderPro.displayName = "PopoverHeaderPro"
+
+const PopoverTitlePro = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold text-lg leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+PopoverTitlePro.displayName = "PopoverTitlePro"
+
+const PopoverDescriptionPro = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+PopoverDescriptionPro.displayName = "PopoverDescriptionPro"
+
+const PopoverFooterPro = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "mt-4 flex items-center justify-end space-x-2 pt-4 border-t",
+      className
+    )}
+    {...props}
+  />
+))
+PopoverFooterPro.displayName = "PopoverFooterPro"
+
+const PopoverSeparatorPro = React.forwardRef<
+  HTMLHRElement,
+  React.HTMLAttributes<HTMLHRElement>
+>(({ className, ...props }, ref) => (
+  <hr
+    ref={ref}
+    className={cn("my-4 border-t", className)}
+    {...props}
+  />
+))
+PopoverSeparatorPro.displayName = "PopoverSeparatorPro"
+
+export {
+  PopoverPro,
+  PopoverTriggerPro,
+  PopoverContentPro,
+  PopoverAnchorPro,
+  PopoverPortalPro,
+  PopoverHeaderPro,
+  PopoverTitlePro,
+  PopoverDescriptionPro,
+  PopoverFooterPro,
+  PopoverSeparatorPro,
+  popoverContentVariants
+}

package/src/components/ui/popover.tsx

@@ -142,7 +142,7 @@ const PopoverClose = PopoverPrimitive.Close;
  */
 const PopoverSeparator = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("my-2 h-px bg-border", className)}
+    className={cn("moonui-theme", "my-2 h-px bg-border", className)}
     {...props}
   />
 );
@@ -153,7 +153,7 @@ PopoverSeparator.displayName = "PopoverSeparator";
  */
 const PopoverHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-border", className)}
+    className={cn("moonui-theme", "-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-border", className)}
     {...props}
   />
 );
@@ -164,7 +164,7 @@ PopoverHeader.displayName = "PopoverHeader";
  */
 const PopoverFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-border", className)}
+    className={cn("moonui-theme", "-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-border", className)}
     {...props}
   />
 );

package/src/components/ui/progress.tsx

@@ -155,7 +155,7 @@ const Progress = React.forwardRef<
       )}
       <div
         ref={ref}
-        className={cn(progressVariants({ variant, size, radius, animation }), className)}
+        className={cn("moonui-theme", progressVariants({ variant, size, radius, animation }), className)}
         role="progressbar"
         aria-valuemin={0}
         aria-valuemax={max}

package/src/components/ui/radio-group.tsx

@@ -69,7 +69,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
         <div
           ref={ref}
           role="radiogroup"
-          className={cn("grid gap-2", className)}
+          className={cn("moonui-theme", "grid gap-2", className)}
           {...props}
         />
       </RadioGroupContext.Provider>

package/src/components/ui/rich-text-editor/index.tsx

@@ -1,6 +1,7 @@
-// Basic Rich Text Editor - Free Version
 "use client"
 
+// Basic Rich Text Editor - Free Version
+
 import * as React from "react"
 import { cn } from "../../../lib/utils"
 

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../../lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/components/ui/select.tsx

@@ -143,10 +143,14 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "item-aligned", ...props }, ref) => (
+>(({ className, children, position = "popper", side = "bottom", sideOffset = 4, align = "start", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
+      side={side}
+      sideOffset={sideOffset}
+      align={align}
+      avoidCollisions={false}
       className={cn(
         ["relative z-50 max-h-96 min-w-[8rem] overflow-hidden", 
         "rounded-md border border-gray-200 dark:border-gray-700",
@@ -185,7 +189,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("moonui-theme", "py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     {...props}
   />
 ))
@@ -253,7 +257,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted dark:bg-gray-700", className)}
+    className={cn("moonui-theme", "-mx-1 my-1 h-px bg-muted dark:bg-gray-700", className)}
     {...props}
   />
 ))

package/src/components/ui/separator.tsx

@@ -105,7 +105,7 @@ const separatorVariants = cva(
 )
 
 export interface SeparatorProps
-  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>,
+  extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, keyof VariantProps<typeof separatorVariants>>,
     VariantProps<typeof separatorVariants> {}
 
 const Separator = React.forwardRef<
@@ -126,7 +126,7 @@ const Separator = React.forwardRef<
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
-      orientation={orientation}
+      orientation={orientation || undefined}
       className={cn(
         separatorVariants({ orientation, variant, size }),
         className

package/src/components/ui/skeleton.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { motion } from "framer-motion";
-import { skeletonAnimation } from "@/lib/micro-interactions";
+import { skeletonAnimation } from "../../lib/micro-interactions";
 
 /**
  * Skeleton Component
@@ -93,6 +93,17 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
     style,
     ...props 
   }, ref) => {
+    // Filter out HTML event handlers that conflict with Framer Motion
+    const { 
+      onDrag, 
+      onDragEnd, 
+      onDragStart,
+      onAnimationStart,
+      onAnimationEnd,
+      onAnimationIteration,
+      ...filteredProps 
+    } = props;
+    
     // Show content when loaded
     if (isLoaded && children) {
       if (useMotion) {
@@ -102,13 +113,13 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: fadeInDuration / 1000 }}
-            className={className}
+            className={cn("moonui-theme", className)}
             style={{
               height,
               width,
               ...style,
             }}
-            {...props}
+            {...filteredProps}
           >
             {children}
           </motion.div>
@@ -118,7 +129,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
       return (
         <div
           ref={ref}
-          className={cn("animate-fade-in", className)}
+          className={cn("moonui-theme", "animate-fade-in", className)}
           style={{
             animationDuration: `${fadeInDuration}ms`,
             height,
@@ -138,6 +149,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
       <SkeletonElement
         ref={ref}
         className={cn(
+          "moonui-theme",
           skeletonVariants({ variant, size, shape, animation }),
           "relative isolate",
           className
@@ -148,7 +160,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
           ...style,
         }}
         {...(useMotion ? skeletonAnimation : {})}
-        {...props}
+        {...filteredProps}
       />
     );
   }
@@ -198,7 +210,7 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
     return (
       <div
         ref={ref}
-        className={cn("flex flex-col", className)}
+        className={cn("moonui-theme", "flex flex-col", className)}
         style={{ gap: spacing }}
         {...props}
       >
@@ -254,7 +266,7 @@ export const SkeletonAvatar = React.forwardRef<HTMLDivElement, SkeletonAvatarPro
         variant={variant}
         animation={animation}
         shape="circle"
-        className={cn("shrink-0", className)}
+        className={cn("moonui-theme", "shrink-0", className)}
         style={{
           height: size,
           width: size,

package/src/components/ui/slider.tsx

@@ -296,7 +296,7 @@ const Slider = React.forwardRef<
       )}
       
       <div
-        className={cn(sliderVariants({ size }), className)}
+        className={cn("moonui-theme", sliderVariants({ size }), className)}
         data-disabled={disabled ? true : undefined}
       >
         {/* Track */}

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

@@ -1,3 +1,5 @@
+"use client"
+
 // Basic Swipeable Card - Free Version
 "use client"
 

package/src/components/ui/switch.tsx

@@ -27,7 +27,7 @@ const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   SwitchProps
 >(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => (
-  <div className="inline-flex items-center gap-2">
+  <div className="moonui-theme inline-flex items-center gap-2">
     {leftIcon && <span className="text-muted-foreground">{leftIcon}</span>}
     <SwitchPrimitives.Root
       className={cn(