Fix color picker syncing, update components to tailwind ui, display all formats at once

src/utils/colors.ts

@@ -259,17 +259,18 @@ export function oklchToString(l: number, c: number, h: number): string {
 }
 
 // Function to find the closest Tailwind color using CIELAB color space
-export function findClosestTailwindColor(color: string): { name: string; hex: string; oklch: string } {
+export function findClosestTailwindColor(color: string): { name: string; hex: string; oklch: string; isExactMatch: boolean } {
   const rgb1 = color.startsWith('oklch') 
     ? oklchToRgb(...Object.values(parseOklch(color) || { l: 0, c: 0, h: 0 }))
     : hexToRgb(color)
 
-  if (!rgb1) return { name: 'Invalid color', hex: color, oklch: '' }
+  if (!rgb1) return { name: 'Invalid color', hex: color, oklch: '', isExactMatch: false }
 
   let closestColor = ''
   let closestHex = ''
   let closestOklch = ''
   let minDistance = Infinity
+  let isExactMatch = false
 
   const lab1 = rgbToLab(rgb1.r, rgb1.g, rgb1.b)
 
@@ -281,7 +282,13 @@ export function findClosestTailwindColor(color: string): { name: string; hex: st
       const lab2 = rgbToLab(rgb2.r, rgb2.g, rgb2.b)
       const distance = deltaE(lab1, lab2)
 
-      if (distance < minDistance) {
+      if (distance === 0) {
+        isExactMatch = true
+        closestColor = `${colorName}-${shade}`
+        closestHex = values.hex
+        closestOklch = values.oklch
+        minDistance = 0
+      } else if (distance < minDistance && !isExactMatch) {
         minDistance = distance
         closestColor = `${colorName}-${shade}`
         closestHex = values.hex
@@ -290,7 +297,7 @@ export function findClosestTailwindColor(color: string): { name: string; hex: st
     })
   })
 
-  return { name: closestColor, hex: closestHex, oklch: closestOklch }
+  return { name: closestColor, hex: closestHex, oklch: closestOklch, isExactMatch }
 }
 
 // CIELAB color space conversion functions