premium-react-loaders 2.3.1 → 3.1.0

package/README.md

@@ -1,6 +1,6 @@
 # Premium React Loaders
 
-A comprehensive collection of **29 premium, production-ready loading components** for React applications. Built with TypeScript and custom CSS for maximum flexibility and zero configuration.
+A comprehensive collection of **50+ 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,15 @@ A comprehensive collection of **29 premium, production-ready loading components*
 
 📚 **[Storybook Documentation](https://docs.premium-react-loaders.ishansasika.dev/)** - Detailed component documentation and examples
 
-See all 29 components in action with interactive examples and customization options.
+See all 50+ components in action with interactive examples and customization options.
 
 ## Features
 
-- **29 Premium Components** across 8 categories (Skeleton, Spinner, Progress, Pulse, Overlay, Button, Status, Transition)
+- **50+ Premium Components** across 15 categories (Skeleton, Spinner, Progress, Pulse, Overlay, Button, Status, Transition, Shimmer, Orbit, Bounce, Infinity, Text, 3D, Smart)
+- **6 Powerful Hooks** - useLoader, useEnhancedLoader, useLoadingOrchestrator, useLoadingAnalytics, useSmartLoader, useTheme ✨ *New in v3.1.0*
+- **3D Loaders** - Immersive 3D animations with CSS transforms ✨ *New in v3.1.0*
+- **Smart Components** - Context-aware skeletons and form field loaders ✨ *New in v3.1.0*
+- **Accessibility First** - LiveRegion component and announcement system ✨ *New in v3.1.0*
 - **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 +182,86 @@ 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)
+
+### 3D Components (5 components) ✨ *New in v3.1.0*
+
+Immersive 3D loaders with perspective transforms:
+
+- **CubeSpinner** - Rotating 3D cube with customizable faces and rotation axes (x, y, z, diagonal)
+- **FlipCard** - 3D card flip animation with horizontal/vertical modes
+- **PlaneRotate** - Multiple rotating planes in 3D space with synchronized/staggered modes
+- **Helix** - DNA-like spiral animation with particles and optional connecting lines
+- **PerspectiveRing** - 3D ring with tilt angle, shadow effects, and depth perception
+
+### Smart Components (3 components) ✨ *New in v3.1.0*
+
+Intelligent, context-aware loading placeholders:
+
+- **SmartSkeleton** - Auto-detecting skeleton that analyzes content type (text, image, card, list, table, form)
+- **FormFieldLoader** - Loading states for form inputs (text, select, checkbox, radio, textarea, file)
+- **DataTableSkeleton** - Advanced table skeleton with headers, sorting, filtering, pagination, and selection
+
+### Accessibility Components (1 component) ✨ *New in v3.1.0*
+
+Screen reader support and ARIA announcements:
+
+- **LiveRegion** - ARIA live region for screen reader announcements with configurable politeness levels
+
+## Hooks
+
+### Loading State Management
+
+- **useLoader** - Basic loading state with delay, minDuration, and autoHide *(v2.1.0+)*
+- **useEnhancedLoader** - Advanced loading with retry logic, success/error states, and history *(v2.3.0+)*
+- **useLoadingOrchestrator** - Manage multiple loading tasks with dependencies ✨ *New in v3.1.0*
+- **useLoadingAnalytics** - Track loading performance metrics and user experience ✨ *New in v3.1.0*
+- **useSmartLoader** - Intelligent loader with connection detection and progress estimation ✨ *New in v3.1.0*
+
+### Theming
+
+- **useTheme** - Access global theme configuration *(v2.1.0+)*
+
 ## Usage Examples
 
 ### Skeleton Components

package/dist/components/3d/CubeSpinner.d.ts

@@ -0,0 +1,21 @@
+import { CubeSpinnerProps } from '../../types';
+/**
+ * CubeSpinner - 3D rotating cube loader with perspective
+ *
+ * A visually striking 3D cube that rotates in space with customizable face colors,
+ * rotation axis, and optional wireframe edges.
+ *
+ * @example
+ * ```tsx
+ * <CubeSpinner size={60} />
+ * <CubeSpinner size="lg" rotationAxis="diagonal" />
+ * <CubeSpinner
+ *   size={80}
+ *   faceColors={['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899']}
+ *   showEdges
+ *   edgeColor="#000000"
+ * />
+ * ```
+ */
+export declare const CubeSpinner: import('react').ForwardRefExoticComponent<CubeSpinnerProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CubeSpinner.d.ts.map

