@moontra/moonui-pro 2.20.2 → 2.20.4

package/src/components/ui/badge.tsx

@@ -1,230 +0,0 @@
-"use client"
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-
-/**
- * Premium Badge Component
- * 
- * Durum, kategori ve etiketleme için yüksek kaliteli badge bileşeni.
- * Dark ve light modda uyumlu, erişilebilir ve çeşitli varyantlar sunar.
- */
-
-const moonUIBadgeVariantsPro = cva(
-  ["inline-flex items-center gap-1.5", 
-  "font-medium transition-colors duration-200", 
-  "border focus:outline-none",
-  "focus-visible:ring-2 focus-visible:ring-offset-1"],
-  {
-    variants: {
-      variant: {
-        primary: [
-          "border-transparent bg-primary text-primary-foreground",
-          "hover:bg-primary-hover dark:hover:bg-primary/90",
-          "focus-visible:ring-primary/30 dark:focus-visible:ring-primary/40",
-          "dark:bg-primary/90 dark:text-white dark:shadow-inner dark:shadow-primary/10",
-        ],
-        secondary: [
-          "border-transparent bg-secondary text-secondary-foreground",
-          "hover:bg-gray-200 dark:hover:bg-gray-700/90",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:bg-gray-800 dark:text-gray-100 dark:shadow-inner dark:shadow-gray-950/10",
-        ],
-        outline: [
-          "border-gray-200 dark:border-gray-700",
-          "bg-transparent text-foreground",
-          "hover:border-gray-300 dark:hover:border-gray-600",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:bg-transparent dark:backdrop-blur-sm",
-        ],
-        destructive: [
-          "border-transparent bg-error text-white",
-          "hover:bg-error/90 dark:hover:bg-error/80",
-          "focus-visible:ring-error/30 dark:focus-visible:ring-error/25",
-          "dark:bg-error/90 dark:text-white dark:shadow-inner dark:shadow-error/10",
-        ],
-        success: [
-          "border-transparent bg-success text-white",
-          "hover:bg-success/90 dark:hover:bg-success/80",
-          "focus-visible:ring-success/30 dark:focus-visible:ring-success/25",
-          "dark:bg-success/90 dark:text-white dark:shadow-inner dark:shadow-success/10",
-        ],
-        warning: [
-          "border-transparent bg-warning text-white",
-          "hover:bg-warning/90 dark:hover:bg-warning/80",
-          "focus-visible:ring-warning/30 dark:focus-visible:ring-warning/25",
-          "dark:bg-warning/90 dark:text-gray-900 dark:shadow-inner dark:shadow-warning/10",
-        ],
-        ghost: [
-          "border-transparent bg-transparent text-foreground",
-          "hover:bg-gray-100 dark:hover:bg-gray-800/80",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:backdrop-blur-sm",
-          "transition-colors duration-200",
-        ],
-        pro: [
-          "border-transparent bg-gradient-to-r from-purple-600 to-pink-600 text-white",
-          "hover:from-purple-700 hover:to-pink-700",
-          "focus-visible:ring-purple-400/30 dark:focus-visible:ring-purple-500/40",
-          "shadow-md dark:shadow-lg dark:shadow-purple-500/10",
-        ],
-        admin: [
-          "border-transparent bg-gradient-to-r from-purple-600 to-pink-600 text-white",
-          "hover:from-purple-700 hover:to-pink-700", 
-          "focus-visible:ring-purple-400/30 dark:focus-visible:ring-purple-500/40",
-          "shadow-md dark:shadow-lg dark:shadow-purple-500/10",
-        ],
-      },
-      size: {
-        sm: "h-5 px-2 text-xs",
-        md: "h-6 px-3 text-sm",
-        lg: "h-8 px-4 text-base",
-      },
-      radius: {
-        default: "rounded-full",
-        sm: "rounded-md",
-        lg: "rounded-xl",
-        none: "rounded-none",
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md",
-      radius: "default",
-    },
-  }
-);
-
-export interface MoonUIBadgeProProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    Omit<VariantProps<typeof moonUIBadgeVariantsPro>, 'variant'> {
-  withDot?: boolean;
-  dotColor?: string;
-  removable?: boolean;
-  onRemove?: () => void;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'ghost' | 'pro' | 'admin';
-}
-
-/**
- * Premium Badge Component
- * 
- * @param props - Badge bileşeni özellikleri
- * @param props.variant - Badgenin görsel varyantı
- * @param props.size - Badge boyutu
- * @param props.radius - Köşe yuvarlama stili
- * @param props.withDot - Başında nokta gösterimi
- * @param props.dotColor - Noktanın rengi (özel)
- * @param props.removable - Kaldırılabilir badge (X simgesi ile)
- * @param props.onRemove - Kaldırma işlevi
- * @param props.leftIcon - Badge'in solunda görüntülenecek ikon
- * @param props.rightIcon - Badge'in sağında görüntülenecek ikon
- */
-function MoonUIBadgePro({
-  className,
-  variant,
-  size,
-  radius,
-  withDot,
-  dotColor,
-  removable,
-  onRemove,
-  leftIcon,
-  rightIcon,
-  children,
-  ...props
-}: MoonUIBadgeProProps) {
-  // Auto-assign icons and content for special variants
-  let autoLeftIcon = leftIcon;
-  let autoChildren = children;
-  
-  if (variant === 'pro') {
-    // Auto Sparkles icon for pro
-    autoLeftIcon = leftIcon || (
-      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-3 h-3">
-        <path d="M12 0L13.09 8.26L22 9L13.09 9.74L12 18L10.91 9.74L2 9L10.91 8.26L12 0Z" fill="currentColor"/>
-        <path d="M19 5L19.5 7L21 7.5L19.5 8L19 10L18.5 8L17 7.5L18.5 7L19 5Z" fill="currentColor"/>
-        <path d="M19 15L19.5 17L21 17.5L19.5 18L19 20L18.5 18L17 17.5L18.5 17L19 15Z" fill="currentColor"/>
-      </svg>
-    );
-    autoChildren = children || 'Pro';
-  }
-  
-  if (variant === 'admin') {
-    // Auto CheckCircle icon for admin
-    autoLeftIcon = leftIcon || (
-      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-3 h-3">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
-      </svg>
-    );
-    autoChildren = children || 'Admin Pro';
-  }
-
-  return (
-    <div 
-      className={cn(moonUIBadgeVariantsPro({ variant, size, radius }), className)} 
-      data-removable={removable ? "" : undefined}
-      {...props}
-    >
-      {withDot && (
-        <span 
-          className={cn(
-            "h-2 w-2 rounded-full", 
-            dotColor || 
-              (variant === "destructive" ? "bg-white" :
-               variant === "success" ? "bg-white" :
-               variant === "warning" ? "bg-white" :
-               variant === "secondary" ? "bg-secondary-foreground" :
-               variant === "outline" ? "bg-foreground" :
-               variant === "ghost" ? "bg-foreground" :
-               variant === "pro" ? "bg-white" :
-               variant === "admin" ? "bg-white" :
-               "bg-primary-foreground")
-          )} 
-          aria-hidden="true"
-        />
-      )}
-      {autoLeftIcon && (
-        <span className="inline-flex shrink-0">
-          {autoLeftIcon}
-        </span>
-      )}
-      <span className="truncate">{autoChildren}</span>
-      {rightIcon && (
-        <span className="inline-flex shrink-0">
-          {rightIcon}
-        </span>
-      )}
-      {removable && onRemove && (
-        <button 
-          type="button"
-          className="ml-1 -mr-1 h-3.5 w-3.5 rounded-full inline-flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove();
-          }}
-          aria-label="Remove badge"
-        >
-          <svg 
-            width="8" 
-            height="8" 
-            viewBox="0 0 8 8" 
-            fill="none" 
-            xmlns="http://www.w3.org/2000/svg"
-            className="opacity-70"
-            aria-hidden="true"
-          >
-            <path d="M0.799988 7.19999L7.19999 0.799988M0.799988 0.799988L7.19999 7.19999" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}
-
-export { MoonUIBadgePro, moonUIBadgeVariantsPro  };
-
-// Backward compatibility exports
-export { MoonUIBadgePro as Badge, moonUIBadgeVariantsPro as badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -1,216 +0,0 @@
-"use client"
-
-import * as React from "react";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-const MoonUIbreadcrumbVariantsPro = cva(
-  "flex items-center gap-1.5 text-sm",
-  {
-    variants: {
-      variant: {
-        default: "dark:text-gray-100 transition-colors",
-        muted: "text-muted-foreground dark:text-gray-400 transition-colors",
-        ghost: "text-foreground/60 dark:text-gray-300/60 transition-colors",
-      },
-      size: {
-        default: "text-sm",
-        sm: "text-xs",
-        lg: "text-base",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-interface BreadcrumbProps
-  extends React.HTMLAttributes<HTMLElement>,
-    VariantProps<typeof MoonUIbreadcrumbVariantsPro> {
-  separator?: React.ReactNode;
-  showHomeIcon?: boolean;
-}
-
-interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {
-  collapsed?: boolean;
-  collapsedWidth?: number;
-}
-
-interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
-  isCurrent?: boolean;
-  href?: string;
-  asChild?: boolean;
-}
-
-interface BreadcrumbSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Custom separator icon or text */
-  icon?: React.ReactNode;
-}
-
-interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Custom ellipsis icon */
-  icon?: React.ReactNode;
-}
-
-const MoonUIBreadcrumbPro = React.forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ className, variant, size, ...props }, ref) => (
-    <nav
-      ref={ref}
-      className={cn(MoonUIbreadcrumbVariantsPro({ variant, size }), className)}
-      aria-label="breadcrumb"
-      {...props}
-    />
-  )
-);
-MoonUIBreadcrumbPro.displayName = "BreadcrumbPro";
-
-const MoonUIBreadcrumbListPro = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
-  ({ className, collapsed, collapsedWidth = 3, ...props }, ref) => {
-    const MoonUIchildrenArrayPro = React.Children.toArray(props.children).filter(Boolean);
-    const MoonUIchildCountPro = MoonUIchildrenArrayPro.length;
-
-    if (collapsed && MoonUIchildCountPro > collapsedWidth) {
-      const MoonUIfirstItemPro = MoonUIchildrenArrayPro[0];
-      // const MoonUImiddleItemsPro = childrenArray.slice(1, -2); // Uncomment when needed
-      const MoonUIlastTwoItemsPro = MoonUIchildrenArrayPro.slice(-2);
-
-      return (
-        <ol
-          ref={ref}
-          className={cn(
-            "flex flex-wrap items-center gap-1.5 sm:gap-2.5",
-            className
-          )}
-          {...props}
-        >
-          {MoonUIfirstItemPro}
-          <MoonUIBreadcrumbEllipsisPro />
-          {MoonUIlastTwoItemsPro}
-        </ol>
-      );
-    }
-
-    return (
-      <ol
-        ref={ref}
-        className={cn(
-          "flex flex-wrap items-center gap-1.5 sm:gap-2.5",
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-);
-MoonUIBreadcrumbListPro.displayName = "BreadcrumbListPro";
-
-const MoonUIBreadcrumbItemPro = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
-  ({ className, isCurrent, href, asChild = false, ...props }, ref) => {
-    const MoonUICompPro = asChild ? React.Fragment : href ? "a" : "span";
-    const MoonUIitemPropsPro = asChild ? {} : href ? { href } : {};
-
-    return (
-      <li
-        ref={ref}
-        className={cn("inline-flex items-center gap-1.5", className)}
-        aria-current={isCurrent ? "page" : undefined}
-        {...props}
-      >
-        <MoonUICompPro 
-          className={cn(
-            "transition-colors duration-200 hover:text-foreground",
-            isCurrent 
-              ? "font-medium text-foreground dark:text-white dark:text-opacity-95" 
-              : "text-muted-foreground hover:text-foreground dark:text-gray-400 dark:hover:text-gray-200 dark:hover:text-opacity-95 hover:underline hover:underline-offset-4 hover:decoration-gray-300/30"
-          )}
-          {...MoonUIitemPropsPro}
-        >
-          {props.children}
-        </MoonUICompPro>
-      </li>
-    );
-  }
-);
-MoonUIBreadcrumbItemPro.displayName = "BreadcrumbItemPro";
-
-const MoonUIBreadcrumbSeparatorPro = ({
-  children,
-  className,
-  ...props
-}: BreadcrumbSeparatorProps) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("text-muted-foreground dark:text-gray-500 opacity-70", className)}
-    {...props}
-  >
-    {children || <ChevronRight className="h-3.5 w-3.5" />}
-  </span>
-);
-MoonUIBreadcrumbSeparatorPro.displayName = "BreadcrumbSeparatorPro";
-
-const MoonUIBreadcrumbEllipsisPro = ({
-  className,
-  ...props
-}: BreadcrumbEllipsisProps) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex items-center text-muted-foreground dark:text-gray-500 dark:hover:text-gray-400 transition-colors duration-200", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-MoonUIBreadcrumbEllipsisPro.displayName = "BreadcrumbEllipsisPro";
-
-const MoonUIBreadcrumbLinkPro = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
-  ({ className, href, ...props }, ref) => (
-    <a
-      ref={ref}
-      href={href}
-      className={cn(
-        "transition-colors duration-200 hover:text-foreground text-muted-foreground hover:underline hover:underline-offset-4 hover:decoration-gray-300/30 dark:text-gray-400 dark:hover:text-gray-200",
-        className
-      )}
-      {...props}
-    />
-  )
-);
-MoonUIBreadcrumbLinkPro.displayName = "BreadcrumbLinkPro";
-
-const MoonUIBreadcrumbPagePro = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
-  ({ className, ...props }, ref) => (
-    <span
-      ref={ref}
-      className={cn(
-        "font-medium text-foreground dark:text-white dark:text-opacity-95",
-        className
-      )}
-      {...props}
-    />
-  )
-);
-MoonUIBreadcrumbPagePro.displayName = "BreadcrumbPagePro";
-
-
-// Internal aliases for Pro component usage
-export const breadcrumbVariantsInternal = MoonUIbreadcrumbVariantsPro
-export const BreadcrumbInternal = MoonUIBreadcrumbPro
-export const BreadcrumbListInternal = MoonUIBreadcrumbListPro
-export const BreadcrumbItemInternal = MoonUIBreadcrumbItemPro
-export const BreadcrumbSeparatorInternal = MoonUIBreadcrumbSeparatorPro
-export const BreadcrumbEllipsisInternal = MoonUIBreadcrumbEllipsisPro
-export const BreadcrumbLinkInternal = MoonUIBreadcrumbLinkPro
-export const BreadcrumbPageInternal = MoonUIBreadcrumbPagePro
-
-// Pro exports  
-export { MoonUIbreadcrumbVariantsPro, MoonUIBreadcrumbPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbSeparatorPro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbPagePro }
-
-// Clean exports (without MoonUI prefix for easier usage)
-export { MoonUIbreadcrumbVariantsPro as breadcrumbVariants, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbPagePro as BreadcrumbPage };

