{"_id":"@deriv-com/quill-ui-v2","_rev":"8-2af523c3ad15165b7e30b98a2b4f9d19","name":"@deriv-com/quill-ui-v2","dist-tags":{"latest":"0.0.8"},"versions":{"0.0.1":{"name":"@deriv-com/quill-ui-v2","version":"0.0.1","keywords":["quill","design-system","react","components","ui","deriv"],"license":"MIT","_id":"@deriv-com/quill-ui-v2@0.0.1","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/quill-design-system#readme","bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"dist":{"shasum":"aa0e761a0ead4e8878ed3cdf5b63f9261f534a9e","tarball":"https://registry.npmjs.org/@deriv-com/quill-ui-v2/-/quill-ui-v2-0.0.1.tgz","fileCount":7,"integrity":"sha512-Lh1FA/gAfmciGojaN26BTSLAdHnZbzj8Yuyso7Sx7vE6fpiskuzglVBMQfWpf1ex2HldEFCpXFZH2juIc2itEg==","signatures":[{"sig":"MEQCIGW38l6mL1peAIIxPlDpmtwZxfOgME3nqB1glMcacxrgAiAy2qA9Cd1dkaYu/oI3DbPZ5chf8lub7kYUWfaOS7uFXw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":184641},"main":"./dist/quill-ui-v2.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/quill-ui-v2.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.cjs"}}},"gitHead":"56a94ee90074482a68b82901b56d49f352fbd2fb","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","format":"prettier --write .","tokens":"node scripts/tokens/app.js","prepare":"husky install","preview":"vite preview","test:ui":"vitest --ui","lint:fix":"eslint . --fix","tokens:ci":"node scripts/tokens/app.js --ci","typecheck":"tsc --noEmit","test:watch":"vitest","build:watch":"vite build --watch","format:check":"prettier --check .","tokens:watch":"node scripts/tokens/app.js --watch","test:coverage":"vitest run --coverage","tokens:cached":"node scripts/tokens/app.js --skip-rest-api","prepublishOnly":"npm run build","tokens:dry-run":"node scripts/tokens/app.js --dry-run"},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/quill-design-system.git","type":"git"},"_npmVersion":"10.8.2","description":"Quill UI V2 - React components with bundled styles","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.19.6","dependencies":{"dotenv":"^17.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","husky":"^9.1.7","react":"^18.2.0","eslint":"^9.17.0","vitest":"^4.0.14","globals":"^15.14.0","prettier":"^3.4.2","react-dom":"^18.2.0","@eslint/js":"^9.17.0","typescript":"^5.3.3","@types/react":"^18.2.0","vite-plugin-dts":"^3.9.1","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.14","@vitejs/plugin-react":"^4.2.1","@deriv-com/shiftai-cli":"^1.0.12","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/quill-ui-v2_0.0.1_1766988081321_0.9539014992692549","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@deriv-com/quill-ui-v2","version":"0.0.2","keywords":["quill","design-system","react","components","ui","deriv"],"license":"MIT","_id":"@deriv-com/quill-ui-v2@0.0.2","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/quill-design-system#readme","bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"dist":{"shasum":"e813e77786a1388b3845538123bcc953b8d56067","tarball":"https://registry.npmjs.org/@deriv-com/quill-ui-v2/-/quill-ui-v2-0.0.2.tgz","fileCount":7,"integrity":"sha512-O0ohE1D2/cyINo2rwY3EO/BJ8e93rWiGlnyr0hXv+cQgCHetAxnd1cRT6HGu8zSfwOebVr52YxhTB0L2BKsTpA==","signatures":[{"sig":"MEYCIQCza1SovmtzqgbrNKxyLbIOPm+DwyBwATGz093RADm9MwIhAIxvVly75J3kUGdOCoxJCjJHKmwhcYeTnYX2RfyMeQUP","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":473538},"main":"./dist/quill-ui-v2.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/quill-ui-v2.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.cjs"}}},"gitHead":"a31a0d1945643ea8d1ecf3f1b6594e2ccf638b50","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","format":"prettier --write .","tokens":"node scripts/tokens/app.js","prepare":"husky install","preview":"vite preview","test:ui":"vitest --ui","lint:fix":"eslint . --fix","storybook":"storybook dev -p 6006","tokens:ci":"node scripts/tokens/app.js --ci","typecheck":"tsc --noEmit","test:watch":"vitest","build:watch":"vite build --watch","format:check":"prettier --check .","tokens:watch":"node scripts/tokens/app.js --watch","test:coverage":"vitest run --coverage","tokens:cached":"node scripts/tokens/app.js --skip-rest-api","prepublishOnly":"npm run build","tokens:dry-run":"node scripts/tokens/app.js --dry-run","build-storybook":"storybook build"},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/quill-design-system.git","type":"git"},"_npmVersion":"10.8.2","description":"Quill UI V2 - React components with bundled styles","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.19.6","dependencies":{"dotenv":"^17.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","husky":"^9.1.7","react":"^18.2.0","eslint":"^9.17.0","vitest":"^4.0.17","globals":"^15.14.0","prettier":"^3.4.2","react-dom":"^18.2.0","storybook":"^10.1.11","@eslint/js":"^9.17.0","playwright":"^1.57.0","typescript":"^5.3.3","@types/react":"^18.2.0","vite-plugin-dts":"^3.9.1","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.17","@vitejs/plugin-react":"^4.2.1","@storybook/addon-a11y":"^10.1.11","@storybook/addon-docs":"^10.1.11","@storybook/react-vite":"^10.1.11","@deriv-com/shiftai-cli":"^1.0.12","@storybook/addon-vitest":"^10.1.11","eslint-plugin-storybook":"^10.1.11","@chromatic-com/storybook":"^5.0.0","@vitest/browser-playwright":"^4.0.17","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/quill-ui-v2_0.0.2_1768896136669_0.5242220726631321","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@deriv-com/quill-ui-v2","version":"0.0.3","keywords":["quill","design-system","react","components","ui","deriv"],"license":"MIT","_id":"@deriv-com/quill-ui-v2@0.0.3","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/quill-design-system#readme","bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"dist":{"shasum":"d84b01fb11258c0892ca141464fc892fa6990402","tarball":"https://registry.npmjs.org/@deriv-com/quill-ui-v2/-/quill-ui-v2-0.0.3.tgz","fileCount":18,"integrity":"sha512-Kx/oAFy++yg5OYIt6jY0WnPLIMU18Ogf6W7O4k2IuzozFwOiSHtjgoEjHsmn4bq1BcpHT5RHH4wQcnTIyaBFEA==","signatures":[{"sig":"MEUCIDqWnlQcBUOeYj7g73R122kfLu8AZu0+jRPtyRlEUHv3AiEAvQV6Uy3t0FpVdNxeXHyVb19PWpubaNlVDPPXQpfiGHU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":722239},"main":"./dist/quill-ui-v2.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/quill-ui-v2.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.cjs"}},"./tokens":{"types":"./dist/tokens/tokens.d.ts","import":"./dist/tokens/tokens.js"},"./tokens.css":"./dist/tokens/index.css","./tokens/*.css":"./dist/tokens/*.css"},"gitHead":"0cad00c4e5ad57e3113c61fd7ac1f8755e457c11","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","format":"prettier --write .","tokens":"node scripts/tokens/app.js","prepare":"husky install","preview":"vite preview","test:ui":"vitest --ui","lint:fix":"eslint . --fix","storybook":"storybook dev -p 6006","tokens:ci":"node scripts/tokens/app.js --ci","typecheck":"tsc --noEmit","test:watch":"vitest","build:watch":"vite build --watch","format:check":"prettier --check .","tokens:watch":"node scripts/tokens/app.js --watch","test:coverage":"vitest run --coverage","tokens:cached":"node scripts/tokens/app.js --skip-rest-api","prepublishOnly":"npm run build","tokens:dry-run":"node scripts/tokens/app.js --dry-run","build-storybook":"storybook build"},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/quill-design-system.git","type":"git"},"_npmVersion":"10.8.2","description":"Quill UI V2 - React components with bundled styles","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.0","dependencies":{"dotenv":"^17.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","husky":"^9.1.7","react":"^18.2.0","eslint":"^9.17.0","vitest":"^4.0.17","globals":"^15.14.0","prettier":"^3.4.2","react-dom":"^18.2.0","storybook":"^10.1.11","@eslint/js":"^9.17.0","playwright":"^1.57.0","typescript":"^5.3.3","@types/node":"^25.0.10","@types/react":"^18.2.0","vite-plugin-dts":"^3.9.1","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.17","@vitejs/plugin-react":"^4.2.1","@storybook/addon-a11y":"^10.1.11","@storybook/addon-docs":"^10.1.11","@storybook/react-vite":"^10.1.11","@deriv-com/shiftai-cli":"^1.0.12","@storybook/addon-vitest":"^10.1.11","eslint-plugin-storybook":"^10.1.11","@chromatic-com/storybook":"^5.0.0","@vitest/browser-playwright":"^4.0.17","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/quill-ui-v2_0.0.3_1769394693542_0.07859197076917535","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@deriv-com/quill-ui-v2","version":"0.0.4","keywords":["quill","design-system","react","components","ui","deriv"],"license":"MIT","_id":"@deriv-com/quill-ui-v2@0.0.4","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/quill-design-system#readme","bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"dist":{"shasum":"5788178a208cd2cac1d6c3caaf50e72876c3d70a","tarball":"https://registry.npmjs.org/@deriv-com/quill-ui-v2/-/quill-ui-v2-0.0.4.tgz","fileCount":18,"integrity":"sha512-eZRFTR8AkI0Wq1y5uANLi41cMsDHDc2uEJ5KNp+0ZrdfJotDthTY5IPdRSMbQVOLjNSfjQ5FxWVnaCZ0edQraQ==","signatures":[{"sig":"MEUCIQClTLInUX3dz2b/TGpByiSP+qm08FAg5ieQgVWGgqBwtgIgOIWyNlKV2Kv1crzEhFaXLGg/QPstQzjBh0DwyIGHdRM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":843917},"main":"./dist/quill-ui-v2.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/quill-ui-v2.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.cjs"}},"./tokens":{"types":"./dist/tokens/tokens.d.ts","import":"./dist/tokens/tokens.js"},"./tokens.css":"./dist/tokens/index.css","./tokens/*.css":"./dist/tokens/*.css"},"gitHead":"3ce0d0ade91c9884b81fad51fceaace6285d09d9","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","format":"prettier --write .","tokens":"node scripts/tokens/app.js","prepare":"husky install","preview":"vite preview","test:ui":"vitest --ui","lint:fix":"eslint . --fix","storybook":"storybook dev -p 6006","tokens:ci":"node scripts/tokens/app.js --ci","typecheck":"tsc --noEmit","test:watch":"vitest","build:watch":"vite build --watch","format:check":"prettier --check .","tokens:watch":"node scripts/tokens/app.js --watch","test:coverage":"vitest run --coverage","tokens:cached":"node scripts/tokens/app.js --skip-rest-api","prepublishOnly":"npm run build","tokens:dry-run":"node scripts/tokens/app.js --dry-run","build-storybook":"storybook build"},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/quill-design-system.git","type":"git"},"_npmVersion":"10.8.2","description":"Quill UI V2 - React components with bundled styles","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.0","dependencies":{"dotenv":"^17.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","husky":"^9.1.7","react":"^18.2.0","eslint":"^9.17.0","vitest":"^4.0.17","globals":"^15.14.0","prettier":"^3.4.2","react-dom":"^18.2.0","storybook":"^10.1.11","@eslint/js":"^9.17.0","playwright":"^1.57.0","typescript":"^5.3.3","@types/node":"^25.0.10","@types/react":"^18.2.0","vite-plugin-dts":"^3.9.1","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.17","@vitejs/plugin-react":"^4.2.1","@storybook/addon-a11y":"^10.1.11","@storybook/addon-docs":"^10.1.11","@storybook/react-vite":"^10.1.11","@deriv-com/shiftai-cli":"^1.0.12","@storybook/addon-vitest":"^10.1.11","eslint-plugin-storybook":"^10.1.11","@chromatic-com/storybook":"^5.0.0","@vitest/browser-playwright":"^4.0.17","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/quill-ui-v2_0.0.4_1769653373466_0.4548453230798484","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@deriv-com/quill-ui-v2","version":"0.0.5","keywords":["quill","design-system","react","components","ui","deriv"],"license":"MIT","_id":"@deriv-com/quill-ui-v2@0.0.5","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/quill-design-system#readme","bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"dist":{"shasum":"dffbd9790e5a23737e77678cec1c18aecf678201","tarball":"https://registry.npmjs.org/@deriv-com/quill-ui-v2/-/quill-ui-v2-0.0.5.tgz","fileCount":18,"integrity":"sha512-u6ttfEMjSv+LqsaaK33+gA4oOAsiFQqvQ+7iSXZ1rG3W5slq2oKleqydbftwWmVIhFV2+MmZ+hV8uoVdxU2C0g==","signatures":[{"sig":"MEUCIQCBUhA5G9vX+tOi7dFj0UI5INfoPS2A0xOvrcCNWbXMtwIgMc/Ep46uvVOW55RHzYDxsmuVUh68t5s0tk485QcqtwY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":993183},"main":"./dist/quill-ui-v2.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/quill-ui-v2.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.cjs"}},"./tokens":{"types":"./dist/tokens/tokens.d.ts","import":"./dist/tokens/tokens.js"},"./tokens.css":"./dist/tokens/index.css","./tokens/*.css":"./dist/tokens/*.css"},"gitHead":"5d98bede05c802974c7da0fdd1fa715f2a70cf38","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","format":"prettier --write .","tokens":"node scripts/tokens/app.js","prepare":"husky install","preview":"vite preview","test:ui":"vitest --ui","lint:fix":"eslint . --fix","storybook":"storybook dev -p 6006","tokens:ci":"node scripts/tokens/app.js --ci","typecheck":"tsc --noEmit","test:watch":"vitest","build:watch":"vite build --watch","format:check":"prettier --check .","tokens:watch":"node scripts/tokens/app.js --watch","test:coverage":"vitest run --coverage","tokens:cached":"node scripts/tokens/app.js --skip-rest-api","prepublishOnly":"npm run build","tokens:dry-run":"node scripts/tokens/app.js --dry-run","build-storybook":"storybook build"},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/quill-design-system.git","type":"git"},"_npmVersion":"10.8.2","description":"Quill UI V2 - React components with bundled styles","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.0","dependencies":{"dotenv":"^17.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","husky":"^9.1.7","react":"^18.2.0","eslint":"^9.17.0","vitest":"^4.0.17","globals":"^15.14.0","prettier":"^3.4.2","react-dom":"^18.2.0","storybook":"^10.1.11","@eslint/js":"^9.17.0","playwright":"^1.57.0","typescript":"^5.3.3","@types/node":"^25.0.10","@types/react":"^18.2.0","vite-plugin-dts":"^3.9.1","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.17","@vitejs/plugin-react":"^4.2.1","@storybook/addon-a11y":"^10.1.11","@storybook/addon-docs":"^10.1.11","@storybook/react-vite":"^10.1.11","@deriv-com/shiftai-cli":"^1.0.12","@storybook/addon-vitest":"^10.1.11","eslint-plugin-storybook":"^10.1.11","@chromatic-com/storybook":"^5.0.0","@vitest/browser-playwright":"^4.0.17","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/quill-ui-v2_0.0.5_1770363990290_0.8827803888725299","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@deriv-com/quill-ui-v2","version":"0.0.6","keywords":["quill","design-system","react","components","ui","deriv"],"license":"MIT","_id":"@deriv-com/quill-ui-v2@0.0.6","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/quill-design-system#readme","bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"dist":{"shasum":"d6c0d2d442b545e71c2e493f5d4d1dc4b85f7a37","tarball":"https://registry.npmjs.org/@deriv-com/quill-ui-v2/-/quill-ui-v2-0.0.6.tgz","fileCount":18,"integrity":"sha512-ohaSga/0l+Y/WQupc0HgQ2IlWf8Lv4E2AOz7ZrysbEezpVSPi3h8PQRzZzabm6EWYY3INPRwi9kPhcqb+JTbTw==","signatures":[{"sig":"MEYCIQDScE3JnHft2UNbUCPp5K7tAw7T7Ptnr8JqHMsnpPnowQIhAJlBN9xGE4N3eiWcrGc/UXjpT+Y9ONoZYFlyPqKg/c++","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1350594},"main":"./dist/quill-ui-v2.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/quill-ui-v2.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.cjs"}},"./tokens":{"types":"./dist/tokens/tokens.d.ts","import":"./dist/tokens/tokens.js"},"./tokens.css":"./dist/tokens/index.css","./tokens/*.css":"./dist/tokens/*.css"},"gitHead":"d63b58a6697fcfc33419631bce96b0e7037bc444","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","format":"prettier --write .","tokens":"node scripts/tokens/app.js","prepare":"husky install","preview":"vite preview","test:ui":"vitest --ui","lint:fix":"eslint . --fix","storybook":"storybook dev -p 6006","tokens:ci":"node scripts/tokens/app.js --ci","typecheck":"tsc --noEmit","test:watch":"vitest","build:watch":"vite build --watch","format:check":"prettier --check .","tokens:watch":"node scripts/tokens/app.js --watch","test:coverage":"vitest run --coverage","tokens:cached":"node scripts/tokens/app.js --skip-rest-api","prepublishOnly":"npm run build","tokens:dry-run":"node scripts/tokens/app.js --dry-run","build-storybook":"storybook build"},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/quill-design-system.git","type":"git"},"_npmVersion":"10.8.2","description":"Quill UI V2 - React components with bundled styles","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.0","dependencies":{"dotenv":"^17.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","husky":"^9.1.7","react":"^18.2.0","eslint":"^9.17.0","vitest":"^4.0.17","globals":"^15.14.0","prettier":"^3.4.2","react-dom":"^18.2.0","storybook":"^10.1.11","@eslint/js":"^9.17.0","playwright":"^1.57.0","typescript":"^5.3.3","@types/node":"^25.0.10","@types/react":"^18.2.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.17","@vitejs/plugin-react":"^4.2.1","@storybook/addon-a11y":"^10.1.11","@storybook/addon-docs":"^10.1.11","@storybook/react-vite":"^10.1.11","@deriv-com/shiftai-cli":"^1.0.12","@storybook/addon-vitest":"^10.1.11","eslint-plugin-storybook":"^10.1.11","@chromatic-com/storybook":"^5.0.0","@vitest/browser-playwright":"^4.0.17","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/quill-ui-v2_0.0.6_1771901723281_0.36076288766106557","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@deriv-com/quill-ui-v2","version":"0.0.7","keywords":["quill","design-system","react","components","ui","deriv"],"license":"MIT","_id":"@deriv-com/quill-ui-v2@0.0.7","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"homepage":"https://github.com/deriv-com/quill-design-system#readme","bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"dist":{"shasum":"bf2da4424e621cbec7e3e7498b18504148640ea4","tarball":"https://registry.npmjs.org/@deriv-com/quill-ui-v2/-/quill-ui-v2-0.0.7.tgz","fileCount":18,"integrity":"sha512-ALdn/mjxhWpxrjx+OagkhVqrh9v8NdUFXIDxvqxMMlvYQU0D3nPEjYMxQ72AxCjodt3+P6UJ0jTMNtgPuJrPXg==","signatures":[{"sig":"MEQCIDr1cE9rXEoopkt5kwlCWkeia0KRiPkoPahwgMHat1caAiAh0ut3bHDqEVI0SQYT2zgkCkYUYOECeQ28XrSR/lhlTQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1602259},"main":"./dist/quill-ui-v2.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/quill-ui-v2.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.cjs"}},"./tokens":{"types":"./dist/tokens/tokens.d.ts","import":"./dist/tokens/tokens.js"},"./tokens.css":"./dist/tokens/index.css","./tokens/*.css":"./dist/tokens/*.css"},"gitHead":"6f49122fcf8849662c75a5ff0973d73365c95a34","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","format":"prettier --write .","tokens":"node scripts/tokens/app.js","prepare":"husky install","preview":"vite preview","test:ui":"vitest --ui","lint:fix":"eslint . --fix","storybook":"storybook dev -p 6006","tokens:ci":"node scripts/tokens/app.js --ci","typecheck":"tsc --noEmit","test:watch":"vitest","build:watch":"vite build --watch","format:check":"prettier --check .","tokens:watch":"node scripts/tokens/app.js --watch","test:coverage":"vitest run --coverage","tokens:cached":"node scripts/tokens/app.js --skip-rest-api","prepublishOnly":"npm run build","tokens:dry-run":"node scripts/tokens/app.js --dry-run","build-storybook":"storybook build"},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"repository":{"url":"git+https://github.com/deriv-com/quill-design-system.git","type":"git"},"_npmVersion":"10.8.2","description":"Quill UI V2 - React components with bundled styles","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.0","dependencies":{"dotenv":"^17.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","husky":"^9.1.7","react":"^18.2.0","eslint":"^9.17.0","vitest":"^4.0.17","globals":"^15.14.0","prettier":"^3.4.2","react-dom":"^18.2.0","storybook":"^10.1.11","@eslint/js":"^9.17.0","playwright":"^1.57.0","typescript":"^5.3.3","@types/node":"^25.0.10","@types/react":"^18.2.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.17","@vitejs/plugin-react":"^4.2.1","@storybook/addon-a11y":"^10.1.11","@storybook/addon-docs":"^10.1.11","@storybook/react-vite":"^10.1.11","@deriv-com/shiftai-cli":"^1.0.12","@storybook/addon-vitest":"^10.1.11","eslint-plugin-storybook":"^10.1.11","@chromatic-com/storybook":"^5.0.0","@vitest/browser-playwright":"^4.0.17","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/quill-ui-v2_0.0.7_1772419605385_0.963599868605548","host":"s3://npm-registry-packages-npm-production"}},"0.0.8":{"name":"@deriv-com/quill-ui-v2","version":"0.0.8","type":"module","description":"Quill UI V2 - React components with bundled styles","main":"./dist/quill-ui-v2.cjs","module":"./dist/quill-ui-v2.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/quill-ui-v2.cjs"}},"./tokens.css":"./dist/tokens/index.css","./tokens":{"import":"./dist/tokens/tokens.js","types":"./dist/tokens/tokens.d.ts"},"./tokens/*.css":"./dist/tokens/*.css"},"sideEffects":["**/*.css"],"engines":{"node":">=18.0.0"},"scripts":{"build":"vite build","build:watch":"vite build --watch","preview":"vite preview","tokens":"node scripts/tokens/app.js","tokens:watch":"node scripts/tokens/app.js --watch","tokens:dry-run":"node scripts/tokens/app.js --dry-run","tokens:cached":"node scripts/tokens/app.js --skip-rest-api","tokens:ci":"node scripts/tokens/app.js --ci","test":"vitest run","test:watch":"vitest","test:ui":"vitest --ui","test:coverage":"vitest run --coverage","lint":"eslint .","lint:fix":"eslint . --fix","format":"prettier --write .","format:check":"prettier --check .","typecheck":"tsc --noEmit","prepublishOnly":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"dependencies":{"dotenv":"^17.2.3","husky":"^9.1.7"},"devDependencies":{"@chromatic-com/storybook":"^5.0.1","@eslint/js":"^9.17.0","@storybook/addon-a11y":"^10.2.13","@storybook/addon-docs":"^10.2.13","@storybook/addon-vitest":"^10.2.13","@storybook/react-vite":"^10.2.13","@types/node":"^25.0.10","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.1","@vitest/browser-playwright":"^4.0.17","@vitest/coverage-v8":"^4.0.17","eslint":"^9.17.0","eslint-plugin-storybook":"^10.2.13","globals":"^15.14.0","playwright":"^1.57.0","prettier":"^3.4.2","react":"^18.2.0","react-dom":"^18.2.0","storybook":"^10.2.13","typescript":"^5.3.3","vite":"^7.3.1","vite-plugin-css-injected-by-js":"^3.4.0","vite-plugin-dts":"^4.5.4","vitest":"^4.0.17"},"overrides":{"minimatch":">=3.1.4 <4.0.0 || >=9.0.7 <10.0.0 || >=10.2.3","rollup":">=4.59.0","ajv":">=6.14.0 <7.0.0 || >=8.18.0"},"keywords":["quill","design-system","react","components","ui","deriv"],"repository":{"type":"git","url":"git+https://github.com/deriv-com/quill-design-system.git"},"license":"MIT","publishConfig":{"access":"public"},"_id":"@deriv-com/quill-ui-v2@0.0.8","gitHead":"5600fe4b5679f4586d33bdf1e7ff1b9fedd3a336","bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"homepage":"https://github.com/deriv-com/quill-design-system#readme","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-+NvPcKWUXWR6zO3imKtPth7JWoD2U8rsJQhzDJGo8tltPQZ9CHA2g9iYVgMRLt2yzZr0lb4MfqtigpSS+DvhCQ==","shasum":"be8d7069958709d64ca9ddb74807595218127a97","tarball":"https://registry.npmjs.org/@deriv-com/quill-ui-v2/-/quill-ui-v2-0.0.8.tgz","fileCount":18,"unpackedSize":2055725,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBZwbByPhnIPyPZmEedv+nSXVmUwjvjX9c0Zjwp7WIMAAiB2e4tDVmGPQLGOHVLHLu200MhSSwYS3jWslg8uocSKVw=="}]},"_npmUser":{"name":"deriv-web","email":"web-access@deriv.com"},"directories":{},"maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/quill-ui-v2_0.0.8_1772781078932_0.2898049330315151"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-29T06:01:21.149Z","modified":"2026-03-06T07:11:19.241Z","0.0.1":"2025-12-29T06:01:21.478Z","0.0.2":"2026-01-20T08:02:16.826Z","0.0.3":"2026-01-26T02:31:33.701Z","0.0.4":"2026-01-29T02:22:53.658Z","0.0.5":"2026-02-06T07:46:30.480Z","0.0.6":"2026-02-24T02:55:23.500Z","0.0.7":"2026-03-02T02:46:45.595Z","0.0.8":"2026-03-06T07:11:19.102Z"},"bugs":{"url":"https://github.com/deriv-com/quill-design-system/issues"},"license":"MIT","homepage":"https://github.com/deriv-com/quill-design-system#readme","keywords":["quill","design-system","react","components","ui","deriv"],"repository":{"type":"git","url":"git+https://github.com/deriv-com/quill-design-system.git"},"description":"Quill UI V2 - React components with bundled styles","maintainers":[{"name":"deriv-web","email":"web-access@deriv.com"}],"readme":"# šŸŽØ Quill Design System - Figma Token Automation\n\n> Automatically sync design tokens from Figma to code with one command\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)]()\n[![Node](https://img.shields.io/badge/node-%3E%3D18.0.0-blue.svg)]()\n[![Tests](https://img.shields.io/badge/tests-161%20passing-brightgreen.svg)]()\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)]()\n\nA powerful automation tool that bridges the gap between design and development by automatically extracting design tokens from Figma and generating production-ready CSS, TypeScript, and utility classes.\n\n---\n\n## šŸ“‹ Table of Contents\n\n- [Quick Start](#-quick-start)\n- [Features](#-features)\n- [Prerequisites](#-prerequisites)\n- [Installation](#-installation)\n- [Usage](#-usage)\n- [Component Development](#-component-development)\n- [For Designers](#-for-designers)\n- [For Developers](#-for-developers)\n- [Common Tasks](#-common-tasks)\n- [Documentation](#-documentation)\n- [Troubleshooting](#-troubleshooting)\n- [Contributing](#-contributing)\n\n---\n\n## šŸš€ Quick Start\n\n### For Component Usage\n\n```bash\n# Install the package\nnpm install @deriv-com/quill-ui-v2\n\n# Use components in your app\nimport { Button } from '@deriv-com/quill-ui-v2';\n```\n\n### For Token Usage (Custom Styling)\n\n```bash\n# Install the package\nnpm install @deriv-com/quill-ui-v2\n\n# Import tokens in your app\nimport '@deriv-com/quill-ui-v2/tokens.css';\n\n# Use tokens in your CSS\n.custom-element {\n padding: var(--quill-semantic-size-spacing-16);\n background: var(--quill-semantic-colour-background-canvas);\n}\n```\n\n**šŸ“– See the [Token Usage Guide](docs/token-usage-guide.md) for complete documentation.**\n\n### For Development\n\nGet up and running in 5 minutes:\n\n```bash\n# 1. Install dependencies\nnpm install\n\n# 2. Set up credentials\ncp .env.example .env\n# Edit .env with your Figma token and file key\n\n# 3. Sync tokens from Figma\nnpm run tokens\n\n# 4. Build the package\nnpm run build\n```\n\n**New to the project?** Follow the [detailed installation guide](#-installation) below.\n\n---\n\n## āœØ Features\n\n### Core Capabilities\n\n- āœ… **Automatic Sync** - One command updates all tokens from Figma\n- āœ… **Multi-Collection Support** - Handle multiple token collections (primitives, semantic, etc.)\n- āœ… **Multi-File Output** - Organized CSS files by collection\n- āœ… **NPM Package Export** - Tokens available as separate CSS files for custom styling\n- āœ… **TypeScript Support** - Type-safe tokens with autocomplete\n- āœ… **Token Validation** - Automatic error detection and warnings\n- āœ… **Version Tracking** - Semantic versioning for changes\n- āœ… **Figma Styles** - Import text, color, and effect styles\n- āœ… **Theme Support** - Light/dark mode with system preference detection\n- āœ… **Watch Mode** - Continuous monitoring for design changes\n- āœ… **Dry Run** - Preview changes before applying\n- āœ… **CI/CD Ready** - Automated token syncing in pipelines\n\n### Generated Outputs\n\n| File | Purpose | Auto-Generated |\n| ------------------------------------------------- | ---------------------------------- | -------------- |\n| [`index.css`](src/tokens/index.css) | Main import file for all tokens | āœ… |\n| [`primitives.css`](src/tokens/primitives.css) | Base design tokens (colors, sizes) | āœ… |\n| [`semantic.css`](src/tokens/semantic.css) | Semantic tokens (spacing, radius) | āœ… |\n| [`figma-styles.css`](src/tokens/figma-styles.css) | Figma style tokens | āœ… |\n| [`tokens.d.ts`](src/tokens/tokens.d.ts) | TypeScript definitions | āœ… |\n| [`tokens.js`](src/tokens/tokens.js) | JavaScript module | āœ… |\n| `version.json` | Version metadata | āœ… |\n\n---\n\n## šŸ”§ Prerequisites\n\nBefore you begin, ensure you have:\n\n### Required\n\n- **Node.js** >= 18.0.0 ([Download](https://nodejs.org/))\n- **npm** >= 9.0.0 (comes with Node.js)\n- **Figma account** with access to your design file\n- **Figma Personal Access Token** ([Get one here](https://www.figma.com/settings))\n\n### System Requirements\n\n| Platform | Supported | Tested |\n| -------- | --------- | ------ |\n| macOS | āœ… Yes | āœ… |\n| Windows | āœ… Yes | āœ… |\n| Linux | āœ… Yes | āœ… |\n\n---\n\n## šŸ“¦ Installation\n\n### Step 1: Install Dependencies\n\n```bash\nnpm install\n```\n\nThis installs:\n\n- `dotenv` (^17.2.3) - Environment variable management\n\n### Step 2: Configure Figma Access\n\n#### 2.1 Get Your Figma Personal Access Token\n\n1. Go to [Figma Settings](https://www.figma.com/settings)\n2. Navigate to **Account** ā†’ **Personal Access Tokens**\n3. Click **Generate new token**\n4. Give it a name (e.g., \"Token Automation\")\n5. Copy the token (starts with `figd_`)\n\n#### 2.2 Get Your Figma File Key\n\n1. Open your Figma file in the browser\n2. Copy the file key from the URL:\n ```\n https://www.figma.com/design/FILE_KEY_HERE/...\n ^^^^^^^^^^^^\n ```\n\n#### 2.3 Create Environment File\n\n```bash\n# Copy the example file\ncp .env.example .env\n\n# Edit with your credentials\nnano .env\n```\n\nAdd your credentials:\n\n```env\n# Your Figma Personal Access Token\nFIGMA_ACCESS_TOKEN=figd_your_token_here\n\n# Your Figma File Key\nFIGMA_FILE_KEY=your_file_key_here\n```\n\n### Step 3: Verify Setup\n\n```bash\n# Test the connection\nnpm run tokens\n```\n\nExpected output:\n\n```\nšŸš€ Starting Figma token extraction...\nšŸ“” Fetching from Figma REST API...\nāœ… Fetched 497 variables from 2 collection(s)\n šŸ“ Collection: \"primitives\"\n Modes: default\n šŸ“ Collection: \"semantic\"\n Modes: default\nāœØ Done!\n```\n\n---\n\n## šŸ’» Usage\n\n### Using the NPM Package\n\n#### Install the Package\n\n```bash\nnpm install @deriv-com/quill-ui-v2\n```\n\n#### Import Components (CSS Bundled)\n\n```javascript\nimport { Button, Textfield, SearchField } from '@deriv-com/quill-ui-v2';\n\n// Components include their styles automatically\n\n```\n\n#### Import Tokens for Custom Styling\n\n```javascript\n// In your app entry point (main.tsx, App.tsx, etc.)\nimport '@deriv-com/quill-ui-v2/tokens.css';\n\n// Now use tokens in your CSS\n```\n\n```css\n.custom-element {\n padding: var(--quill-semantic-size-spacing-16);\n background: var(--quill-semantic-colour-background-canvas);\n color: var(--quill-semantic-colour-text-prominent-default);\n border-radius: var(--quill-semantic-size-radius-8);\n}\n```\n\n#### Import Tokens in JavaScript\n\n```javascript\nimport { tokens } from '@deriv-com/quill-ui-v2/tokens';\n\nconst styles = {\n padding: tokens['--quill-semantic-size-spacing-16'],\n background: tokens['--quill-semantic-colour-background-canvas']\n};\n```\n\n#### Converting Figma MCP Output to Tokens\n\nWhen Figma MCP generates code, it outputs hard-coded values with token names in comments:\n\n```css\n/* āŒ Figma MCP Output */\n.header {\n gap: 16px; /* Figma token: quill-semantic-spacing-16 */\n padding: 16px 0; /* Figma token: quill-semantic-spacing-16 */\n background-color: #ebecef; /* Figma token: tertiary/background/default */\n border-radius: 999px; /* Figma token: size/radius */\n}\n```\n\nConvert to use design tokens:\n\n```css\n/* āœ… With Design Tokens */\n.header {\n gap: var(--quill-semantic-size-spacing-16);\n padding: var(--quill-semantic-size-spacing-16) 0;\n background-color: var(--quill-semantic-colour-button-tertiary-bg-default);\n border-radius: var(--quill-semantic-size-radius-999);\n}\n```\n\n#### Common Token Patterns\n\n```css\n/* Custom Button */\n.custom-button {\n padding: var(--quill-semantic-size-spacing-12) var(--quill-semantic-size-spacing-20);\n background: var(--quill-semantic-colour-button-primary-bg-default);\n color: var(--quill-semantic-colour-button-primary-text);\n border-radius: var(--quill-semantic-size-radius-999);\n font-size: var(--quill-semantic-typography-body-standard-size);\n}\n\n/* Custom Card */\n.custom-card {\n padding: var(--quill-semantic-size-spacing-24);\n background: var(--quill-semantic-colour-background-surface);\n border: 1px solid var(--quill-semantic-colour-border-default-default);\n border-radius: var(--quill-semantic-size-radius-8);\n}\n\n/* Custom Text */\n.custom-heading {\n font-family: var(--quill-semantic-typography-font-family);\n font-size: var(--quill-semantic-typography-title-section-size);\n color: var(--quill-semantic-colour-text-prominent-default);\n}\n```\n\n#### Available Token Categories\n\n- **Colors**: `--quill-semantic-colour-*` (text, background, border)\n- **Spacing**: `--quill-semantic-size-spacing-*` (4, 8, 16, 24, etc.)\n- **Sizing**: `--quill-semantic-size-width-height-*` (32, 48, 56, etc.)\n- **Border Radius**: `--quill-semantic-size-radius-*` (8, 16, 999)\n- **Typography**: `--quill-semantic-typography-*` (font-size, font-family, font-weight)\n\n---\n\n### Development Commands\n\n#### Command Line\n\n```bash\n# Fetch from Figma and generate all files\nnpm run tokens\n\n# Use cached data (skip API call)\nnpm run tokens:cached\n\n# Preview changes without writing files\nnpm run tokens:dry-run\n\n# Watch for changes continuously\nnpm run tokens:watch\n\n# CI/CD mode with strict validation\nnpm run tokens:ci\n```\n\n#### In HTML (Development)\n\n```html\n\n\n \n \n \n \n \n \n
Custom styled element
\n \n\n```\n\n### In CSS\n\n```css\n/* Import tokens */\n@import \"./src/tokens/index.css\";\n\n/* Use in your styles */\n.my-button {\n background: var(--quill-core-color-blue-500);\n padding: var(--quill-core-spacing-md);\n border-radius: var(--quill-core-radius-lg);\n}\n```\n\n### In JavaScript/TypeScript\n\n```typescript\nimport { tokens } from \"./src/tokens/tokens.js\";\nimport type { TokenName, TokenValue } from \"./src/tokens/tokens\";\n\n// Type-safe token access with autocomplete!\nconst primaryColor: string = tokens[\"--quill-core-color-blue-500\"];\nconst spacing: string = tokens[\"--quill-core-spacing-md\"];\n\n// Use in dynamic styles\nelement.style.setProperty(\"background-color\", primaryColor);\nelement.style.setProperty(\"padding\", spacing);\n```\n\n### In React\n\n```tsx\nimport \"./src/tokens/index.css\";\nimport { tokens } from \"./src/tokens/tokens\";\n\nfunction Button({ children }: { children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n```\n\n---\n\n## šŸ§© Component Development\n\nThis design system includes comprehensive guidelines for building consistent, accessible components.\n\n### Getting Started with Components\n\nAll components must follow the standardized structure and patterns defined in our documentation:\n\n- **[Component Guidelines](docs/guideline.md)** - Complete standards for building components\n- **[Component Prompt Template](docs/prompt.md)** - Fill-in template for creating new components\n\n### Component Structure\n\nEach component includes 6 required files:\n\n```\nsrc/components/{component-name}/\nā”œā”€ā”€ {ComponentName}.tsx # React component\nā”œā”€ā”€ {ComponentName}.module.css # Styles with design tokens\nā”œā”€ā”€ {ComponentName}.stories.tsx # Storybook stories\nā”œā”€ā”€ {ComponentName}.spec.json # Cross-platform specification\nā”œā”€ā”€ index.ts # Public exports\nā””ā”€ā”€ README.md # Documentation\n```\n\n### Quick Component Creation\n\n1. **Sync design tokens**: Run `npm run tokens` to sync from Figma\n2. **Review the guidelines**: Read [`docs/guideline.md`](docs/guideline.md)\n3. **Fill the prompt template**: Use [`docs/prompt.md`](docs/prompt.md)\n4. **Extract with Figma MCP**: Use Figma MCP tools to get component specs\n5. **Create all 6 files**: Generate from Figma data\n6. **Export component**: Add to `src/index.ts`\n\n### Example: Creating a Button from Figma\n\n```bash\n# 1. Sync tokens from Figma Variables\nnpm run tokens\n\n# 2. Get Figma component node ID (e.g., \"2074:7\")\n\n# 3. Use Figma MCP tools to extract:\n# - get_design_context(nodeId)\n# - get_variable_defs(nodeId)\n# - get_screenshot(nodeId)\n# - get_metadata(nodeId)\n\n# 4. Generate component files from Figma data\n\n# 5. Export in src/index.ts\n```\n\nSee [`docs/prompt.md`](docs/prompt.md) for complete Figma-driven examples.\n\n### Design Token Integration\n\nAll components must use design tokens from `src/tokens/`:\n\n```css\n/* āœ… CORRECT - Use design tokens */\n.button {\n background: var(--quill-semantic-background-action-brand-normal);\n padding: var(--quill-semantic-spacing-24);\n border-radius: var(--quill-semantic-radius-999);\n}\n\n/* āŒ WRONG - Never hardcode values */\n.button {\n background: #0066cc;\n padding: 24px;\n border-radius: 999px;\n}\n```\n\n### Component Checklist\n\nBefore submitting a component, verify:\n\n- [ ] All 6 files created\n- [ ] Uses design tokens (no hardcoded values)\n- [ ] All states implemented (hover, active, focus, disabled)\n- [ ] Storybook stories complete\n- [ ] Accessibility requirements met\n- [ ] TypeScript types exported\n- [ ] Component exported in `src/index.ts`\n- [ ] README documentation complete\n\n---\n\n## šŸŽØ For Designers\n\n### Setting Up Figma Variables\n\n1. **Create Collections** in Figma's Variables panel\n - Primitives: Base colors, sizes, typography\n - Semantic: Contextual tokens (spacing, radius, etc.)\n\n2. **Name Variables** using forward slashes for grouping:\n\n ```\n colour/blue/500\n size/spacing/md\n typography/heading/large\n ```\n\n3. **Use Modes** for themes (optional):\n - Light mode\n - Dark mode\n - High contrast variants\n\n### Best Practices\n\nāœ… **DO:**\n\n- Use consistent naming conventions\n- Group related tokens together\n- Document token purposes in descriptions\n- Test tokens in Dev Mode before syncing\n\nāŒ **DON'T:**\n\n- Use spaces or special characters in names\n- Create circular references\n- Delete tokens without coordinating with developers\n- Mix different token types in one collection\n\n### Testing Your Changes\n\nBefore asking developers to sync:\n\n1. **Preview in Dev Mode** - Check CSS variable names\n2. **Test References** - Ensure all aliases resolve correctly\n3. **Verify Modes** - Test light/dark theme switching\n4. **Document Changes** - Note any breaking changes\n\n### Syncing Code Syntax to Figma\n\nAfter developers generate tokens, update Figma with CSS syntax:\n\n1. Open your Figma file\n2. Open the plugin console: `Option + Command + I` (Mac) or `Ctrl + Alt + I` (Windows)\n3. Copy contents of [`scripts/tokens/tokenVariableSyntaxAndDescriptionSnippet.js`](scripts/tokens/tokenVariableSyntaxAndDescriptionSnippet.js)\n4. Paste into console and press Enter\n5. Wait for \"DONE!\" message\n\nThis allows you to see CSS variable names in Figma's Dev Mode.\n\n---\n\n## šŸ‘Øā€šŸ’» For Developers\n\n### Workflow\n\n1. **Sync tokens** when designers notify you of changes:\n\n ```bash\n npm run tokens\n ```\n\n2. **Review changes** before committing:\n\n ```bash\n git diff src/tokens/\n ```\n\n3. **Test** in your application\n\n4. **Commit** changes:\n ```bash\n git add src/tokens/\n git commit -m \"chore: sync design tokens from Figma\"\n git push\n ```\n\n### Integration Examples\n\n#### Tailwind CSS\n\n```javascript\n// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n primary: \"var(--quill-core-color-blue-500)\",\n secondary: \"var(--quill-core-color-gray-500)\",\n },\n spacing: {\n xs: \"var(--quill-core-spacing-xs)\",\n sm: \"var(--quill-core-spacing-sm)\",\n md: \"var(--quill-core-spacing-md)\",\n },\n },\n },\n};\n```\n\n#### Styled Components\n\n```typescript\nimport styled from \"styled-components\";\nimport { tokens } from \"./src/tokens/tokens\";\n\nconst Button = styled.button`\n background: ${tokens[\"--quill-core-color-blue-500\"]};\n padding: ${tokens[\"--quill-core-spacing-md\"]};\n border-radius: ${tokens[\"--quill-core-radius-lg\"]};\n`;\n```\n\n#### CSS Modules\n\n```css\n/* Button.module.css */\n.button {\n background: var(--quill-core-color-blue-500);\n padding: var(--quill-core-spacing-md);\n border-radius: var(--quill-core-radius-lg);\n}\n```\n\n### Version Control\n\n**What to commit:**\n\n- āœ… All files in `src/tokens/`\n- āœ… `scripts/tokens/version.json` (optional)\n\n**What to ignore:**\n\n- āŒ `scripts/tokens/tokens.json` (raw data, can be regenerated)\n- āŒ `.env` (contains secrets)\n\n---\n\n## šŸ“ Common Tasks\n\n### Preview Changes Before Applying\n\n```bash\n# Dry run shows what would change without writing files\nnpm run tokens:dry-run\n```\n\nOutput:\n\n```\nšŸ” Dry Run - Preview of Changes:\nā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•\nāš ļø DRY RUN MODE - No files will be written\nā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•\n\nāœØ Created (1):\n ./src/tokens/figma-styles.css (1.8 KB)\n\nāœļø Modified (2):\n ./src/tokens/primitives.css\n 22.7 KB ā†’ 22.5 KB (-188 B)\n ./src/tokens/tokens.d.ts\n 53.2 KB ā†’ 53.8 KB (+648 B)\n\nā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•\nTotal: 3 file(s) processed\nšŸ“‹ 3 file(s) would be updated\n```\n\n### Watch for Changes During Development\n\n```bash\n# Continuously monitor Figma for changes\nnpm run tokens:watch\n```\n\nThe script will:\n\n- Poll Figma every 30 seconds (configurable)\n- Detect when tokens change\n- Prompt you to regenerate\n- Continue watching after updates\n\n### Use Cached Data for Faster Iteration\n\n```bash\n# Skip API call, use existing tokens.json\nnpm run tokens:cached\n```\n\nUseful when:\n\n- Testing configuration changes\n- Iterating on output formats\n- Working offline\n\n### Automate in CI/CD\n\n```bash\n# CI mode with strict validation\nnpm run tokens:ci\n```\n\nFeatures:\n\n- Exits with proper error codes\n- Shows detailed error messages\n- Prevents interactive prompts\n- Validates tokens strictly\n\nSee [CONFIGURATION.md](CONFIGURATION.md#cicd-integration) for complete CI/CD setup.\n\n---\n\n## šŸ“š Documentation\n\n| Document | Purpose | Audience |\n| ---------------------------------------- | -------------------------------- | ------------------- |\n| **[README.md](README.md)** (this file) | Quick start and overview | Everyone |\n| **[guideline.md](docs/guideline.md)** | Figma-driven component standards | Developers |\n| **[prompt.md](docs/prompt.md)** | Figma MCP prompt templates | Developers |\n| **[CONFIGURATION.md](CONFIGURATION.md)** | Token extractor configuration | Developers |\n| **[API-REFERENCE.md](API-REFERENCE.md)** | Technical API documentation | Advanced developers |\n\n### Quick Links\n\n- **Components:** [Figma-Driven Guidelines](docs/guideline.md) ā€¢ [Figma MCP Prompts](docs/prompt.md) ā€¢ [Component Structure](#-component-development)\n- **Configuration:** [Environment Variables](CONFIGURATION.md#environment-variables) ā€¢ [Config Class](CONFIGURATION.md#config-class) ā€¢ [Collections](CONFIGURATION.md#collection-configuration)\n- **Advanced:** [CI/CD Setup](CONFIGURATION.md#cicd-integration) ā€¢ [Watch Mode](CONFIGURATION.md#watch-mode) ā€¢ [Batch API](CONFIGURATION.md#performance-optimization)\n- **API:** [Architecture](API-REFERENCE.md#architecture) ā€¢ [Modules](API-REFERENCE.md#modules) ā€¢ [Extending](API-REFERENCE.md#extending-the-system)\n\n---\n\n## šŸ†˜ Troubleshooting\n\n### \"FIGMA_ACCESS_TOKEN is not defined\"\n\n**Problem:** Environment variables not loaded\n\n**Solution:**\n\n```bash\n# 1. Verify .env file exists\nls -la .env\n\n# 2. Check file contents\ncat .env\n\n# 3. Ensure proper format (no quotes needed)\nFIGMA_ACCESS_TOKEN=figd_your_token_here\nFIGMA_FILE_KEY=your_file_key_here\n\n# 4. Restart your terminal/IDE\n```\n\n### \"Collection not found in tokens.json\"\n\n**Problem:** Collection name mismatch between Figma and configuration\n\n**Solution:**\n\n1. Check your Figma collection names\n2. Names are normalized: `\"My Colors\"` ā†’ `my_colors`\n3. Update `COLLECTION_DATA` in configuration\n4. Run without `--skip-rest-api` to fetch fresh data:\n ```bash\n npm run tokens\n ```\n\n### \"Failed to fetch from Figma API\"\n\n**Problem:** API connection or authentication issues\n\n**Solution:**\n\n```bash\n# 1. Verify token is valid\ncurl -H \"X-Figma-Token: YOUR_TOKEN\" \\\n https://api.figma.com/v1/files/YOUR_FILE_KEY/variables/local\n\n# 2. Check token permissions\n# Token must have \"File content\" read access\n\n# 3. Verify file key is correct\n# Should be from URL: figma.com/design/FILE_KEY/...\n\n# 4. Check network connectivity\nping api.figma.com\n```\n\n### TypeScript Errors with Token Imports\n\n**Problem:** TypeScript can't find token definitions\n\n**Solution:**\n\n```typescript\n// 1. Ensure tokens.d.ts is generated\n// Check: src/tokens/tokens.d.ts exists\n\n// 2. Add to tsconfig.json\n{\n \"compilerOptions\": {\n \"types\": [\"./src/tokens/tokens\"]\n }\n}\n\n// 3. Import correctly\nimport type { TokenName } from './src/tokens/tokens';\nimport { tokens } from './src/tokens/tokens';\n```\n\n### More Help\n\n- Check [CONFIGURATION.md](CONFIGURATION.md#troubleshooting) for configuration issues\n- See [API-REFERENCE.md](API-REFERENCE.md#troubleshooting) for technical problems\n- Review existing [GitHub Issues](https://github.com/your-repo/issues)\n\n---\n\n## šŸ¤ Contributing\n\n### Reporting Issues\n\nWhen reporting issues, please include:\n\n- **Environment**: OS, Node.js version\n- **Steps to reproduce**: Exact commands run\n- **Expected behavior**: What should happen\n- **Actual behavior**: What actually happened\n- **Error messages**: Full error output\n- **Screenshots**: If applicable\n\n### Adding Features\n\n1. **Create feature branch**\n\n ```bash\n git checkout -b feature/your-feature-name\n ```\n\n2. **Make changes**\n - Update relevant files\n - Add tests for new functionality\n - Update documentation\n\n3. **Test thoroughly**\n\n ```bash\n npm test\n npm run tokens\n ```\n\n4. **Submit PR**\n - Provide clear description\n - Include before/after examples\n - Link related issues\n\n### Code Style\n\n- Use ES modules (`import`/`export`)\n- Add JSDoc comments for functions\n- Follow existing naming conventions\n- Keep functions focused and small\n- Add console logging for user feedback\n\n---\n\n## šŸ“Š Project Stats\n\n- **497** Figma variables imported\n- **508** total tokens generated\n- **2** collections (primitives, semantic)\n- **161** tests passing (100% pass rate)\n- **6** core features enabled\n\n---\n\n## šŸ“ License\n\nMIT License - see LICENSE file for details\n\n---\n\n## šŸ™ Acknowledgments\n\n- Built with [Figma Variables API](https://www.figma.com/developers/api#variables)\n- Follows [W3C Design Tokens Format](https://design-tokens.github.io/community-group/format/)\n- Inspired by design system best practices\n\n---\n\n## šŸ“ž Support\n\n- **Quick questions**: Check [Troubleshooting](#-troubleshooting) section\n- **Setup help**: See [Installation](#-installation) guide\n- **Configuration**: Read [CONFIGURATION.md](CONFIGURATION.md)\n- **Technical details**: Review [API-REFERENCE.md](API-REFERENCE.md)\n- **Issues**: Use GitHub Issues (if applicable)\n\n---\n\n**Ready to sync your design system? Let's go! šŸš€**\n\n```bash\nnpm run tokens\n```\n","readmeFilename":"README.md"}