@moontra/moonui-pro 2.0.22 → 2.0.23

package/src/components/ui/separator.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const separatorVariants = cva(
+  "shrink-0 bg-border",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-[1px] w-full",
+        vertical: "h-full w-[1px]",
+      },
+      variant: {
+        default: "bg-border",
+        dashed: "border-dashed border-border bg-transparent",
+        dotted: "border-dotted border-border bg-transparent",
+        gradient: "bg-gradient-to-r from-transparent via-border to-transparent",
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+      },
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        variant: "dashed",
+        className: "border-t h-0",
+      },
+      {
+        orientation: "vertical",
+        variant: "dashed",
+        className: "border-l w-0",
+      },
+      {
+        orientation: "horizontal",
+        variant: "dotted",
+        className: "border-t h-0",
+      },
+      {
+        orientation: "vertical",
+        variant: "dotted",
+        className: "border-l w-0",
+      },
+      {
+        orientation: "horizontal",
+        size: "sm",
+        variant: ["dashed", "dotted"],
+        className: "border-t-[0.5px]",
+      },
+      {
+        orientation: "horizontal",
+        size: "lg",
+        variant: ["dashed", "dotted"],
+        className: "border-t-2",
+      },
+      {
+        orientation: "vertical",
+        size: "sm",
+        variant: ["dashed", "dotted"],
+        className: "border-l-[0.5px]",
+      },
+      {
+        orientation: "vertical",
+        size: "lg",
+        variant: ["dashed", "dotted"],
+        className: "border-l-2",
+      },
+      {
+        orientation: "horizontal",
+        size: "sm",
+        variant: ["default", "gradient"],
+        className: "h-[0.5px]",
+      },
+      {
+        orientation: "horizontal",
+        size: "lg",
+        variant: ["default", "gradient"],
+        className: "h-[2px]",
+      },
+      {
+        orientation: "vertical",
+        size: "sm",
+        variant: ["default", "gradient"],
+        className: "w-[0.5px]",
+      },
+      {
+        orientation: "vertical",
+        size: "lg",
+        variant: ["default", "gradient"],
+        className: "w-[2px]",
+      },
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      variant: "default",
+      size: "md",
+    },
+  }
+)
+
+export interface SeparatorProps
+  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>,
+    VariantProps<typeof separatorVariants> {}
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  SeparatorProps
+>(
+  (
+    { 
+      className, 
+      orientation = "horizontal", 
+      variant = "default",
+      size = "md",
+      decorative = true, 
+      ...props 
+    },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        separatorVariants({ orientation, variant, size }),
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator, separatorVariants }

package/src/components/ui/slider.tsx

@@ -0,0 +1,351 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+/**
+ * Slider Component
+ *
+ * Accessible, customizable slider component fully integrated with the theme system.
+ * Used for value ranges like volume, brightness, price ranges.
+ */
+
+const sliderVariants = cva(
+  "relative flex w-full touch-none select-none items-center",
+  {
+    variants: {
+      size: {
+        sm: "h-5",
+        default: "h-6",
+        md: "h-8",
+        lg: "h-10",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const sliderTrackVariants = cva(
+  "relative h-1.5 w-full grow overflow-hidden rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        primary: "bg-primary/20",
+        secondary: "bg-secondary/20",
+        accent: "bg-accent/20",
+        success: "bg-success/20",
+        warning: "bg-warning/20",
+        error: "bg-error/20",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const sliderRangeVariants = cva(
+  "absolute h-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground",
+        primary: "bg-primary",
+        secondary: "bg-secondary",
+        accent: "bg-accent",
+        success: "bg-success",
+        warning: "bg-warning",
+        error: "bg-error",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  }
+)
+
+const sliderThumbVariants = cva(
+  "block rounded-full border-2 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: "border-foreground bg-background",
+        primary: "border-primary bg-background",
+        secondary: "border-secondary bg-background",
+        accent: "border-accent bg-background",
+        success: "border-success bg-background",
+        warning: "border-warning bg-background",
+        error: "border-error bg-background",
+      },
+      size: {
+        sm: "h-3 w-3",
+        default: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+    },
+  }
+)
+
+// Custom type definition for component properties
+type SliderBaseProps = {
+  /**
+   * Track variant
+   */
+  trackVariant?: VariantProps<typeof sliderTrackVariants>["variant"];
+  /**
+   * Range variant
+   */
+  rangeVariant?: VariantProps<typeof sliderRangeVariants>["variant"];
+  /**
+   * Thumb variant
+   */
+  thumbVariant?: VariantProps<typeof sliderThumbVariants>["variant"];
+  /**
+   * Thumb size
+   */
+  thumbSize?: VariantProps<typeof sliderThumbVariants>["size"];
+  /**
+   * Show value label
+   */
+  showValueLabel?: boolean;
+  /**
+   * Value label format function
+   */
+  valueLabelFormat?: (value: number) => string;
+  /**
+   * Value label class name
+   */
+  valueLabelClassName?: string;
+  /**
+   * Slider value
+   */
+  value?: number[];
+  /**
+   * Default value
+   */
+  defaultValue?: number[];
+  /**
+   * Function called when value changes
+   */
+  onValueChange?: (value: number[]) => void;
+  /**
+   * Minimum value
+   */
+  min?: number;
+  /**
+   * Maximum value
+   */
+  max?: number;
+  /**
+   * Step value
+   */
+  step?: number;
+  /**
+   * Slider size
+   */
+  size?: VariantProps<typeof sliderVariants>["size"];
+  /**
+   * Disabled state
+   */
+  disabled?: boolean;
+}
+
+// Merge HTML properties without defaultValue conflicts
+type SliderProps = SliderBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>
+
+const Slider = React.forwardRef<
+  HTMLDivElement,
+  SliderProps
+>(({
+  className,
+  size,
+  trackVariant,
+  rangeVariant,
+  thumbVariant,
+  thumbSize,
+  showValueLabel = false,
+  valueLabelFormat,
+  valueLabelClassName,
+  value,
+  defaultValue = [0],
+  onValueChange,
+  disabled,
+  ...props
+}, ref) => {
+  // Value management
+  const [sliderValue, setSliderValue] = React.useState<number[]>(
+    value as number[] || defaultValue as number[] || [0]
+  );
+
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setSliderValue(value as number[]);
+    }
+  }, [value]);
+
+  // Format value label with proper precision handling
+  const formatValue = (val: number) => {
+    if (valueLabelFormat) {
+      return valueLabelFormat(val);
+    }
+    // Round to avoid floating point precision issues
+    const roundedValue = Math.round(val * 100) / 100;
+    return `${roundedValue}`;
+  };
+
+  // Calculate percentage for thumb position
+  const calculateThumbPercent = (value: number, min: number, max: number) => {
+    return ((value - min) / (max - min)) * 100;
+  };
+
+  // Handle mouse/touch events
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  
+  const min = props.min || 0;
+  const max = props.max || 100;
+  const step = props.step || 1;
+
+  // Handle value change with proper precision
+  const handleValueChange = (newValues: number[]) => {
+    // Round values to avoid floating point precision issues
+    const roundedValues = newValues.map(val => {
+      if (step < 1) {
+        // For decimal steps, round to appropriate decimal places
+        const decimals = step.toString().split('.')[1]?.length || 0;
+        return Math.round(val * Math.pow(10, decimals)) / Math.pow(10, decimals);
+      }
+      return Math.round(val);
+    });
+    
+    setSliderValue(roundedValues);
+    if (onValueChange) {
+      onValueChange(roundedValues);
+    }
+  };
+
+  // Handle track click
+  const handleTrackClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    
+    const track = trackRef.current;
+    if (!track) return;
+
+    const rect = track.getBoundingClientRect();
+    const percent = (event.clientX - rect.left) / rect.width;
+    const rawValue = min + percent * (max - min);
+    const steppedValue = Math.round(rawValue / step) * step;
+    const boundedValue = Math.max(min, Math.min(max, steppedValue));
+    
+    const newValues = [...sliderValue];
+    // Just update the first thumb for simplicity
+    newValues[0] = boundedValue;
+    handleValueChange(newValues);
+  };
+
+  const handleThumbMouseDown = (index: number) => (event: React.MouseEvent) => {
+    if (disabled) return;
+    event.preventDefault();
+    
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const track = trackRef.current;
+      if (!track) return;
+
+      const rect = track.getBoundingClientRect();
+      const percent = (moveEvent.clientX - rect.left) / rect.width;
+      const rawValue = min + percent * (max - min);
+      const steppedValue = Math.round(rawValue / step) * step;
+      const boundedValue = Math.max(min, Math.min(max, steppedValue));
+      
+      const newValues = [...sliderValue];
+      newValues[index] = boundedValue;
+      handleValueChange(newValues);
+    };
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  return (
+    <div className="w-full" ref={ref} {...props}>
+      {showValueLabel && (
+        <div className={cn(
+          "flex justify-end mb-1 text-sm text-muted-foreground",
+          valueLabelClassName
+        )}>
+          {sliderValue.length === 1 ? (
+            <span>{formatValue(sliderValue[0])}</span>
+          ) : (
+            <span>{formatValue(sliderValue[0])} - {formatValue(sliderValue[sliderValue.length - 1])}</span>
+          )}
+        </div>
+      )}
+      
+      <div
+        className={cn(sliderVariants({ size }), className)}
+        data-disabled={disabled ? true : undefined}
+      >
+        {/* Track */}
+        <div
+          ref={trackRef}
+          className={cn(sliderTrackVariants({ variant: trackVariant || thumbVariant || "default" }))}
+          onClick={handleTrackClick}
+        >
+          {/* Range */}
+          <div
+            className={cn(sliderRangeVariants({ variant: rangeVariant || thumbVariant || "primary" }))}
+            style={{
+              left: '0%',
+              width: `${calculateThumbPercent(sliderValue[0], min, max)}%`,
+            }}
+          />
+        </div>
+
+        {/* Thumbs */}
+        {sliderValue.map((value, i) => (
+          <div
+            key={i}
+            className={cn(sliderThumbVariants({
+              variant: thumbVariant || "primary",
+              size: thumbSize
+            }))}
+            style={{
+              left: `${calculateThumbPercent(value, min, max)}%`,
+              transform: 'translateX(-50%)',
+              position: 'absolute',
+              top: '50%',
+              marginTop: thumbSize === "sm" ? '-6px' : thumbSize === "lg" ? '-12px' : '-8px',
+              cursor: disabled ? 'not-allowed' : 'pointer',
+            }}
+            onMouseDown={handleThumbMouseDown(i)}
+            aria-label={`Thumb ${i + 1}`}
+            tabIndex={disabled ? -1 : 0}
+            role="slider"
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={value}
+            aria-disabled={disabled}
+          />
+        ))}
+      </div>
+    </div>
+  )
+})
+
+Slider.displayName = "Slider"
+
+export { Slider }

