@moontra/moonui-pro 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "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",

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

@@ -11,7 +11,7 @@ import { Textarea } from "../ui/textarea"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
 import { Checkbox } from "../ui/checkbox"
 import { Switch } from "../ui/switch"
-import { Badge } from "../ui/badge"
+import { MoonUIBadgePro as Badge } from "../ui/badge"
 import { cn } from "../../lib/utils"
 import { Lock, Sparkles, CheckCircle, AlertCircle, Eye, EyeOff, Upload, X } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
@@ -239,7 +239,7 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
               <Checkbox
                 id={field.name}
                 {...register(field.name)}
-                onCheckedChange={(checked) => setValue(field.name, checked)}
+                onCheckedChange={(checked: boolean) => setValue(field.name, checked)}
               />
               <Label htmlFor={field.name} className="text-sm">
                 {field.placeholder || "Check this option"}
@@ -252,7 +252,7 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
               <Switch
                 id={field.name}
                 {...register(field.name)}
-                onCheckedChange={(checked) => setValue(field.name, checked)}
+                onCheckedChange={(checked: boolean) => setValue(field.name, checked)}
               />
               <Label htmlFor={field.name} className="text-sm">
                 {field.placeholder || "Toggle this option"}

package/src/components/calendar/index.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
 import { Button } from '../ui/button'
