premium-react-loaders 1.3.0 → 2.1.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,20 @@ 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*
+- **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*
+- **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 +39,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,18 +55,29 @@ Import the styles in your main entry file (e.g., `main.tsx` or `App.tsx`):
 import 'premium-react-loaders/styles';
 ```
 
-### 2. Configure Tailwind
+That's it! No Tailwind configuration or additional setup needed.
 
-Add the library to your `tailwind.config.js` content array:
+### Optional: Global Theming (v2.1.0+)
 
-```javascript
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/premium-react-loaders/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-  // ... rest of your config
-};
+Wrap your app with `ThemeProvider` to customize all loaders globally:
+
+```tsx
+import { ThemeProvider } from 'premium-react-loaders';
+
+function App() {
+  return (
+    <ThemeProvider
+      theme={{
+        primaryColor: '#8b5cf6',
+        secondaryColor: '#ec4899',
+        defaultSize: 'lg',
+        defaultSpeed: 'fast',
+      }}
+    >
+      <YourApp />
+    </ThemeProvider>
+  );
+}
 ```
 
 ## Quick Start
@@ -100,7 +115,7 @@ function App() {
 
 ## Component Categories
 
-### Skeleton Loaders (8 components)
+### Skeleton Loaders (9 components)
 
 Placeholder components that mimic content layout while loading:
 
@@ -109,11 +124,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 +138,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)
 
@@ -317,16 +337,111 @@ import { SpinnerCircle, ProgressBar, PulseDots } from 'premium-react-loaders';
 <PulseDots size="md" reverse />
 ```
 
+### New in v2.1.0
+
+**Global Theming** - Customize all loaders from one place:
+
+```tsx
+import { ThemeProvider } from 'premium-react-loaders';
+
+function App() {
+  return (
+    <ThemeProvider
+      theme={{
+        primaryColor: '#8b5cf6',
+        secondaryColor: '#ec4899',
+        skeletonBase: '#e2e8f0',
+        skeletonHighlight: '#f1f5f9',
+        defaultSize: 'lg',
+        defaultSpeed: 'fast',
+        defaultDelay: 200,
+        defaultMinDuration: 600,
+        respectMotionPreference: true,
+      }}
+    >
+      {/* All loaders inherit these settings */}
+      <SpinnerCircle /> {/* Uses theme colors and size */}
+      <Skeleton /> {/* Uses theme skeleton colors */}
+    </ThemeProvider>
+  );
+}
+```
+
+**Smart Loading State Management** - Better UX with the `useLoader` hook:
+
+```tsx
+import { useLoader } from 'premium-react-loaders';
+import { SpinnerCircle } from 'premium-react-loaders';
+
+function MyComponent() {
+  const { loading, startLoading, stopLoading, isVisible } = useLoader({
+    delay: 200,        // Don't show loader for quick operations (<200ms)
+    minDuration: 600,  // Show loader for at least 600ms to avoid flashing
+    autoHide: 5000,    // Auto-hide after 5 seconds (optional)
+  });
+
+  const fetchData = async () => {
+    startLoading();
+    try {
+      await api.fetchData();
+    } finally {
+      stopLoading();
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={fetchData}>Load Data</button>
+      <SpinnerCircle visible={isVisible} />
+    </div>
+  );
+}
+```
+
+**Enhanced CSS Variables** - More control with comprehensive theming:
+
+```css
+:root {
+  /* Colors */
+  --loader-primary: #3b82f6;
+  --loader-secondary: #8b5cf6;
+  --skeleton-base: #e5e7eb;
+  --skeleton-highlight: #f5f5f5;
+
+  /* Sizes */
+  --loader-size-xs: 16px;
+  --loader-size-sm: 24px;
+  --loader-size-md: 40px;
+  --loader-size-lg: 56px;
+  --loader-size-xl: 72px;
+
+  /* Animation */
+  --loader-transition-fast: 150ms;
+  --loader-transition-normal: 300ms;
+  --loader-transition-slow: 500ms;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --skeleton-base: #2d3748;
+    --skeleton-highlight: #4a5568;
+  }
+}
+```
+
+**Improved TypingIndicator** - Smoother animations with dynamic timing that scales with speed settings.
+
 ## Customization
 
 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
@@ -345,16 +460,77 @@ Direct color control:
 <SpinnerCircle color="#8b5cf6" secondaryColor="#e0e0e0" />
 ```
 