package/src/components/ui/button.tsx

@@ -1,228 +0,0 @@
-"use client"
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { Loader2 } from "lucide-react";
-
-/**
- * MoonUI Button Pro Component
- * 
- * A world-class, accessible, and versatile button component.
- * Pixel-perfect design with extensive variants and states.
- */
-const moonUIButtonProVariants = cva(
-  ["inline-flex items-center justify-center gap-2 whitespace-nowrap",
-  "font-medium relative",
-  "transition-all duration-200 ease-out",
-  "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:transform-none"],
-  {
-    variants: {
-      variant: {
-        primary: [
-          "bg-primary text-primary-foreground",
-          "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-gray-100 text-gray-900",
-          "dark:bg-gray-800 dark:text-gray-100",
-          "hover:bg-gray-200 dark:hover:bg-gray-700",
-          "active:bg-gray-300 dark:active:bg-gray-600",
-          "border border-gray-200 dark:border-gray-700",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "shadow-sm hover:shadow-md",
-        ],
-        outline: [
-          "bg-background text-foreground",
-          "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-gray-700",
-          "dark:text-gray-300",
-          "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100",
-          "active:bg-gray-200 dark:active:bg-gray-700",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "transition-all duration-200",
-        ],
-        destructive: [
-          "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-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/80 active:text-primary/70",
-          "p-0 h-auto",
-          "transition-colors duration-200",
-        ],
-        gradient: [
-          "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
-          "hover:from-purple-600 hover:to-pink-600",
-          "active:from-purple-700 active:to-pink-700",
-          "shadow-xl shadow-purple-500/40",
-          "hover:shadow-2xl hover:shadow-purple-500/50",
-          "focus-visible:ring-purple-500/50",
-          "transition-all duration-300",
-        ],
-        glow: [
-          "bg-blue-500 text-white",
-          "shadow-[0_0_30px_rgba(59,130,246,0.5)]",
-          "hover:shadow-[0_0_40px_rgba(59,130,246,0.7)]",
-          "active:shadow-[0_0_20px_rgba(59,130,246,0.4)]",
-          "hover:bg-blue-600",
-          "focus-visible:ring-blue-500/50",
-          "transition-all duration-300",
-        ],
-        soft: [
-          "bg-primary/10 text-primary",
-          "hover:bg-primary/20",
-          "active:bg-primary/30",
-          "focus-visible:ring-primary/50",
-          "dark:bg-primary/20 dark:text-primary-foreground",
-          "dark:hover:bg-primary/30 dark:active:bg-primary/40",
-          "transition-colors duration-200",
-        ],
-        glass: [
-          "bg-white/10 backdrop-blur-md text-foreground",
-          "border border-white/20",
-          "hover:bg-white/20 hover:border-white/30",
-          "active:bg-white/30",
-          "shadow-lg",
-          "focus-visible:ring-white/50",
-          "dark:bg-gray-800/10 dark:border-gray-700/20",
-          "dark:hover:bg-gray-800/20 dark:hover:border-gray-700/30",
-          "transition-all duration-200",
-        ],
-        neon: [
-          "bg-transparent text-green-400",
-          "border-2 border-green-400",
-          "hover:bg-green-400 hover:text-gray-900",
-          "hover:shadow-[0_0_30px_rgba(74,222,128,0.6)]",
-          "active:shadow-[0_0_15px_rgba(74,222,128,0.4)]",
-          "focus-visible:ring-green-400/50",
-          "transition-all duration-300",
-        ],
-      },
-      size: {
-        xs: "h-7 px-2.5 text-xs",
-        sm: "h-8 px-3 text-sm",
-        md: "h-10 px-4 text-base",
-        lg: "h-12 px-6 text-lg",
-        xl: "h-14 px-8 text-xl",
-        icon: "h-10 w-10 p-2",
-        "icon-sm": "h-8 w-8 p-1.5",
-        "icon-lg": "h-12 w-12 p-3",
-      },
-      rounded: {
-        default: "rounded-xl",
-        full: "rounded-full",
-        none: "rounded-none",
-        sm: "rounded-lg",
-        lg: "rounded-2xl",
-      },
-      fullWidth: {
-        true: "w-full",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md",
-      rounded: "default",
-      fullWidth: false,
-    },
-  }
-);
-
-// MoonUI Button Pro component props
-export interface MoonUIButtonProProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof moonUIButtonProVariants> {
-  asChild?: boolean;
-  loading?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-}
-
-/**
- * MoonUI Button Pro Component
- * 
- * @param props - MoonUI Button Pro component properties
- * @param props.variant - Visual variant (primary, secondary, ghost, etc.)
- * @param props.size - Button size (xs, sm, md, lg, xl)
- * @param props.loading - Loading state display
- * @param props.leftIcon - Icon on the left side
- * @param props.rightIcon - Icon on the right side
- * @param props.fullWidth - Full width display
- * @param props.rounded - Corner rounding style (default, full, none)
- * @param props.asChild - For Radix UI polymorphic component
- */
-const MoonUIButtonPro = React.forwardRef<HTMLButtonElement, MoonUIButtonProProps>(
-  ({ 
-    className, 
-    variant, 
-    size, 
-    rounded, 
-    fullWidth,
-    asChild = false,
-    loading = false,
-    leftIcon,
-    rightIcon,
-    children,
-    disabled,
-    ...props 
-  }, ref) => {
-    // Radix UI'ın asChild pattern'i için - "as" prop yerine
-    const Comp = asChild ? "button" : "button";
-    
-    return (
-      <Comp
-        className={cn(moonUIButtonProVariants({ variant, size, rounded, fullWidth, className }))}
-        ref={ref}
-        disabled={disabled || loading}
-        data-loading={loading ? "" : undefined}
-        {...props}
-      >
-        {loading && (
-          <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
-        )}
-        {!loading && leftIcon}
-        {children}
-        {!loading && rightIcon}
-      </Comp>
-    );
-  }
-);
-
-MoonUIButtonPro.displayName = "MoonUIButtonPro";
-
-export { MoonUIButtonPro, moonUIButtonProVariants };
-
-// Backward compatibility exports
-export { MoonUIButtonPro as Button, moonUIButtonProVariants as buttonVariants };
-export type { MoonUIButtonProProps as ButtonProps };