@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/ui/magnetic-button.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import { motion, useMotionValue, useTransform, useSpring } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const magneticButtonVariants = cva(
+  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface MagneticButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof magneticButtonVariants> {
+  magnetStrength?: number;
+  magnetDistance?: number;
+}
+
+const MagneticButton = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      magnetStrength = 0.25,
+      magnetDistance = 100,
+      children,
+      onMouseMove,
+      onMouseLeave,
+      ...props
+    },
+    ref
+  ) => {
+    const buttonRef = React.useRef<HTMLDivElement>(null);
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+
+    const springConfig = { damping: 15, stiffness: 150 };
+    const x = useSpring(useTransform(mouseX, (value) => value * magnetStrength), springConfig);
+    const y = useSpring(useTransform(mouseY, (value) => value * magnetStrength), springConfig);
+
+    const handleMouseMove = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (!buttonRef.current) return;
+
+        const rect = buttonRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        
+        const distanceX = e.clientX - centerX;
+        const distanceY = e.clientY - centerY;
+        
+        const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
+        
+        if (distance < magnetDistance) {
+          mouseX.set(distanceX);
+          mouseY.set(distanceY);
+        } else {
+          mouseX.set(0);
+          mouseY.set(0);
+        }
+
+        onMouseMove?.(e);
+      },
+      [magnetDistance, mouseX, mouseY, onMouseMove]
+    );
+
+    const handleMouseLeave = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        mouseX.set(0);
+        mouseY.set(0);
+        onMouseLeave?.(e);
+      },
+      [mouseX, mouseY, onMouseLeave]
+    );
+
+    return (
+      <motion.div
+        ref={buttonRef}
+        style={{ x, y }}
+        className="inline-block"
+      >
+        <motion.button
+          ref={ref}
+          className={cn(magneticButtonVariants({ variant, size, className }))}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          transition={{ type: "spring", stiffness: 400, damping: 17 }}
+          {...props}
+        >
+          <motion.span
+            style={{ x: useTransform(x, (value) => value * 0.2), y: useTransform(y, (value) => value * 0.2) }}
+            className="relative z-10"
+          >
+            {children}
+          </motion.span>
+        </motion.button>
+      </motion.div>
+    );
+  }
+);
+
+MagneticButton.displayName = "MagneticButton";
+
+export { MagneticButton, magneticButtonVariants };

