//
A beautiful, blooming radial color picker with concentric rings, saturation slider, and alpha panel.
bun add xiod-ui1import { BlossomColorPicker, ColorPicker } from "xiod-ui/color-picker";1<ColorPicker>2 <BlossomColorPicker />3</ColorPicker>| Prop | Type | Default | Description |
|---|---|---|---|
value | BlossomColorPickerValue| undefined | - | |
defaultValue | BlossomColorPickerValue| undefined | - | |
colors | ColorInput[]| undefined | - | |
onChange | ((color: BlossomColorPickerColor) => void)| undefined | - | |
onCollapse | ((color: BlossomColorPickerColor) => void)| undefined | - | |
disabled | boolean| undefined | false | |
openOnHover | boolean| undefined | false | |
initialExpanded | boolean| undefined | false | |
animationDuration | number| undefined | 300 | |
showAlphaSlider | boolean| undefined | true | |
showOpacitySlider | boolean| undefined | true | |
coreSize | number| undefined | 32 | |
petalSize | number| undefined | 32 | |
showCoreColor | boolean| undefined | true | |
sliderPosition | SliderPosition| undefined | - | |
adaptivePositioning | boolean| undefined | true | |
circularBarWidth | number| undefined | 12 | |
sliderWidth | number| undefined | 12 | |
sliderOffset | number| undefined | 30 | |
collapsible | boolean| undefined | true | |
ref | Ref<HTMLDivElement>| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
darkMode | boolean| undefined | - | |
className | string| undefined | - | |
defaultValue | BlossomColorPickerValue| undefined | - | |
onChange | ((color: BlossomColorPickerColor) => void)| undefined | - | |
disabled | boolean| undefined | false | |
value | BlossomColorPickerValue| undefined | - | |
openOnHover | boolean| undefined | false | |
colors | ColorInput[]| undefined | - | |
onCollapse | ((color: BlossomColorPickerColor) => void)| undefined | - | |
initialExpanded | boolean| undefined | true | |
animationDuration | number| undefined | 300 | |
showAlphaSlider | boolean| undefined | true | |
showOpacitySlider | boolean| undefined | - | |
coreSize | number| undefined | 36 | |
petalSize | number| undefined | 32 | |
showCoreColor | boolean| undefined | true | |
sliderPosition | SliderPosition| undefined | - | |
adaptivePositioning | boolean| undefined | true | |
circularBarWidth | number| undefined | 12 | |
sliderWidth | number| undefined | 12 | |
sliderOffset | number| undefined | 30 | |
collapsible | boolean| undefined | false | |
ref | Ref<HTMLDivElement>| undefined | - |