package/dist/components/3d/CubeSpinner.d.ts.map

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

package/dist/components/3d/FlipCard.d.ts

@@ -0,0 +1,21 @@
+import { FlipCardProps } from '../../types';
+/**
+ * FlipCard - 3D card flip loader
+ *
+ * A card that flips between front and back faces in 3D space,
+ * with customizable colors and flip direction.
+ *
+ * @example
+ * ```tsx
+ * <FlipCard width={100} height={60} />
+ * <FlipCard
+ *   width={120}
+ *   height={80}
+ *   direction="vertical"
+ *   frontColor="#3b82f6"
+ *   backColor="#8b5cf6"
+ * />
+ * ```
+ */
+export declare const FlipCard: import('react').ForwardRefExoticComponent<FlipCardProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FlipCard.d.ts.map

package/dist/components/3d/FlipCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlipCard.d.ts","sourceRoot":"","sources":["../../../src/components/3d/FlipCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAS5C;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,0GAsGpB,CAAC"}

package/dist/components/3d/Helix.d.ts

@@ -0,0 +1,23 @@
+import { HelixProps } from '../../types';
+/**
+ * Helix - DNA-like spiral loader with 3D depth
+ *
+ * Creates a mesmerizing helix/spiral animation with particles rotating
+ * in a 3D spiral pattern, reminiscent of DNA structure.
+ *
+ * @example
+ * ```tsx
+ * <Helix size={80} />
+ * <Helix
+ *   size={100}
+ *   particleCount={16}
+ *   radius={30}
+ *   height={120}
+ *   turns={2}
+ *   direction="down"
+ *   showLines
+ * />
+ * ```
+ */
+export declare const Helix: import('react').ForwardRefExoticComponent<HelixProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Helix.d.ts.map

package/dist/components/3d/Helix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Helix.d.ts","sourceRoot":"","sources":["../../../src/components/3d/Helix.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAUzC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,uGA4IjB,CAAC"}

package/dist/components/3d/PerspectiveRing.d.ts

@@ -0,0 +1,21 @@
+import { PerspectiveRingProps } from '../../types';
+/**
+ * PerspectiveRing - 3D ring with perspective and shadow
+ *
+ * A ring that appears to rotate in 3D space with adjustable tilt,
+ * creating depth perception with optional shadow effects.
+ *
+ * @example
+ * ```tsx
+ * <PerspectiveRing size={80} />
+ * <PerspectiveRing
+ *   size={100}
+ *   tilt={60}
+ *   thickness={8}
+ *   showShadow
+ *   segments={12}
+ * />
+ * ```
+ */
+export declare const PerspectiveRing: import('react').ForwardRefExoticComponent<PerspectiveRingProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PerspectiveRing.d.ts.map

package/dist/components/3d/PerspectiveRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerspectiveRing.d.ts","sourceRoot":"","sources":["../../../src/components/3d/PerspectiveRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AASnD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe,iHA6G3B,CAAC"}

package/dist/components/3d/PlaneRotate.d.ts

@@ -0,0 +1,21 @@
+import { PlaneRotateProps } from '../../types';
+/**
+ * PlaneRotate - Multiple rotating planes in 3D space
+ *
+ * Creates a mesmerizing effect with multiple semi-transparent planes
+ * rotating in 3D space with different timing patterns.
+ *
+ * @example
+ * ```tsx
+ * <PlaneRotate size={60} />
+ * <PlaneRotate
+ *   size={80}
+ *   planeCount={4}
+ *   rotationType="staggered"
+ *   spacing={8}
+ *   opacity={0.7}
+ * />
+ * ```
+ */
+export declare const PlaneRotate: import('react').ForwardRefExoticComponent<PlaneRotateProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PlaneRotate.d.ts.map

package/dist/components/3d/PlaneRotate.d.ts.map

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

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