-### 4. CSS Variables
+### 4. CSS Variables (Enhanced in v2.1.0)
 
-Override theme variables globally:
+Override theme variables globally for comprehensive customization:
 
 ```css
 :root {
+  /* Primary colors */
   --loader-primary: #3b82f6;
   --loader-secondary: #8b5cf6;
-  --skeleton-base: #e0e0e0;
+
+  /* Skeleton colors */
+  --skeleton-base: #e5e7eb;
   --skeleton-highlight: #f5f5f5;
+
+  /* Size presets */
+  --loader-size-xs: 16px;
+  --loader-size-sm: 24px;
+  --loader-size-md: 40px;
+  --loader-size-lg: 56px;
+  --loader-size-xl: 72px;
+
+  /* Spacing and layout */
+  --loader-gap: 0.5rem;
+  --loader-radius-sm: 0.25rem;
+  --loader-radius-md: 0.5rem;
+  --loader-radius-lg: 1rem;
+  --loader-radius-full: 9999px;
+
+  /* Animation speeds */
+  --loader-transition-fast: 150ms;
+  --loader-transition-normal: 300ms;
+  --loader-transition-slow: 500ms;
+
+  /* Overlay */
+  --loader-overlay-backdrop: rgba(0, 0, 0, 0.5);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --skeleton-base: #2d3748;
+    --skeleton-highlight: #4a5568;
+  }
+}
+```
+
+### 5. ThemeProvider (v2.1.0+)
+
+Use the `ThemeProvider` component for runtime theming:
+
+```tsx
+import { ThemeProvider, useTheme } from 'premium-react-loaders';
+
+function App() {
+  return (
+    <ThemeProvider
+      theme={{
+        primaryColor: '#8b5cf6',
+        secondaryColor: '#ec4899',
+        defaultSize: 'lg',
+      }}
+    >
+      <YourComponents />
+    </ThemeProvider>
+  );
+}
+
+// Access theme in child components
+function ChildComponent() {
+  const { theme } = useTheme();
+  return <SpinnerCircle />; // Automatically uses theme settings
 }
 ```
 
