{"_id":"chroma-panel","_rev":"4-4c89ef953cdc22943588a70b1ef67a58","name":"chroma-panel","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"chroma-panel","version":"0.1.0","keywords":["react","color","color-picker","colorpicker","hsva","hex","rgba","eyedropper","palette","accessible","a11y","typescript","zero-dependency","react-color-picker","colour-picker","color-wheel","swatch","macos","hsl"],"author":{"url":"https://resohail.me","name":"Sohail Khan"},"license":"MIT","_id":"chroma-panel@0.1.0","maintainers":[{"name":"re-sohail","email":"business.yasrabtv@gmail.com"}],"homepage":"https://github.com/re-sohail/chroma-panel#readme","bugs":{"url":"https://github.com/re-sohail/chroma-panel/issues"},"dist":{"shasum":"88013c6e78f7a8273ae66d1a0bca29949e3529ce","tarball":"https://registry.npmjs.org/chroma-panel/-/chroma-panel-0.1.0.tgz","fileCount":202,"integrity":"sha512-21XNsu4uA8MPrAWPS0/wU+A+UdlnP1ZaDVDIafsZ9BR+0rC8RO02KuD+30raIMLzy5DpP7jGnTa2flCzkSpxTA==","signatures":[{"sig":"MEUCIGF2UhbSpbNRWmX0Xklwl+VydkVUtciYmWQ2dVzfSB2fAiEA1kuGw8T4XpKachNZOnwEVe1z+WnBHyvzULabHE4pCwk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":374301},"main":"./dist/index.cjs","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./core":{"import":{"types":"./dist/core.d.ts","default":"./dist/core.js"},"require":{"types":"./dist/core.d.cts","default":"./dist/core.cjs"}},"./image":{"import":{"types":"./dist/image.d.ts","default":"./dist/image.js"},"require":{"types":"./dist/image.d.cts","default":"./dist/image.cjs"}},"./panel":{"import":{"types":"./dist/panel.d.ts","default":"./dist/panel.js"},"require":{"types":"./dist/panel.d.cts","default":"./dist/panel.cjs"}},"./wheel":{"import":{"types":"./dist/wheel.d.ts","default":"./dist/wheel.js"},"require":{"types":"./dist/wheel.d.cts","default":"./dist/wheel.cjs"}},"./pencils":{"import":{"types":"./dist/pencils.d.ts","default":"./dist/pencils.js"},"require":{"types":"./dist/pencils.d.cts","default":"./dist/pencils.cjs"}},"./sliders":{"import":{"types":"./dist/sliders.d.ts","default":"./dist/sliders.js"},"require":{"types":"./dist/sliders.d.cts","default":"./dist/sliders.cjs"}},"./contrast":{"import":{"types":"./dist/contrast.d.ts","default":"./dist/contrast.js"},"require":{"types":"./dist/contrast.d.cts","default":"./dist/contrast.cjs"}},"./palettes":{"import":{"types":"./dist/palettes.d.ts","default":"./dist/palettes.js"},"require":{"types":"./dist/palettes.d.cts","default":"./dist/palettes.cjs"}},"./style.css":"./dist/style.css","./styles.css":"./dist/style.css","./image-worker":"./dist/image-worker.js","./named-colors":{"import":{"types":"./dist/named-colors.d.ts","default":"./dist/named-colors.js"},"require":{"types":"./dist/named-colors.d.cts","default":"./dist/named-colors.cjs"}},"./package.json":"./package.json"},"gitHead":"f49b3e83d9f2dc7840a06e76fd175954cec1eda5","scripts":{"dev":"tsdown --watch","size":"node scripts/size-report.mjs","test":"vitest run","build":"tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs && npm run lint:publint && npm run lint:attw","release":"changeset publish","lint:attw":"attw --pack . --profile node16 --exclude-entrypoints styles.css style.css image-worker","test:unit":"vitest run --project unit","typecheck":"tsc --noEmit && tsc --noEmit -p tsconfig.tools.json","build:fast":"tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs","test:watch":"vitest","lint:publint":"publint --strict","test:browser":"vitest run --project browser","prepublishOnly":"npm run build && npm run verify:directives && npm run size","verify:directives":"node scripts/verify-directives.mjs"},"_npmUser":{"name":"re-sohail","email":"business.yasrabtv@gmail.com"},"repository":{"url":"git+https://github.com/re-sohail/chroma-panel.git","type":"git"},"_npmVersion":"11.6.2","description":"React color picker with wheel, sliders, palettes, image sampling and an eyedropper. Zero dependencies, accessible, TypeScript types included.","directories":{},"sideEffects":["**/*.css","./dist/index.js","./dist/index.cjs","./dist/wheel.js","./dist/wheel.cjs","./dist/sliders.js","./dist/sliders.cjs","./dist/palettes.js","./dist/palettes.cjs","./dist/image.js","./dist/image.cjs","./dist/pencils.js","./dist/pencils.cjs","./dist/image-worker.js"],"_nodeVersion":"24.12.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.3.0","tsdown":"0.23.0","vitest":"^5.0.0","publint":"0.3.24","react-dom":"^19.3.0","playwright":"^1.63.0","typescript":"5.9.3","@types/node":"^22.20.2","@types/react":"^19.3.0","@changesets/cli":"^3.0.2","@types/react-dom":"^19.3.0","@vitejs/plugin-react":"^6.1.1","vitest-browser-react":"^2.3.0","@arethetypeswrong/cli":"0.18.5","@vitest/browser-playwright":"^5.0.0"},"peerDependencies":{"react":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0-0","react-dom":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0-0","@types/react":"*","@types/react-dom":"*"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/chroma-panel_0.1.0_1789414394379_0.7654146177093044","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"chroma-panel","version":"0.1.1","keywords":["react","color","color-picker","colorpicker","hsva","hex","rgba","eyedropper","palette","accessible","a11y","typescript","zero-dependency","react-color-picker","colour-picker","color-wheel","swatch","macos","hsl"],"author":{"url":"https://resohail.me","name":"Sohail Khan"},"license":"MIT","_id":"chroma-panel@0.1.1","maintainers":[{"name":"re-sohail","email":"business.yasrabtv@gmail.com"}],"homepage":"https://github.com/re-sohail/chroma-panel#readme","bugs":{"url":"https://github.com/re-sohail/chroma-panel/issues"},"dist":{"shasum":"c673a17244ca98749780791ab9d7ce21cfe8a44e","tarball":"https://registry.npmjs.org/chroma-panel/-/chroma-panel-0.1.1.tgz","fileCount":202,"integrity":"sha512-9yhX5mfn/bNZnZZ3kbhlsy/VeTA0mpcRaV4BX8fESdCDJKFGkjL3lmw5xAp2O2XHyzw44ZsREIb7hpp7ZABqgA==","signatures":[{"sig":"MEQCIQD47mP8PzWBW3Ok9fqFSB+LQ3iz1+wL6HyJCDIhL3KBdAIfU0Zwh+/L1PPW87qzAfEWbrPs1pKRXYqBpIWddXoV3Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEYCIQC2mn7H8IN+dvBo/X35mOZkfE73c7C8hHyvwXXFG2gfXgIhAIfD/REvFKrwmOgALdgIrXBP4P6vy2RV10S4yu7Q5pZ0","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":374308},"main":"./dist/index.cjs","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./core":{"import":{"types":"./dist/core.d.ts","default":"./dist/core.js"},"require":{"types":"./dist/core.d.cts","default":"./dist/core.cjs"}},"./image":{"import":{"types":"./dist/image.d.ts","default":"./dist/image.js"},"require":{"types":"./dist/image.d.cts","default":"./dist/image.cjs"}},"./panel":{"import":{"types":"./dist/panel.d.ts","default":"./dist/panel.js"},"require":{"types":"./dist/panel.d.cts","default":"./dist/panel.cjs"}},"./wheel":{"import":{"types":"./dist/wheel.d.ts","default":"./dist/wheel.js"},"require":{"types":"./dist/wheel.d.cts","default":"./dist/wheel.cjs"}},"./pencils":{"import":{"types":"./dist/pencils.d.ts","default":"./dist/pencils.js"},"require":{"types":"./dist/pencils.d.cts","default":"./dist/pencils.cjs"}},"./sliders":{"import":{"types":"./dist/sliders.d.ts","default":"./dist/sliders.js"},"require":{"types":"./dist/sliders.d.cts","default":"./dist/sliders.cjs"}},"./contrast":{"import":{"types":"./dist/contrast.d.ts","default":"./dist/contrast.js"},"require":{"types":"./dist/contrast.d.cts","default":"./dist/contrast.cjs"}},"./palettes":{"import":{"types":"./dist/palettes.d.ts","default":"./dist/palettes.js"},"require":{"types":"./dist/palettes.d.cts","default":"./dist/palettes.cjs"}},"./style.css":"./dist/style.css","./styles.css":"./dist/style.css","./image-worker":"./dist/image-worker.js","./named-colors":{"import":{"types":"./dist/named-colors.d.ts","default":"./dist/named-colors.js"},"require":{"types":"./dist/named-colors.d.cts","default":"./dist/named-colors.cjs"}},"./package.json":"./package.json"},"gitHead":"014abb7120d93e3073b59e15aa536711f6b723ac","scripts":{"dev":"tsdown --watch","size":"node scripts/size-report.mjs","test":"vitest run","build":"tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs && npm run lint:publint && npm run lint:attw","release":"changeset publish","lint:attw":"attw --pack . --profile node16 --exclude-entrypoints styles.css style.css image-worker","test:unit":"vitest run --project unit","typecheck":"tsc --noEmit && tsc --noEmit -p tsconfig.tools.json","build:fast":"tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs","test:watch":"vitest","lint:publint":"publint --strict","test:browser":"vitest run --project browser","prepublishOnly":"npm run build && npm run verify:directives && npm run size","verify:directives":"node scripts/verify-directives.mjs"},"_npmUser":{"name":"re-sohail","email":"business.yasrabtv@gmail.com"},"repository":{"url":"git+https://github.com/re-sohail/chroma-panel.git","type":"git"},"_npmVersion":"11.6.2","description":"React color picker with wheel, sliders, palettes, image sampling and an eyedropper. Zero dependencies, accessible, TypeScript types included.","directories":{},"sideEffects":["**/*.css","./dist/index.js","./dist/index.cjs","./dist/wheel.js","./dist/wheel.cjs","./dist/sliders.js","./dist/sliders.cjs","./dist/palettes.js","./dist/palettes.cjs","./dist/image.js","./dist/image.cjs","./dist/pencils.js","./dist/pencils.cjs","./dist/image-worker.js"],"_nodeVersion":"24.12.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.3.0","tsdown":"0.23.0","vitest":"^5.0.0","publint":"0.3.24","react-dom":"^19.3.0","playwright":"^1.63.0","typescript":"5.9.3","@types/node":"^22.20.2","@types/react":"^19.3.0","@changesets/cli":"^3.0.2","@types/react-dom":"^19.3.0","@vitejs/plugin-react":"^6.1.1","vitest-browser-react":"^2.3.0","@arethetypeswrong/cli":"0.18.5","@vitest/browser-playwright":"^5.0.0"},"peerDependencies":{"react":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0-0","react-dom":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0-0","@types/react":"*","@types/react-dom":"*"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/chroma-panel_0.1.1_1789419104687_0.5756980329770534","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"chroma-panel","version":"0.1.2","keywords":["react","color","color-picker","colorpicker","hsva","hex","rgba","eyedropper","palette","accessible","a11y","typescript","zero-dependency","react-color-picker","colour-picker","color-wheel","swatch","macos","hsl"],"author":{"url":"https://resohail.me","name":"Sohail Khan"},"license":"MIT","_id":"chroma-panel@0.1.2","maintainers":[{"name":"re-sohail","email":"business.yasrabtv@gmail.com"}],"homepage":"https://github.com/re-sohail/chroma-panel#readme","bugs":{"url":"https://github.com/re-sohail/chroma-panel/issues"},"dist":{"shasum":"149a4284b6918740c35e44ef9a5ef66caf77e71d","tarball":"https://registry.npmjs.org/chroma-panel/-/chroma-panel-0.1.2.tgz","fileCount":202,"integrity":"sha512-oPd4K3S0uO5t1Xp8VWID7uN1lFzstjiL4qywn3zhgnHzf01Rmv5kJk/W+c+J8c1BWyKPzF2tUGK1UueGDP1nCw==","signatures":[{"sig":"MEUCIQDPIKBrJ47rDECGL54wXPHNOv94OC75XoK1yiXe5r80UQIgMgUDBHQpnJSVaQuohgy5DASKm9YBqmBvIAvQ/wywT7o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEYCIQCQkJVVUDVl1ni/1Un3R11mLiMbVpRwSIe03zTeQdvnzwIhALZYYnBPnUJjoX9gd/GFxiYOP18r+DTCQSwoohx4f1V4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":374280},"main":"./dist/index.cjs","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./core":{"import":{"types":"./dist/core.d.ts","default":"./dist/core.js"},"require":{"types":"./dist/core.d.cts","default":"./dist/core.cjs"}},"./image":{"import":{"types":"./dist/image.d.ts","default":"./dist/image.js"},"require":{"types":"./dist/image.d.cts","default":"./dist/image.cjs"}},"./panel":{"import":{"types":"./dist/panel.d.ts","default":"./dist/panel.js"},"require":{"types":"./dist/panel.d.cts","default":"./dist/panel.cjs"}},"./wheel":{"import":{"types":"./dist/wheel.d.ts","default":"./dist/wheel.js"},"require":{"types":"./dist/wheel.d.cts","default":"./dist/wheel.cjs"}},"./pencils":{"import":{"types":"./dist/pencils.d.ts","default":"./dist/pencils.js"},"require":{"types":"./dist/pencils.d.cts","default":"./dist/pencils.cjs"}},"./sliders":{"import":{"types":"./dist/sliders.d.ts","default":"./dist/sliders.js"},"require":{"types":"./dist/sliders.d.cts","default":"./dist/sliders.cjs"}},"./contrast":{"import":{"types":"./dist/contrast.d.ts","default":"./dist/contrast.js"},"require":{"types":"./dist/contrast.d.cts","default":"./dist/contrast.cjs"}},"./palettes":{"import":{"types":"./dist/palettes.d.ts","default":"./dist/palettes.js"},"require":{"types":"./dist/palettes.d.cts","default":"./dist/palettes.cjs"}},"./style.css":"./dist/style.css","./styles.css":"./dist/style.css","./image-worker":"./dist/image-worker.js","./named-colors":{"import":{"types":"./dist/named-colors.d.ts","default":"./dist/named-colors.js"},"require":{"types":"./dist/named-colors.d.cts","default":"./dist/named-colors.cjs"}},"./package.json":"./package.json"},"gitHead":"24ab4b8827a6879d6ee1f4218b11324fe371f1b1","scripts":{"dev":"tsdown --watch","size":"node scripts/size-report.mjs","test":"vitest run","build":"tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs && npm run lint:publint && npm run lint:attw","release":"changeset publish","lint:attw":"attw --pack . --profile node16 --exclude-entrypoints styles.css style.css image-worker","test:unit":"vitest run --project unit","typecheck":"tsc --noEmit && tsc --noEmit -p tsconfig.tools.json","build:fast":"tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs","test:watch":"vitest","lint:publint":"publint --strict","test:browser":"vitest run --project browser","prepublishOnly":"npm run build && npm run verify:directives && npm run size","verify:directives":"node scripts/verify-directives.mjs"},"_npmUser":{"name":"re-sohail","email":"business.yasrabtv@gmail.com"},"repository":{"url":"git+https://github.com/re-sohail/chroma-panel.git","type":"git"},"_npmVersion":"11.6.2","description":"React color picker with wheel, sliders, palettes, image sampling and an eyedropper. Zero dependencies, accessible, TypeScript types included.","directories":{},"sideEffects":["**/*.css","./dist/index.js","./dist/index.cjs","./dist/wheel.js","./dist/wheel.cjs","./dist/sliders.js","./dist/sliders.cjs","./dist/palettes.js","./dist/palettes.cjs","./dist/image.js","./dist/image.cjs","./dist/pencils.js","./dist/pencils.cjs","./dist/image-worker.js"],"_nodeVersion":"24.12.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.3.0","tsdown":"0.23.0","vitest":"^5.0.0","publint":"0.3.24","react-dom":"^19.3.0","playwright":"^1.63.0","typescript":"5.9.3","@types/node":"^22.20.2","@types/react":"^19.3.0","@changesets/cli":"^3.0.2","@types/react-dom":"^19.3.0","@vitejs/plugin-react":"^6.1.1","vitest-browser-react":"^2.3.0","@arethetypeswrong/cli":"0.18.5","@vitest/browser-playwright":"^5.0.0"},"peerDependencies":{"react":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0-0","react-dom":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0-0","@types/react":"*","@types/react-dom":"*"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/chroma-panel_0.1.2_1789559738684_0.4337087195404381","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"_id":"chroma-panel@0.1.3","bugs":{"url":"https://github.com/re-sohail/chroma-panel/issues"},"dist":{"shasum":"d0b3fe26c9aef32cf1d6fe75bf907c02685c4a30","tarball":"https://registry.npmjs.org/chroma-panel/-/chroma-panel-0.1.3.tgz","fileCount":202,"integrity":"sha512-vjEfSm9z0iSQh11L6YtpA0ds6RO0q8WSYcy6EjzP5NvXYsJbcYuFxDHFFs6P873aqtntxEjsNY/TbWK3BJWeJg==","signatures":[{"sig":"MEYCIQDVK6lhqHG607JmIummoYvWazhib1yvamvv4TCOz2+YkgIhANlKGul2d0xIAcrttiHcuKPmlOp10j48HedIRD3aZwVd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC1NSf3x/aZRxCmKAfORo18DEpbaHDFLhfuoC1Cfd0+ywIgc0B4AcCMRU4TYRBdnnTIuIpJ+pf9XTSzMtY5EMl+bJs="}],"unpackedSize":377361},"main":"./dist/index.cjs","name":"chroma-panel","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","author":{"url":"https://me.jscrate.dev","name":"Sohail Khan"},"module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./core":{"import":{"types":"./dist/core.d.ts","default":"./dist/core.js"},"require":{"types":"./dist/core.d.cts","default":"./dist/core.cjs"}},"./image":{"import":{"types":"./dist/image.d.ts","default":"./dist/image.js"},"require":{"types":"./dist/image.d.cts","default":"./dist/image.cjs"}},"./panel":{"import":{"types":"./dist/panel.d.ts","default":"./dist/panel.js"},"require":{"types":"./dist/panel.d.cts","default":"./dist/panel.cjs"}},"./wheel":{"import":{"types":"./dist/wheel.d.ts","default":"./dist/wheel.js"},"require":{"types":"./dist/wheel.d.cts","default":"./dist/wheel.cjs"}},"./pencils":{"import":{"types":"./dist/pencils.d.ts","default":"./dist/pencils.js"},"require":{"types":"./dist/pencils.d.cts","default":"./dist/pencils.cjs"}},"./sliders":{"import":{"types":"./dist/sliders.d.ts","default":"./dist/sliders.js"},"require":{"types":"./dist/sliders.d.cts","default":"./dist/sliders.cjs"}},"./contrast":{"import":{"types":"./dist/contrast.d.ts","default":"./dist/contrast.js"},"require":{"types":"./dist/contrast.d.cts","default":"./dist/contrast.cjs"}},"./palettes":{"import":{"types":"./dist/palettes.d.ts","default":"./dist/palettes.js"},"require":{"types":"./dist/palettes.d.cts","default":"./dist/palettes.cjs"}},"./style.css":"./dist/style.css","./styles.css":"./dist/style.css","./image-worker":"./dist/image-worker.js","./named-colors":{"import":{"types":"./dist/named-colors.d.ts","default":"./dist/named-colors.js"},"require":{"types":"./dist/named-colors.d.cts","default":"./dist/named-colors.cjs"}},"./package.json":"./package.json"},"gitHead":"121e8cc8d33d37c2df2ed9458f09d1e3df818b27","license":"MIT","scripts":{"dev":"tsdown --watch","size":"node scripts/size-report.mjs","test":"vitest run","build":"tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs && npm run lint:publint && npm run lint:attw","release":"changeset publish","lint:attw":"attw --pack . --profile node16 --exclude-entrypoints styles.css style.css image-worker","test:unit":"vitest run --project unit","typecheck":"tsc --noEmit && tsc --noEmit -p tsconfig.tools.json","build:fast":"tsdown && node scripts/emit-css.mjs && node scripts/strip-sourcemaps.mjs","test:watch":"vitest","lint:publint":"publint --strict","test:browser":"vitest run --project browser","readme:images":"node scripts/capture-readme-images.mjs","prepublishOnly":"npm run build && npm run verify:directives && npm run size","verify:directives":"node scripts/verify-directives.mjs"},"version":"0.1.3","_npmUser":{"name":"re-sohail","email":"business.yasrabtv@gmail.com"},"homepage":"https://chroma-panel.jscrate.dev","keywords":["react-color-picker","color-picker","react","react-component","color","colorpicker","colour-picker","color-input","color-wheel","color-palette","image-color-picker","eyedropper","palette","swatch","hex","rgb","rgba","hsl","hsv","hsva","accessible","a11y","typescript","zero-dependency","nextjs","macos"],"repository":{"url":"git+https://github.com/re-sohail/chroma-panel.git","type":"git"},"_npmVersion":"11.6.2","description":"React color picker component with a color wheel, sliders, palettes, image sampling and an eyedropper. Accessible, zero dependencies, TypeScript included.","directories":{},"maintainers":[{"name":"re-sohail","email":"business.yasrabtv@gmail.com"}],"sideEffects":["**/*.css","./dist/index.js","./dist/index.cjs","./dist/wheel.js","./dist/wheel.cjs","./dist/sliders.js","./dist/sliders.cjs","./dist/palettes.js","./dist/palettes.cjs","./dist/image.js","./dist/image.cjs","./dist/pencils.js","./dist/pencils.cjs","./dist/image-worker.js"],"_nodeVersion":"24.12.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.3.0","tsdown":"0.23.0","vitest":"^5.0.0","publint":"0.3.24","react-dom":"^19.3.0","playwright":"^1.63.0","typescript":"5.9.3","@types/node":"^22.20.2","@types/react":"^19.3.0","@changesets/cli":"^3.0.2","@types/react-dom":"^19.3.0","@vitejs/plugin-react":"^6.1.1","vitest-browser-react":"^2.3.0","@arethetypeswrong/cli":"0.18.5","@vitest/browser-playwright":"^5.0.0"},"peerDependencies":{"react":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0-0","react-dom":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0-0","@types/react":"*","@types/react-dom":"*"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chroma-panel_0.1.3_1789576804283_0.29573937434929665"}}},"time":{"created":"2026-09-14T19:33:14.113Z","modified":"2026-09-16T16:40:04.575Z","0.1.0":"2026-09-14T19:33:14.533Z","0.1.1":"2026-09-14T20:51:44.787Z","0.1.2":"2026-09-16T11:55:38.766Z","0.1.3":"2026-09-16T16:40:04.397Z"},"bugs":{"url":"https://github.com/re-sohail/chroma-panel/issues"},"author":{"url":"https://me.jscrate.dev","name":"Sohail Khan"},"license":"MIT","homepage":"https://chroma-panel.jscrate.dev","keywords":["react-color-picker","color-picker","react","react-component","color","colorpicker","colour-picker","color-input","color-wheel","color-palette","image-color-picker","eyedropper","palette","swatch","hex","rgb","rgba","hsl","hsv","hsva","accessible","a11y","typescript","zero-dependency","nextjs","macos"],"repository":{"url":"git+https://github.com/re-sohail/chroma-panel.git","type":"git"},"description":"React color picker component with a color wheel, sliders, palettes, image sampling and an eyedropper. Accessible, zero dependencies, TypeScript included.","maintainers":[{"name":"re-sohail","email":"business.yasrabtv@gmail.com"}],"readme":"[![chroma-panel, a React color picker: a color wheel, a photo with the palette extracted from it, and a 120-color pencil grid](https://raw.githubusercontent.com/re-sohail/chroma-panel/main/assets/hero.png)](https://chroma-panel.jscrate.dev)\n\n[![npm](https://img.shields.io/npm/v/chroma-panel?color=2d7ff9)](https://www.npmjs.com/package/chroma-panel)\n<!-- [![install size](https://img.shields.io/npm/unpacked-size/chroma-panel?color=2d7ff9&label=install%20size)](https://www.npmjs.com/package/chroma-panel) -->\n[![downloads](https://img.shields.io/npm/dw/chroma-panel?color=2d7ff9)](https://www.npmjs.com/package/chroma-panel)\n[![docs](https://img.shields.io/badge/docs-chroma--panel.jscrate.dev-2d7ff9)](https://chroma-panel.jscrate.dev)\n[![license](https://img.shields.io/npm/l/chroma-panel?color=2d7ff9)](./LICENSE)\n\n# chroma-panel\n\nA React color picker component with the look and feel of the macOS color panel: a color wheel, sliders, palettes, color sampling from an image, and an eyedropper.\n\n**[Documentation and live demo](https://chroma-panel.jscrate.dev)** · [Quick start](https://chroma-panel.jscrate.dev/react/overview/quick-start) · [Comparison](https://chroma-panel.jscrate.dev/react/overview/comparison) · [FAQ](https://chroma-panel.jscrate.dev/react/overview/faq) · [Releases](https://chroma-panel.jscrate.dev/react/overview/releases)\n\n- Five ways to pick a color: a [wheel](https://chroma-panel.jscrate.dev/react/modes/wheel), [RGB, HSL and HSB sliders](https://chroma-panel.jscrate.dev/react/modes/sliders), [palettes](https://chroma-panel.jscrate.dev/react/modes/palettes), a [120-color pencil grid](https://chroma-panel.jscrate.dev/react/modes/pencils), and [sampling from an image](https://chroma-panel.jscrate.dev/react/modes/image)\n- An [eyedropper](https://chroma-panel.jscrate.dev/react/utils/use-eyedropper) for grabbing a color from anywhere on screen, where the browser supports it\n- Drops into a [form](https://chroma-panel.jscrate.dev/react/handbook/forms) like an `<input>`, with `name`, `required` and `form.reset()`\n- [Accessible](https://chroma-panel.jscrate.dev/react/overview/accessibility): every color channel is a real range input, so keyboards and screen readers work\n- No runtime dependencies, TypeScript types included, ESM and CommonJS\n\n## Install\n\n```bash\nnpm install chroma-panel\n```\n\n## Use it\n\n```tsx\nimport { useState } from 'react';\nimport { ColorInput } from 'chroma-panel';\n\nexport function Example() {\n  const [color, setColor] = useState('#3366cc');\n\n  return (\n    <ColorInput\n      value={color}\n      onChange={(c) => setColor(c.hex)}\n      onChangeComplete={(c) => save(c.hex)}\n    />\n  );\n}\n```\n\nNo CSS import and no provider. [`ColorInput`](https://chroma-panel.jscrate.dev/react/components/color-input) renders a swatch button that opens the panel in a popover.\n\n`onChange` fires continuously while you drag, `onChangeComplete` once when you let go. [Which to use](https://chroma-panel.jscrate.dev/react/handbook/controlled#onchange-vs-onchangecomplete).\n\n## Inline panel\n\n[`ChromaPanel`](https://chroma-panel.jscrate.dev/react/components/chroma-panel) is the same panel without the popover, for when you want it on the page:\n\n```tsx\nimport { ChromaPanel } from 'chroma-panel';\n\n<ChromaPanel defaultValue=\"#3366cc\" modes={['wheel']} showTitleBar={false} />\n```\n\n## Pick colors from an image\n\nThe image mode takes a dropped or chosen file and shows its dominant colors as swatches. The sampler behind it is exported too, for when you want the palette without the panel:\n\n```ts\nimport { extractPalette } from 'chroma-panel';\n\nconst { swatches } = await extractPalette(file, { maxColors: 8 });\n// [{ hex: '#3e5f8a', rgb: [62, 95, 138], population: 4213 }, ...]\n```\n\nIt takes a `File`, a `Blob` or an image URL, and downscales large images before reading them. More in the [image mode docs](https://chroma-panel.jscrate.dev/react/modes/image).\n\n## Smaller bundle\n\nImporting `chroma-panel` registers all five modes. If you only need one or two, import the shell and add them yourself:\n\n```tsx\nimport { ChromaPanel } from 'chroma-panel/panel';\nimport 'chroma-panel/wheel';\n\n<ChromaPanel modes={['wheel']} />\n```\n\nThat is 14.1 kB instead of 22.2 kB. Every mode has its own entry point — see [entry points](https://chroma-panel.jscrate.dev/react/utils/entry-points).\n\n## Theming\n\n![The chroma-panel React color picker in light and dark themes: the color wheel on a light page and the RGB sliders on a dark one](https://raw.githubusercontent.com/re-sohail/chroma-panel/main/assets/themes.png)\n\nThe panel follows the system color scheme. To change how it looks, override the CSS variables or pass your own class per part:\n\n```tsx\n<ColorInput classNames={{ root: 'shadow-2xl', trigger: 'h-8 w-12' }} />\n```\n\nFull details in the [theming guide](https://chroma-panel.jscrate.dev/react/handbook/theming). Using Tailwind? See [styling with Tailwind](https://chroma-panel.jscrate.dev/react/handbook/tailwind).\n\n## Why the color survives a round trip\n\nHSV has two places where information disappears. At zero saturation there is no hue to speak of, and at zero brightness there is neither. Pickers that keep their state as RGB or hex hit this constantly: drag brightness to black and back up, and the hue you picked comes back as red.\n\nThis one keeps the full HSVA value and merges changes into it instead of replacing it, so dragging to an extreme and back returns the color you started with.\n\n## Size\n\nMeasured as the increase in a real Vite production build, gzipped, with React external.\n\n| What you import | Added to your app |\n| --- | --- |\n| all five modes | 22.2 kB |\n| shell plus one mode | 14.1 kB |\n\n`dependencies` is empty. `react` and `react-dom` are peer dependencies, so the copy already in your app is the one that gets used.\n\n## Compatibility\n\n| | |\n| --- | --- |\n| React | 16.14 and newer, including 19 |\n| React DOM | Required. The popover renders through `createPortal` |\n| Browsers | Chrome 123, Firefox 120, Safari 17.5 |\n| TypeScript | Types included, no `@types` package needed |\n| Modules | ESM and CommonJS |\n| Server rendering | Safe. Browser-dependent files are marked `'use client'`. [Next.js and SSR](https://chroma-panel.jscrate.dev/react/handbook/server-rendering) |\n\nThe browser versions come from `light-dark()`, a CSS function the stylesheet relies on. [What happens on older browsers](https://chroma-panel.jscrate.dev/react/handbook/browser-support).\n\n## Help\n\n- Documentation: [chroma-panel.jscrate.dev](https://chroma-panel.jscrate.dev), including the [FAQ](https://chroma-panel.jscrate.dev/react/overview/faq) and [common mistakes](https://chroma-panel.jscrate.dev/react/handbook/common-mistakes)\n- Reference in this repository: [API](docs/api.md) and [guides](docs/guides.md)\n- Questions and bug reports: [github.com/re-sohail/chroma-panel/issues](https://github.com/re-sohail/chroma-panel/issues)\n\n## License\n\nMIT © [Sohail Khan](https://me.jscrate.dev)\n","readmeFilename":"README.md"}