-import { Badge } from '../ui/badge'
+import { MoonUIBadgePro as Badge } from '../ui/badge'
 import { 
   ChevronLeft, 
   ChevronRight,

package/src/components/dashboard/index.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { Badge } from '../ui/badge'
+import { MoonUIBadgePro as Badge } from '../ui/badge'
 import { Button } from '../ui/button'
 import { 
   TrendingUp, 

package/src/components/file-upload/index.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
 import { Button } from '../ui/button'
-import { Badge } from '../ui/badge'
+import { MoonUIBadgePro as Badge } from '../ui/badge'
 import { 
   Upload, 
   File, 

package/src/components/github-stars/index.tsx

@@ -4,8 +4,8 @@ import React, { useState, useEffect } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
-import { Badge } from "../ui/badge"
-import { Skeleton } from "../ui/skeleton"
+import { MoonUIBadgePro as Badge } from "../ui/badge"
+import { MoonUISkeleton as Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
 import { Star, GitFork, Eye, Users, ExternalLink, Github, Lock, Sparkles, RefreshCw } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"

package/src/components/health-check/index.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Button } from "../ui/button"
-import { Badge } from "../ui/badge"
+import { MoonUIBadgePro as Badge } from "../ui/badge"
 import { Progress } from "../ui/progress"
 import { cn } from "../../lib/utils"
 import { 

package/src/components/kanban/index.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
 import { Button } from '../ui/button'
-import { Badge } from '../ui/badge'
+import { MoonUIBadgePro as Badge } from '../ui/badge'
 import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
 import { 
   Plus, 

package/src/components/lazy-component/index.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef, Suspense } from "react"
 import { motion } from "framer-motion"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
-import { Skeleton } from "../ui/skeleton"
+import { MoonUISkeleton as Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
 import { Eye, Loader2, Lock, Sparkles, RefreshCw } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"

package/src/components/optimized-image/index.tsx

@@ -4,8 +4,8 @@ import React, { useState, useRef, useEffect } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
-import { Badge } from "../ui/badge"
-import { Skeleton } from "../ui/skeleton"
+import { MoonUIBadgePro as Badge } from "../ui/badge"
+import { MoonUISkeleton as Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
 import { 
   Image as ImageIcon, 

package/src/components/performance-debugger/index.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef, useCallback } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Button } from "../ui/button"
-import { Badge } from "../ui/badge"
+import { MoonUIBadgePro as Badge } from "../ui/badge"
 import { Progress } from "../ui/progress"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import { cn } from "../../lib/utils"

package/src/components/performance-monitor/index.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef, useCallback } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Button } from "../ui/button"
-import { Badge } from "../ui/badge"
+import { MoonUIBadgePro as Badge } from "../ui/badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import { cn } from "../../lib/utils"
 import { 

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

@@ -91,7 +91,7 @@ import { Label } from '../ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
 import { Separator } from '../ui/separator';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
-import { ColorPicker } from '../ui/color-picker';
+import { MoonUIColorPickerPro as ColorPicker } from '../ui/color-picker';
 import { Slider } from '../ui/slider';
 import { toast } from '../ui/toast';
 // Note: AI providers should be handled by consuming application

package/src/components/timeline/index.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { Badge } from '../ui/badge'
+import { MoonUIBadgePro as Badge } from '../ui/badge'
 import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
 import { Button } from '../ui/button'
 import { 

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

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Check, X, Loader2 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const animatedButtonVariants = cva(

package/src/components/ui/avatar.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
 
-const avatarVariants = cva(
+const moonUIAvatarVariantsPro = cva(
   "relative flex shrink-0 overflow-hidden",
   {
     variants: {
@@ -39,11 +39,11 @@ const avatarVariants = cva(
   }
 );
 
-export interface AvatarProps 
+export interface MoonUIAvatarProProps 
   extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-    VariantProps<typeof avatarVariants> {}
+    VariantProps<typeof moonUIAvatarVariantsPro> {}
 
-const Avatar = React.forwardRef<
+const MoonUIAvatarPro = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   AvatarProps
 >(({ className, size, radius, variant, ...props }, ref) => (
@@ -53,9 +53,9 @@ const Avatar = React.forwardRef<
     {...props}
   />
 ));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
+MoonUIAvatar.displayName = AvatarPrimitive.Root.displayName;
 
-const AvatarImage = React.forwardRef<
+const MoonUIAvatarImagePro = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
@@ -65,9 +65,9 @@ const AvatarImage = React.forwardRef<
     {...props}
   />
 ));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+MoonUIAvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
-const AvatarFallback = React.forwardRef<
+const MoonUIAvatarFallbackPro = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
@@ -80,7 +80,7 @@ const AvatarFallback = React.forwardRef<
     {...props}
   />
 ));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+MoonUIAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // Avatar Group Component for displaying multiple avatars
 interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -89,7 +89,7 @@ interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   overlapOffset?: number;
 }
 
-const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+const MoonUIAvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
   ({ className, limit, avatars, overlapOffset = -8, ...props }, ref) => {
     const visibleAvatars = limit ? avatars.slice(0, limit) : avatars;
     const remainingCount = limit ? Math.max(0, avatars.length - limit) : 0;
@@ -130,6 +130,9 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
     );
   }
 );
-AvatarGroup.displayName = "AvatarGroup";
+MoonUIAvatarGroup.displayName = "AvatarGroup";
 
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup };
+export { MoonUIAvatarPro, MoonUIAvatarImagePro, MoonUIAvatarFallbackPro, AvatarGroup  };
+
+// Backward compatibility exports
+export { MoonUIAvatarPro as Avatar, MoonUIAvatarImagePro as AvatarImage, MoonUIAvatarFallbackPro as AvatarFallback };

package/src/components/ui/badge.tsx

@@ -9,7 +9,7 @@ import { cn } from "../../lib/utils";
  * Dark ve light modda uyumlu, erişilebilir ve çeşitli varyantlar sunar.
  */
 
-const badgeVariants = cva(
+const moonUIBadgeVariantsPro = cva(
   ["inline-flex items-center gap-1.5", 
   "font-medium transition-colors duration-200", 
   "border focus:outline-none",
@@ -94,9 +94,9 @@ const badgeVariants = cva(
   }
 );
 
-export interface BadgeProps
+export interface MoonUIBadgeProProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    Omit<VariantProps<typeof badgeVariants>, 'variant'> {
+    Omit<VariantProps<typeof moonUIBadgeVariantsPro>, 'variant'> {
   withDot?: boolean;
   dotColor?: string;
   removable?: boolean;
@@ -120,7 +120,7 @@ export interface BadgeProps
  * @param props.leftIcon - Badge'in solunda görüntülenecek ikon
  * @param props.rightIcon - Badge'in sağında görüntülenecek ikon
  */
-function Badge({
+function MoonUIBadgePro({
   className,
   variant,
   size,
@@ -133,7 +133,7 @@ function Badge({
   rightIcon,
   children,
   ...props
-}: BadgeProps) {
+}: MoonUIBadgeProProps) {
   // Auto-assign icons and content for special variants
   let autoLeftIcon = leftIcon;
   let autoChildren = children;
@@ -162,7 +162,7 @@ function Badge({
 
   return (
     <div 
-      className={cn(badgeVariants({ variant, size, radius }), className)} 
+      className={cn(moonUIBadgeVariantsPro({ variant, size, radius }), className)} 
       data-removable={removable ? "" : undefined}
       {...props}
     >
@@ -222,4 +222,7 @@ function Badge({
   );
 }
 
-export { Badge, badgeVariants };
+export { MoonUIBadgePro, moonUIBadgeVariantsPro  };
+
+// Backward compatibility exports
+export { MoonUIBadgePro as Badge, moonUIBadgeVariantsPro as badgeVariants };

package/src/components/ui/card.tsx

@@ -4,7 +4,7 @@ import { motion, type HTMLMotionProps } from "framer-motion";
 import { cn } from "../../lib/utils";
 import { microInteractionVariants, hoverAnimations, tapAnimations } from "../../lib/micro-interactions";
 
-const cardVariants = cva(
+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",
   {
     variants: {
@@ -42,14 +42,14 @@ const cardVariants = cva(
   }
 );
 
-export interface CardProps
+export interface MoonUICardProProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof cardVariants> {
+    VariantProps<typeof moonUICardVariantsPro> {
   asChild?: boolean;
   microInteraction?: "lift" | "glow" | "scale" | "none";
 }
 
-const Card = React.forwardRef<HTMLDivElement, CardProps>(
+const MoonUICardPro = React.forwardRef<HTMLDivElement, MoonUICardProProps>(
   ({ className, variant, size, radius, interactive, microInteraction = "lift", ...props }, ref) => {
     // Interactive özelliği varsa motion.div, yoksa normal div kullan
     if (interactive && microInteraction !== "none") {
@@ -80,9 +80,9 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     );
   }
 );
-Card.displayName = "Card";
+MoonUICardPro.displayName = "MoonUICardPro";
 
-const CardHeader = React.forwardRef<
+const MoonUICardHeaderPro = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
@@ -92,9 +92,9 @@ const CardHeader = React.forwardRef<
     {...props}
   />
 ));
-CardHeader.displayName = "CardHeader";
+MoonUICardHeaderPro.displayName = "MoonUICardHeaderPro";
 
-const CardTitle = React.forwardRef<
+const MoonUICardTitlePro = React.forwardRef<
   HTMLHeadingElement,
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
@@ -104,9 +104,9 @@ const CardTitle = React.forwardRef<
     {...props}
   />
 ));
-CardTitle.displayName = "CardTitle";
+MoonUICardTitlePro.displayName = "MoonUICardTitlePro";
 
-const CardDescription = React.forwardRef<
+const MoonUICardDescriptionPro = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
@@ -116,17 +116,17 @@ const CardDescription = React.forwardRef<
     {...props}
   />
 ));
-CardDescription.displayName = "CardDescription";
+MoonUICardDescriptionPro.displayName = "MoonUICardDescriptionPro";
 
-const CardContent = React.forwardRef<
+const MoonUICardContentPro = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("pt-0", className)} {...props} />
 ));
-CardContent.displayName = "CardContent";
+MoonUICardContentPro.displayName = "MoonUICardContentPro";
 
-const CardFooter = React.forwardRef<
+const MoonUICardFooterPro = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
@@ -136,6 +136,9 @@ const CardFooter = React.forwardRef<
     {...props}
   />
 ));
-CardFooter.displayName = "CardFooter";
+MoonUICardFooterPro.displayName = "MoonUICardFooterPro";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { MoonUICardPro, MoonUICardHeaderPro, MoonUICardFooterPro, MoonUICardTitlePro, MoonUICardDescriptionPro, MoonUICardContentPro  };
+
+// Backward compatibility exports
+export { MoonUICardPro as Card, MoonUICardHeaderPro as CardHeader, MoonUICardFooterPro as CardFooter, MoonUICardTitlePro as CardTitle, MoonUICardDescriptionPro as CardDescription, MoonUICardContentPro as CardContent };

package/src/components/ui/checkbox.tsx

@@ -14,7 +14,7 @@ import { cn } from "../../lib/utils";
  * Form elemanları ve seçim listeleri için kullanılır.
  */
 
-const checkboxVariants = cva(
+const moonUICheckboxVariantsPro = cva(
   "peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground",
   {
     variants: {
@@ -53,9 +53,9 @@ const checkboxVariants = cva(
   }
 );
 
-export interface CheckboxProps
+export interface MoonUICheckboxProProps
   extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    VariantProps<typeof checkboxVariants> {
+    VariantProps<typeof moonUICheckboxVariantsPro> {
   /**
    * İndeterminate durumu - grup seçimlerinde bazı öğeler seçilmişse kullanılır
    */
@@ -66,7 +66,7 @@ export interface CheckboxProps
   icon?: React.ReactNode;
 }
 
-const Checkbox = React.forwardRef<
+const MoonUICheckboxPro = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   CheckboxProps
 >(({ 
@@ -114,7 +114,7 @@ const Checkbox = React.forwardRef<
     </CheckboxPrimitive.Root>
   );
 });
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+MoonUICheckbox.displayName = CheckboxPrimitive.Root.displayName;
 
 // CheckboxGroup bileşeni
 interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -132,7 +132,7 @@ interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+const MoonUICheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
   ({ className, orientation = "vertical", spacing = "1rem", children, ...props }, ref) => {
     return (
       <div
@@ -151,7 +151,7 @@ const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
     );
   }
 );
-CheckboxGroup.displayName = "CheckboxGroup";
+MoonUICheckboxGroup.displayName = "CheckboxGroup";
 
 // CheckboxLabel bileşeni
 interface CheckboxLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
@@ -173,7 +173,7 @@ interface CheckboxLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
   disabled?: boolean;
 }
 
-const CheckboxLabel = React.forwardRef<HTMLLabelElement, CheckboxLabelProps>(
+const MoonUICheckboxLabel = React.forwardRef<HTMLLabelElement, CheckboxLabelProps>(
   ({ className, htmlFor, children, position = "end", disabled = false, ...props }, ref) => {
     return (
       <label
@@ -192,7 +192,7 @@ const CheckboxLabel = React.forwardRef<HTMLLabelElement, CheckboxLabelProps>(
     );
   }
 );
-CheckboxLabel.displayName = "CheckboxLabel";
+MoonUICheckboxLabel.displayName = "CheckboxLabel";
 
 // Checkbox ve Label içeren bileşen
 interface CheckboxWithLabelProps extends CheckboxProps {
@@ -210,7 +210,7 @@ interface CheckboxWithLabelProps extends CheckboxProps {
   labelClassName?: string;
 }
 
-const CheckboxWithLabel = React.forwardRef<
+const MoonUICheckboxWithLabel = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   CheckboxWithLabelProps
 >(({ 
@@ -251,6 +251,9 @@ const CheckboxWithLabel = React.forwardRef<
     </div>
   );
 });
-CheckboxWithLabel.displayName = "CheckboxWithLabel";
+MoonUICheckboxWithLabel.displayName = "CheckboxWithLabel";
 
-export { Checkbox, CheckboxGroup, CheckboxLabel, CheckboxWithLabel };
+export { MoonUICheckboxPro, CheckboxGroup, CheckboxLabel, CheckboxWithLabel  };
+
+// Backward compatibility exports
+export { MoonUICheckboxPro as Checkbox, MoonUILabelPro as Label };

package/src/components/ui/color-picker.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from "react"
 import { cn } from "../../lib/utils"
 
-interface ColorPickerProps {
+interface MoonUIColorPickerProProps {
   value?: string
   onChange?: (color: string) => void
   className?: string
@@ -21,7 +21,7 @@ const defaultColors = [
 ]
 
 // React 19 compatible - removed forwardRef
-export const ColorPicker = ({ 
+export const MoonUIColorPickerPro = ({ 
   value = "#000000", 
   onChange, 
   className, 
@@ -29,7 +29,7 @@ export const ColorPicker = ({
   showPresets = true,
   size = "default",
   presets = defaultColors
-}: ColorPickerProps) => {
+}: MoonUIColorPickerProProps) => {
   const [currentColor, setCurrentColor] = useState(value)
 
   const handleColorChange = (color: string) => {
@@ -92,4 +92,6 @@ export const ColorPicker = ({
   )
 }
 
-export default ColorPicker
+// Backward compatibility exports
+export { MoonUIColorPickerPro as ColorPicker }
+export default MoonUIColorPickerPro