@moontra/moonui-pro 2.18.6 → 2.20.0

package/src/components/ui/aspect-ratio.tsx

@@ -6,33 +6,78 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 /**
- * Aspect Ratio Component
+ * Premium Aspect Ratio Component
  * 
- * A component that maintains a specific aspect ratio for content.
- * Particularly useful for images, videos, and media content in responsive designs.
- * Fully integrated with the theme system, accessible and customizable.
+ * Advanced component that maintains specific aspect ratios with preset support,
+ * responsive behavior, animations, and enhanced styling options.
+ * Perfect for images, videos, and media content in modern applications.
  */
 
+// Preset ratios
+const PRESET_RATIOS = {
+  square: 1,
+  video: 16 / 9,
+  portrait: 3 / 4,
+  landscape: 4 / 3,
+  golden: 1.618,
+  ultrawide: 21 / 9,
+  cinema: 2.39,
+  instagram: 4 / 5,
+  story: 9 / 16,
+  banner: 3 / 1,
+} as const
+
+type PresetRatio = keyof typeof PRESET_RATIOS
+
+// Responsive ratio configuration
+interface ResponsiveRatio {
+  sm?: number | PresetRatio
+  md?: number | PresetRatio
+  lg?: number | PresetRatio
+  xl?: number | PresetRatio
+  "2xl"?: number | PresetRatio
+}
+
 const MoonUIaspectRatioVariantsPro = cva(
   "relative overflow-hidden",
   {
     variants: {
       variant: {
-        default: "rounded-md bg-muted/10",
+        default: "bg-muted/10",
         ghost: "bg-transparent",
-        outline: "rounded-md border border-border",
-        card: "rounded-md bg-card shadow-sm",
+        outline: "border border-border",
+        card: "bg-card shadow-sm",
+        glass: "bg-white/10 backdrop-blur-md border border-white/20",
+        gradient: "bg-gradient-to-br from-primary/10 to-secondary/10",
       },
       radius: {
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded-md",
         lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
         full: "rounded-full",
       },
+      animate: {
+        true: "transition-all duration-300 ease-in-out",
+        false: "",
+      },
+      hover: {
+        true: "hover:scale-105 hover:shadow-lg cursor-pointer",
+        false: "",
+      },
+      loading: {
+        true: "animate-pulse",
+        false: "",
+      },
     },
     defaultVariants: {
       variant: "default",
+      radius: "md",
+      animate: false,
+      hover: false,
+      loading: false,
     },
   }
 )
@@ -45,27 +90,146 @@ interface AspectRatioProps
    * @default 16/9
    */
   ratio?: number
+  /**
+   * Preset aspect ratio for quick usage
+   */
+  preset?: PresetRatio
+  /**
+   * Responsive aspect ratios for different breakpoints
+   */
+  responsive?: ResponsiveRatio
+  /**
+   * Enable smooth aspect ratio changes
+   */
+  smoothTransition?: boolean
+  /**
+   * Add overlay content
+   */
+  overlay?: React.ReactNode
+  /**
+   * Overlay position
+   */
+  overlayPosition?: "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right"
+  /**
+   * Show loading skeleton
+   */
+  skeleton?: boolean
 }
 
 const MoonUIAspectRatioPro = React.forwardRef<
   HTMLDivElement,
   AspectRatioProps
