premium-react-loaders 2.3.0 → 3.0.0

package/README.md

@@ -1,6 +1,6 @@
 # Premium React Loaders
 
-A comprehensive collection of **28 premium, production-ready loading components** for React applications. Built with TypeScript and custom CSS for maximum flexibility and zero configuration.
+A comprehensive collection of **40 premium, production-ready loading components** for React applications. Built with TypeScript and custom CSS for maximum flexibility and zero configuration.
 
 [![npm version](https://img.shields.io/npm/v/premium-react-loaders.svg)](https://www.npmjs.com/package/premium-react-loaders)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -11,11 +11,11 @@ A comprehensive collection of **28 premium, production-ready loading components*
 
 📚 **[Storybook Documentation](https://docs.premium-react-loaders.ishansasika.dev/)** - Detailed component documentation and examples
 
-See all 28 components in action with interactive examples and customization options.
+See all 40 components in action with interactive examples and customization options.
 
 ## Features
 
-- **28 Premium Components** across 7 categories (Skeleton, Spinner, Progress, Pulse, Overlay, Button, Status)
+- **40 Premium Components** across 13 categories (Skeleton, Spinner, Progress, Pulse, Overlay, Button, Status, Transition, Shimmer, Orbit, Bounce, Infinity, Text)
 - **Global Theming** - ThemeProvider for app-wide customization ✨ *New in v2.1.0*
 - **Smart Loading UX** - useLoader hook with delay, minDuration, and autoHide ✨ *New in v2.1.0*
 - **Enhanced CSS Variables** - Comprehensive theming with dark mode support ✨ *New in v2.1.0*
@@ -178,6 +178,48 @@ Animated indicators for success and error states:
 - **SuccessCheckmark** - Animated checkmark with optional circle background
 - **ErrorIndicator** - Animated X mark with optional shake effect and circle background
 
+### Transition Components (1 component) ✨ *New in v2.3.0*
+
+Smooth transitions between loading and loaded states:
+
+- **LoaderTransition** - Animated transitions between loading and content states with multiple animation types (fade, slide, scale)
+
+### Shimmer Components (3 components) ✨ *New in v3.0.0*
+
+Shimmer effect placeholders with directional animations:
+
+- **ShimmerBox** - Shimmer container with customizable direction (left-to-right, right-to-left, top-to-bottom, bottom-to-top)
+- **ShimmerText** - Multi-line text shimmer placeholder
+- **ShimmerButton** - Button placeholder with shimmer effect
+
+### Orbit Components (3 components) ✨ *New in v3.0.0*
+
+Orbital and atomic animations:
+
+- **OrbitDots** - Dots orbiting around a central point
+- **OrbitRings** - Concentric rotating rings
+- **AtomLoader** - Electron-like orbital animation with nucleus
+
+### Bounce Components (2 components) ✨ *New in v3.0.0*
+
+Physics-based bouncing loaders:
+
+- **BouncingDots** - Dots with physics-based bounce animation
+- **BouncingBalls** - 3D bouncing balls with shadow and squash effects
+
+### Infinity Components (2 components) ✨ *New in v3.0.0*
+
+Continuous loop animations:
+
+- **InfinityLoader** - Figure-8 infinity symbol animation with optional traveling dot
+- **MobiusLoader** - Segmented ribbon loop with twist effect
+
+### Text Components (1 component) ✨ *New in v3.0.0*
+
+Animated loading text:
+
+- **LoadingText** - Animated loading text with multiple animation styles (dots, fade, bounce, wave)
+
 ## Usage Examples
 
 ### Skeleton Components

package/dist/components/bounce/BouncingBalls.d.ts

@@ -0,0 +1,15 @@
+import { BouncingBallsProps } from '../../types';
+/**
+ * BouncingBalls - 3D-style bouncing balls with physics
+ *
+ * Balls bouncing with squash, stretch, and shadow effects for a realistic feel.
+ *
+ * @example
+ * ```tsx
+ * <BouncingBalls color="#3b82f6" />
+ * <BouncingBalls ballCount={4} shadow squash />
+ * <BouncingBalls ballSize={16} bounceHeight={2} />
+ * ```
+ */
+export declare const BouncingBalls: import('react').ForwardRefExoticComponent<BouncingBallsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BouncingBalls.d.ts.map

package/dist/components/bounce/BouncingBalls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BouncingBalls.d.ts","sourceRoot":"","sources":["../../../src/components/bounce/BouncingBalls.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAQjD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,+GA2GzB,CAAC"}

package/dist/components/bounce/BouncingDots.d.ts

@@ -0,0 +1,15 @@
+import { BouncingDotsProps } from '../../types';
+/**
+ * BouncingDots - Dots bouncing with physics-based easing
+ *
+ * Multiple dots bouncing up and down with a natural elastic feel.
+ *
+ * @example
+ * ```tsx
+ * <BouncingDots color="#3b82f6" />
+ * <BouncingDots dotCount={5} dotSize={12} />
+ * <BouncingDots bounceHeight={1.5} staggerDelay={100} />
+ * ```
+ */
+export declare const BouncingDots: import('react').ForwardRefExoticComponent<BouncingDotsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BouncingDots.d.ts.map

package/dist/components/bounce/BouncingDots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BouncingDots.d.ts","sourceRoot":"","sources":["../../../src/components/bounce/BouncingDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAQhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GA+ExB,CAAC"}

package/dist/components/bounce/index.d.ts

@@ -0,0 +1,3 @@
+export { BouncingDots } from './BouncingDots';
+export { BouncingBalls } from './BouncingBalls';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/bounce/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bounce/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/index.d.ts

@@ -6,4 +6,9 @@ export * from './overlay';
 export * from './button';
 export * from './status';
 export * from './transition';
+export * from './shimmer';
+export * from './orbit';
+export * from './bounce';
+export * from './infinity';
+export * from './text';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,cAAc,CAAC;AAG7B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC"}

package/dist/components/infinity/InfinityLoader.d.ts

@@ -0,0 +1,15 @@
+import { InfinityLoaderProps } from '../../types';
+/**
+ * InfinityLoader - Classic infinity symbol animation
+ *
+ * A smooth infinity (figure-8) path animation with optional traveling dot.
+ *
+ * @example
+ * ```tsx
+ * <InfinityLoader color="#3b82f6" />
+ * <InfinityLoader showDot gradient />
+ * <InfinityLoader thickness={4} size="lg" />
+ * ```
+ */
+export declare const InfinityLoader: import('react').ForwardRefExoticComponent<InfinityLoaderProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=InfinityLoader.d.ts.map

package/dist/components/infinity/InfinityLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfinityLoader.d.ts","sourceRoot":"","sources":["../../../src/components/infinity/InfinityLoader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AASlD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,gHAmI1B,CAAC"}

package/dist/components/infinity/MobiusLoader.d.ts

@@ -0,0 +1,15 @@
+import { MobiusLoaderProps } from '../../types';
+/**
+ * MobiusLoader - Möbius strip-style continuous loop
+ *
+ * A ribbon-like loader that creates a continuous looping effect.
+ *
+ * @example
+ * ```tsx
+ * <MobiusLoader color="#3b82f6" />
+ * <MobiusLoader segments={8} twist />
+ * <MobiusLoader ribbonWidth={6} thickness={2} />
+ * ```
+ */
+export declare const MobiusLoader: import('react').ForwardRefExoticComponent<MobiusLoaderProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=MobiusLoader.d.ts.map

package/dist/components/infinity/MobiusLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobiusLoader.d.ts","sourceRoot":"","sources":["../../../src/components/infinity/MobiusLoader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAShD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAwGxB,CAAC"}

package/dist/components/infinity/index.d.ts

@@ -0,0 +1,3 @@
+export { InfinityLoader } from './InfinityLoader';
+export { MobiusLoader } from './MobiusLoader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/infinity/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/infinity/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/orbit/AtomLoader.d.ts

@@ -0,0 +1,15 @@
+import { AtomLoaderProps } from '../../types';
+/**
+ * AtomLoader - Electron-like orbital animation
+ *
+ * Electrons orbiting around a nucleus, reminiscent of an atom.
+ *
+ * @example
+ * ```tsx
+ * <AtomLoader size={60} color="#3b82f6" />
+ * <AtomLoader orbits={4} showNucleus />
+ * <AtomLoader nucleusSize={12} electronSize={6} />
+ * ```
+ */
+export declare const AtomLoader: import('react').ForwardRefExoticComponent<AtomLoaderProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AtomLoader.d.ts.map

package/dist/components/orbit/AtomLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtomLoader.d.ts","sourceRoot":"","sources":["../../../src/components/orbit/AtomLoader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAS9C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,4GAqItB,CAAC"}

package/dist/components/orbit/OrbitDots.d.ts

@@ -0,0 +1,15 @@
+import { OrbitDotsProps } from '../../types';
+/**
+ * OrbitDots - Dots orbiting around a center point
+ *
+ * Multiple dots rotating in a circular path.
+ *
+ * @example
+ * ```tsx
+ * <OrbitDots size={60} color="#3b82f6" />
+ * <OrbitDots dotCount={6} dotSize={6} speed="fast" />
+ * <OrbitDots stagger color="#10b981" />
+ * ```
+ */
+export declare const OrbitDots: import('react').ForwardRefExoticComponent<OrbitDotsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=OrbitDots.d.ts.map

package/dist/components/orbit/OrbitDots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrbitDots.d.ts","sourceRoot":"","sources":["../../../src/components/orbit/OrbitDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAS7C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,2GA2FrB,CAAC"}

package/dist/components/orbit/OrbitRings.d.ts

@@ -0,0 +1,15 @@
+import { OrbitRingsProps } from '../../types';
+/**
+ * OrbitRings - Concentric rings with rotation animation
+ *
+ * Multiple rings rotating at different speeds, creating a hypnotic effect.
+ *
+ * @example
+ * ```tsx
+ * <OrbitRings size={60} color="#3b82f6" />
+ * <OrbitRings ringCount={4} alternate />
+ * <OrbitRings thickness={3} ringGap={8} />
+ * ```
+ */
+export declare const OrbitRings: import('react').ForwardRefExoticComponent<OrbitRingsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=OrbitRings.d.ts.map

package/dist/components/orbit/OrbitRings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrbitRings.d.ts","sourceRoot":"","sources":["../../../src/components/orbit/OrbitRings.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAS9C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,4GAyFtB,CAAC"}

package/dist/components/orbit/index.d.ts

@@ -0,0 +1,4 @@
+export { OrbitDots } from './OrbitDots';
+export { OrbitRings } from './OrbitRings';
+export { AtomLoader } from './AtomLoader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/orbit/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/orbit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/shimmer/ShimmerBox.d.ts

@@ -0,0 +1,15 @@
+import { ShimmerBoxProps } from '../../types';
+/**
+ * ShimmerBox - A versatile shimmer effect container
+ *
+ * A box with a continuous shimmer animation, perfect for placeholder content.
+ *
+ * @example
+ * ```tsx
+ * <ShimmerBox width={200} height={150} />
+ * <ShimmerBox width="100%" aspectRatio="16/9" />
+ * <ShimmerBox width={100} height={100} borderRadius="50%" />
+ * ```
+ */
+export declare const ShimmerBox: import('react').ForwardRefExoticComponent<ShimmerBoxProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ShimmerBox.d.ts.map

package/dist/components/shimmer/ShimmerBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerBox.d.ts","sourceRoot":"","sources":["../../../src/components/shimmer/ShimmerBox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQ9C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,4GA2FtB,CAAC"}

package/dist/components/shimmer/ShimmerButton.d.ts

@@ -0,0 +1,15 @@
+import { ShimmerButtonProps } from '../../types';
+/**
+ * ShimmerButton - Button placeholder with shimmer animation
+ *
+ * A button-shaped shimmer placeholder, perfect for loading states in button areas.
+ *
+ * @example
+ * ```tsx
+ * <ShimmerButton width={120} />
+ * <ShimmerButton width={150} showIcon iconPosition="left" />
+ * <ShimmerButton variant="outline" width="100%" />
+ * ```
+ */
+export declare const ShimmerButton: import('react').ForwardRefExoticComponent<ShimmerButtonProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ShimmerButton.d.ts.map

package/dist/components/shimmer/ShimmerButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerButton.d.ts","sourceRoot":"","sources":["../../../src/components/shimmer/ShimmerButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAQjD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,+GAiKzB,CAAC"}

package/dist/components/shimmer/ShimmerText.d.ts

@@ -0,0 +1,15 @@
+import { ShimmerTextProps } from '../../types';
+/**
+ * ShimmerText - Text placeholder with shimmer animation
+ *
+ * Multiple lines of shimmer placeholders to represent text content.
+ *
+ * @example
+ * ```tsx
+ * <ShimmerText lines={3} />
+ * <ShimmerText lines={4} lastLineWidth="60%" />
+ * <ShimmerText width="100%" height={16} lineGap={8} />
+ * ```
+ */
+export declare const ShimmerText: import('react').ForwardRefExoticComponent<ShimmerTextProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ShimmerText.d.ts.map

package/dist/components/shimmer/ShimmerText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerText.d.ts","sourceRoot":"","sources":["../../../src/components/shimmer/ShimmerText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA8GvB,CAAC"}

package/dist/components/shimmer/index.d.ts

@@ -0,0 +1,4 @@
+export { ShimmerBox } from './ShimmerBox';
+export { ShimmerText } from './ShimmerText';
+export { ShimmerButton } from './ShimmerButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/shimmer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/shimmer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/text/LoadingText.d.ts

@@ -0,0 +1,16 @@
+import { LoadingTextProps } from '../../types';
+/**
+ * LoadingText - Animated loading text with ellipsis
+ *
+ * Customizable "Loading..." text with various animation styles.
+ *
+ * @example
+ * ```tsx
+ * <LoadingText />
+ * <LoadingText text="Please wait" animation="fade" />
+ * <LoadingText text="Processing" dotCount={4} color="#3b82f6" />
+ * <LoadingText animation="bounce" fontSize={18} />
+ * ```
+ */
+export declare const LoadingText: import('react').ForwardRefExoticComponent<LoadingTextProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=LoadingText.d.ts.map

package/dist/components/text/LoadingText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingText.d.ts","sourceRoot":"","sources":["../../../src/components/text/LoadingText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ/C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,6GAiLvB,CAAC"}

package/dist/components/text/index.d.ts

@@ -0,0 +1,2 @@
+export { LoadingText } from './LoadingText';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/hooks/useEnhancedLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEnhancedLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useEnhancedLoader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAsC,MAAM,gBAAgB,CAAC;AAE5G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAkUjF"}
+{"version":3,"file":"useEnhancedLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useEnhancedLoader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAsC,MAAM,gBAAgB,CAAC;AAE5G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAuVjF"}

package/dist/index.cjs

@@ -34,6 +34,17 @@ const ButtonSpinner = require("./index32.cjs");
 const SuccessCheckmark = require("./index33.cjs");
 const ErrorIndicator = require("./index34.cjs");
 const LoaderTransition = require("./index35.cjs");
+const ShimmerBox = require("./index36.cjs");
+const ShimmerText = require("./index37.cjs");
+const ShimmerButton = require("./index38.cjs");
+const OrbitDots = require("./index39.cjs");
+const OrbitRings = require("./index40.cjs");
+const AtomLoader = require("./index41.cjs");
+const BouncingDots = require("./index42.cjs");
+const BouncingBalls = require("./index43.cjs");
+const InfinityLoader = require("./index44.cjs");
+const MobiusLoader = require("./index45.cjs");
+const LoadingText = require("./index46.cjs");
 const version = "2.1.0";
 exports.cn = classNames.cn;
 exports.getAnimationDuration = colors.getAnimationDuration;
@@ -70,4 +81,15 @@ exports.ButtonSpinner = ButtonSpinner.ButtonSpinner;
 exports.SuccessCheckmark = SuccessCheckmark.SuccessCheckmark;
 exports.ErrorIndicator = ErrorIndicator.ErrorIndicator;
 exports.LoaderTransition = LoaderTransition.LoaderTransition;
+exports.ShimmerBox = ShimmerBox.ShimmerBox;
+exports.ShimmerText = ShimmerText.ShimmerText;
+exports.ShimmerButton = ShimmerButton.ShimmerButton;
+exports.OrbitDots = OrbitDots.OrbitDots;
+exports.OrbitRings = OrbitRings.OrbitRings;
+exports.AtomLoader = AtomLoader.AtomLoader;
+exports.BouncingDots = BouncingDots.BouncingDots;
+exports.BouncingBalls = BouncingBalls.BouncingBalls;
+exports.InfinityLoader = InfinityLoader.InfinityLoader;
+exports.MobiusLoader = MobiusLoader.MobiusLoader;
+exports.LoadingText = LoadingText.LoadingText;
 exports.version = version;

package/dist/index.js

@@ -32,12 +32,31 @@ import { ButtonSpinner } from "./index32.js";
 import { SuccessCheckmark } from "./index33.js";
 import { ErrorIndicator } from "./index34.js";
 import { LoaderTransition } from "./index35.js";
+import { ShimmerBox } from "./index36.js";
+import { ShimmerText } from "./index37.js";
+import { ShimmerButton } from "./index38.js";
+import { OrbitDots } from "./index39.js";
+import { OrbitRings } from "./index40.js";
+import { AtomLoader } from "./index41.js";
+import { BouncingDots } from "./index42.js";
+import { BouncingBalls } from "./index43.js";
+import { InfinityLoader } from "./index44.js";
+import { MobiusLoader } from "./index45.js";
+import { LoadingText } from "./index46.js";
 const version = "2.1.0";
 export {
+  AtomLoader,
+  BouncingBalls,
+  BouncingDots,
   ButtonSpinner,
   ErrorIndicator,
+  InfinityLoader,
   LoaderOverlay,
   LoaderTransition,
+  LoadingText,
+  MobiusLoader,
+  OrbitDots,
+  OrbitRings,
   ProgressBar,
   ProgressCircle,
   ProgressRing,
@@ -45,6 +64,9 @@ export {
   PulseBars,
   PulseDots,
   PulseWave,
+  ShimmerBox,
+  ShimmerButton,
+  ShimmerText,
   Skeleton,
   SkeletonAvatar,
   SkeletonCard,

package/dist/index10.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const SkeletonImage = react.forwardRef(
   ({
     width = "100%",

package/dist/index10.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index47.js";
 const SkeletonImage = forwardRef(
   ({
     width = "100%",

package/dist/index11.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
 const SkeletonAvatar = require("./index9.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonCard = react.forwardRef(
   ({

package/dist/index11.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
 import { SkeletonAvatar } from "./index9.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index47.js";
 import { cn } from "./index3.js";
 const SkeletonCard = forwardRef(
   ({

package/dist/index12.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonList = react.forwardRef(

package/dist/index12.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index47.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonList = forwardRef(

package/dist/index13.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonTable = react.forwardRef(
   ({

package/dist/index13.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index47.js";
 import { cn } from "./index3.js";
 const SkeletonTable = forwardRef(
   ({

package/dist/index14.cjs

@@ -5,7 +5,7 @@ const react = require("react");
 const Skeleton = require("./index7.cjs");
 const SkeletonText = require("./index8.cjs");
 const SkeletonAvatar = require("./index9.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonPage = react.forwardRef(
   ({

package/dist/index14.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
 import { SkeletonText } from "./index8.js";
 import { SkeletonAvatar } from "./index9.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index47.js";
 import { cn } from "./index3.js";
 const SkeletonPage = forwardRef(
   ({

package/dist/index15.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonForm = react.forwardRef(

package/dist/index15.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index47.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonForm = forwardRef(

package/dist/index16.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerCircle = react.forwardRef(

package/dist/index16.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index36.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerCircle = forwardRef(

package/dist/index17.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerRing = react.forwardRef(

package/dist/index17.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index36.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerRing = forwardRef(

package/dist/index18.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const colors = require("./index4.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index47.cjs");
 const classNames = require("./index3.cjs");
 const SpinnerDots = react.forwardRef(
   ({

package/dist/index18.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index36.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
 import { cn } from "./index3.js";
 const SpinnerDots = forwardRef(
   ({