@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Checkbox Bileşeni
+ *
+ * Erişilebilir, özelleştirilebilir ve tema sistemiyle tam entegre checkbox bileşeni.
+ * Form elemanları ve seçim listeleri için kullanılır.
+ */
+
+const checkboxVariants = 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: {
+      variant: {
+        default: "border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+        outline: "border-border bg-transparent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+        muted: "border-border bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+        ghost: "border-transparent bg-transparent hover:bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+      },
+      size: {
+        sm: "h-3.5 w-3.5",
+        default: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        default: "rounded-sm",
+        md: "rounded-md",
+        full: "rounded-full",
+      },
+      animation: {
+        none: "",
+        subtle: "transition-all duration-200",
+        default: "transition-all duration-200",
+        bounce: "transition-all duration-200",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      animation: "default",
+    },
+  }
+);
+
+export interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+    VariantProps<typeof checkboxVariants> {
+  /**
+   * İndeterminate durumu - grup seçimlerinde bazı öğeler seçilmişse kullanılır
+   */
+  indeterminate?: boolean;
+  /**
+   * Özel ikon komponenti
+   */
+  icon?: React.ReactNode;
+}
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ 
+  className, 
+  variant, 
+  size, 
+  radius, 
+  animation,
+  indeterminate = false,
+  icon,
+  checked,
+  ...props 
+}, ref) => {
+  // Indeterminate state yönetimi
+  const [isIndeterminate, setIsIndeterminate] = React.useState(indeterminate);
+  
+  React.useEffect(() => {
+    setIsIndeterminate(indeterminate);
+  }, [indeterminate]);
+
+  // Checked state override, indeterminate olduğunda
+  const effectiveChecked = isIndeterminate ? false : checked;
+  
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      checked={effectiveChecked}
+      className={cn(checkboxVariants({ variant, size, radius, animation }), className)}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className={cn(
+          "flex items-center justify-center text-current",
+          animation === "bounce" && "data-[state=checked]:animate-bounce"
+        )}
+      >
+        {isIndeterminate ? (
+          <Minus className="h-[65%] w-[65%]" />
+        ) : icon ? (
+          icon
+        ) : (
+          <Check className="h-[65%] w-[65%]" />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// CheckboxGroup bileşeni
+interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Grup içi yerleşim - dikey veya yatay
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Öğeler arasındaki boşluk (piksel)
+   */
+  spacing?: number | string;
+  /**
+   * Alt bileşenler
+   */
+  children: React.ReactNode;
+}
+
+const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ className, orientation = "vertical", spacing = "1rem", children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+          className
+        )}
+        style={{ gap: spacing }}
+        role="group"
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// CheckboxLabel bileşeni
+interface CheckboxLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+  /**
+   * Checkbox bileşeni için HTML id
+   */
+  htmlFor?: string;
+  /**
+   * Label içeriği
+   */
+  children: React.ReactNode;
+  /**
+   * Checkbox öncesi veya sonrası
+   */
+  position?: "start" | "end";
+  /**
+   * Devre dışı durum stili
+   */
+  disabled?: boolean;
+}
+
+const CheckboxLabel = React.forwardRef<HTMLLabelElement, CheckboxLabelProps>(
+  ({ className, htmlFor, children, position = "end", disabled = false, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        htmlFor={htmlFor}
+        className={cn(
+          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          position === "start" ? "mr-2" : "ml-2",
+          disabled && "cursor-not-allowed opacity-70",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </label>
+    );
+  }
+);
+CheckboxLabel.displayName = "CheckboxLabel";
+
+// Checkbox ve Label içeren bileşen
+interface CheckboxWithLabelProps extends CheckboxProps {
+  /**
+   * Label içeriği
+   */
+  label: React.ReactNode;
+  /**
+   * Label pozisyonu
+   */
+  labelPosition?: "start" | "end";
+  /**
+   * Label için HTML sınıfları
+   */
+  labelClassName?: string;
+}
+
+const CheckboxWithLabel = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxWithLabelProps
+>(({ 
+  id, 
+  label, 
+  labelPosition = "end", 
+  labelClassName, 
+  ...checkboxProps 
+}, ref) => {
+  const generatedId = React.useId();
+  const checkboxId = id || generatedId;
+  
+  return (
+    <div className="flex items-center">
+      {labelPosition === "start" && (
+        <CheckboxLabel 
+          htmlFor={checkboxId}
+          position="start"
+          disabled={checkboxProps.disabled}
+          className={labelClassName}
+        >
+          {label}
+        </CheckboxLabel>
+      )}
+      
+      <Checkbox ref={ref} id={checkboxId} {...checkboxProps} />
+      
+      {labelPosition === "end" && (
+        <CheckboxLabel 
+          htmlFor={checkboxId}
+          position="end"
+          disabled={checkboxProps.disabled}
+          className={labelClassName}
+        >
+          {label}
+        </CheckboxLabel>
+      )}
+    </div>
+  );
+});
+CheckboxWithLabel.displayName = "CheckboxWithLabel";
+
+export { Checkbox, CheckboxGroup, CheckboxLabel, CheckboxWithLabel };

package/src/components/ui/color-picker.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import React, { useState } from "react"
+import { cn } from "../../lib/utils"
+
+export interface ColorPickerProps {
+  value?: string
+  onChange?: (color: string) => void
+  className?: string
+  showInput?: boolean
+  showPresets?: boolean
+  size?: string
+  presets?: string[]
+}
+
+const defaultColors = [
+  "#000000", "#374151", "#EF4444", "#F97316", 
+  "#F59E0B", "#EAB308", "#22C55E", "#10B981",
+  "#06B6D4", "#3B82F6", "#6366F1", "#8B5CF6",
+  "#A855F7", "#D946EF", "#EC4899", "#F43F5E"
+]
+
+// React 19 compatible - removed forwardRef
+export const ColorPicker = ({ 
+  value = "#000000", 
+  onChange, 
+  className, 
+  showInput = false,
+  showPresets = true,
+  size = "default",
+  presets = defaultColors
+}: ColorPickerProps) => {
+  const [currentColor, setCurrentColor] = useState(value)
+
+  const handleColorChange = (color: string) => {
+    setCurrentColor(color)
+    onChange?.(color)
+  }
+
+  const sizeClasses = {
+    sm: "w-6 h-6",
+    default: "w-8 h-8", 
+    lg: "w-10 h-10"
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {showInput && (
+        <div className="flex gap-2 items-center">
+          <input
+            type="color"
+            value={currentColor}
+            onChange={(e) => handleColorChange(e.target.value)}
+            className={cn("rounded border cursor-pointer", sizeClasses[size as keyof typeof sizeClasses] || sizeClasses.default)}
+          />
+          <input
+            type="text"
+            value={currentColor}
+            onChange={(e) => handleColorChange(e.target.value)}
+            className="px-2 py-1 border rounded text-sm font-mono"
+            placeholder="#000000"
+          />
+        </div>
+      )}
+      
+      {!showInput && (
+        <input
+          type="color"
+          value={currentColor}
+          onChange={(e) => handleColorChange(e.target.value)}
+          className={cn("rounded border cursor-pointer", sizeClasses[size as keyof typeof sizeClasses] || sizeClasses.default)}
+        />
+      )}
+
+      {showPresets && presets && presets.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {presets.map((color) => (
+            <button
+              key={color}
+              type="button"
+              onClick={() => handleColorChange(color)}
+              className={cn(
+                "w-6 h-6 rounded border-2 hover:scale-110 transition-transform",
+                currentColor === color ? "border-gray-900 dark:border-gray-100" : "border-transparent"
+              )}
+              style={{ backgroundColor: color }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ColorPicker

package/src/components/ui/dialog.tsx

@@ -0,0 +1,332 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Check, Loader2, X } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Premium Dialog Component
+ *
+ * Modern, accessible and customizable modal dialog component.
+ * Enhances user experience with variants, sizes and rich features.
+ * Provides a premium appearance with dark and light mode compatibility and fluid animations.
+ */
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = 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",
+    {
+        variants: {
+            variant: {
+                default: "bg-black/80",
+                subtle: "bg-black/60",
+                blur: "bg-black/40 backdrop-blur-md",
+                minimal: "bg-black/20 backdrop-blur-sm",
+            },
+            animation: {
+                default: "duration-200",
+                slow: "duration-300",
+                fast: "duration-100",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            animation: "default",
+        },
+    }
+);
+
+interface DialogOverlayProps
+    extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>,
+        VariantProps<typeof overlayVariants> {}
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    DialogOverlayProps
+>(({ className, variant, animation, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(overlayVariants({ variant, animation }), className)}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const dialogContentVariants = cva(
+    "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg",
+    {
+        variants: {
+            variant: {
+                default: "border-gray-200 dark:border-gray-700",
+                primary: "border-primary/20 dark:border-primary/30",
+                secondary: "border-gray-300 dark:border-gray-600",
+                ghost: "border-transparent shadow-xl",
+                destructive: "border-error/20 dark:border-error/30",
+            },
+            size: {
+                xs: "max-w-xs p-4",
+                sm: "max-w-sm p-5",
+                default: "max-w-lg p-6",
+                md: "max-w-md p-6",
+                lg: "max-w-2xl p-7",
+                xl: "max-w-4xl p-8",
+                full: "max-w-[95vw] max-h-[95vh] p-6",
+            },
+            radius: {
+                none: "rounded-none",
+                sm: "rounded-md",
+                default: "rounded-lg",
+                lg: "rounded-xl",
+                xl: "rounded-2xl",
+                full: "rounded-3xl",
+            },
+            animation: {
+                default:
+                    "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",
+                fade: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+                zoom: "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",
+                slide: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                none: "",
+            },
+            position: {
+                default: "top-[50%]",
+                top: "top-[5%]",
+                bottom: "bottom-[5%] top-auto translate-y-0",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+            radius: "default",
+            animation: "default",
+            position: "default",
+        },
+    }
+);
+
+interface DialogContentProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'title'>,
+        VariantProps<typeof dialogContentVariants> {
+    /** X butonunu gizle */
+    hideCloseButton?: boolean;
+    /** Overlay varyantı */
+    overlayVariant?: VariantProps<typeof overlayVariants>["variant"];
+    /** Overlay animasyonu */
+    overlayAnimation?: VariantProps<typeof overlayVariants>["animation"];
+    /** İçerik başlığı (hızlı kullanım için) */
+    title?: React.ReactNode;
+    /** İçerik açıklaması (hızlı kullanım için) */
+    description?: React.ReactNode;
+    /** Başlık ikonu */
+    icon?: React.ReactNode;
+    /** Yükleniyor durumu */
+    loading?: boolean;
+    /** Success durumu */
+    success?: boolean;
+    /** Özel onClose handler */
+    onClose?: () => void;
+}
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    DialogContentProps
+>(
+    (
+        {
+            className,
+            children,
+            variant,
+            size,
+            radius,
+            animation,
+            position,
+            overlayVariant = "default",
+            overlayAnimation = "default",
+            hideCloseButton = false,
+            title,
+            description,
+            icon,
+            loading = false,
+            success = false,
+            onClose,
+            ...props
+        },
+        ref
+    ) => {
+        // Capturing the close function through the Radix Dialog API
+        const handleClose = () => {
+            if (onClose) {
+                onClose();
+            }
+        };
+
+        return (
+            <DialogPortal>
+                <DialogOverlay
+                    variant={overlayVariant}
+                    animation={overlayAnimation}
+                    onClick={hideCloseButton ? undefined : handleClose}
+                />
+                <DialogPrimitive.Content
+                    ref={ref}
+                    onEscapeKeyDown={hideCloseButton ? undefined : handleClose}
+                    onInteractOutside={
+                        hideCloseButton ? undefined : handleClose
+                    }
+                    className={cn(
+                        dialogContentVariants({
+                            variant,
+                            size,
+                            radius,
+                            animation,
+                            position,
+                        }),
+                        "outline-none",
+                        loading && "pointer-events-none",
+                        success && "border-success/40",
+                        className
+                    )}
+                    {...props}
+                >
+                    {/* Başlık ve açıklama varsa otomatik olarak DialogHeader oluştur */}
+                    {(title || description || icon) && (
+                        <DialogHeader className="flex gap-4">
+                            {/* İkon veya loading/success durumları */}
+                            {(icon || loading || success) && (
+                                <div className="flex shrink-0 items-center justify-center">
+                                    {loading && (
+                                        <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                                    )}
+                                    {success && (
+                                        <Check className="h-5 w-5 text-success" />
+                                    )}
+                                    {!loading && !success && icon && (
+                                        <span className="text-primary">
+                                            {icon}
+                                        </span>
+                                    )}
+                                </div>
+                            )}
+                            <div className="flex-1">
+                                {title && <DialogTitle>{title}</DialogTitle>}
+                                {description && (
+                                    <DialogDescription>
+                                        {description}
+                                    </DialogDescription>
+                                )}
+                            </div>
+                        </DialogHeader>
+                    )}
+
+                    {/* Main content */}
+                    {children}
+
+                    {/* Close button */}
+                    {!hideCloseButton && (
+                        <DialogPrimitive.Close
+                            onClick={handleClose}
+                            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 disabled:pointer-events-none dark:text-gray-300 dark:hover:text-white"
+                        >
+                            <X className="h-4 w-4" />
+                            <span className="sr-only">Close</span>
+                        </DialogPrimitive.Close>
+                    )}
+                </DialogPrimitive.Content>
+            </DialogPortal>
+        );
+    }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 mt-6",
+            className
+        )}
+        {...props}
+    />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            "text-xl font-semibold leading-snug tracking-tight dark:text-white",
+            className
+        )}
+        {...props}
+    />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn(
+            "text-sm text-muted-foreground leading-normal dark:text-gray-400",
+            className
+        )}
+        {...props}
+    />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+/**
+ * Dialog-Form integration for use with form support
+ * Used to integrate form submission processes into the modal
+ */
+const DialogForm = React.forwardRef<
+    HTMLFormElement,
+    React.HTMLAttributes<HTMLFormElement>
+>(({ className, ...props }, ref) => (
+    <form
+        ref={ref}
+        className={cn("flex flex-col gap-4", className)}
+        {...props}
+    />
+));
+DialogForm.displayName = "DialogForm";
+
+export {
+    Dialog,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+    DialogForm,
+};