@moontra/moonui-pro 2.2.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "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,7 +4,7 @@ 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 { MoonUIBadgePro as Badge } from "../ui/badge"
 import { Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
 import { Star, GitFork, Eye, Users, ExternalLink, Github, Lock, Sparkles, RefreshCw } from "lucide-react"

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/optimized-image/index.tsx

@@ -4,7 +4,7 @@ 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 { MoonUIBadgePro as Badge } from "../ui/badge"
 import { Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
 import { 

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) => (
@@ -55,7 +55,7 @@ const Avatar = React.forwardRef<
 ));
 Avatar.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) => (
@@ -67,7 +67,7 @@ const AvatarImage = React.forwardRef<
 ));
 AvatarImage.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) => (
@@ -132,4 +132,7 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
 );
 AvatarGroup.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
 >(({ 
@@ -253,4 +253,7 @@ const CheckboxWithLabel = React.forwardRef<
 });
 CheckboxWithLabel.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

package/src/components/ui/dialog.tsx

@@ -15,10 +15,10 @@ import { cn } from "../../lib/utils";
  * Provides a premium appearance with dark and light mode compatibility and fluid animations.
  */
 
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
+const MoonUIDialogPro = DialogPrimitive.Root;
+const MoonUIDialogTriggerPro = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
+const MoonUIDialogClosePro = DialogPrimitive.Close;
 
 const overlayVariants = cva(
     "fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -111,7 +111,7 @@ const dialogContentVariants = cva(
     }
 );
 
-interface DialogContentProps
+interface MoonUIDialogContentProProps
     extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'title'>,
         VariantProps<typeof dialogContentVariants> {
     /** X butonunu gizle */
@@ -134,7 +134,7 @@ interface DialogContentProps
     onClose?: () => void;
 }
 
-const DialogContent = React.forwardRef<
+const MoonUIDialogContentPro = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     DialogContentProps
 >(
@@ -245,7 +245,7 @@ const DialogContent = React.forwardRef<
 );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
+const MoonUIDialogHeaderPro = ({
     className,
     ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -257,9 +257,9 @@ const DialogHeader = ({
         {...props}
     />
 );
-DialogHeader.displayName = "DialogHeader";
+MoonUIDialogHeaderPro.displayName = "MoonUIDialogHeaderPro";
 
-const DialogFooter = ({
+const MoonUIDialogFooterPro = ({
     className,
     ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -271,9 +271,9 @@ const DialogFooter = ({
         {...props}
     />
 );
-DialogFooter.displayName = "DialogFooter";
+MoonUIDialogFooterPro.displayName = "MoonUIDialogFooterPro";
 
-const DialogTitle = React.forwardRef<
+const MoonUIDialogTitlePro = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Title>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
@@ -288,7 +288,7 @@ const DialogTitle = React.forwardRef<
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
+const MoonUIDialogDescriptionPro = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Description>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
@@ -319,14 +319,16 @@ const DialogForm = React.forwardRef<
 ));
 DialogForm.displayName = "DialogForm";
 
-export {
-    Dialog,
-    DialogTrigger,
-    DialogContent,
-    DialogHeader,
-    DialogFooter,
-    DialogTitle,
-    DialogDescription,
-    DialogClose,
+export { MoonUIDialogPro,
+    MoonUIDialogTriggerPro,
+    MoonUIDialogContentPro,
+    MoonUIDialogHeaderPro,
+    MoonUIDialogFooterPro,
+    MoonUIDialogTitlePro,
+    MoonUIDialogDescriptionPro,
+    MoonUIDialogClosePro,
     DialogForm,
-};
+ };
+
+// Backward compatibility exports
+export { MoonUIDialogPro as Dialog, MoonUIDialogContentPro as DialogContent, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogTriggerPro as DialogTrigger, MoonUIDialogClosePro as DialogClose };