premium-react-loaders 1.2.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # Premium React Loaders
 
-A comprehensive collection of **25 premium, production-ready loading components** for React applications. Built with TypeScript and Tailwind CSS for maximum flexibility and customization.
+A comprehensive collection of **25 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)
@@ -16,16 +16,17 @@ See all 25 components in action with interactive examples and customization opti
 ## Features
 
 - **25 Premium Components** across 5 categories (Skeleton, Spinner, Progress, Pulse, Overlay)
-- **Size Presets** - Easy sizing with `xs`, `sm`, `md`, `lg`, `xl` presets ✨ *New in v1.2.0*
-- **Reduced Motion Support** - Respects `prefers-reduced-motion` for accessibility ✨ *New in v1.2.0*
-- **Animation Direction Control** - Reverse animations with `reverse` prop ✨ *New in v1.2.0*
+- **Zero Configuration** - No Tailwind or build setup required ✨ *New in v2.0.0*
+- **Tiny Bundle Size** - 70% smaller CSS (6.27 KB → 1.64 KB gzipped) ✨ *New in v2.0.0*
+- **Zero Runtime Dependencies** - No external dependencies needed ✨ *New in v2.0.0*
+- **Size Presets** - Easy sizing with `xs`, `sm`, `md`, `lg`, `xl` presets
+- **Reduced Motion Support** - Respects `prefers-reduced-motion` for accessibility
+- **Animation Direction Control** - Reverse animations with `reverse` prop
 - **Full TypeScript Support** with exported type definitions
-- **Tailwind CSS Integration** for easy customization
 - **Tree-shakeable** - only bundle what you use
 - **Accessible** - built with ARIA labels and best practices
 - **Performant** - hardware-accelerated CSS animations (60fps)
 - **Customizable** - multiple ways to style components
-- **Zero Dependencies** (except peer dependencies)
 
 ## Installation
 
@@ -35,15 +36,15 @@ npm install premium-react-loaders
 
 ### Peer Dependencies
 
-This library requires React and Tailwind CSS:
+This library only requires React:
 
 ```bash
-npm install react react-dom tailwindcss
+npm install react react-dom
 ```
 
-## Setup
+> **Note:** v2.0.0+ no longer requires Tailwind CSS! See [Migration Guide](#migrating-from-v1x-to-v20) below.
 
-### 1. Import Styles
+## Setup
 
 Import the styles in your main entry file (e.g., `main.tsx` or `App.tsx`):
 
@@ -51,19 +52,7 @@ Import the styles in your main entry file (e.g., `main.tsx` or `App.tsx`):
 import 'premium-react-loaders/styles';
 ```
 
-### 2. Configure Tailwind
-
-Add the library to your `tailwind.config.js` content array:
-
-```javascript
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/premium-react-loaders/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-  // ... rest of your config
-};
-```
+That's it! No Tailwind configuration or additional setup needed.
 
 ## Quick Start
 
@@ -100,7 +89,7 @@ function App() {
 
 ## Component Categories
 
-### Skeleton Loaders (8 components)
+### Skeleton Loaders (9 components)
 
 Placeholder components that mimic content layout while loading:
 
@@ -109,11 +98,12 @@ Placeholder components that mimic content layout while loading:
 - **SkeletonAvatar** - Avatar placeholder (circle/square)
 - **SkeletonImage** - Image placeholder with aspect ratio
 - **SkeletonCard** - Card layout with avatar + text
+- **SkeletonForm** - Form skeleton with inputs and labels
 - **SkeletonList** - List of skeleton items
 - **SkeletonTable** - Table skeleton with rows/columns
 - **SkeletonPage** - Pre-built full page layouts (default, dashboard, article, profile)
 
-### Spinner Loaders (5 components)
+### Spinner Loaders (7 components)
 
 Rotating and animated spinners:
 
@@ -122,22 +112,26 @@ Rotating and animated spinners:
 - **SpinnerDots** - Multiple dots rotating around center
 - **SpinnerBars** - Vertical bars with wave animation
 - **SpinnerGrid** - Grid of fading squares
+- **SpinnerPulse** - Pulsing circle spinner
+- **SpinnerWave** - Wave pattern spinner
 
-### Progress Loaders (3 components)
+### Progress Loaders (4 components)
 
 Progress indicators (determinate/indeterminate):
 
 - **ProgressBar** - Linear horizontal progress bar
 - **ProgressCircle** - Circular progress indicator
 - **ProgressRing** - Ring progress with gradient option
+- **ProgressSteps** - Multi-step progress indicator
 
-### Pulse Loaders (3 components)
+### Pulse Loaders (4 components)
 
 Bouncing, pulsing, wave animations:
 
 - **PulseDots** - Bouncing dots in sequence
 - **PulseWave** - Wave pattern bars
 - **PulseBars** - Equalizer-style pulsing bars
+- **TypingIndicator** - Typing animation indicator
 
 ### Overlay Components (1 component)
 
@@ -323,10 +317,10 @@ All components support multiple customization methods:
 
 ### 1. className Prop
 
-Pass Tailwind utility classes:
+Pass custom CSS classes:
 
 ```tsx
