Color Picker in five frameworks

import { ColorPicker } from '@hamur/react/color-picker'
import { ColorSwatchPicker } from '@hamur/react/color-swatch-picker'
import { Field } from '@hamur/react/field'

const presets = ['#e5484d', '#f76b15', '#ffc53d', '#46a758', '#0090ff', '#8e4ec6']

export default function ColorPickerExample() {
  return (
    <Field.Root className="field">
      <Field.Label>Accent color</Field.Label>
      <ColorPicker.Root className="color-picker-row" defaultValue="#6699cc">
        <ColorPicker.Trigger className="button color-picker-trigger">
          <ColorPicker.Swatch className="color-swatch" />
        </ColorPicker.Trigger>
        <ColorPicker.Value className="color-picker-value" />
        <ColorPicker.Portal>
          <ColorPicker.Positioner sideOffset={8}>
            <ColorPicker.Popup className="popover color-picker-popup">
              <ColorPicker.Area className="color-picker-area">
                <ColorPicker.AreaThumb className="color-picker-thumb" />
              </ColorPicker.Area>
              <ColorPicker.ChannelSlider
                channel="hue"
                className="color-picker-slider"
              >
                <ColorPicker.ChannelSliderThumb
                  className="color-picker-thumb"
                />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider
                channel="alpha"
                className="color-picker-slider color-picker-alpha"
              >
                <ColorPicker.ChannelSliderThumb
                  className="color-picker-thumb"
                />
              </ColorPicker.ChannelSlider>
              <ColorPicker.Input className="input color-picker-input" />
              <ColorSwatchPicker.Root className="color-swatch-picker" aria-label="Presets">
                {presets.map((color) => (
                  <ColorSwatchPicker.Item
                    key={color}
                    value={color}
                    className="color-swatch-picker-item"
                  />
                ))}
              </ColorSwatchPicker.Root>
              <ColorPicker.Close className="button">
                Done
              </ColorPicker.Close>
            </ColorPicker.Popup>
          </ColorPicker.Positioner>
        </ColorPicker.Portal>
      </ColorPicker.Root>
    </Field.Root>
  )
}