@moontra/moonui 2.0.8 → 2.0.9

package/src/components/ui/alert.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertCircle, AlertTriangle, Info, Check, X } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Alert Component
+ *
+ * Yüksek kaliteli, özelleştirilebilir ve erişilebilir alert bileşeni.
+ * Bildirim, uyarı ve dikkat çekmek gereken içerikler için kullanılır.
+ */
+
+const alertVariants = cva(
+  "relative w-full flex items-center gap-3 p-4 border text-foreground [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground border-border",
+        primary: "bg-primary/10 text-primary border-primary/30",
+        success: "bg-success/10 text-success border-success/30",
+        warning: "bg-warning/10 text-warning border-warning/30",
+        error: "bg-destructive/10 text-destructive border-destructive/30",
+        info: "bg-blue-500/10 text-blue-500 border-blue-500/30",
+      },
+      size: {
+        sm: "py-2 text-xs",
+        default: "py-3 text-sm",
+        lg: "py-4 text-base",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        full: "rounded-full",
+      },
+      withClose: {
+        true: "pr-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      withClose: false,
+    },
+  }
+);
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  /** Alert ikonunu gizler */
+  hideIcon?: boolean;
+  /** Kapatma butonu ekler */
+  closable?: boolean;
+  /** Kapatma butonu tıklandığında çalışacak fonksiyon */
+  onClose?: () => void;
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant = "default", size, radius, hideIcon = false, closable = false, onClose, children, ...props }, ref) => {
+    // Alert türüne göre ikon belirleme
+    const Icon = React.useMemo(() => {
+      switch (variant) {
+        case "success":
+          return Check;
+        case "warning":
+          return AlertTriangle;
+        case "error":
+          return AlertCircle;
+        case "info":
+          return Info;
+        default:
+          return Info;
+      }
+    }, [variant]);
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant, size, radius, withClose: closable }), className)}
+        {...props}
+      >
+        {!hideIcon && <Icon className="h-5 w-5" />}
+        <div className="flex-1">{children}</div>
+        {closable && onClose && (
+          <button
+            onClick={onClose}
+            className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100"
+            aria-label="Kapat"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("font-semibold leading-tight tracking-tight mb-1", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm leading-5 text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

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

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+/**
+ * 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.
+ */
+
+const aspectRatioVariants = cva(
+  "relative overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "rounded-md bg-muted/10",
+        ghost: "bg-transparent",
+        outline: "rounded-md border border-border",
+        card: "rounded-md bg-card shadow-sm",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+interface AspectRatioProps 
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof aspectRatioVariants> {
+  /**
+   * Aspect ratio (width/height). For example 16/9, 4/3, 1/1 etc.
+   * @default 16/9
+   */
+  ratio?: number
+}
+
+const AspectRatio = React.forwardRef<
+  HTMLDivElement,
+  AspectRatioProps
+>(({ className, variant, radius, ratio = 16 / 9, style, children, ...props }, ref) => (
+  <div
+    ref={ref} 
+    className={cn(aspectRatioVariants({ variant, radius }), className)}
+    style={{
+      position: "relative",
+      paddingBottom: `${(1 / ratio) * 100}%`,
+      ...style
+    }}
+    {...props}
+  >
+    <div className="absolute inset-0">
+      {children}
+    </div>
+  </div>
+))
+AspectRatio.displayName = "AspectRatio"
+
+export { AspectRatio, aspectRatioVariants }
+export type { AspectRatioProps }

package/src/components/ui/avatar.tsx

@@ -0,0 +1,135 @@
+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 avatarVariants = 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 AvatarProps 
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+    VariantProps<typeof avatarVariants> {}
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarProps
+>(({ className, size, radius, variant, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(avatarVariants({ size, radius, variant }), className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = 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}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = 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}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// Avatar Group Component for displaying multiple avatars
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  limit?: number;
+  avatars: React.ReactNode[];
+  overlapOffset?: number;
+}
+
+const AvatarGroup = 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;
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-center", className)}
+        {...props}
+      >
+        <div className="flex">
+          {visibleAvatars.map((avatar, index) => (
+            <div 
+              key={index} 
+              className="relative"
+              style={{ 
+                marginLeft: index === 0 ? 0 : `${overlapOffset}px`,
+                zIndex: visibleAvatars.length - index 
+              }}
+            >
+              {avatar}
+            </div>
+          ))}
+          {remainingCount > 0 && (
+            <div 
+              className="relative z-0"
+              style={{ marginLeft: `${overlapOffset}px` }}
+            >
+              <Avatar variant="border">
+                <AvatarFallback>
+                  +{remainingCount}
+                </AvatarFallback>
+              </Avatar>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup };

package/src/components/ui/badge.tsx

@@ -0,0 +1,225 @@
+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 badgeVariants = 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 BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof badgeVariants>, '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 Badge({
+  className,
+  variant,
+  size,
+  radius,
+  withDot,
+  dotColor,
+  removable,
+  onRemove,
+  leftIcon,
+  rightIcon,
+  children,
+  ...props
+}: BadgeProps) {
+  // 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(badgeVariants({ 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 { Badge, badgeVariants };