useblysh 1.0.1 → 1.0.5

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 RISHABH MISHRA
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 RISHABH MISHRA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -61,15 +61,14 @@ const handleUpload = (event) => {
 The `ImageHash` component handles everything: it shows the blur immediately and fades in the real image once it's ready.
 
 ```tsx
-import { ImageHash } from 'useblysh';
-
-const MyGallery = ({ storedHash, imageUrl }) => (
-  <ImageHash 
-    hash={storedHash}        // The short string from your DB
-    src={imageUrl}          // The real high-quality image URL
-    className="w-full h-64 rounded-xl"
-  />
-);
+import { ImageHash } from 'useblysh'; 
+ 
+<ImageHash 
+  key={id}                  // Passing the key is a good thing 
+  hash={storedHash}        // The short string from your DB 
+  src={imageUrl}          // The real high-quality image URL 
+  className="w-full h-64 rounded-xl" 
+/>
 ```
 
 

package/dist/useblysh.js

@@ -19,4 +19,4 @@
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,f,d,j,d),ae[d+f]=!0)}if(d=null,u!==void 0&&(s(u),d=""+u),b(n)&&(s(n.key),d=""+n.key),"key"in n){u={};for(var q in n)q!=="key"&&(u[q]=n[q])}else u=n;return d&&v(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,d,u,o(),U,J)}function p(e){a(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===V&&(e._payload.status==="fulfilled"?a(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function a(e){return typeof e=="object"&&e!==null&&e.$$typeof===R}var l=T,R=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),w=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),x=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),Y=Symbol.for("react.suspense"),ue=Symbol.for("react.suspense_list"),fe=Symbol.for("react.memo"),V=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),me=Symbol.for("react.client.reference"),z=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,be=Array.isArray,B=console.createTask?console.createTask:function(){return null};l={react_stack_bottom_frame:function(e){return e()}};var ee,te={},re=l.react_stack_bottom_frame.bind(l,i)(),ne=B(c(i)),ae={};D.Fragment=y,D.jsx=function(e,n,u){var f=1e4>z.recentlyCreatedOwnerStacks++;return g(e,n,u,!1,f?Error("react-stack-top-frame"):re,f?B(c(e)):ne)},D.jsxs=function(e,n,u){var f=1e4>z.recentlyCreatedOwnerStacks++;return g(e,n,u,!0,f?Error("react-stack-top-frame"):re,f?B(c(e)):ne)}})()),D}var $;function le(){return $||($=1,process.env.NODE_ENV==="production"?F.exports=se():F.exports=ce()),F.exports}var L=le();const W=T.forwardRef(({hash:r,width:t=32,height:s=32,punch:c=1,...o},i)=>{const b=T.useRef(null),[v,E]=T.useState(!1);return T.useImperativeHandle(i,()=>b.current),T.useEffect(()=>{const _=b.current;if(!_)return;const g=new IntersectionObserver(p=>{p[0].isIntersecting&&(E(!0),g.disconnect())},{rootMargin:"100px"});return g.observe(_),()=>g.disconnect()},[]),T.useEffect(()=>{const _=b.current;if(!_||!r||!v)return;const g=_.getContext("2d");if(!g)return;const p=setTimeout(()=>{try{const a=X(r,t,s,c),l=new ImageData(a,t,s);g.putImageData(l,0,0)}catch(a){console.error("Failed to render ImageHash:",a)}},0);return()=>clearTimeout(p)},[r,t,s,c,v]),L.jsx("canvas",{ref:b,width:t,height:s,style:{imageRendering:"pixelated",...o.style},...o})});W.displayName="ImageHashCanvas";const ie=({hash:r,src:t,className:s,style:c,...o})=>{const[i,b]=T.useState(!1),{style:v,...E}=o;return L.jsxs("div",{className:s,style:{position:"relative",overflow:"hidden",display:"inline-block",...c},children:[L.jsx(W,{hash:r,style:{position:"absolute",inset:0,width:"100%",height:"100%",opacity:i?0:1,transition:"opacity 0.5s ease-in-out",pointerEvents:"none"}}),L.jsx("img",{...E,src:t,loading:"lazy",onLoad:()=>b(!0),style:{display:"block",width:"100%",height:"100%",opacity:i?1:0,transition:"opacity 0.5s ease-in-out",...v}})]})};m.CHARACTERS=H,m.ImageHash=ie,m.ImageHashCanvas=W,m.decode=X,m.decodeBase83=I,m.encode=G,m.encodeBase83=O,m.encodeImage=oe,m.linearToSrgb=P,m.signPow=C,m.srgbToLinear=S,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,f,d,j,d),ae[d+f]=!0)}if(d=null,u!==void 0&&(s(u),d=""+u),b(n)&&(s(n.key),d=""+n.key),"key"in n){u={};for(var q in n)q!=="key"&&(u[q]=n[q])}else u=n;return d&&v(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,d,u,o(),U,J)}function p(e){a(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===V&&(e._payload.status==="fulfilled"?a(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function a(e){return typeof e=="object"&&e!==null&&e.$$typeof===R}var l=T,R=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),w=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),x=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),Y=Symbol.for("react.suspense"),ue=Symbol.for("react.suspense_list"),fe=Symbol.for("react.memo"),V=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),me=Symbol.for("react.client.reference"),z=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,be=Array.isArray,B=console.createTask?console.createTask:function(){return null};l={react_stack_bottom_frame:function(e){return e()}};var ee,te={},re=l.react_stack_bottom_frame.bind(l,i)(),ne=B(c(i)),ae={};D.Fragment=y,D.jsx=function(e,n,u){var f=1e4>z.recentlyCreatedOwnerStacks++;return g(e,n,u,!1,f?Error("react-stack-top-frame"):re,f?B(c(e)):ne)},D.jsxs=function(e,n,u){var f=1e4>z.recentlyCreatedOwnerStacks++;return g(e,n,u,!0,f?Error("react-stack-top-frame"):re,f?B(c(e)):ne)}})()),D}var $;function le(){return $||($=1,process.env.NODE_ENV==="production"?F.exports=se():F.exports=ce()),F.exports}var L=le();const W=T.forwardRef(({hash:r,width:t=32,height:s=32,punch:c=1,...o},i)=>{const b=T.useRef(null),[v,E]=T.useState(!1);return T.useImperativeHandle(i,()=>b.current),T.useEffect(()=>{const _=b.current;if(!_)return;const g=new IntersectionObserver(p=>{p[0].isIntersecting&&(E(!0),g.disconnect())},{rootMargin:"100px"});return g.observe(_),()=>g.disconnect()},[]),T.useEffect(()=>{const _=b.current;if(!_||!r||!v)return;const g=_.getContext("2d");if(!g)return;const p=setTimeout(()=>{try{const a=X(r,t,s,c),l=new ImageData(a,t,s);g.putImageData(l,0,0)}catch(a){console.error("Failed to render ImageHash:",a)}},0);return()=>clearTimeout(p)},[r,t,s,c,v]),L.jsx("canvas",{ref:b,width:t,height:s,style:{imageRendering:"pixelated",...o.style},...o})});W.displayName="ImageHashCanvas";const ie=({hash:r,src:t,className:s,style:c,...o})=>{const[i,b]=T.useState(!1),{style:v,...E}=o;return L.jsxs("div",{className:s,style:{position:"relative",overflow:"hidden",display:"inline-block",...c},children:[L.jsx(W,{hash:r,className:s,style:{position:"absolute",inset:0,width:"100%",height:"100%",opacity:i?0:1,transition:"opacity 0.5s ease-in-out",pointerEvents:"none"}}),L.jsx("img",{...E,className:s,src:t,loading:"lazy",onLoad:()=>b(!0),style:{display:"block",width:"100%",height:"100%",opacity:i?1:0,transition:"opacity 0.5s ease-in-out",...v}})]})};m.CHARACTERS=H,m.ImageHash=ie,m.ImageHashCanvas=W,m.decode=X,m.decodeBase83=I,m.encode=G,m.encodeBase83=O,m.encodeImage=oe,m.linearToSrgb=P,m.signPow=C,m.srgbToLinear=S,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/useblysh.mjs