package/src/components/ui/popover.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Popover Bileşeni
+ * 
+ * Tıklanabilir bir öğeden açılan, tema sistemiyle tam entegre bir içerik bileşeni.
+ * Filtreler, ayarlar ve diğer içerikler için kullanışlı ve erişilebilir bir arayüz sağlar.
+ */
+
+const popoverContentVariants = cva(
+  "z-50 w-72 rounded-md border border-border bg-background p-4 shadow-md outline-none 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",
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "border-destructive bg-destructive/5",
+        outline: "border-border bg-transparent",
+        subtle: "border-transparent bg-muted/50",
+      },
+      size: {
+        sm: "w-48 p-3",
+        default: "w-72 p-4",
+        lg: "w-96 p-5",
+      },
+      side: {
+        top: "data-[side=top]:slide-in-from-bottom-2",
+        right: "data-[side=right]:slide-in-from-left-2",
+        bottom: "data-[side=bottom]:slide-in-from-top-2",
+        left: "data-[side=left]:slide-in-from-right-2",
+      },
+      position: {
+        pointerEventsNone: "pointer-events-none",
+        default: "",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        full: "rounded-full",
+      },
+      shadow: {
+        none: "shadow-none",
+        sm: "shadow-sm",
+        default: "shadow-md",
+        md: "shadow-md",
+        lg: "shadow-lg",
+        xl: "shadow-xl",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      shadow: "default",
+    },
+  }
+);
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export interface PopoverContentProps 
+  extends Omit<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'side'>,
+    VariantProps<typeof popoverContentVariants> {
+  /**
+   * Popover'ın arka plan bulanıklığı etkin mi
+   */
+  backdrop?: boolean;
+  /**
+   * Popover'a tıklandığında kapanıp kapanmayacağı
+   */
+  closeOnInteractOutside?: boolean;
+  /**
+   * Popover açıkken arka planın karartılması
+   */
+  overlayBackdrop?: boolean;
+}
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({
+  className,
+  variant,
+  size,
+  side,
+  position,
+  radius,
+  shadow,
+  backdrop = false,
+  closeOnInteractOutside = true,
+  overlayBackdrop = false,
+  sideOffset = 4,
+  ...props
+}, ref) => (
+  <>
+    {overlayBackdrop && (
+      <div className="fixed inset-0 z-40 bg-overlay opacity-30" />
+    )}
+    <PopoverPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      collisionPadding={8}
+      onInteractOutside={(e) => {
+        if (!closeOnInteractOutside) {
+          e.preventDefault();
+        }
+      }}
+      className={cn(
+        popoverContentVariants({ 
+          variant, 
+          size, 
+          side, 
+          position,
+          radius,
+          shadow
+        }),
+        backdrop && "backdrop-blur-md bg-opacity-80",
+        className
+      )}
+      {...props}
+    />
+  </>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+/**
+ * PopoverClose bileşeni
+ */
+const PopoverClose = PopoverPrimitive.Close;
+
+/**
+ * Popover için bölüm ayırıcı
+ */
+const PopoverSeparator = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("my-2 h-px bg-border", className)}
+    {...props}
+  />
+);
+PopoverSeparator.displayName = "PopoverSeparator";
+
+/**
+ * Popover başlık bileşeni
+ */
+const PopoverHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-border", className)}
+    {...props}
+  />
+);
+PopoverHeader.displayName = "PopoverHeader";
+
+/**
+ * Popover footer bileşeni
+ */
+const PopoverFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-border", className)}
+    {...props}
+  />
+);
+PopoverFooter.displayName = "PopoverFooter";
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverSeparator,
+  PopoverHeader,
+  PopoverFooter,
+  popoverContentVariants,
+};

package/src/components/ui/select.tsx