package/src/components/ui/spotlight-card.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import * as React from "react";
+import { motion, useMotionValue, useSpring } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+export interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  spotlightColor?: string;
+  spotlightSize?: number;
+  spotlightIntensity?: number;
+  borderRadius?: string;
+}
+
+const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
+  (
+    {
+      children,
+      className,
+      spotlightColor = "rgba(255, 255, 255, 0.15)",
+      spotlightSize = 400,
+      spotlightIntensity = 0.5,
+      borderRadius = "0.5rem",
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const cardRef = React.useRef<HTMLDivElement>(null);
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+
+    const springConfig = { damping: 20, stiffness: 300 };
+    const spotlightX = useSpring(mouseX, springConfig);
+    const spotlightY = useSpring(mouseY, springConfig);
+
+    const handleMouseMove = React.useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!cardRef.current) return;
+
+        const rect = cardRef.current.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        mouseX.set(x);
+        mouseY.set(y);
+      },
+      [mouseX, mouseY]
+    );
+
+    const handleMouseLeave = React.useCallback(() => {
+      // Optionally fade out the spotlight on mouse leave
+      // For now, we'll keep it at the last position
+    }, []);
+
+    return (
+      <motion.div
+        ref={(el) => {
+          cardRef.current = el;
+          if (ref) {
+            if (typeof ref === "function") ref(el);
+            else ref.current = el;
+          }
+        }}
+        className={cn(
+          "relative overflow-hidden bg-card text-card-foreground",
+          className
+        )}
+        style={{
+          borderRadius,
+          ...style,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        whileHover={{ scale: 1.02 }}
+        transition={{ type: "spring", stiffness: 400, damping: 25 }}
+        {...props}
+      >
+        {/* Spotlight overlay */}
+        <motion.div
+          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 hover:opacity-100"
+          style={{
+            background: `radial-gradient(${spotlightSize}px circle at var(--x) var(--y), ${spotlightColor}, transparent ${spotlightIntensity * 100}%)`,
+            "--x": spotlightX,
+            "--y": spotlightY,
+          } as React.CSSProperties}
+        />
+
+        {/* Border glow effect */}
+        <motion.div
+          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 hover:opacity-100"
+          style={{
+            background: `radial-gradient(${spotlightSize * 1.5}px circle at var(--x) var(--y), ${spotlightColor}, transparent 40%)`,
+            "--x": spotlightX,
+            "--y": spotlightY,
+            filter: "blur(40px)",
+          } as React.CSSProperties}
+        />
+
+        {/* Card border */}
+        <div
+          className="absolute inset-0 rounded-[inherit] border border-border/50"
+          style={{
+            background: `radial-gradient(${spotlightSize * 2}px circle at var(--x) var(--y), rgba(255,255,255,0.1), transparent 40%)`,
+            "--x": spotlightX,
+            "--y": spotlightY,
+          } as React.CSSProperties}
+        />
+
+        {/* Content */}
+        <div className="relative z-10">{children}</div>
+      </motion.div>
+    );
+  }
+);
+
+SpotlightCard.displayName = "SpotlightCard";
+
+export { SpotlightCard };

