premium-react-loaders 2.0.0 → 2.2.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 custom CSS for maximum flexibility and zero configuration.
+A comprehensive collection of **28 premium, production-ready loading components** for React applications. Built with TypeScript and custom CSS for maximum flexibility and zero configuration.
 
 [![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,14 @@ A comprehensive collection of **25 premium, production-ready loading components*
 
 📚 **[Storybook Documentation](https://docs.premium-react-loaders.ishansasika.dev/)** - Detailed component documentation and examples
 
-See all 25 components in action with interactive examples and customization options.
+See all 28 components in action with interactive examples and customization options.
 
 ## Features
 
-- **25 Premium Components** across 5 categories (Skeleton, Spinner, Progress, Pulse, Overlay)
+- **28 Premium Components** across 7 categories (Skeleton, Spinner, Progress, Pulse, Overlay, Button, Status)
+- **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
@@ -139,6 +165,19 @@ Wrapper component for displaying loaders over content:
 
 - **LoaderOverlay** - Displays any loader over content with backdrop (full-screen or container-relative)
 
+### Button Components (1 component) ✨ *New in v2.2.0*
+
+Specialized loaders for button loading states:
+
+- **ButtonSpinner** - Compact spinner optimized for buttons with multiple variants (circle, dots, bars) and positioning options
+
+### Status Components (2 components) ✨ *New in v2.2.0*
+
+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
+
 ## Usage Examples
 
 ### Skeleton Components
@@ -311,6 +350,144 @@ import { SpinnerCircle, ProgressBar, PulseDots } from 'premium-react-loaders';
 <PulseDots size="md" reverse />
 ```
 
+### New in v2.2.0
+
+**Button Loaders** - Specialized spinners for button states:
+
+```tsx
+import { ButtonSpinner } from 'premium-react-loaders';
+
+// Inside a button
+<button style={{ padding: '10px 20px', backgroundColor: '#3b82f6', color: 'white' }}>
+  <ButtonSpinner variant="circle" size={16} color="white">
+    Submit Form
+  </ButtonSpinner>
+</button>
+
+// Different variants
+<ButtonSpinner variant="dots" position="right">Next</ButtonSpinner>
+<ButtonSpinner variant="bars" showContent={false}>Loading</ButtonSpinner>
+```
+
+**Status Indicators** - Show success and error states with smooth animations:
+
+```tsx
+import { SuccessCheckmark, ErrorIndicator } from 'premium-react-loaders';
+
+// Success state
+<SuccessCheckmark
+  visible={isSuccess}
+  showCircle
+  fillCircle
+  size={64}
+  color="#10b981"
+/>
+
+// Error state with shake
+<ErrorIndicator
+  visible={hasError}
+  showCircle
+  shake
+  size={64}
+  color="#ef4444"
+/>
+```
+
+### 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 +516,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 +600,9 @@ import type {
   SpinnerCircleProps,
   ProgressBarProps,
   PulseDotsProps,
+  LoaderTheme,
+  UseLoaderOptions,
+  UseLoaderReturn,
 } from 'premium-react-loaders';
 
 const MyComponent: React.FC = () => {
@@ -373,6 +614,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/button/ButtonSpinner.d.ts

@@ -0,0 +1,25 @@
+import { ButtonSpinnerProps } from '../../types';
+/**
+ * ButtonSpinner - Spinner designed for button loading states
+ *
+ * A compact spinner component optimized for use inside buttons, with options for
+ * positioning relative to button content and different visual variants.
+ *
+ * @example
+ * ```tsx
+ * // Simple button with spinner
+ * <ButtonSpinner visible={isLoading}>Submit</ButtonSpinner>
+ *
+ * // Spinner on the left
+ * <ButtonSpinner visible={isLoading} position="left" variant="dots">
+ *   Loading...
+ * </ButtonSpinner>
+ *
+ * // Hide content when loading
+ * <ButtonSpinner visible={isLoading} showContent={false}>
+ *   Click Me
+ * </ButtonSpinner>
+ * ```
+ */
+export declare const ButtonSpinner: import('react').ForwardRefExoticComponent<ButtonSpinnerProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ButtonSpinner.d.ts.map

package/dist/components/button/ButtonSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/button/ButtonSpinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AASjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,aAAa,+GA8IzB,CAAC"}

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

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

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

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

package/dist/components/index.d.ts

@@ -3,4 +3,6 @@ export * from './spinner';
 export * from './progress';
 export * from './pulse';
 export * from './overlay';
+export * from './button';
+export * from './status';
 //# 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"}
+{"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"}

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/components/status/ErrorIndicator.d.ts

@@ -0,0 +1,32 @@
+import { ErrorIndicatorProps } from '../../types';
+/**
+ * ErrorIndicator - Animated error indicator with X mark
+ *
+ * Displays an animated X mark that draws itself, perfect for showing
+ * failed operations, validation errors, or error states.
+ *
+ * @example
+ * ```tsx
+ * // Simple error indicator
+ * <ErrorIndicator visible={hasError} />
+ *
+ * // With circle background and shake animation
+ * <ErrorIndicator
+ *   visible={hasError}
+ *   showCircle
+ *   circleColor="#ef4444"
+ *   fillCircle
+ *   shake
+ * />
+ *
+ * // Custom size and color
+ * <ErrorIndicator
+ *   visible={hasError}
+ *   size={64}
+ *   color="#dc2626"
+ *   duration={600}
+ * />
+ * ```
+ */
+export declare const ErrorIndicator: import('react').ForwardRefExoticComponent<ErrorIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ErrorIndicator.d.ts.map

package/dist/components/status/ErrorIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/status/ErrorIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,cAAc,gHAkG1B,CAAC"}

package/dist/components/status/SuccessCheckmark.d.ts

@@ -0,0 +1,31 @@
+import { SuccessCheckmarkProps } from '../../types';
+/**
+ * SuccessCheckmark - Animated checkmark for successful operations
+ *
+ * Displays an animated checkmark that draws itself, perfect for showing
+ * successful completion of actions like form submissions, file uploads, etc.
+ *
+ * @example
+ * ```tsx
+ * // Simple checkmark
+ * <SuccessCheckmark visible={isSuccess} />
+ *
+ * // With circle background
+ * <SuccessCheckmark
+ *   visible={isSuccess}
+ *   showCircle
+ *   circleColor="#10b981"
+ *   fillCircle
+ * />
+ *
+ * // Custom size and color
+ * <SuccessCheckmark
+ *   visible={isSuccess}
+ *   size={64}
+ *   color="#22c55e"
+ *   duration={600}
+ * />
+ * ```
+ */
+export declare const SuccessCheckmark: import('react').ForwardRefExoticComponent<SuccessCheckmarkProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SuccessCheckmark.d.ts.map

package/dist/components/status/SuccessCheckmark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuccessCheckmark.d.ts","sourceRoot":"","sources":["../../../src/components/status/SuccessCheckmark.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAGpD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,gBAAgB,kHAwF5B,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/status/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,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"}