@@ -2,15 +2,15 @@ import ee, { forwardRef as ie, useRef as ue, useState as fe, useImperativeHandle
 const te = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~", C = (r, t) => {
   let s = "";
   for (let c = 1; c <= t; c++) {
-    const o = Math.floor(r / Math.pow(83, t - c)) % 83;
-    s += te[o];
+    const a = Math.floor(r / Math.pow(83, t - c)) % 83;
+    s += te[a];
   }
   return s;
 }, D = (r) => {
   let t = 0;
   for (let s = 0; s < r.length; s++) {
-    const c = r[s], o = te.indexOf(c);
-    t = t * 83 + o;
+    const c = r[s], a = te.indexOf(c);
+    t = t * 83 + a;
   }
   return t;
 }, w = (r) => {
@@ -19,17 +19,17 @@ const te = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,
 }, O = (r) => {
   const t = Math.max(0, Math.min(1, r));
   return t <= 31308e-7 ? Math.round(t * 12.92 * 255) : Math.round((1.055 * Math.pow(t, 1 / 2.4) - 0.055) * 255);
-}, P = (r, t) => Math.sign(r) * Math.pow(Math.abs(r), t), me = (r, t, s, c = 4, o = 3) => {
-  if (c < 1 || c > 9 || o < 1 || o > 9)
+}, P = (r, t) => Math.sign(r) * Math.pow(Math.abs(r), t), me = (r, t, s, c = 4, a = 3) => {
+  if (c < 1 || c > 9 || a < 1 || a > 9)
     throw new Error("Components must be between 1 and 9");
   const i = [];
-  for (let a = 0; a < o; a++)
+  for (let o = 0; o < a; o++)
     for (let l = 0; l < c; l++) {
-      const v = (l === 0 ? 1 : 2) * (a === 0 ? 1 : 2);
+      const v = (l === 0 ? 1 : 2) * (o === 0 ? 1 : 2);
       let g = 0, T = 0, M = 0;
       for (let x = 0; x < s; x++)
         for (let y = 0; y < t; y++) {
-          const A = Math.cos(Math.PI * l * y / t) * Math.cos(Math.PI * a * x / s), S = (x * t + y) * 4;
+          const A = Math.cos(Math.PI * l * y / t) * Math.cos(Math.PI * o * x / s), S = (x * t + y) * 4;
           g += A * w(r[S]), T += A * w(r[S + 1]), M += A * w(r[S + 2]);
         }
       const h = v / (t * s);
@@ -37,43 +37,43 @@ const te = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,
     }
   const m = i[0], E = i.slice(1);
   let b = "";
-  b += C(c - 1 + (o - 1) * 9, 1);
+  b += C(c - 1 + (a - 1) * 9, 1);
   let p = 1;
   if (E.length > 0) {
-    const a = Math.max(...E.map((v) => Math.max(Math.abs(v[0]), Math.abs(v[1]), Math.abs(v[2])))), l = Math.max(0, Math.min(82, Math.floor(a * 166 - 0.5)));
+    const o = Math.max(...E.map((v) => Math.max(Math.abs(v[0]), Math.abs(v[1]), Math.abs(v[2])))), l = Math.max(0, Math.min(82, Math.floor(o * 166 - 0.5)));
     b += C(l, 1), p = (l + 1) / 166;
   } else
     b += C(0, 1);
-  b += C(((a) => {
-    const l = O(a[0]), v = O(a[1]), g = O(a[2]);
+  b += C(((o) => {
+    const l = O(o[0]), v = O(o[1]), g = O(o[2]);
     return (l << 16) + (v << 8) + g;
   })(m), 4);
-  const R = (a, l) => {
-    const v = Math.max(0, Math.min(18, Math.floor(P(a[0] / l, 0.5) * 9 + 9.5))), g = Math.max(0, Math.min(18, Math.floor(P(a[1] / l, 0.5) * 9 + 9.5))), T = Math.max(0, Math.min(18, Math.floor(P(a[2] / l, 0.5) * 9 + 9.5)));
+  const R = (o, l) => {
+    const v = Math.max(0, Math.min(18, Math.floor(P(o[0] / l, 0.5) * 9 + 9.5))), g = Math.max(0, Math.min(18, Math.floor(P(o[1] / l, 0.5) * 9 + 9.5))), T = Math.max(0, Math.min(18, Math.floor(P(o[2] / l, 0.5) * 9 + 9.5)));
     return v * 19 * 19 + g * 19 + T;
   };
-  for (const a of E)
-    b += C(R(a, p), 2);
+  for (const o of E)
+    b += C(R(o, p), 2);
   return b;
 }, Re = (r, t = 4, s = 3) => {
   const c = document.createElement("canvas");
   c.width = 32, c.height = 32;
-  const o = c.getContext("2d");
-  if (!o) throw new Error("Could not create canvas context");
-  o.drawImage(r, 0, 0, 32, 32);
-  const i = o.getImageData(0, 0, 32, 32);
+  const a = c.getContext("2d");
+  if (!a) throw new Error("Could not create canvas context");
+  a.drawImage(r, 0, 0, 32, 32);
+  const i = a.getImageData(0, 0, 32, 32);
   return me(i.data, 32, 32, t, s);
 }, be = (r, t, s, c = 1) => {
   if (!r || r.length < 6)
     throw new Error("The hash is invalid.");
-  const o = D(r[0]), i = o % 9 + 1, m = Math.floor(o / 9) + 1, b = (D(r[1]) + 1) / 166, p = [], _ = D(r.substring(2, 6));
+  const a = D(r[0]), i = a % 9 + 1, m = Math.floor(a / 9) + 1, b = (D(r[1]) + 1) / 166, p = [], _ = D(r.substring(2, 6));
   p.push([
     w(_ >> 16 & 255),
     w(_ >> 8 & 255),
     w(_ & 255)
   ]);
-  for (let a = 1; a < i * m; a++) {
-    const l = D(r.substring(6 + (a - 1) * 2, 6 + a * 2));
+  for (let o = 1; o < i * m; o++) {
+    const l = D(r.substring(6 + (o - 1) * 2, 6 + o * 2));
     p.push([
       P((Math.floor(l / 361) - 9) / 9, 2) * b * c,
       P((Math.floor(l / 19 % 19) - 9) / 9, 2) * b * c,
@@ -81,15 +81,15 @@ const te = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,
     ]);
   }
   const R = new Uint8ClampedArray(t * s * 4);
-  for (let a = 0; a < s; a++)
+  for (let o = 0; o < s; o++)
     for (let l = 0; l < t; l++) {
       let v = 0, g = 0, T = 0;
       for (let h = 0; h < m; h++)
         for (let x = 0; x < i; x++) {
-          const y = Math.cos(Math.PI * x * l / t) * Math.cos(Math.PI * h * a / s), A = p[h * i + x];
+          const y = Math.cos(Math.PI * x * l / t) * Math.cos(Math.PI * h * o / s), A = p[h * i + x];
           v += A[0] * y, g += A[1] * y, T += A[2] * y;
         }
-      const M = (a * t + l) * 4;
+      const M = (o * t + l) * 4;
       R[M] = O(v), R[M + 1] = O(g), R[M + 2] = O(T), R[M + 3] = 255;
     }
   return R;
@@ -109,18 +109,18 @@ function Ee() {
   if (Z) return j;
   Z = 1;
   var r = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
-  function s(c, o, i) {
+  function s(c, a, i) {
     var m = null;
-    if (i !== void 0 && (m = "" + i), o.key !== void 0 && (m = "" + o.key), "key" in o) {
+    if (i !== void 0 && (m = "" + i), a.key !== void 0 && (m = "" + a.key), "key" in a) {
       i = {};
-      for (var E in o)
-        E !== "key" && (i[E] = o[E]);
-    } else i = o;
-    return o = i.ref, {
+      for (var E in a)
+        E !== "key" && (i[E] = a[E]);
+    } else i = a;
+    return a = i.ref, {
       $$typeof: r,
       type: c,
       key: m,
-      ref: o !== void 0 ? o : null,
+      ref: a !== void 0 ? a : null,
       props: i
     };
   }
@@ -155,7 +155,7 @@ function ve() {
           return "Suspense";
         case ne:
           return "SuspenseList";
-        case oe:
+        case ae:
           return "Activity";
       }
       if (typeof e == "object")
@@ -171,7 +171,7 @@ function ve() {
           case A:
             var n = e.render;
             return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case ae:
+          case oe:
             return n = e.displayName || null, n !== null ? n : r(e.type) || "Memo";
           case F:
             n = e._payload, e = e._init;
@@ -213,7 +213,7 @@ function ve() {
         return "<...>";
       }
     }
-    function o() {
+    function a() {
       var e = q.A;
       return e === null ? null : e.getOwner();
     }
@@ -321,18 +321,18 @@ React keys must be passed directly to JSX without using spread:
         e,
         d,
         u,
-        o(),
+        a(),
         N,
         U
       );
     }
     function R(e) {
-      a(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === F && (e._payload.status === "fulfilled" ? a(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+      o(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === F && (e._payload.status === "fulfilled" ? o(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function a(e) {
+    function o(e) {
       return typeof e == "object" && e !== null && e.$$typeof === v;
     }
-    var l = ee, v = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), M = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), y = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), ne = Symbol.for("react.suspense_list"), ae = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), oe = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), q = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, ce = Array.isArray, L = console.createTask ? console.createTask : function() {
+    var l = ee, v = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), M = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), y = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), ne = Symbol.for("react.suspense_list"), oe = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), q = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, ce = Array.isArray, L = console.createTask ? console.createTask : function() {
       return null;
     };
     l = {
@@ -373,7 +373,7 @@ function pe() {
 }
 var $ = pe();
 const re = ie(
-  ({ hash: r, width: t = 32, height: s = 32, punch: c = 1, ...o }, i) => {
+  ({ hash: r, width: t = 32, height: s = 32, punch: c = 1, ...a }, i) => {
     const m = ue(null), [E, b] = fe(!1);
     return de(i, () => m.current), X(() => {
       const p = m.current;
@@ -393,10 +393,10 @@ const re = ie(
       if (!_) return;
       const R = setTimeout(() => {
         try {
-          const a = be(r, t, s, c), l = new ImageData(a, t, s);
+          const o = be(r, t, s, c), l = new ImageData(o, t, s);
           _.putImageData(l, 0, 0);
-        } catch (a) {
-          console.error("Failed to render ImageHash:", a);
+        } catch (o) {
+          console.error("Failed to render ImageHash:", o);
         }
       }, 0);
       return () => clearTimeout(R);
@@ -406,15 +406,15 @@ const re = ie(
         ref: m,
         width: t,
         height: s,
-        style: { imageRendering: "pixelated", ...o.style },
-        ...o
+        style: { imageRendering: "pixelated", ...a.style },
+        ...a
       }
     );
   }
 );
 re.displayName = "ImageHashCanvas";
-const ge = ({ hash: r, src: t, className: s, style: c, ...o }) => {
-  const [i, m] = ee.useState(!1), { style: E, ...b } = o;
+const ge = ({ hash: r, src: t, className: s, style: c, ...a }) => {
+  const [i, m] = ee.useState(!1), { style: E, ...b } = a;
   return /* @__PURE__ */ $.jsxs(
     "div",
     {
@@ -430,6 +430,7 @@ const ge = ({ hash: r, src: t, className: s, style: c, ...o }) => {
           re,
           {
             hash: r,
+            className: s,
             style: {
               position: "absolute",
               inset: 0,
@@ -446,6 +447,7 @@ const ge = ({ hash: r, src: t, className: s, style: c, ...o }) => {
           "img",
           {
             ...b,
+            className: s,
             src: t,
             loading: "lazy",
             onLoad: () => m(!0),

package/dist/useblysh.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "useblysh",
-  "version": "1.0.1",
+  "version": "1.0.5",
+  "type": "module",
   "description": "High-performance visual hashing for seamless image loading. Encode images into tiny strings and decode into beautiful, fast-loading blurs.",
   "main": "./dist/useblysh.js",
   "module": "./dist/useblysh.mjs",
@@ -25,7 +26,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/R1SH4BH81/Blysh.git"
+    "url": "git+https://github.com/R1SH4BH81/Blysh.git"
   },
   "homepage": "https://useblysh.vercel.app",
   "bugs": {
@@ -57,4 +58,4 @@
   ],
   "author": "Rishabh Mishra <rishabhmishra.81@gmail.com>",
   "license": "MIT"
-}
+}