@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/ui/alert-dialog.tsx

@@ -1,141 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "../../lib/utils"
-import { buttonVariants } from "./button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/src/components/ui/alert.tsx

@@ -1,141 +0,0 @@
-"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 MoonUIalertVariantsPro = 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 MoonUIalertVariantsPro> {
-  /** Alert ikonunu gizler */
-  hideIcon?: boolean;
-  /** Kapatma butonu ekler */
-  closable?: boolean;
-  /** Kapatma butonu tıklandığında çalışacak fonksiyon */
-  onClose?: () => void;
-}
-
-const MoonUIAlertPro = 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 MoonUIIconPro = 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(MoonUIalertVariantsPro({ variant, size, radius, withClose: closable }), className)}
-        {...props}
-      >
-        {!hideIcon && <MoonUIIconPro 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>
-    );
-  }
-);
-MoonUIAlertPro.displayName = "AlertPro";
-
-const MoonUIAlertTitlePro = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("font-semibold leading-tight tracking-tight mb-1", className)}
-    {...props}
-  />
-));
-MoonUIAlertTitlePro.displayName = "AlertTitlePro";
-
-const MoonUIAlertDescriptionPro = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm leading-5 text-muted-foreground", className)}
-    {...props}
-  />
-));
-MoonUIAlertDescriptionPro.displayName = "AlertDescriptionPro";
-
-
-// Internal aliases for Pro component usage
-export const alertVariantsInternal = MoonUIalertVariantsPro
-export const AlertInternal = MoonUIAlertPro
-export const AlertTitleInternal = MoonUIAlertTitlePro
-export const AlertDescriptionInternal = MoonUIAlertDescriptionPro
-
-// Pro exports  
-export { MoonUIalertVariantsPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAlertDescriptionPro }
-
-// Clean exports (without MoonUI prefix for easier usage)
-export { MoonUIalertVariantsPro as alertVariants, MoonUIAlertPro as Alert, MoonUIAlertTitlePro as AlertTitle, MoonUIAlertDescriptionPro as AlertDescription };

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

