[WEB-3540] dev: color picker component (#6823)

* dev: color picker component added

* chore: helper function added

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

packages/ui/src/color-picker/color-picker.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+interface ColorPickerProps {
+  value: string;
+  onChange: (color: string) => void;
+  className?: string;
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = (props) => {
+  const { value, onChange, className = "" } = props;
+  // refs
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // handlers
+  const handleOnClick = () => {
+    inputRef.current?.click();
+  };
+
+  return (
+    <div className="flex items-center justify-center relative">
+      <button
+        className={`size-4 rounded-full cursor-pointer conical-gradient ${className}`}
+        onClick={handleOnClick}
+        aria-label="Open color picker"
+      />
+      <input
+        ref={inputRef}
+        type="color"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="absolute inset-0 size-4 invisible"
+        aria-hidden="true"
+      />
+    </div>
+  );
+};

packages/ui/src/color-picker/index.ts

@@ -0,0 +1 @@
+export * from "./color-picker";

packages/ui/src/index.ts

@@ -31,3 +31,4 @@ export * from "./card";
 export * from "./tag";
 export * from "./tabs";
 export * from "./calendar";
+export * from "./color-picker";