@moontra/moonui 2.0.7 → 2.0.9

package/src/components/ui/skeleton.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";
+import { motion } from "framer-motion";
+import { skeletonAnimation } from "@/lib/micro-interactions";
+
+/**
+ * Skeleton Component
+ *
+ * A loading placeholder that mimics the structure of content.
+ * Fully integrated with the theme system and provides various shapes, sizes, and animations.
+ */
+
+const skeletonVariants = cva(
+  "animate-pulse rounded-md",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        primary: "bg-primary/10",
+        secondary: "bg-secondary/10",
+        accent: "bg-accent",
+      },
+      size: {
+        default: "",
+        sm: "scale-90",
+        lg: "scale-110",
+      },
+      shape: {
+        rect: "rounded-md",
+        circle: "rounded-full",
+        pill: "rounded-full",
+      },
+      animation: {
+        pulse: "animate-pulse",
+        wave: "overflow-hidden relative after:absolute after:inset-0 after:-translate-x-full after:animate-[shimmer_2s_infinite] after:bg-gradient-to-r after:from-transparent after:via-white/10 after:to-transparent dark:after:via-white/5",
+        none: "animate-none",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "rect",
+      animation: "pulse",
+    },
+  }
+);
+
+export interface SkeletonProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof skeletonVariants> {
+  /**
+   * Height of the skeleton
+   */
+  height?: string | number;
+  /**
+   * Width of the skeleton
+   */
+  width?: string | number;
+  /**
+   * Whether the content is loaded
+   */
+  isLoaded?: boolean;
+  /**
+   * Content to show when loaded
+   */
+  children?: React.ReactNode;
+  /**
+   * Fade-in animation duration in ms
+   */
+  fadeInDuration?: number;
+  /**
+   * Use motion animation for loading state
+   */
+  motion?: boolean;
+}
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ 
+    className,
+    variant,
+    size,
+    shape,
+    animation,
+    height,
+    width,
+    isLoaded = false,
+    children,
+    fadeInDuration = 400,
+    motion: useMotion = false,
+    style,
+    ...props 
+  }, ref) => {
+    // Show content when loaded
+    if (isLoaded && children) {
+      if (useMotion) {
+        return (
+          <motion.div
+            ref={ref}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: fadeInDuration / 1000 }}
+            className={className}
+            style={{
+              height,
+              width,
+              ...style,
+            }}
+            {...props}
+          >
+            {children}
+          </motion.div>
+        );
+      }
+      
+      return (
+        <div
+          ref={ref}
+          className={cn("animate-fade-in", className)}
+          style={{
+            animationDuration: `${fadeInDuration}ms`,
+            height,
+            width,
+            ...style,
+          }}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    const SkeletonElement = useMotion ? motion.div : "div";
+    
+    return (
+      <SkeletonElement
+        ref={ref}
+        className={cn(
+          skeletonVariants({ variant, size, shape, animation }),
+          "relative isolate",
+          className
+        )}
+        style={{
+          height,
+          width,
+          ...style,
+        }}
+        {...(useMotion ? skeletonAnimation : {})}
+        {...props}
+      />
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+/**
+ * Text Skeleton Component
+ * 
+ * Creates skeleton loading states for text content
+ */
+export interface SkeletonTextProps extends Omit<SkeletonProps, "children" | "isLoaded"> {
+  /**
+   * Kaç satır gösterileceği
+   */
+  lines?: number;
+  /**
+   * Satır yüksekliği
+   */
+  lineHeight?: string | number;
+  /**
+   * Satırlar arası boşluk
+   */
+  spacing?: string | number;
+  /**
+   * Son satırın genişlik yüzdesi (0-100)
+   */
+  lastLineWidth?: number;
+  /**
+   * Rastgele satır genişlikleri
+   */
+  randomWidths?: boolean;
+}
+
+export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
+  ({ 
+    className,
+    lines = 3,
+    lineHeight = "0.85rem",
+    spacing = "0.5rem",
+    lastLineWidth = 80,
+    randomWidths = false,
+    variant = "default",
+    animation = "pulse",
+    ...props 
+  }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("flex flex-col", className)}
+        style={{ gap: spacing }}
+        {...props}
+      >
+        {Array.from({ length: lines }).map((_, i) => {
+          const isLastLine = i === lines - 1;
+          // Use deterministic widths based on line index for SSR compatibility
+          const widthPercentage = isLastLine
+            ? lastLineWidth
+            : randomWidths
+            ? 85 + (i % 3) * 5 // Creates a pattern: 85%, 90%, 95%, 85%, ...
+            : 100;
+
+          return (
+            <Skeleton
+              key={i}
+              variant={variant}
+              animation={animation}
+              className="w-full"
+              style={{
+                height: lineHeight,
+                width: `${widthPercentage}%`,
+              }}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+);
+SkeletonText.displayName = "SkeletonText";
+
+/**
+ * Avatar Skeleton Component
+ */
+export interface SkeletonAvatarProps extends Omit<SkeletonProps, "shape" | "size"> {
+  /**
+   * Avatar boyutu (piksel)
+   */
+  size?: string | number;
+}
+
+export const SkeletonAvatar = React.forwardRef<HTMLDivElement, SkeletonAvatarProps>(
+  ({ 
+    className,
+    size = "2.5rem",
+    variant = "default",
+    animation = "pulse",
+    ...props 
+  }, ref) => {
+    return (
+      <Skeleton
+        ref={ref}
+        variant={variant}
+        animation={animation}
+        shape="circle"
+        className={cn("shrink-0", className)}
+        style={{
+          height: size,
+          width: size,
+        }}
+        {...props}
+      />
+    );
+  }
+);
+SkeletonAvatar.displayName = "SkeletonAvatar";
+
+/**
+ * Card Skeleton Component
+ */
+export interface SkeletonCardProps extends Omit<SkeletonProps, "children" | "isLoaded"> {
+  /**
+   * Kart başlığının gösterilip gösterilmeyeceği
+   */
+  showHeader?: boolean;
+  /**
+   * İçerik satır sayısı
+   */
+  contentLines?: number;
+  /**
+   * Alt bilgi gösterilip gösterilmeyeceği
+   */
+  showFooter?: boolean;
+}
+
+export const SkeletonCard = React.forwardRef<HTMLDivElement, SkeletonCardProps>(
+  ({ 
+    className,
+    showHeader = true,
+    contentLines = 3,
+    showFooter = true,
+    variant = "default",
+    animation = "pulse",
+    ...props 
+  }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "overflow-hidden rounded-md border border-border bg-background p-4",
+          className
+        )}
+        {...props}
+      >
+        {showHeader && (
+          <div className="mb-4 flex items-center gap-4">
+            <SkeletonAvatar size="2.5rem" variant={variant} animation={animation} />
+            <div className="flex-1">
+              <Skeleton 
+                variant={variant} 
+                animation={animation} 
+                className="mb-2 h-4 w-1/3" 
+              />
+              <Skeleton 
+                variant={variant} 
+                animation={animation} 
+                className="h-3 w-1/4" 
+              />
+            </div>
+          </div>
+        )}
+        
+        <SkeletonText 
+          lines={contentLines} 
+          variant={variant} 
+          animation={animation} 
+          className="mb-4" 
+        />
+        
+        {showFooter && (
+          <div className="flex items-center justify-between mt-4 pt-4 border-t border-border">
+            <Skeleton 
+              variant={variant} 
+              animation={animation} 
+              className="h-4 w-1/4" 
+            />
+            <Skeleton 
+              variant={variant} 
+              animation={animation} 
+              className="h-4 w-1/5" 
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+SkeletonCard.displayName = "SkeletonCard";
+
+export { skeletonVariants };

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 }