@@ -368,6 +544,9 @@ import type {
   SpinnerCircleProps,
   ProgressBarProps,
   PulseDotsProps,
+  LoaderTheme,
+  UseLoaderOptions,
+  UseLoaderReturn,
 } from 'premium-react-loaders';
 
 const MyComponent: React.FC = () => {
@@ -379,6 +558,21 @@ const MyComponent: React.FC = () => {
 
   return <Skeleton {...skeletonProps} />;
 };
+
+// Theme typing (v2.1.0+)
+const customTheme: LoaderTheme = {
+  primaryColor: '#8b5cf6',
+  secondaryColor: '#ec4899',
+  defaultSize: 'lg',
+  defaultSpeed: 'fast',
+};
+
+// useLoader hook typing (v2.1.0+)
+const loaderOptions: UseLoaderOptions = {
+  delay: 200,
+  minDuration: 600,
+  autoHide: 5000,
+};
 ```
 
 ## Common Props
@@ -456,12 +650,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/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,iHAqE3B,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,iHA+E3B,CAAC"}

package/dist/context/ThemeContext.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+/**
+ * Theme configuration for loaders
+ */
+export interface LoaderTheme {
+    /** Primary color for loaders */
+    primaryColor?: string;
+    /** Secondary color for loaders */
+    secondaryColor?: string;
+    /** Base color for skeletons */
+    skeletonBase?: string;
+    /** Highlight color for skeletons */
+    skeletonHighlight?: string;
+    /** Default size for loaders */
+    defaultSize?: number | string;
+    /** Default speed for animations */
+    defaultSpeed?: 'slow' | 'normal' | 'fast' | number;
+    /** Default delay before showing loaders */
+    defaultDelay?: number;
+    /** Default minimum duration for loaders */
+    defaultMinDuration?: number;
+    /** Default transition duration */
+    defaultTransition?: number | boolean;
+    /** Respect user's motion preferences by default */
+    respectMotionPreference?: boolean;
+}
+interface ThemeContextValue {
+    theme: LoaderTheme;
+}
+export interface ThemeProviderProps {
+    /** Theme configuration */
+    theme?: LoaderTheme;
+    /** Child components */
+    children: ReactNode;
+}
+/**
+ * ThemeProvider - Global theme configuration for loaders
+ *
+ * Provides theme values to all loader components in the component tree.
+ * Components will use theme values as defaults unless overridden by props.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from 'premium-react-loaders';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider
+ *       theme={{
+ *         primaryColor: '#8b5cf6',
+ *         defaultSpeed: 'fast',
+ *         defaultDelay: 200,
+ *         defaultMinDuration: 600,
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function ThemeProvider({ theme, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * useTheme - Access theme configuration
+ *
+ * Returns the current theme configuration from ThemeProvider.
+ * If no ThemeProvider is present, returns an empty theme object.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme } = useTheme();
+ *   return <div style={{ color: theme.primaryColor }}>Hello</div>;
+ * }
+ * ```
+ */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Get theme value with fallback
+ * @internal
+ */
+export declare function useThemeValue<K extends keyof LoaderTheme>(key: K, propValue: LoaderTheme[K] | undefined, defaultValue: LoaderTheme[K]): LoaderTheme[K];
+export {};
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/context/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/context/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrC,mDAAmD;IACnD,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,WAAW,CAAC;CACpB;AAID,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAU,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAIzE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAG5C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,WAAW,EACvD,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,GAC3B,WAAW,CAAC,CAAC,CAAC,CAGhB"}

package/dist/context/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider, useTheme, useThemeValue } from './ThemeContext';
+export type { LoaderTheme, ThemeProviderProps } from './ThemeContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACxE,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useLoader } from './useLoader';
+export type { UseLoaderOptions, UseLoaderReturn } from './useLoader';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/hooks/useLoader.d.ts

@@ -0,0 +1,56 @@
+export interface UseLoaderOptions {
+    /** Initial loading state */
+    initialLoading?: boolean;
+    /** Delay before showing loader (ms) */
+    delay?: number;
+    /** Minimum duration to show loader (ms) */
+    minDuration?: number;
+    /** Auto-hide loader after duration (ms) */
+    autoHide?: number;
+}
+export interface UseLoaderReturn {
+    /** Current loading state */
+    loading: boolean;
+    /** Start loading */
+    startLoading: () => void;
+    /** Stop loading */
+    stopLoading: () => void;
+    /** Toggle loading state */
+    toggleLoading: () => void;
+    /** Set loading state directly */
+    setLoading: (loading: boolean) => void;
+    /** Whether loader should be visible (accounts for delay/minDuration) */
+    isVisible: boolean;
+}
+/**
+ * useLoader - Manage loading states with smart UX features
+ *
+ * A hook for managing loader visibility with built-in delay, minimum duration,
+ * and auto-hide capabilities for optimal user experience.
+ *
+ * @param options - Configuration options
+ * @returns Loading state and control functions
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { loading, startLoading, stopLoading, isVisible } = useLoader({
+ *     delay: 200,
+ *     minDuration: 600,
+ *   });
+ *
+ *   const fetchData = async () => {
+ *     startLoading();
+ *     try {
+ *       await api.fetchData();
+ *     } finally {
+ *       stopLoading();
+ *     }
+ *   };
+ *
+ *   return <SpinnerCircle visible={isVisible} />;
+ * }
+ * ```
+ */
+export declare function useLoader(options?: UseLoaderOptions): UseLoaderReturn;
+//# sourceMappingURL=useLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useLoader.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,2BAA2B;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iCAAiC;IACjC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wEAAwE;IACxE,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAyGzE"}

package/dist/index.cjs