-<SpinnerCircle size={40} className="my-4 mx-auto" />
+<SpinnerCircle size={40} className="my-spinner" />
 ```
 
 ### 2. style Prop
@@ -456,12 +450,52 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 MIT © Ishan Karunaratne
 
+## Migrating from v1.x to v2.0
+
+v2.0.0 removes the Tailwind CSS dependency for a simpler, lighter library. Here's what changed:
+
+### Breaking Changes
+
+1. **No Tailwind Required** - The library now uses custom CSS instead of Tailwind
+2. **No Tailwind Configuration Needed** - Remove the library path from your `tailwind.config.js`
+3. **Slightly Different Styling** - Components use the same class names but with custom CSS utilities
+
+### Migration Steps
+
+1. **Update the package:**
+   ```bash
+   npm install premium-react-loaders@latest
+   ```
+
+2. **Remove Tailwind configuration** (if you're not using Tailwind for other parts of your app):
+   ```javascript
+   // Remove this from tailwind.config.js
+   './node_modules/premium-react-loaders/dist/**/*.{js,ts,jsx,tsx}'
+   ```
+
+3. **That's it!** Your components will continue to work with the same API. The styling is now self-contained.
+
+### What Stayed the Same
+
+- ✅ All component APIs are identical
+- ✅ All props work exactly the same
+- ✅ TypeScript types unchanged
+- ✅ Same import paths
+- ✅ Same customization options (className, style, color props)
+
+### Benefits of v2.0
+
+- 🎉 **70% smaller CSS bundle** (21KB → 6.27KB, 1.64KB gzipped)
+- 🎉 **36% smaller total package** (1.0MB → 640KB)
+- 🎉 **Zero configuration** - no Tailwind setup required
+- 🎉 **Works in any React project** - not just Tailwind projects
+- 🎉 **Faster installation** - fewer dependencies to download
+
 ## Acknowledgments
 
 Built with:
 - [React](https://react.dev/)
 - [TypeScript](https://www.typescriptlang.org/)
-- [Tailwind CSS](https://tailwindcss.com/)
 - [Vite](https://vite.dev/)
 - [Storybook](https://storybook.js.org/)
 

package/dist/components/overlay/LoaderOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoaderOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/LoaderOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,+GA+DzB,CAAC"}
+{"version":3,"file":"LoaderOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/LoaderOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,+GA2EzB,CAAC"}

package/dist/components/progress/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,6GA4GvB,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,6GAwHvB,CAAC"}

package/dist/components/progress/ProgressCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,gHAsH1B,CAAC"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,gHAiI1B,CAAC"}

package/dist/components/progress/ProgressRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAgIxB,CAAC"}
+{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA8IxB,CAAC"}

package/dist/components/progress/ProgressSteps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressSteps.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressSteps.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,+GAuIzB,CAAC"}
+{"version":3,"file":"ProgressSteps.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressSteps.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,+GAqJzB,CAAC"}

package/dist/components/pulse/PulseBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PulseBars.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAiErB,CAAC"}
+{"version":3,"file":"PulseBars.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GA4ErB,CAAC"}

package/dist/components/pulse/PulseDots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PulseDots.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAsDrB,CAAC"}
+{"version":3,"file":"PulseDots.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAiErB,CAAC"}

package/dist/components/pulse/PulseWave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PulseWave.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GA6DrB,CAAC"}
+{"version":3,"file":"PulseWave.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAwErB,CAAC"}

package/dist/components/pulse/TypingIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/TypingIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,iHA0D3B,CAAC"}
+{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/TypingIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,iHAqE3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sFA4DpB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sFAwEpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,gHAqC1B,CAAC"}
+{"version":3,"file":"SkeletonAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,gHAmD1B,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonForm.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAmFxB,CAAC"}
+{"version":3,"file":"SkeletonForm.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA6FxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonImage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAyCzB,CAAC"}
+{"version":3,"file":"SkeletonImage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAqDzB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonList.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAkDxB,CAAC"}
+{"version":3,"file":"SkeletonList.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GA8DxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonPage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAMhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA+LxB,CAAC"}
+{"version":3,"file":"SkeletonPage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAMhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA6MxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTable.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAgEzB,CAAC"}
+{"version":3,"file":"SkeletonTable.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GA8EzB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAsDxB,CAAC"}
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAkExB,CAAC"}

package/dist/components/spinner/SpinnerBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerBars.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAwDvB,CAAC"}
+{"version":3,"file":"SpinnerBars.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAU/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAmEvB,CAAC"}

package/dist/components/spinner/SpinnerCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerCircle.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,+GA0DzB,CAAC"}
+{"version":3,"file":"SpinnerCircle.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AASjD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,+GAuEzB,CAAC"}

package/dist/components/spinner/SpinnerDots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAyEvB,CAAC"}
+{"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAU/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAsFvB,CAAC"}

package/dist/components/spinner/SpinnerGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerGrid.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAqEvB,CAAC"}
+{"version":3,"file":"SpinnerGrid.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAkFvB,CAAC"}

package/dist/components/spinner/SpinnerPulse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerPulse.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerPulse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GA0ExB,CAAC"}
+{"version":3,"file":"SpinnerPulse.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerPulse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAuFxB,CAAC"}

package/dist/components/spinner/SpinnerRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GAiDvB,CAAC"}
+{"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA8DvB,CAAC"}

package/dist/components/spinner/SpinnerWave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerWave.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA8DvB,CAAC"}
+{"version":3,"file":"SpinnerWave.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA2EvB,CAAC"}

package/dist/index.cjs

@@ -58,4 +58,3 @@ exports.PulseBars = PulseBars.PulseBars;
 exports.TypingIndicator = TypingIndicator.TypingIndicator;
 exports.LoaderOverlay = LoaderOverlay.LoaderOverlay;
 exports.version = version;
-//# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -58,4 +58,3 @@ export {
   normalizeSize,
   version
 };
-//# sourceMappingURL=index.js.map

package/dist/index10.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index5.cjs");
+const hooks = require("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonList = react.forwardRef(
@@ -15,13 +16,22 @@ const SkeletonList = react.forwardRef(
     baseColor,
     highlightColor,
     borderRadius = "0.5rem",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-list",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -30,7 +40,9 @@ const SkeletonList = react.forwardRef(
         className: classNames.cn("flex flex-col", className),
         style: {
           gap: colors.normalizeSize(gap),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": "Loading list...",
@@ -55,4 +67,3 @@ const SkeletonList = react.forwardRef(
 );
 SkeletonList.displayName = "SkeletonList";
 exports.SkeletonList = SkeletonList;
-//# sourceMappingURL=index10.cjs.map

package/dist/index10.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
+import { useLoaderVisibility } from "./index30.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonList = forwardRef(
@@ -13,13 +14,22 @@ const SkeletonList = forwardRef(
     baseColor,
     highlightColor,
     borderRadius = "0.5rem",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-list",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -28,7 +38,9 @@ const SkeletonList = forwardRef(
         className: cn("flex flex-col", className),
         style: {
           gap: normalizeSize(gap),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": "Loading list...",
@@ -55,4 +67,3 @@ SkeletonList.displayName = "SkeletonList";
 export {
   SkeletonList
 };
-//# sourceMappingURL=index10.js.map

package/dist/index11.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index5.cjs");
+const hooks = require("./index30.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonTable = react.forwardRef(
   ({
@@ -12,13 +13,22 @@ const SkeletonTable = react.forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-table",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const renderRow = (isHeader = false) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Skeleton,
       {
@@ -37,7 +47,11 @@ const SkeletonTable = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("flex flex-col gap-3", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": "Loading table...",
         "aria-busy": "true",
@@ -52,4 +66,3 @@ const SkeletonTable = react.forwardRef(
 );
 SkeletonTable.displayName = "SkeletonTable";
 exports.SkeletonTable = SkeletonTable;
-//# sourceMappingURL=index11.cjs.map

package/dist/index11.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
+import { useLoaderVisibility } from "./index30.js";
 import { cn } from "./index3.js";
 const SkeletonTable = forwardRef(
   ({
@@ -10,13 +11,22 @@ const SkeletonTable = forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-table",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const renderRow = (isHeader = false) => /* @__PURE__ */ jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(
       Skeleton,
       {
@@ -35,7 +45,11 @@ const SkeletonTable = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("flex flex-col gap-3", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": "Loading table...",
         "aria-busy": "true",
@@ -52,4 +66,3 @@ SkeletonTable.displayName = "SkeletonTable";
 export {
   SkeletonTable
 };
-//# sourceMappingURL=index11.js.map

package/dist/index12.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const Skeleton = require("./index5.cjs");
 const SkeletonText = require("./index6.cjs");
 const SkeletonAvatar = require("./index7.cjs");
+const hooks = require("./index30.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonPage = react.forwardRef(
   ({
@@ -12,13 +13,22 @@ const SkeletonPage = react.forwardRef(
     animate = true,
     baseColor = "#e0e0e0",
     highlightColor = "#f5f5f5",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-page",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const commonProps = {
       animate,
       baseColor,
@@ -137,7 +147,11 @@ const SkeletonPage = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("w-full p-6", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": "Loading page...",
         "aria-busy": "true",
@@ -149,4 +163,3 @@ const SkeletonPage = react.forwardRef(
 );
 SkeletonPage.displayName = "SkeletonPage";
 exports.SkeletonPage = SkeletonPage;
-//# sourceMappingURL=index12.cjs.map

package/dist/index12.js

@@ -3,6 +3,7 @@ import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
 import { SkeletonText } from "./index6.js";
 import { SkeletonAvatar } from "./index7.js";
+import { useLoaderVisibility } from "./index30.js";
 import { cn } from "./index3.js";
 const SkeletonPage = forwardRef(
   ({
@@ -10,13 +11,22 @@ const SkeletonPage = forwardRef(
     animate = true,
     baseColor = "#e0e0e0",
     highlightColor = "#f5f5f5",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-page",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const commonProps = {
       animate,
       baseColor,
@@ -135,7 +145,11 @@ const SkeletonPage = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("w-full p-6", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": "Loading page...",
         "aria-busy": "true",
@@ -149,4 +163,3 @@ SkeletonPage.displayName = "SkeletonPage";
 export {
   SkeletonPage
 };
-//# sourceMappingURL=index12.js.map