{"_id":"@dayflow/blossom-color-picker-angular","_rev":"6-f5836b21621a11241f782e3a3a98b2ae","name":"@dayflow/blossom-color-picker-angular","dist-tags":{"latest":"1.3.0"},"versions":{"1.0.0":{"name":"@dayflow/blossom-color-picker-angular","version":"1.0.0","keywords":["angular","color-picker","blossom","ui-component","animation"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-angular@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":"8f60e7164ac4328e5272f6a3b30de61a5c8a55a3","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-angular/-/blossom-color-picker-angular-1.0.0.tgz","fileCount":8,"integrity":"sha512-RQD0LJ2F4FTfHyKQpn7jQ0KwiJsMa56JI+Ou5JuouW+PxQjbwh6iThwyVSaAvntm7vF/tvNi0zZdPMvegT5VtA==","signatures":[{"sig":"MEUCIQC76Ud5yfeB4aJXtuhjLL8fo/dGDiLdVELnOjx0CDS9sQIgIHgUvZQ3F2wSk6YUlScANEF0mUGNPIoWaJkgd7xjF7g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28299},"module":"fesm2022/dayflow-blossom-color-picker-angular.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/dayflow-blossom-color-picker-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"a02571c3988b30cf17c75ace2f658090c921f8ba","typings":"index.d.ts","_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/angular"},"_npmVersion":"11.7.0","description":"Angular wrapper for Blossom Color Picker","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.19.0","dependencies":{"tslib":"^2.3.0","@dayflow/blossom-color-picker":"^2.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@angular/common":">=16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-angular_1.0.0_1770623094738_0.9189605535663259","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dayflow/blossom-color-picker-angular","version":"1.0.1","keywords":["angular","color-picker","blossom","ui-component","animation"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-angular@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":"7d1765530e6c773b2fc547dea05046e6e7aa5a02","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-angular/-/blossom-color-picker-angular-1.0.1.tgz","fileCount":8,"integrity":"sha512-rLcHNX1nyYyc40feDFOmZYiEvcRxfJnQu9UpDURqxvmwcDevxaK9i8ahpJEPIJEHUj6mm0HVE35T6QJUq99ZSw==","signatures":[{"sig":"MEUCIQDJ0LXgJuRn1zM3VSMkMg6dQJXRIVZzIRXKGNC3s3Z9AQIgOOiorpvTOzxHCFaLJjc0ntzp6Y4EJY3Gtb9pkzPyhjA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28299},"module":"fesm2022/dayflow-blossom-color-picker-angular.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/dayflow-blossom-color-picker-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"e6ee764010b533d84cd7cc365dc7a64ee1aa81ca","typings":"index.d.ts","_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/angular"},"_npmVersion":"11.7.0","description":"Angular wrapper for Blossom Color Picker","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.19.0","dependencies":{"tslib":"^2.3.0","@dayflow/blossom-color-picker":"^2.0.1"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@angular/common":">=16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-angular_1.0.1_1770725252107_0.9617786991306265","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@dayflow/blossom-color-picker-angular","version":"1.1.0","keywords":["angular","color-picker","blossom","ui-component","animation"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-angular@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":"ecf8e2f9e74589c6a8d49d14c1ab975e5acaf774","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-angular/-/blossom-color-picker-angular-1.1.0.tgz","fileCount":8,"integrity":"sha512-PAeKw+fgCI8EkMEKE/piRey9mcwHbeEvaR71dfaFyrhNiw//EmzZFAIG/mwrYksnL9um9AJtWpnIaV8TnzQBLQ==","signatures":[{"sig":"MEUCIDvHII2H8cgfd0Sk3H7HGZsawq6pLn0bxt6Kwpc7dlacAiEAl5yH2sFclJcc5Kto3FmWIivlFCTQLunuAT+2q0nu2es=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29529},"module":"fesm2022/dayflow-blossom-color-picker-angular.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/dayflow-blossom-color-picker-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"ee901ab4ede65aeeb1d90fbbc10768d415c31be1","typings":"index.d.ts","_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/angular"},"_npmVersion":"11.7.0","description":"Angular wrapper for Blossom Color Picker","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.19.0","dependencies":{"tslib":"^2.3.0","@dayflow/blossom-color-picker":"^2.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@angular/common":">=16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-angular_1.1.0_1772620461181_0.8313055946742602","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@dayflow/blossom-color-picker-angular","version":"1.2.0","keywords":["angular","animation","blossom","color-picker","ui-component"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-angular@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":"76c18fe8f6ae12d3e43d218ec0568953e52180cd","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-angular/-/blossom-color-picker-angular-1.2.0.tgz","fileCount":9,"integrity":"sha512-7MSekVTJEMLt+wFYIN720nOIWbN156pKveKP1tHdSo+zka2zS21GE97EWlhFYI+MgKGbLZhuJU6CAcDaFVaPDg==","signatures":[{"sig":"MEUCIAkAr9SoYPOy8gClV+Ri71n/COD3C2YbcRLFAKVVMnx1AiEA7P17t1rFpfeURBFcMT8TPVwt6lW+EtDMhhCxK6Racrk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45038},"module":"fesm2022/dayflow-blossom-color-picker-angular.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/dayflow-blossom-color-picker-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"a968994589cdbaeb51e46c07a092274e2eec3d14","typings":"index.d.ts","_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/angular"},"_npmVersion":"11.7.0","description":"Angular wrapper for Blossom Color Picker","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.19.0","dependencies":{"tslib":"^2.3.0","@dayflow/blossom-color-picker":"^2.2.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@angular/common":">=16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-angular_1.2.0_1774925285960_0.9003576438928846","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@dayflow/blossom-color-picker-angular","version":"1.2.1","keywords":["angular","animation","blossom","color-picker","ui-component"],"author":{"name":"Jayce Li"},"license":"MIT","_id":"@dayflow/blossom-color-picker-angular@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":"39046badb7240221ee197011328e8f5dcd8a8ba9","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-angular/-/blossom-color-picker-angular-1.2.1.tgz","fileCount":9,"integrity":"sha512-VpcdIRs6szaMkMT45CJvcTC3VdfMe8kS6gR3uvffZc4KqjV6Q+CiXjzoiYBh7C/B0uPZFXnq4KiCoDlmwLIt6A==","signatures":[{"sig":"MEUCIFAoWAMuJfE3VIEz06W3jJ1QB8oZ4lfzXBVDBKmojMaRAiEA4p8gUjWXSlsEhLlr9xHijv3j8VO7XSa1zw802Ba5w2w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45038},"module":"fesm2022/dayflow-blossom-color-picker-angular.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/dayflow-blossom-color-picker-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"7cfb9d8e2da598548ab41ad89ac0afc319b0ec46","typings":"index.d.ts","_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/angular"},"_npmVersion":"11.7.0","description":"Angular wrapper for Blossom Color Picker","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.19.0","dependencies":{"tslib":"^2.3.0","@dayflow/blossom-color-picker":"^2.2.1"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@angular/common":">=16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/blossom-color-picker-angular_1.2.1_1777989556441_0.9048889498005481","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"_id":"@dayflow/blossom-color-picker-angular@1.3.0","bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"dist":{"shasum":"516002b080ec8771c8cf33beaab83213a63e59ba","tarball":"https://registry.npmjs.org/@dayflow/blossom-color-picker-angular/-/blossom-color-picker-angular-1.3.0.tgz","fileCount":6,"integrity":"sha512-DxnyPsGlZffyuJpitkSrPgnLof5vhhJJbcHnRXYX/2PK1ag07zZy0OYhCzhcS2BUjPGelArua0N4El3oslfg9Q==","signatures":[{"sig":"MEQCIHivYQA4UPCrJdA/1ZDwL3BZQGApXTbxu1Zw4ZNtCWx/AiBjSE7Qq2K6uznxQVUwXf2nEplwr5pGHJFHfU9wcvLEsw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBPA4A6aAOmVKB47m/8ITW1dgarxID1HqBZDIlEcrYFiAiBe9UGbDMbCDzm/jJ8UyCAv8GEwDul/VDv7QL5M4m74qQ=="}],"unpackedSize":43618},"name":"@dayflow/blossom-color-picker-angular","type":"module","_from":"file:dayflow-blossom-color-picker-angular-1.3.0.tgz","author":{"name":"Jayce Li"},"module":"fesm2022/dayflow-blossom-color-picker-angular.mjs","exports":{".":{"types":"./types/dayflow-blossom-color-picker-angular.d.ts","default":"./fesm2022/dayflow-blossom-color-picker-angular.mjs"},"./package.json":{"default":"./package.json"}},"license":"MIT","typings":"types/dayflow-blossom-color-picker-angular.d.ts","version":"1.3.0","_npmUser":{"name":"jayceli","email":"lijuncai552@gmail.com"},"homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","keywords":["angular","animation","blossom","color-picker","ui-component"],"_resolved":"/private/var/folders/m4/c6nx4v2d50z61pb3qjfmnq_c0000gq/T/c59379b1ccdf002b90c6c2d96e9e1d23/dayflow-blossom-color-picker-angular-1.3.0.tgz","_integrity":"sha512-DxnyPsGlZffyuJpitkSrPgnLof5vhhJJbcHnRXYX/2PK1ag07zZy0OYhCzhcS2BUjPGelArua0N4El3oslfg9Q==","repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/angular"},"_npmVersion":"11.7.0","description":"Angular wrapper for Blossom Color Picker","directories":{},"maintainers":[{"name":"jayceli","email":"lijuncai552@gmail.com"}],"sideEffects":["*.css"],"_nodeVersion":"22.19.0","dependencies":{"tslib":"^2.3.0","@dayflow/blossom-color-picker":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^22.0.0","@angular/common":"^22.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/blossom-color-picker-angular_1.3.0_1788996931712_0.8570928601730965"}}},"time":{"created":"2026-02-09T07:44:54.629Z","modified":"2026-09-09T23:35:32.000Z","1.0.0":"2026-02-09T07:44:54.889Z","1.0.1":"2026-02-10T12:07:32.332Z","1.1.0":"2026-03-04T10:34:21.322Z","1.2.0":"2026-03-31T02:48:06.101Z","1.2.1":"2026-05-05T13:59:16.587Z","1.3.0":"2026-09-09T23:35:31.789Z"},"bugs":{"url":"https://github.com/dayflow-js/BlossomColorPicker/issues"},"author":{"name":"Jayce Li"},"license":"MIT","homepage":"https://github.com/dayflow-js/BlossomColorPicker#readme","keywords":["angular","animation","blossom","color-picker","ui-component"],"repository":{"url":"git+https://github.com/dayflow-js/BlossomColorPicker.git","type":"git","directory":"packages/angular"},"description":"Angular 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\nThe current Angular wrapper requires Angular 22. Its build tooling uses Node.js 24 and TypeScript 6.0.\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"}