feat(ui): add ColorPicker component and replace native color input in RoleEditModal

src/features/admin/components/RoleEditModal.client.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Input, Textarea, Switch, Modal } from '@zen/core/shared/components';
+import { Input, Textarea, Switch, Modal, ColorPicker } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
 import { getPermissionGroups } from '@zen/core/users/constants';
 
@@ -136,18 +136,13 @@ const RoleEditModal = ({ roleId, isOpen, onClose, onSaved }) => {
                             rows={2}
                             placeholder="Description optionnelle..."
                         />
-                        <div className="flex items-center gap-3">
-                            <label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
-                                Couleur
-                            </label>
-                            <input
-                                type="color"
-                                value={color}
-                                onChange={(e) => setColor(e.target.value)}
-                                className="w-8 h-8 rounded cursor-pointer border border-neutral-200 dark:border-neutral-700"
-                            />
-                            <span className="text-xs text-neutral-500">{color}</span>
-                        </div>
+                        <ColorPicker
+                            label="Couleur du rôle"
+                            description="Les membres utilisent la couleur du rôle le plus élevé qu'ils possèdent."
+                            value={color}
+                            onChange={setColor}
+                            required
+                        />
                     </div>
 
                     <div className="flex flex-col gap-3">
@@ -155,7 +150,7 @@ const RoleEditModal = ({ roleId, isOpen, onClose, onSaved }) => {
                         {Object.entries(PERMISSION_GROUPS).map(([group, perms]) => (
                             <div key={group} className="rounded-xl border border-neutral-200 dark:border-neutral-700/60 overflow-hidden">
                                 <div className="px-4 py-2.5 bg-neutral-50 dark:bg-neutral-800/60 border-b border-neutral-200 dark:border-neutral-700/60">
-                                    <p className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide">
+                                    <p className="text-[11px] font-medium font-ibm-plex-mono text-neutral-500 dark:text-neutral-400 uppercase tracking-wide">
                                         {group}
                                     </p>
                                 </div>