@@ -0,0 +1,6 @@
+export { CubeSpinner } from './CubeSpinner';
+export { FlipCard } from './FlipCard';
+export { PlaneRotate } from './PlaneRotate';
+export { Helix } from './Helix';
+export { PerspectiveRing } from './PerspectiveRing';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/3d/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/accessibility/LiveRegion.d.ts

@@ -0,0 +1,34 @@
+import { LiveRegionProps } from '../../types';
+/**
+ * LiveRegion - Accessible announcements for screen readers
+ *
+ * An ARIA live region that announces messages to screen readers without
+ * disrupting the visual interface. Useful for loading state updates,
+ * progress announcements, and status changes.
+ *
+ * @example
+ * ```tsx
+ * // Polite announcement (waits for user to finish current task)
+ * <LiveRegion
+ *   message="Loading data..."
+ *   politeness="polite"
+ *   clearAfter={3000}
+ * />
+ *
+ * // Assertive announcement (interrupts immediately)
+ * <LiveRegion
+ *   message="Error: Failed to load data"
+ *   politeness="assertive"
+ *   atomic
+ * />
+ *
+ * // Progress updates
+ * <LiveRegion
+ *   message={`Loading ${progress}% complete`}
+ *   politeness="polite"
+ *   clearAfter={1000}
+ * />
+ * ```
+ */
+export declare const LiveRegion: import('react').ForwardRefExoticComponent<LiveRegionProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=LiveRegion.d.ts.map

package/dist/components/accessibility/LiveRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../src/components/accessibility/LiveRegion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,UAAU,4GAwDtB,CAAC"}

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

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

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

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

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,12 @@ 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';
+export * from './3d';
+export * from './smart';
+export * from './accessibility';
 //# 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;AAGvB,cAAc,MAAM,CAAC;AAGrB,cAAc,SAAS,CAAC;AAGxB,cAAc,iBAAiB,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/skeleton/DataTableSkeleton.d.ts

@@ -0,0 +1,25 @@
+import { DataTableSkeletonProps } from '../../types';
+/**
+ * DataTableSkeleton - Advanced table skeleton with features
+ *
+ * Comprehensive table loading placeholder with support for headers, sorting,
+ * filtering, pagination, row selection, and action columns.
+ *
+ * @example
+ * ```tsx
+ * <DataTableSkeleton rows={5} columns={4} />
+ * <DataTableSkeleton
+ *   rows={10}
+ *   columns={6}
+ *   showHeader
+ *   showSortIndicators
+ *   showFilters
+ *   showPagination
+ *   showSelection
+ *   showActions
+ *   striped
+ * />
+ * ```
+ */
+export declare const DataTableSkeleton: import('react').ForwardRefExoticComponent<DataTableSkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DataTableSkeleton.d.ts.map

package/dist/components/skeleton/DataTableSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/DataTableSkeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,iBAAiB,mHA4R7B,CAAC"}

package/dist/components/skeleton/SmartSkeleton.d.ts

@@ -0,0 +1,23 @@
+import { SmartSkeletonProps } from '../../types';
+/**
+ * SmartSkeleton - Intelligent skeleton with auto-detection
+ *
+ * Automatically detects content layout and generates appropriate skeleton variant,
+ * or uses explicit content type for predictable rendering.
+ *
+ * @example
+ * ```tsx
+ * // Explicit content type
+ * <SmartSkeleton contentType="card" />
+ * <SmartSkeleton contentType="table" itemCount={5} />
+ *
+ * // Auto-detection from reference element
+ * <SmartSkeleton
+ *   contentType="auto"
+ *   referenceElement={containerRef.current}
+ *   detectionStrategy="mixed"
+ * />
+ * ```
+ */
+export declare const SmartSkeleton: import('react').ForwardRefExoticComponent<SmartSkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SmartSkeleton.d.ts.map

package/dist/components/skeleton/SmartSkeleton.d.ts.map

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

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

@@ -7,4 +7,6 @@ export { SkeletonList } from './SkeletonList';
 export { SkeletonTable } from './SkeletonTable';
 export { SkeletonPage } from './SkeletonPage';
 export { SkeletonForm } from './SkeletonForm';
+export { SmartSkeleton } from './SmartSkeleton';
+export { DataTableSkeleton } from './DataTableSkeleton';
 //# sourceMappingURL=index.d.ts.map