{"_id":"@dayflow/blossom-color-picker-react","_rev":"6-3eb9ab431bc861fbf44a6e7a192314b7","name":"@dayflow/blossom-color-picker-react","dist-tags":{"latest":"1.3.0"},"versions":{"1.0.0":{"name":"@dayflow/blossom-color-picker-react","version":"1.0.0","keywords":["react","color-picker","blossom","ui-component","animation"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-react@1.0.0","maintainers":[{"name":"jayceli","email":"lijuncai552@gmail.com"}],"homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"dist":{"shasum":"e9dc93623fdfcef6dee5a33d2a0e4a170c831c25","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-react/-/blossom-color-picker-react-1.0.0.tgz","fileCount":9,"integrity":"sha512-gtLS+BPa8juOK3QWVZS9QZEzMUR84Syk7SPh9XVYFH7V9Op3UsN9YyTYG1+wTaBgh0gsLYmAQbx/AT9x6Ukm5g==","signatures":[{"sig":"MEYCIQDu/SRKnJR6dWlYK/trcl49SVb8hIhn88VOw3+D70ttvAIhAJRktWe+qj0QbRcwEBodmWggACEfuQYGkxafKIgJMKZm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32574},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"a02571c3988b30cf17c75ace2f658090c921f8ba","scripts":{"dev":"vite build --watch","build":"tsc && vite build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/react"},"_npmVersion":"11.7.0","description":"React wrapper for Blossom Color Picker","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@dayflow/blossom-color-picker":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.20","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.2.66","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.22"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-react_1.0.0_1770623085972_0.30661906113554815","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dayflow/blossom-color-picker-react","version":"1.0.1","keywords":["react","color-picker","blossom","ui-component","animation"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-react@1.0.1","maintainers":[{"name":"jayceli","email":"lijuncai552@gmail.com"}],"homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"dist":{"shasum":"f649f6c727739609a90b27bc01fea92af0cd4e71","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-react/-/blossom-color-picker-react-1.0.1.tgz","fileCount":9,"integrity":"sha512-CeFYA3DnDM1e7+OJhLsviB1vNK8Ueibm69dvTeHxx51rIBxaa9LKWZkmIZufi8Fxm3tP5xt3jWDL3hDI2Gu3hQ==","signatures":[{"sig":"MEUCIQDRHmL7msYB5LoZCBl3jMVtkmsPVEQ/SrwIZjbjRQ1W+gIgWGqY3c0febPjD2H80MwY3xZ1XFDqrwUsgNZ/lU4l0kk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32574},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"e6ee764010b533d84cd7cc365dc7a64ee1aa81ca","scripts":{"dev":"vite build --watch","build":"tsc && vite build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/react"},"_npmVersion":"11.7.0","description":"React wrapper for Blossom Color Picker","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@dayflow/blossom-color-picker":"^2.0.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.20","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.2.66","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.22"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-react_1.0.1_1770725245931_0.13283201594208305","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@dayflow/blossom-color-picker-react","version":"1.1.0","keywords":["react","color-picker","blossom","ui-component","animation"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-react@1.1.0","maintainers":[{"name":"jayceli","email":"lijuncai552@gmail.com"}],"homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"dist":{"shasum":"fb15082f9347d7887c2bae198b342c507782f2fc","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-react/-/blossom-color-picker-react-1.1.0.tgz","fileCount":9,"integrity":"sha512-8VO85il4vtBLf88Wh966HjR5DidFuBZpwM/eXTZCnUCPv0qxy2Pj9gStDNfpI6Yh7wnubU+1TsoMMBOnIg8kyA==","signatures":[{"sig":"MEUCIH/4Ef6WDfH0iAwksfWm4V5T6lUTlAOZ0ryEHHV3zVQSAiEAiMA7VGjZrVQqlP6+ImH5k5r5z/ws1urnPkQkCqwCzE4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34042},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"ee901ab4ede65aeeb1d90fbbc10768d415c31be1","scripts":{"dev":"vite build --watch","build":"tsc && vite build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/react"},"_npmVersion":"11.7.0","description":"React wrapper for Blossom Color Picker","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@dayflow/blossom-color-picker":"^2.1.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.20","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.2.66","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.22"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-react_1.1.0_1772620454150_0.10772348898518413","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@dayflow/blossom-color-picker-react","version":"1.2.0","keywords":["animation","blossom","color-picker","react","ui-component"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-react@1.2.0","maintainers":[{"name":"jayceli","email":"lijuncai552@gmail.com"}],"homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"dist":{"shasum":"83998449ea5c67bc3358d38ad080d49ded394482","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-react/-/blossom-color-picker-react-1.2.0.tgz","fileCount":11,"integrity":"sha512-k+QFDSXfcBUsqPJ+SRah6FkTICTFqdHMnQb1EJ/K8KaSlFZG0+T51870xdHQkU4iA7tcOR1NUMVet9D4eg2LtA==","signatures":[{"sig":"MEUCIQC3EAnQHuDsUJsO1QwpG+4g4jH0EoJ4nFMcv15KdjKHLQIgelJf+f3umxwHDfx8qtft91qFF4vNvrTELT8bt09Gjm0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52824},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"a968994589cdbaeb51e46c07a092274e2eec3d14","scripts":{"dev":"vite build --watch","build":"tsc && vite build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/react"},"_npmVersion":"11.7.0","description":"React wrapper for Blossom Color Picker","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@dayflow/blossom-color-picker":"^2.2.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.20","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.2.66","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.22"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-react_1.2.0_1774925278096_0.7747345956958769","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@dayflow/blossom-color-picker-react","version":"1.2.1","keywords":["animation","blossom","color-picker","react","ui-component"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-react@1.2.1","maintainers":[{"name":"jayceli","email":"lijuncai552@gmail.com"}],"homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"dist":{"shasum":"6ddd1cc725f8148a18704db5011c7bf796606fe5","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-react/-/blossom-color-picker-react-1.2.1.tgz","fileCount":11,"integrity":"sha512-Bf+LH7FV3dF5FSZbST5WBAs54c3ZeIlzC5qaj5YpEXiqGFZwiPqgXJ8BQ0nJ63WBtIHVAzTLMY+ONkkUYXAknw==","signatures":[{"sig":"MEUCIB+0QGxIMurGO1L3vhE0a+nKk+AYoZMYfQaC+T0T6zToAiEA2KsasqMysQByZpvpIipNIjwlJ56IgfCBewFdOC6ItLw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52824},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"7cfb9d8e2da598548ab41ad89ac0afc319b0ec46","scripts":{"dev":"vite build --watch","build":"tsc && vite build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/react"},"_npmVersion":"11.7.0","description":"React wrapper for Blossom Color Picker","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@dayflow/blossom-color-picker":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.20","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.2.66","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.22"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-react_1.2.1_1777989548642_0.6806811410278284","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@dayflow/blossom-color-picker-react","version":"1.3.0","description":"React wrapper for Blossom Color Picker","keywords":["animation","blossom","color-picker","react","ui-component"],"license":"MIT","author":{"name":"Jayce Li"},"repository":{"type":"git","url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","directory":"packages/react"},"type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"dependencies":{"@dayflow/blossom-color-picker":"^2.3.0"},"devDependencies":{"@types/react":"^18.3.31","@types/react-dom":"^18.3.7","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.9.3","vite":"^8.2.2","vite-plugin-dts":"^5.1.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"scripts":{"build":"tsc && vite build","dev":"vite build --watch","typecheck":"tsc --noEmit"},"_id":"@dayflow/blossom-color-picker-react@1.3.0","bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","_integrity":"sha512-QxzODfTCeUSC1NMl4hdiEd7phbMiJKKn0YM7lMOzroY/+pAjpkypi99c7ylNtpk6LslyYLJaKVewfrbf0fnjSg==","_resolved":"/private/var/folders/m4/c6nx4v2d50z61pb3qjfmnq_c0000gq/T/280d08a4cabbed357c6a06b15a5e1fdd/dayflow-blossom-color-picker-react-1.3.0.tgz","_from":"file:dayflow-blossom-color-picker-react-1.3.0.tgz","_nodeVersion":"22.19.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-QxzODfTCeUSC1NMl4hdiEd7phbMiJKKn0YM7lMOzroY/+pAjpkypi99c7ylNtpk6LslyYLJaKVewfrbf0fnjSg==","shasum":"c1a5bd0d53c2047a142c1ff391a4d9f961552a11","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-react/-/blossom-color-picker-react-1.3.0.tgz","fileCount":11,"unpackedSize":51636,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDnHbxk/yZElIjpq8T+kZCF+r4edphPbRm1kl9/akX7YgIhAN3q7cZrbdgZXWTImsiYD60sflllJBa/2h5tyJnAZSIO"}]},"_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"directories":{},"maintainers":[{"name":"jayceli","email":"lijuncai552@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/blossom-color-picker-react_1.3.0_1788996764504_0.09713833538341077"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-09T07:44:45.865Z","modified":"2026-09-09T23:32:44.841Z","1.0.0":"2026-02-09T07:44:46.124Z","1.0.1":"2026-02-10T12:07:26.079Z","1.1.0":"2026-03-04T10:34:14.331Z","1.2.0":"2026-03-31T02:47:58.243Z","1.2.1":"2026-05-05T13:59:08.761Z","1.3.0":"2026-09-09T23:32:44.653Z"},"bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"author":{"name":"Jayce Li"},"license":"MIT","homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","keywords":["animation","blossom","color-picker","react","ui-component"],"repository":{"type":"git","url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","directory":"packages/react"},"description":"React wrapper for Blossom Color Picker","maintainers":[{"name":"jayceli","email":"lijuncai552@gmail.com"}],"readme":"# Blossom Color Picker\n\n[![npm version](https://img.shields.io/npm/v/@dayflow/blossom-color-picker.svg)](https://www.npmjs.com/package/@dayflow/blossom-color-picker)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/dayflow-js/BlossomColorPicker/pulls)\n[![GitHub license](https://img.shields.io/github/license/dayflow-js/BlossomColorPicker)](https://github.com/dayflow-js/BlossomColorPicker/blob/main/LICENSE)\n\nA beautiful, blooming color picker for Web. Available as a standalone vanilla JS class, or as a thin React / Vue / Svelte / Angular wrapper.\n\nhttps://github.com/user-attachments/assets/553ee0ff-1f52-497f-bc8f-cee9a7b91d66\n\n## Packages\n\n| Package | Description | Version |\n| :-------------------------------------- | :---------------------------------- | :------ |\n| `@dayflow/blossom-color-picker` | Vanilla JS core (zero dependencies) | 2.0.0 |\n| `@dayflow/blossom-color-picker-react` | React wrapper | 1.0.0 |\n| `@dayflow/blossom-color-picker-vue` | Vue 3 wrapper | 1.0.0 |\n| `@dayflow/blossom-color-picker-svelte` | Svelte wrapper | 1.0.0 |\n| `@dayflow/blossom-color-picker-angular` | Angular wrapper | 1.0.0 |\n\n## Installation\n\n```bash\n# Vanilla JS (core)\nnpm install @dayflow/blossom-color-picker\n\n# React\nnpm install @dayflow/blossom-color-picker-react\n\n# Vue 3\nnpm install @dayflow/blossom-color-picker-vue\n\n# Svelte\nnpm install @dayflow/blossom-color-picker-svelte\n\n# Angular\nnpm install @dayflow/blossom-color-picker-angular\n```\n\n## Usage\n\n### Vanilla JS\n\n```js\nimport { BlossomColorPicker } from '@dayflow/blossom-color-picker';\nimport '@dayflow/blossom-color-picker/styles.css';\n\nconst picker = new BlossomColorPicker(document.getElementById('picker'), {\n onChange: color => console.log(color.hex),\n});\n\n// Programmatic control\npicker.expand();\npicker.collapse();\npicker.toggle();\npicker.setValue({ hue: 200, saturation: 50, alpha: 100, layer: 'outer' });\npicker.setOptions({ disabled: true });\npicker.destroy();\n```\n\n### React\n\n```tsx\nimport { BlossomColorPicker } from '@dayflow/blossom-color-picker-react';\n\nfunction App() {\n const [color, setColor] = useState({\n hue: 330,\n saturation: 70,\n alpha: 100,\n layer: 'outer' as const,\n });\n\n return setColor(c)} />;\n}\n```\n\n### Vue 3\n\n```vue\n\n\n\n```\n\n### Svelte\n\n```svelte\n\n\n\n```\n\n### Angular\n\n```typescript\nimport { Component } from '@angular/core';\nimport {\n BlossomColorPickerComponent,\n type BlossomColorPickerColor,\n} from '@dayflow/blossom-color-picker-angular';\n\n@Component({\n selector: 'app-root',\n imports: [BlossomColorPickerComponent],\n template: `\n \n `,\n})\nexport class App {\n color = { hue: 330, saturation: 70, alpha: 100, layer: 'outer' as const };\n\n onColorChange(c: BlossomColorPickerColor) {\n this.color = c;\n }\n}\n```\n\n## Options / Props\n\nAll packages share the same set of options. In React they are passed as JSX props; in Vue as component props (with events via `@change` / `@collapse`); in Svelte as callback props (`onchange` / `oncollapse`); in Angular as `@Input()` bindings (with events via `(colorChange)` / `(colorCollapse)`).\n\n| Option | Type | Default | Description |\n| :-------------------- | :----------------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------- |\n| `value` | `BlossomColorPickerValue` | - | Controlled value of the picker. |\n| `defaultValue` | `BlossomColorPickerValue` | `{ hue: 330, saturation: 70, alpha: 50, layer: 'outer' }` | Initial value for uncontrolled mode. |\n| `colors` | `ColorInput[]` | (Default 18-color set) | Color list, automatically sorted and distributed into layers. |\n| `onChange` | `(color: BlossomColorPickerColor) => void` | - | Called when color changes. Vue: `@change`. Svelte: `onchange`. Angular: `(colorChange)`. |\n| `onCollapse` | `(color: BlossomColorPickerColor) => void` | - | Called when the picker collapses. Vue: `@collapse`. Svelte: `oncollapse`. Angular: `(colorCollapse)`. |\n| `disabled` | `boolean` | `false` | Whether the picker is disabled. |\n| `openOnHover` | `boolean` | `false` | If true, opens the picker on hover instead of click. |\n| `initialExpanded` | `boolean` | `false` | Whether the picker starts expanded. |\n| `animationDuration` | `number` | `300` | Duration of the blooming animation in ms. |\n| `showAlphaSlider` | `boolean` | `true` | Whether to show the saturation arc slider. |\n| `coreSize` | `number` | `32` | Diameter of the central circle in px. |\n| `petalSize` | `number` | `32` | Diameter of individual color petals in px. |\n| `showCoreColor` | `boolean` | `true` | When true, the core shows the selected color while expanded. |\n| `sliderPosition` | `'top' \\| 'bottom' \\| 'left' \\| 'right'` | `'right'` | Fixed position for the arc slider. |\n| `adaptivePositioning` | `boolean` | `true` | **Smart Shifter**: Automatically shifts the picker to stay within viewport and repositions the slider for best visibility. |\n| `className` / `class` | `string` | `\"\"` | Additional CSS class (React: `className`, Svelte: `class`). |\n\n### Vanilla JS Methods\n\nThe core class exposes these additional methods:\n\n| Method | Description |\n| :----------------- | :---------------------------------------------------- |\n| `setValue(value)` | Set the current color value. |\n| `getValue()` | Get the current color as a `BlossomColorPickerColor`. |\n| `expand()` | Open the picker. |\n| `collapse()` | Close the picker. |\n| `toggle()` | Toggle open/close. |\n| `setOptions(opts)` | Update any options at runtime. |\n| `destroy()` | Remove all DOM elements and event listeners. |\n\n## Features\n\n### Smart Shifter & Adaptive UI\n\nThe picker is built for all screen sizes. When `adaptivePositioning` is enabled:\n\n- **Viewport Shifting**: If the expanded picker would overflow the screen edge (common on mobile), it automatically shifts itself into view.\n- **Auto Slider Positioning**: The Arc Slider automatically moves to the side with the most available space (Top, Bottom, Left, or Right).\n- **Dark Mode Ready**: The background automatically adapts to your theme, using a soft, tinted overlay of the currently selected color.\n\n### Geometric Nesting\n\nOur \"Bloom\" algorithm uses trigonometric calculations to ensure:\n\n- **Zero Gaps**: Petals aggressively \"hug\" the core and nestle deep into the \"valleys\" of previous layers.\n- **Staggered Layout**: Adjacent layers are automatically staggered to create a dense, natural blossom effect regardless of the color count.\n\n## Type Reference\n\n### `BlossomColorPickerValue`\n\nThe value object used for controlled / uncontrolled state.\n\n| Field | Type | Description |\n| :------------------- | :------------------- | :---------------------------------------------------- |\n| `hue` | `number` | Hue angle (0-360). |\n| `saturation` | `number` | Slider position (0-100). 0 = bright, 100 = dark. |\n| `lightness` | `number?` | HSL lightness (auto-computed from slider if omitted). |\n| `originalSaturation` | `number?` | Base saturation of the selected petal. |\n| `alpha` | `number` | Alpha value (0-100). |\n| `layer` | `'inner' \\| 'outer'` | Which layer the selected petal belongs to. |\n\n### `BlossomColorPickerColor`\n\nExtends `BlossomColorPickerValue` — returned by `onChange` and `onCollapse`.\n\n| Field | Type | Description |\n| :----- | :------- | :--------------------------------------- |\n| `hex` | `string` | Hex color string, e.g. `\"#6586E5\"`. |\n| `hsl` | `string` | HSL string, e.g. `\"hsl(225, 71%, 65%)\"`. |\n| `hsla` | `string` | HSLA string with alpha. |\n\n### `ColorInput`\n\n```ts\ntype ColorInput = string | { h: number; s: number; l: number };\n```\n\n### Color Formats\n\nThe `colors` option accepts any of the following formats, and they can be mixed:\n\n```js\n// Vanilla JS\nconst picker = new BlossomColorPicker(el, {\n colors: [\n '#FF6B6B', // hex\n 'rgb(107, 203, 119)', // rgb()\n 'rgba(65, 105, 225, 0.9)', // rgba()\n 'hsl(280, 70%, 55%)', // hsl()\n 'hsl(200 80% 60%)', // hsl() space-separated\n { h: 45, s: 90, l: 65 }, // HSL object\n ],\n});\n```\n\n```tsx\n// React\n\n```\n\n## Project Structure\n\nThis is a monorepo with five packages:\n\n```\npackages/\n core/ @dayflow/blossom-color-picker — standalone vanilla JS class\n react/ @dayflow/blossom-color-picker-react — thin React wrapper\n vue/ @dayflow/blossom-color-picker-vue — thin Vue 3 wrapper\n svelte/ @dayflow/blossom-color-picker-svelte — thin Svelte 5 wrapper\n angular/ @dayflow/blossom-color-picker-angular — thin Angular wrapper\n```\n\nThe React, Vue, Svelte and Angular adapters are lightweight wrappers (~2 KB each) that mount the core instance into a container element and sync framework props/events to it.\n\nMade by [Jayce Li](https://github.com/JayceV552), idea from [@lichinlin](https://x.com/lichinlin/status/2019084548072689980).\n","readmeFilename":"README.md"}