{"_id":"@connor_yang331/color-is-box","name":"@connor_yang331/color-is-box","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@connor_yang331/color-is-box","version":"1.0.0","description":"Zero-dependency 3D RGB/HSB/OKLCH color picker — Web Component + JS API, vanilla-colorful style","type":"module","main":"dist/color-is-box.js","module":"dist/color-is-box.js","types":"src/index.ts","exports":{".":"./dist/color-is-box.js","./element":"./dist/color-is-box-element.js"},"keywords":["color-picker","web-component","zero-dependency","oklch","hsb","rgb","custom-element"],"license":"MIT","scripts":{"build":"node build.mjs"},"devDependencies":{"esbuild":"^0.25.0"},"gitHead":"a474028c745888b5b7710f507fddf2825ca2e2da","_id":"@connor_yang331/color-is-box@1.0.0","_nodeVersion":"22.22.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-NxByVNYp+NZAYvEwPRfBtqlk+y/oL4Te+PCUy5p4PdtfUGvpzGkj3jYu/1wn3Zrt+osCkGGkDQ8TiRsTedZuZg==","shasum":"baf799e0f62252aa29750f55ca97ac56733dc733","tarball":"https://registry.npmjs.org/@connor_yang331/color-is-box/-/color-is-box-1.0.0.tgz","fileCount":14,"unpackedSize":182568,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIH6aDJJieaRCjGjQLOca28x/+52RkTybneWbX/uPVgeTAiEAoBhglx5aPlrB6u0XcgG8qEagiDWAXsEBGXD9EUKGKZ4="}]},"_npmUser":{"name":"connor_yang331","email":"connor.yang69@gmail.com"},"directories":{},"maintainers":[{"name":"connor_yang331","email":"connor.yang69@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/color-is-box_1.0.0_1786721037143_0.16825052196709267"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-14T15:23:56.929Z","1.0.0":"2026-08-14T15:23:57.290Z","modified":"2026-08-14T15:23:57.510Z"},"maintainers":[{"name":"connor_yang331","email":"connor.yang69@gmail.com"}],"description":"Zero-dependency 3D RGB/HSB/OKLCH color picker — Web Component + JS API, vanilla-colorful style","keywords":["color-picker","web-component","zero-dependency","oklch","hsb","rgb","custom-element"],"license":"MIT","readme":"# @ambient-ui/color-is-box\n\nZero-dependency 3D **RGB / HSB / OKLCH** color picker — a color cube rendered as an\nisometric hexagon. Inspired by [vanilla-colorful](https://github.com/web-padawan/vanilla-colorful):\ntiny, framework-agnostic, works everywhere.\n\n## Features\n\n- 3D color cube (isometric hexagon) with drag-to-pick on faces and axes\n- RGB / HSB / OKLCH modes (switch axes, letters follow color positions)\n- Double-click inverts the whole cube (white ↔ black)\n- Corner buttons: random color (left) / reset to center (right)\n- Hex / channel inputs (click to copy, type to set), theme-aware\n- Web Component: `<color-is-box>` + vanilla JS API\n- Zero dependencies, zero build needed (IIFE) — also ESM + source\n\n## Usage — Web Component (vanilla-colorful style)\n\n```html\n<script src=\"https://unpkg.com/@ambient-ui/color-is-box/dist/color-is-box-element.iife.js\"></script>\n\n<color-is-box value=\"#ff0000\" mode=\"hsb\" size=\"300\"></color-is-box>\n<script>\n  const picker = document.querySelector('color-is-box');\n  picker.addEventListener('change', (e) => console.log(e.detail.hex)); // full ColorOutput\n  picker.value = '#008fa0';      // set programmatically\n  picker.mode = 'oklch';         // switch mode\n</script>\n```\n\n### Attributes / properties\n\n| Attribute | Type | Default | Notes |\n| --- | --- | --- | --- |\n| `value` | hex string | `#ffffff` | current color (two-way) |\n| `mode` | `rgb` / `hsb` / `oklch` | `rgb` | color space |\n| `size` | number | `280` | picker width in px |\n\n### Events\n\n| Event | Detail |\n| --- | --- |\n| `change` | full `ColorOutput` `{ rgb, hsb, oklch, hex }` |\n| `color-changed` | hex string (vanilla-colorful compatible name) |\n\n## Usage — JS API\n\n```js\nimport { createColorPicker } from './dist/color-is-box.js';\n\nconst picker = createColorPicker(holderEl, {\n  initialColor: { r: 255, g: 255, b: 255 },\n  size: 280,\n  controls: true,\n});\npicker.on('change', (c) => console.log(c.hex, c.rgb, c.hsb, c.oklch));\npicker.setColor({ r: 0, g: 0, b: 0 });\npicker.setMode('hsb');\n```\n\n## Files\n\n- `src/` — TypeScript source (index, element, color-math, renderer, interaction, types, style)\n- `dist/color-is-box.js` / `.iife.js` — component (ESM / global `ColorIsBox`)\n- `dist/color-is-box-element.js` / `.iife.js` — Web Component (ESM / registers `<color-is-box>`)\n- `demo/index.html` — JS API demo\n- `demo/web-component.html` — Web Component demo\n\n## Build\n\n```bash\nnpm run build   # esbuild → 4 bundles (component + element, ESM + IIFE)\n```\n\n## Demo\n\nDouble-click `demo/index.html` or `demo/web-component.html` (no server needed).\n\n## Inspiration\n\nAPI shape follows [vanilla-colorful](https://github.com/web-padawan/vanilla-colorful)\n(value attribute, change/color-changed events, tiny zero-dep footprint).","readmeFilename":"README.md","_rev":"1-17a4777aa5340407a6cb1476d562d070"}