@@ -3,35 +3,40 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css         */
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const Skeleton = require("./index5.cjs");
-const SkeletonText = require("./index6.cjs");
-const SkeletonAvatar = require("./index7.cjs");
-const SkeletonImage = require("./index8.cjs");
-const SkeletonCard = require("./index9.cjs");
-const SkeletonList = require("./index10.cjs");
-const SkeletonTable = require("./index11.cjs");
-const SkeletonPage = require("./index12.cjs");
-const SkeletonForm = require("./index13.cjs");
-const SpinnerCircle = require("./index14.cjs");
-const SpinnerRing = require("./index15.cjs");
-const SpinnerDots = require("./index16.cjs");
-const SpinnerBars = require("./index17.cjs");
-const SpinnerGrid = require("./index18.cjs");
-const SpinnerWave = require("./index19.cjs");
-const SpinnerPulse = require("./index20.cjs");
-const ProgressBar = require("./index21.cjs");
-const ProgressCircle = require("./index22.cjs");
-const ProgressRing = require("./index23.cjs");
-const ProgressSteps = require("./index24.cjs");
-const PulseDots = require("./index25.cjs");
-const PulseWave = require("./index26.cjs");
-const PulseBars = require("./index27.cjs");
-const TypingIndicator = require("./index28.cjs");
-const LoaderOverlay = require("./index29.cjs");
-const version = "1.1.0";
+const ThemeContext = require("./index5.cjs");
+const useLoader = require("./index6.cjs");
+const Skeleton = require("./index7.cjs");
+const SkeletonText = require("./index8.cjs");
+const SkeletonAvatar = require("./index9.cjs");
+const SkeletonImage = require("./index10.cjs");
+const SkeletonCard = require("./index11.cjs");
+const SkeletonList = require("./index12.cjs");
+const SkeletonTable = require("./index13.cjs");
+const SkeletonPage = require("./index14.cjs");
+const SkeletonForm = require("./index15.cjs");
+const SpinnerCircle = require("./index16.cjs");
+const SpinnerRing = require("./index17.cjs");
+const SpinnerDots = require("./index18.cjs");
+const SpinnerBars = require("./index19.cjs");
+const SpinnerGrid = require("./index20.cjs");
+const SpinnerWave = require("./index21.cjs");
+const SpinnerPulse = require("./index22.cjs");
+const ProgressBar = require("./index23.cjs");
+const ProgressCircle = require("./index24.cjs");
+const ProgressRing = require("./index25.cjs");
+const ProgressSteps = require("./index26.cjs");
+const PulseDots = require("./index27.cjs");
+const PulseWave = require("./index28.cjs");
+const PulseBars = require("./index29.cjs");
+const TypingIndicator = require("./index30.cjs");
+const LoaderOverlay = require("./index31.cjs");
+const version = "2.1.0";
 exports.cn = classNames.cn;
 exports.getAnimationDuration = colors.getAnimationDuration;
 exports.normalizeSize = colors.normalizeSize;
+exports.ThemeProvider = ThemeContext.ThemeProvider;
+exports.useTheme = ThemeContext.useTheme;
+exports.useLoader = useLoader.useLoader;
 exports.Skeleton = Skeleton.Skeleton;
 exports.SkeletonText = SkeletonText.SkeletonText;
 exports.SkeletonAvatar = SkeletonAvatar.SkeletonAvatar;
@@ -58,4 +63,3 @@ exports.PulseBars = PulseBars.PulseBars;
 exports.TypingIndicator = TypingIndicator.TypingIndicator;
 exports.LoaderOverlay = LoaderOverlay.LoaderOverlay;
 exports.version = version;
-//# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 export * from './components';
 export type * from './types';
+export { ThemeProvider, useTheme } from './context';
+export type { LoaderTheme, ThemeProviderProps } from './context';
+export { useLoader } from './hooks';
+export type { UseLoaderOptions, UseLoaderReturn } from './hooks';
 export { cn } from './utils/classNames';
 export { getAnimationDuration, normalizeSize } from './utils/colors';
-export declare const version = "1.1.0";
+export declare const version = "2.1.0";
 //# sourceMappingURL=index.d.ts.map