{"_id":"@shimmer-from-structure/core","_rev":"19-b14429c536babf5a9d218b562b9c6a4b","name":"@shimmer-from-structure/core","dist-tags":{"latest":"2.4.6"},"versions":{"1.0.0":{"name":"@shimmer-from-structure/core","version":"1.0.0","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@1.0.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"5e46e88985eb6e02a5a887b0949cb28912275d64","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-1.0.0.tgz","fileCount":16,"integrity":"sha512-J55XXHqT/siFdF+yIYyr0BS9Xg1T78qoBPBH8Q1ljLwcbgLZd24rOZovsZuU0psn5KD4F3llEHCfS72/Nko6wQ==","signatures":[{"sig":"MEUCIQCK6g9tGNKdPl0BP2II/jkRV2zP5fTyjuKkyn7vq5ZNoQIgVRlR5pSAfLMrlFClj4hbiDPhFZc9yXxI0SX655X+ehQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6538},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"87d55145e05f33b7325091ab0129fe4f1f2433da","scripts":{"test":"vitest","build":"tsc && vite build"},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.0_1769334693118_0.1870905669119327","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@shimmer-from-structure/core","version":"1.0.1","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@1.0.1","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"9fbee7f1ec83a50e107109bfb0d6c77f0f13f7d6","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-1.0.1.tgz","fileCount":17,"integrity":"sha512-zTplTi1Ssq/9rnyvut+S5cTbyGg8gXANUOCr2dnF2l3fkpDyM13Ss2a9fgycH+ZuUdxBfghpUe1mpjd1PjZgfQ==","signatures":[{"sig":"MEQCIE7Hp/UQkWhgaNxRGd90UAVObouIBzXB5yE9C/w75JnaAiBPpmCPKuZhLeoAe1LUeQJrlKagEradf72inOvptfU90Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20477},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"c322d5a5e1f997853e3797030eae848086580824","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.1_1769337208695_0.6509226934118757","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@shimmer-from-structure/core","version":"1.0.2","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@1.0.2","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"4a7c3d493318debf74774ac02aa6989b7316de06","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-1.0.2.tgz","fileCount":17,"integrity":"sha512-y0bZXsbMHeC3H3GmBkoQIG3hlSXhrCQ7In0yuTEGH0InMv34FVlOA0xTdKqNr24LHlTZlLKRxN+oW2bjvwlMvA==","signatures":[{"sig":"MEUCIB2iYP7+3u68HNvEI274VxuqOD6KND3+zygzrURp3XsgAiEA7xyXOkzwGx+pHvpq/+zDnVOtazNR0ZMs536iOpsZCCE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21105},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"c5b697d42f6221afbd81d8d0900256d654e5cb8b","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.2_1769337886986_0.178356208543619","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@shimmer-from-structure/core","version":"1.0.3","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@1.0.3","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"dist":{"shasum":"90882de5ed84eca3f18e9fcf969e341297dd75ad","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-1.0.3.tgz","fileCount":17,"integrity":"sha512-Irk9LGETneAuBtgt5X8xYuRfKwEOxzJKQv2Eub6mx6BqqQUXam/ekWDlIGoo82k+joofLpXE2oM/y51HmEHHBw==","signatures":[{"sig":"MEUCIBGUe96uOEbNQPV1z47DZfxcNtdC4GlRL/INuJ4dnVcQAiEAtO3r9zXV92rqXYFMEb1K+/CyO2bkj7lh2+zux4UrRwE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22412},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"255cbfd78069eb2cc2aa34cee047b48d4032d81b","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.3_1769339910770_0.358101715602803","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@shimmer-from-structure/core","version":"1.0.4","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@1.0.4","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"157ef79f61bda8fa3cd4cb56cce4b9f0df4f5b3d","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-1.0.4.tgz","fileCount":17,"integrity":"sha512-YVNjWc9amqDIQnksyvE7iapBCD4I3v1b4dzSgr4ljlc553gVANOIP8hX1I6c+EqwNdHj34gUX/+EOP9UJHEsSw==","signatures":[{"sig":"MEYCIQCJVQZdcIHev0OQDuRSqYQGoZEpT9jeMN0kZ6+dU9JU5QIhAKFurEeGRemUBtGpTBCAVpAEz7CmO8TEuaYmk6uInbXe","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22562},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"b4062a0558531618b111b70ccb211763ba97c828","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.4_1769340569038_0.6315576573142181","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@shimmer-from-structure/core","version":"1.0.5","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@1.0.5","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"d8b9987cfc2aa2d5db599538af9344113149e7d1","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-1.0.5.tgz","fileCount":17,"integrity":"sha512-LcJIyg8ylEmxwU5xtAP8SRKwJQ+KAoEiKDIE0CpVD8/QUwGie3W0C2g07B6wNNHzoG0a+MU9XhRkQ+KjD0aclQ==","signatures":[{"sig":"MEUCIHNml0g+1MzIhajHI/52RcoiOfRaof6qSY9c914GqMbnAiEAq4H6yAvVvZ5LCX25zWnAMH2dcBRxAzQ4ExwpicNW5GA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22622},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"b5e6777e77241f1b420c1e15c48b778b820a4fc8","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.5_1769342800406_0.12364884873496584","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@shimmer-from-structure/core","version":"1.1.0","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@1.1.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"2a291e81e318fbe85060ecbbd92bacdd32cdff3b","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-1.1.0.tgz","fileCount":17,"integrity":"sha512-+7fptw1czsv60HOBo94sliA58RSO3Tnzfr1Ot/COsTQBBHlOyhK2jTDtKWf804GdLGjF6NmKjbS6TwX6I5DISQ==","signatures":[{"sig":"MEUCIQDw1En1i7qIm6wK5b6dOwQJKpEEfTZaYRZoEIG/vWp5wAIgQnFT7Q0UEvM+NYgElNdAS4AlZOUo1EUQhTXKGvlTU3s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25764},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"fce683fa234628693356d2823ecdfb72b31f409e","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.1.0_1769489619099_0.11996050324468643","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@shimmer-from-structure/core","version":"2.0.0","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.0.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"39a8e42668d821e1ab37480ed3edc6aa9e4c1d09","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.0.0.tgz","fileCount":17,"integrity":"sha512-zBZpFqQrTYI+bEfxpqOa7zmxVFWisbsE/phbBNEDzH6qnczZjVYamoq9Q4x/HatCfF0uFYm3fAN+bNmehsV36g==","signatures":[{"sig":"MEUCIQC3oXYhdKp8lVeAanOfuQlH8yvhg/MEBt5RBuqqrOxM7wIgWQj9DlpuB2XaOKjro0+ahcBOUmc9cG8ii/8dxPplGSw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25901},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"1ce8213c8d1522cf163605e307ce03bff87ff2c7","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.0.0_1769639467566_0.7797081429267032","host":"s3://npm-registry-packages-npm-production"}},"2.1.0":{"name":"@shimmer-from-structure/core","version":"2.1.0","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.1.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"e6ffdf57eeefd9ad674d4f7b165053e76b026086","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.1.0.tgz","fileCount":21,"integrity":"sha512-6VseRxGoIQFxtbkkVrhbk+wa+CsIhb3vRrkbLj/ciZNyDGhwS5cgtZP+ntfllwgz4sKqtw6AkXjEL4ODG/cSIw==","signatures":[{"sig":"MEQCIBUW4KLzlT6WZLAWDtSBt9pW3Wi8N0w8qholQtjySmCIAiA0HK8dFRYTYJwNBl/Md0TUJkpyw2LF98t/JH+zteb6+w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27704},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"a9708e969fba414b2d266cae7c55ccd806e26e57","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.1.0_1770248625783_0.025530394391808375","host":"s3://npm-registry-packages-npm-production"}},"2.2.0":{"name":"@shimmer-from-structure/core","version":"2.2.0","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.2.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"098d788c7cfff5698f25b9163cb652df71a6ac98","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.2.0.tgz","fileCount":21,"integrity":"sha512-Du2OinVARBXVcSDD2k3nBi6hXJXGA1pEXwiUK9chgs8JA7x7l4KGHaTNr6431/d27uWnPDRuv93vCjC5AC2vow==","signatures":[{"sig":"MEYCIQDPg6Jx8AUP69ss4VBG7uUdaik0r+NhxnjOM5T1RcbCQgIhAP4GTT227eudWvHs0C37MJ7s7/oUtF+ua9WmStuocAYx","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27703},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"7eb100f40b205b97628d4f75d7eb3f35857d5266","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.2.0_1770272841754_0.08713284923708042","host":"s3://npm-registry-packages-npm-production"}},"2.3.0":{"name":"@shimmer-from-structure/core","version":"2.3.0","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.3.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"1f7c7e43cb444900c4daf658129f534b5f702f22","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.3.0.tgz","fileCount":21,"integrity":"sha512-dAmTYmKiAQ0Fu7YWURmuj+bDM/PYuQhKUvT6iMPB51Y/OVF1PsIKLg+mSmL4tDqlmgwl2wBamEN7nYTl8OhUqw==","signatures":[{"sig":"MEUCIQCiyyw0gY8H+P2E/jGJcB5/lpdi4XvzyEDp5LQrZ8AglQIgNuepBXTQwcX6Sm7mlycM2/nG3FGZOUPagPU9WRQ9xho=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34432},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"dabae59fe57d2346dc1ad00bbc163d7259845056","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.3.0_1770576205266_0.7515508533759767","host":"s3://npm-registry-packages-npm-production"}},"2.3.1":{"name":"@shimmer-from-structure/core","version":"2.3.1","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.3.1","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"d2545d7c3b3e561dc3026cf958280d09e3170888","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.3.1.tgz","fileCount":21,"integrity":"sha512-z9kaYqnIhPIQCwwHEh+1IsT2+sXGEticnA1ty4inuLpBWtvkwwe5tNIiNRgjVEl8XaV1uJMDmOerWDAmIDYilA==","signatures":[{"sig":"MEUCIQC6+jt2lAZto9G0L9OhPsBHbDhPZPShr38Wq3a5PDaxAwIgFP3MmjdGbpboZF4s8u6Xyg56iF2Dw3nBEbPRNsF/nKw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34432},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"1d27b633ccd1dd2ac336c66738e6af540309e5de","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.3.1_1770750980619_0.20229018120809106","host":"s3://npm-registry-packages-npm-production"}},"2.3.2":{"name":"@shimmer-from-structure/core","version":"2.3.2","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.3.2","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"e343c170b7c397d23beb224f8b735aa76ba37fa9","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.3.2.tgz","fileCount":21,"integrity":"sha512-JygKZ2E0d890M+9NyyQX/1DmTGHHFtrQGiv9mxPpN0Ct4cW9hIPNWXC88lznlGWpzwrlivbPDFGG/ea8QMwEHA==","signatures":[{"sig":"MEUCIAT9KtdED74Mqc0x5o79Vs08oP+cdC/TZudgtpzU4S6YAiEA8kb/T8NY1Rl24BVnsPORKbQ9xN4OSsyLMP81pRwuUW0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34535},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"059953641b0590552a7c22e775c68cea45d4a51c","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.3.2_1771661713699_0.52190912030548","host":"s3://npm-registry-packages-npm-production"}},"2.4.0":{"name":"@shimmer-from-structure/core","version":"2.4.0","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.4.0","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"d01392e6ea20d61c2c995be7af3fadc5d5d92690","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.4.0.tgz","fileCount":19,"integrity":"sha512-yGoLRP6HP6vS6Ou++xWDFD3oqVE3NmS1ZdruXvN1GbDOvbPUv/zjj4INhtEhp6n4iwyaIfbvcOjsOjznJCl8BA==","signatures":[{"sig":"MEYCIQCybEyPvt2zHPU3P3DEETTM/CXI3jtaG4T/Nwe1Qs90EAIhALZTABeqvfh+BxI9wutI+3mOE2TkghTuJ+gG3aNtgrhk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36334},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"a812643d0a9dc816c53254e1585f88bfa4aa3912","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.4.0_1773605549420_0.7049269096289823","host":"s3://npm-registry-packages-npm-production"}},"2.4.2":{"name":"@shimmer-from-structure/core","version":"2.4.2","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.4.2","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"58f4ab047f26cce177b2a9917a85baa6299f0a5e","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.4.2.tgz","fileCount":19,"integrity":"sha512-CHYlf3LH55drKJC/5dDmyefOEvA003vTl7S097MsFDAs1CXFw3MAkBObzUTmv8MmBve1EcV+vQkT33W9yp3ZTw==","signatures":[{"sig":"MEQCIGjA0jejvElkyJLSbi+X8sNqallp2HdLl0celdhzzVhRAiArhr76kf2i98ItWgp5NMHAgetilhE+M5zyDs9DTzI+pA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36152},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"e1e5df7d1a264450ccd81142011479b4e1a7c56a","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.4.2_1774095381711_0.6453970793631552","host":"s3://npm-registry-packages-npm-production"}},"2.4.3":{"name":"@shimmer-from-structure/core","version":"2.4.3","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.4.3","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"0d0bc6c7d721b24bee44a2328345e3bfa84655b2","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.4.3.tgz","fileCount":21,"integrity":"sha512-3Fa3VG77rbd64wzZl2Q6TePNaFk0RjpNpjU3Dhw311gg76tKaMjwdhvCLik+nJvvKNukA6vv/95EtPZefllQIw==","signatures":[{"sig":"MEQCIG3Apm1h4fqytUr5b78V+zogum738pNEOIzUXkfaE0B0AiAZdw06v14lFSCRXwZVYuOFurbDgwU6QKA7SB+g+FWQUA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37951},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"ef18752454a5c4c760eb5f9765927492a24d7f07","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.4.3_1775663912467_0.3528544853174238","host":"s3://npm-registry-packages-npm-production"}},"2.4.4":{"name":"@shimmer-from-structure/core","version":"2.4.4","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.4.4","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"0c2e52ce4c222d0a316c5c0331f2cbaf3b30a9fe","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.4.4.tgz","fileCount":21,"integrity":"sha512-VeLAzIe1OAGPDk+fu3jjBRHQzeBG5lR+mUqI502vlaLf2vqw4sas1D5hy0qQIOkhRSd0chmBeWp93h8+24A33A==","signatures":[{"sig":"MEYCIQCn1YpcJCpzEctUyF1047mzqqYjevPlX/d216wRx9qA3AIhAKLYIRloRKmOzzOHBd/Q6umcn6zLHp6qCiN7ELKJiRir","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38776},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"a332f2f069f43c31c120523942027fdafd2a151e","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.8.2","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.4.4_1775675437643_0.29372311296073916","host":"s3://npm-registry-packages-npm-production"}},"2.4.5":{"name":"@shimmer-from-structure/core","version":"2.4.5","keywords":["shimmer","skeleton","dom","measurement"],"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.4.5","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"dist":{"shasum":"c47bd0ae7dafb9c09aeda7ccbb31d3707f278166","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.4.5.tgz","fileCount":19,"integrity":"sha512-SenOK0gKhXw7vz0mPjRZXkl0Bf11Yp/ATEG2wK5T0zrbZQQzUX9RssZIq+Xdx6G7+4fZAhoCioRpqjhE/6H93g==","signatures":[{"sig":"MEUCIGq9gY7aaCPOlqdXugkEA254tD4Huz0QEHPXQPMvaASlAiEAzlMktxHACgVM4jjlYJ3S74iYoJh/7xf8sc7JOc9t6lU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38878},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"d499053f3f6c9eca967e8d338bf020936d9541aa","scripts":{"test":"vitest","build":"tsc && vite build","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"repository":{"url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","type":"git","directory":"packages/core"},"_npmVersion":"10.9.7","description":"Framework-agnostic DOM measurement utilities for shimmer effects","directories":{},"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_2.4.5_1775909250236_0.6756793351134953","host":"s3://npm-registry-packages-npm-production"}},"2.4.6":{"name":"@shimmer-from-structure/core","version":"2.4.6","description":"Framework-agnostic DOM measurement utilities for shimmer effects","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"scripts":{"build":"tsc && vite build","test":"vitest","format":"prettier --write .","prepublishOnly":"cp ../../README.md ."},"keywords":["shimmer","skeleton","dom","measurement"],"repository":{"type":"git","url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","directory":"packages/core"},"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","_id":"@shimmer-from-structure/core@2.4.6","gitHead":"64cda5378c304ecf497d58db2f399d3df4968207","bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-g0pC2rNtSCUdOwgfTS02x47TR8J07Rl2l1Fn4wL07LjBpg6lMvZf/NlkFdSwYxl/cvmpOL3KdpFacNLi9nocuQ==","shasum":"035c25b87a51f8792c7573eea5a2aa5ef3676b5d","tarball":"https://registry.npmjs.org/@shimmer-from-structure/core/-/core-2.4.6.tgz","fileCount":21,"unpackedSize":39414,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICIe8rTqPVFaUIlI9txffvTGyPrqmjydISnxvrGwtOqjAiEAkIezoZASs008TAbFqanP7znr4WmwfrOpPNnhLthGCvs="}]},"_npmUser":{"name":"ombedzi","email":"olebogeng350@gmail.com"},"directories":{},"maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/core_2.4.6_1778069230315_0.7786856312661037"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-25T09:51:32.976Z","modified":"2026-05-06T12:07:10.608Z","1.0.0":"2026-01-25T09:51:33.464Z","1.0.1":"2026-01-25T10:33:28.858Z","1.0.2":"2026-01-25T10:44:47.156Z","1.0.3":"2026-01-25T11:18:30.925Z","1.0.4":"2026-01-25T11:29:29.170Z","1.0.5":"2026-01-25T12:06:40.555Z","1.1.0":"2026-01-27T04:53:39.238Z","2.0.0":"2026-01-28T22:31:07.703Z","2.1.0":"2026-02-04T23:43:45.935Z","2.2.0":"2026-02-05T06:27:21.916Z","2.3.0":"2026-02-08T18:43:25.424Z","2.3.1":"2026-02-10T19:16:20.761Z","2.3.2":"2026-02-21T08:15:13.834Z","2.4.0":"2026-03-15T20:12:29.590Z","2.4.2":"2026-03-21T12:16:21.861Z","2.4.3":"2026-04-08T15:58:32.642Z","2.4.4":"2026-04-08T19:10:37.805Z","2.4.5":"2026-04-11T12:07:30.466Z","2.4.6":"2026-05-06T12:07:10.460Z"},"bugs":{"url":"https://github.com/darula-hpp/shimmer-from-structure/issues"},"author":{"name":"Olebogeng Mbedzi"},"license":"MIT","homepage":"https://github.com/darula-hpp/shimmer-from-structure#readme","keywords":["shimmer","skeleton","dom","measurement"],"repository":{"type":"git","url":"git+https://github.com/darula-hpp/shimmer-from-structure.git","directory":"packages/core"},"description":"Framework-agnostic DOM measurement utilities for shimmer effects","maintainers":[{"name":"ombedzi","email":"olebogeng350@gmail.com"}],"readme":"# Shimmer From Structure\n\nA structure-aware skeleton generator that mirrors your rendered UI at runtime. Automatically generates responsive shimmer states with zero layout duplication. Built for React, Vue, Angular, Svelte and SolidJS.\n\n**Documentation:** Access Full Docs\n\n\n\n\n\n\n\n\n\n## Why This Library?\n\nTraditional shimmer libraries require you to:\n\n- Manually create skeleton components that mirror your real components\n- Maintain two versions of each component (real + skeleton)\n- Update skeletons every time your layout changes\n\n**Shimmer From Structure** eliminates all of that:\n\n- ✅ **Works with React, Vue, Svelte, Angular & SolidJS** - Simple, framework-specific adapters\n- ✅ Automatically measures your component's structure at runtime\n- ✅ Generates shimmer effects that match actual dimensions\n- ✅ Zero maintenance - works with any layout changes\n- ✅ Works with complex nested structures\n- ✅ Supports dynamic data with `templateProps`\n- ✅ Preserves container backgrounds during loading\n- ✅ Auto-detects border-radius from your CSS\n\n## Installation\n\n```bash\nnpm install shimmer-from-structure\n# or\nyarn add shimmer-from-structure\n# or\npnpm add shimmer-from-structure\n```\n\n## 🎯 Framework Support\n\nShimmer From Structure provides dedicated packages for **React and Vue**.\n\n### React\n\nReact support is built into the main package for backward compatibility:\n\n```javascript\n// React projects (or @shimmer-from-structure/react)\nimport { Shimmer } from 'shimmer-from-structure';\n```\n\n### Vue 3\n\nVue support requires importing from the specific adapter:\n\n```javascript\n// Vue 3 projects\nimport { Shimmer } from '@shimmer-from-structure/vue';\n```\n\n### Svelte\n\nSvelte support is provided via its own adapter:\n\n```javascript\n// Svelte projects\nimport { Shimmer } from '@shimmer-from-structure/svelte';\n```\n\n### Angular\n\nAngular support requires importing from the specific adapter:\n\n```typescript\n// Angular projects\nimport { ShimmerComponent } from '@shimmer-from-structure/angular';\n```\n\n### SolidJS\n\nSolidJS support requires importing from the specific adapter:\n\n```tsx\n// SolidJS projects\nimport { Shimmer } from '@shimmer-from-structure/solid';\n```\n\n---\n\n# 📖 Basic Usage\n\n## React\n\n### Static Content\n\nFor components with hardcoded/static content:\n\n```tsx\nimport { Shimmer } from 'shimmer-from-structure';\n\nfunction UserCard() {\n return (\n \n
\n \n );\n}\n```\n\n---\n\n### Dynamic Content with `templateProps`\n\nFor components that receive dynamic data via props, use `templateProps` to provide mock data for skeleton generation:\n\n**React**\n\n```tsx\nimport { Shimmer } from 'shimmer-from-structure';\n\n// Your component that accepts props\nconst UserCard = ({ user }) => (\n
\n \n
{user.name}
\n
{user.role}
\n
\n);\n\n// Template data for the skeleton\nconst userTemplate = {\n name: 'Loading...',\n role: 'Loading role...',\n avatar: 'placeholder.jpg',\n};\n\nfunction App() {\n const [loading, setLoading] = useState(true);\n const [user, setUser] = useState(null);\n\n return (\n \n \n \n );\n}\n```\n\n**Vue**\n\n```vue\n\n\n\n \n \n \n\n```\n\n**Svelte**\n\n```svelte\n\n\n\n \n\n```\n\n**Angular**\n\n```typescript\nimport { Component, signal } from '@angular/core';\nimport { ShimmerComponent } from '@shimmer-from-structure/angular';\nimport { UserCardComponent } from './user-card.component';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [ShimmerComponent, UserCardComponent],\n template: `\n \n \n \n `,\n})\nexport class AppComponent {\n loading = signal(true);\n user = signal(null);\n\n userTemplate = {\n name: 'Loading...',\n role: 'Loading role...',\n avatar: 'placeholder.jpg',\n };\n}\n```\n\n**SolidJS**\n\n```tsx\nimport { createSignal } from 'solid-js';\nimport { Shimmer } from '@shimmer-from-structure/solid';\nimport { UserCard } from './UserCard';\n\nfunction App() {\n const [loading, setLoading] = createSignal(true);\n const [user, setUser] = createSignal(null);\n\n const userTemplate = {\n name: 'Loading...',\n role: 'Loading role...',\n avatar: 'placeholder.jpg',\n };\n\n return (\n \n \n \n );\n}\n```\n\nThe `templateProps` object is spread onto the first child component when loading, allowing it to render with mock data for measurement.\n\n## 🎨 API Reference\n\n### `` Props\n\n| Prop | Type | Default | Description |\n| ---------------------- | ------------------------- | -------------------------- | --------------------------------------------------------- |\n| `loading` | `boolean` | `true` | Whether to show shimmer effect or actual content |\n| `children` | `React.ReactNode` | required | The content to render/measure |\n| `shimmerColor` | `string` | `'rgba(255,255,255,0.15)'` | Color of the shimmer wave |\n| `backgroundColor` | `string` | `'rgba(255,255,255,0.08)'` | Background color of shimmer blocks |\n| `duration` | `number` | `1.5` | Animation duration in seconds |\n| `fallbackBorderRadius` | `number` | `4` | Border radius (px) for elements with no CSS border-radius |\n| `templateProps` | `Record` | - | Props to inject into first child for skeleton rendering |\n\n### Example with All Props\n\n**React**\n\n```tsx\n\n \n\n```\n\n**Vue**\n\n```vue\n\n \n\n```\n\n**Svelte**\n\n```svelte\n\n \n\n```\n\n**Angular**\n\n```typescript\n\n \n\n```\n\n**SolidJS**\n\n```tsx\n\n \n\n```\n\n## 🔧 How It Works\n\n1. **Visible Container Rendering**: When `loading={true}`, your component renders with transparent text but **visible container backgrounds**\n2. **Template Props Injection**: If `templateProps` is provided, it's spread onto the first child so dynamic components can render\n3. **DOM Measurement**: Uses `useLayoutEffect` to synchronously measure all leaf elements via `getBoundingClientRect()`\n4. **Border Radius Detection**: Automatically captures each element's computed `border-radius` from CSS\n5. **Shimmer Generation**: Creates absolutely-positioned shimmer blocks matching measured dimensions\n6. **Animation**: Applies smooth gradient animation that sweeps across each block\n\n### Key Features\n\n- **Container backgrounds visible**: Unlike `opacity: 0`, we use `color: transparent` so card backgrounds/borders show during loading\n- **Auto border-radius**: Circular avatars get circular shimmer blocks automatically\n- **Fallback radius**: Text elements (which have `border-radius: 0`) use `fallbackBorderRadius` to avoid sharp rectangles\n- **Dark-mode friendly**: Default colors use semi-transparent whites that work on any background\n\n## Examples\n\n### Dashboard with Multiple Sections\n\nEach section can have its own independent loading state:\n\n**React**\n\n```tsx\nfunction Dashboard() {\n const [loadingUser, setLoadingUser] = useState(true);\n const [loadingStats, setLoadingStats] = useState(true);\n\n return (\n <>\n {/* User profile section */}\n \n \n \n\n {/* Stats section - with custom colors */}\n \n \n \n \n );\n}\n```\n\n**Vue**\n\n```vue\n\n \n \n \n \n\n \n \n \n \n\n```\n\n**Svelte**\n\n```svelte\n\n \n\n\n\n \n\n```\n\n**Angular**\n\n```typescript\n@Component({\n template: `\n \n \n \n \n\n \n \n \n \n `,\n})\nexport class DashboardComponent {\n loadingUser = signal(true);\n loadingStats = signal(true);\n // ...\n}\n```\n\n### Transactions List\n\n**React**\n\n```tsx\n\n \n\n```\n\n**Vue**\n\n```vue\n\n \n\n```\n\n**Svelte**\n\n```svelte\n\n \n\n```\n\n**Angular**\n\n```typescript\n\n \n\n```\n\n### Team Members Grid\n\n**React**\n\n```tsx\n\n \n\n```\n\n**Vue**\n\n```vue\n\n \n\n```\n\n**Svelte**\n\n```svelte\n\n \n\n```\n\n**Angular**\n\n```typescript\n\n \n\n```\n\n## 🔄 Using with React Suspense\n\nShimmer 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.\n\n### Basic Suspense Pattern\n\n```tsx\nimport { Suspense, lazy } from 'react';\nimport { Shimmer } from 'shimmer-from-structure';\n\nconst UserProfile = lazy(() => import('./UserProfile'));\n\nfunction App() {\n return (\n \n \n \n }\n >\n \n \n );\n}\n```\n\n### Why `loading={true}` is Always Set\n\nWhen using Shimmer as a Suspense fallback:\n\n1. **Suspend**: React renders the fallback → Shimmer shows with `loading={true}`\n2. **Resolve**: React **replaces** the entire fallback with the real component\n3. The Shimmer is **unmounted**, not updated — so you never need to toggle `loading`\n\n### Performance Tips for Suspense\n\n**Memoize the fallback** to prevent re-renders:\n\n```tsx\nconst ShimmerFallback = React.memo(() => (\n \n \n \n));\n\n// Usage\n}>\n \n;\n```\n\n**Keep templates lightweight** — the DOM is measured synchronously via `useLayoutEffect`, so avoid complex logic in your template.\n\n## Global Configuration\n\nYou can set default configuration for your entire app (or specific sections) using the context/provider pattern. This is perfect for maintaining consistent themes without repeating props.\n\n### React (Context API)\n\n```tsx\nimport { Shimmer, ShimmerProvider } from '@shimmer-from-structure/react';\n\nfunction App() {\n return (\n // Set global defaults\n \n \n \n );\n}\n```\n\n### Vue (Provide/Inject)\n\n```vue\n\n\n\n\n \n\n```\n\n### Svelte (setShimmerConfig)\n\n```svelte\n\n\n\n\n```\n\n### Angular (Dependency Injection)\n\n```typescript\n// main.ts or bootstrapApplication\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { provideShimmerConfig } from '@shimmer-from-structure/angular';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideShimmerConfig({\n shimmerColor: 'rgba(56, 189, 248, 0.4)',\n backgroundColor: 'rgba(56, 189, 248, 0.1)',\n duration: 2.5,\n fallbackBorderRadius: 8,\n }),\n ],\n});\n```\n\n### SolidJS (ShimmerProvider)\n\n```tsx\nimport { Shimmer, ShimmerProvider } from '@shimmer-from-structure/solid';\n\nfunction App() {\n return (\n \n \n \n );\n}\n```\n\n---\n\nComponents inside the provider automatically inherit values. You can still override them locally:\n\n**React**\n\n```tsx\n// Inherits blue theme from provider\n\n\n// Overrides provider settings\n\n```\n\n**Vue**\n\n```vue\n\n\n\n\n\n```\n\n**Svelte**\n\n```svelte\n\n\n\n\n\n```\n\n**Angular**\n\n```typescript\n\n\n\n\n\n```\n\n**SolidJS**\n\n```tsx\n\n\n\n\n\n```\n\n### Accessing Config in Hooks/Composables\n\nIf you need to access the current configuration in your own components:\n\n**React**\n\n```tsx\nimport { useShimmerConfig } from 'shimmer-from-structure';\n\nfunction MyComponent() {\n const config = useShimmerConfig();\n return
...
;\n}\n```\n\n**Vue**\n\n```javascript\nimport { useShimmerConfig } from '@shimmer-from-structure/vue';\n\nconst config = useShimmerConfig();\nconsole.log(config.value.backgroundColor);\n```\n\n**Svelte**\n\n```javascript\nimport { getShimmerConfig } from '@shimmer-from-structure/svelte';\n\nconst config = getShimmerConfig();\nconsole.log(config.backgroundColor);\n```\n\n**Angular**\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { injectShimmerConfig } from '@shimmer-from-structure/angular';\n\n@Component({\n selector: 'app-my-component',\n template: `
...
`,\n})\nexport class MyComponent {\n config = injectShimmerConfig();\n}\n```\n\n**SolidJS**\n\n```tsx\nimport { useShimmerConfig } from '@shimmer-from-structure/solid';\n\nfunction MyComponent() {\n const config = useShimmerConfig();\n return
...
;\n}\n```\n\n## Best Practices\n\n### 1. Use `templateProps` for Dynamic Data\n\nWhen your component receives data via props, always provide `templateProps` with mock data that matches the expected structure.\n\n### 2. Match Template Structure to Real Data\n\nEnsure your template data has the same array length and property structure as real data for accurate shimmer layout.\n\n### 3. Use Individual Shimmer Components\n\nWrap each section in its own Shimmer for independent loading states:\n\n```tsx\n// ✅ Good - independent loading\n\n\n\n// ❌ Avoid - all-or-nothing loading\n\n \n \n\n```\n\n### 4. Consider Element Widths\n\nBlock elements like `
`, `
` take full container width. If you want shimmer to match text width:\n\n```css\n.title {\n width: fit-content;\n}\n```\n\n### 5. Provide Container Dimensions\n\nFor async components (like charts), ensure containers have explicit dimensions so shimmer has something to measure.\n\n## ⚡ Performance Considerations\n\n- Measurement happens only when `loading` changes to `true`\n- Uses `useLayoutEffect` for synchronous measurement (no flicker)\n- Minimal re-renders - only updates when loading state or children change\n- Lightweight DOM measurements using native browser APIs\n\n- Lightweight DOM measurements using native browser APIs\n\n## 🛠️ Development\n\nThis is a monorepo managed with npm workspaces. Each package can be built independently:\n\n```bash\n# Install dependencies\nnpm install\n\n# Build all packages\nnpm run build\n\n# Build individual packages\nnpm run build:core\nnpm run build:react\nnpm run build:vue\nnpm run build:svelte\nnpm run build:main\n\n# Run tests\nnpm test\n```\n\n## 📝 License\n\nMIT\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 🐛 Known Limitations\n\n- **Async components**: Components that render asynchronously (like charts using `ResponsiveContainer`) may need explicit container dimensions\n- **Zero-dimension elements**: Elements with `display: none` or zero dimensions won't be captured\n- **SVG internals**: Only the outer `
![](\"avatar.jpg\")
\n