->(({ className, variant, radius, ratio = 16 / 9, style, children, ...props }, ref) => (
-  <div
-    ref={ref} 
-    className={cn(MoonUIaspectRatioVariantsPro({ variant, radius }), className)}
-    style={{
-      position: "relative",
-      paddingBottom: `${(1 / ratio) * 100}%`,
-      ...style
-    }}
-    {...props}
-  >
-    <div className="absolute inset-0">
-      {children}
+>(({ 
+  className, 
+  variant, 
+  radius, 
+  animate, 
+  hover, 
+  loading,
+  ratio = 16 / 9, 
+  preset,
+  responsive,
+  smoothTransition = false,
+  overlay,
+  overlayPosition = "center",
+  skeleton = false,
+  style, 
+  children, 
+  ...props 
+}, ref) => {
+  const [currentRatio, setCurrentRatio] = React.useState(() => {
+    if (preset) return PRESET_RATIOS[preset]
+    return ratio
+  })
+
+  // Update ratio when props change
+  React.useEffect(() => {
+    const newRatio = preset ? PRESET_RATIOS[preset] : ratio
+    if (smoothTransition) {
+      setCurrentRatio(newRatio)
+    } else {
+      setCurrentRatio(newRatio)
+    }
+  }, [preset, ratio, smoothTransition])
+
+  // Handle responsive ratios
+  React.useEffect(() => {
+    if (!responsive) return
+
+    const handleResize = () => {
+      const width = window.innerWidth
+      let newRatio = currentRatio
+
+      if (width >= 1536 && responsive["2xl"]) {
+        newRatio = typeof responsive["2xl"] === "string" 
+          ? PRESET_RATIOS[responsive["2xl"]] 
+          : responsive["2xl"]
+      } else if (width >= 1280 && responsive.xl) {
+        newRatio = typeof responsive.xl === "string" 
+          ? PRESET_RATIOS[responsive.xl] 
+          : responsive.xl
+      } else if (width >= 1024 && responsive.lg) {
+        newRatio = typeof responsive.lg === "string" 
+          ? PRESET_RATIOS[responsive.lg] 
+          : responsive.lg
+      } else if (width >= 768 && responsive.md) {
+        newRatio = typeof responsive.md === "string" 
+          ? PRESET_RATIOS[responsive.md] 
+          : responsive.md
+      } else if (width >= 640 && responsive.sm) {
+        newRatio = typeof responsive.sm === "string" 
+          ? PRESET_RATIOS[responsive.sm] 
+          : responsive.sm
+      }
+
+      setCurrentRatio(newRatio)
+    }
+
+    handleResize()
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [responsive, currentRatio])
+
+  const overlayPositionClasses = {
+    center: "items-center justify-center",
+    "top-left": "items-start justify-start p-4",
+    "top-right": "items-start justify-end p-4",
+    "bottom-left": "items-end justify-start p-4",
+    "bottom-right": "items-end justify-end p-4",
+  }
+
+  return (
+    <div
+      ref={ref} 
+      className={cn(
+        MoonUIaspectRatioVariantsPro({ variant, radius, animate: animate || smoothTransition, hover, loading: loading || skeleton }),
+        className
+      )}
+      style={{
+        position: "relative",
+        paddingBottom: `${(1 / currentRatio) * 100}%`,
+        ...style
+      }}
+      {...props}
+    >
+      <div className="absolute inset-0">
+        {skeleton ? (
+          <div className="w-full h-full bg-muted animate-pulse" />
+        ) : (
+          children
+        )}
+        {overlay && (
+          <div className={cn(
+            "absolute inset-0 flex",
+            overlayPositionClasses[overlayPosition]
+          )}>
+            {overlay}
+          </div>
+        )}
+      </div>
     </div>
-  </div>
-))
+  )
+})
 MoonUIAspectRatioPro.displayName = "AspectRatioPro"
 
 

package/src/components/ui/button.tsx

@@ -13,73 +13,70 @@ const moonUIButtonProVariants = cva(
   ["inline-flex items-center justify-center gap-2 whitespace-nowrap",
   "font-medium relative",
   "transition-all duration-200 ease-out",
-  "premium-hover", /* Standart premium hover efekti */
+  "transform active:scale-[0.98]",
   "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-  "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"],
+  "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none disabled:transform-none"],
   {
     variants: {
       variant: {
         primary: [
           "bg-primary text-primary-foreground",
-          "hover:bg-primary-hover dark:hover:bg-primary/90",
-          "active:bg-primary-active dark:active:bg-primary/80",
-          "shadow-sm dark:shadow-primary/20 dark:shadow-md",
-          "focus-visible:ring-primary/50 dark:focus-visible:ring-primary/30",
-          "dark:bg-primary dark:text-white",
+          "dark:bg-primary dark:text-primary-foreground",
+          "hover:bg-primary/90 dark:hover:bg-primary/90",
+          "active:bg-primary/80 dark:active:bg-primary/80",
+          "shadow-sm hover:shadow-md",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
         ],
         secondary: [
-          "bg-secondary text-secondary-foreground",
-          "hover:bg-gray-200 dark:hover:bg-gray-700/90",
-          "active:bg-gray-300 dark:active:bg-gray-600/90",
-          "border border-transparent dark:border-gray-700",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:bg-gray-800 dark:text-gray-100",
-          "dark:shadow-sm dark:shadow-gray-900/20",
+          "bg-muted text-muted-foreground",
+          "dark:bg-muted dark:text-muted-foreground",
+          "hover:bg-muted/80 dark:hover:bg-muted/80",
+          "active:bg-muted/70 dark:active:bg-muted/70",
+          "border border-input dark:border-input",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "shadow-sm hover:shadow-md",
         ],
         outline: [
           "bg-background text-foreground",
-          "border border-gray-300 dark:border-gray-700",
-          "hover:border-gray-400 dark:hover:border-gray-500",
-          "hover:bg-gray-50 dark:hover:bg-gray-800/80",
-          "active:bg-gray-100 dark:active:bg-gray-800/90",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:bg-gray-900/50",
-          "dark:shadow-sm dark:shadow-gray-950/10",
+          "dark:bg-background dark:text-foreground",
+          "border border-input dark:border-input",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
+          "active:bg-accent/80 dark:active:bg-accent/80",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200",
         ],
         ghost: [
           "text-foreground",
-          "hover:bg-gray-100 dark:hover:bg-gray-800/90",
-          "active:bg-gray-200 dark:active:bg-gray-700/90",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200",
-          "transition-colors duration-200",
+          "dark:text-foreground",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
+          "active:bg-accent/80 dark:active:bg-accent/80",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200",
         ],
         destructive: [
-          "bg-error text-white",
-          "hover:bg-error/90 dark:hover:bg-error/80",
-          "active:bg-error/80 dark:active:bg-error/70",
-          "shadow-sm dark:shadow-error/10 dark:shadow-md",
-          "focus-visible:ring-error/50 dark:focus-visible:ring-error/30",
-          "dark:text-white dark:border-error/20",
-          "transition-colors duration-200",
+          "bg-destructive text-destructive-foreground",
+          "dark:bg-destructive dark:text-destructive-foreground",
+          "hover:bg-destructive/90 dark:hover:bg-destructive/90",
+          "active:bg-destructive/80 dark:active:bg-destructive/80",
+          "shadow-sm hover:shadow-md",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200",
         ],
         success: [
-          "bg-success text-white",
-          "hover:bg-success/90 dark:hover:bg-success/80",
-          "active:bg-success/80 dark:active:bg-success/70",
-          "shadow-sm dark:shadow-success/10 dark:shadow-md", 
-          "focus-visible:ring-success/50 dark:focus-visible:ring-success/30",
-          "dark:text-white dark:border-success/20",
-          "transition-colors duration-200",
+          "bg-success text-success-foreground",
+          "dark:bg-success dark:text-success-foreground",
+          "hover:bg-success/90 dark:hover:bg-success/90",
+          "active:bg-success/80 dark:active:bg-success/80",
+          "shadow-sm hover:shadow-md", 
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200",
         ],
         link: [
           "text-primary bg-transparent",
           "underline-offset-4 hover:underline",
-          "hover:text-primary-hover active:text-primary-active",
+          "hover:text-primary/80 active:text-primary/70",
           "p-0 h-auto",
-          "dark:text-blue-400 dark:hover:text-blue-300",
-          "dark:active:text-blue-500",
           "transition-colors duration-200",
         ],
         gradient: [
@@ -129,14 +126,14 @@ const moonUIButtonProVariants = cva(
         ],
       },
       size: {
-        xs: "h-7 px-2.5 text-xs rounded",
-        sm: "h-8 px-3 text-sm rounded",
-        md: "h-10 px-4 text-base rounded-md",
+        xs: "h-7 px-2.5 text-xs rounded-md",
+        sm: "h-8 px-3 text-sm rounded-md",
+        md: "h-10 px-4 text-base rounded-lg",
         lg: "h-12 px-6 text-lg rounded-lg",
-        xl: "h-14 px-8 text-xl rounded-lg",
-        icon: "h-10 w-10 p-2 rounded-md",
-        "icon-sm": "h-8 w-8 p-1.5 rounded",
-        "icon-lg": "h-12 w-12 p-3 rounded-lg",
+        xl: "h-14 px-8 text-xl rounded-xl",
+        icon: "h-10 w-10 p-2 rounded-lg",
+        "icon-sm": "h-8 w-8 p-1.5 rounded-md",
+        "icon-lg": "h-12 w-12 p-3 rounded-xl",
       },
       rounded: {
         default: "",

package/src/components/ui/card.tsx

@@ -5,16 +5,18 @@ import { cn } from "../../lib/utils";
 import { microInteractionVariants, hoverAnimations, tapAnimations } from "../../lib/micro-interactions";
 
 const moonUICardVariantsPro = cva(
-  "rounded-lg border bg-card text-card-foreground shadow-sm dark:shadow-gray-900/20 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-all duration-200",
+  "rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200",
   {
     variants: {
       variant: {
-        default: "",
-        outline: "border border-border shadow-none bg-transparent dark:border-gray-700 dark:bg-transparent dark:text-gray-200",
-        filled: "border-none bg-secondary dark:bg-gray-800 dark:text-gray-100 dark:shadow-inner dark:shadow-gray-950/10",
-        elevated: "border-none shadow-md dark:shadow-lg dark:shadow-gray-900/30 dark:bg-gray-850 dark:text-gray-100",
+        default: "border-border dark:border-border",
+        outline: "border border-border shadow-none bg-transparent dark:border-border",
+        filled: "border-none bg-secondary dark:bg-secondary shadow-inner",
+        elevated: "border-none shadow-lg dark:shadow-xl dark:shadow-black/20",
         gradient: "border-none bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20",
-        glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-gray-700/30 dark:bg-gray-800/10",
+        glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-white/10 dark:bg-black/10",
+        neon: "border-2 border-primary/50 shadow-[0_0_15px_rgba(var(--primary),0.5)] dark:shadow-[0_0_20px_rgba(var(--primary),0.7)]",
+        glow: "border border-border shadow-[0_0_30px_rgba(var(--primary),0.15)] dark:shadow-[0_0_40px_rgba(var(--primary),0.25)]",
       },
       size: {
         default: "p-6",
@@ -47,38 +49,104 @@ export interface MoonUICardProProps
     VariantProps<typeof moonUICardVariantsPro> {
   asChild?: boolean;
   microInteraction?: "lift" | "glow" | "scale" | "none";
+  enableGlassmorphism?: boolean;
+  enableParallax?: boolean;
+  enableTilt?: boolean;
+  tiltMaxAngle?: number;
+  parallaxOffset?: number;
 }
 
 const MoonUICardPro = React.forwardRef<HTMLDivElement, MoonUICardProProps>(
-  ({ className, variant, size, radius, interactive, microInteraction = "lift", asChild, ...props }, ref) => {
-    // Interactive özelliği varsa motion.div, yoksa normal div kullan
-    if (interactive && microInteraction !== "none") {
-      const interactionProps = {
-        whileHover: microInteraction === "scale" ? hoverAnimations.scale : 
-                    microInteraction === "glow" ? hoverAnimations.glow : 
-                    hoverAnimations.lift,
-        whileTap: tapAnimations.scale,
-      };
+  ({ 
+    className, 
+    variant, 
+    size, 
+    radius, 
+    interactive, 
+    microInteraction = "lift", 
+    enableGlassmorphism,
+    enableParallax = false,
+    enableTilt = false,
+    tiltMaxAngle = 15,
+    parallaxOffset = 20,
+    children,
+    asChild, 
+    ...props 
+  }, ref) => {
+    const [mousePos, setMousePos] = React.useState({ x: 0, y: 0 });
+    const [isHovered, setIsHovered] = React.useState(false);
+    
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!enableTilt && !enableParallax) return;
+      
+      const rect = e.currentTarget.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
       
-      const { onDrag, onDragStart, onDragEnd, ...divProps } = props as any;
+      const x = (e.clientX - centerX) / (rect.width / 2);
+      const y = (e.clientY - centerY) / (rect.height / 2);
       
-      return (
-        <motion.div
-          ref={ref}
-          className={cn(moonUICardVariantsPro({ variant, size, radius, interactive, className }))}
-          {...interactionProps}
-          {...divProps}
-        />
-      );
-    }
+      setMousePos({ x, y });
+    };
+    
+    const handleMouseEnter = () => setIsHovered(true);
+    const handleMouseLeave = () => {
+      setIsHovered(false);
+      setMousePos({ x: 0, y: 0 });
+    };
+    
+    // Apply glassmorphism variant if enabled
+    const finalVariant = enableGlassmorphism ? "glass" : variant;
+    
+    // Calculate tilt transforms
+    const rotateX = enableTilt ? mousePos.y * -tiltMaxAngle : 0;
+    const rotateY = enableTilt ? mousePos.x * tiltMaxAngle : 0;
+    
+    // Base interaction props
+    const interactionProps = interactive && microInteraction !== "none" ? {
+      whileHover: microInteraction === "scale" ? hoverAnimations.scale : 
+                  microInteraction === "glow" ? hoverAnimations.glow : 
+                  hoverAnimations.lift,
+      whileTap: tapAnimations.scale,
+    } : {};
+    
+    const { onDrag, onDragStart, onDragEnd, ...divProps } = props as any;
     
-    // Non-interactive version
     return (
-      <div
+      <motion.div
         ref={ref}
-        className={cn(moonUICardVariantsPro({ variant, size, radius, interactive, className }))}
-        {...props}
-      />
+        className={cn(moonUICardVariantsPro({ variant: finalVariant, size, radius, interactive, className }))}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          transformStyle: enableTilt || enableParallax ? "preserve-3d" : undefined,
+          perspective: enableTilt || enableParallax ? "1000px" : undefined,
+        }}
+        animate={{
+          rotateX,
+          rotateY,
+        }}
+        transition={{ type: "spring", damping: 20, stiffness: 300 }}
+        {...interactionProps}
+        {...divProps}
+      >
+        {/* Parallax content wrapper */}
+        {enableParallax ? (
+          <motion.div
+            style={{ transform: "translateZ(50px)" }}
+            animate={{
+              x: isHovered ? mousePos.x * parallaxOffset : 0,
+              y: isHovered ? mousePos.y * parallaxOffset : 0,
+            }}
+            transition={{ type: "spring", damping: 20, stiffness: 300 }}
+          >
+            {children}
+          </motion.div>
+        ) : (
+          children
+        )}
+      </motion.div>
     );
   }
 );

package/src/components/ui/gesture-drawer.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+export { 
+  MoonUIGestureDrawerPro,
+  GestureDrawer,
+  type MoonUIGestureDrawerProProps,
+  type GestureDrawerProps,
+  moonUIGestureDrawerProVariants
+} from "../gesture-drawer/index"
+
+export { MoonUIGestureDrawerPro as default } from "../gesture-drawer/index"

package/src/components/ui/index.ts

@@ -170,4 +170,21 @@ export {
   HoverCard, HoverCardTrigger, HoverCardContent
 } from './hover-card';
 
-// Note: Micro-interaction components are exported from their individual directories
+// HoverCard3D is exported from components/hover-card-3d/index.tsx
+
+// Note: Micro-interaction components are exported from their individual directories
+
+// Gesture Drawer
+export { 
+  MoonUIGestureDrawerPro,
+  GestureDrawer,
+  type MoonUIGestureDrawerProProps,
+  type GestureDrawerProps,
+  moonUIGestureDrawerProVariants
+} from './gesture-drawer';
+
+// Lightbox
+export * from './lightbox';
+
+// Media Gallery
+export * from './media-gallery';