premium-react-loaders 2.0.0 → 2.1.0

package/README.md

@@ -16,6 +16,9 @@ See all 25 components in action with interactive examples and customization opti
 ## Features
 
 - **25 Premium Components** across 5 categories (Skeleton, Spinner, Progress, Pulse, Overlay)
+- **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*
@@ -54,6 +57,29 @@ import 'premium-react-loaders/styles';
 
 That's it! No Tailwind configuration or additional setup needed.
 
+### Optional: Global Theming (v2.1.0+)
+
+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
 
 ```tsx
@@ -311,6 +337,101 @@ 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:
@@ -339,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
 }
 ```
 
@@ -362,6 +544,9 @@ import type {
   SpinnerCircleProps,
   ProgressBarProps,
   PulseDotsProps,
+  LoaderTheme,
+  UseLoaderOptions,
+  UseLoaderReturn,
 } from 'premium-react-loaders';
 
 const MyComponent: React.FC = () => {
@@ -373,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

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;

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAG5B,cAAc,cAAc,CAAC;AAG7B,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGrE,eAAO,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAG5B,cAAc,cAAc,CAAC;AAG7B,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAGjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGrE,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/dist/index.js

@@ -1,32 +1,34 @@
 /* empty css       */
 import { cn } from "./index3.js";
 import { getAnimationDuration, normalizeSize } from "./index4.js";
-import { Skeleton } from "./index5.js";
-import { SkeletonText } from "./index6.js";
-import { SkeletonAvatar } from "./index7.js";
-import { SkeletonImage } from "./index8.js";
-import { SkeletonCard } from "./index9.js";
-import { SkeletonList } from "./index10.js";
-import { SkeletonTable } from "./index11.js";
-import { SkeletonPage } from "./index12.js";
-import { SkeletonForm } from "./index13.js";
-import { SpinnerCircle } from "./index14.js";
-import { SpinnerRing } from "./index15.js";
-import { SpinnerDots } from "./index16.js";
-import { SpinnerBars } from "./index17.js";
-import { SpinnerGrid } from "./index18.js";
-import { SpinnerWave } from "./index19.js";
-import { SpinnerPulse } from "./index20.js";
-import { ProgressBar } from "./index21.js";
-import { ProgressCircle } from "./index22.js";
-import { ProgressRing } from "./index23.js";
-import { ProgressSteps } from "./index24.js";
-import { PulseDots } from "./index25.js";
-import { PulseWave } from "./index26.js";
-import { PulseBars } from "./index27.js";
-import { TypingIndicator } from "./index28.js";
-import { LoaderOverlay } from "./index29.js";
-const version = "1.1.0";
+import { ThemeProvider, useTheme } from "./index5.js";
+import { useLoader } from "./index6.js";
+import { Skeleton } from "./index7.js";
+import { SkeletonText } from "./index8.js";
+import { SkeletonAvatar } from "./index9.js";
+import { SkeletonImage } from "./index10.js";
+import { SkeletonCard } from "./index11.js";
+import { SkeletonList } from "./index12.js";
+import { SkeletonTable } from "./index13.js";
+import { SkeletonPage } from "./index14.js";
+import { SkeletonForm } from "./index15.js";
+import { SpinnerCircle } from "./index16.js";
+import { SpinnerRing } from "./index17.js";
+import { SpinnerDots } from "./index18.js";
+import { SpinnerBars } from "./index19.js";
+import { SpinnerGrid } from "./index20.js";
+import { SpinnerWave } from "./index21.js";
+import { SpinnerPulse } from "./index22.js";
+import { ProgressBar } from "./index23.js";
+import { ProgressCircle } from "./index24.js";
+import { ProgressRing } from "./index25.js";
+import { ProgressSteps } from "./index26.js";
+import { PulseDots } from "./index27.js";
+import { PulseWave } from "./index28.js";
+import { PulseBars } from "./index29.js";
+import { TypingIndicator } from "./index30.js";
+import { LoaderOverlay } from "./index31.js";
+const version = "2.1.0";
 export {
   LoaderOverlay,
   ProgressBar,
@@ -52,9 +54,12 @@ export {
   SpinnerPulse,
   SpinnerRing,
   SpinnerWave,
+  ThemeProvider,
   TypingIndicator,
   cn,
   getAnimationDuration,
   normalizeSize,
+  useLoader,
+  useTheme,
   version
 };

package/dist/index10.cjs

@@ -2,16 +2,13 @@
 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(
+const Skeleton = require("./index7.cjs");
+const hooks = require("./index32.cjs");
+const SkeletonImage = react.forwardRef(
   ({
-    items = 3,
-    itemHeight = "3rem",
-    gap = "0.75rem",
     width = "100%",
+    height = "200px",
+    aspectRatio,
     animate = true,
     baseColor,
     highlightColor,
@@ -21,7 +18,7 @@ const SkeletonList = react.forwardRef(
     transition,
     className,
     style,
-    testId = "skeleton-list",
+    testId = "skeleton-image",
     visible = true,
     ...rest
   }, ref) => {
@@ -33,37 +30,29 @@ const SkeletonList = react.forwardRef(
     );
     if (!shouldRender) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Skeleton.Skeleton,
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("flex flex-col", className),
+        width,
+        height: aspectRatio ? "auto" : height,
+        variant: "rounded",
+        borderRadius,
+        animate,
+        baseColor,
+        highlightColor,
+        className,
         style: {
-          gap: colors.normalizeSize(gap),
+          aspectRatio: aspectRatio || void 0,
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "status",
-        "aria-label": "Loading list...",
-        "aria-busy": "true",
-        ...rest,
-        children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.Skeleton,
-          {
-            width,
-            height: itemHeight,
-            variant: "rounded",
-            borderRadius,
-            animate,
-            baseColor,
-            highlightColor
-          },
-          index
-        ))
+        "aria-label": "Loading image...",
+        ...rest
       }
     );
   }
 );
-SkeletonList.displayName = "SkeletonList";
-exports.SkeletonList = SkeletonList;
+SkeletonImage.displayName = "SkeletonImage";
+exports.SkeletonImage = SkeletonImage;