@@ -1,245 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-/**
- * Premium Aspect Ratio Component
- * 
- * Advanced component that maintains specific aspect ratios with preset support,
- * responsive behavior, animations, and enhanced styling options.
- * Perfect for images, videos, and media content in modern applications.
- */
-
-// Preset ratios
-const PRESET_RATIOS = {
-  square: 1,
-  video: 16 / 9,
-  portrait: 3 / 4,
-  landscape: 4 / 3,
-  golden: 1.618,
-  ultrawide: 21 / 9,
-  cinema: 2.39,
-  instagram: 4 / 5,
-  story: 9 / 16,
-  banner: 3 / 1,
-} as const
-
-type PresetRatio = keyof typeof PRESET_RATIOS
-
-// Responsive ratio configuration
-interface ResponsiveRatio {
-  sm?: number | PresetRatio
-  md?: number | PresetRatio
-  lg?: number | PresetRatio
-  xl?: number | PresetRatio
-  "2xl"?: number | PresetRatio
-}
-
-const MoonUIaspectRatioVariantsPro = cva(
-  "relative overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted/10",
-        ghost: "bg-transparent",
-        outline: "border border-border",
-        card: "bg-card shadow-sm",
-        glass: "bg-white/10 backdrop-blur-md border border-white/20",
-        gradient: "bg-gradient-to-br from-primary/10 to-secondary/10",
-      },
-      radius: {
-        none: "rounded-none",
-        sm: "rounded-sm",
-        md: "rounded-md",
-        lg: "rounded-lg",
-        xl: "rounded-xl",
-        "2xl": "rounded-2xl",
-        full: "rounded-full",
-      },
-      animate: {
-        true: "transition-all duration-300 ease-in-out",
-        false: "",
-      },
-      hover: {
-        true: "hover:scale-105 hover:shadow-lg cursor-pointer",
-        false: "",
-      },
-      loading: {
-        true: "animate-pulse",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      radius: "md",
-      animate: false,
-      hover: false,
-      loading: false,
-    },
-  }
-)
-
-interface AspectRatioProps 
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof MoonUIaspectRatioVariantsPro> {
-  /**
-   * Aspect ratio (width/height). For example 16/9, 4/3, 1/1 etc.
-   * @default 16/9
-   */
-  ratio?: number
-  /**
-   * Preset aspect ratio for quick usage
-   */
-  preset?: PresetRatio
-  /**
-   * Responsive aspect ratios for different breakpoints
-   */
-  responsive?: ResponsiveRatio
-  /**
-   * Enable smooth aspect ratio changes
-   */
-  smoothTransition?: boolean
-  /**
-   * Add overlay content
-   */
-  overlay?: React.ReactNode
-  /**
-   * Overlay position
-   */
-  overlayPosition?: "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right"
-  /**
-   * Show loading skeleton
-   */
-  skeleton?: boolean
-}
-
-const MoonUIAspectRatioPro = React.forwardRef<
-  HTMLDivElement,
-  AspectRatioProps
->(({ 
-  className, 
-  variant, 
-  radius, 
-  animate, 
-  hover, 
-  loading,
-  ratio = 16 / 9, 
-  preset,
-  responsive,
-  smoothTransition = false,
-  overlay,
-  overlayPosition = "center",
-  skeleton = false,
-  style, 
-  children, 
-  ...props 
-}, ref) => {
-  const [currentRatio, setCurrentRatio] = React.useState(() => {
-    if (preset) return PRESET_RATIOS[preset]
-    return ratio
-  })
-
-  // Update ratio when props change
-  React.useEffect(() => {
-    const newRatio = preset ? PRESET_RATIOS[preset] : ratio
-    if (smoothTransition) {
-      setCurrentRatio(newRatio)
-    } else {
-      setCurrentRatio(newRatio)
-    }
-  }, [preset, ratio, smoothTransition])
-
-  // Handle responsive ratios
-  React.useEffect(() => {
-    if (!responsive) return
-
-    const handleResize = () => {
-      const width = window.innerWidth
-      let newRatio = currentRatio
-
-      if (width >= 1536 && responsive["2xl"]) {
-        newRatio = typeof responsive["2xl"] === "string" 
-          ? PRESET_RATIOS[responsive["2xl"]] 
-          : responsive["2xl"]
-      } else if (width >= 1280 && responsive.xl) {
-        newRatio = typeof responsive.xl === "string" 
-          ? PRESET_RATIOS[responsive.xl] 
-          : responsive.xl
-      } else if (width >= 1024 && responsive.lg) {
-        newRatio = typeof responsive.lg === "string" 
-          ? PRESET_RATIOS[responsive.lg] 
-          : responsive.lg
-      } else if (width >= 768 && responsive.md) {
-        newRatio = typeof responsive.md === "string" 
-          ? PRESET_RATIOS[responsive.md] 
-          : responsive.md
-      } else if (width >= 640 && responsive.sm) {
-        newRatio = typeof responsive.sm === "string" 
-          ? PRESET_RATIOS[responsive.sm] 
-          : responsive.sm
-      }
-
-      setCurrentRatio(newRatio)
-    }
-
-    handleResize()
-    window.addEventListener("resize", handleResize)
-    return () => window.removeEventListener("resize", handleResize)
-  }, [responsive, currentRatio])
-
-  const overlayPositionClasses = {
-    center: "items-center justify-center",
-    "top-left": "items-start justify-start p-4",
-    "top-right": "items-start justify-end p-4",
-    "bottom-left": "items-end justify-start p-4",
-    "bottom-right": "items-end justify-end p-4",
-  }
-
-  return (
-    <div
-      ref={ref} 
-      className={cn(
-        MoonUIaspectRatioVariantsPro({ variant, radius, animate: animate || smoothTransition, hover, loading: loading || skeleton }),
-        className
-      )}
-      style={{
-        position: "relative",
-        paddingBottom: `${(1 / currentRatio) * 100}%`,
-        ...style
-      }}
-      {...props}
-    >
-      <div className="absolute inset-0">
-        {skeleton ? (
-          <div className="w-full h-full bg-muted animate-pulse" />
-        ) : (
-          children
-        )}
-        {overlay && (
-          <div className={cn(
-            "absolute inset-0 flex",
-            overlayPositionClasses[overlayPosition]
-          )}>
-            {overlay}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-})
-MoonUIAspectRatioPro.displayName = "AspectRatioPro"
-
-
-// Internal aliases for Pro component usage
-export const aspectRatioVariantsInternal = MoonUIaspectRatioVariantsPro
-export const AspectRatioInternal = MoonUIAspectRatioPro
-
-// Pro exports  
-export { MoonUIaspectRatioVariantsPro, MoonUIAspectRatioPro }
-
-// Clean exports (without MoonUI prefix for easier usage)
-export { MoonUIaspectRatioVariantsPro as aspectRatioVariants, MoonUIAspectRatioPro as AspectRatio }
-export type { AspectRatioProps }

package/src/components/ui/avatar.tsx

@@ -1,155 +0,0 @@
-"use client"
-
-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 };