@moontra/moonui-pro 2.0.21 → 2.0.23

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/components/ui/hover-card-3d.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import * as React from "react";
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+export interface HoverCard3DProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  rotateAmount?: number;
+  scale?: number;
+  perspective?: number;
+  springConfig?: {
+    stiffness?: number;
+    damping?: number;
+  };
+}
+
+const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
+  (
+    {
+      children,
+      className,
+      rotateAmount = 15,
+      scale = 1.05,
+      perspective = 1000,
+      springConfig = { stiffness: 300, damping: 20 },
+      ...props
+    },
+    ref
+  ) => {
+    const cardRef = React.useRef<HTMLDivElement>(null);
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+
+    const rotateX = useSpring(
+      useTransform(mouseY, [-0.5, 0.5], [rotateAmount, -rotateAmount]),
+      springConfig
+    );
+    const rotateY = useSpring(
+      useTransform(mouseX, [-0.5, 0.5], [-rotateAmount, rotateAmount]),
+      springConfig
+    );
+
+    const handleMouseMove = React.useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!cardRef.current) return;
+
+        const rect = cardRef.current.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        const xPct = x / width - 0.5;
+        const yPct = y / height - 0.5;
+
+        mouseX.set(xPct);
+        mouseY.set(yPct);
+      },
+      [mouseX, mouseY]
+    );
+
+    const handleMouseLeave = React.useCallback(() => {
+      mouseX.set(0);
+      mouseY.set(0);
+    }, [mouseX, mouseY]);
+
+    return (
+      <div
+        ref={ref}
+        className={cn("relative", className)}
+        style={{ perspective }}
+        {...props}
+      >
+        <motion.div
+          ref={cardRef}
+          className="w-full h-full transition-shadow duration-300 hover:shadow-xl"
+          style={{
+            rotateX,
+            rotateY,
+            transformStyle: "preserve-3d",
+          }}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          whileHover={{ scale }}
+          transition={{ type: "spring", ...springConfig }}
+        >
+          <div
+            className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/20 to-white/0 opacity-0 hover:opacity-100 transition-opacity duration-300"
+            style={{
+              transform: "translateZ(1px)",
+            }}
+          />
+          {children}
+        </motion.div>
+      </div>
+    );
+  }
+);
+
+HoverCard3D.displayName = "HoverCard3D";
+
+export { HoverCard3D };

package/src/components/ui/index.ts

@@ -0,0 +1,33 @@
+// Core UI Components
+export * from './button';
+export * from './card';
+export * from './badge';
+export * from './avatar';
+export * from './dropdown-menu';
+export * from './tooltip';
+export * from './dialog';
+export * from './input';
+export * from './label';
+export * from './select';
+export * from './separator';
+export * from './popover';
+export * from './slider';
+export * from './toast';
+export * from './tabs';
+export * from './switch';
+export * from './checkbox';
+export * from './color-picker';
+export * from './textarea';
+
+// Micro-interaction Components
+export { AnimatedButton, animatedButtonVariants } from "./animated-button";
+export type { AnimatedButtonProps } from "./animated-button";
+
+export { MagneticButton, magneticButtonVariants } from "./magnetic-button";
+export type { MagneticButtonProps } from "./magnetic-button";
+
+export { HoverCard3D } from "./hover-card-3d";
+export type { HoverCard3DProps } from "./hover-card-3d";
+
+export { SpotlightCard } from "./spotlight-card";
+export type { SpotlightCardProps } from "./spotlight-card";

package/src/components/ui/input.tsx

