Add an eyedropper to the ColorPicker

[scarlet echo]

There is experimental browser support for an eyedropper tool that even works for screen area outside of the browser https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper. The current browser support is only 26% (https://caniuse.com/mdn-api_eyedropper) but that's partially because this feature doesn't make too much sense on mobile.

Would you be interested in adding an eyedropper prop to the <ColorPicker /> component? The eyedropper prop would determine if the tool was shown. Possible values are:

• "never" Do not show eyedropper (default).
• "where-supported" Only show if browser supports it.
• "always" Fade eyedropper if browser does not support it.

If you are just not willing to implement it now, are there any changes to the API that could be included in a github issue for when it would be added?

[eager rover]

I find this feature interesting although I do not have time to work on it right now, do you want to send a PR with it?

[scarlet echo]

I'll certainly give it a try. Does the API look good to you?

[eager rover]

I'd just add withEyedropper boolean prop, if it is false or api is not available then the icon should be hidden, otherwise it should be shown

It's also a good idea to implement eyedropper as separate component and then use it in ColorPicker/ColorInput

[scarlet echo]

Sounds good 👍

[scarlet echo]

So, I've got something mostly working, but it's not great. I can't easily test it since I upgraded to Ubuntu 22.04 which uses Wayland instead of Xorg and that breaks eyedropper support in Chrome 104. I'll keep what I have so far, and check on it again when support seems better.

In case someone is in a better situation to test it, here's the code: https://github.com/nmay231/mantine/tree/color-picker-eyedropper