{"_id":"@asafarim/react-privacy-consent","_rev":"9-8d1159a812ec38fd97659e3fd742fb13","name":"@asafarim/react-privacy-consent","dist-tags":{"latest":"1.7.2"},"versions":{"1.0.0":{"name":"@asafarim/react-privacy-consent","version":"1.0.0","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","_id":"@asafarim/react-privacy-consent@1.0.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://bibliography.asafarim.com/privacy-consent/demo","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"dist":{"shasum":"b467bc1a78dd8461c9a599b8e512ad8bb1692b2a","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.0.0.tgz","fileCount":10,"integrity":"sha512-ti7hzypmgL9g4iQoqYMXfUEtleuvGKSJqz4XRYFzSbXc/jzpV8YT6OEkYPfVMdD1NIMhcRT8KuBBU+t9cNGVHQ==","signatures":[{"sig":"MEUCIBWNlqg/PzRbAAqFnVZBARb1tAMCW+exnFJg2mTLhLskAiEA4NLKFqqucVWFgPKXJvsCY3f6a2wsUgWiokfEDUHc82Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":179398},"main":"dist/index.js","_from":"file:asafarim-react-privacy-consent-1.0.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup && cp src/styles.css dist/","clean":"rm -rf dist","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage"},"_npmUser":{"name":"asafarim.be","actor":{"name":"asafarim.be","type":"user","email":"asafarim.it@gmail.com"},"email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\c1ea11d3c99e2265acea20e8ffc5b632\\asafarim-react-privacy-consent-1.0.0.tgz","_integrity":"sha512-ti7hzypmgL9g4iQoqYMXfUEtleuvGKSJqz4XRYFzSbXc/jzpV8YT6OEkYPfVMdD1NIMhcRT8KuBBU+t9cNGVHQ==","repository":{"url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git","type":"git"},"_npmVersion":"10.8.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tsup":"^8.0.0","eslint":"^8.57.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-privacy-consent_1.0.0_1750763448508_0.9521744601687354","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@asafarim/react-privacy-consent","version":"1.2.0","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","_id":"@asafarim/react-privacy-consent@1.2.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://bibliography.asafarim.com/privacy-consent/demo","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"dist":{"shasum":"83d5b56916fe2df23dcd3bd18759ddb3a3b1a34b","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.2.0.tgz","fileCount":15,"integrity":"sha512-j3Gtu9bx2o2X5lewK+celHi9+64TpNwtqDTgX/H3YdJGS3gMFqCTxLkBWzfsWAFD/D8Zps+6eA1OT2rq9WOdOw==","signatures":[{"sig":"MEQCIBEcWJURgPWEe+US7AEIH8d422aIFXd48wyuvuuxapllAiBZggf6DoZDg+cJALraSnOeJiX2qTXXXOhpRqvI0KslCw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1220253},"main":"dist/index.js","_from":"file:asafarim-react-privacy-consent-1.2.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css","./src/assets/*.*":"./src/assets/*.*"},"scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup && cp src/styles.css dist/ && cp -r src/assets dist/","clean":"rm -rf dist","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage"},"_npmUser":{"name":"asafarim.be","actor":{"name":"asafarim.be","type":"user","email":"asafarim.it@gmail.com"},"email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\d1cb056371470ef7eeb5c8d31629bc06\\asafarim-react-privacy-consent-1.2.0.tgz","_integrity":"sha512-j3Gtu9bx2o2X5lewK+celHi9+64TpNwtqDTgX/H3YdJGS3gMFqCTxLkBWzfsWAFD/D8Zps+6eA1OT2rq9WOdOw==","repository":{"url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git","type":"git"},"_npmVersion":"10.8.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tsup":"^8.0.0","eslint":"^8.57.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-privacy-consent_1.2.0_1750767913873_0.3823736126777617","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@asafarim/react-privacy-consent","version":"1.3.0","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","_id":"@asafarim/react-privacy-consent@1.3.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://bibliography.asafarim.com/react-privacy-consent/demo","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"dist":{"shasum":"e1eec756044b46cecf51deafea009bfdcaffa6e5","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.3.0.tgz","fileCount":15,"integrity":"sha512-/IQNj6fycmrsyPceF2V8l09vPV/tvHqoqMVo0wxBUVPdm8RAVYJ12sFHAw8IEb9hPJi5YwjBRbjrCI4OOUyglA==","signatures":[{"sig":"MEUCIQDlDsg8xP2zIJkPKHHTSuTio33zvHXcd0R7NTggbZUjGwIgXYOWawVVSGw4nDiCKXHRWotq+2QuXKPCcLUR6/Z6CUk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1220301},"main":"dist/index.js","_from":"file:asafarim-react-privacy-consent-1.3.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css","./src/assets/*.*":"./src/assets/*.*"},"scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup && cp src/styles.css dist/ && cp -r src/assets dist/","clean":"rm -rf dist","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage"},"_npmUser":{"name":"asafarim.be","actor":{"name":"asafarim.be","type":"user","email":"asafarim.it@gmail.com"},"email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\bea7a52e5b8441a7fe1a529a95f4e022\\asafarim-react-privacy-consent-1.3.0.tgz","_integrity":"sha512-/IQNj6fycmrsyPceF2V8l09vPV/tvHqoqMVo0wxBUVPdm8RAVYJ12sFHAw8IEb9hPJi5YwjBRbjrCI4OOUyglA==","repository":{"url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git","type":"git"},"_npmVersion":"10.8.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tsup":"^8.0.0","eslint":"^8.57.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-privacy-consent_1.3.0_1750769262707_0.49692598014057454","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"@asafarim/react-privacy-consent","version":"1.4.0","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","_id":"@asafarim/react-privacy-consent@1.4.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://bibliography.asafarim.com/react-privacy-consent/demo","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"dist":{"shasum":"ad3d0df6454f50fd60f90ae83717e31c6cd9308d","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.4.0.tgz","fileCount":15,"integrity":"sha512-GbmlWVzA7UqlDXEf8aJs5Q1UVTf/UIqrpe1Cmsbvc+VrGIKee0K7nFwG2KrqYgkDsmRIyOM0NlVvItB4uXc7/Q==","signatures":[{"sig":"MEYCIQChfG4e+SiWhsxBvkoKm6OyKTjk/nEcQOFgS2r7kDbEMQIhALc7C8j9Vmr+gLZRnGO4GbDYBS4gdlmj40Tr3QlREFQp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1256535},"main":"dist/index.js","_from":"file:asafarim-react-privacy-consent-1.4.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css","./src/assets/*.*":"./src/assets/*.*"},"scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup && cp src/styles.css dist/ && cp -r src/assets dist/","clean":"rm -rf dist","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage"},"_npmUser":{"name":"asafarim.be","actor":{"name":"asafarim.be","type":"user","email":"asafarim.it@gmail.com"},"email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\fbf2b0a024886bf9d9faa180e3ca5f59\\asafarim-react-privacy-consent-1.4.0.tgz","_integrity":"sha512-GbmlWVzA7UqlDXEf8aJs5Q1UVTf/UIqrpe1Cmsbvc+VrGIKee0K7nFwG2KrqYgkDsmRIyOM0NlVvItB4uXc7/Q==","repository":{"url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git","type":"git"},"_npmVersion":"10.8.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tsup":"^8.0.0","eslint":"^8.57.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-privacy-consent_1.4.0_1750858870909_0.08003950710429186","host":"s3://npm-registry-packages-npm-production"}},"1.5.0":{"name":"@asafarim/react-privacy-consent","version":"1.5.0","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","_id":"@asafarim/react-privacy-consent@1.5.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://bibliography.asafarim.com/react-privacy-consent/demo","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"dist":{"shasum":"fb266d6e8304130c90e6f3314cae8b063645582c","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.5.0.tgz","fileCount":35,"integrity":"sha512-CjzhwWti7pIFMG6LjCEVTj/R3p4JMUp0uYizXNz1FzKdCmSL6mYxxfYL2hGwl1ONvPCBk0CMmewGRLtipDqztA==","signatures":[{"sig":"MEYCIQCA9lVoaMOHyn9LPC5KKoBiTynyE9pIl7zjPwPvXOiwAwIhAOtHVMTJC2QKe2kewpUkjna128fmfI1X2al8pRG7Lt8d","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1297022},"main":"dist/index.js","_from":"file:asafarim-react-privacy-consent-1.5.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./demo":"./demo","./styles.css":"./dist/styles.css","./src/assets/*.*":"./src/assets/*.*"},"scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup && cp src/styles.css dist/ && cp -r src/assets dist/ && robocopy demo dist/demo /E /XD node_modules || exit 0","clean":"rm -rf dist","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage"},"_npmUser":{"name":"asafarim.be","actor":{"name":"asafarim.be","type":"user","email":"asafarim.it@gmail.com"},"email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\c496f75d422291163ca54d5c78db4aad\\asafarim-react-privacy-consent-1.5.0.tgz","_integrity":"sha512-CjzhwWti7pIFMG6LjCEVTj/R3p4JMUp0uYizXNz1FzKdCmSL6mYxxfYL2hGwl1ONvPCBk0CMmewGRLtipDqztA==","repository":{"url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git","type":"git"},"_npmVersion":"10.8.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tsup":"^8.0.0","eslint":"^8.57.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-privacy-consent_1.5.0_1750863033379_0.6174532363149612","host":"s3://npm-registry-packages-npm-production"}},"1.6.0":{"name":"@asafarim/react-privacy-consent","version":"1.6.0","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","_id":"@asafarim/react-privacy-consent@1.6.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://bibliography.asafarim.com/react-privacy-consent/demo","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"dist":{"shasum":"8e0a63d6bd374cab7be6ea70d08fd1bb50c15036","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.6.0.tgz","fileCount":35,"integrity":"sha512-iAqwhxrizsKBEEYf+JgheplYmYG7ketjVjoy59Mj/dOfgjdCzMAHrRnFqayqKTiDucp5atQvNkj/6T4lZp6zjA==","signatures":[{"sig":"MEUCIQC4uMEkfOlerLs1a3pmJzRGnHN/liR+1b2MRo593u/Y/gIgGmblVERpvPpyDeAzQknGZR+kZWJcyCiopQoMTdFNI7M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1297022},"main":"dist/index.js","_from":"file:asafarim-react-privacy-consent-1.6.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./demo":"./demo","./styles.css":"./dist/styles.css","./src/assets/*.*":"./src/assets/*.*"},"scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup && cp src/styles.css dist/ && cp -r src/assets dist/ && robocopy demo dist/demo /E /XD node_modules || exit 0","clean":"rm -rf dist","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage"},"_npmUser":{"name":"asafarim.be","actor":{"name":"asafarim.be","type":"user","email":"asafarim.it@gmail.com"},"email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\ced9c77388f5ee1c74b2a50f634390d0\\asafarim-react-privacy-consent-1.6.0.tgz","_integrity":"sha512-iAqwhxrizsKBEEYf+JgheplYmYG7ketjVjoy59Mj/dOfgjdCzMAHrRnFqayqKTiDucp5atQvNkj/6T4lZp6zjA==","repository":{"url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git","type":"git"},"_npmVersion":"10.8.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tsup":"^8.0.0","eslint":"^8.57.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-privacy-consent_1.6.0_1750865320650_0.6528948193776352","host":"s3://npm-registry-packages-npm-production"}},"1.7.0":{"name":"@asafarim/react-privacy-consent","version":"1.7.0","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","_id":"@asafarim/react-privacy-consent@1.7.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://bibliography.asafarim.com/react-privacy-consent/demo","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"dist":{"shasum":"2c4c464c826c627bcc675f62b9083d32ab874785","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.7.0.tgz","fileCount":36,"integrity":"sha512-7ruUrG1pO2Uvci9AT2/J5IXPxD96t8FHZGm2EDgXa1Dwq4/bK/cmM3HR1SmfwF/6ngnMJcz3RkGVWsfvNJevWQ==","signatures":[{"sig":"MEUCIQCtNKu49AjC24mwLj1jpYzEL6R469UDGk0nBE5Qo+A5OAIga/tTF2Tew4by2NqB3BV6iqz34MUhKVZ58VOkCHE8bKM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1419131},"main":"dist/index.js","_from":"file:asafarim-react-privacy-consent-1.7.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./demo":"./demo","./styles.css":"./dist/styles.css","./src/assets/*.*":"./src/assets/*.*"},"scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup && cp src/styles.css dist/ && cp -r src/assets dist/ && robocopy demo dist/demo /E /XD node_modules || exit 0","clean":"rm -rf dist","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage"},"_npmUser":{"name":"asafarim.be","actor":{"name":"asafarim.be","type":"user","email":"asafarim.it@gmail.com"},"email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\662280492bdf18987c4c65c46cb66892\\asafarim-react-privacy-consent-1.7.0.tgz","_integrity":"sha512-7ruUrG1pO2Uvci9AT2/J5IXPxD96t8FHZGm2EDgXa1Dwq4/bK/cmM3HR1SmfwF/6ngnMJcz3RkGVWsfvNJevWQ==","repository":{"url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git","type":"git"},"_npmVersion":"10.8.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tsup":"^8.0.0","eslint":"^8.57.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-privacy-consent_1.7.0_1750874822760_0.21537167706019544","host":"s3://npm-registry-packages-npm-production"}},"1.7.1":{"name":"@asafarim/react-privacy-consent","version":"1.7.1","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","_id":"@asafarim/react-privacy-consent@1.7.1","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://bibliography.asafarim.com/react-privacy-consent/demo","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"dist":{"shasum":"d2f784e51e770cb43a8b284267e3939058637c01","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.7.1.tgz","fileCount":37,"integrity":"sha512-KKEbDPYZMsfD7G6OwYPTHwF1Gu5M5ZrpOTgYyRKvg+/q9psWCCpKo8dMqcbYsSI7E84m4hhauosxcG9bML1CRg==","signatures":[{"sig":"MEUCIQCUoWMS52SGLTEtlcrg0P/51GnA1J1Iewj9tkS8RbXLEAIgKO0a1BuDG4BR10ksx6wNImA/75EcxuoDWdJJWt8QqGE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1448965},"main":"dist/index.js","_from":"file:asafarim-react-privacy-consent-1.7.1.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./demo":"./demo","./styles.css":"./dist/styles.css","./src/assets/*.*":"./src/assets/*.*"},"scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsup && cp src/styles.css dist/ && cp -r src/assets dist/ && robocopy demo dist/demo /E /XD node_modules || exit 0","clean":"rm -rf dist","lint:fix":"eslint src --ext .ts,.tsx --fix","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\1da798de31e8adf1028279bd8c083c46\\asafarim-react-privacy-consent-1.7.1.tgz","_integrity":"sha512-KKEbDPYZMsfD7G6OwYPTHwF1Gu5M5ZrpOTgYyRKvg+/q9psWCCpKo8dMqcbYsSI7E84m4hhauosxcG9bML1CRg==","repository":{"url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git","type":"git"},"_npmVersion":"11.4.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","directories":{},"_nodeVersion":"20.18.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tsup":"^8.0.0","eslint":"^8.57.0","typescript":"^5.3.0","@types/jest":"^29.5.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@testing-library/react":"^14.0.0","jest-environment-jsdom":"^29.5.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-privacy-consent_1.7.1_1754692801748_0.10266807881251316","host":"s3://npm-registry-packages-npm-production"}},"1.7.2":{"name":"@asafarim/react-privacy-consent","version":"1.7.2","description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css","./src/assets/*.*":"./src/assets/*.*","./demo":"./demo"},"keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git"},"homepage":"https://alisafari-it.github.io/react-privacy-consent/","bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@types/jest":"^29.5.0","@testing-library/react":"^14.0.0","@testing-library/jest-dom":"^6.0.0","@testing-library/user-event":"^14.0.0","eslint":"^8.57.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","tsup":"^8.0.0","typescript":"^5.3.0"},"publishConfig":{"access":"public"},"scripts":{"build":"tsup && cp src/styles.css dist/ && cp -r src/assets dist/ && robocopy demo dist/demo /E /XD node_modules || exit 0","dev":"tsup --watch","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","clean":"rm -rf dist"},"_id":"@asafarim/react-privacy-consent@1.7.2","_integrity":"sha512-8TSquKLDcvOuB8xXF+KgEh7hkCnDgIIcvnTKoIBoGJICr8Y/8q5h2ArW2OMUfk5xxT2PoRKjrYP6UG+b9oYgtQ==","_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\5ae7ff952e82a3fa328c895338769c0e\\asafarim-react-privacy-consent-1.7.2.tgz","_from":"file:asafarim-react-privacy-consent-1.7.2.tgz","_nodeVersion":"20.18.3","_npmVersion":"11.4.2","dist":{"integrity":"sha512-8TSquKLDcvOuB8xXF+KgEh7hkCnDgIIcvnTKoIBoGJICr8Y/8q5h2ArW2OMUfk5xxT2PoRKjrYP6UG+b9oYgtQ==","shasum":"bed0c32ebbbfc553e521eecbffbd0754fa79f6d0","tarball":"https://registry.npmjs.org/@asafarim/react-privacy-consent/-/react-privacy-consent-1.7.2.tgz","fileCount":37,"unpackedSize":1448958,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGnU3bNzYFPnt0zbC3r0n+PctQ4WIomplRxUdi2yqgpzAiEA65U1ld4Uh+VZQYtcniIuhF5lXkmUCLfp8Iwshcj2F8c="}]},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"directories":{},"maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-privacy-consent_1.7.2_1754692938796_0.02135783078019471"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-24T11:10:48.390Z","modified":"2025-08-08T22:42:19.429Z","1.0.0":"2025-06-24T11:10:48.738Z","1.2.0":"2025-06-24T12:25:14.074Z","1.3.0":"2025-06-24T12:47:42.918Z","1.4.0":"2025-06-25T13:41:11.194Z","1.5.0":"2025-06-25T14:50:33.611Z","1.6.0":"2025-06-25T15:28:40.869Z","1.7.0":"2025-06-25T18:07:02.995Z","1.7.1":"2025-08-08T22:40:01.987Z","1.7.2":"2025-08-08T22:42:19.211Z"},"bugs":{"url":"https://github.com/AliSafari-IT/react-privacy-consent/issues"},"author":{"name":"ASafariM","email":"ali@asafarim.com"},"license":"MIT","homepage":"https://alisafari-it.github.io/react-privacy-consent/","keywords":["react","typescript","privacy","consent","gdpr","ccpa","cookie","compliance","banner","ui","components"],"repository":{"type":"git","url":"git+https://github.com/AliSafari-IT/react-privacy-consent.git"},"description":"A comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"readme":"# @asafarim/react-privacy-consent\r\n\r\nA comprehensive React TypeScript package for GDPR/CCPA privacy consent management with customizable UI components, automatic compliance handling, and modern accessibility features.\r\n\r\n![npm version](https://img.shields.io/npm/v/@asafarim/react-privacy-consent)\r\n![license](https://img.shields.io/npm/l/@asafarim/react-privacy-consent)\r\n![typescript](https://img.shields.io/badge/TypeScript-Ready-blue)\r\n\r\n## ๐Ÿ“ธ Visual Showcase\r\n\r\nExperience the privacy consent system through these interactive examples:\r\n\r\n### ๐ŸŽฏ **Real-Time Consent Status Dashboard**\r\n\r\n![Consent Status Dashboard](src/assets/consent-status.png)\r\n\r\n*Visual representation of the consent status monitoring system showing real-time compliance tracking, category-specific consent states, and user preference management.*\r\n\r\n**Key Features Demonstrated:**\r\n- โœ… **Live Status Indicators**: Real-time visual feedback for each consent category\r\n- ๐ŸŽ›๏ธ **Category Management**: Individual toggle controls for Analytics, Marketing, and Preferences\r\n- ๐Ÿ“Š **Compliance Monitoring**: Visual dashboard showing GDPR/CCPA compliance status\r\n- ๐Ÿ”„ **State Persistence**: Automatic saving and restoration of user preferences\r\n- ๐Ÿ“ฑ **Responsive Design**: Optimized for desktop, tablet, and mobile viewing\r\n\r\n### โš™๏ธ **Advanced Settings & Customization**\r\n\r\n![Privacy Consent Customization Settings](src/assets/privacy-consent-customize-settings.png)\r\n\r\n*Interactive settings panel showcasing the comprehensive customization options available for tailoring the consent experience to your brand and legal requirements.*\r\n\r\n**Customization Features Shown:**\r\n- ๐ŸŽจ **Theme Configuration**: Color schemes, typography, and visual styling options\r\n- ๐Ÿ“ **Position Controls**: Banner placement (top, bottom, corner, modal) with live preview\r\n- ๐ŸŽญ **Animation Settings**: Smooth transitions, fade effects, and motion preferences\r\n- ๐ŸŒ **Localization Support**: Multi-language text customization and RTL support\r\n- ๐Ÿ“‹ **Category Builder**: Dynamic consent category creation and management\r\n- โšก **Performance Options**: Lazy loading, auto-show delays, and optimization settings\r\n\r\n**[๐Ÿ”— Try the Live Interactive Demo](https://bibliography.asafarim.com/react-privacy-consent/demo)**\r\n\r\n## โœจ Features\r\n\r\n### ๐Ÿ›๏ธ **Compliance & Legal**\r\n- **GDPR Compliant**: Full EU General Data Protection Regulation support\r\n- **CCPA Ready**: California Consumer Privacy Act compliance\r\n- **Consent Records**: Detailed tracking with timestamps and versioning\r\n- **Legal Documentation**: Built-in support for privacy policy and cookie policy links\r\n- **Do Not Track**: Automatic respect for browser DNT settings\r\n\r\n### ๐ŸŽจ **User Experience**\r\n- **Multiple Layouts**: Banner, modal, inline, and corner popup options\r\n- **Flexible Positioning**: Top, bottom, center, or corner placement\r\n- **Smooth Animations**: Beautiful transitions with reduced motion support\r\n- **Mobile Optimized**: Touch-friendly controls and responsive design\r\n- **Dark Mode**: Automatic theme detection and customization\r\n\r\n### ๐Ÿ”ง **Developer Experience**\r\n- **TypeScript First**: Comprehensive type definitions and IntelliSense support\r\n- **React 18+ Ready**: Optimized for latest React features\r\n- **Flexible API**: Easy integration with existing projects\r\n- **Custom Themes**: Full control over colors, typography, and styling\r\n- **Event Callbacks**: Comprehensive event handling and analytics integration\r\n\r\n### โ™ฟ **Accessibility**\r\n- **WCAG 2.1 AA**: Web Content Accessibility Guidelines compliant\r\n- **Keyboard Navigation**: Full keyboard support for all interactions\r\n- **Screen Readers**: Proper ARIA labels and announcements\r\n- **High Contrast**: Automatic high contrast mode support\r\n- **Focus Management**: Logical tab order and focus indicators\r\n\r\n### ๐Ÿ›ก๏ธ **Privacy & Security**\r\n- **Local Storage**: Secure local consent storage\r\n- **Version Control**: Automatic consent version management\r\n- **Expiration Handling**: Configurable consent expiration\r\n- **Data Minimization**: Only essential data collection\r\n- **Secure by Default**: Privacy-first approach\r\n\r\n## ๏ฟฝ Visual Features & Assets\r\n\r\n### ๐Ÿ–ผ๏ธ **Included Visual Assets**\r\n\r\nThe package includes professionally designed UI components and visual aids:\r\n\r\n#### **1. Consent Status Dashboard** (`src/assets/consent-status.png`)\r\n- **Purpose**: Real-time visual feedback for consent management\r\n- **Features**: Live status indicators, category-specific controls, compliance monitoring\r\n- **Usage**: Perfect for admin dashboards, user preference centers, and compliance reporting\r\n- **Integration**: Works seamlessly with the `useConsent` hook for real-time updates\r\n\r\n```tsx\r\n// Implementation matching the status dashboard design\r\nimport { useConsent } from '@asafarim/react-privacy-consent';\r\n\r\nfunction StatusDashboard() {\r\n const { getAllConsent, consentRecord } = useConsent();\r\n \r\n return (\r\n
\r\n {/* Visual status grid as shown in the asset */}\r\n \r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n#### **2. Customization Settings Panel** (`src/assets/privacy-consent-customize-settings.png`)\r\n- **Purpose**: Comprehensive configuration interface for developers and administrators\r\n- **Features**: Theme controls, position settings, animation toggles, localization options\r\n- **Usage**: Build admin interfaces, provide user customization, demonstrate package capabilities\r\n- **Integration**: All settings correspond to actual configuration options in the package\r\n\r\n```tsx\r\n// Build a settings panel like the one shown in the asset\r\nimport { PrivacyConsentConfig } from '@asafarim/react-privacy-consent';\r\n\r\nfunction CustomizationPanel() {\r\n const [config, setConfig] = useState({\r\n // Configuration options matching the settings panel\r\n banner: {\r\n position: 'bottom', // Position dropdown\r\n layout: 'banner', // Layout selector\r\n animation: true, // Animation toggle\r\n showCloseButton: true // Feature toggles\r\n },\r\n theme: {\r\n primaryColor: '#007bff', // Color picker\r\n borderRadius: '8px', // Slider control\r\n animationDuration: '0.3s' // Duration setting\r\n }\r\n });\r\n \r\n return ;\r\n}\r\n```\r\n\r\n### ๐ŸŽจ **Asset Integration Best Practices**\r\n\r\n#### **Using Assets in Documentation**\r\n```markdown\r\n\r\n![Consent Status Example](node_modules/@asafarim/react-privacy-consent/src/assets/consent-status.png)\r\n![Customization Options](node_modules/@asafarim/react-privacy-consent/src/assets/privacy-consent-customize-settings.png)\r\n```\r\n\r\n#### **Asset-Driven Development**\r\n1. **Reference the Screenshots**: Use our assets as visual specifications for implementation\r\n2. **Match the UI**: Align your integration with the demonstrated interface patterns\r\n3. **Feature Parity**: Ensure your implementation includes all features shown in the assets\r\n4. **Visual Consistency**: Maintain the design language demonstrated in our screenshots\r\n\r\n#### **Creating Custom Assets**\r\n```tsx\r\n// Export your consent state for custom visualizations\r\nfunction ExportConsentData() {\r\n const { consentRecord, getAllConsent } = useConsent();\r\n \r\n const exportVisualData = () => {\r\n return {\r\n status: getAllConsent(),\r\n record: consentRecord,\r\n compliance: calculateCompliance(consentRecord),\r\n timestamp: new Date().toISOString()\r\n };\r\n };\r\n \r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n### ๐ŸŽญ **Interactive Demo Showcase**\r\n\r\nExperience all the features shown in our visual assets through our comprehensive demo:\r\n\r\n**[๐Ÿ”— Live Demo: bibliography.asafarim.com/react-privacy-consent/demo](https://bibliography.asafarim.com/react-privacy-consent/demo)**\r\n\r\n#### **Demo Features Map**\r\n\r\n| Visual Asset | Demo Section | Interactive Elements |\r\n|--------------|--------------|---------------------|\r\n| ๐Ÿ–ผ๏ธ **Consent Status Dashboard** | Status Monitoring | โœ… Real-time consent toggles
๐Ÿ“Š Live compliance indicators
๐Ÿ”„ State persistence demo |\r\n| โš™๏ธ **Customization Settings** | Configuration Panel | ๐ŸŽจ Live theme editor
๐Ÿ“ Position controls
๐ŸŽญ Animation toggles |\r\n\r\n#### **Demo Code Implementation**\r\n\r\nThe demo page (`ASafariM.Clients/asafarim-bibliography/src/components/PrivacyConsentDemo.tsx`) showcases:\r\n\r\n```tsx\r\n// Live demonstration of features shown in our assets\r\nfunction PrivacyConsentDemo() {\r\n return (\r\n
\r\n {/* Status dashboard matching our screenshot */}\r\n
\r\n

๐Ÿ“Š Consent Status Dashboard

\r\n \r\n

โ†‘ This interface matches our status dashboard asset

\r\n
\r\n \r\n {/* Customization panel matching our settings screenshot */}\r\n
\r\n

โš™๏ธ Live Customization

\r\n \r\n

โ†‘ Real-time configuration matching our settings asset

\r\n
\r\n \r\n {/* Use case demonstrations */}\r\n
\r\n

๐ŸŽฏ Real-World Use Cases

\r\n \r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n#### **Asset Validation Through Demo**\r\n\r\nOur demo validates that:\r\n- โœ… All UI elements shown in assets are functional\r\n- โœ… Real-time updates work as demonstrated\r\n- โœ… Customization options match the settings panel\r\n- โœ… Status indicators reflect actual consent state\r\n- โœ… Responsive design works across devices\r\n\r\n## ๐Ÿ“ฑ Package Installation\r\n\r\n```bash\r\nnpm install @asafarim/react-privacy-consent\r\n# or\r\nyarn add @asafarim/react-privacy-consent\r\n# or\r\npnpm add @asafarim/react-privacy-consent\r\n```\r\n\r\n## ๐Ÿš€ Quick Start\r\n\r\n> ๐Ÿ’ก **See it in action**: The examples below correspond to the features shown in our [consent status dashboard](src/assets/consent-status.png) and [customization settings](src/assets/privacy-consent-customize-settings.png) screenshots above.\r\n\r\n### 1. ๐Ÿ“ฆ Installation\r\n\r\n```bash\r\nnpm install @asafarim/react-privacy-consent\r\n# or\r\nyarn add @asafarim/react-privacy-consent\r\n# or\r\npnpm add @asafarim/react-privacy-consent\r\n```\r\n\r\n### 2. ๐Ÿ—๏ธ Wrap your app with ConsentProvider\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { \r\n ConsentProvider, \r\n defaultPrivacyConsentConfig \r\n} from '@asafarim/react-privacy-consent';\r\nimport '@asafarim/react-privacy-consent/styles.css';\r\n\r\nfunction App() {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n### 3. ๐ŸŽ›๏ธ Add the consent banner and modal\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { \r\n ConsentBanner, \r\n ConsentModal, \r\n useConsent \r\n} from '@asafarim/react-privacy-consent';\r\n\r\nfunction ConsentManager() {\r\n const { isPreferencesVisible, hidePreferences } = useConsent();\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n### 4. โœ… Check consent in your components\r\n\r\n```tsx\r\nimport React, { useEffect } from 'react';\r\nimport { useConsent } from '@asafarim/react-privacy-consent';\r\n\r\nfunction AnalyticsComponent() {\r\n const { hasConsent, consentRecord } = useConsent();\r\n\r\n useEffect(() => {\r\n if (hasConsent('analytics')) {\r\n // Initialize analytics - as shown in the status dashboard\r\n console.log('Analytics consent granted');\r\n }\r\n }, [hasConsent]);\r\n\r\n return (\r\n
\r\n {/* This status display matches our consent dashboard UI */}\r\n Analytics Status: {hasConsent('analytics') ? 'โœ… Enabled' : 'โŒ Disabled'}\r\n
\r\n );\r\n}\r\n```\r\n\r\n### 5. ๐ŸŽจ Visual Status Monitoring (Premium Feature)\r\n\r\nCreate a dashboard like the one shown in our [status screenshot](src/assets/consent-status.png):\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { useConsent } from '@asafarim/react-privacy-consent';\r\n\r\nfunction ConsentStatusDashboard() {\r\n const { getAllConsent, consentRecord } = useConsent();\r\n const allConsent = getAllConsent();\r\n\r\n return (\r\n
\r\n

๐Ÿ›ก๏ธ Privacy Consent Status

\r\n \r\n {/* Real-time status indicators as shown in the screenshot */}\r\n
\r\n {Object.entries(allConsent).map(([categoryId, status]) => (\r\n
\r\n
\r\n {status ? 'โœ…' : 'โŒ'}\r\n
\r\n
{categoryId}
\r\n
\r\n {status ? 'Granted' : 'Denied'}\r\n
\r\n
\r\n ))}\r\n
\r\n \r\n {/* Compliance summary */}\r\n
\r\n

Last Updated: {new Date(consentRecord?.lastUpdated || Date.now()).toLocaleString()}

\r\n

Version: {consentRecord?.version || 'N/A'}

\r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n## ๐ŸŽฏ Real-World Implementation Examples\r\n\r\n> ๐Ÿ–ผ๏ธ **Visual Reference**: The following examples demonstrate the features visible in our [customization settings panel](src/assets/privacy-consent-customize-settings.png).\r\n\r\n### ๐Ÿ“Š **E-commerce Store Integration**\r\n\r\nPerfect for online stores requiring marketing, analytics, and essential cookies:\r\n\r\n```tsx\r\nimport { ConsentProvider, useConsent } from '@asafarim/react-privacy-consent';\r\n\r\n// Configuration matching the customization options shown in our screenshot\r\nconst ecommerceConfig = {\r\n settings: {\r\n categories: [\r\n {\r\n id: 'necessary',\r\n name: 'Essential',\r\n description: 'Required for shopping cart and checkout functionality.',\r\n type: 'necessary',\r\n required: true,\r\n defaultValue: true\r\n },\r\n {\r\n id: 'analytics',\r\n name: 'Analytics',\r\n description: 'Help us understand shopping patterns and improve our store.',\r\n type: 'analytics',\r\n required: false,\r\n defaultValue: false\r\n },\r\n {\r\n id: 'marketing',\r\n name: 'Marketing',\r\n description: 'Personalized product recommendations and promotional offers.',\r\n type: 'marketing',\r\n required: false,\r\n defaultValue: false\r\n }\r\n ],\r\n version: '2.0.0',\r\n expirationDays: 365,\r\n storageKey: 'ecommerce-consent'\r\n },\r\n banner: {\r\n position: 'bottom', // As configurable in settings panel\r\n layout: 'banner', // Layout option from customization UI\r\n animation: true // Animation toggle from settings\r\n },\r\n texts: {\r\n title: 'Your Privacy Matters',\r\n description: 'We use cookies to enhance your shopping experience, provide personalized recommendations, and analyze our traffic.',\r\n privacyPolicyUrl: '/privacy-policy',\r\n cookiePolicyUrl: '/cookie-policy'\r\n }\r\n};\r\n\r\nfunction EcommerceApp() {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ProductRecommendations() {\r\n const { hasConsent } = useConsent();\r\n \r\n if (!hasConsent('marketing')) {\r\n return (\r\n
\r\n ๐Ÿช Enable marketing cookies for personalized recommendations\r\n
\r\n );\r\n }\r\n \r\n return ;\r\n}\r\n}\r\n```\r\n\r\n### ๐Ÿข **SaaS Dashboard with Advanced Monitoring**\r\n\r\nEnterprise-grade consent management with real-time status tracking (as shown in our [status dashboard](src/assets/consent-status.png)):\r\n\r\n```tsx\r\nconst saasConfig = {\r\n settings: {\r\n categories: [\r\n {\r\n id: 'necessary',\r\n name: 'Necessary',\r\n description: 'Essential for platform functionality and security.',\r\n type: 'necessary',\r\n required: true,\r\n defaultValue: true\r\n },\r\n {\r\n id: 'analytics',\r\n name: 'Usage Analytics',\r\n description: 'Help us improve the platform based on usage patterns.',\r\n type: 'analytics',\r\n required: false,\r\n defaultValue: true\r\n },\r\n {\r\n id: 'preferences',\r\n name: 'User Preferences',\r\n description: 'Remember your dashboard layout and settings.',\r\n type: 'preferences',\r\n required: false,\r\n defaultValue: true\r\n }\r\n ],\r\n autoShowDelay: 2000, // Configurable in settings panel\r\n respectDoNotTrack: true // Privacy option from customization UI\r\n },\r\n banner: {\r\n position: 'top-right', // Position control from settings\r\n layout: 'corner-popup', // Layout option shown in screenshot\r\n showCloseButton: true\r\n },\r\n theme: {\r\n primaryColor: '#007bff', // Color customization from settings panel\r\n borderRadius: '8px', // Styling option\r\n animation: 'slide' // Animation type selector\r\n },\r\n onConsentChange: (record) => {\r\n // Real-time analytics tracking - powers the status dashboard\r\n analytics.track('consent_updated', {\r\n categories: record.decisions.map(d => d.categoryId),\r\n timestamp: record.lastUpdated,\r\n version: record.version\r\n });\r\n }\r\n};\r\n\r\n// Advanced status monitoring component (matches our dashboard screenshot)\r\nfunction ConsentAnalyticsDashboard() {\r\n const { consentRecord, getAllConsent } = useConsent();\r\n const [analytics, setAnalytics] = useState(null);\r\n \r\n useEffect(() => {\r\n // Real-time consent analytics\r\n const updateAnalytics = () => {\r\n const consent = getAllConsent();\r\n setAnalytics({\r\n totalCategories: Object.keys(consent).length,\r\n grantedCategories: Object.values(consent).filter(Boolean).length,\r\n lastUpdated: consentRecord?.lastUpdated,\r\n complianceStatus: 'GDPR_COMPLIANT'\r\n });\r\n };\r\n \r\n updateAnalytics();\r\n }, [consentRecord]);\r\n \r\n return (\r\n
\r\n

๐Ÿ›ก๏ธ Privacy Compliance Dashboard

\r\n \r\n {/* Status cards matching the screenshot layout */}\r\n
\r\n
\r\n

Total Categories

\r\n {analytics?.totalCategories || 0}\r\n
\r\n
\r\n

Granted

\r\n {analytics?.grantedCategories || 0}\r\n
\r\n
\r\n

Compliance

\r\n {analytics?.complianceStatus}\r\n
\r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n## ๐Ÿ“– API Reference\r\n\r\n### ๐Ÿ—๏ธ ConsentProvider\r\n\r\n```tsx\r\ninterface ConsentProviderProps {\r\n children: ReactNode;\r\n config: PrivacyConsentConfig;\r\n}\r\n```\r\n\r\n### ๐Ÿช useConsent Hook\r\n\r\n```tsx\r\nconst {\r\n // Visibility controls\r\n isVisible, // Banner visibility\r\n showBanner, // Show banner manually\r\n hideBanner, // Hide banner\r\n isPreferencesVisible, // Preferences modal visibility\r\n showPreferences, // Show preferences modal\r\n hidePreferences, // Hide preferences modal\r\n \r\n // Consent actions\r\n acceptAll, // Accept all categories\r\n rejectAll, // Reject non-required categories\r\n updateConsent, // Update specific category\r\n resetConsent, // Clear all consent data\r\n \r\n // Consent queries\r\n getConsent, // Get consent status for category\r\n getAllConsent, // Get complete consent record\r\n hasConsent, // Check if category is accepted\r\n \r\n // Data\r\n consentRecord, // Current consent record\r\n config // Configuration object\r\n} = useConsent();\r\n```\r\n\r\n### ๐ŸŽจ Custom Configuration\r\n\r\n```tsx\r\ninterface PrivacyConsentConfig {\r\n settings: {\r\n categories: ConsentCategory[]; // Consent categories\r\n version: string; // Consent version\r\n expirationDays: number; // Consent validity period\r\n storageKey: string; // localStorage key\r\n showDeclineAll: boolean; // Show decline all button\r\n showAcceptAll: boolean; // Show accept all button\r\n showManagePreferences: boolean; // Show preferences button\r\n autoShowDelay: number; // Auto-show delay (ms)\r\n respectDoNotTrack: boolean; // Honor DNT header\r\n };\r\n banner: {\r\n position: BannerPosition; // Banner placement\r\n layout: BannerLayout; // Banner style\r\n showCloseButton: boolean; // Show close button\r\n showCompanyLogo: boolean; // Show company logo\r\n blocking: boolean; // Block page interaction\r\n animation: boolean; // Enable animations\r\n backdrop: boolean; // Show backdrop\r\n };\r\n texts: {\r\n title: string; // Main title\r\n description: string; // Description text\r\n acceptAllText: string; // Accept button text\r\n rejectAllText: string; // Reject button text\r\n managePreferencesText: string; // Preferences button text\r\n savePreferencesText: string; // Save button text\r\n closeText: string; // Close button text\r\n learnMoreText: string; // Learn more link text\r\n learnMoreUrl?: string; // Learn more URL\r\n privacyPolicyUrl?: string; // Privacy policy URL\r\n cookiePolicyUrl?: string; // Cookie policy URL\r\n poweredByText?: string; // Attribution text\r\n };\r\n theme?: ConsentTheme; // Custom theme\r\n onConsentChange?: (record) => void; // Consent change callback\r\n onBannerShow?: () => void; // Banner show callback\r\n onBannerHide?: () => void; // Banner hide callback\r\n onError?: (error) => void; // Error callback\r\n}\r\n```\r\n\r\n## ๐ŸŽจ Theming & Customization\r\n\r\n> ๐ŸŽ›๏ธ **Live Configuration**: All the options shown below are demonstrated in our [customization settings panel](src/assets/privacy-consent-customize-settings.png).\r\n\r\n### ๐ŸŽจ CSS Variables for Quick Styling\r\n\r\nThe package uses CSS custom properties for easy theming:\r\n\r\n```css\r\n:root {\r\n /* Primary color scheme - customizable in settings panel */\r\n --consent-primary-color: #007bff;\r\n --consent-secondary-color: #6c757d;\r\n --consent-background-color: #ffffff;\r\n --consent-text-color: #212529;\r\n \r\n /* Layout and visual design */\r\n --consent-border-color: #dee2e6;\r\n --consent-border-radius: 0.375rem; /* Adjustable in customization UI */\r\n --consent-font-family: system-ui, -apple-system, sans-serif;\r\n --consent-font-size: 14px;\r\n --consent-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n \r\n /* Animation settings - toggle in settings panel */\r\n --consent-animation-duration: 0.3s;\r\n --consent-animation-easing: ease-in-out;\r\n}\r\n\r\n/* Dark theme variables (auto-detected or manually set) */\r\n@media (prefers-color-scheme: dark) {\r\n :root {\r\n --consent-background-color: #1a1a1a;\r\n --consent-text-color: #ffffff;\r\n --consent-border-color: #333333;\r\n }\r\n}\r\n```\r\n\r\n### ๐ŸŽ›๏ธ Advanced Theme Configuration\r\n\r\nCreate themes using the options shown in our customization interface:\r\n\r\n```tsx\r\nimport { \r\n getDefaultTheme, \r\n getDarkTheme, \r\n PrivacyConsentConfig \r\n} from '@asafarim/react-privacy-consent';\r\n\r\n// Custom brand theme (matches customization panel options)\r\nconst customBrandTheme = {\r\n ...getDefaultTheme(),\r\n \r\n // Color customization (as shown in settings)\r\n primaryColor: '#ff6b6b', // Brand primary color\r\n secondaryColor: '#4ecdc4', // Accent color\r\n backgroundColor: '#f8f9fa', // Background theme\r\n textColor: '#2c3e50', // Text contrast\r\n \r\n // Layout options (configurable in UI)\r\n borderRadius: '12px', // Rounded corners slider\r\n fontSize: '16px', // Typography size\r\n fontFamily: 'Inter, sans-serif', // Font selection dropdown\r\n \r\n // Animation preferences (toggle in settings)\r\n animationStyle: 'slide', // Animation type selector\r\n animationDuration: '0.4s', // Speed control\r\n animationEasing: 'cubic-bezier(0.4, 0, 0.2, 1)', // Easing function\r\n \r\n // Shadow and depth (visual enhancement options)\r\n shadowStyle: 'elevated', // Shadow type\r\n shadowColor: 'rgba(0, 0, 0, 0.15)'\r\n};\r\n\r\n// Multi-theme configuration for dynamic switching\r\nconst themeConfig: PrivacyConsentConfig = {\r\n settings: {\r\n // ... other settings\r\n enableThemeToggle: true, // Theme switcher in settings panel\r\n defaultTheme: 'auto' // Auto-detect user preference\r\n },\r\n theme: customBrandTheme,\r\n \r\n // Theme-aware positioning (as configured in settings panel)\r\n banner: {\r\n position: 'bottom-center', // Position selector\r\n layout: 'modern-card', // Layout style dropdown\r\n backdrop: true, // Backdrop toggle\r\n animation: true, // Animation toggle\r\n \r\n // Responsive behavior (mobile optimization settings)\r\n mobilePosition: 'bottom', // Mobile-specific positioning\r\n tabletPosition: 'top-right' // Tablet layout override\r\n }\r\n};\r\n```\r\n\r\n### ๐ŸŒˆ Theme Presets Gallery\r\n\r\nReady-to-use themes matching common design systems:\r\n\r\n```tsx\r\n// Material Design inspired theme\r\nconst materialTheme = {\r\n primaryColor: '#1976d2',\r\n secondaryColor: '#dc004e',\r\n borderRadius: '4px',\r\n elevation: 'material',\r\n rippleEffect: true\r\n};\r\n\r\n// Apple Human Interface Guidelines theme\r\nconst appleTheme = {\r\n primaryColor: '#007aff',\r\n backgroundColor: 'rgba(255, 255, 255, 0.95)',\r\n backdropFilter: 'blur(20px)',\r\n borderRadius: '12px',\r\n fontFamily: '-apple-system, BlinkMacSystemFont'\r\n};\r\n\r\n// Windows Fluent Design theme\r\nconst fluentTheme = {\r\n primaryColor: '#0078d4',\r\n accentColor: '#106ebe',\r\n backgroundEffect: 'acrylic',\r\n borderRadius: '2px',\r\n focusStyle: 'fluent'\r\n};\r\n```\r\n\r\n### ๐ŸŽจ Real-Time Theme Preview\r\n\r\nBuild a theme customizer like the one shown in our [settings panel](src/assets/privacy-consent-customize-settings.png):\r\n\r\n```tsx\r\nfunction ThemeCustomizer() {\r\n const [theme, setTheme] = useState(getDefaultTheme());\r\n const { updateConfig } = useConsent();\r\n \r\n const handleThemeChange = (property: string, value: any) => {\r\n const newTheme = { ...theme, [property]: value };\r\n setTheme(newTheme);\r\n \r\n // Apply theme in real-time\r\n updateConfig({\r\n theme: newTheme\r\n });\r\n };\r\n \r\n return (\r\n
\r\n

๐ŸŽจ Live Theme Customization

\r\n \r\n {/* Color pickers matching the settings panel */}\r\n
\r\n \r\n handleThemeChange('primaryColor', e.target.value)}\r\n />\r\n
\r\n \r\n {/* Border radius slider (as shown in screenshot) */}\r\n
\r\n \r\n handleThemeChange('borderRadius', `${e.target.value}px`)}\r\n />\r\n
\r\n \r\n {/* Animation toggle (matching settings UI) */}\r\n
\r\n \r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n## ๐Ÿ”ง Advanced Usage\r\n\r\n### Dynamic Category Management\r\n\r\n```tsx\r\nfunction DynamicConsentManager() {\r\n const { config, updateConsent } = useConsent();\r\n \r\n const handleCustomConsent = async () => {\r\n // Load user-specific categories from API\r\n const userCategories = await fetchUserCategories();\r\n \r\n // Update consent for each category\r\n userCategories.forEach(category => {\r\n updateConsent(category.id, category.defaultValue);\r\n });\r\n };\r\n \r\n return ;\r\n}\r\n```\r\n\r\n### Analytics Integration\r\n\r\n```tsx\r\nfunction AnalyticsIntegration() {\r\n const { consentRecord, hasConsent } = useConsent();\r\n \r\n useEffect(() => {\r\n if (hasConsent('analytics')) {\r\n // Initialize Google Analytics\r\n gtag('config', 'GA_MEASUREMENT_ID');\r\n \r\n // Track consent event\r\n gtag('event', 'consent_granted', {\r\n categories: consentRecord?.decisions\r\n .filter(d => d.status === 'accepted')\r\n .map(d => d.categoryId)\r\n });\r\n }\r\n }, [consentRecord, hasConsent]);\r\n}\r\n```\r\n\r\n### Server-Side Integration\r\n\r\n```tsx\r\n// Send consent data to server\r\nconst config = {\r\n onConsentChange: async (record) => {\r\n try {\r\n await fetch('/api/consent', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify({\r\n userId: getCurrentUserId(),\r\n consent: record,\r\n timestamp: new Date().toISOString()\r\n })\r\n });\r\n } catch (error) {\r\n console.error('Failed to save consent:', error);\r\n }\r\n }\r\n};\r\n```\r\n\r\n## ๐ŸŒ Browser Support\r\n\r\n- **Chrome** 60+\r\n- **Firefox** 55+\r\n- **Safari** 12+\r\n- **Edge** 79+\r\n- **Mobile browsers** with ES2018 support\r\n\r\n## ๐Ÿ“ฑ Mobile Optimization\r\n\r\nThe package is fully optimized for mobile devices:\r\n\r\n- Touch-friendly controls with appropriate hit targets\r\n- Responsive layouts that adapt to screen size\r\n- Swipe gestures for dismissing banners\r\n- Optimized for both portrait and landscape orientations\r\n- Battery-conscious animations and transitions\r\n\r\n## ๐Ÿงช Testing\r\n\r\n```bash\r\n# Run tests\r\npnpm test\r\n\r\n# Run tests with coverage\r\npnpm test:coverage\r\n\r\n# Run tests in watch mode\r\npnpm test:watch\r\n```\r\n\r\n## ๐Ÿค Contributing\r\n\r\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\r\n\r\n### Development Setup\r\n\r\n```bash\r\ngit clone https://github.com/AliSafari-IT/asafarim\r\ncd ASafariM.Clients/packages/react-privacy-consent\r\npnpm install\r\npnpm build\r\npnpm test\r\n```\r\n\r\n## ๐Ÿ“„ License\r\n\r\nMIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## ๐ŸŒŸ Why Choose @asafarim/react-privacy-consent?\r\n\r\n### โœ… **Production Ready with Visual Documentation**\r\n- Battle-tested in production environments with [real-world examples](src/assets/consent-status.png)\r\n- Comprehensive error handling and fallbacks\r\n- [Live customization interface](src/assets/privacy-consent-customize-settings.png) for easy configuration\r\n- Regular security updates and maintenance\r\n\r\n### ๐ŸŽฏ **Compliance Focused & Visually Verified**\r\n- Built by privacy professionals with visual compliance dashboards\r\n- Regular updates for changing regulations\r\n- [Interactive status monitoring](src/assets/consent-status.png) for audit trails\r\n- Legal team approved implementation patterns\r\n\r\n### ๐Ÿš€ **Developer Friendly with Rich Assets**\r\n- Extensive TypeScript support with visual interface examples\r\n- [Live demo environment](https://bibliography.asafarim.com/privacy-consent/demo) showcasing all features\r\n- Professional UI assets included for documentation and reference\r\n- Active community support with visual debugging tools\r\n\r\n### ๐Ÿ“ธ **Visual Asset Portfolio**\r\n\r\n| Asset | Purpose | Implementation Guide |\r\n|-------|---------|---------------------|\r\n| ๐Ÿ–ผ๏ธ **[Consent Status Dashboard](src/assets/consent-status.png)** | Real-time monitoring | Perfect for admin panels and user dashboards |\r\n| โš™๏ธ **[Customization Settings](src/assets/privacy-consent-customize-settings.png)** | Configuration interface | Build admin tools and user preference centers |\r\n\r\n## ๐Ÿ”— Related Packages & Ecosystem\r\n\r\n- **[`@asafarim/react-themes`](https://www.npmjs.com/package/@asafarim/react-themes)** - Theme management system with privacy-aware styling\r\n- **[`@asafarim/dd-menu`](https://www.npmjs.com/package/@asafarim/dd-menu)** - Dropdown menu component\r\n- **[ASafariM Bibliography](https://bibliography.asafarim.com)** - Live application showcasing the consent system\r\n- **[๐ŸŽญ Interactive Demo](https://bibliography.asafarim.com/react-privacy-consent/demo)** - Comprehensive feature demonstration matching our visual assets\r\n\r\n## ๐Ÿ“ˆ Project Stats & Visual Features\r\n\r\n- ๐Ÿ—๏ธ **Built with**: TypeScript, React 18, Modern CSS\r\n- ๐Ÿ“ฆ **Bundle Size**: ~12KB gzipped (includes visual assets)\r\n- ๐ŸŒ **Browser Support**: Modern browsers with localStorage support\r\n- โšก **Performance**: Optimized rendering with minimal re-renders\r\n- โ™ฟ **Accessibility**: WCAG 2.1 AA compliant\r\n- ๐Ÿ›ก๏ธ **Security**: Privacy-first design with secure defaults\r\n- ๐Ÿ–ผ๏ธ **Visual Assets**: Professional UI screenshots and documentation included\r\n- ๐ŸŽ›๏ธ **Live Demo**: Interactive showcase validating all visual examples\r\n\r\n---\r\n\r\n
\r\n\r\n### ๐Ÿ›ก๏ธ **Protect User Privacy with Visual Confidence**\r\n\r\n**[๐Ÿ“Š View Status Dashboard](src/assets/consent-status.png)** | **[โš™๏ธ See Customization Panel](src/assets/privacy-consent-customize-settings.png)**\r\n\r\n**[๐ŸŽญ Try the Live Demo](https://bibliography.asafarim.com/react-privacy-consent/demo)** | **[๐Ÿ“š View Documentation](https://www.npmjs.com/package/@asafarim/react-privacy-consent)** | **[๐Ÿ’ป See Source Code](https://github.com/AliSafari-IT/asafarim)**\r\n\r\nMade with โค๏ธ and ๐Ÿ”’ by **[ASafariM](https://github.com/AliSafari-IT)**\r\n\r\n*Empowering developers to build privacy-compliant applications with professional visual assets and comprehensive documentation*\r\n\r\n### ๐ŸŽฏ **Quick Visual Reference**\r\n\r\n| ๐Ÿ“ธ Asset Preview | ๐Ÿ”— Live Demo | ๐Ÿ“– Documentation |\r\n|------------------|--------------|------------------|\r\n| [๐Ÿ–ผ๏ธ Status Dashboard](src/assets/consent-status.png) | [๐ŸŽ›๏ธ Interactive Dashboard](https://bibliography.asafarim.com/react-privacy-consent/demo#status) | [๐Ÿ“š Status API Docs](#-useConsent-hook) |\r\n| [โš™๏ธ Settings Panel](src/assets/privacy-consent-customize-settings.png) | [๐ŸŽจ Live Customizer](https://bibliography.asafarim.com/react-privacy-consent/demo#customize) | [๐ŸŽจ Theming Guide](#-theming--customization) |\r\n\r\n
\r\n","readmeFilename":"README.md"}