{"_id":"@abdullah-altun/react-animation-library","_rev":"14-020b9ba3f46ef9433d921769b71253ca","name":"@abdullah-altun/react-animation-library","dist-tags":{"latest":"0.1.3"},"versions":{"0.0.1":{"name":"@abdullah-altun/react-animation-library","version":"0.0.1","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun","email":"your-email@example.com"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.0.1","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"89127d2fbd622e919c33969623e631cdc39812a9","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.0.1.tgz","fileCount":21,"integrity":"sha512-hMkz03HomoacKcRNSymMkv3xjPahUACBLOCIpoSvT4l4nqWEWVYNxvV9sQsB97PkMrby03K9/hJzocAENhvxGg==","signatures":[{"sig":"MEYCIQDgmS2VoXRUNK6phoPs4J/CMg19HbUptaihPDVJj/lhYAIhAK1/6waVBwlM0PkubJCaoIGUXZ/ClwFaT+DFhBH1sXMQ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":176100},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/client.d.mts","default":"./dist/client.mjs"},"require":{"types":"./dist/client.d.ts","default":"./dist/client.js"}},"./styles":"./styles/main.scss","./styles.css":"./dist/styles.css","./styles.scss":"./styles/main.scss","./package.json":"./package.json","./styles.min.css":"./dist/styles.min.css","./dist/styles.css":"./dist/styles.css"},"gitHead":"e8e9e530089480024c6ceaa4b513b51865bb5bcb","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup","clean":"rm -rf dist","prebld":"yarn clean && yarn build","test:nextjs":"node test-nextjs-usage.js","build:analyze":"tsup --metafile && npx bundle-analyzer dist/metafile-*.json","prepublishOnly":"yarn clean && yarn build && yarn test:nextjs"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.0.1_1748471780943_0.07629408445003127","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@abdullah-altun/react-animation-library","version":"0.0.2","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun","email":"your-email@example.com"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.0.2","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"8a791f87fe7a953a383d94c3f5f1008afcdd06d0","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.0.2.tgz","fileCount":21,"integrity":"sha512-pBDMI0CErqAh3bqQMKfaYZbEOPQvnAOOby/BoTcJtBw/75rpTnxWttp8MR5Mep2fDh/a9EUGxznv1zMSaAw1OQ==","signatures":[{"sig":"MEYCIQC1D4/R2qCeZ5yqEtNUggaqWpH5ugxtFbe5M5SFIVuCQAIhAKlgKftRGzEuXWgj3h9KWlMuOto8yOwHd9B+/Bj9yfHY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":179584},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/client.d.mts","default":"./dist/client.mjs"},"require":{"types":"./dist/client.d.ts","default":"./dist/client.js"}},"./styles":"./styles/main.scss","./styles.css":"./dist/styles.css","./styles.scss":"./styles/main.scss","./package.json":"./package.json","./styles.min.css":"./dist/styles.min.css","./dist/styles.css":"./dist/styles.css"},"gitHead":"e8e9e530089480024c6ceaa4b513b51865bb5bcb","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup","clean":"rm -rf dist","prebld":"yarn clean && yarn build","test:nextjs":"node test-nextjs-usage.js","build:analyze":"tsup --metafile && npx bundle-analyzer dist/metafile-*.json","prepublishOnly":"yarn clean && yarn build && yarn test:nextjs"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.0.2_1748473461433_0.5782912634968267","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@abdullah-altun/react-animation-library","version":"0.0.3","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun","email":"your-email@example.com"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.0.3","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"d36d8cefa4135f111ac87a1a9e364403a54d8696","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.0.3.tgz","fileCount":21,"integrity":"sha512-q87TNE1OwzYwiCH343ujoSa9X3BTCHRWewwwRRbDtQSXjKYYnwQv87qovUygk2Zp0qX09XNGKSTWibcxiGAcHw==","signatures":[{"sig":"MEUCIGn+2Jdk5kaiLOqZ/cLSO4o596I9EY1S/7hy+5TYTo0LAiEAs4EC3VzEngxh1UatgNMc/tnEM4LZ3U2PeMHIGh8PgVA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":180730},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/client.d.mts","default":"./dist/client.mjs"},"require":{"types":"./dist/client.d.ts","default":"./dist/client.js"}},"./styles":"./styles/main.scss","./styles.css":"./dist/styles.css","./styles.scss":"./styles/main.scss","./package.json":"./package.json","./styles.min.css":"./dist/styles.min.css","./dist/styles.css":"./dist/styles.css"},"gitHead":"d0452383d91ed0d0e24a8dbf1962dbcc0fcd155c","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup","clean":"rm -rf dist","prebld":"yarn clean && yarn build","test:nextjs":"node test-nextjs-usage.js","build:analyze":"tsup --metafile && npx bundle-analyzer dist/metafile-*.json","prepublishOnly":"yarn clean && yarn build && yarn test:nextjs"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.0.3_1748515296105_0.9418975168569006","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@abdullah-altun/react-animation-library","version":"0.0.4","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun","email":"your-email@example.com"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.0.4","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"bcc167740cff569d10cad69541b6265fa7776da3","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.0.4.tgz","fileCount":21,"integrity":"sha512-pnbvvGebq3tarwqCXSx86xpADtFAaxXiU2B8I//jM877YshXprcZ8G5ouzbz8BwgTuff74PYN+mWko6J/a4KuQ==","signatures":[{"sig":"MEYCIQCTnH8LcpX+TZ5SlPVbISsj70wflbaRqkPLwbdsVU59hwIhAKFT6E+KncFsibq/5BFfyzFmyTrfeYuCSASKn2SWJA4s","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":196156},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/client.d.mts","default":"./dist/client.mjs"},"require":{"types":"./dist/client.d.ts","default":"./dist/client.js"}},"./styles":"./styles/main.scss","./styles.css":"./dist/styles.css","./styles.scss":"./styles/main.scss","./package.json":"./package.json","./styles.min.css":"./dist/styles.min.css","./dist/styles.css":"./dist/styles.css"},"gitHead":"d0452383d91ed0d0e24a8dbf1962dbcc0fcd155c","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup","clean":"rm -rf dist","prebld":"yarn clean && yarn build","test:nextjs":"node test-nextjs-usage.js","build:analyze":"tsup --metafile && npx bundle-analyzer dist/metafile-*.json","prepublishOnly":"yarn clean && yarn build && yarn test:nextjs"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.0.4_1748518742597_0.10858995578621067","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@abdullah-altun/react-animation-library","version":"0.0.5","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun","email":"your-email@example.com"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.0.5","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"ccc4a249cb76366028f698df04e39c2a06e1172a","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.0.5.tgz","fileCount":23,"integrity":"sha512-qINCc7PXecBVkKJ93wMs3Y77LnWAGstR06JraQTZMmXFmUFmto3NVt4lCpHAQtWB2o/QgX5ysc3itDyxKe9yag==","signatures":[{"sig":"MEUCIQD82OSb94rO6f72cQXICU6IG01rng+xu35Fe0z0adQwPgIgN9+aDTsOF2W/D596QTJ/nfaBdShkV1zgGx3UhICMd4U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":215449},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/client.d.mts","default":"./dist/client.mjs"},"require":{"types":"./dist/client.d.ts","default":"./dist/client.js"}},"./styles":"./styles/main.scss","./styles.css":"./dist/styles.css","./styles.scss":"./styles/main.scss","./package.json":"./package.json","./styles.min.css":"./dist/styles.min.css","./dist/styles.css":"./dist/styles.css"},"gitHead":"c9aa438a6cf813309143c53eff6597093a741779","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup","clean":"rm -rf dist","prebld":"yarn clean && yarn build","test:nextjs":"node test-nextjs-usage.js","build:analyze":"tsup --metafile && npx bundle-analyzer dist/metafile-*.json","prepublishOnly":"yarn clean && yarn build && yarn test:nextjs"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.0.5_1748547851719_0.5885712705215509","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@abdullah-altun/react-animation-library","version":"0.0.6","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun","email":"your-email@example.com"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.0.6","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"a2dc40f822a3e5457ea2f12ab18e23a2e86f0696","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.0.6.tgz","fileCount":24,"integrity":"sha512-JDN1R7e3ShVPQaoStlzK6RYD0G1fYQkZjt+lrD3sxXvzcKyTVFi4jn6DFsTjRjzMM3wyH2GUXM7fyRnzou/IUA==","signatures":[{"sig":"MEYCIQCLAiUS0fqH0aL266TdUAqzYQ+Oz9HsznFdjj/601mixgIhALK2aomhlwq36+zZkWoVZ1BsbfqA7nCkhNfWLDZ7KSjk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":240467},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/client.d.mts","default":"./dist/client.mjs"},"require":{"types":"./dist/client.d.ts","default":"./dist/client.js"}},"./styles":"./styles/main.scss","./styles.css":"./dist/styles.css","./styles.scss":"./styles/main.scss","./package.json":"./package.json","./styles.min.css":"./dist/styles.min.css","./dist/styles.css":"./dist/styles.css"},"gitHead":"c9aa438a6cf813309143c53eff6597093a741779","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup","clean":"rm -rf dist","prebld":"yarn clean && yarn build","test:nextjs":"node test-nextjs-usage.js","build:analyze":"tsup --metafile && npx bundle-analyzer dist/metafile-*.json","prepublishOnly":"yarn clean && yarn build && yarn test:nextjs"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.0.6_1748550460581_0.84562184610475","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@abdullah-altun/react-animation-library","version":"0.0.7","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.0.7","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"f0f052f6b666e11027f6f296c5c198d17b89e5d9","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.0.7.tgz","fileCount":26,"integrity":"sha512-aiAYZaIGlXfZlU2WqxQ4H+XotrAaWpDu7w7UzrMVRJxO37NxmV7JQ30NM5Gded4DYy0dESKrvyuFLXhqrxEYUA==","signatures":[{"sig":"MEUCIBYNkmgV/z9SglKY0WFqOZK1LWGad9KuyKKWtxPlc5GQAiEA936gyBgZAfVLGIHCkO2zUPRgv9apsiBo0g4DWubz0Uw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":300108},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/client.d.mts","default":"./dist/client.mjs"},"require":{"types":"./dist/client.d.ts","default":"./dist/client.js"}},"./styles":"./styles/main.scss","./styles.css":"./dist/styles.css","./styles.scss":"./styles/main.scss","./package.json":"./package.json","./styles.min.css":"./dist/styles.min.css","./dist/styles.css":"./dist/styles.css"},"gitHead":"224ac71af4b793f0b75b6e2f5a7f2ee6aaea0510","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup","clean":"rm -rf dist","prepublishOnly":"yarn clean && yarn build"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","dependencies":{},"publishConfig":{"access":"public"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.0.7_1748602943139_0.07556374540374877","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@abdullah-altun/react-animation-library","version":"0.1.0","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.1.0","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"be6a5110cf9333746597fd57595824b2e7fee023","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.1.0.tgz","fileCount":7,"integrity":"sha512-F8MTkVDGxlWJY8KefrgwfSRkQsOtd/QM2A0n0uB1+gPVymf2FUHFC6FM+uxDQvqHvnjP4X9ZSpiI0aJJqocHpQ==","signatures":[{"sig":"MEUCIHvtUURz2CNNbF7vToVLnpdHhR5xMjxeHrTw+uFNUssgAiEA8fDCSTVrZP0l058oyqCPOCfci3cyR8hFrqJ7JKPxO4M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89025},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"gitHead":"a2dc8a9457167e8b670998b0ff7403ef6e3a5a03","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup && [ -f dist/index.d.mts ] && mv dist/index.d.mts dist/index.d.ts || true","clean":"rm -rf dist","prepublishOnly":"yarn clean && yarn build"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.1.0_1748642559897_0.6358113905358302","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@abdullah-altun/react-animation-library","version":"0.1.1","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.1.1","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"141acabc97f9a87f3a2d64da88b32008bb63d4f3","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.1.1.tgz","fileCount":4,"integrity":"sha512-teBvwNBBgqfXLbyzuEc/W4TFBZ1TON+7cpQu+Q9obaP422EQmPlDrQZB9LVaZG0aMZWWh2grU6iXubAza55Ihg==","signatures":[{"sig":"MEYCIQD1V2SkJ5essnT3ePog9TDKR840Z/TN7NuNeFHIFd6VCgIhAIigzu2LOVYn0bd9O4eYkNHhVwBVRNpuZtexOHhtAsM9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30422},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"gitHead":"93e1165bb1e7cdfb738b3dba62b62a942515b3e3","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup && [ -f dist/index.d.mts ] && mv dist/index.d.mts dist/index.d.ts || true","clean":"rm -rf dist","prepublishOnly":"yarn clean && yarn build"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.1.1_1748695773720_0.9126229886237442","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@abdullah-altun/react-animation-library","version":"0.1.2","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.1.2","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"d29fbf48ef5e9df02c7ea2a27f651e723fa80860","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.1.2.tgz","fileCount":7,"integrity":"sha512-veKqzx6wQy8tn9YN319UCbmYwiFTYjZ+67AMEE7Ma5W/z628qDvj/JM6LvXhPS6RnFcDlVF1znfgbhyRdcP5lw==","signatures":[{"sig":"MEQCIAgqsfBiR/3d4hiEO92fV1VWdkSgXcHUvVrLoxROIBMuAiAzOkfm7l2RID+LDzaJ+YBVruK0od3KGGd4o6LVh1SGBA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89000},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"gitHead":"88e05e7d25d225cdae8321b98410721413e84aa3","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup && [ -f dist/index.d.mts ] && mv dist/index.d.mts dist/index.d.ts || true","clean":"rm -rf dist","prepublishOnly":"yarn clean && yarn build"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.1.2_1748695962290_0.6799882193317948","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@abdullah-altun/react-animation-library","version":"0.1.3","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"author":{"name":"Abdullah Altun"},"license":"MIT","_id":"@abdullah-altun/react-animation-library@0.1.3","maintainers":[{"name":"abdullah-altun","email":"a.altun70@outlook.com"}],"homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"dist":{"shasum":"317872a123a6390099ccbfb3b35a69cd56639945","tarball":"https://registry.npmjs.org/@abdullah-altun/react-animation-library/-/react-animation-library-0.1.3.tgz","fileCount":6,"integrity":"sha512-wTIC4iAgEp3QV4Unwe/fPGJwRCs6krKI2VbzEzSd9yWbIq0pwMegWbaMHsBvUrfn/OgwZaEKHpv0sRnvzqwrFQ==","signatures":[{"sig":"MEUCIQDdi5Ugz5azQe55ZHwJOfk7/6i4l+OUITq2G6FcuVHTcwIgT1ogVZ0os7UxxkLkF2xLerjfd3Q8OcUyLIDIo1g5inc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83149},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./client":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"gitHead":"cfc2240a95b2b49c04bccc8da5dafc3e5fc9a9d9","scripts":{"dev":"tsup --watch","size":"ls -lah dist/ && echo 'Total package size:' && du -sh dist/","build":"tsup && [ -f dist/index.d.mts ] && mv dist/index.d.mts dist/index.d.ts || true","clean":"rm -rf dist","prepublishOnly":"yarn clean && yarn build"},"_npmUser":{"name":"abdullah-altun","email":"a.altun70@outlook.com"},"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"_npmVersion":"10.9.2","description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","tsup":"^8.2.3","typescript":"^5","@types/node":"^22.15.23","@types/react":"^19.1.0","@types/react-dom":"^19.1.2"},"peerDependencies":{"sass":">=1.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animation-library_0.1.3_1749066358670_0.4233226571083575","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-28T22:36:20.861Z","modified":"2025-06-06T15:28:14.238Z","0.0.1":"2025-05-28T22:36:21.136Z","0.0.2":"2025-05-28T23:04:21.639Z","0.0.3":"2025-05-29T10:41:36.540Z","0.0.4":"2025-05-29T11:39:02.801Z","0.0.5":"2025-05-29T19:44:12.046Z","0.0.6":"2025-05-29T20:27:40.756Z","0.0.7":"2025-05-30T11:02:23.394Z","0.1.0":"2025-05-30T22:02:40.107Z","0.1.1":"2025-05-31T12:49:33.888Z","0.1.2":"2025-05-31T12:52:42.468Z","0.1.3":"2025-06-04T19:45:58.876Z"},"bugs":{"url":"https://github.com/abdullahaltun70/react-animation-library/issues"},"author":{"name":"Abdullah Altun"},"license":"MIT","homepage":"https://github.com/abdullahaltun70/react-animation-library#readme","keywords":["react","typescript","animation","scss","css","nextjs","components","ui","frontend"],"repository":{"url":"git+https://github.com/abdullahaltun70/react-animation-library.git","type":"git"},"description":"Modern React animation library with CSS-based state management, interactive micro-animations, and advanced orchestration","maintainers":[{"email":"a.altun70@outlook.com","name":"abdullah-altun"},{"email":"framna.npm@gmail.com","name":"framna"}],"readme":"# React Animation Library\n\n[![npm version](https://img.shields.io/npm/v/@abdullah-altun/react-animation-library.svg)](https://www.npmjs.com/package/@abdullah-altun/react-animation-library)\n[![license](https://img.shields.io/npm/l/@abdullah-altun/react-animation-library.svg)](https://github.com/abdullahaltun70/react-animation-library/blob/main/LICENSE)\n\nA comprehensive, high-performance animation library for React applications. Built with modern CSS, TypeScript, and accessibility in mind. From simple entrance animations to complex sequences and state-based interactions.\n\n## 🚀 Features\n\n- **🎯 Multiple Animation Systems:** Traditional hooks, modern CSS-based, sequences, staggered, and state-based\n- **⚡ High Performance:** CSS-based animations with hardware acceleration and zero-dependency approach\n- **🎨 Rich Animation Types:** Fade, slide, scale, rotate, bounce with multi-animation support\n- **🔧 Advanced Controls:** Dynamic timing, easing, triggers, and orchestration\n- **♿ Accessibility First:** Respects `prefers-reduced-motion` with fallbacks\n- **🎭 State Integration:** Perfect for Radix UI, Headless UI, and other component libraries\n- **🖱️ Interactive Animations:** Built-in hover, focus, and click micro-interactions\n- **📱 Framework Agnostic:** Works with Next.js, Vite, CRA, and any React setup\n- **🔄 Server Compatible:** SSR-friendly components with CSS-only animations\n- **📦 TypeScript:** Fully typed with comprehensive IntelliSense support\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Core Components](#core-components)\n  - [Animate](#animate)\n  - [ModernAnimate](#modernanimate)\n  - [StateBasedAnimate](#statebasedanimate)\n  - [RadixAnimate](#radixanimate)\n  - [ServerAnimate](#serveranimate)\n  - [SequenceAnimate](#sequenceanimate)\n  - [StaggeredAnimate](#staggeredanimate)\n  - [InteractiveAnimate](#interactiveanimate)\n- [Hooks](#hooks)\n  - [useAnimation](#useanimation)\n  - [useModernAnimation](#usemodernanimation)\n  - [useAnimationSequence](#useanimationsequence)\n  - [useStaggeredAnimation](#usestaggeredanimation)\n- [Animation Types](#animation-types)\n- [Advanced Features](#advanced-features)\n- [TypeScript Support](#typescript-support)\n- [Framework Integration](#framework-integration)\n- [Performance & Accessibility](#performance--accessibility)\n- [API Reference](#api-reference)\n\n## Quick Start\n\n### Installation\n\n```bash\nnpm install @abdullah-altun/react-animation-library\n# or\nyarn add @abdullah-altun/react-animation-library\n# or\npnpm add @abdullah-altun/react-animation-library\n```\n\n### Import Styles\n\nAdd the CSS to your application. The method depends on your framework:\n\n#### Next.js (App Router)\n\n```css\n/* app/globals.css */\n@import \"@abdullah-altun/react-animation-library/styles.css\";\n```\n\n#### Next.js (Pages Router)\n\n```css\n/* pages/_app.js or styles/globals.css */\n@import \"@abdullah-altun/react-animation-library/styles.css\";\n```\n\n#### Vite/CRA\n\n```css\n/* src/index.css or src/App.css */\n@import \"@abdullah-altun/react-animation-library/styles.css\";\n```\n\n### Basic Usage\n\n```tsx\nimport { Animate } from \"@abdullah-altun/react-animation-library\";\n\nfunction MyComponent() {\n  return (\n    <div>\n      <Animate type=\"fade\" duration={0.8}>\n        <h1>Fade In Title</h1>\n      </Animate>\n\n      <Animate type=\"slide\" axis=\"y\" distance={30}>\n        <p>Slide up from bottom</p>\n      </Animate>\n\n      <Animate type=\"scale\" scale={0.8} delay={0.2}>\n        <button>Scale in button</button>\n      </Animate>\n    </div>\n  );\n}\n```\n\n## Core Components\n\n### Animate\n\nThe foundational animation component for simple, declarative animations.\n\n```tsx\nimport { Animate } from \"@abdullah-altun/react-animation-library\";\n\n// Basic fade animation\n<Animate type=\"fade\" duration={0.6}>\n  <div>Content that fades in</div>\n</Animate>\n\n// Slide with custom distance and axis\n<Animate\n  type=\"slide\"\n  axis=\"y\"\n  distance={50}\n  easing=\"cubic-bezier(0.4, 0, 0.2, 1)\"\n>\n  <div>Slides up from bottom</div>\n</Animate>\n\n// Scale with custom start scale\n<Animate type=\"scale\" scale={0.5} duration={0.8}>\n  <div>Scales from 50% to 100%</div>\n</Animate>\n\n// Rotation with specific degrees\n<Animate type=\"rotate\" degrees={{ start: 0, end: 180 }}>\n  <div>Rotates 180 degrees</div>\n</Animate>\n```\n\n**Props:**\n\n- `type`: `\"fade\" | \"slide\" | \"scale\" | \"rotate\" | \"bounce\"`\n- `duration`: Animation duration in seconds (default: 0.5)\n- `delay`: Delay before animation starts (default: 0)\n- `easing`: CSS easing function (default: \"ease-out\")\n- `distance`: Distance for slide/bounce animations (default: 50px)\n- `degrees`: Rotation degrees (number or {start, end} object)\n- `scale`: Scale factor for scale animations (default: 0.8)\n- `opacity`: Opacity settings {start, end} (default: {start: 0, end: 1})\n- `axis`: Axis for slide animations (\"x\" | \"y\", default: \"x\")\n- `as`: HTML element or component to render as (default: \"div\")\n- `onAnimationComplete`: Callback when animation finishes\n\n### ModernAnimate\n\nAdvanced animation component with multiple animation types, triggers, and CSS custom properties.\n\n```tsx\nimport { ModernAnimate } from \"@abdullah-altun/react-animation-library\";\n\n// Single animation with visibility trigger\n<ModernAnimate\n  config={{\n    type: 'fade',\n    duration: 0.6,\n    trigger: 'visible',\n    easing: 'cubic-bezier(0.4, 0, 0.2, 1)'\n  }}\n>\n  <div>Fades in when visible</div>\n</ModernAnimate>\n\n// Multiple animations combined\n<ModernAnimate\n  config={{\n    type: ['fade', 'scale', 'slide'],\n    duration: [0.5, 0.8, 0.6],\n    delay: [0, 0.1, 0.2],\n    axis: 'y',\n    distance: 30,\n    scale: { start: 0.8, end: 1 }\n  }}\n>\n  <div>Complex multi-animation</div>\n</ModernAnimate>\n\n// Trigger-based animation\n<ModernAnimate\n  config={{\n    type: 'bounce',\n    trigger: 'hover',\n    duration: 0.3,\n    iterationCount: 2\n  }}\n>\n  <button>Bounces on hover</button>\n</ModernAnimate>\n```\n\n**Key Features:**\n\n- **Multiple Animation Types**: Combine animations like `['fade', 'scale', 'slide']`\n- **Triggers**: `'mount' | 'visible' | 'hover' | 'focus' | 'click' | 'scroll' | 'manual'`\n- **Advanced Timing**: Array support for duration, delay, easing per animation\n- **Accessibility**: Built-in `prefers-reduced-motion` support\n- **Performance**: Uses CSS custom properties for dynamic control\n\n### StateBasedAnimate\n\nPerfect for component libraries like Radix UI. Automatically animates based on parent state changes.\n\n```tsx\nimport StateBasedAnimate from \"@abdullah-altun/react-animation-library\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\n\n// Rotating chevron based on accordion state\n<AccordionPrimitive.Trigger>\n  <span>Accordion Title</span>\n  <StateBasedAnimate animationType=\"rotate\" degrees={180}>\n    <ChevronDownIcon />\n  </StateBasedAnimate>\n</AccordionPrimitive.Trigger>\n\n// Sliding content based on collapsible state\n<StateBasedAnimate animationType=\"slide-down\" distance={200}>\n  <AccordionPrimitive.Content>\n    <div>Content that slides down when opened</div>\n  </AccordionPrimitive.Content>\n</StateBasedAnimate>\n\n// Custom trigger state\n<StateBasedAnimate\n  animationType=\"fade\"\n  triggerState=\"active\"\n  stateSelector=\"[data-state]\"\n>\n  <div>Fades based on active state</div>\n</StateBasedAnimate>\n```\n\n**Animation Types:**\n\n- `\"rotate\"`: Rotates element (perfect for chevrons, arrows)\n- `\"slide-down\"`: Slides content down (accordion content)\n- `\"slide-up\"`: Slides content up\n- `\"fade\"`: Fades in/out based on state\n- `\"scale\"`: Scales element based on state\n\n### RadixAnimate\n\nOptimized specifically for Radix UI components with pre-configured animations.\n\n```tsx\nimport RadixAnimate from \"@abdullah-altun/react-animation-library\";\n\n// Accordion chevron rotation\n<AccordionPrimitive.Trigger>\n  <span>Title</span>\n  <RadixAnimate animationType=\"rotate\" degrees={180}>\n    <ChevronDownIcon />\n  </RadixAnimate>\n</AccordionPrimitive.Trigger>\n\n// Accordion content with height handling\n<RadixAnimate animationType=\"accordion-content\">\n  <AccordionPrimitive.Content>\n    <div className=\"p-4\">\n      Content with automatic height transitions\n    </div>\n  </AccordionPrimitive.Content>\n</RadixAnimate>\n```\n\n**Pre-configured Animations:**\n\n- `\"rotate\"`: Optimized chevron rotation\n- `\"accordion-content\"`: Height-aware content transitions\n- `\"fade\"`: State-based fade transitions\n- `\"scale\"`: Smooth scaling effects\n\n### ServerAnimate\n\nServer-side rendering compatible animations using CSS-only techniques.\n\n```tsx\nimport { ServerAnimate } from \"@abdullah-altun/react-animation-library\";\n\n// External state management\n<ServerAnimate type=\"rotate\" state={isOpen ? 'open' : 'closed'}>\n  <ChevronIcon />\n</ServerAnimate>\n\n// Self-contained with details/summary\n<ServerAnimate\n  type=\"slide-down\"\n  selfContained={{\n    method: 'details',\n    trigger: <span>Click to expand</span>,\n    content: <div>Content that slides down</div>,\n    defaultOpen: false\n  }}\n/>\n\n// Self-contained with checkbox\n<ServerAnimate\n  type=\"slide-up\"\n  selfContained={{\n    method: 'checkbox',\n    trigger: <label>Toggle Content</label>,\n    content: <div>Hidden content</div>,\n    id: 'unique-toggle'\n  }}\n/>\n```\n\n**Features:**\n\n- **No JavaScript Required**: Pure CSS animations\n- **Self-Contained**: Built-in state management with `<details>` or checkbox\n- **External State**: Works with any state management\n- **SSR Safe**: Perfect for server-side rendering\n\n### SequenceAnimate\n\nOrchestrate complex multi-step animation sequences.\n\n```tsx\nimport { SequenceAnimate } from \"@abdullah-altun/react-animation-library\";\n\nconst complexSequence = {\n  name: \"entrance-sequence\",\n  steps: [\n    {\n      animations: [{ type: \"fade\", duration: 0.3 }],\n      parallel: false,\n    },\n    {\n      animations: [\n        { type: \"slide\", axis: \"y\", distance: 30, duration: 0.4 },\n        { type: \"scale\", scale: 0.9, duration: 0.4 },\n      ],\n      parallel: true,\n      delay: 0.2,\n    },\n    {\n      animations: [{ type: \"bounce\", duration: 0.6 }],\n      delay: 0.1,\n    },\n  ],\n  repeat: 1,\n  onComplete: () => console.log(\"Sequence complete\"),\n  onStepComplete: (step) => console.log(`Step ${step} complete`),\n};\n\n<SequenceAnimate sequence={complexSequence} autoStart>\n  <div>Element with complex entrance sequence</div>\n</SequenceAnimate>;\n```\n\n### StaggeredAnimate\n\nCreate staggered animations across multiple child elements.\n\n```tsx\nimport { StaggeredAnimate } from \"@abdullah-altun/react-animation-library\";\n\n<StaggeredAnimate\n  itemAnimation={{ type: 'fade', duration: 0.3 }}\n  staggerDelay={0.1}\n  staggerDirection=\"forward\"\n  autoStart\n>\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n  <div>Item 4</div>\n</StaggeredAnimate>\n\n// Advanced staggered animation\n<StaggeredAnimate\n  itemAnimation={{\n    type: ['fade', 'slide'],\n    axis: 'y',\n    duration: 0.4,\n    distance: 20\n  }}\n  staggerDelay={0.15}\n  staggerDirection=\"center-out\"\n  maxConcurrent={3}\n>\n  {items.map((item, index) => (\n    <div key={index}>{item.content}</div>\n  ))}\n</StaggeredAnimate>\n```\n\n**Stagger Directions:**\n\n- `\"forward\"`: Animates from first to last element\n- `\"reverse\"`: Animates from last to first element\n- `\"center-out\"`: Animates from center elements outward\n\n### InteractiveAnimate\n\nMicro-interactions for hover, focus, and click states using pure CSS.\n\n```tsx\nimport { InteractiveAnimate } from \"@abdullah-altun/react-animation-library\";\n\n<InteractiveAnimate\n  hoverConfig={{\n    type: 'scale',\n    scale: { start: 1, end: 1.05 },\n    duration: 0.2\n  }}\n  clickConfig={{\n    type: 'scale',\n    scale: { start: 1, end: 0.95 },\n    duration: 0.1\n  }}\n  className=\"interactive-button\"\n>\n  <button>Interactive Button</button>\n</InteractiveAnimate>\n\n// Complex hover effects\n<InteractiveAnimate\n  hoverConfig={{\n    type: ['scale', 'rotate'],\n    scale: { start: 1, end: 1.1 },\n    degrees: 5,\n    duration: 0.3\n  }}\n  focusConfig={{\n    type: 'scale',\n    scale: { start: 1, end: 1.02 }\n  }}\n>\n  <div className=\"card\">Hover and focus me</div>\n</InteractiveAnimate>\n```\n\n## Hooks\n\n### useAnimation\n\nLow-level hook for custom animation implementation.\n\n```tsx\nimport { useAnimation } from \"@abdullah-altun/react-animation-library\";\n\nfunction CustomComponent() {\n  const { ref, replay, key } = useAnimation(\n    {\n      type: \"fade\",\n      duration: 0.6,\n      easing: \"ease-out\",\n    },\n    (event) => {\n      console.log(\"Animation completed\");\n    }\n  );\n\n  return (\n    <div>\n      <div ref={ref} key={key}>\n        Animated content\n      </div>\n      <button onClick={replay}>Replay Animation</button>\n    </div>\n  );\n}\n```\n\n### useModernAnimation\n\nAdvanced hook with state management and multiple triggers.\n\n```tsx\nimport { useModernAnimation } from \"@abdullah-altun/react-animation-library\";\n\nfunction AdvancedComponent() {\n  const { ref, trigger, pause, resume, restart, cancel, state } =\n    useModernAnimation({\n      type: [\"fade\", \"scale\"],\n      duration: [0.4, 0.6],\n      trigger: \"manual\",\n      onComplete: () => console.log(\"Done!\"),\n    });\n\n  return (\n    <div>\n      <div ref={ref}>Content</div>\n      <button onClick={() => trigger()}>Start</button>\n      <button onClick={pause}>Pause</button>\n      <button onClick={resume}>Resume</button>\n      <p>State: {state}</p>\n    </div>\n  );\n}\n```\n\n### useAnimationSequence\n\nHook for managing complex animation sequences.\n\n```tsx\nimport { useAnimationSequence } from \"@abdullah-altun/react-animation-library\";\n\nfunction SequenceComponent() {\n  const sequence = {\n    name: \"complex-entrance\",\n    steps: [\n      { animations: [{ type: \"fade\", duration: 0.3 }] },\n      { animations: [{ type: \"slide\", duration: 0.4 }], delay: 0.2 },\n    ],\n  };\n\n  const {\n    ref,\n    currentStep,\n    totalSteps,\n    state,\n    start,\n    pause,\n    restart,\n    goToStep,\n  } = useAnimationSequence(sequence);\n\n  return (\n    <div>\n      <div ref={ref}>Sequenced content</div>\n      <div>\n        Step {currentStep + 1} of {totalSteps} - Status: {state}\n      </div>\n      <button onClick={start}>Start</button>\n      <button onClick={() => goToStep(1)}>Go to Step 2</button>\n    </div>\n  );\n}\n```\n\n### useStaggeredAnimation\n\nHook for staggered animations across multiple elements.\n\n```tsx\nimport { useStaggeredAnimation } from \"@abdullah-altun/react-animation-library\";\n\nfunction StaggeredComponent() {\n  const { refs, trigger, pause, restart } = useStaggeredAnimation(\n    {\n      animations: [{ type: \"fade\", duration: 0.3 }],\n      delay: 0.1,\n      direction: \"forward\",\n    },\n    5\n  ); // 5 elements\n\n  return (\n    <div>\n      {refs.map((ref, index) => (\n        <div key={index} ref={ref}>\n          Item {index + 1}\n        </div>\n      ))}\n      <button onClick={trigger}>Trigger Stagger</button>\n    </div>\n  );\n}\n```\n\n## Animation Types\n\n### Basic Types\n\n- **`fade`**: Opacity transitions from 0 to 1\n- **`slide`**: Translate movement along x or y axis\n- **`scale`**: Size transformations from smaller to normal\n- **`rotate`**: Rotation transformations\n- **`bounce`**: Spring-like bounce effects\n\n### Multi-Animation Support\n\nCombine multiple animation types for complex effects:\n\n```tsx\n// Fade + Scale + Slide simultaneously\n<ModernAnimate\n  config={{\n    type: [\"fade\", \"scale\", \"slide\"],\n    axis: \"y\",\n    distance: 20,\n    scale: { start: 0.9, end: 1 },\n    duration: [0.4, 0.6, 0.5],\n  }}\n>\n  <div>Multi-animation element</div>\n</ModernAnimate>\n```\n\n## Advanced Features\n\n### Responsive Animations\n\n```tsx\n<ModernAnimate\n  config={{\n    type: \"slide\",\n    distance: 50,\n    mediaQueries: {\n      \"(max-width: 768px)\": {\n        distance: 20,\n        duration: 0.3,\n      },\n      \"(prefers-reduced-motion: reduce)\": {\n        type: \"fade\",\n        duration: 0.1,\n      },\n    },\n  }}\n>\n  <div>Responsive animation</div>\n</ModernAnimate>\n```\n\n### Conditional Animations\n\n```tsx\n<ModernAnimate\n  config={{\n    type: \"bounce\",\n    condition: () => window.innerWidth > 1024,\n    reduceMotionFallback: { type: \"fade\", duration: 0.2 },\n  }}\n>\n  <div>Conditional bounce animation</div>\n</ModernAnimate>\n```\n\n### Performance Optimizations\n\n```tsx\n<ModernAnimate\n  config={{\n    type: \"scale\",\n    willChange: \"transform\",\n    transform3d: true, // Forces hardware acceleration\n    respectReducedMotion: true,\n  }}\n>\n  <div>Performance optimized animation</div>\n</ModernAnimate>\n```\n\n## Framework Integration\n\n### Next.js Integration\n\n```tsx\n// app/layout.tsx\nimport \"@abdullah-altun/react-animation-library/styles.css\";\n\n// pages/_app.tsx (Pages Router)\nimport \"@abdullah-altun/react-animation-library/styles.css\";\n\n// Component usage\n\nimport { Animate } from \"@abdullah-altun/react-animation-library\";\n\nexport default function Page() {\n  return (\n    <Animate type=\"fade\">\n      <h1>Animated Title</h1>\n    </Animate>\n  );\n}\n```\n\n### Radix UI Integration\n\n```tsx\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport StateBasedAnimate from \"@abdullah-altun/react-animation-library\";\n\n<AccordionPrimitive.Root>\n  <AccordionPrimitive.Item>\n    <AccordionPrimitive.Trigger>\n      <span>Trigger</span>\n      <StateBasedAnimate animationType=\"rotate\" degrees={180}>\n        <ChevronDownIcon />\n      </StateBasedAnimate>\n    </AccordionPrimitive.Trigger>\n\n    <StateBasedAnimate animationType=\"slide-down\">\n      <AccordionPrimitive.Content>\n        <div>Animated content</div>\n      </AccordionPrimitive.Content>\n    </StateBasedAnimate>\n  </AccordionPrimitive.Item>\n</AccordionPrimitive.Root>;\n```\n\n## Performance & Accessibility\n\n### Reduced Motion Support\n\nThe library automatically respects the `prefers-reduced-motion` media query:\n\n```css\n/* Automatic behavior */\n@media (prefers-reduced-motion: reduce) {\n  .animation-fade {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n### Custom Reduced Motion Handling\n\n```tsx\n<ModernAnimate\n  config={{\n    type: \"bounce\",\n    respectReducedMotion: true,\n    reduceMotionFallback: {\n      type: \"fade\",\n      duration: 0.1,\n    },\n  }}\n>\n  <div>Accessible animation</div>\n</ModernAnimate>\n```\n\n### Performance Best Practices\n\n1. **Use CSS-based animations** for better performance\n2. **Prefer `transform` properties** over layout-affecting properties\n3. **Use `will-change`** for elements that will animate\n4. **Enable hardware acceleration** with `transform3d: true`\n5. **Minimize reflows** by avoiding width/height animations\n\n## TypeScript Support\n\n### Core Types\n\n```typescript\nimport type {\n  AnimationConfig,\n  ModernAnimationConfig,\n  AnimationSequence,\n  AnimationState,\n  AnimationTrigger,\n} from \"@abdullah-altun/react-animation-library\";\n\n// Basic animation configuration\nconst config: AnimationConfig = {\n  type: \"fade\",\n  duration: 0.6,\n  easing: \"ease-out\",\n};\n\n// Modern animation configuration\nconst modernConfig: ModernAnimationConfig = {\n  type: [\"fade\", \"scale\"],\n  duration: [0.4, 0.6],\n  trigger: \"visible\",\n  iterationCount: 2,\n};\n\n// Animation sequence\nconst sequence: AnimationSequence = {\n  name: \"complex-entrance\",\n  steps: [{ animations: [{ type: \"fade\", duration: 0.3 }] }],\n};\n```\n\n### Component Ref Types\n\n```typescript\nimport type {\n  ModernAnimateRef,\n  SequenceAnimateRef,\n} from \"@abdullah-altun/react-animation-library\";\n\nconst modernRef = useRef<ModernAnimateRef>(null);\nconst sequenceRef = useRef<SequenceAnimateRef>(null);\n\n// Access methods\nmodernRef.current?.trigger();\nsequenceRef.current?.goToStep(2);\n```\n\n## API Reference\n\n### Animation Configuration\n\n```typescript\ninterface AnimationConfig {\n  type: \"fade\" | \"slide\" | \"scale\" | \"rotate\" | \"bounce\";\n  duration?: number;\n  delay?: number;\n  easing?: string;\n  distance?: number;\n  degrees?: number | { start?: number; end: number };\n  scale?: number;\n  opacity?: { start?: number; end?: number };\n  axis?: \"x\" | \"y\";\n  animateOnMount?: boolean;\n}\n\ninterface ModernAnimationConfig {\n  type: AnimationType | AnimationType[];\n  duration?: number | number[];\n  delay?: number | number[];\n  easing?: string | string[];\n  trigger?:\n    | \"mount\"\n    | \"visible\"\n    | \"hover\"\n    | \"focus\"\n    | \"click\"\n    | \"scroll\"\n    | \"manual\";\n  state?: \"idle\" | \"animating\" | \"paused\" | \"completed\" | \"error\";\n  direction?: \"normal\" | \"reverse\" | \"alternate\" | \"alternate-reverse\";\n  fillMode?: \"none\" | \"forwards\" | \"backwards\" | \"both\";\n  iterationCount?: number | \"infinite\";\n  respectReducedMotion?: boolean;\n  reduceMotionFallback?: Partial<ModernAnimationConfig>;\n  onStart?: () => void;\n  onComplete?: () => void;\n  onIteration?: () => void;\n  onCancel?: () => void;\n}\n```\n\n### Component Props\n\nAll components support standard HTML div props plus their specific animation props. See individual component sections for detailed prop interfaces.\n\n### Hook Returns\n\n```typescript\n// useAnimation\ninterface UseAnimationReturn<T extends HTMLElement> {\n  ref: React.RefObject<T | null>;\n  key: number;\n  replay: () => void;\n}\n\n// useModernAnimation\ninterface UseModernAnimationReturn<T extends HTMLElement> {\n  ref: React.RefObject<T | null>;\n  trigger: (triggerType?: AnimationTrigger) => void;\n  pause: () => void;\n  resume: () => void;\n  restart: () => void;\n  cancel: () => void;\n  state: AnimationState;\n}\n```\n\n---\n\n## License\n\nMIT © [Abdullah Altun](https://github.com/abdullahaltun70)\n\n## Contributing\n\nContributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) and feel free to submit issues and pull requests.\n\n## Support\n\n- 📖 [Documentation](https://github.com/abdullahaltun70/react-animation-library)\n- 🐛 [Issues](https://github.com/abdullahaltun70/react-animation-library/issues)\n- 💬 [Discussions](https://github.com/abdullahaltun70/react-animation-library/discussions)\n","readmeFilename":"README.md"}