loader-overlay 1.0.0

package/README.md

@@ -0,0 +1,366 @@
+# loader-overlay
+
+> A fully-featured React loader overlay component — 5 animation types, full theme control, progress tracking, outside-click dismissal, and **zero dependencies**.
+
+<!--
+[![npm version](https://img.shields.io/npm/v/loader-overlay.svg)](https://www.npmjs.com/package/loader-overlay)
+[![npm downloads](https://img.shields.io/npm/dm/loader-overlay.svg)](https://www.npmjs.com/package/loader-overlay)
+[![license](https://img.shields.io/npm/l/loader-overlay.svg)](LICENSE)
+-->
+[![TypeScript](https://img.shields.io/badge/TypeScript-ready-blue.svg)](https://www.typescriptlang.org/)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/loader-overlay)](https://bundlephobia.com/package/loader-overlay)
+
+---
+
+## ✨ Features
+
+- 🎡 **5 loader types** — `spinner`, `dots`, `pulse`, `ring`, `bar`
+- 🎨 **5 variants** — `dark`, `light`, `blur`, `transparent`, `gradient`
+- 📊 **Progress bar** — animated shimmer progress tracking
+- 🖱️ **Outside click dismiss** — close on backdrop click
+- ⏱️ **Auto-dismiss** — timeout-based auto-hide
+- ♿ **Accessible** — keyboard and screen reader friendly
+- 📦 **Zero dependencies** — only peer dep is React 17+
+- 🌳 **Tree-shakeable** — ESM and CJS builds
+- 💙 **TypeScript ready** — full type definitions included
+
+---
+
+## 📦 Installation
+
+```bash
+# npm
+npm install loader-overlay
+
+# yarn
+yarn add loader-overlay
+
+# pnpm
+pnpm add loader-overlay
+
+# bun
+bun add loader-overlay
+```
+
+### Peer Dependencies
+
+Make sure these are already in your project:
+
+```json
+{
+  "react": ">=17.0.0",
+  "react-dom": ">=17.0.0"
+}
+```
+
+---
+
+## 💻 Local Installation
+
+We provide a dedicated `consumer-demo` application directly in the repository to guarantee a seamless local installation testing environment out-of-the-box.
+
+### Using the Built-in Consumer Demo
+
+```bash
+git clone https://github.com/swapnilhpatil/loader-overlay.git
+cd loader-overlay
+npm install && npm run build
+
+# Navigate to the standalone consumer-demo test application
+cd consumer-demo
+npm install          # Automatically links to file:../
+npm run dev          # Tests the compiled library package locally!
+```
+
+### Install from Local Path (In your own App)
+
+```bash
+# Point directly to your local clone of loader-overlay
+npm install file:../loader-overlay  # npm 
+yarn add ../loader-overlay          # yarn
+pnpm add ../loader-overlay          # pnpm
+```
+
+### Install from Tarball
+
+```bash
+# In loader-overlay dir
+npm pack                            # creates loader-overlay-x.x.x.tgz
+
+# In your app
+npm install ../loader-overlay/loader-overlay-1.0.0.tgz
+```
+
+### Install from GitHub
+
+```bash
+npm install swapnilhpatil/loader-overlay        # latest
+npm install swapnilhpatil/loader-overlay#v1.0.0 # specific tag
+```
+
+> See [SETUP_GUIDE.md](SETUP_GUIDE.md) for the full local installation guide including workspaces, path aliases, and pnpm/yarn link methods.
+
+---
+
+## 🚀 Quick Start
+
+```jsx
+import { useState } from 'react';
+import LoaderOverlay from 'loader-overlay';
+
+export default function App() {
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = async () => {
+    setLoading(true);
+    await fetch('/api/data');
+    setLoading(false);
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <LoaderOverlay show={loading} />
+      <button onClick={fetchData}>Load Data</button>
+    </div>
+  );
+}
+```
+
+---
+
+## 📥 Imports
+
+```js
+// Default import
+import LoaderOverlay from 'loader-overlay';
+```
+
+```js
+// Named imports — tree-shakeable (icons & constants)
+import { SpinIcon, DotsIcon, PulseIcon, RingIcon, BarIcon } from 'loader-overlay';
+import { SIZES, VARIANTS, ANIM_CSS, ICONS } from 'loader-overlay';
+```
+
+```ts
+// TypeScript — no @types package needed, types are bundled
+import type { LoaderOverlayProps, LoaderType, LoaderVariant, LoaderSize } from 'loader-overlay';
+```
+
+---
+
+## 📖 Usage Examples
+
+### With Progress Bar
+
+```jsx
+<LoaderOverlay
+  show={uploading}
+  type="bar"
+  variant="gradient"
+  color="#60d394"
+  message="Uploading file..."
+  showProgress
+  progress={uploadPercent}
+/>
+```
+
+### Outside Click Dismiss
+
+```jsx
+<LoaderOverlay
+  show={loading}
+  fullScreen
+  closeOnOutsideClick
+  closable
+  onClose={() => setLoading(false)}
+  message="Processing..."
+/>
+```
+
+### Auto-dismiss with Timeout
+
+```jsx
+<LoaderOverlay
+  show={loading}
+  timeout={3000}
+  onClose={() => setLoading(false)}
+  message="Done in 3 seconds..."
+  type="dots"
+/>
+```
+
+### Custom Children
+
+```jsx
+<LoaderOverlay show={loading} variant="dark">
+  <div style={{ textAlign: 'center' }}>
+    <img src="/logo-animated.svg" width={64} alt="loading" />
+    <p style={{ color: 'white' }}>Brewing your dashboard ☕</p>
+  </div>
+</LoaderOverlay>
+```
+
+### TypeScript
+
+```tsx
+import LoaderOverlay, { LoaderOverlayProps } from 'loader-overlay';
+
+const props: LoaderOverlayProps = {
+  show: true,
+  type: 'spinner',
+  variant: 'dark',
+  color: '#a78bfa',
+};
+```
+
+---
+
+## 🎛️ Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `show` | `boolean` | `true` | Controls loader overlay visibility |
+| `type` | `'spinner' \| 'dots' \| 'pulse' \| 'ring' \| 'bar'` | `'spinner'` | Selection of loader animation type |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Configures the size footprint of the loader |
+| `variant` | `'dark' \| 'light' \| 'blur' \| 'transparent' \| 'gradient'` | `'dark'` | Defines the overlay background aesthetic |
+| `color` | `string` | `'#a78bfa'` | Master accent color (hex, rgb, or css var) |
+| `message` | `string` | `'Loading...'` | Primary status label |
+| `submessage` | `string` | `''` | Secondary hint or details text |
+| `fullScreen` | `boolean` | `false` | Fixes overlay relative to viewport vs parent |
+| `zIndex` | `number` | `999` | Determines the CSS z-index |
+| `opacity` | `number` | `1` | Configures the global backdrop opacity |
+| `blur` | `number` | `8` | Frosts the backdrop via CSS blur (px) |
+| `position` | `'center' \| 'top' \| 'bottom'` | `'center'` | Vertical alignment of the main content box |
+| `showProgress` | `boolean` | `false` | Activates an animated precise progress bar |
+| `progress` | `number` | `0` | Progress value injected into the bar (0–100) |
+| `closable` | `boolean` | `false` | Displays a dismiss ✕ button in the corner |
+| `onClose` | `() => void` | `() => {}` | Event fired exactly when the overlay unmounts |
+| `closeOnOutsideClick` | `boolean` | `false` | Allows backdrop clicks to dismiss the loader |
+| `onOutsideClick` | `() => void` | `() => {}` | Granular event fired on backdrop interaction |
+| `animateIn` | `boolean` | `true` | Allows smooth CSS fade-in animations on mount |
+| `timeout` | `number` | `0` | Automatic unmount dismissal after specified ms |
+| `children` | `ReactNode` | `null` | Drops in totally generic DOM replacing core icons |
+
+---
+
+## 🔧 Reusable Hook
+
+```tsx
+import { useState, useCallback } from 'react';
+import LoaderOverlay from 'loader-overlay';
+
+function useLoader() {
+  const [state, setState] = useState({
+    show: false,
+    message: 'Loading...',
+    progress: 0,
+  });
+
+  const start = useCallback((message = 'Loading...') => {
+    setState({ show: true, message, progress: 0 });
+  }, []);
+
+  const setProgress = useCallback((progress: number) => {
+    setState(s => ({ ...s, progress }));
+  }, []);
+
+  const stop = useCallback(() => {
+    setState(s => ({ ...s, show: false }));
+  }, []);
+
+  return { loaderProps: state, start, setProgress, stop };
+}
+
+// Usage
+function MyPage() {
+  const { loaderProps, start, stop } = useLoader();
+
+  return (
+    <>
+      <LoaderOverlay {...loaderProps} showProgress fullScreen />
+      <button onClick={() => { start('Saving...'); setTimeout(stop, 2000); }}>
+        Save
+      </button>
+    </>
+  );
+}
+```
+
+---
+
+## 🌐 Route Transitions (React Router v6)
+
+```tsx
+import { useNavigation, Outlet } from 'react-router-dom';
+import LoaderOverlay from 'loader-overlay';
+
+export default function RootLayout() {
+  const navigation = useNavigation();
+
+  return (
+    <>
+      <LoaderOverlay
+        show={navigation.state !== 'idle'}
+        fullScreen
+        type="dots"
+        variant="dark"
+        message="Navigating..."
+        zIndex={9999}
+      />
+      <Outlet />
+    </>
+  );
+}
+```
+
+---
+
+## 📁 Package Structure
+
+```text
+loader-overlay/
+├── dist/
+│   ├── loader-overlay.d.ts          ← TypeScript declarations
+│   ├── loader-overlay.es.js         ← ES module (tree-shakeable)
+│   ├── loader-overlay.es.js.map     ← Source map
+│   ├── loader-overlay.umd.js        ← UMD for CommonJS / CDN use
+│   └── loader-overlay.umd.js.map    ← Source map
+├── src/
+│   ├── index.jsx                    ← Main component entry
+│   └── index.d.ts                   ← TypeScript source declarations
+├── README.md
+└── package.json
+```
+
+---
+
+## 📝 Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for full version history.
+
+---
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create your feature branch: `git checkout -b feat/my-feature`
+3. Commit your changes: `git commit -m 'feat: add my feature'`
+4. Push to the branch: `git push origin feat/my-feature`
+5. Open a Pull Request
+
+---
+
+<!--
+## 📄 License
+
+MIT © [Swapnil Patil](https://github.com/swapnilhpatil)
+
+---
+-->
+
+## 👤 Author
+
+**Swapnil Patil**
+
+[![GitHub](https://img.shields.io/badge/GitHub-swapnilhpatil-181717?logo=github&style=flat-square)](https://github.com/swapnilhpatil)
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-Swapnil%20Patil-0A66C2?logo=linkedin&style=flat-square)](https://www.linkedin.com/in/swapnilhpatil/)

package/dist/loader-overlay.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode, CSSProperties } from "react";
+
+// ─── Union Types ─────────────────────────────────────────────────────────────
+
+export type LoaderSize = "sm" | "md" | "lg" | "xl";
+export type LoaderVariant =
+  | "light"
+  | "dark"
+  | "blur"
+  | "transparent"
+  | "gradient";
+export type LoaderType = "spinner" | "dots" | "pulse" | "ring" | "bar";
+export type LoaderPosition = "center" | "top" | "bottom";
+
+// ─── Props Interface ──────────────────────────────────────────────────────────
+
+export interface LoaderOverlayProps {
+  /** Controls overlay visibility. Default: `true` */
+  show?: boolean;
+  /** Loading animation type. Default: `"spinner"` */
+  type?: LoaderType;
+  /** Size scale of the loader. Default: `"md"` */
+  size?: LoaderSize;
+  /** Overlay background & text theme. Default: `"dark"` */
+  variant?: LoaderVariant;
+  /** Accent color (any valid CSS color string). Default: `"#a78bfa"` */
+  color?: string;
+  /** Primary message shown below the loader. Default: `"Loading..."` */
+  message?: ReactNode;
+  /** Secondary hint string. Default: `""` */
+  submessage?: ReactNode;
+  /** `true` for `position: fixed` to cover the full viewport. Default: `false` */
+  fullScreen?: boolean;
+  /** CSS z-index value. Default: `999` */
+  zIndex?: number;
+  /** Overlay backdrop opacity (0–1). Default: `1` */
+  opacity?: number;
+  /** Backdrop blur strength in px. Default: `8` */
+  blur?: number;
+  /** Show an animated progress bar. Default: `false` */
+  showProgress?: boolean;
+  /** Progress bar value (0–100). Default: `0` */
+  progress?: number;
+  /** Show a ✕ close button. Default: `false` */
+  closable?: boolean;
+  /** Callback fired when the overlay is dismissed. */
+  onClose?: () => void;
+  /** Vertical alignment of the loader box. Default: `"center"` */
+  position?: LoaderPosition;
+  /** Apply fade-in animation on mount. Default: `true` */
+  animateIn?: boolean;
+  /** Auto-dismiss after N milliseconds. `0` to disable. Default: `0` */
+  timeout?: number;
+  /** Replace the loader icon with custom React content. */
+  children?: ReactNode;
+  /** Dismiss the overlay on backdrop click. Default: `false` */
+  closeOnOutsideClick?: boolean;
+  /** Callback fired when user clicks outside the loader box. */
+  onOutsideClick?: () => void;
+}
+
+// ─── Icon Component Type ─────────────────────────────────────────────────────
+
+export interface IconProps {
+  /** Icon size in px */
+  s: number;
+  /** Accent color */
+  color: string;
+}
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+
+export declare const SIZES: Record<
+  LoaderSize,
+  { s: number; f: string; g: string }
+>;
+export declare const VARIANTS: Record<
+  LoaderVariant,
+  { bg: string; tx: string }
+>;
+export declare const ANIM_CSS: string;
+
+// ─── Icon Components ─────────────────────────────────────────────────────────
+
+export declare const SpinIcon: (props: IconProps) => JSX.Element;
+export declare const DotsIcon: (props: IconProps) => JSX.Element;
+export declare const PulseIcon: (props: IconProps) => JSX.Element;
+export declare const RingIcon: (props: IconProps) => JSX.Element;
+export declare const BarIcon: (props: IconProps) => JSX.Element;
+export declare const ICONS: Record<LoaderType, (props: IconProps) => JSX.Element>;
+
+// ─── Default Export ───────────────────────────────────────────────────────────
+
+declare function LoaderOverlay(props: LoaderOverlayProps): JSX.Element | null;
+export default LoaderOverlay;
+export { LoaderOverlay };

package/dist/loader-overlay.es.js

@@ -0,0 +1,335 @@
+import { jsx as t, jsxs as l, Fragment as N } from "react/jsx-runtime";
+import { useState as W, useRef as k, useEffect as d } from "react";
+const w = {
+  sm: { s: 28, f: "11px", g: "8px" },
+  md: { s: 44, f: "13px", g: "12px" },
+  lg: { s: 64, f: "15px", g: "16px" },
+  xl: { s: 88, f: "18px", g: "22px" }
+}, F = {
+  light: { bg: "rgba(255,255,255,0.9)", tx: "#1a1a2e" },
+  dark: { bg: "rgba(10,10,20,0.92)", tx: "#f0f0f0" },
+  blur: { bg: "rgba(20,15,50,0.5)", tx: "#fff" },
+  transparent: { bg: "rgba(0,0,0,0)", tx: "#f0f0f0" },
+  gradient: {
+    bg: "linear-gradient(135deg,rgba(15,15,40,.95),rgba(50,10,80,.95))",
+    tx: "#e8d5ff"
+  }
+}, V = `
+  @keyframes lSpin{to{transform:rotate(360deg)}}
+  @keyframes lBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
+  @keyframes lPR{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}
+  @keyframes lPC{0%,100%{transform:scale(.9)}50%{transform:scale(1.1)}}
+  @keyframes lBar{0%,100%{height:30%;opacity:.4}50%{height:100%;opacity:1}}
+  @keyframes lFI{from{opacity:0}to{opacity:1}}
+  @keyframes lShim{0%{background-position:0 50%}100%{background-position:200% 50%}}
+`, Z = ({ s: e, color: n }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 50 50",
+    style: { animation: "lSpin .9s linear infinite" },
+    children: /* @__PURE__ */ t(
+      "circle",
+      {
+        cx: "25",
+        cy: "25",
+        r: "20",
+        fill: "none",
+        stroke: n,
+        strokeWidth: "4",
+        strokeLinecap: "round",
+        strokeDasharray: "90 60"
+      }
+    )
+  }
+), _ = ({ s: e, color: n }) => /* @__PURE__ */ t("div", { style: { display: "flex", gap: e * 0.18, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ t(
+  "div",
+  {
+    style: {
+      width: e * 0.22,
+      height: e * 0.22,
+      borderRadius: "50%",
+      background: n,
+      animation: `lBounce 1.2s ease-in-out ${i * 0.2}s infinite`
+    }
+  },
+  i
+)) }), q = ({ s: e, color: n }) => /* @__PURE__ */ l("div", { style: { position: "relative", width: e, height: e }, children: [
+  /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        borderRadius: "50%",
+        background: n,
+        opacity: 0.2,
+        animation: "lPR 1.4s ease-out infinite"
+      }
+    }
+  ),
+  /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: "20%",
+        borderRadius: "50%",
+        background: n,
+        animation: "lPC 1.4s ease-in-out infinite"
+      }
+    }
+  )
+] }), C = ({ s: e, color: n }) => /* @__PURE__ */ t(
+  "div",
+  {
+    style: {
+      width: e,
+      height: e,
+      borderRadius: "50%",
+      border: `${e * 0.08}px solid ${n}22`,
+      borderTop: `${e * 0.08}px solid ${n}`,
+      animation: "lSpin .75s linear infinite"
+    }
+  }
+), G = ({ s: e, color: n }) => /* @__PURE__ */ t(
+  "div",
+  {
+    style: {
+      display: "flex",
+      gap: e * 0.1,
+      alignItems: "flex-end",
+      height: e * 0.7
+    },
+    children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          width: e * 0.15,
+          background: n,
+          borderRadius: 3,
+          animation: `lBar 1s ease-in-out ${i * 0.15}s infinite`
+        }
+      },
+      i
+    ))
+  }
+), B = {
+  spinner: Z,
+  dots: _,
+  pulse: q,
+  ring: C,
+  bar: G
+};
+function Q({
+  show: e = !0,
+  type: n = "spinner",
+  size: i = "md",
+  variant: o = "dark",
+  color: r = "#a78bfa",
+  message: S = "Loading...",
+  submessage: v = "",
+  fullScreen: z = !1,
+  zIndex: L = 999,
+  opacity: M = 1,
+  blur: c = 8,
+  showProgress: P = !1,
+  progress: R = 0,
+  closable: T = !1,
+  onClose: u = () => {
+  },
+  position: I = "center",
+  animateIn: A = !0,
+  timeout: m = 0,
+  children: E = null,
+  closeOnOutsideClick: y = !1,
+  onOutsideClick: h = () => {
+  }
+}) {
+  const [s, p] = W(e), x = k(null), f = k(u), $ = k(h);
+  if (d(() => {
+    f.current = u;
+  }, [u]), d(() => {
+    $.current = h;
+  }, [h]), d(() => {
+    p(e);
+  }, [e]), d(() => {
+    if (!s || !y) return;
+    const g = (D) => {
+      x.current && !x.current.contains(D.target) && ($.current(), p(!1), f.current());
+    };
+    return document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
+  }, [s, y]), d(() => {
+    if (m > 0 && s) {
+      const g = setTimeout(() => {
+        p(!1), f.current();
+      }, m);
+      return () => clearTimeout(g);
+    }
+  }, [m, s]), !s) return null;
+  const b = w[i] || w.md, a = F[o] || F.dark, j = B[n] || B.spinner;
+  return /* @__PURE__ */ l(N, { children: [
+    /* @__PURE__ */ t("style", { children: V }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          position: z ? "fixed" : "absolute",
+          inset: 0,
+          zIndex: L,
+          display: "flex",
+          alignItems: { center: "center", top: "flex-start", bottom: "flex-end" }[I] || "center",
+          justifyContent: "center",
+          padding: I !== "center" ? 40 : 0,
+          background: a.bg,
+          backdropFilter: c > 0 ? `blur(${c}px)` : "none",
+          WebkitBackdropFilter: c > 0 ? `blur(${c}px)` : "none",
+          opacity: M,
+          animation: A ? "lFI .25s ease" : "none"
+        },
+        children: /* @__PURE__ */ l(
+          "div",
+          {
+            ref: x,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: b.g,
+              padding: "28px 36px",
+              borderRadius: 16,
+              position: "relative",
+              background: o === "transparent" ? "transparent" : o === "gradient" ? "rgba(255,255,255,.04)" : "rgba(255,255,255,.07)",
+              border: o === "transparent" ? "none" : `1px solid ${r}25`,
+              boxShadow: o === "transparent" ? "none" : `0 8px 40px ${r}15`
+            },
+            children: [
+              T && /* @__PURE__ */ t(
+                "button",
+                {
+                  onClick: () => {
+                    p(!1), f.current();
+                  },
+                  style: {
+                    position: "absolute",
+                    top: 8,
+                    right: 10,
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    color: a.tx,
+                    fontSize: 16,
+                    opacity: 0.45,
+                    padding: "2px 6px",
+                    borderRadius: 6
+                  },
+                  children: "✕"
+                }
+              ),
+              E || /* @__PURE__ */ t(j, { s: b.s, color: r }),
+              S && /* @__PURE__ */ t(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    color: a.tx,
+                    fontSize: b.f,
+                    fontWeight: 600,
+                    letterSpacing: ".04em",
+                    fontFamily: "system-ui,sans-serif"
+                  },
+                  children: S
+                }
+              ),
+              v && /* @__PURE__ */ t(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    color: a.tx,
+                    fontSize: "11px",
+                    opacity: 0.5,
+                    fontFamily: "system-ui,sans-serif"
+                  },
+                  children: v
+                }
+              ),
+              P && /* @__PURE__ */ l("div", { style: { width: 140, marginTop: 2 }, children: [
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: {
+                      width: "100%",
+                      height: 4,
+                      background: `${r}22`,
+                      borderRadius: 99,
+                      overflow: "hidden"
+                    },
+                    children: /* @__PURE__ */ t(
+                      "div",
+                      {
+                        style: {
+                          height: "100%",
+                          width: `${Math.min(100, Math.max(0, R))}%`,
+                          background: `linear-gradient(90deg,${r},${r}88,${r})`,
+                          backgroundSize: "200% 100%",
+                          borderRadius: 99,
+                          transition: "width .3s ease",
+                          animation: "lShim 1.5s linear infinite"
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ l(
+                  "p",
+                  {
+                    style: {
+                      margin: "3px 0 0",
+                      textAlign: "right",
+                      color: a.tx,
+                      opacity: 0.4,
+                      fontSize: 10,
+                      fontFamily: "monospace"
+                    },
+                    children: [
+                      R,
+                      "%"
+                    ]
+                  }
+                )
+              ] }),
+              y && /* @__PURE__ */ t(
+                "p",
+                {
+                  style: {
+                    margin: "2px 0 0",
+                    color: a.tx,
+                    opacity: 0.3,
+                    fontSize: 9,
+                    fontFamily: "monospace"
+                  },
+                  children: "click outside to dismiss"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  V as ANIM_CSS,
+  G as BarIcon,
+  _ as DotsIcon,
+  B as ICONS,
+  q as PulseIcon,
+  C as RingIcon,
+  w as SIZES,
+  Z as SpinIcon,
+  F as VARIANTS,
+  Q as default
+};
+//# sourceMappingURL=loader-overlay.es.js.map

package/dist/loader-overlay.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-overlay.es.js","sources":["../src/constants/index.js","../src/components/icons/SpinIcon.jsx","../src/components/icons/DotsIcon.jsx","../src/components/icons/PulseIcon.jsx","../src/components/icons/RingIcon.jsx","../src/components/icons/BarIcon.jsx","../src/components/Icons.jsx","../src/index.jsx"],"sourcesContent":["export const SIZES = {\n  sm: { s: 28, f: \"11px\", g: \"8px\" },\n  md: { s: 44, f: \"13px\", g: \"12px\" },\n  lg: { s: 64, f: \"15px\", g: \"16px\" },\n  xl: { s: 88, f: \"18px\", g: \"22px\" },\n};\n\nexport const VARIANTS = {\n  light: { bg: \"rgba(255,255,255,0.9)\", tx: \"#1a1a2e\" },\n  dark: { bg: \"rgba(10,10,20,0.92)\", tx: \"#f0f0f0\" },\n  blur: { bg: \"rgba(20,15,50,0.5)\", tx: \"#fff\" },\n  transparent: { bg: \"rgba(0,0,0,0)\", tx: \"#f0f0f0\" },\n  gradient: {\n    bg: \"linear-gradient(135deg,rgba(15,15,40,.95),rgba(50,10,80,.95))\",\n    tx: \"#e8d5ff\",\n  },\n};\n\nexport const ANIM_CSS = `\n  @keyframes lSpin{to{transform:rotate(360deg)}}\n  @keyframes lBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n  @keyframes lPR{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}\n  @keyframes lPC{0%,100%{transform:scale(.9)}50%{transform:scale(1.1)}}\n  @keyframes lBar{0%,100%{height:30%;opacity:.4}50%{height:100%;opacity:1}}\n  @keyframes lFI{from{opacity:0}to{opacity:1}}\n  @keyframes lShim{0%{background-position:0 50%}100%{background-position:200% 50%}}\n`;\n","import React from \"react\";\n\nconst SpinIcon = ({ s, color }) => {\n  return (\n    <svg\n      width={s}\n      height={s}\n      viewBox=\"0 0 50 50\"\n      style={{ animation: \"lSpin .9s linear infinite\" }}\n    >\n      <circle\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"90 60\"\n      />\n    </svg>\n  );\n};\n\nexport default SpinIcon;\n","import React from \"react\";\n\nconst DotsIcon = ({ s, color }) => {\n  return (\n    <div style={{ display: \"flex\", gap: s * 0.18, alignItems: \"center\" }}>\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          style={{\n            width: s * 0.22,\n            height: s * 0.22,\n            borderRadius: \"50%\",\n            background: color,\n            animation: `lBounce 1.2s ease-in-out ${i * 0.2}s infinite`,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default DotsIcon;\n","import React from \"react\";\n\nconst PulseIcon = ({ s, color }) => {\n  return (\n    <div style={{ position: \"relative\", width: s, height: s }}>\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: \"50%\",\n          background: color,\n          opacity: 0.2,\n          animation: \"lPR 1.4s ease-out infinite\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          inset: \"20%\",\n          borderRadius: \"50%\",\n          background: color,\n          animation: \"lPC 1.4s ease-in-out infinite\",\n        }}\n      />\n    </div>\n  );\n};\n\nexport default PulseIcon;\n","import React from \"react\";\n\nconst RingIcon = ({ s, color }) => {\n  return (\n    <div\n      style={{\n        width: s,\n        height: s,\n        borderRadius: \"50%\",\n        border: `${s * 0.08}px solid ${color}22`,\n        borderTop: `${s * 0.08}px solid ${color}`,\n        animation: \"lSpin .75s linear infinite\",\n      }}\n    />\n  );\n};\n\nexport default RingIcon;\n","import React from \"react\";\n\nconst BarIcon = ({ s, color }) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: s * 0.1,\n        alignItems: \"flex-end\",\n        height: s * 0.7,\n      }}\n    >\n      {[0, 1, 2, 3].map((i) => (\n        <div\n          key={i}\n          style={{\n            width: s * 0.15,\n            background: color,\n            borderRadius: 3,\n            animation: `lBar 1s ease-in-out ${i * 0.15}s infinite`,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default BarIcon;\n","import SpinIcon from \"./icons/SpinIcon.jsx\";\nimport DotsIcon from \"./icons/DotsIcon.jsx\";\nimport PulseIcon from \"./icons/PulseIcon.jsx\";\nimport RingIcon from \"./icons/RingIcon.jsx\";\nimport BarIcon from \"./icons/BarIcon.jsx\";\n\nexport const ICONS = {\n  spinner: SpinIcon,\n  dots: DotsIcon,\n  pulse: PulseIcon,\n  ring: RingIcon,\n  bar: BarIcon,\n};\n\nexport { SpinIcon, DotsIcon, PulseIcon, RingIcon, BarIcon };\nexport default ICONS;\n","import React, { useState, useRef, useEffect } from \"react\";\nimport { SIZES, VARIANTS, ANIM_CSS } from \"./constants/index.js\";\nimport { ICONS, SpinIcon, DotsIcon, PulseIcon, RingIcon, BarIcon } from \"./components/Icons.jsx\";\n\n// ─── Named exports for tree-shaking ─────────────────────────────────────────\nexport { SIZES, VARIANTS, ANIM_CSS };\nexport { ICONS, SpinIcon, DotsIcon, PulseIcon, RingIcon, BarIcon };\n\n/**\n * A highly customizable, accessible loading overlay.\n * @param {import('./types/index.js').LoaderOverlayProps} props\n */\nexport default function LoaderOverlay({\n  show = true,\n  type = \"spinner\",\n  size = \"md\",\n  variant = \"dark\",\n  color = \"#a78bfa\",\n  message = \"Loading...\",\n  submessage = \"\",\n  fullScreen = false,\n  zIndex = 999,\n  opacity = 1,\n  blur = 8,\n  showProgress = false,\n  progress = 0,\n  closable = false,\n  onClose = () => {},\n  position = \"center\",\n  animateIn = true,\n  timeout = 0,\n  children = null,\n  closeOnOutsideClick = false,\n  onOutsideClick = () => {},\n}) {\n  const [vis, setVis] = useState(show);\n  const boxRef = useRef(null);\n  const closeRef = useRef(onClose);\n  const outsideRef = useRef(onOutsideClick);\n\n  useEffect(() => {\n    closeRef.current = onClose;\n  }, [onClose]);\n  useEffect(() => {\n    outsideRef.current = onOutsideClick;\n  }, [onOutsideClick]);\n  useEffect(() => {\n    setVis(show);\n  }, [show]);\n\n  useEffect(() => {\n    if (!vis || !closeOnOutsideClick) return;\n    const h = (e) => {\n      if (boxRef.current && !boxRef.current.contains(e.target)) {\n        outsideRef.current();\n        setVis(false);\n        closeRef.current();\n      }\n    };\n    document.addEventListener(\"mousedown\", h);\n    return () => document.removeEventListener(\"mousedown\", h);\n  }, [vis, closeOnOutsideClick]);\n\n  useEffect(() => {\n    if (timeout > 0 && vis) {\n      const t = setTimeout(() => {\n        setVis(false);\n        closeRef.current();\n      }, timeout);\n      return () => clearTimeout(t);\n    }\n  }, [timeout, vis]);\n\n  if (!vis) return null;\n\n  const sc = SIZES[size] || SIZES.md;\n  const vc = VARIANTS[variant] || VARIANTS.dark;\n  const Icon = ICONS[type] || ICONS.spinner;\n  const alignMap = { center: \"center\", top: \"flex-start\", bottom: \"flex-end\" };\n\n  return (\n    <>\n      <style>{ANIM_CSS}</style>\n      <div\n        style={{\n          position: fullScreen ? \"fixed\" : \"absolute\",\n          inset: 0,\n          zIndex,\n          display: \"flex\",\n          alignItems: alignMap[position] || \"center\",\n          justifyContent: \"center\",\n          padding: position !== \"center\" ? 40 : 0,\n          background: vc.bg,\n          backdropFilter: blur > 0 ? `blur(${blur}px)` : \"none\",\n          WebkitBackdropFilter: blur > 0 ? `blur(${blur}px)` : \"none\",\n          opacity,\n          animation: animateIn ? \"lFI .25s ease\" : \"none\",\n        }}\n      >\n        <div\n          ref={boxRef}\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            gap: sc.g,\n            padding: \"28px 36px\",\n            borderRadius: 16,\n            position: \"relative\",\n            background:\n              variant === \"transparent\"\n                ? \"transparent\"\n                : variant === \"gradient\"\n                  ? \"rgba(255,255,255,.04)\"\n                  : \"rgba(255,255,255,.07)\",\n            border: variant === \"transparent\" ? \"none\" : `1px solid ${color}25`,\n            boxShadow:\n              variant === \"transparent\" ? \"none\" : `0 8px 40px ${color}15`,\n          }}\n        >\n          {closable && (\n            <button\n              onClick={() => {\n                setVis(false);\n                closeRef.current();\n              }}\n              style={{\n                position: \"absolute\",\n                top: 8,\n                right: 10,\n                background: \"none\",\n                border: \"none\",\n                cursor: \"pointer\",\n                color: vc.tx,\n                fontSize: 16,\n                opacity: 0.45,\n                padding: \"2px 6px\",\n                borderRadius: 6,\n              }}\n            >\n              ✕\n            </button>\n          )}\n          {children || <Icon s={sc.s} color={color} />}\n          {message && (\n            <p\n              style={{\n                margin: 0,\n                color: vc.tx,\n                fontSize: sc.f,\n                fontWeight: 600,\n                letterSpacing: \".04em\",\n                fontFamily: \"system-ui,sans-serif\",\n              }}\n            >\n              {message}\n            </p>\n          )}\n          {submessage && (\n            <p\n              style={{\n                margin: 0,\n                color: vc.tx,\n                fontSize: \"11px\",\n                opacity: 0.5,\n                fontFamily: \"system-ui,sans-serif\",\n              }}\n            >\n              {submessage}\n            </p>\n          )}\n          {showProgress && (\n            <div style={{ width: 140, marginTop: 2 }}>\n              <div\n                style={{\n                  width: \"100%\",\n                  height: 4,\n                  background: `${color}22`,\n                  borderRadius: 99,\n                  overflow: \"hidden\",\n                }}\n              >\n                <div\n                  style={{\n                    height: \"100%\",\n                    width: `${Math.min(100, Math.max(0, progress))}%`,\n                    background: `linear-gradient(90deg,${color},${color}88,${color})`,\n                    backgroundSize: \"200% 100%\",\n                    borderRadius: 99,\n                    transition: \"width .3s ease\",\n                    animation: \"lShim 1.5s linear infinite\",\n                  }}\n                />\n              </div>\n              <p\n                style={{\n                  margin: \"3px 0 0\",\n                  textAlign: \"right\",\n                  color: vc.tx,\n                  opacity: 0.4,\n                  fontSize: 10,\n                  fontFamily: \"monospace\",\n                }}\n              >\n                {progress}%\n              </p>\n            </div>\n          )}\n          {closeOnOutsideClick && (\n            <p\n              style={{\n                margin: \"2px 0 0\",\n                color: vc.tx,\n                opacity: 0.3,\n                fontSize: 9,\n                fontFamily: \"monospace\",\n              }}\n            >\n              click outside to dismiss\n            </p>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":["SIZES","VARIANTS","ANIM_CSS","SpinIcon","s","color","jsx","DotsIcon","PulseIcon","jsxs","RingIcon","BarIcon","ICONS","LoaderOverlay","show","type","size","variant","message","submessage","fullScreen","zIndex","opacity","blur","showProgress","progress","closable","onClose","position","animateIn","timeout","children","closeOnOutsideClick","onOutsideClick","vis","setVis","useState","boxRef","useRef","closeRef","outsideRef","useEffect","h","e","t","sc","vc","Icon","Fragment"],"mappings":"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"}

package/dist/loader-overlay.umd.js

@@ -0,0 +1,10 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.LoaderOverlay={},t.ReactJSXRuntime,t.React))})(this,function(t,e,r){"use strict";const u={sm:{s:28,f:"11px",g:"8px"},md:{s:44,f:"13px",g:"12px"},lg:{s:64,f:"15px",g:"16px"},xl:{s:88,f:"18px",g:"22px"}},y={light:{bg:"rgba(255,255,255,0.9)",tx:"#1a1a2e"},dark:{bg:"rgba(10,10,20,0.92)",tx:"#f0f0f0"},blur:{bg:"rgba(20,15,50,0.5)",tx:"#fff"},transparent:{bg:"rgba(0,0,0,0)",tx:"#f0f0f0"},gradient:{bg:"linear-gradient(135deg,rgba(15,15,40,.95),rgba(50,10,80,.95))",tx:"#e8d5ff"}},v=`
+  @keyframes lSpin{to{transform:rotate(360deg)}}
+  @keyframes lBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
+  @keyframes lPR{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}
+  @keyframes lPC{0%,100%{transform:scale(.9)}50%{transform:scale(1.1)}}
+  @keyframes lBar{0%,100%{height:30%;opacity:.4}50%{height:100%;opacity:1}}
+  @keyframes lFI{from{opacity:0}to{opacity:1}}
+  @keyframes lShim{0%{background-position:0 50%}100%{background-position:200% 50%}}
+`,$=({s:n,color:i})=>e.jsx("svg",{width:n,height:n,viewBox:"0 0 50 50",style:{animation:"lSpin .9s linear infinite"},children:e.jsx("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:i,strokeWidth:"4",strokeLinecap:"round",strokeDasharray:"90 60"})}),w=({s:n,color:i})=>e.jsx("div",{style:{display:"flex",gap:n*.18,alignItems:"center"},children:[0,1,2].map(a=>e.jsx("div",{style:{width:n*.22,height:n*.22,borderRadius:"50%",background:i,animation:`lBounce 1.2s ease-in-out ${a*.2}s infinite`}},a))}),E=({s:n,color:i})=>e.jsxs("div",{style:{position:"relative",width:n,height:n},children:[e.jsx("div",{style:{position:"absolute",inset:0,borderRadius:"50%",background:i,opacity:.2,animation:"lPR 1.4s ease-out infinite"}}),e.jsx("div",{style:{position:"absolute",inset:"20%",borderRadius:"50%",background:i,animation:"lPC 1.4s ease-in-out infinite"}})]}),F=({s:n,color:i})=>e.jsx("div",{style:{width:n,height:n,borderRadius:"50%",border:`${n*.08}px solid ${i}22`,borderTop:`${n*.08}px solid ${i}`,animation:"lSpin .75s linear infinite"}}),T=({s:n,color:i})=>e.jsx("div",{style:{display:"flex",gap:n*.1,alignItems:"flex-end",height:n*.7},children:[0,1,2,3].map(a=>e.jsx("div",{style:{width:n*.15,background:i,borderRadius:3,animation:`lBar 1s ease-in-out ${a*.15}s infinite`}},a))}),h={spinner:$,dots:w,pulse:E,ring:F,bar:T};function L({show:n=!0,type:i="spinner",size:a="md",variant:d="dark",color:o="#a78bfa",message:B="Loading...",submessage:A="",fullScreen:N=!1,zIndex:j=999,opacity:D=1,blur:c=8,showProgress:_=!1,progress:M=0,closable:V=!1,onClose:b=()=>{},position:P="center",animateIn:W=!0,timeout:x=0,children:q=null,closeOnOutsideClick:m=!1,onOutsideClick:S=()=>{}}){const[l,f]=r.useState(n),k=r.useRef(null),p=r.useRef(b),z=r.useRef(S);if(r.useEffect(()=>{p.current=b},[b]),r.useEffect(()=>{z.current=S},[S]),r.useEffect(()=>{f(n)},[n]),r.useEffect(()=>{if(!l||!m)return;const g=J=>{k.current&&!k.current.contains(J.target)&&(z.current(),f(!1),p.current())};return document.addEventListener("mousedown",g),()=>document.removeEventListener("mousedown",g)},[l,m]),r.useEffect(()=>{if(x>0&&l){const g=setTimeout(()=>{f(!1),p.current()},x);return()=>clearTimeout(g)}},[x,l]),!l)return null;const I=u[a]||u.md,s=y[d]||y.dark,C=h[i]||h.spinner,Z={center:"center",top:"flex-start",bottom:"flex-end"};return e.jsxs(e.Fragment,{children:[e.jsx("style",{children:v}),e.jsx("div",{style:{position:N?"fixed":"absolute",inset:0,zIndex:j,display:"flex",alignItems:Z[P]||"center",justifyContent:"center",padding:P!=="center"?40:0,background:s.bg,backdropFilter:c>0?`blur(${c}px)`:"none",WebkitBackdropFilter:c>0?`blur(${c}px)`:"none",opacity:D,animation:W?"lFI .25s ease":"none"},children:e.jsxs("div",{ref:k,style:{display:"flex",flexDirection:"column",alignItems:"center",gap:I.g,padding:"28px 36px",borderRadius:16,position:"relative",background:d==="transparent"?"transparent":d==="gradient"?"rgba(255,255,255,.04)":"rgba(255,255,255,.07)",border:d==="transparent"?"none":`1px solid ${o}25`,boxShadow:d==="transparent"?"none":`0 8px 40px ${o}15`},children:[V&&e.jsx("button",{onClick:()=>{f(!1),p.current()},style:{position:"absolute",top:8,right:10,background:"none",border:"none",cursor:"pointer",color:s.tx,fontSize:16,opacity:.45,padding:"2px 6px",borderRadius:6},children:"✕"}),q||e.jsx(C,{s:I.s,color:o}),B&&e.jsx("p",{style:{margin:0,color:s.tx,fontSize:I.f,fontWeight:600,letterSpacing:".04em",fontFamily:"system-ui,sans-serif"},children:B}),A&&e.jsx("p",{style:{margin:0,color:s.tx,fontSize:"11px",opacity:.5,fontFamily:"system-ui,sans-serif"},children:A}),_&&e.jsxs("div",{style:{width:140,marginTop:2},children:[e.jsx("div",{style:{width:"100%",height:4,background:`${o}22`,borderRadius:99,overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",width:`${Math.min(100,Math.max(0,M))}%`,background:`linear-gradient(90deg,${o},${o}88,${o})`,backgroundSize:"200% 100%",borderRadius:99,transition:"width .3s ease",animation:"lShim 1.5s linear infinite"}})}),e.jsxs("p",{style:{margin:"3px 0 0",textAlign:"right",color:s.tx,opacity:.4,fontSize:10,fontFamily:"monospace"},children:[M,"%"]})]}),m&&e.jsx("p",{style:{margin:"2px 0 0",color:s.tx,opacity:.3,fontSize:9,fontFamily:"monospace"},children:"click outside to dismiss"})]})})]})}t.ANIM_CSS=v,t.BarIcon=T,t.DotsIcon=w,t.ICONS=h,t.PulseIcon=E,t.RingIcon=F,t.SIZES=u,t.SpinIcon=$,t.VARIANTS=y,t.default=L,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=loader-overlay.umd.js.map

package/dist/loader-overlay.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-overlay.umd.js","sources":["../src/constants/index.js","../src/components/icons/SpinIcon.jsx","../src/components/icons/DotsIcon.jsx","../src/components/icons/PulseIcon.jsx","../src/components/icons/RingIcon.jsx","../src/components/icons/BarIcon.jsx","../src/components/Icons.jsx","../src/index.jsx"],"sourcesContent":["export const SIZES = {\n  sm: { s: 28, f: \"11px\", g: \"8px\" },\n  md: { s: 44, f: \"13px\", g: \"12px\" },\n  lg: { s: 64, f: \"15px\", g: \"16px\" },\n  xl: { s: 88, f: \"18px\", g: \"22px\" },\n};\n\nexport const VARIANTS = {\n  light: { bg: \"rgba(255,255,255,0.9)\", tx: \"#1a1a2e\" },\n  dark: { bg: \"rgba(10,10,20,0.92)\", tx: \"#f0f0f0\" },\n  blur: { bg: \"rgba(20,15,50,0.5)\", tx: \"#fff\" },\n  transparent: { bg: \"rgba(0,0,0,0)\", tx: \"#f0f0f0\" },\n  gradient: {\n    bg: \"linear-gradient(135deg,rgba(15,15,40,.95),rgba(50,10,80,.95))\",\n    tx: \"#e8d5ff\",\n  },\n};\n\nexport const ANIM_CSS = `\n  @keyframes lSpin{to{transform:rotate(360deg)}}\n  @keyframes lBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n  @keyframes lPR{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}\n  @keyframes lPC{0%,100%{transform:scale(.9)}50%{transform:scale(1.1)}}\n  @keyframes lBar{0%,100%{height:30%;opacity:.4}50%{height:100%;opacity:1}}\n  @keyframes lFI{from{opacity:0}to{opacity:1}}\n  @keyframes lShim{0%{background-position:0 50%}100%{background-position:200% 50%}}\n`;\n","import React from \"react\";\n\nconst SpinIcon = ({ s, color }) => {\n  return (\n    <svg\n      width={s}\n      height={s}\n      viewBox=\"0 0 50 50\"\n      style={{ animation: \"lSpin .9s linear infinite\" }}\n    >\n      <circle\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"90 60\"\n      />\n    </svg>\n  );\n};\n\nexport default SpinIcon;\n","import React from \"react\";\n\nconst DotsIcon = ({ s, color }) => {\n  return (\n    <div style={{ display: \"flex\", gap: s * 0.18, alignItems: \"center\" }}>\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          style={{\n            width: s * 0.22,\n            height: s * 0.22,\n            borderRadius: \"50%\",\n            background: color,\n            animation: `lBounce 1.2s ease-in-out ${i * 0.2}s infinite`,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default DotsIcon;\n","import React from \"react\";\n\nconst PulseIcon = ({ s, color }) => {\n  return (\n    <div style={{ position: \"relative\", width: s, height: s }}>\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: \"50%\",\n          background: color,\n          opacity: 0.2,\n          animation: \"lPR 1.4s ease-out infinite\",\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          inset: \"20%\",\n          borderRadius: \"50%\",\n          background: color,\n          animation: \"lPC 1.4s ease-in-out infinite\",\n        }}\n      />\n    </div>\n  );\n};\n\nexport default PulseIcon;\n","import React from \"react\";\n\nconst RingIcon = ({ s, color }) => {\n  return (\n    <div\n      style={{\n        width: s,\n        height: s,\n        borderRadius: \"50%\",\n        border: `${s * 0.08}px solid ${color}22`,\n        borderTop: `${s * 0.08}px solid ${color}`,\n        animation: \"lSpin .75s linear infinite\",\n      }}\n    />\n  );\n};\n\nexport default RingIcon;\n","import React from \"react\";\n\nconst BarIcon = ({ s, color }) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: s * 0.1,\n        alignItems: \"flex-end\",\n        height: s * 0.7,\n      }}\n    >\n      {[0, 1, 2, 3].map((i) => (\n        <div\n          key={i}\n          style={{\n            width: s * 0.15,\n            background: color,\n            borderRadius: 3,\n            animation: `lBar 1s ease-in-out ${i * 0.15}s infinite`,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default BarIcon;\n","import SpinIcon from \"./icons/SpinIcon.jsx\";\nimport DotsIcon from \"./icons/DotsIcon.jsx\";\nimport PulseIcon from \"./icons/PulseIcon.jsx\";\nimport RingIcon from \"./icons/RingIcon.jsx\";\nimport BarIcon from \"./icons/BarIcon.jsx\";\n\nexport const ICONS = {\n  spinner: SpinIcon,\n  dots: DotsIcon,\n  pulse: PulseIcon,\n  ring: RingIcon,\n  bar: BarIcon,\n};\n\nexport { SpinIcon, DotsIcon, PulseIcon, RingIcon, BarIcon };\nexport default ICONS;\n","import React, { useState, useRef, useEffect } from \"react\";\nimport { SIZES, VARIANTS, ANIM_CSS } from \"./constants/index.js\";\nimport { ICONS, SpinIcon, DotsIcon, PulseIcon, RingIcon, BarIcon } from \"./components/Icons.jsx\";\n\n// ─── Named exports for tree-shaking ─────────────────────────────────────────\nexport { SIZES, VARIANTS, ANIM_CSS };\nexport { ICONS, SpinIcon, DotsIcon, PulseIcon, RingIcon, BarIcon };\n\n/**\n * A highly customizable, accessible loading overlay.\n * @param {import('./types/index.js').LoaderOverlayProps} props\n */\nexport default function LoaderOverlay({\n  show = true,\n  type = \"spinner\",\n  size = \"md\",\n  variant = \"dark\",\n  color = \"#a78bfa\",\n  message = \"Loading...\",\n  submessage = \"\",\n  fullScreen = false,\n  zIndex = 999,\n  opacity = 1,\n  blur = 8,\n  showProgress = false,\n  progress = 0,\n  closable = false,\n  onClose = () => {},\n  position = \"center\",\n  animateIn = true,\n  timeout = 0,\n  children = null,\n  closeOnOutsideClick = false,\n  onOutsideClick = () => {},\n}) {\n  const [vis, setVis] = useState(show);\n  const boxRef = useRef(null);\n  const closeRef = useRef(onClose);\n  const outsideRef = useRef(onOutsideClick);\n\n  useEffect(() => {\n    closeRef.current = onClose;\n  }, [onClose]);\n  useEffect(() => {\n    outsideRef.current = onOutsideClick;\n  }, [onOutsideClick]);\n  useEffect(() => {\n    setVis(show);\n  }, [show]);\n\n  useEffect(() => {\n    if (!vis || !closeOnOutsideClick) return;\n    const h = (e) => {\n      if (boxRef.current && !boxRef.current.contains(e.target)) {\n        outsideRef.current();\n        setVis(false);\n        closeRef.current();\n      }\n    };\n    document.addEventListener(\"mousedown\", h);\n    return () => document.removeEventListener(\"mousedown\", h);\n  }, [vis, closeOnOutsideClick]);\n\n  useEffect(() => {\n    if (timeout > 0 && vis) {\n      const t = setTimeout(() => {\n        setVis(false);\n        closeRef.current();\n      }, timeout);\n      return () => clearTimeout(t);\n    }\n  }, [timeout, vis]);\n\n  if (!vis) return null;\n\n  const sc = SIZES[size] || SIZES.md;\n  const vc = VARIANTS[variant] || VARIANTS.dark;\n  const Icon = ICONS[type] || ICONS.spinner;\n  const alignMap = { center: \"center\", top: \"flex-start\", bottom: \"flex-end\" };\n\n  return (\n    <>\n      <style>{ANIM_CSS}</style>\n      <div\n        style={{\n          position: fullScreen ? \"fixed\" : \"absolute\",\n          inset: 0,\n          zIndex,\n          display: \"flex\",\n          alignItems: alignMap[position] || \"center\",\n          justifyContent: \"center\",\n          padding: position !== \"center\" ? 40 : 0,\n          background: vc.bg,\n          backdropFilter: blur > 0 ? `blur(${blur}px)` : \"none\",\n          WebkitBackdropFilter: blur > 0 ? `blur(${blur}px)` : \"none\",\n          opacity,\n          animation: animateIn ? \"lFI .25s ease\" : \"none\",\n        }}\n      >\n        <div\n          ref={boxRef}\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            gap: sc.g,\n            padding: \"28px 36px\",\n            borderRadius: 16,\n            position: \"relative\",\n            background:\n              variant === \"transparent\"\n                ? \"transparent\"\n                : variant === \"gradient\"\n                  ? \"rgba(255,255,255,.04)\"\n                  : \"rgba(255,255,255,.07)\",\n            border: variant === \"transparent\" ? \"none\" : `1px solid ${color}25`,\n            boxShadow:\n              variant === \"transparent\" ? \"none\" : `0 8px 40px ${color}15`,\n          }}\n        >\n          {closable && (\n            <button\n              onClick={() => {\n                setVis(false);\n                closeRef.current();\n              }}\n              style={{\n                position: \"absolute\",\n                top: 8,\n                right: 10,\n                background: \"none\",\n                border: \"none\",\n                cursor: \"pointer\",\n                color: vc.tx,\n                fontSize: 16,\n                opacity: 0.45,\n                padding: \"2px 6px\",\n                borderRadius: 6,\n              }}\n            >\n              ✕\n            </button>\n          )}\n          {children || <Icon s={sc.s} color={color} />}\n          {message && (\n            <p\n              style={{\n                margin: 0,\n                color: vc.tx,\n                fontSize: sc.f,\n                fontWeight: 600,\n                letterSpacing: \".04em\",\n                fontFamily: \"system-ui,sans-serif\",\n              }}\n            >\n              {message}\n            </p>\n          )}\n          {submessage && (\n            <p\n              style={{\n                margin: 0,\n                color: vc.tx,\n                fontSize: \"11px\",\n                opacity: 0.5,\n                fontFamily: \"system-ui,sans-serif\",\n              }}\n            >\n              {submessage}\n            </p>\n          )}\n          {showProgress && (\n            <div style={{ width: 140, marginTop: 2 }}>\n              <div\n                style={{\n                  width: \"100%\",\n                  height: 4,\n                  background: `${color}22`,\n                  borderRadius: 99,\n                  overflow: \"hidden\",\n                }}\n              >\n                <div\n                  style={{\n                    height: \"100%\",\n                    width: `${Math.min(100, Math.max(0, progress))}%`,\n                    background: `linear-gradient(90deg,${color},${color}88,${color})`,\n                    backgroundSize: \"200% 100%\",\n                    borderRadius: 99,\n                    transition: \"width .3s ease\",\n                    animation: \"lShim 1.5s linear infinite\",\n                  }}\n                />\n              </div>\n              <p\n                style={{\n                  margin: \"3px 0 0\",\n                  textAlign: \"right\",\n                  color: vc.tx,\n                  opacity: 0.4,\n                  fontSize: 10,\n                  fontFamily: \"monospace\",\n                }}\n              >\n                {progress}%\n              </p>\n            </div>\n          )}\n          {closeOnOutsideClick && (\n            <p\n              style={{\n                margin: \"2px 0 0\",\n                color: vc.tx,\n                opacity: 0.3,\n                fontSize: 9,\n                fontFamily: \"monospace\",\n              }}\n            >\n              click outside to dismiss\n            </p>\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":["SIZES","VARIANTS","ANIM_CSS","SpinIcon","s","color","jsx","DotsIcon","i","PulseIcon","jsxs","RingIcon","BarIcon","ICONS","LoaderOverlay","show","type","size","variant","message","submessage","fullScreen","zIndex","opacity","blur","showProgress","progress","closable","onClose","position","animateIn","timeout","children","closeOnOutsideClick","onOutsideClick","vis","setVis","useState","boxRef","useRef","closeRef","outsideRef","useEffect","h","e","t","sc","vc","Icon","alignMap","Fragment"],"mappings":"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"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "loader-overlay",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Drop-in React overlay loader — 5 animation types, full theme control, progress tracking, and zero dependencies.",
+  "author": "Swapnil Patil (https://github.com/swapnilhpatil)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/swapnilhpatil/loader-overlay.git"
+  },
+  "homepage": "https://github.com/swapnilhpatil/loader-overlay#readme",
+  "bugs": {
+    "url": "https://github.com/swapnilhpatil/loader-overlay/issues"
+  },
+  "main": "dist/loader-overlay.umd.js",
+  "module": "dist/loader-overlay.es.js",
+  "types": "dist/loader-overlay.d.ts",
+  "typings": "dist/loader-overlay.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/loader-overlay.d.ts",
+      "import": "./dist/loader-overlay.es.js",
+      "require": "./dist/loader-overlay.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "loader",
+    "overlay",
+    "spinner",
+    "loading",
+    "progress",
+    "component",
+    "library"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:docs": "vite build --config vite.docs.config.js",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.2.0"
+  }
+}