react-loadly 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -1,6 +1,4 @@
-import { CSSProperties, FC } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IFallbackLoaderProps } from '@types';
+import React$1, { CSSProperties, ReactNode, FC } from 'react';
 
 interface DotProps {
     size?: number | string;
@@ -14,7 +12,7 @@ interface DotProps {
     glowIntensity?: number;
     "data-testid"?: string;
 }
-declare const Dot: React.FC<DotProps>;
+declare const Dot: React$1.FC<DotProps>;
 
 interface LineProps {
     /** Width of the line */
@@ -42,7 +40,7 @@ interface LineProps {
     /** Data test id */
     "data-testid"?: string;
 }
-declare const Line: React.FC<LineProps>;
+declare const Line: React$1.FC<LineProps>;
 
 interface RectangleProps {
     /** Width of the rectangle */
@@ -62,7 +60,7 @@ interface RectangleProps {
     /** Custom CSS class */
     className?: string;
     /** Custom styles */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     /** Animation name if any */
     animation?: string;
     /** Animation duration */
@@ -72,7 +70,7 @@ interface RectangleProps {
     /** Data test id */
     "data-testid"?: string;
 }
-declare const Rectangle: React.FC<RectangleProps>;
+declare const Rectangle: React$1.FC<RectangleProps>;
 
 interface CircleProps {
     size?: number | string;
@@ -81,13 +79,13 @@ interface CircleProps {
     borderWidth?: number | string;
     opacity?: number;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     animation?: string;
     animationDuration?: string;
     animationDelay?: string;
     "data-testid"?: string;
 }
-declare const Circle: ({ size, color, borderColor, borderWidth, opacity, className, style, animation, animationDuration, animationDelay, "data-testid": dataTestId, ...props }: CircleProps) => react_jsx_runtime.JSX.Element;
+declare const Circle: ({ size, color, borderColor, borderWidth, opacity, className, style, animation, animationDuration, animationDelay, "data-testid": dataTestId, ...props }: CircleProps) => React$1.JSX.Element;
 
 interface DotClusterProps {
     /** Number of dots in the cluster */
@@ -107,13 +105,13 @@ interface DotClusterProps {
     /** Custom CSS class */
     className?: string;
     /** Custom styles */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     /** Animation type */
     animationType?: "wave" | "pulse" | "fade" | "bounce";
     /** Data test id */
     "data-testid"?: string;
 }
-declare const DotCluster: React.FC<DotClusterProps>;
+declare const DotCluster: React$1.FC<DotClusterProps>;
 
 interface LineGroupProps {
     /** Number of lines in the group */
@@ -137,13 +135,13 @@ interface LineGroupProps {
     /** Custom CSS class */
     className?: string;
     /** Custom styles */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     /** Animation type */
     animationType?: "wave" | "pulse" | "scale" | "rotate";
     /** Data test id */
     "data-testid"?: string;
 }
-declare const LineGroup: React.FC<LineGroupProps>;
+declare const LineGroup: React$1.FC<LineGroupProps>;
 
 interface ShapeGroupProps {
     /** Number of shapes in the group */
@@ -165,7 +163,7 @@ interface ShapeGroupProps {
     /** Custom CSS class */
     className?: string;
     /** Custom styles */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     /** Animation type */
     animationType?: "pulse" | "rotate" | "scale" | "bounce";
     /** Border width for outlined shapes */
@@ -173,8 +171,12 @@ interface ShapeGroupProps {
     /** Data test id */
     "data-testid"?: string;
 }
-declare const ShapeGroup: React.FC<ShapeGroupProps>;
+declare const ShapeGroup: React$1.FC<ShapeGroupProps>;
 
+/**
+ * Base props interface for all loader components
+ * Provides common functionality across all loader types
+ */
 interface IBaseLoaderProps$1 {
   /** Custom CSS class name */
   className?: string;
@@ -200,9 +202,27 @@ interface IBaseLoaderProps$1 {
   showText?: boolean;
   /** Custom loading text */
   loadingText?: string;
-
   /** Data test id for testing */
   "data-testid"?: string;
+  /** Enable fullscreen mode */
+  fullscreen?: boolean;
+  /** Screen width for fullscreen mode */
+  screenWidth?: number | string;
+  /** Screen height for fullscreen mode */
+  screenHeight?: number | string;
+  /** Center the loader in fullscreen mode */
+  loaderCenter?: boolean;
+  /** Background color for fullscreen mode */
+  screenBackground?: string;
+}
+
+interface IElementLoaderProps extends IBaseLoaderProps$1 {
+  /** Animation type for logo */
+  animationType?: "spin" | "pulse" | "glow" | "bounce" | "flip";
+  /** Glow intensity (0-1) */
+  glowIntensity?: number;
+  /** React element to display (icon, div, paragraph, etc.) */
+  children?: ReactNode;
 }
 
 interface IFluidLoaderProps extends IBaseLoaderProps$1 {
@@ -219,7 +239,7 @@ interface IGeometricLoaderProps$1 extends IBaseLoaderProps$1 {
   borderWidth?: number;
 }
 
-interface ILoaderCSSVariables$1 {
+interface ILoaderCSSVariables {
   "--loader-color"?: string;
   "--loader-secondary-color"?: string;
   "--loader-size"?: string;
@@ -232,7 +252,7 @@ interface ILoaderCSSVariables$1 {
 
 interface ILogoLoaderProps extends IBaseLoaderProps$1 {
   /** Logo source (image URL or SVG) */
-  src?: string;
+  src: string;
   /** Logo alt text */
   alt?: string;
   /** Animation type for logo */
@@ -242,42 +262,161 @@ interface ILogoLoaderProps extends IBaseLoaderProps$1 {
 }
 
 interface ITextLoaderProps extends IBaseLoaderProps$1 {
-  /** Text to animate */
-  text?: string;
   /** Font family for text loaders */
   fontFamily?: string;
   /** Font weight */
   fontWeight?: number | string;
   /** Character animation delay */
   charDelay?: number;
+  loop?: boolean;
 }
 
-declare const BlobLoader: FC<IFluidLoaderProps>;
-
-declare const FallbackLoader: FC<IFallbackLoaderProps>;
+interface ISkeletonLoaderProps extends Exclude<IBaseLoaderProps$1, "color"> {
+  /** Number of skeleton lines to display */
+  lines?: number;
+  /** Variant of skeleton (line, card, avatar, text) */
+  variant?: "line" | "card" | "avatar" | "text" | "custom";
+  /** Width of skeleton elements */
+  width?: number | string;
+  /** Height of skeleton elements */
+  height?: number | string;
+  /** Border radius of skeleton elements */
+  borderRadius?: number | string;
+  /** Spacing between skeleton lines */
+  spacing?: number | string;
+  /** Whether to show shimmer animation */
+  shimmer?: boolean;
+  /** Shimmer color */
+  shimmerColor?: string;
+  /** Base color of skeleton */
+  baseColor?: string;
+  /** Highlight color for shimmer effect */
+  highlightColor?: string;
+}
 
-declare const FlowLoader: FC<IFluidLoaderProps>;
+interface IShimmerLoaderProps extends IBaseLoaderProps$1 {
+  /** Number of shimmer lines to display */
+  lines?: number;
+  /** Variant of shimmer (line, card, avatar, text, wave) */
+  variant?: "line" | "card" | "avatar" | "text" | "wave" | "custom";
+  /** Border radius of shimmer elements */
+  borderRadius?: number | string;
+  /** Spacing between shimmer lines */
+  spacing?: number | string;
+  /** Shimmer wave width */
+  waveWidth?: number | string;
+  /** Shimmer color */
+  shimmerColor?: string;
+  /** Highlight color for shimmer effect */
+  highlightColor?: string;
+  /** Wave direction */
+  waveDirection?: "left-to-right" | "right-to-left" | "top-to-bottom" | "bottom-to-top";
+}
 
-declare const GridLoader: FC<IGeometricLoaderProps$1>;
+interface ILoaderState$1 {
+  isLoading: boolean;
+  progress?: number;
+  error?: string | null;
+  retryCount?: number;
+}
 
-declare const LiquidLoader: FC<IFluidLoaderProps>;
+interface IUseLoaderStateOptions$1 {
+  initialLoading?: boolean;
+  timeout?: number;
+  maxRetries?: number;
+  onLoadingChange?: (isLoading: boolean) => void;
+  onError?: (error: string) => void;
+  onProgress?: (progress: number) => void;
+}
 
-declare const LogoSpinLoader: FC<ILogoLoaderProps>;
+interface IUseLoaderStateReturn$1 {
+  state: ILoaderState$1;
+  setLoading: (loading: boolean) => void;
+  setProgress: (progress: number) => void;
+  setError: (error: string | null) => void;
+  retry: () => void;
+  reset: () => void;
+}
 
-declare const PulseLoader: FC<IGeometricLoaderProps$1>;
+interface IFallbackLoaderProps extends IBaseLoaderProps$1 {
+  /** Error message to display */
+  error?: string;
+  /** Retry function */
+  onRetry?: () => void;
+  /** Show retry button */
+  showRetry?: boolean;
+  /** Custom fallback content */
+  children?: ReactNode;
+  /** Fallback type */
+  type?: "error" | "timeout" | "network";
+}
 
-declare const SpinLoader: FC<IGeometricLoaderProps$1>;
+type AnimationDirectionType =
+  | "normal"
+  | "reverse"
+  | "alternate"
+  | "alternate-reverse";
 
-declare const TypingLoader: FC<ITextLoaderProps>;
+type AnimationEasingType =
+  | "linear"
+  | "ease"
+  | "ease-in"
+  | "ease-out"
+  | "ease-in-out"
+  | "cubic-bezier(number, number, number, number)";
 
-declare const WaveLoader: FC<IGeometricLoaderProps$1>;
+type AnimationFillModeType = "none" | "forwards" | "backwards" | "both";
 
 declare const BarsLoader: FC<IGeometricLoaderProps$1>;
 
+declare const BlobLoader: FC<IFluidLoaderProps>;
+
 declare const BounceLoader: FC<IGeometricLoaderProps$1>;
 
 declare const DotsLoader: FC<IGeometricLoaderProps$1>;
 
+/**
+ * ElementLoader Component
+ *
+ * A flexible loader component that can display any React element with various animation effects.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with a div element
+ * <ElementLoader>
+ *   <div style={{ width: '100%', height: '100%', backgroundColor: 'blue' }} />
+ * </ElementLoader>
+ *
+ * // With different animation types
+ * <ElementLoader animationType="pulse">
+ *   <div>Your custom element here</div>
+ * </ElementLoader>
+ *
+ * // With loading text
+ * <ElementLoader showText loadingText="Loading...">
+ *   <YourIconComponent />
+ * </ElementLoader>
+ * ```
+ */
+
+declare const ElementLoader: FC<IElementLoaderProps>;
+
+declare const FallbackLoader: FC<IFallbackLoaderProps>;
+
+declare const FlowLoader: FC<IFluidLoaderProps>;
+
+declare const GridLoader: FC<IGeometricLoaderProps$1>;
+
+declare const LiquidLoader: FC<IFluidLoaderProps>;
+
+declare const LogoSpinLoader: FC<ILogoLoaderProps>;
+
+declare const PulseLoader: FC<IGeometricLoaderProps$1>;
+
+/**
+ * Base props interface for all loader components
+ * Provides common functionality across all loader types
+ */
 interface IBaseLoaderProps {
     /** Custom CSS class name */
     className?: string;
@@ -305,6 +444,16 @@ interface IBaseLoaderProps {
     loadingText?: string;
     /** Data test id for testing */
     "data-testid"?: string;
+    /** Enable fullscreen mode */
+    fullscreen?: boolean;
+    /** Screen width for fullscreen mode */
+    screenWidth?: number | string;
+    /** Screen height for fullscreen mode */
+    screenHeight?: number | string;
+    /** Center the loader in fullscreen mode */
+    loaderCenter?: boolean;
+    /** Background color for fullscreen mode */
+    screenBackground?: string;
 }
 
 interface IGeometricLoaderProps extends IBaseLoaderProps {
@@ -314,17 +463,6 @@ interface IGeometricLoaderProps extends IBaseLoaderProps {
     borderWidth?: number;
 }
 
-interface ILoaderCSSVariables {
-    "--loader-color"?: string;
-    "--loader-secondary-color"?: string;
-    "--loader-size"?: string;
-    "--loader-speed"?: string;
-    "--loader-background"?: string;
-    "--loader-text-color"?: string;
-    "--loader-border-width"?: string;
-    "--loader-glow-intensity"?: string;
-}
-
 interface ILoaderState {
     isLoading: boolean;
     progress?: number;
@@ -350,35 +488,19 @@ interface IUseLoaderStateReturn {
     reset: () => void;
 }
 
-interface ILoaderTheme {
-    name: string;
-    colors: {
-        primary: string;
-        secondary: string;
-        background: string;
-        text: string;
-        accent: string;
-    };
-    animation: {
-        duration: string;
-        easing: string;
-    };
-    typography: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-    };
-}
+declare const RingLoader: FC<IGeometricLoaderProps>;
 
-type AnimationDirectionType = "normal" | "reverse" | "alternate" | "alternate-reverse";
+declare const RotateLoader: FC<IGeometricLoaderProps$1>;
 
-type AnimationEasingType = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "cubic-bezier(number, number, number, number)";
+declare const ShimmerLoader: FC<IShimmerLoaderProps>;
 
-type AnimationFillModeType = "none" | "forwards" | "backwards" | "both";
+declare const SkeletonLoader: FC<ISkeletonLoaderProps>;
 
-declare const RingLoader: FC<IGeometricLoaderProps>;
+declare const SpinLoader: FC<IGeometricLoaderProps$1>;
 
-declare const RotateLoader: FC<IGeometricLoaderProps$1>;
+declare const TypingLoader: FC<ITextLoaderProps>;
+
+declare const WaveLoader: FC<IGeometricLoaderProps$1>;
 
 /**
  * Custom React hook for managing loader state with advanced features
@@ -432,7 +554,7 @@ declare function getSizeValue(size: number | string | undefined, fallback?: stri
  * @param variables - The loader CSS variables object
  * @returns React CSS properties object
  */
-declare function generateCSSVariables(variables: ILoaderCSSVariables$1): React.CSSProperties;
+declare function generateCSSVariables(variables: ILoaderCSSVariables): React.CSSProperties;
 
 /**
  * Calculates animation duration based on speed multiplier
@@ -455,13 +577,36 @@ declare function prefersReducedMotion(): boolean;
 /**
  * Get optimized animation settings based on user preferences
  * @param speed - The animation speed multiplier (default: 1)
+ * @param respectReducedMotion - Whether to respect reduced motion preference (default: true)
  * @returns Object with optimized animation settings
  */
-declare function getOptimizedAnimationSettings(speed?: number): {
+declare function getOptimizedAnimationSettings(speed?: number, respectReducedMotion?: boolean): {
     duration: string;
     playState: string;
     iterationCount: string | number;
 };
+/**
+ * Get animation direction CSS value
+ * @param direction - The animation direction
+ * @returns CSS direction value
+ */
+declare function getAnimationDirection(direction?: "normal" | "reverse" | "alternate" | "alternate-reverse"): string;
+/**
+ * Get animation easing CSS value
+ * @param easing - The animation easing function
+ * @returns CSS easing value
+ */
+declare function getAnimationEasing(easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "cubic-bezier"): string;
+/**
+ * Create a complete animation string
+ * @param name - The animation name
+ * @param duration - The animation duration
+ * @param easing - The animation easing
+ * @param direction - The animation direction
+ * @param iterationCount - The iteration count
+ * @returns Complete animation string
+ */
+declare function createAnimationString(name: string, duration: string, easing?: string, direction?: string, iterationCount?: string | number): string;
 
 /**
  * Converts hex color to RGB values
@@ -503,5 +648,5 @@ declare function generateId(prefix?: string): string;
  */
 declare function sanitizeCSSValue(value: string | number | undefined): string | undefined;
 
-export { BarsLoader, BlobLoader, BounceLoader, Circle, Dot, DotCluster, DotsLoader, FallbackLoader, FlowLoader, GridLoader, Line, LineGroup, LiquidLoader, LogoSpinLoader, PulseLoader, Rectangle, RingLoader, RotateLoader, ShapeGroup, SpinLoader, TypingLoader, WaveLoader, clamp, createAnimationName, generateCSSVariables, generateId, getAnimationDuration, getOptimizedAnimationSettings, getSizeValue, hexToRgb, mergeProps, prefersReducedMotion, rgba, sanitizeCSSValue, useAsyncLoader, useLoaderState, useMultipleLoaderStates };
-export type { AnimationDirectionType, AnimationEasingType, AnimationFillModeType, CircleProps, DotClusterProps, DotProps, IBaseLoaderProps, ILoaderCSSVariables, ILoaderTheme, LineGroupProps, LineProps, RectangleProps, ShapeGroupProps };
+export { BarsLoader, BlobLoader, BounceLoader, Circle, Dot, DotCluster, DotsLoader, ElementLoader, FallbackLoader, FlowLoader, GridLoader, Line, LineGroup, LiquidLoader, LogoSpinLoader, PulseLoader, Rectangle, RingLoader, RotateLoader, ShapeGroup, ShimmerLoader, SkeletonLoader, SpinLoader, TypingLoader, WaveLoader, clamp, createAnimationName, createAnimationString, generateCSSVariables, generateId, getAnimationDirection, getAnimationDuration, getAnimationEasing, getOptimizedAnimationSettings, getSizeValue, hexToRgb, mergeProps, prefersReducedMotion, rgba, sanitizeCSSValue, useAsyncLoader, useLoaderState, useMultipleLoaderStates };
+export type { AnimationDirectionType, AnimationEasingType, AnimationFillModeType, CircleProps, DotClusterProps, DotProps, IBaseLoaderProps$1 as IBaseLoaderProps, IElementLoaderProps, IFallbackLoaderProps, IFluidLoaderProps, IGeometricLoaderProps$1 as IGeometricLoaderProps, ILoaderCSSVariables, ILoaderState$1 as ILoaderState, ILogoLoaderProps, IShimmerLoaderProps, ISkeletonLoaderProps, ITextLoaderProps, IUseLoaderStateOptions$1 as IUseLoaderStateOptions, IUseLoaderStateReturn$1 as IUseLoaderStateReturn, LineGroupProps, LineProps, RectangleProps, ShapeGroupProps };