diff --git a/components/ui/color-picker.tsx b/components/ui/color-picker.tsx
index 8308c44..28dd035 100644
--- a/components/ui/color-picker.tsx
+++ b/components/ui/color-picker.tsx
@@ -90,7 +90,7 @@ export const ColorPicker = ({
         onChange([rgba[0], rgba[1], rgba[2], next.alpha / 100])
       }
     },
-    [onChange],
+    [onChange, setHueState, setSaturationState, setLightnessState, setAlphaState],
   )
 
   const setHue = useCallback((next: number) => updateColor({ hue: next }), [updateColor])
@@ -119,6 +119,8 @@ export const ColorPicker = ({
       }
 
       channelsRef.current = next
+      // Synchronize the internal channels when the controlled value changes.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setHueState(next.hue)
       setSaturationState(next.saturation)
       setLightnessState(next.lightness)
@@ -141,7 +143,7 @@ export const ColorPicker = ({
         setMode,
       }}
     >
-      <div className={cn("flex size-full flex-col gap-4", className)} {...(props as any)} />
+      <div className={cn("flex size-full flex-col gap-4", className)} {...props} />
     </ColorPickerContext.Provider>
   )
 }
@@ -198,7 +200,7 @@ export const ColorPickerSelection = memo(({ className, ...props }: ColorPickerSe
       style={{
         background: backgroundGradient,
       }}
-      {...(props as any)}
+      {...props}
     >
       <div
         className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute h-4 w-4 rounded-full border-2 border-white"
@@ -226,7 +228,7 @@ export const ColorPickerHue = ({ className, ...props }: ColorPickerHueProps) =>
       onValueChange={([hue]) => setHue(hue)}
       step={1}
       value={[hue]}
-      {...(props as any)}
+      {...props}
     >
       <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
         <Slider.Range className="absolute h-full" />
@@ -248,7 +250,7 @@ export const ColorPickerAlpha = ({ className, ...props }: ColorPickerAlphaProps)
       onValueChange={([alpha]) => setAlpha(alpha)}
       step={1}
       value={[alpha]}
-      {...(props as any)}
+      {...props}
     >
       <Slider.Track
         className="relative my-0.5 h-3 w-full grow rounded-full"
@@ -294,9 +296,9 @@ export const ColorPickerEyeDropper = ({ className, ...props }: ColorPickerEyeDro
       size="icon"
       type="button"
       variant="outline"
-      {...(props as any)}
+      {...props}
     >
-      <PipetteIcon size={16} />
+      <PipetteIcon />
     </Button>
   )
 }
@@ -315,7 +317,7 @@ export const ColorPickerOutput = ({ className, ...props }: ColorPickerOutputProp
       }}
       value={mode}
     >
-      <SelectTrigger className="h-8 w-20 shrink-0 text-xs" {...(props as any)}>
+      <SelectTrigger className={cn("h-8 w-20 shrink-0 text-xs", className)} {...props}>
         <SelectValue placeholder="Mode" />
       </SelectTrigger>
       <SelectContent>
@@ -337,7 +339,7 @@ const PercentageInput = ({ className, ...props }: PercentageInputProps) => {
       <Input
         readOnly
         type="text"
-        {...(props as any)}
+        {...props}
         className={cn(
           "h-8 w-[3.25rem] rounded-l-none bg-secondary px-2 text-xs shadow-none",
           className,
@@ -365,7 +367,7 @@ export const ColorPickerFormat = ({ className, ...props }: ColorPickerFormatProp
           "-space-x-px relative flex w-full items-center rounded-md shadow-sm",
           className,
         )}
-        {...(props as any)}
+        {...props}
       >
         <Input
           className="h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none"
@@ -387,7 +389,7 @@ export const ColorPickerFormat = ({ className, ...props }: ColorPickerFormatProp
     return (
       <div
         className={cn("-space-x-px flex items-center rounded-md shadow-sm", className)}
-        {...(props as any)}
+        {...props}
       >
         {rgb.map((value, index) => (
           <Input
@@ -414,13 +416,12 @@ export const ColorPickerFormat = ({ className, ...props }: ColorPickerFormatProp
       .map(value => Math.round(value))
 
     return (
-      <div className={cn("w-full rounded-md shadow-sm", className)} {...(props as any)}>
+      <div className={cn("w-full rounded-md shadow-sm", className)} {...props}>
         <Input
           className="h-8 w-full bg-secondary px-2 text-xs shadow-none"
           readOnly
           type="text"
           value={`rgba(${rgb.join(", ")}, ${alpha}%)`}
-          {...(props as any)}
         />
       </div>
     )
@@ -435,7 +436,7 @@ export const ColorPickerFormat = ({ className, ...props }: ColorPickerFormatProp
     return (
       <div
         className={cn("-space-x-px flex items-center rounded-md shadow-sm", className)}
-        {...(props as any)}
+        {...props}
       >
         {hsl.map((value, index) => (
           <Input