@@ -0,0 +1,273 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp, Loader2 } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+/**
+ * Premium Select Component
+ * 
+ * Advanced dropdown/select component with variants, sizes and accessibility features.
+ * Compatible with dark and light mode, providing a modern user experience with smooth animations.
+ */
+
+// Directly re-exporting the Root component
+const Select = SelectPrimitive.Root
+Select.displayName = "Select"
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+type SelectTriggerVariant = "standard" | "outline" | "ghost" | "underline";
+type SelectTriggerSize = "sm" | "md" | "lg";
+
+interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  /** Visual variant */
+  variant?: SelectTriggerVariant;
+  /** Size */
+  size?: SelectTriggerSize;
+  /** Error state */
+  error?: boolean | string;
+  /** Success state */
+  success?: boolean;
+  /** Loading state */
+  loading?: boolean;
+  /** Icon displayed on the left */
+  leftIcon?: React.ReactNode;
+  /** Icon displayed on the right (instead of default chevron) */
+  rightIcon?: React.ReactNode;
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, children, variant = "standard", size = "md", error, success, loading, leftIcon, rightIcon, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      /* Base styles */
+      "flex w-full items-center justify-between gap-1 rounded-md transition-all duration-200",
+      "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "focus-visible:outline-none",
+      /* Error state */
+      error && "border-error focus-visible:ring-error/30 focus-visible:border-error",
+      /* Success state */
+      success && "border-success focus-visible:ring-success/30 focus-visible:border-success",
+      /* Size variants */
+      size === "sm" && "h-8 text-xs px-2",
+      size === "md" && "h-10 text-sm px-3",
+      size === "lg" && "h-12 text-base px-4",
+      /* Visual variants */
+      variant === "standard" && "border border-gray-300 dark:border-gray-700 bg-background dark:bg-gray-900 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50 focus-visible:border-primary dark:focus-visible:border-primary",
+      variant === "outline" && "border border-gray-300 dark:border-gray-700 bg-transparent hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50 focus-visible:border-primary dark:focus-visible:border-primary",
+      variant === "ghost" && "border-none bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50",
+      variant === "underline" && "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary",
+      className
+    )}
+    {...props}
+    disabled={props.disabled || loading}
+    data-error={error ? true : undefined}
+    data-success={success ? true : undefined}
+    data-loading={loading ? true : undefined}
+  >
+    <div className="flex items-center flex-1 gap-2">
+      {leftIcon && (
+        <span className="flex items-center justify-center text-gray-500 dark:text-gray-400">
+          {leftIcon}
+        </span>
+      )}
+      {loading ? (
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground dark:text-gray-400" />
+          <span className="text-muted-foreground dark:text-gray-400">Loading...</span>
+        </div>
+      ) : children}
+    </div>
+    {!loading && (
+      <SelectPrimitive.Icon asChild>
+        {rightIcon ? (
+          <span className="opacity-60">{rightIcon}</span>
+        ) : (
+          <ChevronDown className="h-4 w-4 opacity-60 transition-transform duration-200 ease-out group-data-[state=open]:rotate-180" />
+        )}
+      </SelectPrimitive.Icon>
+    )}
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+/**
+ * Scroll Up Button Component
+ */
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1 text-muted-foreground hover:text-foreground transition-colors",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+/**
+ * Scroll Down Button Component
+ */
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1 text-muted-foreground hover:text-foreground transition-colors",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "item-aligned", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        ["relative z-50 max-h-96 min-w-[8rem] overflow-hidden", 
+        "rounded-md border border-gray-200 dark:border-gray-700",
+        "bg-white dark:bg-gray-900 text-foreground", 
+        "shadow-lg dark:shadow-gray-900/20",
+        "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=open]:duration-150"],
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+type SelectItemVariant = "default" | "subtle" | "destructive" | "success" | "warning";
+type SelectItemSize = "sm" | "md" | "lg";
+
+interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+  /** Visual variant */
+  variant?: SelectItemVariant;
+  /** Size */
+  size?: SelectItemSize;
+  /** Icon displayed on the right */
+  rightIcon?: React.ReactNode;
+  /** Custom indicator icon (instead of default check) */
+  customIndicator?: React.ReactNode;
+}
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  SelectItemProps
+>(({ className, children, variant = "default", size = "md", rightIcon, customIndicator, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      
+      /* Size variants */
+      size === "sm" && "py-1 pl-7 pr-2 text-xs",
+      size === "md" && "py-1.5 pl-8 pr-2 text-sm",
+      size === "lg" && "py-2 pl-9 pr-3 text-base",
+      
+      /* Color variants */
+      variant === "default" && "focus:bg-accent focus:text-accent-foreground dark:focus:bg-gray-700 dark:focus:text-gray-100",
+      variant === "subtle" && "focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-foreground dark:focus:text-gray-200",
+      variant === "destructive" && "text-error dark:text-red-400 focus:bg-error/10 dark:focus:bg-red-900/20 focus:text-error dark:focus:text-red-300",
+      variant === "success" && "text-success dark:text-green-400 focus:bg-success/10 dark:focus:bg-green-900/20 focus:text-success dark:focus:text-green-300",
+      variant === "warning" && "text-warning dark:text-yellow-400 focus:bg-warning/10 dark:focus:bg-yellow-900/20 focus:text-warning dark:focus:text-yellow-300",
+      
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        {customIndicator || <Check className="h-4 w-4" />}
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    
+    {rightIcon && (
+      <span className="ml-auto pl-2 opacity-70">
+        {rightIcon}
+      </span>
+    )}
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted dark:bg-gray-700", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}