@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/ui/avatar.tsx

@@ -1,153 +0,0 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-const moonUIAvatarVariantsPro = cva(
-  "relative flex shrink-0 overflow-hidden",
-  {
-    variants: {
-      size: {
-        default: "h-10 w-10",
-        xs: "h-6 w-6",
-        sm: "h-8 w-8",
-        md: "h-10 w-10",
-        lg: "h-12 w-12",
-        xl: "h-16 w-16",
-        "2xl": "h-20 w-20",
-      },
-      radius: {
-        default: "rounded-full",
-        sm: "rounded-md",
-        lg: "rounded-xl",
-        full: "rounded-full",
-        none: "rounded-none",
-      },
-      variant: {
-        default: "",
-        ring: "ring-2 ring-gray-300 dark:ring-gray-600",
-        ringOffset: "ring-2 ring-gray-300 dark:ring-gray-600 ring-offset-2 ring-offset-background dark:ring-offset-gray-950",
-        border: "border-2 border-gray-200 dark:border-gray-800"
-      }
-    },
-    defaultVariants: {
-      size: "default",
-      radius: "default",
-      variant: "default"
-    },
-  }
-);
-
-export interface MoonUIAvatarProProps 
-  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-    VariantProps<typeof moonUIAvatarVariantsPro> {}
-
-const MoonUIAvatarPro = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  MoonUIAvatarProProps
->(({ className, size, radius, variant, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(moonUIAvatarVariantsPro({ size, radius, variant }), className)}
-    {...props}
-  />
-));
-MoonUIAvatarPro.displayName = AvatarPrimitive.Root.displayName;
-
-const MoonUIAvatarImagePro = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-));
-MoonUIAvatarImagePro.displayName = AvatarPrimitive.Image.displayName;
-
-const MoonUIAvatarFallbackPro = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center bg-muted",
-      className
-    )}
-    {...props}
-  />
-));
-MoonUIAvatarFallbackPro.displayName = AvatarPrimitive.Fallback.displayName;
-
-// Avatar Group Component for displaying multiple avatars
-interface MoonUIAvatarGroupProProps extends React.HTMLAttributes<HTMLDivElement> {
-  max?: number;
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-  children?: React.ReactNode;
-  overlapOffset?: number;
-}
-
-const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, MoonUIAvatarGroupProProps>(
-  ({ className, max = 3, size = "md", children, overlapOffset, ...props }, ref) => {
-    const childrenArray = React.Children.toArray(children);
-    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
-    const remainingCount = max ? Math.max(0, childrenArray.length - max) : 0;
-
-    // Calculate overlap offset based on size
-    const defaultOffsets = {
-      xs: -4,
-      sm: -6,
-      md: -8,
-      lg: -10,
-      xl: -12,
-      "2xl": -16,
-    };
-    const finalOffset = overlapOffset ?? defaultOffsets[size as keyof typeof defaultOffsets] ?? -8;
-
-    return (
-      <div
-        ref={ref}
-        className={cn("flex items-center", className)}
-        {...props}
-      >
-        <div className="flex">
-          {visibleChildren.map((child, index) => (
-            <div 
-              key={index} 
-              className="relative ring-2 ring-background rounded-full"
-              style={{ 
-                marginLeft: index === 0 ? 0 : `${finalOffset}px`,
-                zIndex: visibleChildren.length - index 
-              }}
-            >
-              {React.isValidElement(child) && child.type === MoonUIAvatarPro
-                ? React.cloneElement(child as React.ReactElement<any>, { size })
-                : child}
-            </div>
-          ))}
-          {remainingCount > 0 && (
-            <div 
-              className="relative z-0 ring-2 ring-background rounded-full"
-              style={{ marginLeft: `${finalOffset}px` }}
-            >
-              <MoonUIAvatarPro size={size} className="bg-muted">
-                <MoonUIAvatarFallbackPro className="text-xs font-medium">
-                  +{remainingCount}
-                </MoonUIAvatarFallbackPro>
-              </MoonUIAvatarPro>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-MoonUIAvatarGroupPro.displayName = "MoonUIAvatarGroupPro";
-
-export { MoonUIAvatarPro, MoonUIAvatarImagePro, MoonUIAvatarFallbackPro, MoonUIAvatarGroupPro };
-
-// Backward compatibility exports
-export { MoonUIAvatarPro as Avatar, MoonUIAvatarImagePro as AvatarImage, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarGroupPro as AvatarGroup };

package/src/components/ui/badge.tsx

@@ -1,228 +0,0 @@
-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,214 +0,0 @@
-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 };