Color Picker is not working (it is WIP on the official website), but I managed to make it work using Popover component

[MuhammadSawalhy]

The color picker component is not ready to use yet, but it is working in the official website of Ark UI. So, I tried to add and compose multiple components from Park UI together to make it works.

Here is the final code I used in a Solid.js project:

    <div style={{ "--color": colorValue() }}>
      <Popover.Root>
        <Popover.Trigger>
          <button
            type="button"
            class={css({
              width: '24px',
              height: '24px',
              borderRadius: 'md',
              padding: '0',
              border: '2px solid transparent',
              transition: 'all 0.2s',
              bg: 'var(--color)',
              _hover: {
                transform: 'scale(1.1)',
                boxShadow: 'md',
              }
            })}
          />
        </Popover.Trigger>
        <Popover.Positioner>
          <Popover.Content>
            <Popover.CloseTrigger>
              <CloseButton size={'sm'} />
            </Popover.CloseTrigger>
            <Popover.Arrow>
              <Popover.ArrowTip />
            </Popover.Arrow>
            <Popover.Body
              class={stack({
                gap: 2,
              })}
            >
              <ColorPicker.Root value={parseColor(colorValue())} onValueChange={handleColorChange} open>
                <ColorPicker.Content>
                  <ColorPicker.SwatchGroup>
                    <For each={colorSwatches}>
                      {(color) => (
                        <ColorPicker.SwatchTrigger value={color}>
                          <ColorPicker.Swatch value={color}>
                            <ColorPicker.SwatchIndicator color={'white'}>✓</ColorPicker.SwatchIndicator>
                          </ColorPicker.Swatch>
                        </ColorPicker.SwatchTrigger>
                      )}
                    </For>
                  </ColorPicker.SwatchGroup>
                  <details >
                    <summary>
                      Pick your color
                    </summary>
                    <div class={stack({ gap: 2, pt: 2 })}>
                      <ColorPicker.FormatSelect />
                      <ColorPicker.Area>
                        <ColorPicker.AreaBackground />
                        <ColorPicker.AreaThumb />
                      </ColorPicker.Area>
                      <HStack>
                        <ColorPicker.EyeDropperTrigger>
                          <IconButton variant={'outline'}>
                            <IconColorPicker />
                          </IconButton>
                        </ColorPicker.EyeDropperTrigger>
                        <Stack width="full">
                          <ColorPicker.ChannelSlider channel="hue" width="full">
                            <ColorPicker.ChannelSliderTrack />
                            <ColorPicker.ChannelSliderThumb />
                          </ColorPicker.ChannelSlider>
                          <ColorPicker.ChannelSlider channel="alpha" width="full">
                            <ColorPicker.TransparencyGrid />
                            <ColorPicker.ChannelSliderTrack />
                            <ColorPicker.ChannelSliderThumb />
                          </ColorPicker.ChannelSlider>
                        </Stack>
                      </HStack>
                      <ColorPicker.View format="rgba">
                        <ColorPicker.ChannelInput channel="hex" />
                        <ColorPicker.ChannelInput channel="alpha" />
                      </ColorPicker.View>
                      <ColorPicker.View format="hsla">
                        <ColorPicker.ChannelInput channel="hue" />
                        <ColorPicker.ChannelInput channel="saturation" />
                        <ColorPicker.ChannelInput channel="lightness" />
                      </ColorPicker.View>
                    </div>
                  </details>
                </ColorPicker.Content>
                <ColorPicker.HiddenInput />
              </ColorPicker.Root>
            </Popover.Body>
          </Popover.Content>
        </Popover.Positioner>
      </Popover.Root>
    </div>