@@ -0,0 +1,219 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Loader2 } from "lucide-react";
+
+/**
+ * Premium Input Component
+ * 
+ * Erişilebilir, estetik ve işlevsel input bileşeni.
+ * İkon desteği, hata gösterimi ve çeşitli varyantlar sunar.
+ */
+
+const inputWrapperVariants = cva(
+  "group relative flex items-center w-full transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+const inputVariants = cva(
+  [
+    "w-full bg-background transition-all duration-200",
+    "text-foreground placeholder:text-muted-foreground dark:placeholder:text-gray-500", 
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "file:border-0 file:bg-transparent file:font-medium",
+    "focus-visible:outline-none dark:text-gray-200"
+  ],
+  {
+    variants: {
+      variant: {
+        standard: "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80 dark:bg-gray-900/60 dark:shadow-inner dark:shadow-gray-950/10",
+        filled: "border border-transparent bg-gray-100 dark:bg-gray-800/90 rounded-md px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-700/90 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 dark:shadow-inner dark:shadow-gray-950/10",
+        ghost: "border-none bg-transparent shadow-none px-1 dark:text-gray-300 dark:placeholder:text-gray-500 hover:bg-gray-100/50 dark:hover:bg-gray-800/30 focus-visible:bg-transparent",
+        underline: "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 py-2 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/80 dark:text-gray-300",
+      },
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-10 text-sm",
+        lg: "h-12 text-base",
+      },
+      hasLeftIcon: {
+        true: "pl-10",
+        false: "",
+      },
+      hasRightIcon: {
+        true: "pr-10",
+        false: "",
+      },
+      hasRightButton: {
+        true: "pr-10",
+        false: "",
+      },
+      isError: {
+        true: "border-error focus-visible:ring-error/30 focus-visible:border-error hover:border-error/80 dark:hover:border-error/80",
+        false: "",
+      },
+      isSuccess: {
+        true: "border-success focus-visible:ring-success/30 focus-visible:border-success hover:border-success/80 dark:hover:border-success/80",
+        false: "",
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800/50 pointer-events-none",
+        false: "",
+      }
+    },
+    defaultVariants: {
+      variant: "standard",
+      size: "md",
+      isError: false,
+      isSuccess: false,
+      isDisabled: false,
+      hasLeftIcon: false,
+      hasRightIcon: false,
+      hasRightButton: false,
+    },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    Omit<VariantProps<typeof inputVariants>, "isDisabled" | "hasLeftIcon" | "hasRightIcon" | "hasRightButton"> {
+  /** Hata mesajı */
+  error?: string;
+  /** Başarı mesajı */
+  success?: string;
+  /** Yükleniyor durumu */
+  loading?: boolean;
+  /** Sol tarafta gösterilecek ikon */
+  leftIcon?: React.ReactNode;
+  /** Sağ tarafta gösterilecek ikon */
+  rightIcon?: React.ReactNode;
+  /** Sağ tarafta gösterilecek buton (password show/hide vb. için) */
+  rightButton?: React.ReactNode;
+  /** Mesajın görünürlüğü (true: her zaman görünür, false: sadece hata/başarı durumunda) */
+  alwaysShowMessage?: boolean;
+  /** Input wrapper için ek sınıflar */
+  wrapperClassName?: string;
+  /** Mesaj için ek sınıflar */
+  messageClassName?: string;
+}
+
+/**
+ * Premium Input Component
+ * 
+ * @param props - Input bileşeni özellikleri
+ * @param props.variant - Görsel varyant (standard, filled, ghost, underline)
+ * @param props.size - Boyut (sm, md, lg)
+ * @param props.error - Hata mesajı
+ * @param props.success - Başarı mesajı
+ * @param props.loading - Yükleniyor durumu
+ * @param props.leftIcon - Sol tarafta gösterilecek ikon
+ * @param props.rightIcon - Sağ tarafta gösterilecek ikon
+ * @param props.rightButton - Sağ tarafta gösterilecek buton
+ * @param props.alwaysShowMessage - Mesajın her zaman görünür olması
+ */
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ 
+    className, 
+    wrapperClassName,
+    messageClassName,
+    variant, 
+    size, 
+    isError,
+    disabled, 
+    error,
+    success,
+    loading,
+    leftIcon,
+    rightIcon,
+    rightButton,
+    alwaysShowMessage = false,
+    ...props 
+  }, ref) => {
+    // Mesajı göster/gizle
+    const showMessage = alwaysShowMessage || error || success;
+    const messageType = error ? "error" : success ? "success" : "normal";
+
+    return (
+      <div className="space-y-1.5 w-full">
+        <div className={cn(inputWrapperVariants({ size }), wrapperClassName)}>
+          {leftIcon && (
+            <div className="absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none">
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : leftIcon}
+            </div>
+          )}
+          
+          <input
+            className={cn(
+              inputVariants({ 
+                variant, 
+                size, 
+                isError: !!error || isError, 
+                isSuccess: !!success,
+                isDisabled: disabled || loading,
+                hasLeftIcon: !!leftIcon || loading,
+                hasRightIcon: !!rightIcon,
+                hasRightButton: !!rightButton,
+              }),
+              className
+            )}
+            ref={ref}
+            disabled={disabled || loading}
+            data-loading={loading ? "" : undefined}
+            data-error={!!error ? "" : undefined}
+            data-success={!!success ? "" : undefined}
+            aria-invalid={!!error || !!isError || undefined}
+            aria-describedby={error ? `${props.id || ''}-error` : success ? `${props.id || ''}-success` : undefined}
+            {...props}
+          />
+          
+          {rightIcon && !loading && (
+            <div className="absolute right-3 text-gray-500 flex items-center justify-center pointer-events-none">
+              {rightIcon}
+            </div>
+          )}
+          
+          {rightButton && (
+            <div className="absolute right-3">
+              {rightButton}
+            </div>
+          )}
+          
+          {loading && !leftIcon && (
+            <div className="absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none">
+              <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+            </div>
+          )}
+        </div>
+        
+        {showMessage && (
+          <p 
+            className={cn(
+              "text-xs transition-all",
+              messageType === "error" && "text-error",
+              messageType === "success" && "text-success",
+              messageType === "normal" && "text-muted-foreground",
+              messageClassName
+            )}
+            id={error ? `${props.id || ''}-error` : success ? `${props.id || ''}-success` : undefined}
+          >
+            {error || success || ""}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none text-gray-900 dark:text-gray-200 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:peer-disabled:opacity-60 transition-colors duration-200"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }