shimmer-from-structure 0.3.0 → 0.5.0

package/README.md

@@ -190,6 +190,103 @@ function Dashboard() {
 </Shimmer>
 ```
 
+## 🔄 Using with React Suspense
+
+Shimmer works seamlessly as a Suspense fallback. When used this way, `loading` is always `true` because React automatically unmounts the fallback and replaces it with the resolved component.
+
+### Basic Suspense Pattern
+
+```tsx
+import { Suspense, lazy } from 'react';
+import { Shimmer } from 'shimmer-from-structure';
+
+const UserProfile = lazy(() => import('./UserProfile'));
+
+function App() {
+  return (
+    <Suspense
+      fallback={
+        <Shimmer loading={true} templateProps={{ user: userTemplate }}>
+          <UserProfile />
+        </Shimmer>
+      }
+    >
+      <UserProfile userId="123" />
+    </Suspense>
+  );
+}
+```
+
+### Why `loading={true}` is Always Set
+
+When using Shimmer as a Suspense fallback:
+1. **Suspend**: React renders the fallback → Shimmer shows with `loading={true}`
+2. **Resolve**: React **replaces** the entire fallback with the real component
+3. The Shimmer is **unmounted**, not updated — so you never need to toggle `loading`
+
+### Performance Tips for Suspense
+
+**Memoize the fallback** to prevent re-renders:
+```tsx
+const ShimmerFallback = React.memo(() => (
+  <Shimmer loading={true} templateProps={{ user: userTemplate }}>
+    <UserProfile />
+  </Shimmer>
+));
+
+// Usage
+<Suspense fallback={<ShimmerFallback />}>
+  <UserProfile userId="123" />
+</Suspense>
+```
+
+**Keep templates lightweight** — the DOM is measured synchronously via `useLayoutEffect`, so avoid complex logic in your template.
+
+## Global Configuration (Context API)
+
+You can set default configuration for your entire app (or specific sections) using `ShimmerProvider`. This is perfect for maintaining consistent themes without repeating props.
+
+```tsx
+import { Shimmer, ShimmerProvider } from 'shimmer-from-structure';
+
+function App() {
+  return (
+    // Set global defaults
+    <ShimmerProvider config={{
+      shimmerColor: 'rgba(56, 189, 248, 0.4)', // Blue shimmer
+      backgroundColor: 'rgba(56, 189, 248, 0.1)', // Blue background
+      duration: 2.5,
+      fallbackBorderRadius: 8
+    }}>
+      <Dashboard />
+    </ShimmerProvider>
+  );
+}
+```
+
+Components inside the provider automatically inherit values. You can still override them locally:
+
+```tsx
+// Inherits blue theme from provider
+<Shimmer loading={true}><UserCard /></Shimmer>
+
+// Overrides provider settings
+<Shimmer loading={true} duration={0.5}><FastCard /></Shimmer>
+```
+
+### Accessing Config in Hooks
+
+If you need to access the current configuration in your own components:
+
+```tsx
+import { useShimmerConfig } from 'shimmer-from-structure';
+
+function MyComponent() {
+  const config = useShimmerConfig();
+  return <div style={{ background: config.backgroundColor }}>...</div>;
+}
+```
+
 ## Best Practices
 
 ### 1. Use `templateProps` for Dynamic Data

package/dist/ShimmerContext.d.ts

@@ -0,0 +1,51 @@
+import { default as React, ReactNode } from 'react';
+/**
+ * Configuration options for shimmer appearance and behavior.
+ * All properties are optional when providing config to ShimmerProvider.
+ */
+export interface ShimmerConfig {
+    /** Color of the shimmer wave animation */
+    shimmerColor?: string;
+    /** Background color of shimmer placeholders */
+    backgroundColor?: string;
+    /** Duration of one shimmer animation cycle in seconds */
+    duration?: number;
+    /** Fallback border radius (px) for elements without explicit border-radius */
+    fallbackBorderRadius?: number;
+}
+/**
+ * Internal context value type with all required properties.
+ * Ensures consuming components always receive valid values.
+ */
+interface ShimmerContextValue {
+    shimmerColor: string;
+    backgroundColor: string;
+    duration: number;
+    fallbackBorderRadius: number;
+}
+/** Default configuration values */
+declare const defaultConfig: ShimmerContextValue;
+export interface ShimmerProviderProps {
+    /** Shimmer configuration to apply to all child Shimmer components */
+    config?: ShimmerConfig;
+    children: ReactNode;
+}
+/**
+ * Provider component for global shimmer configuration.
+ * Wrap your app or a section of your component tree to apply default shimmer settings.
+ *
+ * @example
+ * ```tsx
+ * <ShimmerProvider config={{ shimmerColor: '#fff', duration: 2 }}>
+ *   <App />
+ * </ShimmerProvider>
+ * ```
+ */
+export declare const ShimmerProvider: React.FC<ShimmerProviderProps>;
+/**
+ * Hook to access the current shimmer configuration from context.
+ * Returns default values if no ShimmerProvider is present.
+ * All returned values are guaranteed to be defined.
+ */
+export declare const useShimmerConfig: () => ShimmerContextValue;
+export { defaultConfig as shimmerDefaults };

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { Shimmer } from './Shimmer';
-export type { ShimmerProps, ElementInfo } from './types';
+export type { ShimmerProps, ElementInfo, ShimmerConfig } from './types';
+export { ShimmerProvider, useShimmerConfig } from './ShimmerContext';

package/dist/{index.esm → index.esm.js}

@@ -1,5 +1,5 @@
-import y, { useState as te, useRef as M, useLayoutEffect as ne } from "react";
-var N = { exports: {} }, _ = {};
+import T, { createContext as ne, useMemo as ae, useContext as se, useState as ie, useRef as z, useLayoutEffect as le } from "react";
+var L = { exports: {} }, g = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var N = { exports: {} }, _ = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var W;
-function oe() {
-  if (W) return _;
-  W = 1;
+var X;
+function ue() {
+  if (X) return g;
+  X = 1;
   var t = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
-  function f(u, i, c) {
+  function l(u, i, f) {
     var d = null;
-    if (c !== void 0 && (d = "" + c), i.key !== void 0 && (d = "" + i.key), "key" in i) {
-      c = {};
-      for (var p in i)
-        p !== "key" && (c[p] = i[p]);
-    } else c = i;
-    return i = c.ref, {
+    if (f !== void 0 && (d = "" + f), i.key !== void 0 && (d = "" + i.key), "key" in i) {
+      f = {};
+      for (var m in i)
+        m !== "key" && (f[m] = i[m]);
+    } else f = i;
+    return i = f.ref, {
       $$typeof: t,
       type: u,
       key: d,
       ref: i !== void 0 ? i : null,
-      props: c
+      props: f
     };
   }
-  return _.Fragment = s, _.jsx = f, _.jsxs = f, _;
+  return g.Fragment = s, g.jsx = l, g.jsxs = l, g;
 }
-var T = {};
+var k = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,44 +41,44 @@ var T = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var U;
-function ae() {
-  return U || (U = 1, process.env.NODE_ENV !== "production" && function() {
+var G;
+function ce() {
+  return G || (G = 1, process.env.NODE_ENV !== "production" && function() {
     function t(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === K ? null : e.displayName || e.name || null;
+        return e.$$typeof === re ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case A:
+        case p:
           return "Fragment";
-        case X:
+        case b:
           return "Profiler";
-        case z:
+        case c:
           return "StrictMode";
-        case B:
+        case Z:
           return "Suspense";
-        case H:
-          return "SuspenseList";
         case Q:
+          return "SuspenseList";
+        case ee:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case k:
+          case R:
             return "Portal";
-          case J:
+          case P:
             return e.displayName || "Context";
-          case G:
+          case _:
             return (e._context.displayName || "Context") + ".Consumer";
-          case q:
+          case H:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case Z:
+          case K:
             return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
-          case S:
+          case N:
             r = e._payload, e = e._init;
             try {
               return t(e(r));
@@ -90,7 +90,7 @@ function ae() {
     function s(e) {
       return "" + e;
     }
-    function f(e) {
+    function l(e) {
       try {
         s(e);
         var r = !1;
@@ -99,17 +99,17 @@ function ae() {
       }
       if (r) {
         r = console;
-        var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return n.call(
+        var o = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          o
+          n
         ), s(e);
       }
     }
     function u(e) {
-      if (e === A) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === S)
+      if (e === p) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === N)
         return "<...>";
       try {
         var r = t(e);
@@ -119,48 +119,48 @@ function ae() {
       }
     }
     function i() {
-      var e = j.A;
+      var e = $.A;
       return e === null ? null : e.getOwner();
     }
-    function c() {
+    function f() {
       return Error("react-stack-top-frame");
     }
     function d(e) {
-      if ($.call(e, "key")) {
+      if (D.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function p(e, r) {
-      function n() {
-        Y || (Y = !0, console.error(
+    function m(e, r) {
+      function o() {
+        B || (B = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
       }
-      n.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: n,
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
         configurable: !0
       });
     }
-    function x() {
+    function j() {
       var e = t(this.type);
-      return I[e] || (I[e] = !0, console.error(
+      return M[e] || (M[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function w(e, r, n, o, g, P) {
-      var a = n.ref;
+    function O(e, r, o, n, A, I) {
+      var a = o.ref;
       return e = {
-        $$typeof: b,
+        $$typeof: S,
         type: e,
         key: r,
-        props: n,
-        _owner: o
+        props: o,
+        _owner: n
       }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: x
+        get: j
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -175,157 +175,174 @@ function ae() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: g
+        value: A
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: P
+        value: I
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function h(e, r, n, o, g, P) {
+    function x(e, r, o, n, A, I) {
       var a = r.children;
       if (a !== void 0)
-        if (o)
-          if (ee(a)) {
-            for (o = 0; o < a.length; o++)
-              R(a[o]);
+        if (n)
+          if (te(a)) {
+            for (n = 0; n < a.length; n++)
+              C(a[n]);
             Object.freeze && Object.freeze(a);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else R(a);
-      if ($.call(r, "key")) {
+        else C(a);
+      if (D.call(r, "key")) {
         a = t(e);
-        var v = Object.keys(r).filter(function(re) {
-          return re !== "key";
+        var v = Object.keys(r).filter(function(oe) {
+          return oe !== "key";
         });
-        o = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", D[a + o] || (v = 0 < v.length ? "{" + v.join(": ..., ") + ": ...}" : "{}", console.error(
+        n = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", V[a + n] || (v = 0 < v.length ? "{" + v.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          o,
+          n,
           a,
           v,
           a
-        ), D[a + o] = !0);
+        ), V[a + n] = !0);
       }
-      if (a = null, n !== void 0 && (f(n), a = "" + n), d(r) && (f(r.key), a = "" + r.key), "key" in r) {
-        n = {};
-        for (var C in r)
-          C !== "key" && (n[C] = r[C]);
-      } else n = r;
-      return a && p(
-        n,
+      if (a = null, o !== void 0 && (l(o), a = "" + o), d(r) && (l(r.key), a = "" + r.key), "key" in r) {
+        o = {};
+        for (var F in r)
+          F !== "key" && (o[F] = r[F]);
+      } else o = r;
+      return a && m(
+        o,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), w(
+      ), O(
         e,
         a,
-        n,
+        o,
         i(),
-        g,
-        P
+        A,
+        I
       );
     }
-    function R(e) {
-      l(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? l(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function C(e) {
+      w(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === N && (e._payload.status === "fulfilled" ? w(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function l(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === b;
+    function w(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === S;
     }
-    var m = y, b = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), X = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), J = Symbol.for("react.context"), q = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), j = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, ee = Array.isArray, O = console.createTask ? console.createTask : function() {
+    var E = T, S = Symbol.for("react.transitional.element"), R = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), c = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), _ = Symbol.for("react.consumer"), P = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), Q = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), N = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), $ = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, te = Array.isArray, Y = console.createTask ? console.createTask : function() {
       return null;
     };
-    m = {
+    E = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var Y, I = {}, F = m.react_stack_bottom_frame.bind(
-      m,
-      c
-    )(), L = O(u(c)), D = {};
-    T.Fragment = A, T.jsx = function(e, r, n) {
-      var o = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return h(
+    var B, M = {}, W = E.react_stack_bottom_frame.bind(
+      E,
+      f
+    )(), U = Y(u(f)), V = {};
+    k.Fragment = p, k.jsx = function(e, r, o) {
+      var n = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return x(
         e,
         r,
-        n,
+        o,
         !1,
-        o ? Error("react-stack-top-frame") : F,
-        o ? O(u(e)) : L
+        n ? Error("react-stack-top-frame") : W,
+        n ? Y(u(e)) : U
       );
-    }, T.jsxs = function(e, r, n) {
-      var o = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return h(
+    }, k.jsxs = function(e, r, o) {
+      var n = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return x(
         e,
         r,
-        n,
+        o,
         !0,
-        o ? Error("react-stack-top-frame") : F,
-        o ? O(u(e)) : L
+        n ? Error("react-stack-top-frame") : W,
+        n ? Y(u(e)) : U
       );
     };
-  }()), T;
+  }()), k;
 }
-process.env.NODE_ENV === "production" ? N.exports = oe() : N.exports = ae();
-var E = N.exports;
-function se(t) {
+process.env.NODE_ENV === "production" ? L.exports = ue() : L.exports = ce();
+var h = L.exports;
+const y = {
+  shimmerColor: "rgba(255, 255, 255, 0.15)",
+  backgroundColor: "rgba(255, 255, 255, 0.08)",
+  duration: 1.5,
+  fallbackBorderRadius: 4
+}, J = ne(y), he = ({
+  config: t = {},
+  children: s
+}) => {
+  const l = ae(() => ({
+    shimmerColor: t.shimmerColor ?? y.shimmerColor,
+    backgroundColor: t.backgroundColor ?? y.backgroundColor,
+    duration: t.duration ?? y.duration,
+    fallbackBorderRadius: t.fallbackBorderRadius ?? y.fallbackBorderRadius
+  }), [t.shimmerColor, t.backgroundColor, t.duration, t.fallbackBorderRadius]);
+  return /* @__PURE__ */ h.jsx(J.Provider, { value: l, children: s });
+}, fe = () => se(J);
+function de(t) {
   const s = t.tagName.toLowerCase();
   return !!(["img", "svg", "video", "canvas", "iframe", "input", "textarea", "button"].includes(s) || !(Array.from(t.children).length > 0));
 }
-function V(t, s) {
-  const f = [], u = t.getBoundingClientRect();
+function q(t, s) {
+  const l = [], u = t.getBoundingClientRect();
   if (u.width === 0 || u.height === 0)
-    return f;
-  if (se(t)) {
-    const c = window.getComputedStyle(t).borderRadius || "0px", d = {
+    return l;
+  if (de(t)) {
+    const f = window.getComputedStyle(t).borderRadius || "0px", d = {
       x: u.left - s.left,
       y: u.top - s.top,
       width: u.width,
       height: u.height,
       tag: t.tagName.toLowerCase(),
-      borderRadius: c
+      borderRadius: f
     };
-    f.push(d);
+    l.push(d);
   } else
     Array.from(t.children).forEach((i) => {
-      f.push(...V(i, s));
+      l.push(...q(i, s));
     });
-  return f;
+  return l;
 }
-const le = ({
+const be = ({
   children: t,
   loading: s = !0,
-  shimmerColor: f = "rgba(255, 255, 255, 0.15)",
-  backgroundColor: u = "rgba(255, 255, 255, 0.08)",
-  duration: i = 1.5,
-  fallbackBorderRadius: c = 4,
+  shimmerColor: l,
+  backgroundColor: u,
+  duration: i,
+  fallbackBorderRadius: f,
   templateProps: d
 }) => {
-  const [p, x] = te([]), w = M(null), h = M(null), R = y.useMemo(() => {
+  const m = fe(), j = l ?? m.shimmerColor, O = u ?? m.backgroundColor, x = i ?? m.duration, C = f ?? m.fallbackBorderRadius, [w, E] = ie([]), S = z(null), R = z(null), p = T.useMemo(() => {
     if (!s || !d)
       return t;
-    const l = y.Children.toArray(t);
-    if (l.length === 0)
+    const c = T.Children.toArray(t);
+    if (c.length === 0)
       return t;
-    const m = l[0];
-    return y.isValidElement(m) ? [y.cloneElement(m, {
+    const b = c[0];
+    return T.isValidElement(b) ? [T.cloneElement(b, {
       ...d
-    }), ...l.slice(1)] : t;
+    }), ...c.slice(1)] : t;
   }, [t, s, d]);
-  return ne(() => {
-    if (!s || !h.current) return;
-    const l = h.current, m = l.getBoundingClientRect(), b = [];
-    Array.from(l.children).forEach((k) => {
-      b.push(...V(k, m));
-    }), x(b);
-  }, [s, R]), s ? /* @__PURE__ */ E.jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ E.jsx("style", { children: `
+  return le(() => {
+    if (!s || !R.current) return;
+    const c = R.current, b = c.getBoundingClientRect(), _ = [];
+    Array.from(c.children).forEach((P) => {
+      _.push(...q(P, b));
+    }), E(_);
+  }, [s, p]), s ? /* @__PURE__ */ h.jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ h.jsx("style", { children: `
         .shimmer-measure-container * {
           color: transparent !important;
           border-color: transparent !important;
@@ -336,22 +353,22 @@ const le = ({
           opacity: 0;
         }
       ` }),
-    /* @__PURE__ */ E.jsx(
+    /* @__PURE__ */ h.jsx(
       "div",
       {
-        ref: h,
+        ref: R,
         className: "shimmer-measure-container",
         style: {
           pointerEvents: "none"
         },
         "aria-hidden": "true",
-        children: R
+        children: p
       }
     ),
-    /* @__PURE__ */ E.jsxs(
+    /* @__PURE__ */ h.jsxs(
       "div",
       {
-        ref: w,
+        ref: S,
         style: {
           position: "absolute",
           top: 0,
@@ -361,7 +378,7 @@ const le = ({
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ E.jsx("style", { children: `
+          /* @__PURE__ */ h.jsx("style", { children: `
           @keyframes shimmer {
             0% {
               transform: translateX(-100%);
@@ -371,20 +388,20 @@ const le = ({
             }
           }
         ` }),
-          p.map((l, m) => /* @__PURE__ */ E.jsx(
+          w.map((c, b) => /* @__PURE__ */ h.jsx(
             "div",
             {
               style: {
                 position: "absolute",
-                left: `${l.x}px`,
-                top: `${l.y}px`,
-                width: `${l.width}px`,
-                height: `${l.height}px`,
-                backgroundColor: u,
-                borderRadius: l.borderRadius === "0px" ? `${c}px` : l.borderRadius,
+                left: `${c.x}px`,
+                top: `${c.y}px`,
+                width: `${c.width}px`,
+                height: `${c.height}px`,
+                backgroundColor: O,
+                borderRadius: c.borderRadius === "0px" ? `${C}px` : c.borderRadius,
                 overflow: "hidden"
               },
-              children: /* @__PURE__ */ E.jsx(
+              children: /* @__PURE__ */ h.jsx(
                 "div",
                 {
                   style: {
@@ -393,19 +410,21 @@ const le = ({
                     left: 0,
                     width: "100%",
                     height: "100%",
-                    background: `linear-gradient(90deg, transparent, ${f}, transparent)`,
-                    animation: `shimmer ${i}s infinite`
+                    background: `linear-gradient(90deg, transparent, ${j}, transparent)`,
+                    animation: `shimmer ${x}s infinite`
                   }
                 }
               )
             },
-            m
+            b
           ))
         ]
       }
     )
-  ] }) : /* @__PURE__ */ E.jsx(E.Fragment, { children: t });
+  ] }) : /* @__PURE__ */ h.jsx(h.Fragment, { children: t });
 };
 export {
-  le as Shimmer
+  be as Shimmer,
+  he as ShimmerProvider,
+  fe as useShimmerConfig
 };

package/dist/index.js

@@ -1,4 +1,4 @@
-(function(E,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],f):(E=typeof globalThis<"u"?globalThis:E||self,f(E.ShimmerFromStructure={},E.React))})(this,function(E,f){"use strict";var w={exports:{}},y={};/**
+(function(p,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],i):(p=typeof globalThis<"u"?globalThis:p||self,i(p.ShimmerFromStructure={},p.React))})(this,function(p,i){"use strict";var O={exports:{}},g={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Y;function z(){if(Y)return y;Y=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function d(l,i,c){var m=null;if(c!==void 0&&(m=""+c),i.key!==void 0&&(m=""+i.key),"key"in i){c={};for(var b in i)b!=="key"&&(c[b]=i[b])}else c=i;return i=c.ref,{$$typeof:t,type:l,key:m,ref:i!==void 0?i:null,props:c}}return y.Fragment=s,y.jsx=d,y.jsxs=d,y}var T={};/**
+ */var M;function Z(){if(M)return g;M=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function l(c,u,d){var m=null;if(d!==void 0&&(m=""+d),u.key!==void 0&&(m=""+u.key),"key"in u){d={};for(var b in u)b!=="key"&&(d[b]=u[b])}else d=u;return u=d.ref,{$$typeof:t,type:c,key:m,ref:u!==void 0?u:null,props:d}}return g.Fragment=s,g.jsx=l,g.jsxs=l,g}var k={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,12 +14,12 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var I;function X(){return I||(I=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ne?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case B:return"Profiler";case J:return"StrictMode";case K:return"Suspense";case ee:return"SuspenseList";case te:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case A:return"Portal";case Z:return e.displayName||"Context";case H:return(e._context.displayName||"Context")+".Consumer";case Q:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case re:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case O:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function s(e){return""+e}function d(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),s(e)}}function l(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=P.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function m(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function n(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function S(){var e=t(this.type);return M[e]||(M[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function k(e,r,n,o,x,N){var a=n.ref;return e={$$typeof:_,type:e,key:r,props:n,_owner:o},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:S}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function v(e,r,n,o,x,N){var a=r.children;if(a!==void 0)if(o)if(oe(a)){for(o=0;o<a.length;o++)g(a[o]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(a);if(L.call(r,"key")){a=t(e);var R=Object.keys(r).filter(function(ae){return ae!=="key"});o=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",V[a+o]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var B;function Q(){return B||(B=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case E:return"Profiler";case f:return"StrictMode";case oe:return"Suspense";case ne:return"SuspenseList";case se:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case T:return"Portal";case $:return e.displayName||"Context";case C:return(e._context.displayName||"Context")+".Consumer";case te:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ae:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case Y:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function s(e){return""+e}function l(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),s(e)}}function c(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function u(){var e=I.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function m(e){if(z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function o(){X||(X=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function P(){var e=t(this.type);return q[e]||(q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function N(e,r,o,n,A,L){var a=o.ref;return e={$$typeof:j,type:e,key:r,props:o,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:P}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function x(e,r,o,n,A,L){var a=r.children;if(a!==void 0)if(n)if(ue(a)){for(n=0;n<a.length;n++)S(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else S(a);if(z.call(r,"key")){a=t(e);var R=Object.keys(r).filter(function(le){return le!=="key"});n=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",H[a+n]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,a,R,a),V[a+o]=!0)}if(a=null,n!==void 0&&(d(n),a=""+n),m(r)&&(d(r.key),a=""+r.key),"key"in r){n={};for(var $ in r)$!=="key"&&(n[$]=r[$])}else n=r;return a&&b(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,a,n,i(),x,N)}function g(e){u(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?u(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function u(e){return typeof e=="object"&&e!==null&&e.$$typeof===_}var p=f,_=Symbol.for("react.transitional.element"),A=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),J=Symbol.for("react.strict_mode"),B=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),Z=Symbol.for("react.context"),Q=Symbol.for("react.forward_ref"),K=Symbol.for("react.suspense"),ee=Symbol.for("react.suspense_list"),re=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),te=Symbol.for("react.activity"),ne=Symbol.for("react.client.reference"),P=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,oe=Array.isArray,C=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(e){return e()}};var D,M={},W=p.react_stack_bottom_frame.bind(p,c)(),U=C(l(c)),V={};T.Fragment=j,T.jsx=function(e,r,n){var o=1e4>P.recentlyCreatedOwnerStacks++;return v(e,r,n,!1,o?Error("react-stack-top-frame"):W,o?C(l(e)):U)},T.jsxs=function(e,r,n){var o=1e4>P.recentlyCreatedOwnerStacks++;return v(e,r,n,!0,o?Error("react-stack-top-frame"):W,o?C(l(e)):U)}}()),T}process.env.NODE_ENV==="production"?w.exports=z():w.exports=X();var h=w.exports;function q(t){const s=t.tagName.toLowerCase();return!!(["img","svg","video","canvas","iframe","input","textarea","button"].includes(s)||!(Array.from(t.children).length>0))}function F(t,s){const d=[],l=t.getBoundingClientRect();if(l.width===0||l.height===0)return d;if(q(t)){const c=window.getComputedStyle(t).borderRadius||"0px",m={x:l.left-s.left,y:l.top-s.top,width:l.width,height:l.height,tag:t.tagName.toLowerCase(),borderRadius:c};d.push(m)}else Array.from(t.children).forEach(i=>{d.push(...F(i,s))});return d}const G=({children:t,loading:s=!0,shimmerColor:d="rgba(255, 255, 255, 0.15)",backgroundColor:l="rgba(255, 255, 255, 0.08)",duration:i=1.5,fallbackBorderRadius:c=4,templateProps:m})=>{const[b,S]=f.useState([]),k=f.useRef(null),v=f.useRef(null),g=f.useMemo(()=>{if(!s||!m)return t;const u=f.Children.toArray(t);if(u.length===0)return t;const p=u[0];return f.isValidElement(p)?[f.cloneElement(p,{...m}),...u.slice(1)]:t},[t,s,m]);return f.useLayoutEffect(()=>{if(!s||!v.current)return;const u=v.current,p=u.getBoundingClientRect(),_=[];Array.from(u.children).forEach(A=>{_.push(...F(A,p))}),S(_)},[s,g]),s?h.jsxs("div",{style:{position:"relative"},children:[h.jsx("style",{children:`
+  <%s key={someKey} {...props} />`,n,a,R,a),H[a+n]=!0)}if(a=null,o!==void 0&&(l(o),a=""+o),m(r)&&(l(r.key),a=""+r.key),"key"in r){o={};for(var D in r)D!=="key"&&(o[D]=r[D])}else o=r;return a&&b(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),N(e,a,o,u(),A,L)}function S(e){w(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===Y&&(e._payload.status==="fulfilled"?w(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function w(e){return typeof e=="object"&&e!==null&&e.$$typeof===j}var v=i,j=Symbol.for("react.transitional.element"),T=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),f=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),C=Symbol.for("react.consumer"),$=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),ne=Symbol.for("react.suspense_list"),ae=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),se=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),I=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,ue=Array.isArray,F=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var X,q={},G=v.react_stack_bottom_frame.bind(v,d)(),J=F(c(d)),H={};k.Fragment=_,k.jsx=function(e,r,o){var n=1e4>I.recentlyCreatedOwnerStacks++;return x(e,r,o,!1,n?Error("react-stack-top-frame"):G,n?F(c(e)):J)},k.jsxs=function(e,r,o){var n=1e4>I.recentlyCreatedOwnerStacks++;return x(e,r,o,!0,n?Error("react-stack-top-frame"):G,n?F(c(e)):J)}}()),k}process.env.NODE_ENV==="production"?O.exports=Z():O.exports=Q();var h=O.exports;const y={shimmerColor:"rgba(255, 255, 255, 0.15)",backgroundColor:"rgba(255, 255, 255, 0.08)",duration:1.5,fallbackBorderRadius:4},W=i.createContext(y),K=({config:t={},children:s})=>{const l=i.useMemo(()=>({shimmerColor:t.shimmerColor??y.shimmerColor,backgroundColor:t.backgroundColor??y.backgroundColor,duration:t.duration??y.duration,fallbackBorderRadius:t.fallbackBorderRadius??y.fallbackBorderRadius}),[t.shimmerColor,t.backgroundColor,t.duration,t.fallbackBorderRadius]);return h.jsx(W.Provider,{value:l,children:s})},U=()=>i.useContext(W);function ee(t){const s=t.tagName.toLowerCase();return!!(["img","svg","video","canvas","iframe","input","textarea","button"].includes(s)||!(Array.from(t.children).length>0))}function V(t,s){const l=[],c=t.getBoundingClientRect();if(c.width===0||c.height===0)return l;if(ee(t)){const d=window.getComputedStyle(t).borderRadius||"0px",m={x:c.left-s.left,y:c.top-s.top,width:c.width,height:c.height,tag:t.tagName.toLowerCase(),borderRadius:d};l.push(m)}else Array.from(t.children).forEach(u=>{l.push(...V(u,s))});return l}const re=({children:t,loading:s=!0,shimmerColor:l,backgroundColor:c,duration:u,fallbackBorderRadius:d,templateProps:m})=>{const b=U(),P=l??b.shimmerColor,N=c??b.backgroundColor,x=u??b.duration,S=d??b.fallbackBorderRadius,[w,v]=i.useState([]),j=i.useRef(null),T=i.useRef(null),_=i.useMemo(()=>{if(!s||!m)return t;const f=i.Children.toArray(t);if(f.length===0)return t;const E=f[0];return i.isValidElement(E)?[i.cloneElement(E,{...m}),...f.slice(1)]:t},[t,s,m]);return i.useLayoutEffect(()=>{if(!s||!T.current)return;const f=T.current,E=f.getBoundingClientRect(),C=[];Array.from(f.children).forEach($=>{C.push(...V($,E))}),v(C)},[s,_]),s?h.jsxs("div",{style:{position:"relative"},children:[h.jsx("style",{children:`
         .shimmer-measure-container * {
           color: transparent !important;
           border-color: transparent !important;
@@ -29,7 +29,7 @@ React keys must be passed directly to JSX without using spread:
         .shimmer-measure-container video {
           opacity: 0;
         }
-      `}),h.jsx("div",{ref:v,className:"shimmer-measure-container",style:{pointerEvents:"none"},"aria-hidden":"true",children:g}),h.jsxs("div",{ref:k,style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflow:"hidden"},children:[h.jsx("style",{children:`
+      `}),h.jsx("div",{ref:T,className:"shimmer-measure-container",style:{pointerEvents:"none"},"aria-hidden":"true",children:_}),h.jsxs("div",{ref:j,style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflow:"hidden"},children:[h.jsx("style",{children:`
           @keyframes shimmer {
             0% {
               transform: translateX(-100%);
@@ -38,4 +38,4 @@ React keys must be passed directly to JSX without using spread:
               transform: translateX(100%);
             }
           }
-        `}),b.map((u,p)=>h.jsx("div",{style:{position:"absolute",left:`${u.x}px`,top:`${u.y}px`,width:`${u.width}px`,height:`${u.height}px`,backgroundColor:l,borderRadius:u.borderRadius==="0px"?`${c}px`:u.borderRadius,overflow:"hidden"},children:h.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:`linear-gradient(90deg, transparent, ${d}, transparent)`,animation:`shimmer ${i}s infinite`}})},p))]})]}):h.jsx(h.Fragment,{children:t})};E.Shimmer=G,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
+        `}),w.map((f,E)=>h.jsx("div",{style:{position:"absolute",left:`${f.x}px`,top:`${f.y}px`,width:`${f.width}px`,height:`${f.height}px`,backgroundColor:N,borderRadius:f.borderRadius==="0px"?`${S}px`:f.borderRadius,overflow:"hidden"},children:h.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:`linear-gradient(90deg, transparent, ${P}, transparent)`,animation:`shimmer ${x}s infinite`}})},E))]})]}):h.jsx(h.Fragment,{children:t})};p.Shimmer=re,p.ShimmerProvider=K,p.useShimmerConfig=U,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/dist/types.d.ts

@@ -25,3 +25,4 @@ export interface ShimmerProps {
      */
     templateProps?: Record<string, unknown>;
 }
+export type { ShimmerConfig } from './ShimmerContext';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shimmer-from-structure",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "A React shimmer/skeleton library that automatically adapts to your component's runtime structure",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",