package/src/components/ui/switch.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../../lib/utils"
+
+type SwitchSize = "sm" | "md" | "lg";
+type SwitchVariant = "primary" | "success" | "warning" | "danger" | "secondary";
+
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+  /** Switch boyutu */
+  size?: SwitchSize;
+  /** Switch renk varyantı */
+  variant?: SwitchVariant;
+  /** Yükleniyor durumunu gösterir */
+  loading?: boolean;
+  /** Sol tarafta gösterilecek ikon */
+  leftIcon?: React.ReactNode;
+  /** Sağ tarafta gösterilecek ikon */
+  rightIcon?: React.ReactNode;
+  /** Switch açıklaması */
+  description?: string;
+}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  SwitchProps
+>(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => (
+  <div className="inline-flex items-center gap-2">
+    {leftIcon && <span className="text-muted-foreground">{leftIcon}</span>}
+    <SwitchPrimitives.Root
+      className={cn(
+        "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 dark:data-[state=unchecked]:bg-gray-700/70 dark:focus-visible:ring-primary/40 dark:focus-visible:ring-offset-gray-950",
+        
+        // Boyutlar
+        size === "sm" && "h-4 w-8",
+        size === "md" && "h-6 w-11", 
+        size === "lg" && "h-7 w-14",
+        
+        // Varyantlar (checked durumunda)
+        variant === "primary" && "data-[state=checked]:bg-primary",
+        variant === "success" && "data-[state=checked]:bg-success",
+        variant === "warning" && "data-[state=checked]:bg-warning",
+        variant === "danger" && "data-[state=checked]:bg-error",
+        variant === "secondary" && "data-[state=checked]:bg-accent",
+        
+        // Unchecked durumu
+        "data-[state=unchecked]:bg-input",
+        
+        // Loading durumu
+        loading && "opacity-80 cursor-wait",
+        
+        className
+      )}
+      disabled={loading || props.disabled}
+      {...props}
+      ref={ref}
+    >
+      {loading ? (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-primary"></div>
+        </div>
+      ) : null}
+      
+      <SwitchPrimitives.Thumb
+        className={cn(
+          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+          // Boyuta göre thumb boyutları
+          size === "sm" && "h-3 w-3 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+          size === "md" && "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+          size === "lg" && "h-6 w-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitives.Root>
+    {rightIcon && <span className="text-muted-foreground">{rightIcon}</span>}
+    {description && <span className="text-sm text-muted-foreground">{description}</span>}
+  </div>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
+export type { SwitchSize, SwitchVariant }