Color Picker

1'use client'
2 
3import { forwardRef, useEffect, useRef, type HTMLAttributes, type Ref } from 'react'
4 
5import { cn } from '@/lib/utils'
6import {
7  BlossomColorPicker as LocalBlossomColorPicker,
8  type BlossomColorPickerOptions,
9} from './blossom picker/BlossomColorPicker'
10import { DEFAULT_COLORS, INNER_COLORS, OUTER_COLORS } from './blossom picker/constants'
11import { blossomPickerStyles } from './blossom picker/styles'
12import type {
13  BlossomColorPickerColor,
14  BlossomColorPickerValue,
15  ColorInput,
16  SliderPosition,
17} from './blossom picker/types'
18import {
19  createColorOutput,
20  getVisualSaturation,
21  hexToHsl,
22  hslToHex,
23  hslToRgb,
24  hslToString,
25  hslaToString,
26  lightnessToSliderValue,
27  organizeColorsIntoLayers,
28  parseColor,
29  rgbaToString,
30  rgbToHsl,
31  sliderValueToLightness,
32} from './blossom picker/utils'
33 
34export type BlossomPickerVariant = 'blossom' | 'blossom-arc'
35 
36export type BlossomPickerValue = BlossomColorPickerValue
37export type BlossomPickerColor = BlossomColorPickerColor
38export type { ColorInput, SliderPosition }
39 
40export interface BlossomPickerProps
41  extends
42    Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value'>,
43    BlossomColorPickerOptions {
44  variant?: BlossomPickerVariant
45}
46 
47export type { BlossomColorPickerValue, BlossomColorPickerColor, BlossomColorPickerOptions }
48export type ColorPickerProps = BlossomPickerProps
49 
50function propsToOptions(props: BlossomPickerProps): Partial<BlossomColorPickerOptions> {
51  const options: Partial<BlossomColorPickerOptions> = {}
52 
53  if (props.value !== undefined) options.value = props.value
54  if (props.defaultValue !== undefined) options.defaultValue = props.defaultValue
55  if (props.colors !== undefined) options.colors = props.colors
56  if (props.onChange !== undefined) options.onChange = props.onChange
57  if (props.onCollapse !== undefined) options.onCollapse = props.onCollapse
58  if (props.disabled !== undefined) options.disabled = props.disabled
59  if (props.openOnHover !== undefined) options.openOnHover = props.openOnHover
60  if (props.initialExpanded !== undefined) {
61    options.initialExpanded = props.initialExpanded
62  }
63  if (props.animationDuration !== undefined) {
64    options.animationDuration = props.animationDuration
65  }
66  if (props.showAlphaSlider !== undefined) {
67    options.showAlphaSlider = props.showAlphaSlider
68  }
69  if (props.coreSize !== undefined) options.coreSize = props.coreSize
70  if (props.petalSize !== undefined) options.petalSize = props.petalSize
71// … truncated